From b29f5d7c3478e7ff801cc648b7c8cb0672bc195c Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:09:53 +0500
Subject: [PATCH] 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   |  5 ++++-
 src/discussions/common/AuthorLabel.jsx       |  5 ++++-
 src/discussions/posts/post/PostLink.test.jsx | 13 ++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index a5a589cc..20efc806 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/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
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index d21a7595..83f6629c 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/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"
diff --git a/src/discussions/posts/post/PostLink.test.jsx b/src/discussions/posts/post/PostLink.test.jsx
index 54f645e9..6d9bfeb7 100644
--- a/src/discussions/posts/post/PostLink.test.jsx
+++ b/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) {