Move clickable username behind the discussions.enable_learners_tab_in_discussions_mfe (#247)

* fix: move clickable user name behind the discussions.enable_learners_tab_in_discussions_mfe flag

* test: fix fail test cases for clickable username

src/discussions/comments/comment/Reply.jsx

@@ -75,7 +75,10 @@ function Reply({
             }}
           />
         </div>
-        <div className="bg-light-300 px-4 pb-2 pt-2.5 flex-fill">
+        <div
+          className="bg-light-300 px-4 pb-2 pt-2.5 flex-fill"
+          style={{ borderRadius: '0rem 0.375rem 0.375rem' }}
+        >
           <div className="d-flex flex-row justify-content-between align-items-center mb-0.5">
             <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
             <ActionsDropdown

src/discussions/common/AuthorLabel.jsx

@@ -2,6 +2,7 @@ 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';
@@ -9,6 +10,7 @@ import { Icon } from '@edx/paragon';
 import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
+import { selectLearnersTabEnabled } from '../data/selectors';
 import messages from '../messages';
 import { discussionsPath } from '../utils';
 import { DiscussionContext } from './context';
@@ -22,6 +24,7 @@ function AuthorLabel({
 }) {
   const location = useLocation();
   const { courseId } = useContext(DiscussionContext);
+  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
   let icon = null;
   let authorLabelMessage = null;
 
@@ -72,7 +75,7 @@ function AuthorLabel({
     </div>
   );
 
-  return linkToProfile && author
+  return linkToProfile && author && learnersTabEnabled
     ? (
       <Link
         data-testid="learner-posts-link"

src/discussions/posts/post/PostLink.test.jsx

@@ -1,17 +1,23 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
 
 import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
 import { DiscussionContext } from '../../common/context';
+import { courseConfigApiUrl } from '../../data/api';
+import { fetchCourseConfig } from '../../data/thunks';
 import PostLink from './PostLink';
 
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
 let store;
+let axiosMock;
 
 function renderComponent(post, learnerTab = false) {
   return render(
@@ -81,12 +87,17 @@ describe('Post username', () => {
       },
     });
     store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+      learners_tab_enabled: true,
+    });
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
   });
 
   it.each([
     true,
     false,
-  ])('is a clickable link %s', (leanerTab) => {
+  ])('is a clickable link %s', async (leanerTab) => {
     renderComponent(mockPost, leanerTab);
 
     if (leanerTab) {