fix: profile picture is not showing in forum responses (#849)

Author: awais-ansari

src/discussions/learners/data/selectors.js

@@ -14,5 +14,5 @@ export const selectLearnerSorting = () => state => state.learners.sortedBy;
 export const selectLearnerNextPage = () => state => state.learners.nextPage;
 
 export const selectLearnerAvatar = author => state => (
-  state.learners.learnerProfiles[author]?.profileImage?.imageUrlLarge
+  state.learners.learnerProfiles[author]?.profileImage?.imageUrlSmall
 );

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

@@ -9,7 +9,9 @@ import {
 } from 'react-router-dom';
 import { Factory } from 'rosie';
 
-import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import {
+  camelCaseObject, getConfig, initializeMockApp, setConfig,
+} from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
@@ -738,6 +740,20 @@ describe('ThreadView', () => {
       expect(screen.queryByTestId('comment-comment-4'))
         .toBeInTheDocument();
     });
+
+    it('it show avatar for reply author when ENABLE_PROFILE_IMAGE is true', async () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_PROFILE_IMAGE: 'true',
+      });
+      await waitFor(() => renderComponent(discussionPostId));
+
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+
+      expect(comment).toBeInTheDocument();
+      const replyAuthorAvatar = within(comment).getAllByAltText('edx');
+      expect(replyAuthorAvatar.length).toBeGreaterThan(0);
+    });
   });
 
   describe('for question thread', () => {

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

@@ -46,7 +46,7 @@ const Comment = ({
   const {
     id, parentId, childCount, abuseFlagged, endorsed, threadId, endorsedAt, endorsedBy, endorsedByLabel, renderedBody,
     voted, following, voteCount, authorLabel, author, createdAt, lastEdit, rawBody, closed, closedBy, closeReason,
-    editByLabel, closedByLabel, users: postUsers,
+    editByLabel, closedByLabel, users: commentUsers,
   } = comment;
   const intl = useIntl();
   const hasChildren = childCount > 0;
@@ -209,7 +209,7 @@ const Comment = ({
             closed={closed}
             createdAt={createdAt}
             lastEdit={lastEdit}
-            postUsers={postUsers}
+            commentUsers={commentUsers}
           />
           {isEditing ? (
             <CommentEditor

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

@@ -19,7 +19,7 @@ const CommentHeader = ({
   closed,
   createdAt,
   lastEdit,
-  postUsers,
+  commentUsers,
 }) => {
   const colorClass = AvatarOutlineAndLabelColors[authorLabel];
   const hasAnyAlert = useAlertBannerVisible({
@@ -31,7 +31,7 @@ const CommentHeader = ({
   const authorAvatar = useSelector(selectAuthorAvatar(author));
 
   const profileImage = getConfig()?.ENABLE_PROFILE_IMAGE === 'true'
-    ? Object.values(postUsers ?? {})[0]?.profile?.image
+    ? Object.values(commentUsers ?? {})[0]?.profile?.image
     : null;
 
   return (
@@ -43,7 +43,7 @@ const CommentHeader = ({
         <Avatar
           className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
           alt={author}
-          src={profileImage?.hasImage ? profileImage?.imageUrlSmall : authorAvatar}
+          src={profileImage?.hasImage ? profileImage?.imageUrlSmall : authorAvatar?.imageUrlSmall}
           style={{
             width: '32px',
             height: '32px',
@@ -72,7 +72,7 @@ CommentHeader.propTypes = {
     editorUsername: PropTypes.string,
     reason: PropTypes.string,
   }),
-  postUsers: PropTypes.shape({}).isRequired,
+  commentUsers: PropTypes.shape({}).isRequired,
 };
 
 CommentHeader.defaultProps = {

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

@@ -22,7 +22,7 @@ const defaultProps = {
   closed: false,
   createdAt: '2025-09-23T10:00:00Z',
   lastEdit: null,
-  postUsers: {
+  commentUsers: {
     'test-user': {
       profile: { image: { hasImage: true, imageUrlSmall: 'http://avatar.test/img.png' } },
     },

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

@@ -5,6 +5,7 @@ import { Avatar, useToggle } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import * as timeago from 'timeago.js';
 
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import HTMLLoader from '../../../../components/HTMLLoader';
@@ -24,7 +25,7 @@ import CommentEditor from './CommentEditor';
 const Reply = ({ responseId }) => {
   timeago.register('time-locale', timeLocale);
   const {
-    id, abuseFlagged, author, authorLabel, endorsed, lastEdit, closed, closedBy,
+    id, abuseFlagged, author, authorLabel, endorsed, lastEdit, closed, closedBy, users: replyUsers,
     closeReason, createdAt, threadId, parentId, rawBody, renderedBody, editByLabel, closedByLabel,
   } = useSelector(selectCommentOrResponseById(responseId));
   const intl = useIntl();
@@ -78,6 +79,10 @@ const Reply = ({ responseId }) => {
     [ContentActions.REPORT]: handleAbusedFlag,
   }), [handleEditContent, handleReplyEndorse, showDeleteConfirmation, handleAbusedFlag]);
 
+  const profileImage = getConfig()?.ENABLE_PROFILE_IMAGE === 'true'
+    ? Object.values(replyUsers ?? {})[0]?.profile?.image
+    : null;
+
   return (
     <div className="d-flex flex-column mt-2.5 " data-testid={`reply-${id}`} role="listitem">
       <Confirmation
@@ -123,7 +128,7 @@ const Reply = ({ responseId }) => {
           <Avatar
             className={`ml-0.5 mt-0.5 border-0 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
             alt={author}
-            src={authorAvatar?.imageUrlSmall}
+            src={profileImage?.hasImage ? profileImage?.imageUrlSmall : authorAvatar?.imageUrlSmall}
             style={{
               width: '32px',
               height: '32px',

src/discussions/post-comments/data/__factories__/comments.factory.js

@@ -30,6 +30,16 @@ Factory.define('comment')
     parent_id: null,
     children: [],
     abuse_flagged_any_user: false,
+    users: {
+      edx: {
+        profile: {
+          image: {
+            hasImage: true,
+            imageUrlSmall: 'http://test.site/default-avatar-small.png',
+          },
+        },
+      },
+    },
   });
 
 Factory.define('commentsResult')

src/setupTest.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 
+import { mergeConfig } from '@edx/frontend-platform';
+
 import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';
 
@@ -66,3 +68,10 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
 }));
 
 jest.setTimeout(1000000);
+
+mergeConfig({
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  LEARNER_FEEDBACK_URL: process.env.LEARNER_FEEDBACK_URL,
+  STAFF_FEEDBACK_URL: process.env.STAFF_FEEDBACK_URL,
+  ENABLE_PROFILE_IMAGE: process.env.ENABLE_PROFILE_IMAGE || 'false',
+}, 'DiscussionsConfig');