Fixed a bug where wehbooj's overriden username didn't show up in non-CRT reply (#30996)

webapp/channels/src/components/post/post_component.tsx

@@ -407,6 +407,7 @@ function PostComponent(props: Props) {
             <CommentedOn
                 onCommentClick={handleCommentClick}
                 rootId={post.root_id}
+                enablePostUsernameOverride={props.enablePostUsernameOverride}
             />
         );
     }

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

@@ -282,6 +282,91 @@ describe('components/post_view/CommentedOn', () => {
 
         expect(onCommentClick).toHaveBeenCalledTimes(1);
     });
+
+    test("should render the root post's overwritten username", () => {
+        const webhookPost = TestHelper.getPostMock({
+            id: 'webhook_post_id',
+            user_id: user1.id,
+            message: 'text message',
+            props: {
+                from_webhook: 'true',
+                override_username: 'overridden_username',
+            },
+        });
+
+        const post1 = TestHelper.getPostMock({
+            id: 'post1',
+            user_id: user1.id,
+            message: 'text message',
+            root_id: webhookPost.id,
+        });
+
+        renderWithContext(
+            <CommentedOn
+                rootId={webhookPost.id}
+                enablePostUsernameOverride={true}
+            />,
+            {
+                entities: {
+                    posts: {
+                        posts: {
+                            post1,
+                            webhook_post_id: webhookPost,
+                        },
+                    },
+                    users: {
+                        profiles: {
+                            user1,
+                        },
+                    },
+                },
+            },
+        );
+
+        expect(screen.getByText(textInChildren("Commented on overridden_username's message: text message"))).toBeInTheDocument();
+    });
+
+    test("should not render the root post's overwritten username if post is not from webhook", () => {
+        const webhookPost = TestHelper.getPostMock({
+            id: 'webhook_post_id',
+            user_id: user1.id,
+            message: 'text message',
+            props: {
+                override_username: 'overridden_username',
+            },
+        });
+
+        const post1 = TestHelper.getPostMock({
+            id: 'post1',
+            user_id: user1.id,
+            message: 'text message',
+            root_id: webhookPost.id,
+        });
+
+        renderWithContext(
+            <CommentedOn
+                rootId={webhookPost.id}
+                enablePostUsernameOverride={true}
+            />,
+            {
+                entities: {
+                    posts: {
+                        posts: {
+                            post1,
+                            webhook_post_id: webhookPost,
+                        },
+                    },
+                    users: {
+                        profiles: {
+                            user1,
+                        },
+                    },
+                },
+            },
+        );
+
+        expect(screen.getByText(textInChildren("Commented on some-user's message: text message"))).toBeInTheDocument();
+    });
 });
 
 function textInChildren(matchedText: string) {

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

@@ -1,28 +1,46 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {memo} from 'react';
+import React, {memo, useMemo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {isMessageAttachmentArray} from '@mattermost/types/message_attachments';
 
+import {ensureString} from 'mattermost-redux/utils/post_utils';
+
 import {usePost} from 'components/common/hooks/usePost';
 import {useUser} from 'components/common/hooks/useUser';
 import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
 import UserProfile from 'components/user_profile';
 
 import {stripMarkdown} from 'utils/markdown';
+import {isFromWebhook} from 'utils/post_utils';
 import * as Utils from 'utils/utils';
 
 type Props = {
     onCommentClick?: React.EventHandler<React.MouseEvent>;
     rootId: string;
+    enablePostUsernameOverride?: boolean;
 };
 
-function CommentedOn({onCommentClick, rootId}: Props) {
+function CommentedOn({onCommentClick, rootId, enablePostUsernameOverride}: Props) {
     const rootPost = usePost(rootId);
     const rootPostUser = useUser(rootPost?.user_id ?? '');
 
+    const rootPostOverriddenUsername = useMemo((): string => {
+        if (!rootPost) {
+            return '';
+        }
+
+        const rootPostIsFromWebhook = isFromWebhook(rootPost);
+        if (!rootPostIsFromWebhook) {
+            return '';
+        }
+
+        const propOverrideName = ensureString(rootPost?.props.override_username);
+        return (propOverrideName && enablePostUsernameOverride ? propOverrideName : '');
+    }, [enablePostUsernameOverride, rootPost]);
+
     let message: React.ReactNode = '';
     if (!rootPost) {
         message = (
@@ -46,6 +64,7 @@ function CommentedOn({onCommentClick, rootId}: Props) {
     const parentUserProfile = (
         <UserProfile
             userId={rootPostUser?.id ?? ''}
+            overwriteName={rootPostOverriddenUsername}
         />
     );