Remove t from miscellaneous components (#27058)

* Remove t and localizeMessage from components/delete_category_modal

* Remove t from components/error_page

* Remove t from components/integrations

* Remove t from components/keyboard_shortcuts

* Remove t from components/no_results_indicator

* Remove t from components/search_results

* Remove t from components/sidebar

* Remove t from components/threading

* Remove t from components/tours

webapp/channels/src/components/delete_category_modal/delete_category_modal.tsx

@@ -1,17 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 
 import {GenericModal} from '@mattermost/components';
 import type {ChannelCategory} from '@mattermost/types/channel_categories';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
-import {t} from 'utils/i18n';
-import {localizeMessage} from 'utils/utils';
-
 import '../category_modal.scss';
 
 type Props = {
@@ -22,67 +19,68 @@ type Props = {
     };
 };
 
-type State = {
+export default function DeleteCategoryModal(props: Props) {
-    show: boolean;
+    const intl = useIntl();
-}
 
-export default class DeleteCategoryModal extends React.PureComponent<Props, State> {
+    const handleConfirm = useCallback(() => {
-    constructor(props: Props) {
+        props.actions.deleteCategory(props.category.id);
-        super(props);
+    }, [props.actions.deleteCategory, props.category]);
 
-        this.state = {
+    return (
-            show: true,
+        <GenericModal
-        };
+            compassDesign={true}
-    }
+            ariaLabel={intl.formatMessage({id: 'delete_category_modal.deleteCategory', defaultMessage: 'Delete this category?'})}
-
+            onExited={props.onExited}
-    handleConfirm = () => {
+            modalHeaderText={(
-        this.props.actions.deleteCategory(this.props.category.id);
+                <FormattedMessage
-    };
+                    id='delete_category_modal.deleteCategory'
-
+                    defaultMessage='Delete this category?'
-    handleCancel = () => {
+                />
-        this.props.onExited();
+            )}
-    };
+            handleCancel={props.onExited}
-
+            handleConfirm={handleConfirm}
-    render() {
+            confirmButtonText={(
-        return (
+                <FormattedMessage
-            <GenericModal
+                    id='delete_category_modal.delete'
-                compassDesign={true}
+                    defaultMessage='Delete'
-                ariaLabel={localizeMessage('delete_category_modal.deleteCategory', 'Delete this category?')}
+                />
-                onExited={this.props.onExited}
+            )}
-                modalHeaderText={(
+            confirmButtonClassName={'delete'}
-                    <FormattedMessage
+        >
-                        id='delete_category_modal.deleteCategory'
+            <span className='delete-category__helpText'>
-                        defaultMessage='Delete this category?'
+                <FormattedMarkdownMessage
-                    />
+                    id='delete_category_modal.helpText'
-                )}
+                    defaultMessage="Channels in **{category_name}** will move back to the Channels and Direct messages categories. You're not removed from any channels."
-                handleCancel={this.handleCancel}
+                    values={{
-                handleConfirm={this.handleConfirm}
+                        category_name: props.category.display_name,
-                confirmButtonText={(
+                    }}
-                    <FormattedMessage
+                />
-                        id='delete_category_modal.delete'
+            </span>
-                        defaultMessage='Delete'
+        </GenericModal>
-                    />
+    );
-                )}
-                confirmButtonClassName={'delete'}
-            >
-                <span className='delete-category__helpText'>
-                    <FormattedMarkdownMessage
-                        id='delete_category_modal.helpText'
-                        defaultMessage="Channels in **{category_name}** will move back to the Channels and Direct messages categories. You're not removed from any channels."
-                        values={{
-                            category_name: this.props.category.display_name,
-                        }}
-                    />
-                </span>
-            </GenericModal>
-        );
-    }
 }
 
 // TODO MM-52680 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
 // find them there, so we've had to redefine them here
-t('generic_modal.cancel');
+defineMessages({
-t('generic_modal.confirm');
+    cancel: {
-t('footer_pagination.count');
+        id: 'generic_modal.cancel',
-t('footer_pagination.prev');
+        defaultMessage: 'Cancel',
-t('footer_pagination.next');
+    },
+    confirm: {
+        id: 'generic_modal.confirm',
+        defaultMessage: 'Confirm',
+    },
+    paginationCount: {
+        id: 'footer_pagination.count',
+        defaultMessage: 'Showing {startCount, number}-{endCount, number} of {total, number}',
+    },
+    paginationNext: {
+        id: 'footer_pagination.next',
+        defaultMessage: 'Next',
+    },
+    paginationPrev: {
+        id: 'footer_pagination.prev',
+        defaultMessage: 'Previous',
+    },
+});

webapp/channels/src/components/error_page/__snapshots__/error_message.test.tsx.snap

@@ -108,8 +108,12 @@ exports[`components/error_page/ErrorMessage should match snapshot, oauth_missing
       values={
         Object {
           "link": <ErrorLink
-            defaultMessage="Google Apps"
+            message={
-            messageId="error.oauth_missing_code.google.link"
+              Object {
+                "defaultMessage": "Google Apps",
+                "id": "error.oauth_missing_code.google.link",
+              }
+            }
             url="https://docs.mattermost.com/deployment/sso-google.html"
           />,
         }
@@ -123,8 +127,12 @@ exports[`components/error_page/ErrorMessage should match snapshot, oauth_missing
       values={
         Object {
           "link": <ErrorLink
-            defaultMessage="Office 365"
+            message={
-            messageId="error.oauth_missing_code.office365.link"
+              Object {
+                "defaultMessage": "Office 365",
+                "id": "error.oauth_missing_code.office365.link",
+              }
+            }
             url="https://docs.mattermost.com/deployment/sso-office.html"
           />,
         }
@@ -138,8 +146,12 @@ exports[`components/error_page/ErrorMessage should match snapshot, oauth_missing
       values={
         Object {
           "link": <ErrorLink
-            defaultMessage="GitLab"
+            message={
-            messageId="error.oauth_missing_code.gitlab.link"
+              Object {
+                "defaultMessage": "GitLab",
+                "id": "error.oauth_missing_code.gitlab.link",
+              }
+            }
             url="https://docs.mattermost.com/deployment/sso-gitlab.html"
           />,
         }
@@ -153,8 +165,12 @@ exports[`components/error_page/ErrorMessage should match snapshot, oauth_missing
       values={
         Object {
           "link": <ErrorLink
-            defaultMessage="Troubleshooting forum"
+            message={
-            messageId="error.oauth_missing_code.forum.link"
+              Object {
+                "defaultMessage": "Troubleshooting forum",
+                "id": "error.oauth_missing_code.forum.link",
+              }
+            }
             url="https://forum.mattermost.com/c/trouble-shoot"
           />,
         }

webapp/channels/src/components/error_page/error_link.test.tsx

@@ -9,8 +9,10 @@ import ErrorLink from 'components/error_page/error_link';
 describe('components/error_page/ErrorLink', () => {
     const baseProps = {
         url: 'https://docs.mattermost.com/deployment/sso-gitlab.html',
-        messageId: 'error.oauth_missing_code.gitlab.link',
+        message: {
-        defaultMessage: 'GitLab',
+            id: 'error.oauth_missing_code.gitlab.link',
+            defaultMessage: 'GitLab',
+        },
     };
 
     test('should match snapshot', () => {

webapp/channels/src/components/error_page/error_link.tsx

@@ -2,34 +2,29 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 
 import ExternalLink from 'components/external_link';
 
 type Props = {
     url: string;
-    messageId: string;
+    message: MessageDescriptor;
-    defaultMessage: string;
 }
 
-const ErrorLink: React.FC<Props> = ({url, messageId, defaultMessage}: Props) => {
+const ErrorLink: React.FC<Props> = ({url, message}: Props) => {
     return (
         <ExternalLink
             href={url}
             location='error_link'
         >
-            <FormattedMessage
+            <FormattedMessage {...message}/>
-                id={messageId}
-                defaultMessage={defaultMessage}
-            />
         </ExternalLink>
     );
 };
 
 ErrorLink.defaultProps = {
     url: '',
-    messageId: '',
-    defaultMessage: '',
 };
 
 export default ErrorLink;

webapp/channels/src/components/error_page/error_message.tsx

@@ -2,10 +2,9 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessage} from 'react-intl';
 
 import {ErrorPageTypes} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import ErrorLink from './error_link';
 import CloudArchived from './messages/cloud_archived';
@@ -116,8 +115,10 @@ const ErrorMessage: React.FC<Props> = ({type, message, service, isGuest}: Props)
                                 link: (
                                     <ErrorLink
                                         url={'https://docs.mattermost.com/deployment/sso-google.html'}
-                                        messageId={t('error.oauth_missing_code.google.link')}
+                                        message={defineMessage({
-                                        defaultMessage={'Google Apps'}
+                                            id: 'error.oauth_missing_code.google.link',
+                                            defaultMessage: 'Google Apps',
+                                        })}
                                     />
                                 ),
                             }}
@@ -131,8 +132,10 @@ const ErrorMessage: React.FC<Props> = ({type, message, service, isGuest}: Props)
                                 link: (
                                     <ErrorLink
                                         url={'https://docs.mattermost.com/deployment/sso-office.html'}
-                                        messageId={t('error.oauth_missing_code.office365.link')}
+                                        message={defineMessage({
-                                        defaultMessage={'Office 365'}
+                                            id: 'error.oauth_missing_code.office365.link',
+                                            defaultMessage: 'Office 365',
+                                        })}
                                     />
                                 ),
                             }}
@@ -146,8 +149,10 @@ const ErrorMessage: React.FC<Props> = ({type, message, service, isGuest}: Props)
                                 link: (
                                     <ErrorLink
                                         url={'https://docs.mattermost.com/deployment/sso-gitlab.html'}
-                                        messageId={t('error.oauth_missing_code.gitlab.link')}
+                                        message={defineMessage({
-                                        defaultMessage={'GitLab'}
+                                            id: 'error.oauth_missing_code.gitlab.link',
+                                            defaultMessage: 'GitLab',
+                                        })}
                                     />
                                 ),
                             }}
@@ -161,8 +166,10 @@ const ErrorMessage: React.FC<Props> = ({type, message, service, isGuest}: Props)
                                 link: (
                                     <ErrorLink
                                         url={'https://forum.mattermost.com/c/trouble-shoot'}
-                                        messageId={t('error.oauth_missing_code.forum.link')}
+                                        message={defineMessage({
-                                        defaultMessage={'Troubleshooting forum'}
+                                            id: 'error.oauth_missing_code.forum.link',
+                                            defaultMessage: 'Troubleshooting forum',
+                                        })}
                                     />
                                 ),
                             }}

webapp/channels/src/components/integrations/add_incoming_webhook/add_incoming_webhook.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {memo, useCallback, useState} from 'react';
+import {defineMessages} from 'react-intl';
 
 import type {IncomingWebhook} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
@@ -11,11 +12,21 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import AbstractIncomingWebhook from 'components/integrations/abstract_incoming_webhook';
 
 import {getHistory} from 'utils/browser_history';
-import {t} from 'utils/i18n';
 
-const HEADER = {id: t('integrations.add'), defaultMessage: 'Add'};
+const messages = defineMessages({
-const FOOTER = {id: t('add_incoming_webhook.save'), defaultMessage: 'Save'};
+    footer: {
-const LOADING = {id: t('add_incoming_webhook.saving'), defaultMessage: 'Saving...'};
+        id: 'add_incoming_webhook.save',
+        defaultMessage: 'Save',
+    },
+    header: {
+        id: 'integrations.add',
+        defaultMessage: 'Add',
+    },
+    loading: {
+        id: 'add_incoming_webhook.saving',
+        defaultMessage: 'Saving...',
+    },
+});
 
 type Props = {
 
@@ -67,9 +78,9 @@ const AddIncomingWebhook = ({
     return (
         <AbstractIncomingWebhook
             team={team}
-            header={HEADER}
+            header={messages.header}
-            footer={FOOTER}
+            footer={messages.footer}
-            loading={LOADING}
+            loading={messages.loading}
             enablePostUsernameOverride={enablePostUsernameOverride}
             enablePostIconOverride={enablePostIconOverride}
             action={addIncomingHook}

webapp/channels/src/components/integrations/add_oauth_app/add_oauth_app.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
+import {defineMessages} from 'react-intl';
 import {useHistory} from 'react-router-dom';
 
 import type {OAuthApp} from '@mattermost/types/integrations';
@@ -9,13 +10,22 @@ import type {Team} from '@mattermost/types/teams';
 
 import type {ActionResult} from 'mattermost-redux/types/actions.js';
 
-import {t} from 'utils/i18n';
-
 import AbstractOAuthApp from '../abstract_oauth_app';
 
-const HEADER = {id: t('add_oauth_app.header'), defaultMessage: 'Add'};
+const messages = defineMessages({
-const FOOTER = {id: t('installed_oauth_apps.save'), defaultMessage: 'Save'};
+    footer: {
-const LOADING = {id: t('installed_oauth_apps.saving'), defaultMessage: 'Saving...'};
+        id: 'installed_oauth_apps.save',
+        defaultMessage: 'Save',
+    },
+    header: {
+        id: 'add_oauth_app.header',
+        defaultMessage: 'Add',
+    },
+    loading: {
+        id: 'installed_oauth_apps.saving',
+        defaultMessage: 'Saving...',
+    },
+});
 
 export type Props = {
 
@@ -55,9 +65,9 @@ const AddOAuthApp = ({team, actions}: Props): JSX.Element => {
     return (
         <AbstractOAuthApp
             team={team}
-            header={HEADER}
+            header={messages.header}
-            footer={FOOTER}
+            footer={messages.footer}
-            loading={LOADING}
+            loading={messages.loading}
             action={addOAuthApp}
             serverError={serverError}
         />

webapp/channels/src/components/integrations/add_outgoing_webhook/add_outgoing_webhook.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
+import {defineMessages} from 'react-intl';
 import {useHistory} from 'react-router-dom';
 
 import type {OutgoingWebhook} from '@mattermost/types/integrations';
@@ -11,11 +12,20 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
 
-import {t} from 'utils/i18n';
+const messages = defineMessages({
-
+    footer: {
-const HEADER = {id: t('integrations.add'), defaultMessage: 'Add'};
+        id: 'add_outgoing_webhook.save',
-const FOOTER = {id: t('add_outgoing_webhook.save'), defaultMessage: 'Save'};
+        defaultMessage: 'Save',
-const LOADING = {id: t('add_outgoing_webhook.saving'), defaultMessage: 'Saving...'};
+    },
+    header: {
+        id: 'integrations.add',
+        defaultMessage: 'Add',
+    },
+    loading: {
+        id: 'add_outgoing_webhook.saving',
+        defaultMessage: 'Saving...',
+    },
+});
 
 export type Props = {
 
@@ -65,9 +75,9 @@ const AddOutgoingWebhook = ({team, actions, enablePostUsernameOverride, enablePo
     return (
         <AbstractOutgoingWebhook
             team={team}
-            header={HEADER}
+            header={messages.header}
-            footer={FOOTER}
+            footer={messages.footer}
-            loading={LOADING}
+            loading={messages.loading}
             renderExtra={''}
             action={addOutgoingHook}
             serverError={serverError}

webapp/channels/src/components/integrations/edit_command/edit_command.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 
 import type {Command} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
@@ -14,13 +14,23 @@ import ConfirmModal from 'components/confirm_modal';
 import LoadingScreen from 'components/loading_screen';
 
 import {getHistory} from 'utils/browser_history';
-import {t} from 'utils/i18n';
 
 import AbstractCommand from '../abstract_command';
 
-const HEADER = {id: t('integrations.edit'), defaultMessage: 'Edit'};
+const messages = defineMessages({
-const FOOTER = {id: t('edit_command.update'), defaultMessage: 'Update'};
+    footer: {
-const LOADING = {id: t('edit_command.updating'), defaultMessage: 'Updating...'};
+        id: 'edit_command.update',
+        defaultMessage: 'Update',
+    },
+    header: {
+        id: 'integrations.edit',
+        defaultMessage: 'Edit',
+    },
+    loading: {
+        id: 'edit_command.updating',
+        defaultMessage: 'Updating...',
+    },
+});
 
 type Props = {
 
@@ -173,9 +183,9 @@ export default class EditCommand extends React.PureComponent<Props, State> {
         return (
             <AbstractCommand
                 team={this.props.team}
-                header={HEADER}
+                header={messages.header}
-                footer={FOOTER}
+                footer={messages.footer}
-                loading={LOADING}
+                loading={messages.loading}
                 renderExtra={this.renderExtra()}
                 action={this.editCommand}
                 serverError={this.state.serverError}

webapp/channels/src/components/integrations/edit_incoming_webhook/edit_incoming_webhook.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {defineMessages} from 'react-intl';
 
 import type {IncomingWebhook} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
@@ -12,11 +13,21 @@ import AbstractIncomingWebhook from 'components/integrations/abstract_incoming_w
 import LoadingScreen from 'components/loading_screen';
 
 import {getHistory} from 'utils/browser_history';
-import {t} from 'utils/i18n';
 
-const HEADER = {id: t('integrations.edit'), defaultMessage: 'Edit'};
+const messages = defineMessages({
-const FOOTER = {id: t('update_incoming_webhook.update'), defaultMessage: 'Update'};
+    footer: {
-const LOADING = {id: t('update_incoming_webhook.updating'), defaultMessage: 'Updating...'};
+        id: 'update_incoming_webhook.update',
+        defaultMessage: 'Update',
+    },
+    header: {
+        id: 'integrations.edit',
+        defaultMessage: 'Edit',
+    },
+    loading: {
+        id: 'update_incoming_webhook.updating',
+        defaultMessage: 'Updating...',
+    },
+});
 
 type Props = {
 
@@ -123,9 +134,9 @@ export default class EditIncomingWebhook extends React.PureComponent<Props, Stat
         return (
             <AbstractIncomingWebhook
                 team={this.props.team}
-                header={HEADER}
+                header={messages.header}
-                footer={FOOTER}
+                footer={messages.footer}
-                loading={LOADING}
+                loading={messages.loading}
                 enablePostUsernameOverride={this.props.enablePostUsernameOverride}
                 enablePostIconOverride={this.props.enablePostIconOverride}
                 action={this.editIncomingHook}

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts

@@ -1,9 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {MessageDescriptor} from 'react-intl';
+import {defineMessage, defineMessages, type MessageDescriptor} from 'react-intl';
-
-import {t} from 'utils/i18n';
 
 export type KeyboardShortcutDescriptor =
 	| MessageDescriptor
@@ -11,511 +9,511 @@ export type KeyboardShortcutDescriptor =
 
 const callsKBShortcuts = {
     global: {
-        callsJoinCall: {
+        callsJoinCall: defineMessages({
             default: {
-                id: t('shortcuts.calls.join_call'),
+                id: 'shortcuts.calls.join_call',
                 defaultMessage: 'Join call in current channel:\tCtrl|Alt|S',
             },
             mac: {
-                id: t('shortcuts.calls.join_call.mac'),
+                id: 'shortcuts.calls.join_call.mac',
                 defaultMessage: 'Join call in current channel:\t⌘|⌥|S',
             },
-        },
+        }),
     },
     widget: {
-        callsMuteToggle: {
+        callsMuteToggle: defineMessages({
             default: {
-                id: t('shortcuts.calls.mute_toggle'),
+                id: 'shortcuts.calls.mute_toggle',
                 defaultMessage: 'Mute or unmute:\tCtrl|Shift|Space',
             },
             mac: {
-                id: t('shortcuts.calls.mute_toggle.mac'),
+                id: 'shortcuts.calls.mute_toggle.mac',
                 defaultMessage: 'Mute or unmute:\t⌘|Shift|Space',
             },
-        },
+        }),
-        callsRaiseHandToggle: {
+        callsRaiseHandToggle: defineMessages({
             default: {
-                id: t('shortcuts.calls.raise_hand_toggle'),
+                id: 'shortcuts.calls.raise_hand_toggle',
                 defaultMessage: 'Raise or lower hand:\tCtrl|Shift|Y',
             },
             mac: {
-                id: t('shortcuts.calls.raise_hand_toggle.mac'),
+                id: 'shortcuts.calls.raise_hand_toggle.mac',
                 defaultMessage: 'Raise or lower hand:\t⌘|Shift|Y',
             },
-        },
+        }),
-        callsShareScreenToggle: {
+        callsShareScreenToggle: defineMessages({
             default: {
-                id: t('shortcuts.calls.share_screen_toggle'),
+                id: 'shortcuts.calls.share_screen_toggle',
                 defaultMessage: 'Share or unshare the screen:\tCtrl|Shift|E',
             },
             mac: {
-                id: t('shortcuts.calls.share_screen_toggle.mac'),
+                id: 'shortcuts.calls.share_screen_toggle.mac',
                 defaultMessage: 'Share or unshare the screen:\t⌘|Shift|E',
             },
-        },
+        }),
-        callsParticipantsListToggle: {
+        callsParticipantsListToggle: defineMessages({
             default: {
-                id: t('shortcuts.calls.participants_list_toggle'),
+                id: 'shortcuts.calls.participants_list_toggle',
                 defaultMessage: 'Show or hide participants list:\tAlt|P\tCtrl|Shift|P',
             },
             mac: {
-                id: t('shortcuts.calls.participants_list_toggle.mac'),
+                id: 'shortcuts.calls.participants_list_toggle.mac',
                 defaultMessage: 'Show or hide participants list:\t⌥|P\t⌘|Shift|P',
             },
-        },
+        }),
-        callsLeaveCall: {
+        callsLeaveCall: defineMessages({
             default: {
-                id: t('shortcuts.calls.leave_call'),
+                id: 'shortcuts.calls.leave_call',
                 defaultMessage: 'Leave current call:\tCtrl|Shift|L',
             },
             mac: {
-                id: t('shortcuts.calls.leave_call.mac'),
+                id: 'shortcuts.calls.leave_call.mac',
                 defaultMessage: 'Leave current call:\t⌘|Shift|L',
             },
-        },
+        }),
     },
     popout: {
-        callsPushToTalk: {
+        callsPushToTalk: defineMessages({
             default: {
-                id: t('shortcuts.calls.push_to_talk'),
+                id: 'shortcuts.calls.push_to_talk',
                 defaultMessage: 'Hold to unmute (push to talk):\tSpace',
             },
-        },
+        }),
     },
 };
 
 export const KEYBOARD_SHORTCUTS = {
-    mainHeader: {
+    mainHeader: defineMessages({
         default: {
-            id: t('shortcuts.header'),
+            id: 'shortcuts.header',
             defaultMessage: 'Keyboard shortcuts\tCtrl|/',
         },
         mac: {
-            id: t('shortcuts.header.mac'),
+            id: 'shortcuts.header.mac',
             defaultMessage: 'Keyboard shortcuts\t⌘|/',
         },
-    },
+    }),
-    navPrev: {
+    navPrev: defineMessages({
         default: {
-            id: t('shortcuts.nav.prev'),
+            id: 'shortcuts.nav.prev',
             defaultMessage: 'Previous channel:\tAlt|Up',
         },
         mac: {
-            id: t('shortcuts.nav.prev.mac'),
+            id: 'shortcuts.nav.prev.mac',
             defaultMessage: 'Previous channel:\t⌥|Up',
         },
-    },
+    }),
-    navNext: {
+    navNext: defineMessages({
         default: {
-            id: t('shortcuts.nav.next'),
+            id: 'shortcuts.nav.next',
             defaultMessage: 'Next channel:\tAlt|Down',
         },
         mac: {
-            id: t('shortcuts.nav.next.mac'),
+            id: 'shortcuts.nav.next.mac',
             defaultMessage: 'Next channel:\t⌥|Down',
         },
-    },
+    }),
-    navUnreadPrev: {
+    navUnreadPrev: defineMessages({
         default: {
-            id: t('shortcuts.nav.unread_prev'),
+            id: 'shortcuts.nav.unread_prev',
             defaultMessage: 'Previous unread channel:\tAlt|Shift|Up',
         },
         mac: {
-            id: t('shortcuts.nav.unread_prev.mac'),
+            id: 'shortcuts.nav.unread_prev.mac',
             defaultMessage: 'Previous unread channel:\t⌥|Shift|Up',
         },
-    },
+    }),
-    navUnreadNext: {
+    navUnreadNext: defineMessages({
         default: {
-            id: t('shortcuts.nav.unread_next'),
+            id: 'shortcuts.nav.unread_next',
             defaultMessage: 'Next unread channel:\tAlt|Shift|Down',
         },
         mac: {
-            id: t('shortcuts.nav.unread_next.mac'),
+            id: 'shortcuts.nav.unread_next.mac',
             defaultMessage: 'Next unread channel:\t⌥|Shift|Down',
         },
-    },
+    }),
-    teamNavPrev: {
+    teamNavPrev: defineMessages({
         default: {
-            id: t('shortcuts.team_nav.prev'),
+            id: 'shortcuts.team_nav.prev',
             defaultMessage: 'Previous team:\tCtrl|Alt|Up',
         },
         mac: {
-            id: t('shortcuts.team_nav.prev.mac'),
+            id: 'shortcuts.team_nav.prev.mac',
             defaultMessage: 'Previous team:\t⌘|⌥|Up',
         },
-    },
+    }),
-    teamNavNext: {
+    teamNavNext: defineMessages({
         default: {
-            id: t('shortcuts.team_nav.next'),
+            id: 'shortcuts.team_nav.next',
             defaultMessage: 'Next team:\tCtrl|Alt|Down',
         },
         mac: {
-            id: t('shortcuts.team_nav.next.mac'),
+            id: 'shortcuts.team_nav.next.mac',
             defaultMessage: 'Next team:\t⌘|⌥|Down',
         },
-    },
+    }),
-    teamNavSwitcher: {
+    teamNavSwitcher: defineMessages({
         default: {
-            id: t('shortcuts.team_nav.switcher'),
+            id: 'shortcuts.team_nav.switcher',
             defaultMessage: 'Navigate to a specific team:\tCtrl|Alt|[1-9]',
         },
         mac: {
-            id: t('shortcuts.team_nav.switcher.mac'),
+            id: 'shortcuts.team_nav.switcher.mac',
             defaultMessage: 'Navigate to a specific team:\t⌘|⌥|[1-9]',
         },
-    },
+    }),
-    navSwitcher: {
+    navSwitcher: defineMessages({
         default: {
-            id: t('shortcuts.nav.switcher'),
+            id: 'shortcuts.nav.switcher',
             defaultMessage: 'Quick channel navigation:\tCtrl|K',
         },
         mac: {
-            id: t('shortcuts.nav.switcher.mac'),
+            id: 'shortcuts.nav.switcher.mac',
             defaultMessage: 'Quick channel navigation:\t⌘|K',
         },
-    },
+    }),
-    navDMMenu: {
+    navDMMenu: defineMessages({
         default: {
-            id: t('shortcuts.nav.direct_messages_menu'),
+            id: 'shortcuts.nav.direct_messages_menu',
             defaultMessage: 'Direct messages menu:\tCtrl|Shift|K',
         },
         mac: {
-            id: t('shortcuts.nav.direct_messages_menu.mac'),
+            id: 'shortcuts.nav.direct_messages_menu.mac',
             defaultMessage: 'Direct messages menu:\t⌘|Shift|K',
         },
-    },
+    }),
-    navSettings: {
+    navSettings: defineMessages({
         default: {
-            id: t('shortcuts.nav.settings'),
+            id: 'shortcuts.nav.settings',
             defaultMessage: 'Settings:\tCtrl|Shift|A',
         },
         mac: {
-            id: t('shortcuts.nav.settings.mac'),
+            id: 'shortcuts.nav.settings.mac',
             defaultMessage: 'Settings:\t⌘|Shift|A',
         },
-    },
+    }),
-    navMentions: {
+    navMentions: defineMessages({
         default: {
-            id: t('shortcuts.nav.recent_mentions'),
+            id: 'shortcuts.nav.recent_mentions',
             defaultMessage: 'Recent mentions:\tCtrl|Shift|M',
         },
         mac: {
-            id: t('shortcuts.nav.recent_mentions.mac'),
+            id: 'shortcuts.nav.recent_mentions.mac',
             defaultMessage: 'Recent mentions:\t⌘|Shift|M',
         },
-    },
+    }),
-    navFocusCenter: {
+    navFocusCenter: defineMessages({
         default: {
-            id: t('shortcuts.nav.focus_center'),
+            id: 'shortcuts.nav.focus_center',
             defaultMessage: 'Set focus to input field:\tCtrl|Shift|L',
         },
         mac: {
-            id: t('shortcuts.nav.focus_center.mac'),
+            id: 'shortcuts.nav.focus_center.mac',
             defaultMessage: 'Set focus to input field:\t⌘|Shift|L',
         },
-    },
+    }),
-    navOpenCloseSidebar: {
+    navOpenCloseSidebar: defineMessages({
         default: {
-            id: t('shortcuts.nav.open_close_sidebar'),
+            id: 'shortcuts.nav.open_close_sidebar',
             defaultMessage: 'Open or close the right sidebar:\tCtrl|.',
         },
         mac: {
-            id: t('shortcuts.nav.open_close_sidebar.mac'),
+            id: 'shortcuts.nav.open_close_sidebar.mac',
             defaultMessage: 'Open or close the right sidebar:\t⌘|.',
         },
-    },
+    }),
-    navExpandSidebar: {
+    navExpandSidebar: defineMessages({
         default: {
-            id: t('shortcuts.nav.expand_sidebar'),
+            id: 'shortcuts.nav.expand_sidebar',
             defaultMessage: 'Expand the right sidebar:\tCtrl|Shift|.',
         },
         mac: {
-            id: t('shortcuts.nav.expand_sidebar.mac'),
+            id: 'shortcuts.nav.expand_sidebar.mac',
             defaultMessage: 'Expand the right sidebar:\t⌘|Shift|.',
         },
-    },
+    }),
-    navOpenChannelInfo: {
+    navOpenChannelInfo: defineMessages({
         default: {
-            id: t('shortcuts.nav.open_channel_info'),
+            id: 'shortcuts.nav.open_channel_info',
             defaultMessage: 'View channel info:\tCtrl|Alt|I',
         },
         mac: {
-            id: t('shortcuts.nav.open_channel_info.mac'),
+            id: 'shortcuts.nav.open_channel_info.mac',
             defaultMessage: 'View channel info:\t⌘|Shift|I',
         },
-    },
+    }),
-    navToggleUnreads: {
+    navToggleUnreads: defineMessages({
         default: {
-            id: t('shortcuts.nav.toggle_unreads'),
+            id: 'shortcuts.nav.toggle_unreads',
             defaultMessage: 'Toggle unread/all channels:\tCtrl|Shift|U',
         },
         mac: {
-            id: t('shortcuts.nav.toggle_unreads.mac'),
+            id: 'shortcuts.nav.toggle_unreads.mac',
             defaultMessage: 'Toggle unread/all channels:\t⌘|Shift|U',
         },
-    },
+    }),
-    msgEdit: {
+    msgEdit: defineMessage({
-        id: t('shortcuts.msgs.edit'),
+        id: 'shortcuts.msgs.edit',
         defaultMessage: 'Edit last message in channel:\tUp',
-    },
+    }),
-    msgReply: {
+    msgReply: defineMessage({
-        id: t('shortcuts.msgs.reply'),
+        id: 'shortcuts.msgs.reply',
         defaultMessage: 'Reply to last message in channel:\tShift|Up',
-    },
+    }),
-    msgReprintPrev: {
+    msgReprintPrev: defineMessages({
         default: {
-            id: t('shortcuts.msgs.reprint_prev'),
+            id: 'shortcuts.msgs.reprint_prev',
             defaultMessage: 'Reprint previous message:\tCtrl|Up',
         },
         mac: {
-            id: t('shortcuts.msgs.reprint_prev.mac'),
+            id: 'shortcuts.msgs.reprint_prev.mac',
             defaultMessage: 'Reprint previous message:\t⌘|Up',
         },
-    },
+    }),
-    msgReprintNext: {
+    msgReprintNext: defineMessages({
         default: {
-            id: t('shortcuts.msgs.reprint_next'),
+            id: 'shortcuts.msgs.reprint_next',
             defaultMessage: 'Reprint next message:\tCtrl|Down',
         },
         mac: {
-            id: t('shortcuts.msgs.reprint_next.mac'),
+            id: 'shortcuts.msgs.reprint_next.mac',
             defaultMessage: 'Reprint next message:\t⌘|Down',
         },
-    },
+    }),
-    msgCompUsername: {
+    msgCompUsername: defineMessage({
-        id: t('shortcuts.msgs.comp.username'),
+        id: 'shortcuts.msgs.comp.username',
         defaultMessage: 'Username:\t@|[a-z]|Tab',
-    },
+    }),
-    msgCompChannel: {
+    msgCompChannel: defineMessage({
-        id: t('shortcuts.msgs.comp.channel'),
+        id: 'shortcuts.msgs.comp.channel',
         defaultMessage: 'Channel:\t~|[a-z]|Tab',
-    },
+    }),
-    msgCompEmoji: {
+    msgCompEmoji: defineMessage({
-        id: t('shortcuts.msgs.comp.emoji'),
+        id: 'shortcuts.msgs.comp.emoji',
         defaultMessage: 'Emoji:\t:|[a-z]|Tab',
-    },
+    }),
-    msgLastReaction: {
+    msgLastReaction: defineMessages({
         default: {
-            id: t('shortcuts.msgs.comp.last_reaction'),
+            id: 'shortcuts.msgs.comp.last_reaction',
             defaultMessage: 'React to last message:\tCtrl|Shift|\u29F5',
         },
         mac: {
-            id: t('shortcuts.msgs.comp.last_reaction.mac'),
+            id: 'shortcuts.msgs.comp.last_reaction.mac',
             defaultMessage: 'React to last message:\t⌘|Shift|\u29F5',
         },
-    },
+    }),
-    msgMarkdownBold: {
+    msgMarkdownBold: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.bold'),
+            id: 'shortcuts.msgs.markdown.bold',
             defaultMessage: 'Bold:\tCtrl|B',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.bold.mac'),
+            id: 'shortcuts.msgs.markdown.bold.mac',
             defaultMessage: 'Bold:\t⌘|B',
         },
-    },
+    }),
-    msgMarkdownCode: {
+    msgMarkdownCode: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.code'),
+            id: 'shortcuts.msgs.markdown.code',
             defaultMessage: 'Code',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.code.mac'),
+            id: 'shortcuts.msgs.markdown.code.mac',
             defaultMessage: 'Code',
         },
-    },
+    }),
-    msgMarkdownStrike: {
+    msgMarkdownStrike: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.strike'),
+            id: 'shortcuts.msgs.markdown.strike',
             defaultMessage: 'Strikethrough:\tCtrl|Shift|X',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.strike.mac'),
+            id: 'shortcuts.msgs.markdown.strike.mac',
             defaultMessage: 'Strikethrough:\t⌘|Shift|X',
         },
-    },
+    }),
-    msgMarkdownH3: {
+    msgMarkdownH3: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.h3'),
+            id: 'shortcuts.msgs.markdown.h3',
             defaultMessage: 'Heading',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.h3.mac'),
+            id: 'shortcuts.msgs.markdown.h3.mac',
             defaultMessage: 'Heading',
         },
-    },
+    }),
-    msgMarkdownQuote: {
+    msgMarkdownQuote: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.quote'),
+            id: 'shortcuts.msgs.markdown.quote',
             defaultMessage: 'Quote',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.quote.mac'),
+            id: 'shortcuts.msgs.markdown.quote.mac',
             defaultMessage: 'Quote',
         },
-    },
+    }),
-    msgMarkdownOl: {
+    msgMarkdownOl: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.ordered'),
+            id: 'shortcuts.msgs.markdown.ordered',
             defaultMessage: 'Numbered List',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.ordered.mac'),
+            id: 'shortcuts.msgs.markdown.ordered.mac',
             defaultMessage: 'Numbered List',
         },
-    },
+    }),
-    msgMarkdownUl: {
+    msgMarkdownUl: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.unordered'),
+            id: 'shortcuts.msgs.markdown.unordered',
             defaultMessage: 'Bulleted List',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.unordered.mac'),
+            id: 'shortcuts.msgs.markdown.unordered.mac',
             defaultMessage: 'Bulleted List',
         },
-    },
+    }),
-    msgShowFormatting: {
+    msgShowFormatting: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.formatting.show'),
+            id: 'shortcuts.msgs.markdown.formatting.show',
             defaultMessage: 'Show Formatting:\tCtrl|Alt|T',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.formatting.show.mac'),
+            id: 'shortcuts.msgs.markdown.formatting.show.mac',
             defaultMessage: 'Show Formatting:\t⌘|⌥|T',
         },
