Merge branch 'master' into bilalqamar95/frontend-platform-upgrade

src/components/NavigationBar/data/slice.js

@@ -13,6 +13,7 @@ const slice = createSlice({
     tabs: [],
     courseTitle: null,
     courseNumber: null,
+    isEnrolled: false,
     org: null,
   },
   reducers: {

src/discussions/common/ActionsDropdown.jsx

@@ -48,7 +48,8 @@ const ActionsDropdown = ({
     }
   }, [actions, isPostingEnabled]);
 
-  const onClickButton = useCallback(() => {
+  const onClickButton = useCallback((event) => {
+    event.preventDefault();
     setTarget(buttonRef.current);
     open();
   }, [open]);

src/discussions/data/selectors.js

@@ -1,3 +1,5 @@
+import { createSelector } from '@reduxjs/toolkit';
+
 import { PostsStatusFilter, ThreadType } from '../../data/constants';
 
 export const selectAnonymousPostingConfig = state => ({
@@ -60,3 +62,24 @@ export function selectTopicThreadCount(topicId) {
 export function selectPostThreadCount(state) {
   return state.threads.totalThreads;
 }
+
+export const selectIsUserLearner = createSelector(
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+  selectUserIsStaff,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  (
+    userHasModerationPrivileges,
+    userIsGroupTa,
+    userIsStaff,
+    userIsCourseAdmin,
+    userIsCourseStaff,
+  ) => (
+    !userHasModerationPrivileges
+    && !userIsGroupTa
+    && !userIsStaff
+    && !userIsCourseAdmin
+    && !userIsCourseStaff
+  ),
+);

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -12,14 +12,14 @@ import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { Spinner } from '../../components';
 import selectCourseTabs from '../../components/NavigationBar/data/selectors';
-import { LOADED } from '../../components/NavigationBar/data/slice';
+import { LOADING } from '../../components/NavigationBar/data/slice';
 import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants';
 import DiscussionContext from '../common/context';
 import ContentUnavailable from '../course-content-unavailable/CourseContentUnavailable';
 import {
   useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible,
 } from '../data/hooks';
-import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
+import { selectDiscussionProvider, selectEnableInContext, selectIsUserLearner } from '../data/selectors';
 import { EmptyLearners, EmptyTopics } from '../empty-posts';
 import EmptyPosts from '../empty-posts/EmptyPosts';
 import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
@@ -46,6 +46,7 @@ const DiscussionsHome = () => {
   const {
     courseNumber, courseTitle, org, courseStatus, isEnrolled,
   } = useSelector(selectCourseTabs);
+  const isUserLearner = useSelector(selectIsUserLearner);
   const pageParams = useMatch(ROUTES.COMMENTS.PAGE)?.params;
   const page = pageParams?.page || null;
   const matchPattern = ALL_ROUTES.find((route) => matchPath({ path: route }, location.pathname));
@@ -84,7 +85,7 @@ const DiscussionsHome = () => {
         )}
         <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
           {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-          {(isEnrolled || enableInContextSidebar) && (
+          {(isEnrolled || !isUserLearner || enableInContextSidebar) && (
           <div
             className={classNames('header-action-bar bg-white position-sticky', {
               'shadow-none border-light-300 border-bottom': enableInContextSidebar,
@@ -125,9 +126,9 @@ const DiscussionsHome = () => {
             </Routes>
           </Suspense>
           )}
-          {(courseStatus === LOADED || enableInContextSidebar) && (
+          {(courseStatus !== LOADING || enableInContextSidebar) && (
           <div>
-            { isEnrolled === false ? (
+            { isEnrolled === false && isUserLearner ? (
               <Suspense fallback={(<Spinner />)}>
                 <Routes>
                   {ALL_ROUTES.map((route) => (

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -212,6 +212,7 @@ describe('ThreadView', () => {
       })];
     });
     axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { isPostingEnabled: true });
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await executeThunk(fetchCourseCohorts(courseId), store.dispatch, store.getState);

src/discussions/post-comments/comments/comment/CommentEditor.jsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useContext, useRef } from 'react';
+import React, {
+  useCallback, useContext, useEffect, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { Button, Form, StatefulButton } from '@openedx/paragon';
@@ -35,6 +37,7 @@ const CommentEditor = ({
   } = comment;
   const intl = useIntl();
   const editorRef = useRef(null);
+  const formRef = useRef(null);
   const { authenticatedUser } = useContext(AppContext);
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -88,6 +91,12 @@ const CommentEditor = ({
   // the current comment id, or the current comment parent or the curren thread.
   const editorId = `comment-editor-${id || parentId || threadId}`;
 
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [formRef]);
+
   return (
     <Formik
       initialValues={initialValues}
@@ -103,7 +112,7 @@ const CommentEditor = ({
         handleChange,
         resetForm,
       }) => (
-        <Form onSubmit={handleSubmit} className={formClasses}>
+        <Form onSubmit={handleSubmit} className={formClasses} ref={formRef}>
           {canDisplayEditReason && (
             <Form.Group
               isInvalid={isFormikFieldInvalid('editReasonCode', {