[MM-52681] webapp/channels : Remove 't' functions for defineMessages in channels and update mmjstool version (#23318)

webapp/channels/package.json

@@ -178,7 +178,7 @@
     "jest-junit": "12.2.0",
     "jest-styled-components": "7.1.1",
     "jest-watch-typeahead": "0.6.4",
-    "mmjstool": "github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
+    "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
     "nock": "13.2.8",
     "prettier": "2.3.2",
     "react-router-enzyme-context": "1.2.0",

webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_moderation.tsx

@@ -2,18 +2,15 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, defineMessages} from 'react-intl';
+import {FormattedMessage, MessageDescriptor, defineMessages} from 'react-intl';
-
 import {isNil} from 'lodash';
 import classNames from 'classnames';
 
 import {ChannelModeration as ChannelPermissions} from '@mattermost/types/channels';
+
 import {Permissions, Roles} from 'mattermost-redux/constants';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
-import {t} from 'utils/i18n';
-
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon';
 
@@ -21,172 +18,203 @@ import {ChannelModerationRoles} from './types';
 
 const PERIOD_TO_SLASH_REGEX = /\./g;
 
-const formattedMessages: any = defineMessages({
+const MEMBERS_CAN_CREATE_POST_PERMISSION = 'create_post';
-    [Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_POST]: {
+const GUESTS_CAN_CREATE_POST_PERMISSION = 'guest_create_post';
+const MEMBERS_CAN_POST_REACTIONS_PERMISSION = 'reactions';
+const GUESTS_CAN_POST_REACTIONS_PERMISSION = 'guest_reactions';
+const MEMBERS_CAN_MANAGE_CHANNEL_MEMBERS_PERMISSION = 'manage_{public_or_private}_channel_members';
+const GUESTS_CAN_MANAGE_CHANNEL_MEMBERS_PERMISSION = 'guest_manage_{public_or_private}_channel_members';
+const MEMBERS_CAN_USE_CHANNEL_MENTIONS_PERMISSION = 'use_channel_mentions';
+const GUESTS_CAN_USE_CHANNEL_MENTIONS_PERMISSION = 'guest_use_channel_mentions';
+
+function getChannelModerationPermissionNames(permission: string) {
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_POST) {
+        return {
+            disabledGuests: GUESTS_CAN_CREATE_POST_PERMISSION,
+            disabledMembers: MEMBERS_CAN_CREATE_POST_PERMISSION,
+            disabledBoth: MEMBERS_CAN_CREATE_POST_PERMISSION,
+        };
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_REACTIONS) {
+        return {
+            disabledGuests: GUESTS_CAN_POST_REACTIONS_PERMISSION,
+            disabledMembers: MEMBERS_CAN_POST_REACTIONS_PERMISSION,
+            disabledBoth: MEMBERS_CAN_POST_REACTIONS_PERMISSION,
+        };
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.MANAGE_MEMBERS) {
+        return {
+            disabledGuests: GUESTS_CAN_MANAGE_CHANNEL_MEMBERS_PERMISSION,
+            disabledMembers: MEMBERS_CAN_MANAGE_CHANNEL_MEMBERS_PERMISSION,
+            disabledBoth: MEMBERS_CAN_MANAGE_CHANNEL_MEMBERS_PERMISSION,
+        };
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.USE_CHANNEL_MENTIONS) {
+        return {
+            disabledGuests: GUESTS_CAN_USE_CHANNEL_MENTIONS_PERMISSION,
+            disabledMembers: MEMBERS_CAN_USE_CHANNEL_MENTIONS_PERMISSION,
+            disabledBoth: MEMBERS_CAN_USE_CHANNEL_MENTIONS_PERMISSION,
+        };
+    }
+
+    return null;
+}
+
+function getChannelModerationRowsMessages(permission: string): Record<string, MessageDescriptor> | null {
+    const createPostRowMessages = defineMessages({
         title: {
-            id: t('admin.channel_settings.channel_moderation.createPosts'),
+            id: 'admin.channel_settings.channel_moderation.createPosts',
             defaultMessage: 'Create Posts',
         },
         description: {
-            id: t('admin.channel_settings.channel_moderation.createPostsDesc'),
+            id: 'admin.channel_settings.channel_moderation.createPostsDesc',
             defaultMessage: 'The ability for members and guests to create posts in the channel.',
         },
         descriptionMembers: {
-            id: t('admin.channel_settings.channel_moderation.createPostsDescMembers'),
+            id: 'admin.channel_settings.channel_moderation.createPostsDescMembers',
             defaultMessage: 'The ability for members to create posts in the channel.',
         },
         disabledGuests: {
-            id: t('admin.channel_settings.channel_moderation.createPosts.disabledGuest'),
+            id: 'admin.channel_settings.channel_moderation.createPosts.disabledGuest',
             defaultMessage: 'Create posts for guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'guest_create_post',
         },
         disabledMembers: {
-            id: t('admin.channel_settings.channel_moderation.createPosts.disabledMember'),
+            id: 'admin.channel_settings.channel_moderation.createPosts.disabledMember',
             defaultMessage: 'Create posts for members are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'create_post',
         },
         disabledBoth: {
-            id: t('admin.channel_settings.channel_moderation.createPosts.disabledBoth'),
+            id: 'admin.channel_settings.channel_moderation.createPosts.disabledBoth',
             defaultMessage: 'Create posts for members and guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'create_post',
-        },
         },
+    });
 
-    [Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_REACTIONS]: {
+    const postReactionsRowMessages = defineMessages({
         title: {
-            id: t('admin.channel_settings.channel_moderation.postReactions'),
+            id: 'admin.channel_settings.channel_moderation.postReactions',
             defaultMessage: 'Post Reactions',
         },
         description: {
-            id: t('admin.channel_settings.channel_moderation.postReactionsDesc'),
+            id: 'admin.channel_settings.channel_moderation.postReactionsDesc',
             defaultMessage: 'The ability for members and guests to post reactions.',
         },
         descriptionMembers: {
-            id: t('admin.channel_settings.channel_moderation.postReactionsDescMembers'),
+            id: 'admin.channel_settings.channel_moderation.postReactionsDescMembers',
             defaultMessage: 'The ability for members to post reactions.',
         },
         disabledGuests: {
-            id: t('admin.channel_settings.channel_moderation.postReactions.disabledGuest'),
+            id: 'admin.channel_settings.channel_moderation.postReactions.disabledGuest',
             defaultMessage: 'Post reactions for guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'guest_reactions',
         },
         disabledMembers: {
-            id: t('admin.channel_settings.channel_moderation.postReactions.disabledMember'),
+            id: 'admin.channel_settings.channel_moderation.postReactions.disabledMember',
             defaultMessage: 'Post reactions for members are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'reactions',
         },
         disabledBoth: {
-            id: t('admin.channel_settings.channel_moderation.postReactions.disabledBoth'),
+            id: 'admin.channel_settings.channel_moderation.postReactions.disabledBoth',
             defaultMessage: 'Post reactions for members and guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'reactions',
-        },
         },
+    });
 
-    [Permissions.CHANNEL_MODERATED_PERMISSIONS.MANAGE_MEMBERS]: {
+    const manageMembersRowMessages = defineMessages({
         title: {
-            id: t('admin.channel_settings.channel_moderation.manageMembers'),
+            id: 'admin.channel_settings.channel_moderation.manageMembers',
             defaultMessage: 'Manage Members',
         },
         description: {
-            id: t('admin.channel_settings.channel_moderation.manageMembersDesc'),
+            id: 'admin.channel_settings.channel_moderation.manageMembersDesc',
             defaultMessage: 'The ability for members to add and remove people.',
         },
         disabledGuests: {
-            id: t('admin.channel_settings.channel_moderation.manageMembers.disabledGuest'),
+            id: 'admin.channel_settings.channel_moderation.manageMembers.disabledGuest',
             defaultMessage: 'Manage members for guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'guest_manage_{public_or_private}_channel_members',
         },
         disabledMembers: {
-            id: t('admin.channel_settings.channel_moderation.manageMembers.disabledMember'),
+            id: 'admin.channel_settings.channel_moderation.manageMembers.disabledMember',
             defaultMessage: 'Manage members for members are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'manage_{public_or_private}_channel_members',
         },
         disabledBoth: {
-            id: t('admin.channel_settings.channel_moderation.manageMembers.disabledBoth'),
+            id: 'admin.channel_settings.channel_moderation.manageMembers.disabledBoth',
             defaultMessage: 'Manage members for members and guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'manage_{public_or_private}_channel_members',
-        },
         },
+    });
 
-    [Permissions.CHANNEL_MODERATED_PERMISSIONS.USE_CHANNEL_MENTIONS]: {
+    const channelMentionsRowMessages = defineMessages({
         title: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions',
             defaultMessage: 'Channel Mentions',
         },
         description: {
-            id: t('admin.channel_settings.channel_moderation.channelMentionsDesc'),
+            id: 'admin.channel_settings.channel_moderation.channelMentionsDesc',
             defaultMessage: 'The ability for members and guests to use @all, @here and @channel.',
         },
         descriptionMembers: {
-            id: t('admin.channel_settings.channel_moderation.channelMentionsDescMembers'),
+            id: 'admin.channel_settings.channel_moderation.channelMentionsDescMembers',
             defaultMessage: 'The ability for members to use @all, @here and @channel.',
         },
         disabledGuests: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledGuest'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledGuest',
             defaultMessage: 'Channel mentions for guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'guest_use_channel_mentions',
         },
         disabledMembers: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledMember'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledMember',
             defaultMessage: 'Channel mentions for members are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'use_channel_mentions',
         },
         disabledBoth: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledBoth'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledBoth',
             defaultMessage: 'Channel mentions for members and guests are disabled in [{scheme_name}](../permissions/{scheme_link}).',
-            permissionName: 'use_channel_mentions',
         },
         disabledGuestsDueToCreatePosts: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledGuestsDueToCreatePosts'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledGuestsDueToCreatePosts',
             defaultMessage: 'Guests can not use channel mentions without the ability to create posts.',
         },
         disabledMembersDueToCreatePosts: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledMemberDueToCreatePosts'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledMemberDueToCreatePosts',
             defaultMessage: 'Members can not use channel mentions without the ability to create posts.',
         },
         disabledBothDueToCreatePosts: {
-            id: t('admin.channel_settings.channel_moderation.channelMentions.disabledBothDueToCreatePosts'),
+            id: 'admin.channel_settings.channel_moderation.channelMentions.disabledBothDueToCreatePosts',
             defaultMessage: 'Guests and members can not use channel mentions without the ability to create posts.',
         },