-    },
+    }),
-    msgHideFormatting: {
+    msgHideFormatting: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.formatting.hide'),
+            id: 'shortcuts.msgs.markdown.formatting.hide',
             defaultMessage: 'Hide Formatting:\tCtrl|Alt|T',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.formatting.hide.mac'),
+            id: 'shortcuts.msgs.markdown.formatting.hide.mac',
             defaultMessage: 'Hide Formatting:\t⌘|⌥|T',
         },
-    },
+    }),
-    msgShowEmojiPicker: {
+    msgShowEmojiPicker: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.emoji'),
+            id: 'shortcuts.msgs.markdown.emoji',
             defaultMessage: 'Emoji / Gif picker:\tCtrl|Shift|E',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.emoji.mac'),
+            id: 'shortcuts.msgs.markdown.emoji.mac',
             defaultMessage: 'Emoji / Gif picker:\t⌘|Shift|E',
         },
-    },
+    }),
-    msgMarkdownPreview: {
+    msgMarkdownPreview: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.preview'),
+            id: 'shortcuts.msgs.markdown.preview',
             defaultMessage: 'Show/Hide Preview:\tCtrl|Alt|P',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.preview.mac'),
+            id: 'shortcuts.msgs.markdown.preview.mac',
             defaultMessage: 'Show/Hide Preview:\t⌘|Shift|P',
         },
