MM-24093 Fix crash when system message does not contain a username in post props (#4143)

app/components/post_body/__snapshots__/system_message_helpers.test.js.snap

@@ -30,6 +30,16 @@ exports[`renderSystemMessage uses renderer for Channel Purpose update 1`] = `
 />
 `;
 
+exports[`renderSystemMessage uses renderer for OLD archived channel without a username 1`] = `
+<Connect(Markdown)
+  baseTextStyle={Object {}}
+  disableAtChannelMentionHighlight={true}
+  onPostPress={[MockFunction]}
+  textStyles={Object {}}
+  value="{username} archived the channel"
+/>
+`;
+
 exports[`renderSystemMessage uses renderer for archived channel 1`] = `
 <Connect(Markdown)
   baseTextStyle={Object {}}

app/components/post_body/index.js

@@ -7,7 +7,7 @@ import {General, Posts} from 'mattermost-redux/constants';
 import {getChannel, canManageChannelMembers, getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentUserId, getCurrentUserRoles} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUserId, getCurrentUserRoles, getUser} from 'mattermost-redux/selectors/entities/users';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getCustomEmojisByName} from 'mattermost-redux/selectors/entities/emojis';
 import {makeGetReactionsForPost} from 'mattermost-redux/selectors/entities/posts';
@@ -79,10 +79,16 @@ export function makeMapStateToProps() {
 
         const customEmojis = getCustomEmojisByName(state);
         const {isEmojiOnly, shouldRenderJumboEmoji} = memoizeHasEmojisOnly(post.message, customEmojis);
+        const systemMessage = isSystemMessage(post);
+        const postProps = post.props;
+        if (systemMessage && !post.props?.username) {
+            const owner = getUser(state, post.user_id);
+            postProps.username = owner?.username || '';
+        }
 
         return {
             metadata: post.metadata,
-            postProps: post.props || {},
+            postProps,
             postType: post.type || '',
             fileIds: post.file_ids,
             hasBeenDeleted: post.state === Posts.POST_DELETED,
@@ -92,7 +98,7 @@ export function makeMapStateToProps() {
             isPending,
             isPostAddChannelMember,
             isPostEphemeral: isEphemeralPost,
-            isSystemMessage: isSystemMessage(post),
+            isSystemMessage: systemMessage,
             message: post.message,
             isEmojiOnly,
             shouldRenderJumboEmoji,

app/components/post_body/system_message_helpers.js

@@ -6,8 +6,12 @@ import {Posts} from 'mattermost-redux/constants';
 import Markdown from 'app/components/markdown';
 import {t} from 'app/utils/i18n';
 
-const renderUsername = (value) => {
-    return (value[0] === '@') ? value : `@${value}`;
+const renderUsername = (value = '') => {
+    if (value) {
+        return (value[0] === '@') ? value : `@${value}`;
+    }
+
+    return value;
 };
 
 const renderMessage = (postBodyProps, styles, intl, localeHolder, values) => {

app/components/post_body/system_message_helpers.test.js

@@ -78,6 +78,17 @@ describe('renderSystemMessage', () => {
         expect(renderedMessage).toMatchSnapshot();
     });
 
+    test('uses renderer for OLD archived channel without a username', () => {
+        const postBodyProps = {
+            ...basePostBodyProps,
+            postProps: {},
+            postType: Posts.POST_TYPES.CHANNEL_DELETED,
+        };
+
+        const renderedMessage = SystemMessageHelpers.renderSystemMessage(postBodyProps, mockStyles, mockIntl);
+        expect(renderedMessage).toMatchSnapshot();
+    });
+
     test('uses renderer for unarchived channel', () => {
         const postBodyProps = {
             ...basePostBodyProps,