fix: learner tab is hidden from learners

src/discussions/common/AuthorLabel.jsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -10,7 +9,7 @@ import { Icon } from '@edx/paragon';
 import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
-import { selectLearnersTabEnabled } from '../data/selectors';
+import { useShowLearnersTab } from '../data/hooks';
 import messages from '../messages';
 import { discussionsPath } from '../utils';
 import { DiscussionContext } from './context';
@@ -24,7 +23,6 @@ function AuthorLabel({
 }) {
   const location = useLocation();
   const { courseId } = useContext(DiscussionContext);
-  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
   let icon = null;
   let authorLabelMessage = null;
 
@@ -41,6 +39,9 @@ function AuthorLabel({
 
   const className = classNames('d-flex align-items-center', labelColor);
 
+  const showUserNameAsLink = useShowLearnersTab()
+      && linkToProfile && author && author !== messages.anonymous;
+
   const labelContents = (
     <div className={className}>
       <span
@@ -75,7 +76,7 @@ function AuthorLabel({
     </div>
   );
 
-  return linkToProfile && author && learnersTabEnabled && author !== messages.anonymous
+  return showUserNameAsLink
     ? (
       <Link
         data-testid="learner-posts-link"

src/discussions/data/hooks.js

@@ -15,11 +15,11 @@ import { selectTopics } from '../topics/data/selectors';
 import { fetchCourseTopics } from '../topics/data/thunks';
 import { discussionsPath, postMessageToParent } from '../utils';
 import {
-  selectAreThreadsFiltered,
+  selectAreThreadsFiltered, selectLearnersTabEnabled,
   selectModerationSettings,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
-  selectUserIsGroupTa,
+  selectUserIsGroupTa, selectUserIsStaff, selectUserRoles,
 } from './selectors';
 import { fetchCourseConfig } from './thunks';
 
@@ -167,3 +167,13 @@ export const useAlertBannerVisible = (content) => {
     || (content.abuseFlagged && canSeeReportedBanner)
   );
 };
+
+export const useShowLearnersTab = () => {
+  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
+  const userRoles = useSelector(selectUserRoles);
+  const isAdmin = useSelector(selectUserIsStaff);
+  const IsGroupTA = useSelector(selectUserIsGroupTa);
+  const privileged = useSelector(selectUserHasModerationPrivileges);
+  const allowedUsers = isAdmin || IsGroupTA || privileged || (userRoles.includes('Student') && userRoles.length > 1);
+  return learnersTabEnabled && allowedUsers;
+};

src/discussions/data/selectors.js

@@ -16,6 +16,8 @@ export const selectconfigLoadingStatus = state => state.config.status;
 
 export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
 
+export const selectUserRoles = state => state.config.userRoles;
+
 export const selectDivisionSettings = state => state.config.settings;
 
 export const selectBlackoutDate = state => state.config.blackouts;

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -8,7 +8,7 @@ import {
 } from 'react-router';
 
 import { RequestStatus, Routes } from '../../data/constants';
-import { useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks';
+import { useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab } from '../data/hooks';
 import { selectconfigLoadingStatus, selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../data/selectors';
 import { LearnerPostsView, LearnersView } from '../learners';
 import { PostsView } from '../posts';
@@ -21,7 +21,7 @@ export default function DiscussionSidebar({ displaySidebar }) {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const configStatus = useSelector(selectconfigLoadingStatus);
-
+  const redirectToLearnersTab = useShowLearnersTab();
   return (
     <div
       className={classNames('flex-column', {
@@ -39,16 +39,21 @@ export default function DiscussionSidebar({ displaySidebar }) {
           component={PostsView}
         />
         <Route path={Routes.TOPICS.PATH} component={TopicsView} />
+        {redirectToLearnersTab && (
         <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
+        )}
+        {redirectToLearnersTab && (
         <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
+        )}
+
         {configStatus === RequestStatus.SUCCESSFUL && (
-          <Redirect
-            from={Routes.DISCUSSIONS.PATH}
-            to={{
-              ...location,
-              pathname: (userHasModerationPrivileges || userIsGroupTa) ? Routes.POSTS.ALL_POSTS : Routes.POSTS.MY_POSTS,
-            }}
-          />
+        <Redirect
+          from={Routes.DISCUSSIONS.PATH}
+          to={{
+            ...location,
+            pathname: (userHasModerationPrivileges || userIsGroupTa) ? Routes.POSTS.ALL_POSTS : Routes.POSTS.MY_POSTS,
+          }}
+        />
         )}
       </Switch>
     </div>

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -13,7 +13,7 @@ import { CourseTabsNavigation } from '../../components/NavigationBar';
 import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import {
-  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible,
+  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
 } from '../data/hooks';
 import { selectDiscussionProvider } from '../data/selectors';
 import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
@@ -34,6 +34,8 @@ export default function DiscussionsHome() {
 
   const { params: { path } } = useRouteMatch(`${Routes.DISCUSSIONS.PATH}/:path*`);
   const { params } = useRouteMatch(ALL_ROUTES);
+  const isRedirectToLearners = useShowLearnersTab();
+
   const {
     courseId,
     postId,
@@ -110,7 +112,7 @@ export default function DiscussionsHome() {
               path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.LEARNERS.POSTS]}
               render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyAllPosts} />}
             />
-            <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />
+            {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} /> }
           </Switch>
           )}
         </div>

src/discussions/navigation/navigation-bar/NavigationBar.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { useSelector } from 'react-redux';
 import { matchPath, useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 
@@ -8,13 +7,13 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Nav } from '@edx/paragon';
 
 import { Routes } from '../../../data/constants';
-import { selectLearnersTabEnabled } from '../../data/selectors';
+import { useShowLearnersTab } from '../../data/hooks';
 import { discussionsPath } from '../../utils';
 import messages from './messages';
 
 function NavigationBar({ intl }) {
   const { courseId } = useParams();
-  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
+  const showLearnersTab = useShowLearnersTab();
 
   const navLinks = [
     {
@@ -31,7 +30,7 @@ function NavigationBar({ intl }) {
       labelMessage: messages.allTopics,
     },
   ];
-  if (learnersTabEnabled) {
+  if (showLearnersTab) {
     navLinks.push({
       route: Routes.LEARNERS.PATH,
       labelMessage: messages.learners,