-    },
+    }),
-    msgMarkdownItalic: {
+    msgMarkdownItalic: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.italic'),
+            id: 'shortcuts.msgs.markdown.italic',
             defaultMessage: 'Italic:\tCtrl|I',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.italic.mac'),
+            id: 'shortcuts.msgs.markdown.italic.mac',
             defaultMessage: 'Italic:\t⌘|I',
         },
-    },
+    }),
-    msgMarkdownLink: {
+    msgMarkdownLink: defineMessages({
         default: {
-            id: t('shortcuts.msgs.markdown.link'),
+            id: 'shortcuts.msgs.markdown.link',
             defaultMessage: 'Link:\tCtrl|Alt|K',
         },
         mac: {
-            id: t('shortcuts.msgs.markdown.link.mac'),
+            id: 'shortcuts.msgs.markdown.link.mac',
             defaultMessage: 'Link:\t⌘|⌥|K',
         },
-    },
+    }),
-    filesUpload: {
+    filesUpload: defineMessages({
         default: {
-            id: t('shortcuts.files.upload'),
+            id: 'shortcuts.files.upload',
             defaultMessage: 'Upload files:\tCtrl|U',
         },
         mac: {
-            id: t('shortcuts.files.upload.mac'),
+            id: 'shortcuts.files.upload.mac',
             defaultMessage: 'Upload files:\t⌘|U',
         },
-    },
+    }),
-    browserChannelPrev: {
+    browserChannelPrev: defineMessages({
         default: {
-            id: t('shortcuts.browser.channel_prev'),
+            id: 'shortcuts.browser.channel_prev',
             defaultMessage: 'Back in history:\tAlt|Left',
         },
         mac: {
-            id: t('shortcuts.browser.channel_prev.mac'),
+            id: 'shortcuts.browser.channel_prev.mac',
             defaultMessage: 'Back in history:\t⌘|[',
         },
-    },
+    }),
-    browserChannelNext: {
+    browserChannelNext: defineMessages({
         default: {
-            id: t('shortcuts.browser.channel_next'),
+            id: 'shortcuts.browser.channel_next',
             defaultMessage: 'Forward in history:\tAlt|Right',
         },
         mac: {
-            id: t('shortcuts.browser.channel_next.mac'),
+            id: 'shortcuts.browser.channel_next.mac',
             defaultMessage: 'Forward in history:\t⌘|]',
         },
-    },
+    }),
-    browserFontIncrease: {
+    browserFontIncrease: defineMessages({
         default: {
-            id: t('shortcuts.browser.font_increase'),
+            id: 'shortcuts.browser.font_increase',
             defaultMessage: 'Zoom in:\tCtrl|+',
         },
         mac: {
-            id: t('shortcuts.browser.font_increase.mac'),
+            id: 'shortcuts.browser.font_increase.mac',
             defaultMessage: 'Zoom in:\t⌘|+',
         },
-    },
+    }),
-    browserFontDecrease: {
+    browserFontDecrease: defineMessages({
         default: {
-            id: t('shortcuts.browser.font_decrease'),
+            id: 'shortcuts.browser.font_decrease',
             defaultMessage: 'Zoom out:\tCtrl|-',
         },
         mac: {
-            id: t('shortcuts.browser.font_decrease.mac'),
+            id: 'shortcuts.browser.font_decrease.mac',
             defaultMessage: 'Zoom out:\t⌘|-',
         },
-    },
+    }),
-    browserHighlightPrev: {
+    browserHighlightPrev: defineMessage({
-        id: t('shortcuts.browser.highlight_prev'),
+        id: 'shortcuts.browser.highlight_prev',
         defaultMessage: 'Highlight text to the previous line:\tShift|Up',
-    },
+    }),
-    browserHighlightNext: {
+    browserHighlightNext: defineMessage({
-        id: t('shortcuts.browser.highlight_next'),
+        id: 'shortcuts.browser.highlight_next',
         defaultMessage: 'Highlight text to the next line:\tShift|Down',
-    },
+    }),
-    browserNewline: {
+    browserNewline: defineMessage({
-        id: t('shortcuts.browser.newline'),
+        id: 'shortcuts.browser.newline',
         defaultMessage: 'Create a new line:\tShift|Enter',
-    },
+    }),
-    msgSearchChannel: {
+    msgSearchChannel: defineMessages({
         default: {
-            id: t('shortcuts.msgs.search_channel'),
+            id: 'shortcuts.msgs.search_channel',
             defaultMessage: 'In channel:\tCtrl|F',
         },
         mac: {
-            id: t('shortcuts.msgs.search_channel.mac'),
+            id: 'shortcuts.msgs.search_channel.mac',
             defaultMessage: 'In channel:\t⌘|F',
         },
-    },
+    }),
-    msgPostPriority: {
+    msgPostPriority: defineMessages({
         default: {
-            id: t('shortcuts.msgs.formatting_bar.post_priority'),
+            id: 'shortcuts.msgs.formatting_bar.post_priority',
             defaultMessage: 'Message priority',
         },
         mac: {
-            id: t('shortcuts.msgs.formatting_bar.post_priority'),
+            id: 'shortcuts.msgs.formatting_bar.post_priority',
             defaultMessage: 'Message priority',
         },
-    },
+    }),
     calls: callsKBShortcuts,
 };

