feat: Profile image on user posts (redwood.master)

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

@@ -15,6 +15,7 @@ const CommentHeader = ({
   closed,
   createdAt,
   lastEdit,
+  postUsers,
 }) => {
   const colorClass = AvatarOutlineAndLabelColors[authorLabel];
   const hasAnyAlert = useAlertBannerVisible({
@@ -24,6 +25,8 @@ const CommentHeader = ({
     closed,
   });
 
+  const profileImage = postUsers && Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
       'mt-2': hasAnyAlert,
@@ -33,6 +36,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 +65,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

@@ -13,7 +13,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 +37,8 @@ export const PostAvatar = React.memo(({
     return spacing;
   }, [postType]);
 
+  const profileImage = postUsers && Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={avatarSpacing}>
       {postType === ThreadType.QUESTION && (
@@ -59,6 +61,7 @@ export const PostAvatar = React.memo(({
           height: avatarSize,
           width: avatarSize,
         }}
+        src={profileImage?.hasImage ? profileImage?.imageUrlSmall : undefined}
         alt={author}
       />
     </div>
@@ -71,6 +74,7 @@ PostAvatar.propTypes = {
   authorLabel: PropTypes.string,
   fromPostLink: PropTypes.bool,
   read: PropTypes.bool,
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 PostAvatar.defaultProps = {
@@ -90,6 +94,7 @@ const PostHeader = ({
   title,
   postType,
   preview,
+  postUsers,
 }) => {
   const intl = useIntl();
   const showAnsweredBadge = preview && hasEndorsed && postType === ThreadType.QUESTION;
@@ -101,7 +106,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 +156,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.scss

@@ -327,6 +327,7 @@ header {
 }
 
 .header-action-bar {
+  background-color: #fff;
   z-index: 2 !important;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   top: 0;