feat: Profile image on user posts

.env

@@ -22,3 +22,4 @@ USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE=''

.env.development

@@ -23,3 +23,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE='true'

.env.test

@@ -21,3 +21,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE=''

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

@@ -43,7 +43,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,
+    editByLabel, closedByLabel, users: postUsers,
   } = comment;
   const intl = useIntl();
   const hasChildren = childCount > 0;
@@ -203,6 +203,7 @@ const Comment = ({
             closed={closed}
             createdAt={createdAt}
             lastEdit={lastEdit}
+            postUsers={postUsers}
           />
           {isEditing ? (
             <CommentEditor

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

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { Avatar } from '@openedx/paragon';
 import classNames from 'classnames';
 
+import { getConfig } from '@edx/frontend-platform';
+
 import { AvatarOutlineAndLabelColors } from '../../../../data/constants';
 import { AuthorLabel } from '../../../common';
 import { useAlertBannerVisible } from '../../../data/hooks';
@@ -15,6 +17,7 @@ const CommentHeader = ({
   closed,
   createdAt,
   lastEdit,
+  postUsers,
 }) => {
   const colorClass = AvatarOutlineAndLabelColors[authorLabel];
   const hasAnyAlert = useAlertBannerVisible({
@@ -24,6 +27,8 @@ const CommentHeader = ({
     closed,
   });
 
+  const profileImage = getConfig().ENABLE_PROFILE_IMAGE === 'true' && postUsers && Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
       'mt-2': hasAnyAlert,
@@ -33,6 +38,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 : undefined}
           style={{
             width: '32px',
             height: '32px',
@@ -61,6 +67,7 @@ CommentHeader.propTypes = {
     editorUsername: PropTypes.string,
     reason: PropTypes.string,
   }),
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 CommentHeader.defaultProps = {

src/discussions/posts/post/Post.jsx

@@ -32,7 +32,7 @@ const Post = ({ handleAddResponseButton }) => {
   const {
     topicId, abuseFlagged, closed, pinned, voted, hasEndorsed, following, closedBy, voteCount, groupId, groupName,
     closeReason, authorLabel, type: postType, author, title, createdAt, renderedBody, lastEdit, editByLabel,
-    closedByLabel,
+    closedByLabel, users: postUsers,
   } = useSelector(selectThread(postId));
   const intl = useIntl();
   const location = useLocation();
@@ -182,6 +182,7 @@ const Post = ({ handleAddResponseButton }) => {
         lastEdit={lastEdit}
         postType={postType}
         title={title}
+        postUsers={postUsers}
       />
       <div className="d-flex mt-14px text-break font-style text-primary-500">
         <HTMLLoader htmlNode={renderedBody} componentId="post" cssClassName="html-loader w-100" testId={postId} />

src/discussions/posts/post/PostHeader.jsx

@@ -5,6 +5,7 @@ import { Avatar, Badge, Icon } from '@openedx/paragon';
 import { Question } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
@@ -13,7 +14,7 @@ import { useAlertBannerVisible } from '../../data/hooks';
 import messages from './messages';
 
 export const PostAvatar = React.memo(({
-  author, postType, authorLabel, fromPostLink, read,
+  author, postType, authorLabel, fromPostLink, read, postUsers,
 }) => {
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
 
@@ -37,6 +38,8 @@ export const PostAvatar = React.memo(({
     return spacing;
   }, [postType]);
 
+  const profileImage = getConfig().ENABLE_PROFILE_IMAGE === 'true' && postUsers && Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={avatarSpacing}>
       {postType === ThreadType.QUESTION && (
@@ -59,6 +62,7 @@ export const PostAvatar = React.memo(({
           height: avatarSize,
           width: avatarSize,
         }}
+        src={profileImage?.hasImage ? profileImage?.imageUrlSmall : undefined}
         alt={author}
       />
     </div>
@@ -71,6 +75,7 @@ PostAvatar.propTypes = {
   authorLabel: PropTypes.string,
   fromPostLink: PropTypes.bool,
   read: PropTypes.bool,
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 PostAvatar.defaultProps = {
@@ -90,6 +95,7 @@ const PostHeader = ({
   title,
   postType,
   preview,
+  postUsers,
 }) => {
   const intl = useIntl();
   const showAnsweredBadge = preview && hasEndorsed && postType === ThreadType.QUESTION;
@@ -101,7 +107,7 @@ const PostHeader = ({
   return (
     <div className={classNames('d-flex flex-fill mw-100', { 'mt-10px': hasAnyAlert && !preview })}>
       <div className="flex-shrink-0">
-        <PostAvatar postType={postType} author={author} authorLabel={authorLabel} />
+        <PostAvatar postType={postType} author={author} authorLabel={authorLabel} postUsers={postUsers} />
       </div>
       <div className="align-items-center d-flex flex-row">
         <div className="d-flex flex-column justify-content-start mw-100">
@@ -151,6 +157,7 @@ PostHeader.propTypes = {
     reason: PropTypes.string,
   }),
   closed: PropTypes.bool,
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 PostHeader.defaultProps = {

src/discussions/posts/post/PostLink.jsx

@@ -36,6 +36,7 @@ const PostLink = ({
   const {
     topicId, hasEndorsed, type, author, authorLabel, abuseFlagged, abuseFlaggedCount, read, commentCount,
     unreadCommentCount, id, pinned, previewBody, title, voted, voteCount, following, groupId, groupName, createdAt,
+    users: postUsers,
   } = useSelector(selectThread(postId));
   const { pathname } = discussionsPath(Routes.COMMENTS.PAGES[page], {
     0: enableInContextSidebar ? 'in-context' : undefined,
@@ -83,6 +84,7 @@ const PostLink = ({
           authorLabel={authorLabel}
           fromPostLink
           read={isPostRead}
+          postUsers={postUsers}
         />
         <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill" style={{ marginBottom: '-3px' }}>

src/index.jsx

@@ -40,6 +40,7 @@ initialize({
         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,
       }, 'DiscussionsConfig');
     },
   },