fix: clickable username in post, comments and responses (#234)

* fix: clickable username in post, rcomments and responses

* test: fix test case after clickable username

src/discussions/comments/CommentsView.test.jsx

@@ -12,6 +12,7 @@ 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 DiscussionContent from '../discussions-home/DiscussionContent';
@@ -81,16 +82,20 @@ function renderComponent(postId) {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
-          <DiscussionContent />
-          <Route
-            path="*"
-            render={({ location }) => {
-              testLocation = location;
-              return null;
-            }}
-          />
-        </MemoryRouter>
+        <DiscussionContext.Provider
+          value={{ courseId }}
+        >
+          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
+            <DiscussionContent />
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location;
+                return null;
+              }}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );

src/discussions/comments/comment/CommentHeader.jsx

@@ -39,7 +39,7 @@ function CommentHeader({
             height: '32px',
           }}
         />
-        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} labelColor={colorClass && `text-${colorClass}`} />
+        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
       </div>
       <div className="d-flex align-items-center">
         <span className="btn-icon btn-icon-sm mr-1 align-items-center">

src/discussions/comments/comment/CommentHeader.test.jsx

@@ -7,6 +7,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../../store';
+import { DiscussionContext } from '../../common/context';
 import CommentHeader from './CommentHeader';
 
 let store;
@@ -15,7 +16,11 @@ function renderComponent(comment, postType, actionHandlers) {
   return render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
+        <DiscussionContext.Provider
+          value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
+        >
+          <CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
+        </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );

src/discussions/comments/comment/Reply.jsx

@@ -77,7 +77,7 @@ function Reply({
         </div>
         <div className="rounded bg-light-300 px-4 pb-2 pt-2.5 flex-fill">
           <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}`} />
+            <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
             <ActionsDropdown
               commentOrPost={{
                 ...reply,

src/discussions/common/AlertBanner.jsx

@@ -36,7 +36,7 @@ function AlertBanner({
               <div className="d-flex align-items-center">
                 {intl.formatMessage(messages.editedBy)}
                 <span className="ml-1 mr-3">
-                  <AuthorLabel author={content.lastEdit.editorUsername} />
+                  <AuthorLabel author={content.lastEdit.editorUsername} linkToProfile />
                 </span>
                 {intl.formatMessage(messages.reason)}:&nbsp;{content.lastEdit.reason}
               </div>
@@ -47,7 +47,7 @@ function AlertBanner({
               <div className="d-flex align-items-center">
                 {intl.formatMessage(messages.closedBy)}
                 <span className="ml-1 ">
-                  <AuthorLabel author={content.closedBy} />
+                  <AuthorLabel author={content.closedBy} linkToProfile />
                 </span>
                 <span className="mx-1" />
                 {intl.formatMessage(messages.reason)}:&nbsp;{content.closeReason}

src/discussions/common/AlertBanner.test.jsx

@@ -9,6 +9,7 @@ import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../comments/messages';
 import AlertBanner from './AlertBanner';
+import { DiscussionContext } from './context';
 
 import '../comments/data/__factories__';
 import '../posts/data/__factories__';
@@ -26,9 +27,13 @@ function renderComponent(
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <AlertBanner
-          content={content}
-        />
+        <DiscussionContext.Provider
+          value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
+        >
+          <AlertBanner
+            content={content}
+          />
+        </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );
@@ -53,7 +58,7 @@ describe.each([
     label: 'edited content',
     type: 'thread',
     postType: null,
-    props: { last_edit: { reason: 'test-reason', editorUsername: 'editor-user' } },
+    props: { closed: false, last_edit: { reason: 'test-reason', editorUsername: 'editor-user' } },
     expectText: [messages.editedBy.defaultMessage, messages.reason.defaultMessage, 'editor-user', 'test-reason'],
   },
   {

src/discussions/common/AuthorLabel.jsx

@@ -72,10 +72,11 @@ function AuthorLabel({
     </div>
   );
 
-  return linkToProfile
+  return linkToProfile && author
     ? (
       <Link
         data-testid="learner-posts-link"
+        id="learner-posts-link"
         to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
         className="text-decoration-none"
         style={{ width: 'fit-content' }}

src/discussions/common/EndorsedAlertBanner.jsx

@@ -44,7 +44,7 @@ function EndorsedAlertBanner({
                   : messages.endorsedLabel,
               )}
             </span>
-            <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} />
+            <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} linkToProfile />
             {timeago.format(content.endorsedAt, intl.locale)}
           </span>
         </div>

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -8,6 +8,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../comments/messages';
+import { DiscussionContext } from './context';
 import EndorsedAlertBanner from './EndorsedAlertBanner';
 
 import '../comments/data/__factories__';
@@ -26,10 +27,14 @@ function renderComponent(
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <EndorsedAlertBanner
-          content={content}
-          postType={postType}
-        />
+        <DiscussionContext.Provider
+          value={{ courseId: 'course-v1:edX+DemoX+Demo_Course' }}
+        >
+          <EndorsedAlertBanner
+            content={content}
+            postType={postType}
+          />
+        </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );

src/discussions/posts/post/PostHeader.jsx

@@ -112,6 +112,7 @@ function PostHeader({
             author={post.author || intl.formatMessage(messages.anonymous)}
             authorLabel={post.authorLabel}
             labelColor={authorLabelColor && `text-${authorLabelColor}`}
+            linkToProfile
           />
         </div>
       </div>

src/index.scss

@@ -111,3 +111,10 @@ $fa-font-path: "~font-awesome/fonts";
 header nav.nav.secondary-menu-container {
   z-index: 10000;
 }
+
+#learner-posts-link {
+  color: inherit;
+  span[role=heading]:hover {
+    text-decoration: underline;
+  }
+}