-    },
+    });
 
-    title: {
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_POST) {
-        id: t('admin.channel_settings.channel_moderation.title'),
+        return createPostRowMessages;
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.CREATE_REACTIONS) {
+        return postReactionsRowMessages;
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.MANAGE_MEMBERS) {
+        return manageMembersRowMessages;
+    }
+
+    if (permission === Permissions.CHANNEL_MODERATED_PERMISSIONS.USE_CHANNEL_MENTIONS) {
+        return channelMentionsRowMessages;
+    }
+
+    return null;
+}
+
+const channelModerationHeaderMessages = defineMessages({
+    titleMessage: {
+        id: 'admin.channel_settings.channel_moderation.title',
         defaultMessage: 'Channel Moderation',
     },
-    subtitle: {
+    subtitleMessageForMembersAndGuests: {
-        id: t('admin.channel_settings.channel_moderation.subtitle'),
+        id: 'admin.channel_settings.channel_moderation.subtitle',
         defaultMessage: 'Manage the actions available to channel members and guests.',
     },
-    subtitleMembers: {
+    subtitleMessageForMembers: {
-        id: t('admin.channel_settings.channel_moderation.subtitleMembers'),
+        id: 'admin.channel_settings.channel_moderation.subtitleMembers',
         defaultMessage: 'Manage the actions available to channel members.',
     },
-    permissions: {
-        id: t('admin.channel_settings.channel_moderation.permissions'),
-        defaultMessage: 'Permissions',
-    },
-    guests: {
-        id: t('admin.channel_settings.channel_moderation.guests'),
-        defaultMessage: 'Guests',
-    },
-    members: {
-        id: t('admin.channel_settings.channel_moderation.members'),
-        defaultMessage: 'Members',
-    },
 });
 
-interface Props {
+interface ChannelModerationTableRow {
-    channelPermissions?: ChannelPermissions[];
-    onChannelPermissionsChanged: (name: string, channelRole: ChannelModerationRoles) => void;
-    teamSchemeID?: string;
-    teamSchemeDisplayName?: string;
-    guestAccountsEnabled: boolean;
-    isPublic: boolean;
-    readOnly?: boolean;
-}
-
-interface RowProps {
     name: string;
     guests?: boolean;
     members: boolean;
@@ -198,26 +226,27 @@ interface RowProps {
     readOnly?: boolean;
 }
 
-export const ChannelModerationTableRow: React.FunctionComponent<RowProps> = (props: RowProps): JSX.Element => {
+export const ChannelModerationTableRow = (props: ChannelModerationTableRow) => {
-    let descriptionId = formattedMessages[props.name].description.id;
+    const channelModerationPermissionMessages = getChannelModerationRowsMessages(props.name);
-    let descriptionDefaultMessage = formattedMessages[props.name].description.defaultMessage;
+    let descriptionId = channelModerationPermissionMessages?.description.id;
-    if (!props.guestAccountsEnabled && formattedMessages[props.name].descriptionMembers) {
+    let descriptionDefaultMessage = channelModerationPermissionMessages?.description.defaultMessage;
-        descriptionId = formattedMessages[props.name].descriptionMembers.id;
+    if (!props.guestAccountsEnabled && channelModerationPermissionMessages?.descriptionMembers) {
-        descriptionDefaultMessage = formattedMessages[props.name].descriptionMembers.defaultMessage;
+        descriptionId = channelModerationPermissionMessages.descriptionMembers?.id ?? '';
+        descriptionDefaultMessage = channelModerationPermissionMessages?.descriptionMembers?.defaultMessage ?? '';
     }
     return (
         <tr>
             <td>
                 <label
-                    data-testid={formattedMessages[props.name].title.id.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                    data-testid={channelModerationPermissionMessages?.title?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
                 >
                     <FormattedMessage
-                        id={formattedMessages[props.name].title.id}
+                        id={channelModerationPermissionMessages?.title?.id}
-                        defaultMessage={formattedMessages[props.name].title.defaultMessage}
+                        defaultMessage={channelModerationPermissionMessages?.title?.defaultMessage}
                     />
                 </label>
                 <div
-                    data-testid={formattedMessages[props.name].description.id.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                    data-testid={channelModerationPermissionMessages?.description?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
                 >
                     <FormattedMessage
                         id={descriptionId}
@@ -270,8 +299,20 @@ export const ChannelModerationTableRow: React.FunctionComponent<RowProps> = (pro
     );
 };
 
+interface Props {
+    channelPermissions?: ChannelPermissions[];
+    onChannelPermissionsChanged: (name: string, channelRole: ChannelModerationRoles) => void;
+    teamSchemeID?: string;
+    teamSchemeDisplayName?: string;
+    guestAccountsEnabled: boolean;
+    isPublic: boolean;
+    readOnly?: boolean;
+}
+
 export default class ChannelModeration extends React.PureComponent<Props> {
     private errorMessagesToDisplay = (entry: ChannelPermissions): JSX.Element[] => {
+        const channelModerationPermissionMessages = getChannelModerationRowsMessages(entry.name);
+
         const errorMessages: JSX.Element[] = [];
         const isGuestsDisabled = !isNil(entry.roles.guests?.enabled) && !entry.roles.guests?.enabled && this.props.guestAccountsEnabled;
         const isMembersDisabled = !entry.roles.members.enabled;
@@ -281,31 +322,39 @@ export default class ChannelModeration extends React.PureComponent<Props> {
             if (!createPostsObject!.roles.guests!.value && this.props.guestAccountsEnabled && !createPostsObject!.roles.members!.value) {
                 errorMessages.push(
                     <div
-                        data-testid={formattedMessages[entry.name].disabledBothDueToCreatePosts.id.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                        data-testid={channelModerationPermissionMessages?.disabledBothDueToCreatePosts?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
-                        key={formattedMessages[entry.name].disabledBothDueToCreatePosts.id}
+                        key={channelModerationPermissionMessages?.disabledBothDueToCreatePosts?.id}
                     >
                         <FormattedMessage
-                            id={formattedMessages[entry.name].disabledBothDueToCreatePosts.id}
+                            id={channelModerationPermissionMessages?.disabledBothDueToCreatePosts?.id}
-                            defaultMessage={formattedMessages[entry.name].disabledBothDueToCreatePosts.defaultMessage}
+                            defaultMessage={channelModerationPermissionMessages?.disabledBothDueToCreatePosts?.defaultMessage}
                         />
                     </div>,
                 );
                 return errorMessages;
             } else if (!createPostsObject!.roles.guests!.value && this.props.guestAccountsEnabled) {
                 createPostsKey = 'disabledGuestsDueToCreatePosts';
-            } else if (!createPostsObject!.roles.members!.value) {
-                createPostsKey = 'disabledMembersDueToCreatePosts';
-            }
-
-            if (createPostsKey !== '') {
                 errorMessages.push(
                     <div
-                        data-testid={formattedMessages[entry.name][createPostsKey].id.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                        data-testid={channelModerationPermissionMessages?.disabledGuestsDueToCreatePosts?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
-                        key={formattedMessages[entry.name][createPostsKey].id}
+                        key={channelModerationPermissionMessages?.disabledGuestsDueToCreatePosts?.id}
                     >
                         <FormattedMessage
-                            id={formattedMessages[entry.name][createPostsKey].id}
+                            id={channelModerationPermissionMessages?.disabledGuestsDueToCreatePosts?.id}
-                            defaultMessage={formattedMessages[entry.name][createPostsKey].defaultMessage}
+                            defaultMessage={channelModerationPermissionMessages?.disabledGuestsDueToCreatePosts?.defaultMessage}
+                        />
+                    </div>,
+                );
+            } else if (!createPostsObject!.roles.members!.value) {
+                createPostsKey = 'disabledMembersDueToCreatePosts';
+                errorMessages.push(
+                    <div
+                        data-testid={channelModerationPermissionMessages?.disabledMembersDueToCreatePosts?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                        key={channelModerationPermissionMessages?.disabledMembersDueToCreatePosts?.id}
+                    >
+                        <FormattedMessage
+                            id={channelModerationPermissionMessages?.disabledMembersDueToCreatePosts?.id}
+                            defaultMessage={channelModerationPermissionMessages?.disabledMembersDueToCreatePosts?.defaultMessage}
                         />
                     </div>,
                 );
@@ -313,37 +362,67 @@ export default class ChannelModeration extends React.PureComponent<Props> {
         }
 
         let disabledKey;
-        if (isGuestsDisabled && isMembersDisabled && errorMessages.length <= 0) {
+        let disabledKeyId;
-            disabledKey = 'disabledBoth';
+        let disabledKeyMessage;
-        } else if (isGuestsDisabled && createPostsKey !== 'disabledGuestsDueToCreatePosts') {
-            disabledKey = 'disabledGuests';
-        } else if (isMembersDisabled && createPostsKey !== 'disabledMembersDueToCreatePosts') {
-            disabledKey = 'disabledMembers';
-        }
-        if (disabledKey) {
         let schemeName = 'System Scheme';
         let schemeLink = 'system_scheme';
+
         if (this.props.teamSchemeID) {
-                schemeName = this.props.teamSchemeDisplayName + ' Team Scheme';
+            schemeName = this.props?.teamSchemeDisplayName + ' Team Scheme';
             schemeLink = `team_override_scheme/${this.props.teamSchemeID}`;
         }
 
-            if (formattedMessages[entry.name][disabledKey].permissionName) {
+        const permissionName = getChannelModerationPermissionNames(entry.name);
-                schemeLink += `?rowIdFromQuery=${formattedMessages[entry.name][disabledKey].permissionName}`;
+
+        if (isGuestsDisabled && isMembersDisabled && errorMessages.length <= 0) {
+            disabledKey = 'disabledBoth';
+            if (permissionName?.disabledBoth) {
+                schemeLink += `?rowIdFromQuery=${permissionName.disabledBoth}`;
                 if (schemeLink.includes('{public_or_private}')) {
                     const publicOrPrivate = this.props.isPublic ? 'public' : 'private';
                     schemeLink = schemeLink.replace('{public_or_private}', publicOrPrivate);
                 }
             }
+            disabledKeyId = channelModerationPermissionMessages?.disabledBoth?.id;
+            disabledKeyMessage = channelModerationPermissionMessages?.disabledBoth?.defaultMessage;
+        } else if (isGuestsDisabled && createPostsKey !== 'disabledGuestsDueToCreatePosts') {
+            disabledKey = 'disabledGuests';
+            if (permissionName?.disabledGuests) {
+                schemeLink += `?rowIdFromQuery=${permissionName.disabledGuests}`;
+                if (schemeLink.includes('{public_or_private}')) {
+                    const publicOrPrivate = this.props.isPublic ? 'public' : 'private';
+                    schemeLink = schemeLink.replace('{public_or_private}', publicOrPrivate);
+                }
+            }
+            disabledKeyId = channelModerationPermissionMessages?.disabledGuests?.id;
+            disabledKeyMessage = channelModerationPermissionMessages?.disabledGuests?.defaultMessage;
+        } else if (isMembersDisabled && createPostsKey !== 'disabledMembersDueToCreatePosts') {
+            disabledKey = 'disabledMembers';
+            if (permissionName?.disabledMembers) {
+                schemeLink += `?rowIdFromQuery=${permissionName.disabledMembers}`;
+                if (schemeLink.includes('{public_or_private}')) {
+                    const publicOrPrivate = this.props.isPublic ? 'public' : 'private';
+                    schemeLink = schemeLink.replace('{public_or_private}', publicOrPrivate);
+                }
+            }
+            disabledKeyId = channelModerationPermissionMessages?.disabledMembers?.id;
+            disabledKeyMessage = channelModerationPermissionMessages?.disabledMembers?.defaultMessage;
+        }
 
+        if (schemeLink.includes('{public_or_private}')) {
+            const publicOrPrivate = this.props.isPublic ? 'public' : 'private';
+            schemeLink = schemeLink.replace('{public_or_private}', publicOrPrivate);
+        }
+
+        if (disabledKey) {
             errorMessages.push(
                 <div
-                    data-testid={formattedMessages[entry.name][disabledKey].id.replace(PERIOD_TO_SLASH_REGEX, '-')}
+                    data-testid={disabledKeyId?.replace(PERIOD_TO_SLASH_REGEX, '-')}
-                    key={formattedMessages[entry.name][disabledKey].id}
+                    key={disabledKeyId}
                 >
                     <FormattedMarkdownMessage
-                        id={formattedMessages[entry.name][disabledKey].id}
+                        id={disabledKeyId}
-                        defaultMessage={formattedMessages[entry.name][disabledKey].defaultMessage}
+                        defaultMessage={disabledKeyMessage as string}
                         values={{
                             scheme_name: schemeName,
                             scheme_link: schemeLink,
@@ -360,10 +439,14 @@ export default class ChannelModeration extends React.PureComponent<Props> {
         return (
             <AdminPanel
                 id='channel_moderation'
-                titleId={formattedMessages.title.id}
+                titleId={channelModerationHeaderMessages.titleMessage.id}
-                titleDefault={formattedMessages.title.defaultMessage}
+                titleDefault={channelModerationHeaderMessages.titleMessage.defaultMessage}
-                subtitleId={guestAccountsEnabled ? formattedMessages.subtitle.id : formattedMessages.subtitleMembers.id}
+                subtitleId={
-                subtitleDefault={guestAccountsEnabled ? formattedMessages.subtitle.defaultMessage : formattedMessages.subtitleMembers.defaultMessage}
+                    guestAccountsEnabled ? channelModerationHeaderMessages.subtitleMessageForMembersAndGuests.id : channelModerationHeaderMessages.subtitleMessageForMembers.id
+                }
+                subtitleDefault={
+                    guestAccountsEnabled ? channelModerationHeaderMessages.subtitleMessageForMembersAndGuests.defaultMessage : channelModerationHeaderMessages.subtitleMessageForMembers.defaultMessage
+                }
             >
                 <div className='channel-moderation'>
                     <div className='channel-moderation--body'>
@@ -376,22 +459,22 @@ export default class ChannelModeration extends React.PureComponent<Props> {
                                 <tr>
                                     <th>
                                         <FormattedMessage
-                                            id={formattedMessages.permissions.id}
+                                            id='admin.channel_settings.channel_moderation.permissions'
-                                            defaultMessage={formattedMessages.permissions.defaultMessage}
+                                            defaultMessage='Permissions'
                                         />
                                     </th>
                                     {guestAccountsEnabled &&
                                         <th>
                                             <FormattedMessage
-                                                id={formattedMessages.guests.id}
+                                                id='admin.channel_settings.channel_moderation.guests'
-                                                defaultMessage={formattedMessages.guests.defaultMessage}
+                                                defaultMessage='Guests'
                                             />
                                         </th>
                                     }
                                     <th>
                                         <FormattedMessage
-                                            id={formattedMessages.members.id}
+                                            id='admin.channel_settings.channel_moderation.members'
-                                            defaultMessage={formattedMessages.members.defaultMessage}
+                                            defaultMessage='Members'
                                         />
                                     </th>
                                 </tr>

webapp/channels/src/components/audit_table/holders.ts

@@ -3,207 +3,205 @@
 
 import {defineMessages} from 'react-intl';
 
-import {t} from 'utils/i18n';
-
 const holders = defineMessages({
     sessionRevoked: {
-        id: t('audit_table.sessionRevoked'),
+        id: 'audit_table.sessionRevoked',
         defaultMessage: 'The session with id {sessionId} was revoked',
     },
     channelCreated: {
-        id: t('audit_table.channelCreated'),
+        id: 'audit_table.channelCreated',
         defaultMessage: 'Created the {channelName} channel',
     },
     establishedDM: {
-        id: t('audit_table.establishedDM'),
+        id: 'audit_table.establishedDM',
         defaultMessage: 'Established a direct message channel with {username}',
     },
     nameUpdated: {
-        id: t('audit_table.nameUpdated'),
+        id: 'audit_table.nameUpdated',
         defaultMessage: 'Updated the {channelName} channel name',
     },
     headerUpdated: {
-        id: t('audit_table.headerUpdated'),
+        id: 'audit_table.headerUpdated',
         defaultMessage: 'Updated the {channelName} channel header',
     },
     channelDeleted: {
-        id: t('audit_table.channelDeleted'),
+        id: 'audit_table.channelDeleted',
         defaultMessage: 'Archived the channel with the URL {url}',
     },
     userAdded: {
-        id: t('audit_table.userAdded'),
+        id: 'audit_table.userAdded',
         defaultMessage: 'Added {username} to the {channelName} channel',
     },
     userRemoved: {
-        id: t('audit_table.userRemoved'),
+        id: 'audit_table.userRemoved',
         defaultMessage: 'Removed {username} to the {channelName} channel',
     },
     attemptedRegisterApp: {
-        id: t('audit_table.attemptedRegisterApp'),
+        id: 'audit_table.attemptedRegisterApp',
         defaultMessage: 'Attempted to register a new OAuth Application with ID {id}',
     },
     attemptedAllowOAuthAccess: {
-        id: t('audit_table.attemptedAllowOAuthAccess'),
+        id: 'audit_table.attemptedAllowOAuthAccess',
         defaultMessage: 'Attempted to allow a new OAuth service access',
     },
     successfullOAuthAccess: {
-        id: t('audit_table.successfullOAuthAccess'),
+        id: 'audit_table.successfullOAuthAccess',
         defaultMessage: 'Successfully gave a new OAuth service access',
     },
     failedOAuthAccess: {
-        id: t('audit_table.failedOAuthAccess'),
+        id: 'audit_table.failedOAuthAccess',
         defaultMessage: 'Failed to allow a new OAuth service access - the redirect URI did not match the previously registered callback',
     },
     attemptedOAuthToken: {
-        id: t('audit_table.attemptedOAuthToken'),
+        id: 'audit_table.attemptedOAuthToken',
         defaultMessage: 'Attempted to get an OAuth access token',
     },
     successfullOAuthToken: {
-        id: t('audit_table.successfullOAuthToken'),
+        id: 'audit_table.successfullOAuthToken',
         defaultMessage: 'Successfully added a new OAuth service',
     },
     oauthTokenFailed: {
-        id: t('audit_table.oauthTokenFailed'),
+        id: 'audit_table.oauthTokenFailed',
         defaultMessage: 'Failed to get an OAuth access token - {token}',
     },
     attemptedLogin: {
-        id: t('audit_table.attemptedLogin'),
+        id: 'audit_table.attemptedLogin',
         defaultMessage: 'Attempted to login',
     },
     authenticated: {
-        id: t('audit_table.authenticated'),
+        id: 'audit_table.authenticated',
         defaultMessage: 'Successfully authenticated',
     },
     successfullLogin: {
-        id: t('audit_table.successfullLogin'),
+        id: 'audit_table.successfullLogin',
         defaultMessage: 'Successfully logged in',
     },
     failedLogin: {
-        id: t('audit_table.failedLogin'),
+        id: 'audit_table.failedLogin',
         defaultMessage: 'FAILED login attempt',
     },
     updatePicture: {
-        id: t('audit_table.updatePicture'),
+        id: 'audit_table.updatePicture',
         defaultMessage: 'Updated your profile picture',
     },
     updateGeneral: {
-        id: t('audit_table.updateGeneral'),
+        id: 'audit_table.updateGeneral',
         defaultMessage: 'Updated the general settings of your account',
     },
     attemptedPassword: {
-        id: t('audit_table.attemptedPassword'),
+        id: 'audit_table.attemptedPassword',
         defaultMessage: 'Attempted to change password',
     },
     successfullPassword: {
-        id: t('audit_table.successfullPassword'),
+        id: 'audit_table.successfullPassword',
         defaultMessage: 'Successfully changed password',
     },
     failedPassword: {
-        id: t('audit_table.failedPassword'),
+        id: 'audit_table.failedPassword',
         defaultMessage: 'Failed to change password - tried to update user password who was logged in through OAuth',
     },
     updatedRol: {
-        id: t('audit_table.updatedRol'),
+        id: 'audit_table.updatedRol',
         defaultMessage: 'Updated user role(s) to ',
     },
     member: {
-        id: t('audit_table.member'),
+        id: 'audit_table.member',
         defaultMessage: 'member',
     },
     accountActive: {
-        id: t('audit_table.accountActive'),
+        id: 'audit_table.accountActive',
         defaultMessage: 'Account activated',
     },
     accountInactive: {
-        id: t('audit_table.accountInactive'),
+        id: 'audit_table.accountInactive',
         defaultMessage: 'Account deactivated',
     },
     by: {
-        id: t('audit_table.by'),
+        id: 'audit_table.by',
         defaultMessage: ' by {username}',
     },
     byAdmin: {
-        id: t('audit_table.byAdmin'),
+        id: 'audit_table.byAdmin',
         defaultMessage: ' by an admin',
     },
     sentEmail: {
-        id: t('audit_table.sentEmail'),
+        id: 'audit_table.sentEmail',
         defaultMessage: 'Sent an email to {email} to reset your password',
     },
     attemptedReset: {
-        id: t('audit_table.attemptedReset'),
+        id: 'audit_table.attemptedReset',
         defaultMessage: 'Attempted to reset password',
     },
     successfullReset: {
-        id: t('audit_table.successfullReset'),
+        id: 'audit_table.successfullReset',
         defaultMessage: 'Successfully reset password',
     },
     updateGlobalNotifications: {
-        id: t('audit_table.updateGlobalNotifications'),
+        id: 'audit_table.updateGlobalNotifications',
         defaultMessage: 'Updated your global notification settings',
     },
     attemptedWebhookCreate: {
-        id: t('audit_table.attemptedWebhookCreate'),
+        id: 'audit_table.attemptedWebhookCreate',
         defaultMessage: 'Attempted to create a webhook',
     },
     succcessfullWebhookCreate: {
-        id: t('audit_table.successfullWebhookCreate'),
+        id: 'audit_table.successfullWebhookCreate',
         defaultMessage: 'Successfully created a webhook',
     },
     failedWebhookCreate: {
-        id: t('audit_table.failedWebhookCreate'),
+        id: 'audit_table.failedWebhookCreate',
         defaultMessage: 'Failed to create a webhook - bad channel permissions',
     },
     attemptedWebhookDelete: {
-        id: t('audit_table.attemptedWebhookDelete'),
+        id: 'audit_table.attemptedWebhookDelete',
         defaultMessage: 'Attempted to delete a webhook',
     },
     successfullWebhookDelete: {
-        id: t('audit_table.successfullWebhookDelete'),
+        id: 'audit_table.successfullWebhookDelete',
         defaultMessage: 'Successfully deleted a webhook',
     },
     failedWebhookDelete: {
-        id: t('audit_table.failedWebhookDelete'),
+        id: 'audit_table.failedWebhookDelete',
         defaultMessage: 'Failed to delete a webhook - inappropriate conditions',
     },
     logout: {
-        id: t('audit_table.logout'),
+        id: 'audit_table.logout',
         defaultMessage: 'Logged out of your account',
     },
     verified: {
-        id: t('audit_table.verified'),
+        id: 'audit_table.verified',
         defaultMessage: 'Successfully verified your email address',
     },
     revokedAll: {
-        id: t('audit_table.revokedAll'),
+        id: 'audit_table.revokedAll',
         defaultMessage: 'Revoked all current sessions for the team',
     },
     loginAttempt: {
-        id: t('audit_table.loginAttempt'),
+        id: 'audit_table.loginAttempt',
         defaultMessage: ' (Login attempt)',
     },
     loginFailure: {
-        id: t('audit_table.loginFailure'),
+        id: 'audit_table.loginFailure',
         defaultMessage: ' (Login failure)',
     },
     attemptedLicenseAdd: {
-        id: t('audit_table.attemptedLicenseAdd'),
+        id: 'audit_table.attemptedLicenseAdd',
         defaultMessage: 'Attempted to add new license',
     },
     successfullLicenseAdd: {
-        id: t('audit_table.successfullLicenseAdd'),
+        id: 'audit_table.successfullLicenseAdd',
         defaultMessage: 'Successfully added new license',
     },
     failedExpiredLicenseAdd: {
-        id: t('audit_table.failedExpiredLicenseAdd'),
+        id: 'audit_table.failedExpiredLicenseAdd',
         defaultMessage: 'Failed to add a new license as it has either expired or not yet been started',
     },
     failedInvalidLicenseAdd: {
-        id: t('audit_table.failedInvalidLicenseAdd'),
+        id: 'audit_table.failedInvalidLicenseAdd',
         defaultMessage: 'Failed to add an invalid license',
     },
     licenseRemoved: {
-        id: t('audit_table.licenseRemoved'),
+        id: 'audit_table.licenseRemoved',
         defaultMessage: 'Successfully removed a license',
     },
 });

webapp/channels/src/components/file_upload/file_upload.tsx

@@ -4,14 +4,15 @@
 import React, {ChangeEvent, PureComponent, DragEvent, MouseEvent, TouchEvent, RefObject} from 'react';
 import {defineMessages, FormattedMessage, injectIntl, IntlShape} from 'react-intl';
 import classNames from 'classnames';
+
 import {PaperclipIcon} from '@mattermost/compass-icons/components';
 
-import {FilePreviewInfo} from '../file_preview/file_preview';
+import {FileInfo, FileUploadResponse} from '@mattermost/types/files';
+import {ServerError} from '@mattermost/types/errors';
 
 import dragster from 'utils/dragster';
 import Constants from 'utils/constants';
 import DelayedAction from 'utils/delayed_action';
-import {t} from 'utils/i18n';
 import {cmdOrCtrlPressed, isKeyPressed} from 'utils/keyboard';
 import {
     isIosChrome,
@@ -27,8 +28,9 @@ import {
     isTextDroppableEvent,
 } from 'utils/utils';
 
-import {FileInfo, FileUploadResponse} from '@mattermost/types/files';
+import {UploadFile} from 'actions/file_actions';
-import {ServerError} from '@mattermost/types/errors';
+
+import {FilesWillUploadHook, PluginComponent} from 'types/store/plugins';
 
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import Menu from 'components/widgets/menu/menu';
@@ -36,37 +38,35 @@ import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 
-import {FilesWillUploadHook, PluginComponent} from 'types/store/plugins';
+import {FilePreviewInfo} from '../file_preview/file_preview';
-
-import {UploadFile} from 'actions/file_actions';
 
 const holders = defineMessages({
     limited: {
-        id: t('file_upload.limited'),
+        id: 'file_upload.limited',
         defaultMessage: 'Uploads limited to {count, number} files maximum. Please use additional posts for more files.',
     },
     filesAbove: {
-        id: t('file_upload.filesAbove'),
+        id: 'file_upload.filesAbove',
         defaultMessage: 'Files above {max}MB could not be uploaded: {filenames}',
     },
     fileAbove: {
-        id: t('file_upload.fileAbove'),
+        id: 'file_upload.fileAbove',
         defaultMessage: 'File above {max}MB could not be uploaded: {filename}',
     },
     zeroBytesFiles: {
-        id: t('file_upload.zeroBytesFiles'),
+        id: 'file_upload.zeroBytesFiles',
         defaultMessage: 'You are uploading empty files: {filenames}',
     },
     zeroBytesFile: {
-        id: t('file_upload.zeroBytesFile'),
+        id: 'file_upload.zeroBytesFile',
         defaultMessage: 'You are uploading an empty file: {filename}',
     },
     pasted: {
-        id: t('file_upload.pasted'),
+        id: 'file_upload.pasted',
         defaultMessage: 'Image Pasted at ',
     },
     uploadFile: {
-        id: t('file_upload.upload_files'),
+        id: 'file_upload.upload_files',
         defaultMessage: 'Upload files',
     },
 });

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx

@@ -9,8 +9,6 @@ import {useSelector} from 'react-redux';
 import {GlobalState} from 'types/store';
 
 import {suitePluginIds} from 'utils/constants';
-
-import {t} from 'utils/i18n';
 import * as UserAgent from 'utils/user_agent';
 
 import KeyboardShortcutSequence, {
@@ -22,60 +20,60 @@ import './keyboard_shortcuts_modal.scss';
 
 const modalMessages = defineMessages({
     msgHeader: {
-        id: t('shortcuts.msgs.header'),
+        id: 'shortcuts.msgs.header',
         defaultMessage: 'Messages',
     },
     msgInputHeader: {
-        id: t('shortcuts.msgs.input.header'),
+        id: 'shortcuts.msgs.input.header',
         defaultMessage: 'Works inside an empty input field',
     },
     filesHeader: {
-        id: t('shortcuts.files.header'),
+        id: 'shortcuts.files.header',
         defaultMessage: 'Files',
     },
     browserHeader: {
-        id: t('shortcuts.browser.header'),
+        id: 'shortcuts.browser.header',
         defaultMessage: 'Built-in Browser Commands',
     },
     msgCompHeader: {
-        id: t('shortcuts.msgs.comp.header'),
+        id: 'shortcuts.msgs.comp.header',
         defaultMessage: 'Autocomplete',
     },
     browserInputHeader: {
-        id: t('shortcuts.browser.input.header'),
+        id: 'shortcuts.browser.input.header',
         defaultMessage: 'Works inside an input field',
     },
     msgMarkdownHeader: {
-        id: t('shortcuts.msgs.markdown.header'),
+        id: 'shortcuts.msgs.markdown.header',
         defaultMessage: 'Formatting',
     },
     info: {
-        id: t('shortcuts.info'),
+        id: 'shortcuts.info',
         defaultMessage:
             'Begin a message with / for a list of all the available slash commands.',
     },
     navHeader: {
-        id: t('shortcuts.nav.header'),
+        id: 'shortcuts.nav.header',
         defaultMessage: 'Navigation',
     },
     msgSearchHeader: {
-        id: t('shortcuts.msgs.search.header'),
+        id: 'shortcuts.msgs.search.header',
         defaultMessage: 'Searching',
     },
     callsHeader: {
-        id: t('shortcuts.calls.header'),
+        id: 'shortcuts.calls.header',
         defaultMessage: 'Calls',
     },
     callsGlobalHeader: {
-        id: t('shortcuts.calls.global.header'),
+        id: 'shortcuts.calls.global.header',
         defaultMessage: 'Global',
     },
     callsWidgetHeader: {
-        id: t('shortcuts.calls.widget.header'),
+        id: 'shortcuts.calls.widget.header',
         defaultMessage: 'Call widget',
     },
     callsExpandedHeader: {
-        id: t('shortcuts.calls.expanded.header'),
+        id: 'shortcuts.calls.expanded.header',
         defaultMessage: 'Expanded view (pop-out window)',
     },
 });

webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx

@@ -15,7 +15,6 @@ import {Post} from '@mattermost/types/posts';
 
 import Constants, {ModalIdentifiers} from 'utils/constants';
 import {imageURLForUser} from 'utils/utils';
-import {t} from 'utils/i18n';
 
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 import PostAriaLabelDiv from 'components/post_view/post_aria_label_div';
@@ -38,15 +37,15 @@ const DATE_RANGES = [
 
 const itemMessages = defineMessages({
     helpText: {
-        id: t('post_info.edit.restore'),
+        id: 'post_info.edit.restore',
         defaultMessage: 'Restore this version',
     },
     currentVersionText: {
-        id: t('post_info.edit.current_version'),
+        id: 'post_info.edit.current_version',
         defaultMessage: 'Current Version',
     },
     ariaLabelMessage: {
-        id: t('post_info.edit.aria_label'),
+        id: 'post_info.edit.aria_label',
         defaultMessage: 'Select to restore an old message.',
     },
 });

webapp/channels/src/components/post_edit_history/restore_post_modal.tsx

@@ -4,19 +4,18 @@
 import React, {memo} from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 
-import {t} from 'utils/i18n';
-
 import {Post} from '@mattermost/types/posts';
+
 import GenericModal from 'components/generic_modal';
 import PostMessageView from 'components/post_view/post_message_view';
 
 const modalMessages = defineMessages({
     title: {
-        id: t('post_info.edit.restore'),
+        id: 'post_info.edit.restore',
         defaultMessage: 'Restore this version',
     },
     titleQuestion: {
-        id: t('post_info.edit.restore_question'),
+        id: 'post_info.edit.restore_question',
         defaultMessage: 'Restore this version?',
     },
 });

webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx

@@ -14,25 +14,24 @@ import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 import {getHistory} from 'utils/browser_history';
 import Constants from 'utils/constants';
-import {t} from 'utils/i18n';
 import {getShortenedURL, validateChannelUrl} from 'utils/url';
 import * as Utils from 'utils/utils';
 
 const holders = defineMessages({
     maxLength: {
-        id: t('rename_channel.maxLength'),
+        id: 'rename_channel.maxLength',
         defaultMessage: 'This field must be less than {maxLength, number} characters',
     },
     url: {
-        id: t('rename_channel.url'),
+        id: 'rename_channel.url',
         defaultMessage: 'URL',
     },
     defaultError: {
-        id: t('rename_channel.defaultError'),
+        id: 'rename_channel.defaultError',
         defaultMessage: ' - Cannot be changed for the default channel',
     },
     displayNameHolder: {
-        id: t('rename_channel.displayNameHolder'),
+        id: 'rename_channel.displayNameHolder',
         defaultMessage: 'Enter display name',
     },
 });

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {ChangeEvent, ClipboardEvent, createRef, MouseEvent, RefObject} from 'react';
-import {defineMessages, FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage, MessageDescriptor} from 'react-intl';
 
 import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils';
 import {Theme} from 'mattermost-redux/selectors/entities/preferences';
@@ -18,108 +18,101 @@ import ColorChooser from '../color_chooser/color_chooser';
 
 const COPY_SUCCESS_INTERVAL = 3000;
 
-type Messages = {
+const messages: Record<string, MessageDescriptor> = defineMessages({
-    [key: string]: {
-        id: string;
-        defaultMessage: string;
-    };
-}
-
-const messages: Messages = defineMessages({
     sidebarBg: {
-        id: t('user.settings.custom_theme.sidebarBg'),
+        id: 'user.settings.custom_theme.sidebarBg',
         defaultMessage: 'Sidebar BG',
     },
     sidebarText: {
-        id: t('user.settings.custom_theme.sidebarText'),
+        id: 'user.settings.custom_theme.sidebarText',
         defaultMessage: 'Sidebar Text',
     },
     sidebarHeaderBg: {
-        id: t('user.settings.custom_theme.sidebarHeaderBg'),
+        id: 'user.settings.custom_theme.sidebarHeaderBg',
         defaultMessage: 'Sidebar Header BG',
     },
     sidebarTeamBarBg: {
-        id: t('user.settings.custom_theme.sidebarTeamBarBg'),
+        id: 'user.settings.custom_theme.sidebarTeamBarBg',
         defaultMessage: 'Team Sidebar BG',
     },
     sidebarHeaderTextColor: {
-        id: t('user.settings.custom_theme.sidebarHeaderTextColor'),
+        id: 'user.settings.custom_theme.sidebarHeaderTextColor',
         defaultMessage: 'Sidebar Header Text',
     },
     sidebarUnreadText: {
-        id: t('user.settings.custom_theme.sidebarUnreadText'),
+        id: 'user.settings.custom_theme.sidebarUnreadText',
         defaultMessage: 'Sidebar Unread Text',
     },
     sidebarTextHoverBg: {
-        id: t('user.settings.custom_theme.sidebarTextHoverBg'),
+        id: 'user.settings.custom_theme.sidebarTextHoverBg',
         defaultMessage: 'Sidebar Text Hover BG',
     },
     sidebarTextActiveBorder: {
-        id: t('user.settings.custom_theme.sidebarTextActiveBorder'),
+        id: 'user.settings.custom_theme.sidebarTextActiveBorder',
         defaultMessage: 'Sidebar Text Active Border',
     },
     sidebarTextActiveColor: {
-        id: t('user.settings.custom_theme.sidebarTextActiveColor'),
+        id: 'user.settings.custom_theme.sidebarTextActiveColor',
         defaultMessage: 'Sidebar Text Active Color',
     },
     onlineIndicator: {
-        id: t('user.settings.custom_theme.onlineIndicator'),
+        id: 'user.settings.custom_theme.onlineIndicator',
         defaultMessage: 'Online Indicator',
     },
     awayIndicator: {
-        id: t('user.settings.custom_theme.awayIndicator'),
+        id: 'user.settings.custom_theme.awayIndicator',
         defaultMessage: 'Away Indicator',
     },
     dndIndicator: {
-        id: t('user.settings.custom_theme.dndIndicator'),
+        id: 'user.settings.custom_theme.dndIndicator',
         defaultMessage: 'Do Not Disturb Indicator',
     },
     mentionBg: {
-        id: t('user.settings.custom_theme.mentionBg'),
+        id: 'user.settings.custom_theme.mentionBg',
         defaultMessage: 'Mention Jewel BG',
     },
     mentionColor: {
-        id: t('user.settings.custom_theme.mentionColor'),
+        id: 'user.settings.custom_theme.mentionColor',
         defaultMessage: 'Mention Jewel Text',
     },
     centerChannelBg: {
-        id: t('user.settings.custom_theme.centerChannelBg'),
+        id: 'user.settings.custom_theme.centerChannelBg',
         defaultMessage: 'Center Channel BG',
     },
     centerChannelColor: {
-        id: t('user.settings.custom_theme.centerChannelColor'),
+        id: 'user.settings.custom_theme.centerChannelColor',
         defaultMessage: 'Center Channel Text',
     },
     newMessageSeparator: {
-        id: t('user.settings.custom_theme.newMessageSeparator'),
+        id: 'user.settings.custom_theme.newMessageSeparator',
         defaultMessage: 'New Message Separator',
     },
     linkColor: {
-        id: t('user.settings.custom_theme.linkColor'),
+        id: 'user.settings.custom_theme.linkColor',
         defaultMessage: 'Link Color',
     },
     buttonBg: {
-        id: t('user.settings.custom_theme.buttonBg'),
+        id: 'user.settings.custom_theme.buttonBg',
         defaultMessage: 'Button BG',
     },
     buttonColor: {
-        id: t('user.settings.custom_theme.buttonColor'),
+        id: 'user.settings.custom_theme.buttonColor',
         defaultMessage: 'Button Text',
     },
     errorTextColor: {
-        id: t('user.settings.custom_theme.errorTextColor'),
+        id: 'user.settings.custom_theme.errorTextColor',
         defaultMessage: 'Error Text Color',
     },
     mentionHighlightBg: {
-        id: t('user.settings.custom_theme.mentionHighlightBg'),
+        id: 'user.settings.custom_theme.mentionHighlightBg',
         defaultMessage: 'Mention Highlight BG',
     },
     mentionHighlightLink: {
-        id: t('user.settings.custom_theme.mentionHighlightLink'),
+        id: 'user.settings.custom_theme.mentionHighlightLink',
         defaultMessage: 'Mention Highlight Link',
     },
     codeTheme: {
-        id: t('user.settings.custom_theme.codeTheme'),
+        id: 'user.settings.custom_theme.codeTheme',
         defaultMessage: 'Code Theme',
     },
 });

webapp/channels/src/components/user_settings/general/user_settings_general.tsx

@@ -6,89 +6,89 @@
 import React from 'react';
 import {defineMessages, FormattedDate, FormattedMessage, injectIntl, IntlShape} from 'react-intl';
 
-import SettingItemMax from 'components/setting_item_max';
+import {UserProfile} from '@mattermost/types/users';
 
 import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
+
 import * as Utils from 'utils/utils';
 import {t} from 'utils/i18n';
+import {AnnouncementBarMessages, AnnouncementBarTypes, AcceptedProfileImageTypes, Constants, ValidationErrors} from 'utils/constants';
 
 import LocalizedIcon from 'components/localized_icon';
 import SettingPicture from 'components/setting_picture';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-import {AnnouncementBarMessages, AnnouncementBarTypes, AcceptedProfileImageTypes, Constants, ValidationErrors} from 'utils/constants';
+import SettingItemMax from 'components/setting_item_max';
-
-import {UserProfile} from '@mattermost/types/users';
 import SettingItem from 'components/setting_item';
 
 const holders = defineMessages({
     usernameReserved: {
-        id: t('user.settings.general.usernameReserved'),
+        id: 'user.settings.general.usernameReserved',
         defaultMessage: 'This username is reserved, please choose a new one.',
     },
     usernameGroupNameUniqueness: {
-        id: t('user.settings.general.usernameGroupNameUniqueness'),
+        id: 'user.settings.general.usernameGroupNameUniqueness',
         defaultMessage: 'This username conflicts with an existing group name.',
     },
     usernameRestrictions: {
-        id: t('user.settings.general.usernameRestrictions'),
+        id: 'user.settings.general.usernameRestrictions',
         defaultMessage: "Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-', and '_'.",
     },
     validEmail: {
-        id: t('user.settings.general.validEmail'),
+        id: 'user.settings.general.validEmail',
         defaultMessage: 'Please enter a valid email address.',
     },
     emailMatch: {
-        id: t('user.settings.general.emailMatch'),
+        id: 'user.settings.general.emailMatch',
         defaultMessage: 'The new emails you entered do not match.',
     },
     incorrectPassword: {
-        id: t('user.settings.general.incorrectPassword'),
+        id: 'user.settings.general.incorrectPassword',
         defaultMessage: 'Your password is incorrect.',
     },
     emptyPassword: {
-        id: t('user.settings.general.emptyPassword'),
+        id: 'user.settings.general.emptyPassword',
         defaultMessage: 'Please enter your current password.',
     },
     validImage: {
-        id: t('user.settings.general.validImage'),
+        id: 'user.settings.general.validImage',
         defaultMessage: 'Only BMP, JPG, JPEG, or PNG images may be used for profile pictures',
     },
     imageTooLarge: {
-        id: t('user.settings.general.imageTooLarge'),
+        id: 'user.settings.general.imageTooLarge',
         defaultMessage: 'Unable to upload profile image. File is too large.',
     },
     uploadImage: {
-        id: t('user.settings.general.uploadImage'),
+        id: 'user.settings.general.uploadImage',
         defaultMessage: "Click 'Edit' to upload an image.",
     },
     uploadImageMobile: {
-        id: t('user.settings.general.mobile.uploadImage'),
+        id: 'user.settings.general.mobile.uploadImage',
         defaultMessage: 'Click to upload an image',
     },
     fullName: {
-        id: t('user.settings.general.fullName'),
+        id: 'user.settings.general.fullName',
         defaultMessage: 'Full Name',
     },
     nickname: {
-        id: t('user.settings.general.nickname'),
+        id: 'user.settings.general.nickname',
         defaultMessage: 'Nickname',
     },
     username: {
-        id: t('user.settings.general.username'),
+        id: 'user.settings.general.username',
         defaultMessage: 'Username',
     },
     profilePicture: {
-        id: t('user.settings.general.profilePicture'),
+        id: 'user.settings.general.profilePicture',
         defaultMessage: 'Profile Picture',
     },
     close: {
-        id: t('user.settings.general.close'),
+        id: 'user.settings.general.close',
         defaultMessage: 'Close',
     },
     position: {
-        id: t('user.settings.general.position'),
+        id: 'user.settings.general.position',
         defaultMessage: 'Position',
     },
 });

webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx

@@ -13,11 +13,12 @@ import {
 
 import {UserProfile} from '@mattermost/types/users';
 import {StatusOK} from '@mattermost/types/client4';
+
 import store from 'stores/redux_store.jsx';
 import Constants from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
 import * as Utils from 'utils/utils';
-import {t} from 'utils/i18n';
+
 import ConfirmModal from 'components/confirm_modal';
 
 const UserSettings = React.lazy(() => import(/* webpackPrefetch: true */ 'components/user_settings'));
@@ -25,27 +26,27 @@ const SettingsSidebar = React.lazy(() => import(/* webpackPrefetch: true */ '../
 
 const holders = defineMessages({
     profile: {
-        id: t('user.settings.modal.profile'),
+        id: 'user.settings.modal.profile',
         defaultMessage: 'Profile',
     },
     security: {
-        id: t('user.settings.modal.security'),
+        id: 'user.settings.modal.security',
         defaultMessage: 'Security',
     },
     notifications: {
-        id: t('user.settings.modal.notifications'),
+        id: 'user.settings.modal.notifications',
         defaultMessage: 'Notifications',
     },
     display: {
-        id: t('user.settings.modal.display'),
+        id: 'user.settings.modal.display',
         defaultMessage: 'Display',
     },
     sidebar: {
-        id: t('user.settings.modal.sidebar'),
+        id: 'user.settings.modal.sidebar',
         defaultMessage: 'Sidebar',
     },
     advanced: {
-        id: t('user.settings.modal.advanced'),
+        id: 'user.settings.modal.advanced',
         defaultMessage: 'Advanced',
     },
     checkEmail: {
@@ -53,15 +54,15 @@ const holders = defineMessages({
         defaultMessage: 'Check your email at {email} to verify the address. Cannot find the email?',
     },
     confirmTitle: {
-        id: t('user.settings.modal.confirmTitle'),
+        id: 'user.settings.modal.confirmTitle',
         defaultMessage: 'Discard Changes?',
     },
     confirmMsg: {
-        id: t('user.settings.modal.confirmMsg'),
+        id: 'user.settings.modal.confirmMsg',
         defaultMessage: 'You have unsaved changes, are you sure you want to discard them?',
     },
     confirmBtns: {
-        id: t('user.settings.modal.confirmBtns'),
+        id: 'user.settings.modal.confirmBtns',
         defaultMessage: 'Yes, Discard',
     },
 });

webapp/channels/src/i18n/en.json

@@ -5350,6 +5350,7 @@
   "user.settings.display.theme.title": "Theme",
   "user.settings.display.timezone": "Timezone",
   "user.settings.display.title": "Display Settings",
+  "user.settings.general.checkEmail": "Check your email at {email} to verify the address. Cannot find the email?",
   "user.settings.general.close": "Close",
   "user.settings.general.confirmEmail": "Confirm Email",
   "user.settings.general.currentEmail": "Current Email",

webapp/package-lock.json

@@ -3552,7 +3552,7 @@
         "jest-junit": "12.2.0",
         "jest-styled-components": "7.1.1",
         "jest-watch-typeahead": "0.6.4",
-        "mmjstool": "github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
+        "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
         "nock": "13.2.8",
         "prettier": "2.3.2",
         "react-router-enzyme-context": "1.2.0",
@@ -24467,7 +24467,7 @@
     },
     "node_modules/mmjstool": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#237c2194aa646021535c54e4aafed084807b93a6",
+      "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/typescript-estree": "^5.44.0",
@@ -53427,7 +53427,7 @@
         "mark.js": "8.11.1",
         "marked": "github:mattermost/marked#2ef7f28cc7718e3f551c4ce9ea75fdd7580c2008",
         "memoize-one": "6.0.0",
-        "mmjstool": "github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
+        "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
         "moment-timezone": "0.5.38",
         "nock": "13.2.8",
         "p-queue": "7.3.0",
@@ -54337,9 +54337,9 @@
       "dev": true
     },
     "mmjstool": {
-      "version": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#237c2194aa646021535c54e4aafed084807b93a6",
+      "version": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
       "dev": true,
-      "from": "mmjstool@github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
+      "from": "mmjstool@github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
       "requires": {
         "@typescript-eslint/typescript-estree": "^5.44.0",
         "estree-walk": "^2.2.0",