MM-53926 fix commented on display name (#24322)

* Sync giphy package versions in package-lock.json file

The versions were added automatically after starting the server, so seems like lock file is not synced

* Use main user_profile component in commented_on to fix displayName

* Refactor commented_on component from class to dumb/function component

* Resolved comments and make eslint happy

* Remove display name prop being passed to UserProfile component

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap

@@ -14,14 +14,9 @@ exports[`components/post_view/CommentedOn should match snapshot 1`] = `
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -52,14 +47,9 @@ exports[`components/post_view/CommentedOn should match snapshot 2`] = `
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -90,14 +80,9 @@ exports[`components/post_view/CommentedOn should match snapshot 3`] = `
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -130,14 +115,9 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -168,14 +148,9 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -206,14 +181,9 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,
@@ -244,14 +214,9 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           "name": <a
             className="theme user_name"
           >
-            <UserProfile
+            <Memo(Connect(UserProfile))
-              colorize={false}
               disablePopover={false}
-              displayUsername={false}
               hasMention={true}
-              hideStatus={false}
-              isRHS={false}
-              overwriteName=""
               userId=""
             />
           </a>,

webapp/channels/src/components/post_view/commented_on/commented_on.tsx

@@ -1,29 +1,27 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
+import React, {memo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {UserProfile as UserProfileType} from '@mattermost/types/users';
-
 import {Post} from '@mattermost/types/posts';
 
 import * as Utils from 'utils/utils';
 import {stripMarkdown} from 'utils/markdown';
 
 import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
-import UserProfile from '../../user_profile/user_profile';
+import UserProfile from 'components/user_profile';
 
 type Props = {
     enablePostUsernameOverride?: boolean;
     parentPostUser?: UserProfileType;
     onCommentClick?: React.EventHandler<React.MouseEvent>;
     post: Post;
-}
+};
 
-export default class CommentedOn extends PureComponent<Props> {
+function CommentedOn({post, parentPostUser, onCommentClick}: Props) {
-    makeCommentedOnMessage = () => {
+    const makeCommentedOnMessage = () => {
-        const {post} = this.props;
         let message: React.ReactNode = '';
         if (post.message) {
             message = Utils.replaceHtmlEntities(post.message);
@@ -31,7 +29,7 @@ export default class CommentedOn extends PureComponent<Props> {
             message = (
                 <CommentedOnFilesMessage parentPostId={post.id}/>
             );
-        } else if (post.props && post.props.attachments && post.props.attachments.length > 0) {
+        } else if (post.props?.attachments?.length > 0) {
             const attachment = post.props.attachments[0];
             const webhookMessage = attachment.pretext || attachment.title || attachment.text || attachment.fallback || '';
             message = Utils.replaceHtmlEntities(webhookMessage);
@@ -40,42 +38,40 @@ export default class CommentedOn extends PureComponent<Props> {
         return message;
     };
 
-    render() {
+    const message = makeCommentedOnMessage();
-        const message = this.makeCommentedOnMessage();
+    const parentPostUserId = parentPostUser?.id || '';
-        const parentPostUser = this.props.parentPostUser;
-        const parentPostUserId = (parentPostUser && parentPostUser.id) || '';
 
-        const parentUserProfile = (
+    const parentUserProfile = (
-            <UserProfile
+        <UserProfile
-                user={parentPostUser}
+            user={parentPostUser}
-                userId={parentPostUserId}
+            userId={parentPostUserId}
-                displayName={parentPostUser?.username}
+            hasMention={true}
-                hasMention={true}
+            disablePopover={false}
-                disablePopover={false}
+        />
-            />
+    );
-        );
 
-        return (
+    return (
-            <div
+        <div
-                data-testid='post-link'
+            data-testid='post-link'
-                className='post__link'
+            className='post__link'
-            >
+        >
-                <span>
+            <span>
-                    <FormattedMessage
+                <FormattedMessage
-                        id='post_body.commentedOn'
+                    id='post_body.commentedOn'
-                        defaultMessage="Commented on {name}'s message: "
+                    defaultMessage="Commented on {name}'s message: "
-                        values={{
+                    values={{
-                            name: <a className='theme user_name'>{parentUserProfile}</a>,
+                        name: <a className='theme user_name'>{parentUserProfile}</a>,
-                        }}
+                    }}
-                    />
+                />
-                    <a
+                <a
-                        className='theme'
+                    className='theme'
-                        onClick={this.props.onCommentClick}
+                    onClick={onCommentClick}
-                    >
+                >
-                        {typeof message === 'string' ? stripMarkdown(message) : message}
+                    {typeof message === 'string' ? stripMarkdown(message) : message}
-                    </a>
+                </a>
-                </span>
+            </span>
-            </div>
+        </div>
-        );
+    );
-    }
 }
+
+export default memo(CommentedOn);