diff --git a/.env b/.env index 273646442..9c9dfe5a7 100644 --- a/.env +++ b/.env @@ -22,3 +22,4 @@ USER_INFO_COOKIE_NAME='' SUPPORT_URL='' LEARNER_FEEDBACK_URL='' STAFF_FEEDBACK_URL='' +ENABLE_PROFILE_IMAGE='' diff --git a/.env.development b/.env.development index ae4b3cee5..915dcb250 100644 --- a/.env.development +++ b/.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='' diff --git a/.env.test b/.env.test index 84bc122cd..a1147f2b5 100644 --- a/.env.test +++ b/.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='' diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx index 290bb95ab..330582fbe 100644 --- a/src/discussions/post-comments/comments/comment/Comment.jsx +++ b/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 ? ( { const colorClass = AvatarOutlineAndLabelColors[authorLabel]; const hasAnyAlert = useAlertBannerVisible({ @@ -24,6 +27,10 @@ const CommentHeader = ({ closed, }); + const profileImage = getConfig()?.ENABLE_PROFILE_IMAGE === 'true' + ? Object.values(postUsers ?? {})[0]?.profile?.image + : null; + return (
{ 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} />
diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx index eeb38878d..4716aab61 100644 --- a/src/discussions/posts/post/PostHeader.jsx +++ b/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,10 @@ export const PostAvatar = React.memo(({ return spacing; }, [postType]); + const profileImage = getConfig()?.ENABLE_PROFILE_IMAGE === 'true' + ? Object.values(postUsers ?? {})[0]?.profile?.image + : null; + return (
{postType === ThreadType.QUESTION && ( @@ -59,6 +64,7 @@ export const PostAvatar = React.memo(({ height: avatarSize, width: avatarSize, }} + src={profileImage?.hasImage ? profileImage?.imageUrlSmall : undefined} alt={author} />
@@ -71,6 +77,7 @@ PostAvatar.propTypes = { authorLabel: PropTypes.string, fromPostLink: PropTypes.bool, read: PropTypes.bool, + postUsers: PropTypes.shape({}).isRequired, }; PostAvatar.defaultProps = { @@ -90,6 +97,7 @@ const PostHeader = ({ title, postType, preview, + postUsers, }) => { const intl = useIntl(); const showAnsweredBadge = preview && hasEndorsed && postType === ThreadType.QUESTION; @@ -101,7 +109,7 @@ const PostHeader = ({ return (
- +
@@ -151,6 +159,7 @@ PostHeader.propTypes = { reason: PropTypes.string, }), closed: PropTypes.bool, + postUsers: PropTypes.shape({}).isRequired, }; PostHeader.defaultProps = { diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx index 63f7659d6..5501fba1c 100644 --- a/src/discussions/posts/post/PostLink.jsx +++ b/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} />
diff --git a/src/index.jsx b/src/index.jsx index f77b5f76c..d7bb95fdf 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -44,6 +44,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'); }, },