webapp/channels/src/components/no_results_indicator/__snapshots__/no_results_indicator.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`components/no_results_indicator should match snapshot when expanded 1`]
         className="no-results__title"
       >
         <MemoizedFormattedMessage
+          defaultMessage="No results for “{channelName}”"
           id="no_results.search.title"
         />
       </h3>
@@ -28,6 +29,7 @@ exports[`components/no_results_indicator should match snapshot when expanded 1`]
         className="no-results__subtitle"
       >
         <MemoizedFormattedMessage
+          defaultMessage="Check the spelling or try another search."
           id="no_results.search.subtitle"
         />
       </div>
@@ -84,6 +86,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No files yet"
         id="no_results.channel_files.title"
       />
     </h3>
@@ -91,6 +94,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="Files posted in this channel will show here."
         id="no_results.channel_files.subtitle"
       />
     </div>
@@ -112,6 +116,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No files found"
         id="no_results.channel_files_filtered.title"
       />
     </h3>
@@ -119,6 +124,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="This channel doesn't contains any file with the selected file format."
         id="no_results.channel_files_filtered.subtitle"
       />
     </div>
@@ -140,6 +146,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No results for “{channelName}”"
         id="no_results.channel_search.title"
       />
     </h3>
@@ -147,6 +154,7 @@ exports[`components/no_results_indicator should match snapshot with variant Chan
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="Check the spelling or try another search."
         id="no_results.channel_search.subtitle"
       />
     </div>
@@ -168,6 +176,7 @@ exports[`components/no_results_indicator should match snapshot with variant Flag
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No saved messages yet"
         id="no_results.flagged_posts.title"
       />
     </h3>
@@ -175,6 +184,7 @@ exports[`components/no_results_indicator should match snapshot with variant Flag
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="To save something for later, open the context menu on a message and choose {buttonText}. Saved messages are only visible to you"
         id="no_results.flagged_posts.subtitle"
       />
     </div>
@@ -196,6 +206,7 @@ exports[`components/no_results_indicator should match snapshot with variant Ment
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No mentions yet"
         id="no_results.mentions.title"
       />
     </h3>
@@ -203,6 +214,7 @@ exports[`components/no_results_indicator should match snapshot with variant Ment
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="Messages where someone mentions you or includes your trigger words are saved here."
         id="no_results.mentions.subtitle"
       />
     </div>
@@ -224,6 +236,7 @@ exports[`components/no_results_indicator should match snapshot with variant Pinn
       className="no-results__title"
     >
       <MemoizedFormattedMessage
+        defaultMessage="No pinned messages yet"
         id="no_results.pinned_messages.title"
       />
     </h3>
@@ -231,6 +244,7 @@ exports[`components/no_results_indicator should match snapshot with variant Pinn
       className="no-results__subtitle"
     >
       <MemoizedFormattedMessage
+        defaultMessage="To pin important messages, open the context menu on a message and choose {text}. Pinned messages will be visible to everyone in this channel."
         id="no_results.pinned_messages.subtitle"
       />
     </div>

webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx

@@ -4,13 +4,10 @@
 import classNames from 'classnames';
 import React from 'react';
 import type {ReactNode, CSSProperties} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
-import type {MessageDescriptor} from 'react-intl';
 
 import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG} from 'components/common/svg_images_components';
 
-import {t} from 'utils/i18n';
-
 import {NoResultsVariant, NoResultsLayout} from './types';
 import './no_results_indicator.scss';
 
@@ -42,77 +39,99 @@ const iconMap: {[key in NoResultsVariant]: React.ReactNode } = {
     [NoResultsVariant.UserGroupsArchived]: <UserGroupsSVG className='no-results__icon'/>,
 };
 
-const titleMap: {[key in NoResultsVariant]: MessageDescriptor} = {
+const titleMap = defineMessages({
     [NoResultsVariant.Search]: {
-        id: t('no_results.search.title'),
+        id: 'no_results.search.title',
+        defaultMessage: 'No results for “{channelName}”',
     },
     [NoResultsVariant.Files]: {
-        id: t('no_results.Files.title'),
+        id: 'no_results.Files.title',
+        defaultMessage: 'No file results for “{searchTerm}”',
     },
     [NoResultsVariant.ChannelSearch]: {
-        id: t('no_results.channel_search.title'),
+        id: 'no_results.channel_search.title',
+        defaultMessage: 'No results for “{channelName}”',
     },
     [NoResultsVariant.Mentions]: {
-        id: t('no_results.mentions.title'),
+        id: 'no_results.mentions.title',
+        defaultMessage: 'No mentions yet',
     },
     [NoResultsVariant.FlaggedPosts]: {
-        id: t('no_results.flagged_posts.title'),
+        id: 'no_results.flagged_posts.title',
+        defaultMessage: 'No saved messages yet',
     },
     [NoResultsVariant.PinnedPosts]: {
-        id: t('no_results.pinned_messages.title'),
+        id: 'no_results.pinned_messages.title',
+        defaultMessage: 'No pinned messages yet',
     },
     [NoResultsVariant.ChannelFiles]: {
-        id: t('no_results.channel_files.title'),
+        id: 'no_results.channel_files.title',
+        defaultMessage: 'No files yet',
     },
     [NoResultsVariant.ChannelFilesFiltered]: {
-        id: t('no_results.channel_files_filtered.title'),
+        id: 'no_results.channel_files_filtered.title',
+        defaultMessage: 'No files found',
     },
     [NoResultsVariant.UserGroups]: {
-        id: t('no_results.user_groups.title'),
+        id: 'no_results.user_groups.title',
+        defaultMessage: 'No groups yet',
     },
     [NoResultsVariant.UserGroupMembers]: {
-        id: t('no_results.user_group_members.title'),
+        id: 'no_results.user_group_members.title',
+        defaultMessage: 'No members yet',
     },
     [NoResultsVariant.UserGroupsArchived]: {
-        id: t('no_results.user_groups.archived.title'),
+        id: 'no_results.user_groups.archived.title',
+        defaultMessage: 'No archived groups',
     },
-};
+});
 
-const subtitleMap: {[key in NoResultsVariant]: MessageDescriptor} = {
+const subtitleMap = defineMessages({
     [NoResultsVariant.Search]: {
-        id: t('no_results.search.subtitle'),
+        id: 'no_results.search.subtitle',
+        defaultMessage: 'Check the spelling or try another search.',
     },
     [NoResultsVariant.Files]: {
-        id: t('no_results.Files.subtitle'),
+        id: 'no_results.Files.subtitle',
+        defaultMessage: 'Check the spelling or try another search.',
     },
     [NoResultsVariant.ChannelSearch]: {
-        id: t('no_results.channel_search.subtitle'),
+        id: 'no_results.channel_search.subtitle',
+        defaultMessage: 'Check the spelling or try another search.',
     },
     [NoResultsVariant.Mentions]: {
-        id: t('no_results.mentions.subtitle'),
+        id: 'no_results.mentions.subtitle',
+        defaultMessage: 'Messages where someone mentions you or includes your trigger words are saved here.',
     },
     [NoResultsVariant.FlaggedPosts]: {
-        id: t('no_results.flagged_posts.subtitle'),
+        id: 'no_results.flagged_posts.subtitle',
+        defaultMessage: 'To save something for later, open the context menu on a message and choose {buttonText}. Saved messages are only visible to you',
     },
     [NoResultsVariant.PinnedPosts]: {
-        id: t('no_results.pinned_messages.subtitle'),
+        id: 'no_results.pinned_messages.subtitle',
+        defaultMessage: 'To pin important messages, open the context menu on a message and choose {text}. Pinned messages will be visible to everyone in this channel.',
     },
     [NoResultsVariant.ChannelFiles]: {
-        id: t('no_results.channel_files.subtitle'),
+        id: 'no_results.channel_files.subtitle',
+        defaultMessage: 'Files posted in this channel will show here.',
     },
     [NoResultsVariant.ChannelFilesFiltered]: {
-        id: t('no_results.channel_files_filtered.subtitle'),
+        id: 'no_results.channel_files_filtered.subtitle',
+        defaultMessage: "This channel doesn't contains any file with the selected file format.",
     },
     [NoResultsVariant.UserGroups]: {
-        id: t('no_results.user_groups.subtitle'),
+        id: 'no_results.user_groups.subtitle',
+        defaultMessage: 'Groups are a custom collection of users that can be used for mentions and invites.',
     },
     [NoResultsVariant.UserGroupMembers]: {
-        id: t('no_results.user_group_members.subtitle'),
+        id: 'no_results.user_group_members.subtitle',
+        defaultMessage: 'There are currently no members in this group, please add one.',
     },
     [NoResultsVariant.UserGroupsArchived]: {
-        id: t('no_results.user_groups.archived.subtitle'),
+        id: 'no_results.user_groups.archived.subtitle',
+        defaultMessage: 'Groups that are no longer relevant or are not being used can be archived',
     },
-};
+});
 
 const NoResultsIndicator = ({
     expanded,

webapp/channels/src/components/search_results/search_results.tsx

@@ -4,8 +4,7 @@
 import classNames from 'classnames';
 import React, {useEffect, useRef, useState} from 'react';
 import Scrollbars from 'react-custom-scrollbars';
-import {useIntl, FormattedMessage} from 'react-intl';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
-import type {MessageDescriptor} from 'react-intl';
 import {useSelector} from 'react-redux';
 
 import type {FileSearchResultItem as FileSearchResultItemType} from '@mattermost/types/files';
@@ -25,7 +24,6 @@ import LoadingSpinner from 'components/widgets/loading/loading_wrapper';
 
 import {searchHintOptions, DataSearchTypes} from 'utils/constants';
 import {isFileAttachmentsEnabled} from 'utils/file_utils';
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
 import FilesFilterMenu from './files_filter_menu';
@@ -178,7 +176,7 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
 
     let sortedResults: any = results;
 
-    const titleDescriptor: MessageDescriptor = {};
+    let titleDescriptor;
     const noResultsProps: NoResultsProps = {
         variant: NoResultsVariant.ChannelSearch,
     };
@@ -186,8 +184,10 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
     if (isMentionSearch) {
         noResultsProps.variant = NoResultsVariant.Mentions;
 
-        titleDescriptor.id = t('search_header.title2');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Recent Mentions';
+            id: 'search_header.title2',
+            defaultMessage: 'Recent Mentions',
+        });
     } else if (isFlaggedPosts) {
         noResultsProps.variant = NoResultsVariant.FlaggedPosts;
         noResultsProps.subtitleValues = {buttonText: <strong>{
@@ -195,8 +195,10 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
                 id: 'flag_post.flag',
                 defaultMessage: 'Save Message'},
             )}</strong>};
-        titleDescriptor.id = t('search_header.title3');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Saved messages';
+            id: 'search_header.title3',
+            defaultMessage: 'Saved messages',
+        });
     } else if (isPinnedPosts) {
         noResultsProps.variant = NoResultsVariant.PinnedPosts;
         noResultsProps.subtitleValues = {text: <strong>{
@@ -208,8 +210,10 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
         sortedResults = [...results];
         sortedResults.sort((postA: Post|FileSearchResultItemType, postB: Post|FileSearchResultItemType) => postB.create_at - postA.create_at);
 
-        titleDescriptor.id = t('search_header.pinnedMessages');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Pinned messages';
+            id: 'search_header.pinnedMessages',
+            defaultMessage: 'Pinned messages',
+        });
     } else if (isChannelFiles) {
         if (searchFilterType === 'all') {
             noResultsProps.variant = NoResultsVariant.ChannelFiles;
@@ -217,24 +221,34 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
             noResultsProps.variant = NoResultsVariant.ChannelFilesFiltered;
         }
 
-        titleDescriptor.id = t('search_header.channelFiles');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Files';
+            id: 'search_header.channelFiles',
+            defaultMessage: 'Files',
+        });
     } else if (isCard) {
-        titleDescriptor.id = t('search_header.title5');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Extra information';
+            id: 'search_header.title5',
+            defaultMessage: 'Extra information',
+        });
     } else if (!searchTerms && noResults && noFileResults) {
-        titleDescriptor.id = t('search_header.search');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Search';
+            id: 'search_header.search',
+            defaultMessage: 'Search',
+        });
     } else if (searchType === DataSearchTypes.FILES_SEARCH_TYPE && !isChannelFiles) {
         noResultsProps.variant = NoResultsVariant.Files;
         noResultsProps.titleValues = {searchTerm: `${searchTerms}`};
-        titleDescriptor.id = t('search_header.results');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Search Results';
+            id: 'search_header.results',
+            defaultMessage: 'Search Results',
+        });
     } else {
         noResultsProps.titleValues = {channelName: `${searchTerms}`};
 
-        titleDescriptor.id = t('search_header.results');
+        titleDescriptor = defineMessage({
-        titleDescriptor.defaultMessage = 'Search Results';
+            id: 'search_header.results',
+            defaultMessage: 'Search Results',
+        });
     }
 
     const formattedTitle = intl.formatMessage(titleDescriptor);

webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap

@@ -271,7 +271,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting
   className=""
 >
   <SidebarCategoryHeader
-    displayName="custom_category_1"
+    displayName="DIRECT MESSAGES"
     isCollapsed={false}
     isCollapsible={true}
     isDragging={false}
@@ -394,7 +394,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate
   className=""
 >
   <SidebarCategoryHeader
-    displayName="custom_category_1"
+    displayName="DIRECT MESSAGES"
     isCollapsed={false}
     isCollapsible={false}
     isDragging={false}

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import React from 'react';
 import type {MouseEvent, KeyboardEvent} from 'react';
 import {Draggable, Droppable} from 'react-beautiful-dnd';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 
 import type {ChannelCategory} from '@mattermost/types/channel_categories';
 import {CategorySorting} from '@mattermost/types/channel_categories';
@@ -23,7 +23,6 @@ import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 
 import Constants, {A11yCustomEventTypes, DraggingStateTypes, DraggingStates} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {isKeyPressed} from 'utils/keyboard';
 
 import type {DraggingState} from 'types/store';
@@ -316,7 +315,8 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
 
         let displayName = category.display_name;
         if (category.type !== CategoryTypes.CUSTOM) {
-            displayName = localizeMessage(`sidebar.types.${category.type}`, category.display_name);
+            const message = categoryNames[category.type as keyof typeof categoryNames];
+            displayName = localizeMessage(message.id, message.defaultMessage);
         }
 
         return (
@@ -409,7 +409,17 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
     }
 }
 
-// Adding references to translations for i18n-extract
+const categoryNames = defineMessages({
-t('sidebar.types.channels');
+    channels: {
-t('sidebar.types.direct_messages');
+        id: 'sidebar.types.channels',
-t('sidebar.types.favorites');
+        defaultMessage: 'CHANNELS',
+    },
+    direct_messages: {
+        id: 'sidebar.types.direct_messages',
+        defaultMessage: 'DIRECT MESSAGES',
+    },
+    favorites: {
+        id: 'sidebar.types.favorites',
+        defaultMessage: 'FAVORITES',
+    },
+});

webapp/channels/src/components/threading/common/follow_button/follow_button.tsx

@@ -6,8 +6,6 @@ import React, {memo} from 'react';
 import type {ComponentProps} from 'react';
 import {useIntl} from 'react-intl';
 
-import {t} from 'utils/i18n';
-
 import Button from '../button';
 
 type Props = {
@@ -26,11 +24,11 @@ function FollowButton({
             disabled={Boolean(props.disabled)}
             isActive={isFollowing ?? false}
         >
-            {formatMessage(isFollowing ? {
+            {isFollowing ? formatMessage({
-                id: t('threading.following'),
+                id: 'threading.following',
                 defaultMessage: 'Following',
-            } : {
+            }) : formatMessage({
-                id: t('threading.notFollowing'),
+                id: 'threading.notFollowing',
                 defaultMessage: 'Follow',
             })}
         </Button>

webapp/channels/src/components/threading/global_threads/thread_menu/thread_menu.tsx

@@ -21,7 +21,6 @@ import {manuallyMarkThreadAsUnread} from 'actions/views/threads';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 
-import {t} from 'utils/i18n';
 import {getSiteURL} from 'utils/url';
 import {copyToClipboard} from 'utils/utils';
 
@@ -89,20 +88,20 @@ function ThreadMenu({
                 <Menu.ItemAction
                     {...isFollowing ? {
                         text: formatMessage({
-                            id: t('threading.threadMenu.unfollow'),
+                            id: 'threading.threadMenu.unfollow',
                             defaultMessage: 'Unfollow thread',
                         }),
                         extraText: formatMessage({
-                            id: t('threading.threadMenu.unfollowExtra'),
+                            id: 'threading.threadMenu.unfollowExtra',
                             defaultMessage: 'You won’t be notified about replies',
                         }),
                     } : {
                         text: formatMessage({
-                            id: t('threading.threadMenu.follow'),
+                            id: 'threading.threadMenu.follow',
                             defaultMessage: 'Follow thread',
                         }),
                         extraText: formatMessage({
-                            id: t('threading.threadMenu.followExtra'),
+                            id: 'threading.threadMenu.followExtra',
                             defaultMessage: 'You will be notified about replies',
                         }),
                     }}
@@ -112,7 +111,7 @@ function ThreadMenu({
                 />
                 <Menu.ItemAction
                     text={formatMessage({
-                        id: t('threading.threadMenu.openInChannel'),
+                        id: 'threading.threadMenu.openInChannel',
                         defaultMessage: 'Open in channel',
                     })}
                     onClick={useCallback(() => {
@@ -120,22 +119,22 @@ function ThreadMenu({
                     }, [threadId])}
                 />
                 <Menu.ItemAction
-                    text={formatMessage(hasUnreads ? {
+                    text={hasUnreads ? formatMessage({
-                        id: t('threading.threadMenu.markRead'),
+                        id: 'threading.threadMenu.markRead',
                         defaultMessage: 'Mark as read',
-                    } : {
+                    }) : formatMessage({
-                        id: t('threading.threadMenu.markUnread'),
+                        id: 'threading.threadMenu.markUnread',
                         defaultMessage: 'Mark as unread',
                     })}
                     onClick={handleReadUnread}
                 />
 
                 <Menu.ItemAction
-                    text={formatMessage(isSaved ? {
+                    text={isSaved ? formatMessage({
-                        id: t('threading.threadMenu.unsave'),
+                        id: 'threading.threadMenu.unsave',
                         defaultMessage: 'Unsave',
-                    } : {
+                    }) : formatMessage({
-                        id: t('threading.threadMenu.save'),
+                        id: 'threading.threadMenu.save',
                         defaultMessage: 'Save',
                     })}
                     onClick={useCallback(() => {
@@ -144,7 +143,7 @@ function ThreadMenu({
                 />
                 <Menu.ItemAction
                     text={formatMessage({
-                        id: t('threading.threadMenu.copy'),
+                        id: 'threading.threadMenu.copy',
                         defaultMessage: 'Copy link',
                     })}
                     onClick={useCallback(() => {

webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.tsx

@@ -16,8 +16,6 @@ import {getPost, makeGetPostsForThread} from 'mattermost-redux/selectors/entitie
 import Header from 'components/widgets/header';
 import SimpleTooltip from 'components/widgets/simple_tooltip';
 
-import {t} from 'utils/i18n';
-
 import type {GlobalState} from 'types/store';
 
 import Button from '../../common/button';
@@ -124,7 +122,7 @@ const ThreadPane = ({
                             <SimpleTooltip
                                 id='threadActionMenu'
                                 content={formatMessage({
-                                    id: t('threading.threadHeader.menu'),
+                                    id: 'threading.threadHeader.menu',
                                     defaultMessage: 'More Actions',
                                 })}
                             >

webapp/channels/src/components/threading/global_threads_link/global_threads_link.tsx

@@ -34,7 +34,6 @@ import Constants, {
     Preferences,
     RHSStates,
 } from 'utils/constants';
-import {t} from 'utils/i18n';
 import {Mark} from 'utils/performance_telemetry';
 
 import type {GlobalState} from 'types/store';
@@ -119,7 +118,7 @@ const GlobalThreadsLink = () => {
                     </span>
                     <div className='SidebarChannelLinkLabel_wrapper'>
                         <span className='SidebarChannelLinkLabel sidebar-item__name'>
-                            {formatMessage({id: t('globalThreads.sidebarLink'), defaultMessage: 'Threads'})}
+                            {formatMessage({id: 'globalThreads.sidebarLink', defaultMessage: 'Threads'})}
                         </span>
                     </div>
                     {counts?.total_unread_mentions > 0 && (

webapp/channels/src/components/tours/channels_tour_tip.tsx

@@ -2,21 +2,27 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import type {Placement} from 'tippy.js';
 
 import type {PunchOutCoordsHeightAndWidth} from '@mattermost/components';
 import {TourTip} from '@mattermost/components';
 
-import {t} from 'utils/i18n';
-
 import {useTourTipManager} from './tour_manager';
 import {getLastStep} from './utils';
 
 // TODO MM-51399 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
 // find them there, so we've had to redefine them here
-t('tutorial_tip.out');
+defineMessages({
-t('tutorial_tip.seen');
+    optOut: {
+        id: 'tutorial_tip.out',
+        defaultMessage: 'Opt out of these tips.',
+    },
+    seenBefore: {
+        id: 'tutorial_tip.seen',
+        defaultMessage: 'Seen this before? ',
+    },
+});
 
 export type ChannelsTourTipProps = {
     screen: JSX.Element;