From b2fbee16088769819b9c2faf8044a88932f7fa8e Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Wed, 16 Oct 2024 11:22:28 -0400
Subject: [PATCH] Remove localizeMessage from a bunch of components (#28340)

* Remove localizeMessage usage for passing into LoadingSpinner or LoadingWrapper components

* Allow Input widget to translate its placeholder and remove related usage of localizeMessage

* Allow DropdownInputHybrid to translate its placeholder and remove localizeMessage from related files

* Have Multiselect translate some of its props and remove localizeMessage from the components using it

* Remove unused message prop from StartTrianBtn

* Remove localizeMessage from a bunch of function components

* Remove unused editingPost.title state

* Remove usage of localizeMessage from some random components

* Remove unused DataGrid searchPlaceholder prop

* Add LocalizedPlaceholderInput and LocalizedPlaceholderTextarea

I used these in a bunch of places where we used localizeMessage or in places where we only injected intl just for a placeholder. I didn't really need to remove injectIntl from all these places, but it's been a pet peeve of mine for a while

* Have SearchableChannelList always use its injected intl

* Added changes that VS Code didn't show me in the last commit...
---
 .../channels/src/actions/post_actions.test.ts |  14 +-
 webapp/channels/src/actions/post_actions.ts   |   4 +-
 .../src/actions/views/create_comment.tsx      |   1 -
 .../loading_image_preview.test.tsx.snap       |   6 +-
 .../searchable_channel_list.test.tsx.snap     |   1 +
 .../setting_picture.test.tsx.snap             |  56 ++-
 .../components/device_icon.tsx                |  11 +-
 .../add_groups_to_channel_modal.test.tsx.snap |  21 +-
 .../add_groups_to_channel_modal.tsx           |   9 +-
 .../add_groups_to_team_modal.test.tsx.snap    |  21 +-
 .../add_groups_to_team_modal.tsx              |  10 +-
 ...dd_user_to_group_multiselect.test.tsx.snap |  49 +-
 .../add_user_to_group_multiselect.tsx         |  19 +-
 .../add_users_to_group_modal.test.tsx.snap    |  14 +-
 .../add_users_to_group_modal.tsx              |   8 +-
 .../add_users_to_team_modal.test.tsx.snap     |  42 +-
 .../add_users_to_team_modal.tsx               |  10 +-
 .../custom_url_schemes_setting.test.tsx.snap  | 455 +++++++++---------
 .../billing/company_info_edit.tsx             |  19 +-
 .../admin_console/cluster_table.tsx           |  37 +-
 .../compliance_reports/compliance_reports.tsx |  29 +-
 .../custom_url_schemes_setting.test.tsx       |   4 +-
 .../custom_url_schemes_setting.tsx            |  34 +-
 .../__snapshots__/data_grid.test.tsx.snap     |   4 -
 .../admin_console/data_grid/data_grid.tsx     |   3 -
 .../data_grid/data_grid_search.tsx            |  15 +-
 .../data_retention_settings.test.tsx.snap     |   8 -
 .../__snapshots__/channel_list.test.tsx.snap  |   2 -
 .../custom_policy_form.test.tsx.snap          |  42 +-
 .../custom_policy_form/custom_policy_form.tsx |  64 ++-
 .../global_policy_form.test.tsx.snap          |  33 +-
 .../global_policy_form/global_policy_form.tsx |  43 +-
 .../__snapshots__/team_list.test.tsx.snap     |  57 ++-
 .../team_list/team_list.tsx                   |   5 +-
 .../feature_discovery/feature_discovery.tsx   |   5 -
 .../__snapshots__/groups_list.test.tsx.snap   |  99 +++-
 .../groups_list/groups_list.tsx               |   8 +-
 .../modals/upload_license_modal.tsx           |   6 +-
 .../manage_teams_dropdown.tsx                 |  22 +-
 .../member_list_group.test.tsx.snap           |   2 -
 .../permission_schemes_settings.test.tsx      |  15 +-
 .../permission_schemes_settings.tsx           |  10 +-
 ...mission_team_scheme_settings.test.tsx.snap |  88 +++-
 .../permission_team_scheme_settings.test.tsx  |  27 +-
 .../permission_team_scheme_settings.tsx       |  23 +-
 .../permissions_scheme_summary.test.tsx.snap  |  21 +-
 .../permissions_scheme_summary.tsx            |   6 +-
 .../__snapshots__/system_roles.test.tsx.snap  |   1 -
 .../add_users_to_role_modal.test.tsx.snap     | 126 ++++-
 .../add_users_to_role_modal.tsx               |  10 +-
 .../system_role_users.test.tsx.snap           |   2 -
 .../__snapshots__/channel_list.test.tsx.snap  |   3 -
 .../users_to_remove.test.tsx.snap             |   4 -
 .../__snapshots__/team_list.test.tsx.snap     |   2 -
 .../__snapshots__/user_grid.test.tsx.snap     |   3 -
 .../apps_form_component.test.tsx.snap         |   7 +-
 .../apps_form/apps_form_component.tsx         |   5 +-
 .../backstage/components/backstage_list.tsx   |  11 +-
 .../channel_groups_manage_modal.tsx           |  14 +-
 .../channel_header_dropdown.tsx               |  21 +-
 .../menu_items/toggle_info/toggle_info.tsx    |  12 +-
 .../channel_info_button.tsx                   |  31 +-
 .../show_search_button/show_search_button.tsx |   7 +-
 .../channel_invite_modal.test.tsx.snap        |  72 +++
 .../channel_invite_modal.test.tsx             |   1 -
 .../channel_invite_modal.tsx                  |  12 +-
 .../channel_members_dropdown.tsx              |  13 +-
 .../channel_name_form_field.tsx               |  11 +-
 .../channel_selector_modal.test.tsx.snap      |  28 +-
 .../channel_selector_modal.tsx                |   7 +-
 .../claim/components/ldap_to_email.tsx        |   7 +-
 .../claim/components/oauth_to_email.tsx       |   6 +-
 .../create_user_groups_modal.test.tsx.snap    |  42 +-
 .../create_user_groups_modal.test.tsx         |  16 +-
 .../create_user_groups_modal.tsx              |  72 ++-
 .../dnd_custom_time_picker_modal.tsx          |   4 +-
 .../src/components/dot_menu/dot_menu.tsx      |   3 +-
 .../__snapshots__/emoji_page.test.tsx.snap    |   2 +-
 .../__snapshots__/add_emoji.test.tsx.snap     |  21 +-
 .../components/emoji/add_emoji/add_emoji.tsx  |   5 +-
 .../emoji/emoji_list/emoji_list.tsx           |  12 +-
 .../__snapshots__/error_title.test.tsx.snap   |   7 +-
 .../src/components/error_page/error_title.tsx |   8 +-
 .../feature_restricted_modal.tsx              |   1 -
 .../components/feedback_modal/feedback.tsx    |  15 +-
 .../file_info_preview/file_info_preview.tsx   |   7 +-
 .../file_preview_modal.test.tsx.snap          |  21 +-
 .../file_preview_modal/file_preview_modal.tsx |   9 +-
 .../history_buttons/history_buttons.tsx       |   7 +-
 .../abstract_command.test.tsx.snap            | 170 +++++--
 .../abstract_incoming_hook.test.tsx.snap      |  42 +-
 .../abstract_oauth_app.test.tsx.snap          |  14 +-
 .../abstract_outgoing_webhook.test.tsx.snap   |   7 +-
 .../integrations/abstract_command.test.tsx    |  23 +-
 .../integrations/abstract_command.tsx         |  33 +-
 .../abstract_incoming_webhook.tsx             |   4 +-
 .../integrations/abstract_oauth_app.tsx       |   4 +-
 .../abstract_outgoing_webhook.tsx             |   2 +-
 .../__snapshots__/add_command.test.tsx.snap   |   2 +-
 .../__snapshots__/edit_command.test.tsx.snap  |   2 +-
 .../installed_oauth_app.test.tsx.snap         | 126 +++--
 .../installed_oauth_app.tsx                   |  52 +-
 ...ed_outgoing_oauth_connection.test.tsx.snap |  13 +-
 ...th_connection_audience_input.test.tsx.snap | 140 +++++-
 .../installed_outgoing_oauth_connection.tsx   |  19 +-
 .../oauth_connection_audience_input.test.tsx  |  18 +-
 .../oauth_connection_audience_input.tsx       |   6 +-
 .../learn_more_trial_modal.tsx                |   3 -
 .../start_trial_btn.tsx                       |   1 -
 .../src/components/loading_image_preview.tsx  |   5 +-
 .../localized_placeholder_input.tsx           |  25 +
 .../localized_placeholder_textarea.tsx        |  25 +
 .../src/components/mfa/setup/setup.tsx        |  38 +-
 .../components/multiselect/multiselect.tsx    |  41 +-
 ...nboarding_tasklist_completed.test.tsx.snap |   1 -
 .../onboarding_tasklist_completed.tsx         |   5 +-
 .../password_reset_send_link.test.tsx.snap    |   8 +-
 .../password_reset_send_link.test.tsx         |   7 +-
 .../password_reset_send_link.tsx              |  12 +-
 .../marketplace_item_app.test.tsx.snap        |  63 ++-
 .../marketplace_item_app.tsx                  |   6 +-
 .../marketplace_item_plugin.test.tsx.snap     |  63 ++-
 .../marketplace_item_plugin.tsx               |   6 +-
 .../__snapshots__/show_more.test.tsx.snap     |  25 +-
 .../post_view/show_more/show_more.tsx         |  17 +-
 .../pricing_modal/self_hosted_content.tsx     |   1 -
 .../search_results/search_results.tsx         |   5 +-
 .../searchable_channel_list.test.tsx          |   2 +-
 .../components/searchable_channel_list.tsx    |  41 +-
 .../src/components/setting_picture.tsx        |   4 +-
 .../src/components/spinner_button.tsx         |   3 +-
 .../team_groups_manage_modal.tsx              |  14 +-
 .../team_selector_modal.tsx                   |   8 +-
 .../toast_wrapper/toast_wrapper.tsx           |   8 +-
 .../update_user_group_modal.test.tsx.snap     |   5 +-
 .../update_user_group_modal.tsx               |  26 +-
 .../group_member_list/group_member_list.tsx   |  19 +-
 .../user_groups_modal.test.tsx.snap           |  14 +-
 .../ad_ldap_upsell_banner.tsx                 |   1 -
 .../user_groups_modal/user_groups_modal.tsx   |   4 +-
 .../general/user_settings_general.tsx         |   4 +-
 .../manage_auto_responder.test.tsx.snap       |  35 +-
 .../manage_auto_responder.test.tsx            |   4 +-
 .../manage_auto_responder.tsx                 |   9 +-
 .../user_access_token_section.tsx             |  33 +-
 .../view_user_group_modal.test.tsx.snap       |   7 +-
 .../view_user_group_modal.tsx                 |   5 +-
 .../widgets/inputs/dropdown_input_hybrid.tsx  |  13 +-
 .../components/widgets/inputs/input/input.tsx |  20 +-
 .../loading_spinner.test.tsx.snap             |  28 --
 .../loading_wrapper.test.tsx.snap             |   4 +-
 .../widgets/loading/loading_spinner.test.tsx  |  58 ++-
 .../widgets/loading/loading_spinner.tsx       |  10 +-
 .../widgets/loading/loading_wrapper.tsx       |   5 +-
 .../with_tooltip/create_tooltip.tsx           |   7 +-
 .../src/components/with_tooltip/utils.tsx     |  26 -
 webapp/channels/src/i18n/en.json              |  14 +-
 webapp/channels/src/utils/i18n.tsx            |  23 +-
 158 files changed, 2442 insertions(+), 1196 deletions(-)
 create mode 100644 webapp/channels/src/components/localized_placeholder_input.tsx
 create mode 100644 webapp/channels/src/components/localized_placeholder_textarea.tsx
 delete mode 100644 webapp/channels/src/components/widgets/loading/__snapshots__/loading_spinner.test.tsx.snap
 delete mode 100644 webapp/channels/src/components/with_tooltip/utils.tsx

diff --git a/webapp/channels/src/actions/post_actions.test.ts b/webapp/channels/src/actions/post_actions.test.ts
index 394fd160d7..1cb5342b77 100644
--- a/webapp/channels/src/actions/post_actions.test.ts
+++ b/webapp/channels/src/actions/post_actions.test.ts
@@ -272,12 +272,12 @@ describe('Actions.Posts', () => {
     test('unsetEditingPost', async () => {
         // should allow to edit and should fire an action
         const testStore = mockStore({...initialState});
-        const {data: dataSet} = await testStore.dispatch((Actions.setEditingPost as any)('latest_post_id', 'test', 'title'));
+        const {data: dataSet} = await testStore.dispatch((Actions.setEditingPost as any)('latest_post_id', 'test'));
         expect(dataSet).toEqual(true);
 
         // matches the action to set editingPost
         expect(testStore.getActions()).toEqual(
-            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', title: 'title', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
+            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
         );
 
         // clear actions
@@ -299,11 +299,11 @@ describe('Actions.Posts', () => {
     test('setEditingPost', async () => {
         // should allow to edit and should fire an action
         let testStore = mockStore({...initialState});
-        const {data} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test', 'title'));
+        const {data} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test'));
         expect(data).toEqual(true);
 
         expect(testStore.getActions()).toEqual(
-            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', title: 'title', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
+            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
         );
 
         const general = {
@@ -319,10 +319,10 @@ describe('Actions.Posts', () => {
 
         testStore = mockStore(withLicenseState);
 
-        const {data: withLicenseData} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test', 'title'));
+        const {data: withLicenseData} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test'));
         expect(withLicenseData).toEqual(true);
         expect(testStore.getActions()).toEqual(
-            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', title: 'title', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
+            [{data: {isRHS: false, postId: 'latest_post_id', refocusId: 'test', show: true}, type: ActionTypes.TOGGLE_EDITING_POST}],
         );
 
         // should not allow edit for pending post
@@ -332,7 +332,7 @@ describe('Actions.Posts', () => {
 
         testStore = mockStore(withPendingPostState);
 
-        const {data: withPendingPostData} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test', 'title'));
+        const {data: withPendingPostData} = await testStore.dispatch(Actions.setEditingPost('latest_post_id', 'test'));
         expect(withPendingPostData).toEqual(false);
         expect(testStore.getActions()).toEqual([]);
     });
diff --git a/webapp/channels/src/actions/post_actions.ts b/webapp/channels/src/actions/post_actions.ts
index 2effbef2fc..53e5ce9a3e 100644
--- a/webapp/channels/src/actions/post_actions.ts
+++ b/webapp/channels/src/actions/post_actions.ts
@@ -278,7 +278,7 @@ export function unpinPost(postId: string): ActionFuncAsync<boolean, GlobalState>
     };
 }
 
-export function setEditingPost(postId = '', refocusId = '', title = '', isRHS = false): ActionFunc<boolean> {
+export function setEditingPost(postId = '', refocusId = '', isRHS = false): ActionFunc<boolean> {
     return (dispatch, getState) => {
         const state = getState();
         const post = PostSelectors.getPost(state, postId);
@@ -300,7 +300,7 @@ export function setEditingPost(postId = '', refocusId = '', title = '', isRHS =
         if (canEditNow) {
             dispatch({
                 type: ActionTypes.TOGGLE_EDITING_POST,
-                data: {postId, refocusId, title, isRHS, show: true},
+                data: {postId, refocusId, isRHS, show: true},
             });
         }
 
diff --git a/webapp/channels/src/actions/views/create_comment.tsx b/webapp/channels/src/actions/views/create_comment.tsx
index 787c4d5bbb..5bf9585d32 100644
--- a/webapp/channels/src/actions/views/create_comment.tsx
+++ b/webapp/channels/src/actions/views/create_comment.tsx
@@ -181,7 +181,6 @@ export function editLatestPost(channelId: string, rootId = ''): ActionFunc<boole
         return dispatch(PostActions.setEditingPost(
             lastPostId,
             rootId ? 'reply_textbox' : 'post_textbox',
-            '', // title is no longer used
             Boolean(rootId),
         ));
     };
diff --git a/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap b/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
index 78a8dbb052..80b2325107 100644
--- a/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`components/LoadingImagePreview should match snapshot 1`] = `
   <span
     className="loader-percent"
   >
-    Loading 50%
+    Loading
+     50%
   </span>
 </div>
 `;
@@ -21,7 +22,8 @@ exports[`components/LoadingImagePreview should match snapshot 2`] = `
   <span
     className="loader-percent"
   >
-    Loading 90%
+    Loading
+     90%
   </span>
 </div>
 `;
diff --git a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
index 41b1a9b018..fa68f91cae 100644
--- a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = `
       id="searchChannelsTextbox"
       onClear={[Function]}
       onInput={[Function]}
+      placeholder="Search channels"
       value=""
     />
   </div>
diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index a2e3fcfbc2..6f0222a9a7 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
@@ -88,7 +88,12 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -192,7 +197,12 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -306,7 +316,12 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
           >
             <Memo(LoadingWrapper)
               loading={true}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -432,7 +447,12 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -546,7 +566,12 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -672,7 +697,12 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -826,7 +856,12 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
@@ -980,7 +1015,12 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           >
             <Memo(LoadingWrapper)
               loading={false}
-              text="Uploading..."
+              text={
+                Object {
+                  "defaultMessage": "Uploading...",
+                  "id": "setting_picture.uploading",
+                }
+              }
             >
               <MemoizedFormattedMessage
                 defaultMessage="Save"
diff --git a/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx b/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx
index 6a8241431b..5cced27c53 100644
--- a/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx
+++ b/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type {MessageDescriptor} from 'react-intl';
 import {useIntl} from 'react-intl';
 
-import {isMessageDescriptor} from 'utils/i18n';
+import {formatAsString} from 'utils/i18n';
 
 type Props = {
     devicePicture?: string;
@@ -15,17 +15,10 @@ type Props = {
 export default function DeviceIcon(props: Props) {
     const intl = useIntl();
 
-    let title;
-    if (isMessageDescriptor(props.deviceTitle)) {
-        title = intl.formatMessage(props.deviceTitle);
-    } else {
-        title = props.deviceTitle;
-    }
-
     return (
         <i
             className={props.devicePicture}
-            title={title}
+            title={formatAsString(intl.formatMessage, props.deviceTitle)}
         />
     );
 }
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
index 2ec52a9cf4..6db1132c5e 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
@@ -57,8 +57,18 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -87,7 +97,12 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
       optionRenderer={[Function]}
       options={Array []}
       perPage={50}
-      placeholderText="Search and add groups"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add groups",
+          "id": "multiselect.addGroupsPlaceholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
index fe14721ff8..8383269c5a 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {ServerError} from '@mattermost/types/errors';
 import type {Group, SyncablePatch} from '@mattermost/types/groups';
@@ -17,7 +17,6 @@ import type {Value} from 'components/multiselect/multiselect';
 
 import groupsAvatar from 'images/groups-avatar.png';
 import Constants from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
@@ -242,8 +241,8 @@ export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
             </div>
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
-        const buttonSubmitLoadingText = localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitLoadingText = defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
 
         let addError = null;
         if (this.state.addError) {
@@ -305,7 +304,7 @@ export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
                         buttonSubmitLoadingText={buttonSubmitLoadingText}
                         saving={this.state.saving}
                         loading={this.state.loadingGroups}
-                        placeholderText={localizeMessage({id: 'multiselect.addGroupsPlaceholder', defaultMessage: 'Search and add groups'})}
+                        placeholderText={defineMessage({id: 'multiselect.addGroupsPlaceholder', defaultMessage: 'Search and add groups'})}
                     />
                 </Modal.Body>
             </Modal>
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
index fef0212081..239866a988 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
@@ -57,8 +57,18 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -124,7 +134,12 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
       optionRenderer={[Function]}
       options={Array []}
       perPage={50}
-      placeholderText="Search and add groups"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add groups",
+          "id": "multiselect.addGroupsPlaceholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
index fd24981777..82de21a556 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type {RefObject} from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {Group, SyncablePatch} from '@mattermost/types/groups';
 import {SyncableType} from '@mattermost/types/groups';
@@ -18,7 +18,6 @@ import type {Value} from 'components/multiselect/multiselect';
 
 import groupsAvatar from 'images/groups-avatar.png';
 import Constants from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
@@ -248,8 +247,8 @@ export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
             </div>
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
-        const buttonSubmitLoadingText = localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitLoadingText = defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
 
         let addError = null;
         if (this.state.addError) {
@@ -319,11 +318,12 @@ export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
                         buttonSubmitLoadingText={buttonSubmitLoadingText}
                         saving={this.state.saving}
                         loading={this.state.loadingGroups}
-                        placeholderText={localizeMessage({id: 'multiselect.addGroupsPlaceholder', defaultMessage: 'Search and add groups'})}
+                        placeholderText={defineMessage({id: 'multiselect.addGroupsPlaceholder', defaultMessage: 'Search and add groups'})}
                     />
                 </Modal.Body>
             </Modal>
         );
     }
 }
+
 export default injectIntl(AddGroupsToTeamModal);
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
index 1d43451063..ca6da7b7ee 100644
--- a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
@@ -70,7 +70,12 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
     ]
   }
   perPage={50}
-  placeholderText="Search for people"
+  placeholderText={
+    Object {
+      "defaultMessage": "Search for people",
+      "id": "multiselect.placeholder",
+    }
+  }
   saveButtonPosition="bottom"
   saving={false}
   savingEnabled={false}
@@ -87,8 +92,18 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
 exports[`component/add_user_to_group_multiselect should match snapshot with profiles 1`] = `
 <MultiSelect
   ariaLabelRenderer={[Function]}
-  buttonSubmitLoadingText="Creating..."
-  buttonSubmitText="Create Group"
+  buttonSubmitLoadingText={
+    Object {
+      "defaultMessage": "Creating...",
+      "id": "multiselect.creating",
+    }
+  }
+  buttonSubmitText={
+    Object {
+      "defaultMessage": "Create Group",
+      "id": "multiselect.createGroup",
+    }
+  }
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -154,7 +169,12 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
     ]
   }
   perPage={50}
-  placeholderText="Search for people"
+  placeholderText={
+    Object {
+      "defaultMessage": "Search for people",
+      "id": "multiselect.placeholder",
+    }
+  }
   saveButtonPosition="bottom"
   saving={false}
   savingEnabled={false}
@@ -171,8 +191,18 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
 exports[`component/add_user_to_group_multiselect should match snapshot without any profiles 1`] = `
 <MultiSelect
   ariaLabelRenderer={[Function]}
-  buttonSubmitLoadingText="Creating..."
-  buttonSubmitText="Create Group"
+  buttonSubmitLoadingText={
+    Object {
+      "defaultMessage": "Creating...",
+      "id": "multiselect.creating",
+    }
+  }
+  buttonSubmitText={
+    Object {
+      "defaultMessage": "Create Group",
+      "id": "multiselect.createGroup",
+    }
+  }
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -223,7 +253,12 @@ exports[`component/add_user_to_group_multiselect should match snapshot without a
   optionRenderer={[Function]}
   options={Array []}
   perPage={50}
-  placeholderText="Search for people"
+  placeholderText={
+    Object {
+      "defaultMessage": "Search for people",
+      "id": "multiselect.placeholder",
+    }
+  }
   saveButtonPosition="bottom"
   saving={false}
   savingEnabled={false}
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx b/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx
index 1b33911cc3..bea2d2a966 100644
--- a/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx
+++ b/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx
@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import type {IntlShape} from 'react-intl';
-import {injectIntl} from 'react-intl';
+import type {IntlShape, MessageDescriptor} from 'react-intl';
+import {defineMessage, injectIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 import type {RelationOneToOne} from '@mattermost/types/utilities';
@@ -15,7 +15,6 @@ import MultiSelect from 'components/multiselect/multiselect';
 import type {Value} from 'components/multiselect/multiselect';
 
 import Constants from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 import MultiSelectOption from './multiselect_option/multiselect_option';
 
@@ -50,11 +49,11 @@ export type Props = {
 
     savingEnabled: boolean;
     saving: boolean;
-    buttonSubmitText?: string;
-    buttonSubmitLoadingText?: string;
+    buttonSubmitText?: string | MessageDescriptor;
+    buttonSubmitLoadingText?: string | MessageDescriptor;
     backButtonClick?: () => void;
     backButtonClass?: string;
-    backButtonText?: string;
+    backButtonText?: string | MessageDescriptor;
 
     actions: {
         getProfiles: (page?: number, perPage?: number) => Promise<ActionResult>;
@@ -196,8 +195,8 @@ export class AddUserToGroupMultiSelect extends React.PureComponent<Props, State>
     };
 
     public render = (): JSX.Element => {
-        const buttonSubmitText = this.props.buttonSubmitText || localizeMessage({id: 'multiselect.createGroup', defaultMessage: 'Create Group'});
-        const buttonSubmitLoadingText = this.props.buttonSubmitLoadingText || localizeMessage({id: 'multiselect.creating', defaultMessage: 'Creating...'});
+        const buttonSubmitText = this.props.buttonSubmitText || defineMessage({id: 'multiselect.createGroup', defaultMessage: 'Create Group'});
+        const buttonSubmitLoadingText = this.props.buttonSubmitLoadingText || defineMessage({id: 'multiselect.creating', defaultMessage: 'Creating...'});
 
         let users = filterProfilesStartingWithTerm(this.props.profiles, this.state.term).filter((user) => {
             return user.delete_at === 0 &&
@@ -214,7 +213,7 @@ export class AddUserToGroupMultiSelect extends React.PureComponent<Props, State>
 
         if (this.state.values.length >= MAX_SELECTABLE_VALUES) {
             maxValues = MAX_SELECTABLE_VALUES;
-            numRemainingText = localizeMessage({id: 'multiselect.maxGroupMembers', defaultMessage: 'No more than 256 members can be added to a group at once.'});
+            numRemainingText = defineMessage({id: 'multiselect.maxGroupMembers', defaultMessage: 'No more than 256 members can be added to a group at once.'});
         }
 
         return (
@@ -237,7 +236,7 @@ export class AddUserToGroupMultiSelect extends React.PureComponent<Props, State>
                 buttonSubmitLoadingText={buttonSubmitLoadingText}
                 saving={this.props.saving}
                 loading={this.state.loadingUsers}
-                placeholderText={localizeMessage({id: 'multiselect.placeholder', defaultMessage: 'Search for people'})}
+                placeholderText={defineMessage({id: 'multiselect.placeholder', defaultMessage: 'Search for people'})}
                 valueWithImage={true}
                 focusOnLoad={this.props.focusOnLoad}
                 savingEnabled={this.props.savingEnabled}
diff --git a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
index a44cfcaecc..99adbebb93 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
@@ -84,8 +84,18 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
             addUserCallback={[Function]}
             backButtonClass="multiselect-back"
             backButtonClick={[Function]}
-            buttonSubmitLoadingText="Adding..."
-            buttonSubmitText="Add People"
+            buttonSubmitLoadingText={
+              Object {
+                "defaultMessage": "Adding...",
+                "id": "multiselect.adding",
+              }
+            }
+            buttonSubmitText={
+              Object {
+                "defaultMessage": "Add People",
+                "id": "multiselect.addPeopleToGroup",
+              }
+            }
             deleteUserCallback={[Function]}
             focusOnLoad={false}
             groupId="groupid123"
diff --git a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
index d4c2ecff4c..8f0cc0e8a7 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
@@ -3,7 +3,7 @@
 
 import React, {useState, useCallback, useMemo} from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {defineMessage, FormattedMessage, useIntl} from 'react-intl';
 
 import type {Group} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
@@ -12,8 +12,6 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import AddUserToGroupMultiSelect from 'components/add_user_to_group_multiselect';
 
-import {localizeMessage} from 'utils/utils';
-
 import type {ModalData} from 'types/actions';
 
 import 'components/user_groups_modal/user_groups_modal.scss';
@@ -136,8 +134,8 @@ const AddUsersToGroupModal = (props: Props) => {
                                 deleteUserCallback={deleteUserCallback}
                                 groupId={props.groupId}
                                 searchOptions={searchOptions}
-                                buttonSubmitText={localizeMessage({id: 'multiselect.addPeopleToGroup', defaultMessage: 'Add People'})}
-                                buttonSubmitLoadingText={localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'})}
+                                buttonSubmitText={defineMessage({id: 'multiselect.addPeopleToGroup', defaultMessage: 'Add People'})}
+                                buttonSubmitLoadingText={defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'})}
                                 backButtonClick={goBack}
                                 backButtonClass={'multiselect-back'}
                                 saving={saving}
diff --git a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
index ac88890e2d..66ea8edec8 100644
--- a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
@@ -57,8 +57,18 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -209,7 +219,12 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -283,8 +298,18 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -435,7 +460,12 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
diff --git a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
index b90be5ad74..cef90a3367 100644
--- a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 import type {UserProfile} from '@mattermost/types/users';
@@ -19,7 +19,7 @@ import ProfilePicture from 'components/profile_picture';
 import BotTag from 'components/widgets/tag/bot_tag';
 import GuestTag from 'components/widgets/tag/guest_tag';
 
-import {displayEntireNameForUser, localizeMessage} from 'utils/utils';
+import {displayEntireNameForUser} from 'utils/utils';
 
 const USERS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 20;
@@ -192,8 +192,8 @@ export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
             </div>
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
-        const buttonSubmitLoadingText = localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitLoadingText = defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
 
         let addError = null;
         if (this.state.addError) {
@@ -259,7 +259,7 @@ export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
                         buttonSubmitLoadingText={buttonSubmitLoadingText}
                         saving={this.state.saving}
                         loading={this.state.loading}
-                        placeholderText={localizeMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+                        placeholderText={defineMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
                     />
                 </Modal.Body>
             </Modal>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
index 1a7d736254..588abefed0 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
@@ -4,44 +4,6 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multi
 <CustomURLSchemesSetting
   disabled={false}
   id="MySetting"
-  intl={
-    Object {
-      "$t": [Function],
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "defaultRichTextElements": undefined,
-      "fallbackOnEmptyString": true,
-      "formatDate": [Function],
-      "formatDateTimeRange": [Function],
-      "formatDateToParts": [Function],
-      "formatDisplayName": [Function],
-      "formatList": [Function],
-      "formatListToParts": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatNumberToParts": [Function],
-      "formatPlural": [Function],
-      "formatRelativeTime": [Function],
-      "formatTime": [Function],
-      "formatTimeToParts": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getDisplayNames": [Function],
-        "getListFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralRules": [Function],
-        "getRelativeTimeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "onError": [Function],
-      "onWarn": [Function],
-      "textComponent": "span",
-      "timeZone": "Etc/UTC",
-    }
-  }
   onChange={[MockFunction]}
   setByEnv={false}
   value={
@@ -53,9 +15,19 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multi
   }
 >
   <Memo(Settings)
-    helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+    helpText={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+        id="admin.customization.customUrlSchemesDesc"
+      />
+    }
     inputId="MySetting"
-    label="Custom URL Schemes:"
+    label={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Custom URL Schemes:"
+        id="admin.customization.customUrlSchemes"
+      />
+    }
     setByEnv={false}
   >
     <div
@@ -66,25 +38,54 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multi
         className="control-label col-sm-4"
         htmlFor="MySetting"
       >
-        Custom URL Schemes:
+        <FormattedMessage
+          defaultMessage="Custom URL Schemes:"
+          id="admin.customization.customUrlSchemes"
+        >
+          <span>
+            Custom URL Schemes:
+          </span>
+        </FormattedMessage>
       </label>
       <div
         className="col-sm-8"
       >
-        <input
+        <LocalizedPlaceholderInput
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-          placeholder="E.g.: \\"git,smtp\\""
+          placeholder={
+            Object {
+              "defaultMessage": "E.g.: \\"git,smtp\\"",
+              "id": "admin.customization.customUrlSchemesPlaceholder",
+            }
+          }
           type="text"
           value="git,smtp,steam"
-        />
+        >
+          <input
+            className="form-control"
+            disabled={false}
+            id="MySetting"
+            onChange={[Function]}
+            placeholder="E.g.: \\"git,smtp\\""
+            type="text"
+            value="git,smtp,steam"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="help-text"
           data-testid="MySettinghelp-text"
         >
-          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+          <FormattedMessage
+            defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+            id="admin.customization.customUrlSchemesDesc"
+          >
+            <span>
+              Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+            </span>
+          </FormattedMessage>
         </div>
       </div>
     </div>
@@ -96,52 +97,24 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with no it
 <CustomURLSchemesSetting
   disabled={false}
   id="MySetting"
-  intl={
-    Object {
-      "$t": [Function],
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "defaultRichTextElements": undefined,
-      "fallbackOnEmptyString": true,
-      "formatDate": [Function],
-      "formatDateTimeRange": [Function],
-      "formatDateToParts": [Function],
-      "formatDisplayName": [Function],
-      "formatList": [Function],
-      "formatListToParts": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatNumberToParts": [Function],
-      "formatPlural": [Function],
-      "formatRelativeTime": [Function],
-      "formatTime": [Function],
-      "formatTimeToParts": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getDisplayNames": [Function],
-        "getListFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralRules": [Function],
-        "getRelativeTimeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "onError": [Function],
-      "onWarn": [Function],
-      "textComponent": "span",
-      "timeZone": "Etc/UTC",
-    }
-  }
   onChange={[MockFunction]}
   setByEnv={false}
   value={Array []}
 >
   <Memo(Settings)
-    helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+    helpText={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+        id="admin.customization.customUrlSchemesDesc"
+      />
+    }
     inputId="MySetting"
-    label="Custom URL Schemes:"
+    label={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Custom URL Schemes:"
+        id="admin.customization.customUrlSchemes"
+      />
+    }
     setByEnv={false}
   >
     <div
@@ -152,25 +125,54 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with no it
         className="control-label col-sm-4"
         htmlFor="MySetting"
       >
-        Custom URL Schemes:
+        <FormattedMessage
+          defaultMessage="Custom URL Schemes:"
+          id="admin.customization.customUrlSchemes"
+        >
+          <span>
+            Custom URL Schemes:
+          </span>
+        </FormattedMessage>
       </label>
       <div
         className="col-sm-8"
       >
-        <input
+        <LocalizedPlaceholderInput
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-          placeholder="E.g.: \\"git,smtp\\""
+          placeholder={
+            Object {
+              "defaultMessage": "E.g.: \\"git,smtp\\"",
+              "id": "admin.customization.customUrlSchemesPlaceholder",
+            }
+          }
           type="text"
           value=""
-        />
+        >
+          <input
+            className="form-control"
+            disabled={false}
+            id="MySetting"
+            onChange={[Function]}
+            placeholder="E.g.: \\"git,smtp\\""
+            type="text"
+            value=""
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="help-text"
           data-testid="MySettinghelp-text"
         >
-          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+          <FormattedMessage
+            defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+            id="admin.customization.customUrlSchemesDesc"
+          >
+            <span>
+              Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+            </span>
+          </FormattedMessage>
         </div>
       </div>
     </div>
@@ -182,44 +184,6 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one i
 <CustomURLSchemesSetting
   disabled={false}
   id="MySetting"
-  intl={
-    Object {
-      "$t": [Function],
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "defaultRichTextElements": undefined,
-      "fallbackOnEmptyString": true,
-      "formatDate": [Function],
-      "formatDateTimeRange": [Function],
-      "formatDateToParts": [Function],
-      "formatDisplayName": [Function],
-      "formatList": [Function],
-      "formatListToParts": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatNumberToParts": [Function],
-      "formatPlural": [Function],
-      "formatRelativeTime": [Function],
-      "formatTime": [Function],
-      "formatTimeToParts": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getDisplayNames": [Function],
-        "getListFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralRules": [Function],
-        "getRelativeTimeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "onError": [Function],
-      "onWarn": [Function],
-      "textComponent": "span",
-      "timeZone": "Etc/UTC",
-    }
-  }
   onChange={[MockFunction]}
   setByEnv={false}
   value={
@@ -229,9 +193,19 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one i
   }
 >
   <Memo(Settings)
-    helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+    helpText={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+        id="admin.customization.customUrlSchemesDesc"
+      />
+    }
     inputId="MySetting"
-    label="Custom URL Schemes:"
+    label={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Custom URL Schemes:"
+        id="admin.customization.customUrlSchemes"
+      />
+    }
     setByEnv={false}
   >
     <div
@@ -242,25 +216,54 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one i
         className="control-label col-sm-4"
         htmlFor="MySetting"
       >
-        Custom URL Schemes:
+        <FormattedMessage
+          defaultMessage="Custom URL Schemes:"
+          id="admin.customization.customUrlSchemes"
+        >
+          <span>
+            Custom URL Schemes:
+          </span>
+        </FormattedMessage>
       </label>
       <div
         className="col-sm-8"
       >
-        <input
+        <LocalizedPlaceholderInput
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-          placeholder="E.g.: \\"git,smtp\\""
+          placeholder={
+            Object {
+              "defaultMessage": "E.g.: \\"git,smtp\\"",
+              "id": "admin.customization.customUrlSchemesPlaceholder",
+            }
+          }
           type="text"
           value="git"
-        />
+        >
+          <input
+            className="form-control"
+            disabled={false}
+            id="MySetting"
+            onChange={[Function]}
+            placeholder="E.g.: \\"git,smtp\\""
+            type="text"
+            value="git"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="help-text"
           data-testid="MySettinghelp-text"
         >
-          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+          <FormattedMessage
+            defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+            id="admin.customization.customUrlSchemesDesc"
+          >
+            <span>
+              Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+            </span>
+          </FormattedMessage>
         </div>
       </div>
     </div>
@@ -272,44 +275,6 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when di
 <CustomURLSchemesSetting
   disabled={true}
   id="MySetting"
-  intl={
-    Object {
-      "$t": [Function],
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "defaultRichTextElements": undefined,
-      "fallbackOnEmptyString": true,
-      "formatDate": [Function],
-      "formatDateTimeRange": [Function],
-      "formatDateToParts": [Function],
-      "formatDisplayName": [Function],
-      "formatList": [Function],
-      "formatListToParts": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatNumberToParts": [Function],
-      "formatPlural": [Function],
-      "formatRelativeTime": [Function],
-      "formatTime": [Function],
-      "formatTimeToParts": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getDisplayNames": [Function],
-        "getListFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralRules": [Function],
-        "getRelativeTimeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "onError": [Function],
-      "onWarn": [Function],
-      "textComponent": "span",
-      "timeZone": "Etc/UTC",
-    }
-  }
   onChange={[MockFunction]}
   setByEnv={false}
   value={
@@ -320,9 +285,19 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when di
   }
 >
   <Memo(Settings)
-    helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+    helpText={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+        id="admin.customization.customUrlSchemesDesc"
+      />
+    }
     inputId="MySetting"
-    label="Custom URL Schemes:"
+    label={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Custom URL Schemes:"
+        id="admin.customization.customUrlSchemes"
+      />
+    }
     setByEnv={false}
   >
     <div
@@ -333,25 +308,54 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when di
         className="control-label col-sm-4"
         htmlFor="MySetting"
       >
-        Custom URL Schemes:
+        <FormattedMessage
+          defaultMessage="Custom URL Schemes:"
+          id="admin.customization.customUrlSchemes"
+        >
+          <span>
+            Custom URL Schemes:
+          </span>
+        </FormattedMessage>
       </label>
       <div
         className="col-sm-8"
       >
-        <input
+        <LocalizedPlaceholderInput
           className="form-control"
           disabled={true}
           id="MySetting"
           onChange={[Function]}
-          placeholder="E.g.: \\"git,smtp\\""
+          placeholder={
+            Object {
+              "defaultMessage": "E.g.: \\"git,smtp\\"",
+              "id": "admin.customization.customUrlSchemesPlaceholder",
+            }
+          }
           type="text"
           value="git,smtp"
-        />
+        >
+          <input
+            className="form-control"
+            disabled={true}
+            id="MySetting"
+            onChange={[Function]}
+            placeholder="E.g.: \\"git,smtp\\""
+            type="text"
+            value="git,smtp"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="help-text"
           data-testid="MySettinghelp-text"
         >
-          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+          <FormattedMessage
+            defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+            id="admin.customization.customUrlSchemesDesc"
+          >
+            <span>
+              Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+            </span>
+          </FormattedMessage>
         </div>
       </div>
     </div>
@@ -363,44 +367,6 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when se
 <CustomURLSchemesSetting
   disabled={false}
   id="MySetting"
-  intl={
-    Object {
-      "$t": [Function],
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "defaultRichTextElements": undefined,
-      "fallbackOnEmptyString": true,
-      "formatDate": [Function],
-      "formatDateTimeRange": [Function],
-      "formatDateToParts": [Function],
-      "formatDisplayName": [Function],
-      "formatList": [Function],
-      "formatListToParts": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatNumberToParts": [Function],
-      "formatPlural": [Function],
-      "formatRelativeTime": [Function],
-      "formatTime": [Function],
-      "formatTimeToParts": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getDisplayNames": [Function],
-        "getListFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralRules": [Function],
-        "getRelativeTimeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "onError": [Function],
-      "onWarn": [Function],
-      "textComponent": "span",
-      "timeZone": "Etc/UTC",
-    }
-  }
   onChange={[MockFunction]}
   setByEnv={true}
   value={
@@ -411,9 +377,19 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when se
   }
 >
   <Memo(Settings)
-    helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+    helpText={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+        id="admin.customization.customUrlSchemesDesc"
+      />
+    }
     inputId="MySetting"
-    label="Custom URL Schemes:"
+    label={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Custom URL Schemes:"
+        id="admin.customization.customUrlSchemes"
+      />
+    }
     setByEnv={true}
   >
     <div
@@ -424,25 +400,54 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when se
         className="control-label col-sm-4"
         htmlFor="MySetting"
       >
-        Custom URL Schemes:
+        <FormattedMessage
+          defaultMessage="Custom URL Schemes:"
+          id="admin.customization.customUrlSchemes"
+        >
+          <span>
+            Custom URL Schemes:
+          </span>
+        </FormattedMessage>
       </label>
       <div
         className="col-sm-8"
       >
-        <input
+        <LocalizedPlaceholderInput
           className="form-control"
           disabled={true}
           id="MySetting"
           onChange={[Function]}
-          placeholder="E.g.: \\"git,smtp\\""
+          placeholder={
+            Object {
+              "defaultMessage": "E.g.: \\"git,smtp\\"",
+              "id": "admin.customization.customUrlSchemesPlaceholder",
+            }
+          }
           type="text"
           value="git,smtp"
-        />
+        >
+          <input
+            className="form-control"
+            disabled={true}
+            id="MySetting"
+            onChange={[Function]}
+            placeholder="E.g.: \\"git,smtp\\""
+            type="text"
+            value="git,smtp"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="help-text"
           data-testid="MySettinghelp-text"
         >
-          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+          <FormattedMessage
+            defaultMessage="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
+            id="admin.customization.customUrlSchemesDesc"
+          >
+            <span>
+              Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+            </span>
+          </FormattedMessage>
         </div>
         <SetByEnv>
           <div
diff --git a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx b/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
index b5041a428d..4d6efb3a1f 100644
--- a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
+++ b/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
@@ -3,7 +3,7 @@
 
 import {getName} from 'country-list';
 import React, {useCallback, useEffect, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 
@@ -18,8 +18,6 @@ import SaveButton from 'components/save_button';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 import Input from 'components/widgets/inputs/input/input';
 
-import * as Utils from 'utils/utils';
-
 import type {GlobalState} from 'types/store';
 
 import './company_info_edit.scss';
@@ -150,7 +148,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     type='text'
                     value={address}
                     onChange={updateState(setAddress)}
-                    placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.address', defaultMessage: 'Address'})}
+                    placeholder={defineMessage({id: 'admin.billing.company_info.address', defaultMessage: 'Address'})}
                     required={true}
                 />
             </div>
@@ -160,7 +158,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     type='text'
                     value={address2}
                     onChange={updateState(setAddress2)}
-                    placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.address_2', defaultMessage: 'Address 2'})}
+                    placeholder={defineMessage({id: 'admin.billing.company_info.address_2', defaultMessage: 'Address 2'})}
                 />
             </div>
             <div className='form-row'>
@@ -169,7 +167,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     type='text'
                     value={city}
                     onChange={updateState(setCity)}
-                    placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.city', defaultMessage: 'City'})}
+                    placeholder={defineMessage({id: 'admin.billing.company_info.city', defaultMessage: 'City'})}
                     required={true}
                 />
             </div>
@@ -190,7 +188,10 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                         type='text'
                         value={postalCode}
                         onChange={updateState(setPostalCode)}
-                        placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.zipcode', defaultMessage: 'Zip/Postal Code'})}
+                        placeholder={defineMessage({
+                            id: 'admin.billing.company_info.zipcode',
+                            defaultMessage: 'Zip/Postal Code',
+                        })}
                         required={true}
                     />
                 </div>
@@ -228,7 +229,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                                     type='text'
                                     value={companyName}
                                     onChange={updateState(setCompanyName)}
-                                    placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.companyName', defaultMessage: 'Company name'})}
+                                    placeholder={defineMessage({id: 'admin.billing.company_info.companyName', defaultMessage: 'Company name'})}
                                     required={true}
                                 />
                             </div>
@@ -238,7 +239,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                                     type='number'
                                     value={numEmployees}
                                     onChange={updateNumEmployees}
-                                    placeholder={Utils.localizeMessage({id: 'admin.billing.company_info.numEmployees', defaultMessage: 'Number of employees (optional)'})}
+                                    placeholder={defineMessage({id: 'admin.billing.company_info.numEmployees', defaultMessage: 'Number of employees (optional)'})}
                                 />
                             </div>
                             <div className='section-title'>
diff --git a/webapp/channels/src/components/admin_console/cluster_table.tsx b/webapp/channels/src/components/admin_console/cluster_table.tsx
index 107a5b28cf..9593b7dc23 100644
--- a/webapp/channels/src/components/admin_console/cluster_table.tsx
+++ b/webapp/channels/src/components/admin_console/cluster_table.tsx
@@ -10,7 +10,6 @@ import WarningIcon from 'components/widgets/icons/fa_warning_icon';
 
 import statusGreen from 'images/status_green.png';
 import statusYellow from 'images/status_yellow.png';
-import * as Utils from 'utils/utils';
 
 type Props = {
     clusterInfos: Array<{
@@ -97,16 +96,34 @@ export default class ClusterTable extends PureComponent<Props> {
         const items = this.props.clusterInfos.map((clusterInfo) => {
             let status = null;
 
-            if (clusterInfo.hostname === '') {
-                clusterInfo.hostname = Utils.localizeMessage({id: 'admin.cluster.unknown', defaultMessage: 'unknown'});
+            let hostname: React.ReactNode = clusterInfo.hostname;
+            if (hostname === '') {
+                hostname = (
+                    <FormattedMessage
+                        id='admin.cluster.unknown'
+                        defaultMessage='unknown'
+                    />
+                );
             }
 
-            if (clusterInfo.version === '') {
-                clusterInfo.version = Utils.localizeMessage({id: 'admin.cluster.unknown', defaultMessage: 'unknown'});
+            let version: React.ReactNode = clusterInfo.version;
+            if (version === '') {
+                version = (
+                    <FormattedMessage
+                        id='admin.cluster.unknown'
+                        defaultMessage='unknown'
+                    />
+                );
             }
 
-            if (clusterInfo.config_hash === '') {
-                clusterInfo.config_hash = Utils.localizeMessage({id: 'admin.cluster.unknown', defaultMessage: 'unknown'});
+            let configHash: React.ReactNode = clusterInfo.config_hash;
+            if (configHash === '') {
+                configHash = (
+                    <FormattedMessage
+                        id='admin.cluster.unknown'
+                        defaultMessage='unknown'
+                    />
+                );
             }
 
             if (singleItem) {
@@ -130,9 +147,9 @@ export default class ClusterTable extends PureComponent<Props> {
             return (
                 <tr key={clusterInfo.ipaddress}>
                     <td style={style.clusterCell}>{status}</td>
-                    <td style={style.clusterCell}>{clusterInfo.hostname}</td>
-                    <td style={style.clusterCell}>{versionMismatch} {clusterInfo.version}</td>
-                    <td style={style.clusterCell}><div className='config-hash'>{configMismatch} {clusterInfo.config_hash}</div></td>
+                    <td style={style.clusterCell}>{hostname}</td>
+                    <td style={style.clusterCell}>{versionMismatch} {version}</td>
+                    <td style={style.clusterCell}><div className='config-hash'>{configMismatch} {configHash}</div></td>
                     <td style={style.clusterCell}>{clusterInfo.ipaddress}</td>
                     <td style={style.clusterCell}>{clusterInfo.schema_version}</td>
                 </tr>
diff --git a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
index 16b534c8a2..5f500b279c 100644
--- a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
+++ b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedDate, FormattedMessage, FormattedTime, type IntlShape, injectIntl} from 'react-intl';
+import {FormattedDate, FormattedMessage, FormattedTime, defineMessage} from 'react-intl';
 
 import type {Compliance} from '@mattermost/types/compliance';
 import type {UserProfile} from '@mattermost/types/users';
@@ -11,6 +11,7 @@ import {Client4} from 'mattermost-redux/client';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import LoadingScreen from 'components/loading_screen';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import ReloadIcon from 'components/widgets/icons/fa_reload_icon';
 
 type Props = {
@@ -38,8 +39,6 @@ type Props = {
 
     readOnly?: boolean;
 
-    intl: IntlShape;
-
     actions: {
 
         /*
@@ -59,7 +58,7 @@ type State = {
     runningReport?: boolean;
 }
 
-class ComplianceReports extends React.PureComponent<Props, State> {
+export default class ComplianceReports extends React.PureComponent<Props, State> {
     private descInput: React.RefObject<HTMLInputElement>;
     private emailsInput: React.RefObject<HTMLInputElement>;
     private fromInput: React.RefObject<HTMLInputElement>;
@@ -345,12 +344,12 @@ class ComplianceReports extends React.PureComponent<Props, State> {
                                 defaultMessage='Job Name:'
                             />
                         </label>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
                             className='form-control'
                             id='desc'
                             ref={this.descInput}
-                            placeholder={this.props.intl.formatMessage({id: 'admin.compliance_reports.desc_placeholder', defaultMessage: 'E.g. "Audit 445 for HR"'})}
+                            placeholder={defineMessage({id: 'admin.compliance_reports.desc_placeholder', defaultMessage: 'E.g. "Audit 445 for HR"'})}
                             disabled={this.props.readOnly}
                         />
                     </div>
@@ -361,12 +360,12 @@ class ComplianceReports extends React.PureComponent<Props, State> {
                                 defaultMessage='From:'
                             />
                         </label>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
                             className='form-control'
                             id='from'
                             ref={this.fromInput}
-                            placeholder={this.props.intl.formatMessage({id: 'admin.compliance_reports.from_placeholder', defaultMessage: 'E.g. "2016-03-11"'})}
+                            placeholder={defineMessage({id: 'admin.compliance_reports.from_placeholder', defaultMessage: 'E.g. "2016-03-11"'})}
                             disabled={this.props.readOnly}
                         />
                     </div>
@@ -377,12 +376,12 @@ class ComplianceReports extends React.PureComponent<Props, State> {
                                 defaultMessage='To:'
                             />
                         </label>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
                             className='form-control'
                             id='to'
                             ref={this.toInput}
-                            placeholder={this.props.intl.formatMessage({id: 'admin.compliance_reports.to_placeholder', defaultMessage: 'E.g. "2016-03-15"'})}
+                            placeholder={defineMessage({id: 'admin.compliance_reports.to_placeholder', defaultMessage: 'E.g. "2016-03-15"'})}
                             disabled={this.props.readOnly}
                         />
                     </div>
@@ -395,12 +394,12 @@ class ComplianceReports extends React.PureComponent<Props, State> {
                                 defaultMessage='Emails:'
                             />
                         </label>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
                             className='form-control'
                             id='emails'
                             ref={this.emailsInput}
-                            placeholder={this.props.intl.formatMessage({id: 'admin.compliance_reports.emails_placeholder', defaultMessage: 'E.g. "bill@example.com, bob@example.com"'})}
+                            placeholder={defineMessage({id: 'admin.compliance_reports.emails_placeholder', defaultMessage: 'E.g. "bill@example.com, bob@example.com"'})}
                             disabled={this.props.readOnly}
                         />
                     </div>
@@ -411,12 +410,12 @@ class ComplianceReports extends React.PureComponent<Props, State> {
                                 defaultMessage='Keywords:'
                             />
                         </label>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
                             className='form-control'
                             id='keywords'
                             ref={this.keywordsInput}
-                            placeholder={this.props.intl.formatMessage({id: 'admin.compliance_reports.keywords_placeholder', defaultMessage: 'E.g. "shorting stock"'})}
+                            placeholder={defineMessage({id: 'admin.compliance_reports.keywords_placeholder', defaultMessage: 'E.g. "shorting stock"'})}
                             disabled={this.props.readOnly}
                         />
                     </div>
@@ -466,5 +465,3 @@ const style: Record<string, React.CSSProperties> = {
     date: {whiteSpace: 'nowrap'},
     serverError: {marginTop: '10px'},
 };
-
-export default injectIntl(ComplianceReports);
diff --git a/webapp/channels/src/components/admin_console/custom_url_schemes_setting.test.tsx b/webapp/channels/src/components/admin_console/custom_url_schemes_setting.test.tsx
index 7aaf8dcc20..314085d392 100644
--- a/webapp/channels/src/components/admin_console/custom_url_schemes_setting.test.tsx
+++ b/webapp/channels/src/components/admin_console/custom_url_schemes_setting.test.tsx
@@ -3,10 +3,10 @@
 
 import React from 'react';
 
-import CustomURLSchemesSetting from 'components/admin_console/custom_url_schemes_setting';
-
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 
+import CustomURLSchemesSetting from './custom_url_schemes_setting';
+
 describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
     const baseProps = {
         id: 'MySetting',
diff --git a/webapp/channels/src/components/admin_console/custom_url_schemes_setting.tsx b/webapp/channels/src/components/admin_console/custom_url_schemes_setting.tsx
index fecd5f9ec9..154e3acf77 100644
--- a/webapp/channels/src/components/admin_console/custom_url_schemes_setting.tsx
+++ b/webapp/channels/src/components/admin_console/custom_url_schemes_setting.tsx
@@ -3,7 +3,9 @@
 
 import React, {PureComponent} from 'react';
 import type {ChangeEvent} from 'react';
-import {injectIntl, type IntlShape} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
+
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 
 import Setting from './setting';
 
@@ -13,15 +15,13 @@ type Props = {
     onChange: (id: string, valueAsArray: string[]) => void;
     disabled: boolean;
     setByEnv: boolean;
-    intl: IntlShape;
 }
 
 type State = {
     value: string;
 }
 
-class CustomURLSchemesSetting extends
-    PureComponent<Props, State> {
+export default class CustomURLSchemesSetting extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
@@ -51,22 +51,26 @@ class CustomURLSchemesSetting extends
     render() {
         return (
             <Setting
-                label={this.props.intl.formatMessage({
-                    id: 'admin.customization.customUrlSchemes',
-                    defaultMessage: 'Custom URL Schemes:',
-                })}
-                helpText={this.props.intl.formatMessage({
-                    id: 'admin.customization.customUrlSchemesDesc',
-                    defaultMessage: 'Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".',
-                })}
+                label={
+                    <FormattedMessage
+                        id='admin.customization.customUrlSchemes'
+                        defaultMessage='Custom URL Schemes:'
+                    />
+                }
+                helpText={
+                    <FormattedMessage
+                        id='admin.customization.customUrlSchemesDesc'
+                        defaultMessage='Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".'
+                    />
+                }
                 inputId={this.props.id}
                 setByEnv={this.props.setByEnv}
             >
-                <input
+                <LocalizedPlaceholderInput
                     id={this.props.id}
                     className='form-control'
                     type='text'
-                    placeholder={this.props.intl.formatMessage({id: 'admin.customization.customUrlSchemesPlaceholder', defaultMessage: 'E.g.: "git,smtp"'})}
+                    placeholder={defineMessage({id: 'admin.customization.customUrlSchemesPlaceholder', defaultMessage: 'E.g.: "git,smtp"'})}
                     value={this.state.value}
                     onChange={this.handleChange}
                     disabled={this.props.disabled || this.props.setByEnv}
@@ -75,5 +79,3 @@ class CustomURLSchemesSetting extends
         );
     }
 }
-
-export default injectIntl(CustomURLSchemesSetting);
diff --git a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap b/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
index 45aed720b5..9bc6418148 100644
--- a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot while
 >
   <DataGridSearch
     onSearch={[Function]}
-    placeholder=""
     term=""
   />
   <DataGridHeader
@@ -35,7 +34,6 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
 >
   <DataGridSearch
     onSearch={[Function]}
-    placeholder=""
     term=""
   />
   <DataGridHeader
@@ -147,7 +145,6 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
 >
   <DataGridSearch
     onSearch={[Function]}
-    placeholder=""
     term=""
   />
   <DataGridHeader
@@ -247,7 +244,6 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
 >
   <DataGridSearch
     onSearch={[Function]}
-    placeholder=""
     term=""
   />
   <DataGridHeader
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
index 862d46c012..09cc5d1553 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
@@ -57,7 +57,6 @@ type Props = {
 
     onSearch?: (term: string) => void;
     term?: string;
-    searchPlaceholder?: string;
     extraComponent?: JSX.Element;
     filterProps?: {
         options: FilterOptions;
@@ -82,7 +81,6 @@ class DataGrid extends React.PureComponent<Props, State> {
 
     static defaultProps = {
         term: '',
-        searchPlaceholder: '',
     };
 
     public constructor(props: Props) {
@@ -206,7 +204,6 @@ class DataGrid extends React.PureComponent<Props, State> {
             return (
                 <DataGridSearch
                     onSearch={this.search}
-                    placeholder={this.props.searchPlaceholder}
                     term={this.props.term}
                     filterProps={this.props.filterProps}
                     extraComponent={this.props.extraComponent}
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid_search.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid_search.tsx
index 1f78d40f37..11ff72fb42 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid_search.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid_search.tsx
@@ -2,18 +2,17 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {defineMessage} from 'react-intl';
 
 import Filter from 'components/admin_console/filter/filter';
 import type {FilterOptions} from 'components/admin_console/filter/filter';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import FaSearchIcon from 'components/widgets/icons/fa_search_icon';
 
-import * as Utils from 'utils/utils';
-
 import './data_grid.scss';
 
 type Props = {
     onSearch: (term: string) => void;
-    placeholder?: string;
     term: string;
     extraComponent?: JSX.Element;
 
@@ -30,7 +29,6 @@ type State = {
 
 class DataGridSearch extends React.PureComponent<Props, State> {
     static defaultProps = {
-        placeholder: '',
         term: '',
     };
 
@@ -59,11 +57,6 @@ class DataGridSearch extends React.PureComponent<Props, State> {
     render() {
         const {filterProps} = this.props;
 
-        let {placeholder} = this.props;
-        if (!placeholder) {
-            placeholder = Utils.localizeMessage({id: 'search_bar.search', defaultMessage: 'Search'});
-        }
-
         let filter;
         if (filterProps) {
             filter = <Filter {...filterProps}/>;
@@ -79,9 +72,9 @@ class DataGridSearch extends React.PureComponent<Props, State> {
                         <FaSearchIcon/>
                     </span>
 
-                    <input
+                    <LocalizedPlaceholderInput
                         type='text'
-                        placeholder={Utils.localizeMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
+                        placeholder={defineMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
                         onChange={this.handleSearch}
                         value={this.props.term}
                         data-testid='searchInput'
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/__snapshots__/data_retention_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/__snapshots__/data_retention_settings.test.tsx.snap
index 7943720835..22d1814417 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/__snapshots__/data_retention_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/__snapshots__/data_retention_settings.test.tsx.snap
@@ -134,7 +134,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={0}
@@ -283,7 +282,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={1}
@@ -514,7 +512,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={0}
@@ -668,7 +665,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={1}
@@ -899,7 +895,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={0}
@@ -1048,7 +1043,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={1}
@@ -1279,7 +1273,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
                   },
                 ]
               }
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={0}
@@ -1358,7 +1351,6 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               page={0}
               previousPage={[Function]}
               rows={Array []}
-              searchPlaceholder=""
               startCount={1}
               term=""
               total={0}
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/channel_list/__snapshots__/channel_list.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/channel_list/__snapshots__/channel_list.test.tsx.snap
index b5ebbc4663..286ed31f02 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/channel_list/__snapshots__/channel_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/channel_list/__snapshots__/channel_list.test.tsx.snap
@@ -139,7 +139,6 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={1}
@@ -592,7 +591,6 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={30}
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
index 24903b4e65..ecd975ae1d 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
@@ -60,7 +60,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               }
               name="policyName"
               onChange={[Function]}
-              placeholder="Policy name"
+              placeholder={
+                Object {
+                  "defaultMessage": "Policy name",
+                  "id": "admin.data_retention.custom_policy.form.input",
+                }
+              }
               type="text"
               value=""
             />
@@ -89,7 +94,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               inputId="message_retention_input"
               inputType="number"
               inputValue=""
-              legend="Channel & direct message retention"
+              legend={
+                Object {
+                  "defaultMessage": "Channel & direct message retention",
+                  "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                }
+              }
               name="message_retention"
               onDropdownChange={[Function]}
               onInputChange={[Function]}
@@ -126,7 +136,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                   },
                 ]
               }
-              placeholder="Channel & direct message retention"
+              placeholder={
+                Object {
+                  "defaultMessage": "Channel & direct message retention",
+                  "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                }
+              }
               value={
                 Object {
                   "label": <div>
@@ -312,7 +327,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               }
               name="policyName"
               onChange={[Function]}
-              placeholder="Policy name"
+              placeholder={
+                Object {
+                  "defaultMessage": "Policy name",
+                  "id": "admin.data_retention.custom_policy.form.input",
+                }
+              }
               type="text"
               value=""
             />
@@ -341,7 +361,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               inputId="message_retention_input"
               inputType="number"
               inputValue="22"
-              legend="Channel & direct message retention"
+              legend={
+                Object {
+                  "defaultMessage": "Channel & direct message retention",
+                  "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                }
+              }
               name="message_retention"
               onDropdownChange={[Function]}
               onInputChange={[Function]}
@@ -378,7 +403,12 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                   },
                 ]
               }
-              placeholder="Channel & direct message retention"
+              placeholder={
+                Object {
+                  "defaultMessage": "Channel & direct message retention",
+                  "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                }
+              }
               value={
                 Object {
                   "label": <span
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
index ab0e5649ab..cb175bfeb6 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage} from 'react-intl';
 
 import type {ChannelWithTeamData} from '@mattermost/types/channels';
 import type {
@@ -30,7 +30,6 @@ import Input from 'components/widgets/inputs/input/input';
 
 import {getHistory} from 'utils/browser_history';
 import {ItemStatus} from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 import './custom_policy_form.scss';
 
@@ -66,8 +65,8 @@ type State = {
     saveNeeded: boolean;
     saving: boolean;
     serverError: boolean;
-    inputErrorText: string;
-    formErrorText: string;
+    inputErrorText: React.ReactNode;
+    formErrorText: React.ReactNode;
 }
 
 export default class CustomPolicyForm extends React.PureComponent<Props, State> {
@@ -235,7 +234,15 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
         let postDuration = parseInt(messageRetentionInputValue, 10);
 
         if (postDuration <= 0) {
-            this.setState({formErrorText: Utils.localizeMessage({id: 'admin.data_retention.custom_policy.form.durationInput.error', defaultMessage: 'Error parsing message retention.'}), saving: false});
+            this.setState({
+                formErrorText: (
+                    <FormattedMessage
+                        id='admin.data_retention.custom_policy.form.durationInput.error'
+                        defaultMessage='Error parsing message retention.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
         if (messageRetentionDropdownValue.value === FOREVER) {
@@ -245,7 +252,15 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
         }
 
         if (!policyName?.trim()) {
-            this.setState({inputErrorText: Utils.localizeMessage({id: 'admin.data_retention.custom_policy.form.input.error', defaultMessage: 'Policy name can\'t be blank.'}), saving: false});
+            this.setState({
+                inputErrorText: (
+                    <FormattedMessage
+                        id='admin.data_retention.custom_policy.form.input.error'
+                        defaultMessage="Policy name can't be blank."
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
@@ -256,7 +271,15 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
             };
 
             if (((policy?.team_count + teamsToAdd.length) - teamsToRemove.length) === 0 && ((policy?.channel_count + channelsToAdd.length) - channelsToRemove.length) === 0) {
-                this.setState({formErrorText: Utils.localizeMessage({id: 'admin.data_retention.custom_policy.form.teamsError', defaultMessage: 'You must add a team or a channel to the policy.'}), saving: false});
+                this.setState({
+                    formErrorText: (
+                        <FormattedMessage
+                            id='admin.data_retention.custom_policy.form.teamsError'
+                            defaultMessage='You must add a team or a channel to the policy.'
+                        />
+                    ),
+                    saving: false,
+                });
                 return;
             }
 
@@ -282,7 +305,15 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
             }
         } else {
             if (teamsToAdd.length < 1 && channelsToAdd.length < 1) {
-                this.setState({formErrorText: Utils.localizeMessage({id: 'admin.data_retention.custom_policy.form.teamsError', defaultMessage: 'You must add a team or a channel to the policy.'}), saving: false});
+                this.setState({
+                    formErrorText: (
+                        <FormattedMessage
+                            id='admin.data_retention.custom_policy.form.teamsError'
+                            defaultMessage='You must add a team or a channel to the policy.'
+                        />
+                    ),
+                    saving: false,
+                });
                 return;
             }
             const newPolicy = {
@@ -359,7 +390,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                                             this.setState({policyName: e.target.value, saveNeeded: true});
                                             this.props.actions.setNavigationBlocked(true);
                                         }}
-                                        placeholder={Utils.localizeMessage({id: 'admin.data_retention.custom_policy.form.input', defaultMessage: 'Policy name'})}
+                                        placeholder={messages.policyName}
                                         customMessage={{type: ItemStatus.ERROR, value: this.state.inputErrorText}}
                                     />
                                     <DropdownInputHybrid
@@ -379,8 +410,8 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                                         exceptionToInput={[FOREVER]}
                                         defaultValue={keepForeverOption()}
                                         options={[daysOption(), yearsOption(), keepForeverOption()]}
-                                        legend={Utils.localizeMessage({id: 'admin.data_retention.form.channelAndDirectMessageRetention', defaultMessage: 'Channel & direct message retention'})}
-                                        placeholder={Utils.localizeMessage({id: 'admin.data_retention.form.channelAndDirectMessageRetention', defaultMessage: 'Channel & direct message retention'})}
+                                        legend={messages.channelAndDirectMessageRetention}
+                                        placeholder={messages.channelAndDirectMessageRetention}
                                         inputType={'number'}
                                         name={'message_retention'}
                                         dropdownClassNamePrefix={'message_retention'}
@@ -535,3 +566,14 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
         );
     };
 }
+
+const messages = defineMessages({
+    channelAndDirectMessageRetention: {
+        id: 'admin.data_retention.form.channelAndDirectMessageRetention',
+        defaultMessage: 'Channel & direct message retention',
+    },
+    policyName: {
+        id: 'admin.data_retention.custom_policy.form.input',
+        defaultMessage: 'Policy name',
+    },
+});
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
index 520cbd60ab..98e3661e88 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
@@ -33,7 +33,10 @@ exports[`components/PluginManagement should match snapshot 1`] = `
             className="global_policy"
           >
             <p>
-              Applies to all teams and channels, but does not apply to custom retention policies.
+              <MemoizedFormattedMessage
+                defaultMessage="Applies to all teams and channels, but does not apply to custom retention policies."
+                id="admin.data_retention.form.text"
+              />
             </p>
             <div
               id="global_direct_message_dropdown"
@@ -63,7 +66,12 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                 inputId="channel_message_retention_input"
                 inputType="number"
                 inputValue="100"
-                legend="Channel & direct message retention"
+                legend={
+                  Object {
+                    "defaultMessage": "Channel & direct message retention",
+                    "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                  }
+                }
                 name="channel_message_retention"
                 onDropdownChange={[Function]}
                 onInputChange={[Function]}
@@ -108,7 +116,12 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                     },
                   ]
                 }
-                placeholder="Channel & direct message retention"
+                placeholder={
+                  Object {
+                    "defaultMessage": "Channel & direct message retention",
+                    "id": "admin.data_retention.form.channelAndDirectMessageRetention",
+                  }
+                }
                 value={
                   Object {
                     "label": <span
@@ -150,7 +163,12 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                 inputId="file_retention_input"
                 inputType="number"
                 inputValue="100"
-                legend="File retention"
+                legend={
+                  Object {
+                    "defaultMessage": "File retention",
+                    "id": "admin.data_retention.form.fileRetention",
+                  }
+                }
                 name="file_retention"
                 onDropdownChange={[Function]}
                 onInputChange={[Function]}
@@ -195,7 +213,12 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                     },
                   ]
                 }
-                placeholder="File retention"
+                placeholder={
+                  Object {
+                    "defaultMessage": "File retention",
+                    "id": "admin.data_retention.form.fileRetention",
+                  }
+                }
                 value={
                   Object {
                     "label": <span
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
index ec412c971b..d03bbb78e3 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage} from 'react-intl';
 
 import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
 import type {DeepPartial} from '@mattermost/types/utilities';
@@ -18,7 +18,6 @@ import AdminHeader from 'components/widgets/admin_console/admin_header';
 import DropdownInputHybrid from 'components/widgets/inputs/dropdown_input_hybrid';
 
 import {getHistory} from 'utils/browser_history';
-import * as Utils from 'utils/utils';
 
 import './global_policy_form.scss';
 
@@ -43,8 +42,8 @@ type State = {
     fileRetentionInputValue: string;
     saveNeeded: boolean;
     saving: boolean;
-    serverError: JSX.Element | string | null;
-    formErrorText: string;
+    serverError: React.ReactNode;
+    formErrorText: React.ReactNode;
 }
 
 export default class GlobalPolicyForm extends React.PureComponent<Props, State> {
@@ -103,7 +102,15 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
         this.setState({saving: true});
 
         if ((messageRetentionDropdownValue.value !== FOREVER && parseInt(messageRetentionInputValue, 10) < 1) || (fileRetentionDropdownValue.value !== FOREVER && parseInt(fileRetentionInputValue, 10) < 1)) {
-            this.setState({formErrorText: Utils.localizeMessage({id: 'admin.data_retention.global_policy.form.numberError', defaultMessage: 'You must add a number greater than or equal to 1.'}), saving: false});
+            this.setState({
+                formErrorText: (
+                    <FormattedMessage
+                        id='admin.data_retention.global_policy.form.numberError'
+                        defaultMessage='You must add a number greater than or equal to 1.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
@@ -185,7 +192,12 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                                 <div
                                     className='global_policy'
                                 >
-                                    <p>{Utils.localizeMessage({id: 'admin.data_retention.form.text', defaultMessage: 'Applies to all teams and channels, but does not apply to custom retention policies.'})}</p>
+                                    <p>
+                                        <FormattedMessage
+                                            id='admin.data_retention.form.text'
+                                            defaultMessage='Applies to all teams and channels, but does not apply to custom retention policies.'
+                                        />
+                                    </p>
                                     <div id='global_direct_message_dropdown'>
                                         <DropdownInputHybrid
                                             onDropdownChange={(value) => {
@@ -205,8 +217,8 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                                             disabled={this.isMessageRetentionSetByEnv()}
                                             defaultValue={keepForeverOption()}
                                             options={[hoursOption(), daysOption(), yearsOption(), keepForeverOption()]}
-                                            legend={Utils.localizeMessage({id: 'admin.data_retention.form.channelAndDirectMessageRetention', defaultMessage: 'Channel & direct message retention'})}
-                                            placeholder={Utils.localizeMessage({id: 'admin.data_retention.form.channelAndDirectMessageRetention', defaultMessage: 'Channel & direct message retention'})}
+                                            legend={messages.channelAndMessageRetention}
+                                            placeholder={messages.channelAndMessageRetention}
                                             name={'channel_message_retention'}
                                             inputType={'number'}
                                             dropdownClassNamePrefix={'channel_message_retention_dropdown'}
@@ -233,8 +245,8 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                                             disabled={this.isFileRetentionSetByEnv()}
                                             defaultValue={keepForeverOption()}
                                             options={[hoursOption(), daysOption(), yearsOption(), keepForeverOption()]}
-                                            legend={Utils.localizeMessage({id: 'admin.data_retention.form.fileRetention', defaultMessage: 'File retention'})}
-                                            placeholder={Utils.localizeMessage({id: 'admin.data_retention.form.fileRetention', defaultMessage: 'File retention'})}
+                                            legend={messages.fileRetention}
+                                            placeholder={messages.fileRetention}
                                             name={'file_retention'}
                                             inputType={'number'}
                                             dropdownClassNamePrefix={'file_retention_dropdown'}
@@ -287,3 +299,14 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
         );
     };
 }
+
+const messages = defineMessages({
+    channelAndMessageRetention: {
+        id: 'admin.data_retention.form.channelAndDirectMessageRetention',
+        defaultMessage: 'Channel & direct message retention',
+    },
+    fileRetention: {
+        id: 'admin.data_retention.form.fileRetention',
+        defaultMessage: 'File retention',
+    },
+});
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/team_list/__snapshots__/team_list.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/team_list/__snapshots__/team_list.test.tsx.snap
index 64fc627794..ac2dd2db98 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/team_list/__snapshots__/team_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/team_list/__snapshots__/team_list.test.tsx.snap
@@ -65,13 +65,15 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-team-1"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={1}
@@ -144,7 +146,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id0"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -180,7 +185,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id1"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -216,7 +224,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id2"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -252,7 +263,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id3"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -288,7 +302,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id4"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -324,7 +341,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id5"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -360,7 +380,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id6"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -396,7 +419,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id7"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -432,7 +458,10 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id8"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
@@ -468,13 +497,15 @@ exports[`components/admin_console/data_retention_settings/team_list should match
               id="remove-team-id9"
               onClick={[Function]}
             >
-              Remove
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove"
+                id="admin.data_retention.custom_policy.teams.remove"
+              />
             </a>,
           },
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={30}
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/team_list/team_list.tsx b/webapp/channels/src/components/admin_console/data_retention_settings/team_list/team_list.tsx
index 5b4793d7f1..12ee21f3a7 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/team_list/team_list.tsx
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/team_list/team_list.tsx
@@ -199,7 +199,10 @@ export default class TeamList extends React.PureComponent<Props, State> {
                             }}
                             href='#'
                         >
-                            {Utils.localizeMessage({id: 'admin.data_retention.custom_policy.teams.remove', defaultMessage: 'Remove'})}
+                            <FormattedMessage
+                                id='admin.data_retention.custom_policy.teams.remove'
+                                defaultMessage='Remove'
+                            />
                         </a>
                     ),
                 },
diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
index 505865ee37..59247a2b67 100644
--- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
+++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
@@ -20,7 +20,6 @@ import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 import {TELEMETRY_CATEGORIES, AboutLinks, LicenseLinks, LicenseSkus} from 'utils/constants';
 import {goToMattermostContactSalesForm} from 'utils/contact_support_sales';
-import * as Utils from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
 
@@ -146,10 +145,6 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
         // by default we assume is not cloud, so the cta button is Start Trial (which will request a trial license)
         let ctaPrimaryButton = (
             <StartTrialBtn
-                message={Utils.localizeMessage({
-                    id: 'admin.ldap_feature_discovery.call_to_action.primary',
-                    defaultMessage: 'Start trial',
-                })}
                 telemetryId={`start_self_hosted_trial_from_${this.props.featureName}`}
                 btnClass='btn btn-primary'
                 renderAsButton={true}
diff --git a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
index d89c98f63e..d3defefbea 100644
--- a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
@@ -10,10 +10,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -72,10 +77,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -209,10 +219,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -334,10 +349,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -459,10 +479,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -584,10 +609,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -744,10 +774,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -995,10 +1030,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -1246,10 +1286,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -1406,10 +1451,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
@@ -1469,10 +1519,15 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
     <div
       className="group-list-search"
     >
-      <input
+      <LocalizedPlaceholderInput
         onChange={[Function]}
         onKeyUp={[Function]}
-        placeholder="Search"
+        placeholder={
+          Object {
+            "defaultMessage": "Search",
+            "id": "search_bar.search",
+          }
+        }
         type="text"
         value=""
       />
diff --git a/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx b/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
index 5d61eca174..b5a1d9f9cd 100644
--- a/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
@@ -2,20 +2,20 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {GroupSearchOpts, MixedUnlinkedGroupRedux} from '@mattermost/types/groups';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import GroupRow from 'components/admin_console/group_settings/group_row';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon';
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 import SearchIcon from 'components/widgets/icons/search_icon';
 
 import {Constants} from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 const LDAP_GROUPS_PAGE_SIZE = 200;
 
@@ -469,9 +469,9 @@ export default class GroupsList extends React.PureComponent<Props, State> {
             <div className='groups-list'>
                 <div className='groups-list--global-actions'>
                     <div className='group-list-search'>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='text'
-                            placeholder={Utils.localizeMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
+                            placeholder={defineMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
                             onKeyUp={(e: any) => this.handleGroupSearchKeyUp(e)}
                             onChange={(e) => this.setState({searchString: e.target.value})}
                             value={this.state.searchString}
diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
index 9697d060fc..01df29f8fe 100644
--- a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
@@ -3,7 +3,7 @@
 
 import marked from 'marked';
 import React, {useRef} from 'react';
-import {FormattedDate, FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedDate, FormattedMessage} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 
 import {GenericModal} from '@mattermost/components';
@@ -25,7 +25,7 @@ import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import {FileTypes, ModalIdentifiers} from 'utils/constants';
 import {getMonthLong} from 'utils/i18n';
 import {getSkuDisplayName} from 'utils/subscription';
-import {fileSizeToString, localizeMessage} from 'utils/utils';
+import {fileSizeToString} from 'utils/utils';
 
 import type {GlobalState} from 'types/store';
 
@@ -205,7 +205,7 @@ const UploadLicenseModal = (props: Props): JSX.Element | null => {
                     >
                         <LoadingWrapper
                             loading={Boolean(isUploading)}
-                            text={localizeMessage({id: 'admin.license.modal.uploading', defaultMessage: 'Uploading'})}
+                            text={defineMessage({id: 'admin.license.modal.uploading', defaultMessage: 'Uploading'})}
                         >
                             <FormattedMessage
                                 id='admin.license.modal.upload'
diff --git a/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_dropdown.tsx b/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_dropdown.tsx
index b9d651643a..bfc4d923f8 100644
--- a/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_dropdown.tsx
+++ b/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_dropdown.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {Team, TeamMembership} from '@mattermost/types/teams';
 import type {UserProfile} from '@mattermost/types/users';
@@ -13,8 +13,6 @@ import {isAdmin, isSystemAdmin, isGuest} from 'mattermost-redux/utils/user_utils
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 
-import {localizeMessage} from 'utils/utils';
-
 type Props = {
     team: Team;
     user: UserProfile;
@@ -26,6 +24,8 @@ type Props = {
 }
 
 const ManageTeamsDropdown = (props: Props) => {
+    const {formatMessage} = useIntl();
+
     const makeTeamAdmin = async () => {
         const {error} = await props.updateTeamMemberSchemeRoles(props.teamMember.team_id, props.user.id, true, true);
         if (error) {
@@ -62,13 +62,13 @@ const ManageTeamsDropdown = (props: Props) => {
     const {team} = props;
     let title;
     if (isSysAdmin) {
-        title = localizeMessage({id: 'admin.user_item.sysAdmin', defaultMessage: 'System Admin'});
+        title = formatMessage({id: 'admin.user_item.sysAdmin', defaultMessage: 'System Admin'});
     } else if (isTeamAdmin) {
-        title = localizeMessage({id: 'admin.user_item.teamAdmin', defaultMessage: 'Team Admin'});
+        title = formatMessage({id: 'admin.user_item.teamAdmin', defaultMessage: 'Team Admin'});
     } else if (isGuestUser) {
-        title = localizeMessage({id: 'admin.user_item.guest', defaultMessage: 'Guest'});
+        title = formatMessage({id: 'admin.user_item.guest', defaultMessage: 'Guest'});
     } else {
-        title = localizeMessage({id: 'admin.user_item.teamMember', defaultMessage: 'Team Member'});
+        title = formatMessage({id: 'admin.user_item.teamMember', defaultMessage: 'Team Member'});
     }
 
     return (
@@ -79,22 +79,22 @@ const ManageTeamsDropdown = (props: Props) => {
             </a>
             <Menu
                 openLeft={true}
-                ariaLabel={localizeMessage({id: 'team_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of a team member'})}
+                ariaLabel={formatMessage({id: 'team_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of a team member'})}
             >
                 <Menu.ItemAction
                     show={!isTeamAdmin && !isGuestUser}
                     onClick={makeTeamAdmin}
-                    text={localizeMessage({id: 'admin.user_item.makeTeamAdmin', defaultMessage: 'Make Team Admin'})}
+                    text={formatMessage({id: 'admin.user_item.makeTeamAdmin', defaultMessage: 'Make Team Admin'})}
                 />
                 <Menu.ItemAction
                     show={isTeamAdmin}
                     onClick={makeMember}
-                    text={localizeMessage({id: 'admin.user_item.makeMember', defaultMessage: 'Make Team Member'})}
+                    text={formatMessage({id: 'admin.user_item.makeMember', defaultMessage: 'Make Team Member'})}
                 />
                 <Menu.ItemAction
                     show={!team.group_constrained}
                     onClick={removeFromTeam}
-                    text={localizeMessage({id: 'team_members_dropdown.leave_team', defaultMessage: 'Remove from Team'})}
+                    text={formatMessage({id: 'team_members_dropdown.leave_team', defaultMessage: 'Remove from Team'})}
                 />
             </Menu>
         </MenuWrapper>
diff --git a/webapp/channels/src/components/admin_console/member_list_group/__snapshots__/member_list_group.test.tsx.snap b/webapp/channels/src/components/admin_console/member_list_group/__snapshots__/member_list_group.test.tsx.snap
index 7acc8db1cb..ab99e47469 100644
--- a/webapp/channels/src/components/admin_console/member_list_group/__snapshots__/member_list_group.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/member_list_group/__snapshots__/member_list_group.test.tsx.snap
@@ -512,7 +512,6 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={15}
@@ -549,7 +548,6 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
     }
     previousPage={[Function]}
     rows={Array []}
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={0}
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.test.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.test.tsx
index 59cbd0098b..1c0fa48d26 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.test.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.test.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {shallow} from 'enzyme';
 import React from 'react';
 import type {ComponentProps} from 'react';
 import type {RouteComponentProps} from 'react-router-dom';
@@ -9,8 +10,6 @@ import type {Scheme} from '@mattermost/types/schemes';
 
 import PermissionSchemesSettings from 'components/admin_console/permission_schemes_settings/permission_schemes_settings';
 
-import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
-
 describe('components/admin_console/permission_schemes_settings/permission_schemes_settings', () => {
     const defaultProps: ComponentProps<typeof PermissionSchemesSettings> = {
         schemes: {
@@ -32,14 +31,14 @@ describe('components/admin_console/permission_schemes_settings/permission_scheme
     };
 
     test('should match snapshot loading', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings {...defaultProps}/>,
         );
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot without schemes', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings
                 {...defaultProps}
                 schemes={{}}
@@ -50,7 +49,7 @@ describe('components/admin_console/permission_schemes_settings/permission_scheme
     });
 
     test('should match snapshot with schemes', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings {...defaultProps}/>,
         );
         wrapper.setState({loading: false, phase2MigrationIsComplete: true});
@@ -58,7 +57,7 @@ describe('components/admin_console/permission_schemes_settings/permission_scheme
     });
 
     test('should show migration in-progress view', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings {...defaultProps}/>,
         );
         wrapper.setState({loading: false, phase2MigrationIsComplete: false});
@@ -68,7 +67,7 @@ describe('components/admin_console/permission_schemes_settings/permission_scheme
     test('should show migration on hold view', () => {
         const testProps = {...defaultProps};
         testProps.jobsAreEnabled = false;
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings {...testProps}/>,
         );
         wrapper.setState({loading: false, phase2MigrationIsComplete: false});
@@ -78,7 +77,7 @@ describe('components/admin_console/permission_schemes_settings/permission_scheme
     test('should show normal view (jobs disabled after migration)', () => {
         const testProps = {...defaultProps};
         testProps.jobsAreEnabled = false;
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionSchemesSettings {...testProps}/>,
         );
         wrapper.setState({loading: false, phase2MigrationIsComplete: true});
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.tsx
index 112e6a25bd..11d7229d69 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_schemes_settings.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {injectIntl, type MessageDescriptor, type WrappedComponentProps} from 'react-intl';
+import {type MessageDescriptor} from 'react-intl';
 import {FormattedMessage, defineMessage, defineMessages} from 'react-intl';
 import type {RouteComponentProps} from 'react-router-dom';
 
@@ -36,7 +36,7 @@ export type Props = {
         loadSchemeTeams: (id: string) => Promise<ActionResult>;
     };
     isDisabled?: boolean;
-} & WrappedComponentProps;
+};
 
 type State = {
     loading: boolean;
@@ -69,7 +69,7 @@ export const searchableStrings = [
     messages.teamOverrideSchemesNewButton,
 ];
 
-class PermissionSchemesSettings extends React.PureComponent<Props & RouteComponentProps, State> {
+export default class PermissionSchemesSettings extends React.PureComponent<Props & RouteComponentProps, State> {
     constructor(props: Props & RouteComponentProps) {
         super(props);
         this.state = {
@@ -213,7 +213,7 @@ class PermissionSchemesSettings extends React.PureComponent<Props & RouteCompone
                         >
                             <LoadingWrapper
                                 loading={this.state.loadingMore}
-                                text={this.props.intl.formatMessage({id: 'admin.permissions.loadingMoreSchemes', defaultMessage: 'Loading...'})}
+                                text={defineMessage({id: 'admin.permissions.loadingMoreSchemes', defaultMessage: 'Loading...'})}
                             >
                                 <FormattedMessage {...messages.loadMoreSchemes}/>
                             </LoadingWrapper>
@@ -287,5 +287,3 @@ class PermissionSchemesSettings extends React.PureComponent<Props & RouteCompone
         );
     };
 }
-
-export default injectIntl(PermissionSchemesSettings);
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
index e2f8df1fea..73517daa97 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
@@ -99,11 +99,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeNameLabel"
               />
             </label>
-            <input
+            <LocalizedPlaceholderInput
               className="form-control"
               disabled={false}
               id="scheme-name"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Name",
+                  "id": "admin.permissions.teamScheme.schemeNamePlaceholder",
+                }
+              }
               type="text"
               value="Test scheme"
             />
@@ -120,11 +126,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeDescriptionLabel"
               />
             </label>
-            <textarea
+            <LocalizedPlaceholderTextarea
               className="form-control"
               disabled={false}
               id="scheme-description"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Description",
+                  "id": "admin.permissions.teamScheme.schemeDescriptionPlaceholder",
+                }
+              }
               rows={5}
               value="Test scheme description"
             />
@@ -323,6 +335,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       disabled={true}
       onClick={[Function]}
       saving={false}
+      savingMessage={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Saving Config..."
+          id="admin.saving"
+        />
+      }
     />
     <Connect(Component)
       className="cancel-button"
@@ -459,11 +477,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeNameLabel"
               />
             </label>
-            <input
+            <LocalizedPlaceholderInput
               className="form-control"
               disabled={false}
               id="scheme-name"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Name",
+                  "id": "admin.permissions.teamScheme.schemeNamePlaceholder",
+                }
+              }
               type="text"
               value="Test scheme"
             />
@@ -480,11 +504,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeDescriptionLabel"
               />
             </label>
-            <textarea
+            <LocalizedPlaceholderTextarea
               className="form-control"
               disabled={false}
               id="scheme-description"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Description",
+                  "id": "admin.permissions.teamScheme.schemeDescriptionPlaceholder",
+                }
+              }
               rows={5}
               value="Test scheme description"
             />
@@ -713,6 +743,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       disabled={true}
       onClick={[Function]}
       saving={false}
+      savingMessage={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Saving Config..."
+          id="admin.saving"
+        />
+      }
     />
     <Connect(Component)
       className="cancel-button"
@@ -849,11 +885,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeNameLabel"
               />
             </label>
-            <input
+            <LocalizedPlaceholderInput
               className="form-control"
               disabled={false}
               id="scheme-name"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Name",
+                  "id": "admin.permissions.teamScheme.schemeNamePlaceholder",
+                }
+              }
               type="text"
               value="Test scheme"
             />
@@ -870,11 +912,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeDescriptionLabel"
               />
             </label>
-            <textarea
+            <LocalizedPlaceholderTextarea
               className="form-control"
               disabled={false}
               id="scheme-description"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Description",
+                  "id": "admin.permissions.teamScheme.schemeDescriptionPlaceholder",
+                }
+              }
               rows={5}
               value="Test scheme description"
             />
@@ -1105,6 +1153,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       disabled={true}
       onClick={[Function]}
       saving={false}
+      savingMessage={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Saving Config..."
+          id="admin.saving"
+        />
+      }
     />
     <Connect(Component)
       className="cancel-button"
@@ -1307,11 +1361,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeNameLabel"
               />
             </label>
-            <input
+            <LocalizedPlaceholderInput
               className="form-control"
               disabled={false}
               id="scheme-name"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Name",
+                  "id": "admin.permissions.teamScheme.schemeNamePlaceholder",
+                }
+              }
               type="text"
               value=""
             />
@@ -1328,11 +1388,17 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
                 id="admin.permissions.teamScheme.schemeDescriptionLabel"
               />
             </label>
-            <textarea
+            <LocalizedPlaceholderTextarea
               className="form-control"
               disabled={false}
               id="scheme-description"
               onChange={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Scheme Description",
+                  "id": "admin.permissions.teamScheme.schemeDescriptionPlaceholder",
+                }
+              }
               rows={5}
               value=""
             />
@@ -1563,6 +1629,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       disabled={true}
       onClick={[Function]}
       saving={false}
+      savingMessage={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Saving Config..."
+          id="admin.saving"
+        />
+      }
     />
     <Connect(Component)
       className="cancel-button"
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.test.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.test.tsx
index 302413315c..d259c446e6 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.test.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.test.tsx
@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {shallow} from 'enzyme';
 import React from 'react';
 
 import Permissions from 'mattermost-redux/constants/permissions';
 
-import PermissionTeamSchemeSettings from 'components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings';
-
-import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
+import PermissionTeamSchemeSettings from './permission_team_scheme_settings';
 
 function getAnyInstance(wrapper: any) {
     return wrapper.instance() as any;
@@ -120,7 +119,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
     } as any;
 
     test('should match snapshot on new with default roles without permissions', (done) => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...defaultProps}/>,
         );
         defaultProps.actions.loadRolesIfNeeded().then(() => {
@@ -159,7 +158,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
                 permissions: ['delete_post'],
             },
         };
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings
                 {...defaultProps}
                 roles={roles}
@@ -191,7 +190,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         }));
         const updateTeamScheme = jest.fn().mockImplementation(() => Promise.resolve({}));
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings
                 {...defaultProps}
                 actions={{...defaultProps.actions, editRole, createScheme, updateTeamScheme}}
@@ -207,7 +206,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
         const editRole = jest.fn().mockImplementation(() => Promise.resolve({}));
         const createScheme = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error'}}));
         const updateTeamScheme = jest.fn().mockImplementation(() => Promise.resolve({}));
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings
                 {...defaultProps}
                 actions={{...defaultProps.actions, editRole, createScheme, updateTeamScheme}}
@@ -236,7 +235,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         }));
         const updateTeamScheme = jest.fn().mockImplementation(() => Promise.resolve({}));
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings
                 {...defaultProps}
                 actions={{...defaultProps.actions, editRole, createScheme, updateTeamScheme}}
@@ -248,7 +247,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
     });
 
     test('should open and close correctly roles blocks', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...defaultProps}/>,
         );
         const instance = getAnyInstance(wrapper);
@@ -299,7 +298,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         };
 
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();
@@ -354,7 +353,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         };
 
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();
@@ -389,7 +388,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         };
 
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();
@@ -424,7 +423,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
             },
         };
 
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();
@@ -435,7 +434,7 @@ describe('components/admin_console/permission_schemes_settings/permission_team_s
     });
 
     test('should set moderated permissions on team/channel admins', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <PermissionTeamSchemeSettings {...defaultProps}/>,
         );
         const instance = getAnyInstance(wrapper);
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
index 495a129929..a2aa3291c2 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {defineMessage, FormattedMessage, injectIntl} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 import type {WrappedComponentProps} from 'react-intl';
 import type {RouteComponentProps} from 'react-router-dom';
 
@@ -18,6 +18,8 @@ import BlockableLink from 'components/admin_console/blockable_link';
 import ExternalLink from 'components/external_link';
 import FormError from 'components/form_error';
 import LoadingScreen from 'components/loading_screen';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
+import LocalizedPlaceholderTextarea from 'components/localized_placeholder_textarea';
 import SaveButton from 'components/save_button';
 import TeamSelectorModal from 'components/team_selector_modal';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
@@ -79,7 +81,7 @@ type State = {
     schemeDescription: string | undefined;
 };
 
-class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComponentProps, State> {
+export default class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComponentProps, State> {
     constructor(props: Props & RouteComponentProps) {
         super(props);
         this.state = {
@@ -642,11 +644,11 @@ class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComp
                                             defaultMessage='Scheme Name:'
                                         />
                                     </label>
-                                    <input
+                                    <LocalizedPlaceholderInput
                                         className='form-control'
                                         disabled={this.props.isDisabled}
                                         id='scheme-name'
-                                        placeholder={this.props.intl.formatMessage({id: 'admin.permissions.teamScheme.schemeNamePlaceholder', defaultMessage: 'Scheme Name'})}
+                                        placeholder={defineMessage({id: 'admin.permissions.teamScheme.schemeNamePlaceholder', defaultMessage: 'Scheme Name'})}
                                         type='text'
                                         value={schemeName}
                                         onChange={this.handleNameChange}
@@ -662,12 +664,12 @@ class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComp
                                             defaultMessage='Scheme Description:'
                                         />
                                     </label>
-                                    <textarea
+                                    <LocalizedPlaceholderTextarea
                                         id='scheme-description'
                                         className='form-control'
                                         rows={5}
                                         value={schemeDescription}
-                                        placeholder={this.props.intl.formatMessage({id: 'admin.permissions.teamScheme.schemeDescriptionPlaceholder', defaultMessage: 'Scheme Description'})}
+                                        placeholder={defineMessage({id: 'admin.permissions.teamScheme.schemeDescriptionPlaceholder', defaultMessage: 'Scheme Description'})}
                                         onChange={this.handleDescriptionChange}
                                         disabled={this.props.isDisabled}
                                     />
@@ -799,7 +801,12 @@ class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComp
                         saving={this.state.saving}
                         disabled={this.props.isDisabled || !this.state.saveNeeded}
                         onClick={this.handleSubmit}
-                        savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})}
+                        savingMessage={
+                            <FormattedMessage
+                                id='admin.saving'
+                                defaultMessage='Saving Config...'
+                            />
+                        }
                     />
                     <BlockableLink
                         className='cancel-button'
@@ -818,5 +825,3 @@ class PermissionTeamSchemeSettings extends React.PureComponent<Props & RouteComp
         );
     };
 }
-
-export default injectIntl(PermissionTeamSchemeSettings);
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
index a32bfd45e8..1d9fb51846 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
@@ -14,7 +14,12 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
       confirmButtonText={
         <Memo(LoadingWrapper)
           loading={false}
-          text="Deleting..."
+          text={
+            Object {
+              "defaultMessage": "Deleting...",
+              "id": "admin.permissions.permissionsSchemeSummary.deleting",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Yes, Delete"
@@ -132,7 +137,12 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
       confirmButtonText={
         <Memo(LoadingWrapper)
           loading={false}
-          text="Deleting..."
+          text={
+            Object {
+              "defaultMessage": "Deleting...",
+              "id": "admin.permissions.permissionsSchemeSummary.deleting",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Yes, Delete"
@@ -300,7 +310,12 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
       confirmButtonText={
         <Memo(LoadingWrapper)
           loading={false}
-          text="Deleting..."
+          text={
+            Object {
+              "defaultMessage": "Deleting...",
+              "id": "admin.permissions.permissionsSchemeSummary.deleting",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Yes, Delete"
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
index 18c18dc0d9..4801fa7e69 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 import type {RouteComponentProps} from 'react-router-dom';
 
@@ -15,8 +15,6 @@ import ConfirmModal from 'components/confirm_modal';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import WithTooltip from 'components/with_tooltip';
 
-import * as Utils from 'utils/utils';
-
 const MAX_TEAMS_PER_SCHEME_SUMMARY = 8;
 
 export type Props = {
@@ -78,7 +76,7 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
         const confirmButton = (
             <LoadingWrapper
                 loading={this.state.deleting}
-                text={Utils.localizeMessage({id: 'admin.permissions.permissionsSchemeSummary.deleting', defaultMessage: 'Deleting...'})}
+                text={defineMessage({id: 'admin.permissions.permissionsSchemeSummary.deleting', defaultMessage: 'Deleting...'})}
             >
                 <FormattedMessage
                     id='admin.permissions.permissionsSchemeSummary.deleteConfirmButton'
diff --git a/webapp/channels/src/components/admin_console/system_roles/__snapshots__/system_roles.test.tsx.snap b/webapp/channels/src/components/admin_console/system_roles/__snapshots__/system_roles.test.tsx.snap
index d2382a2c1d..ba467154d3 100644
--- a/webapp/channels/src/components/admin_console/system_roles/__snapshots__/system_roles.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_roles/__snapshots__/system_roles.test.tsx.snap
@@ -99,7 +99,6 @@ exports[`admin_console/system_roles should match snapshot 1`] = `
                 },
               ]
             }
-            searchPlaceholder=""
             startCount={0}
             term=""
           />
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
index 0bbdd7da7b..d7d62e2357 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
@@ -57,8 +57,18 @@ exports[`admin_console/add_users_to_role_modal search should not include bot use
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -168,7 +178,12 @@ exports[`admin_console/add_users_to_role_modal search should not include bot use
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -237,8 +252,18 @@ exports[`admin_console/add_users_to_role_modal should exclude user 1`] = `
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -304,7 +329,12 @@ exports[`admin_console/add_users_to_role_modal should exclude user 1`] = `
       optionRenderer={[Function]}
       options={Array []}
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -373,8 +403,18 @@ exports[`admin_console/add_users_to_role_modal should have single passed value 1
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -484,7 +524,12 @@ exports[`admin_console/add_users_to_role_modal should have single passed value 1
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -553,8 +598,18 @@ exports[`admin_console/add_users_to_role_modal should include additional user 1`
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -705,7 +760,12 @@ exports[`admin_console/add_users_to_role_modal should include additional user 1`
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -774,8 +834,18 @@ exports[`admin_console/add_users_to_role_modal should include additional user 2`
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -926,7 +996,12 @@ exports[`admin_console/add_users_to_role_modal should include additional user 2`
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -995,8 +1070,18 @@ exports[`admin_console/add_users_to_role_modal should not include bot user 1`] =
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitLoadingText="Adding..."
-      buttonSubmitText="Add"
+      buttonSubmitLoadingText={
+        Object {
+          "defaultMessage": "Adding...",
+          "id": "multiselect.adding",
+        }
+      }
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -1106,7 +1191,12 @@ exports[`admin_console/add_users_to_role_modal should not include bot user 1`] =
         ]
       }
       perPage={50}
-      placeholderText="Search and add members"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add members",
+          "id": "multiselect.placeholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
index 1b17d39109..8e3fbb6d13 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {Role} from '@mattermost/types/roles';
 import type {UserProfile} from '@mattermost/types/users';
@@ -20,7 +20,7 @@ import ProfilePicture from 'components/profile_picture';
 import BotTag from 'components/widgets/tag/bot_tag';
 import GuestTag from 'components/widgets/tag/guest_tag';
 
-import {displayEntireNameForUser, localizeMessage} from 'utils/utils';
+import {displayEntireNameForUser} from 'utils/utils';
 
 import {rolesStrings} from '../../strings';
 
@@ -194,8 +194,8 @@ export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
             </div>
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
-        const buttonSubmitLoadingText = localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitLoadingText = defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
 
         let addError = null;
         if (this.state.addError) {
@@ -268,7 +268,7 @@ export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
                         buttonSubmitLoadingText={buttonSubmitLoadingText}
                         saving={this.state.saving}
                         loading={this.state.loading}
-                        placeholderText={localizeMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+                        placeholderText={defineMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
                     />
                 </Modal.Body>
             </Modal>
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_users/__snapshots__/system_role_users.test.tsx.snap b/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_users/__snapshots__/system_role_users.test.tsx.snap
index 7190bdc798..096b6c7998 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_users/__snapshots__/system_role_users.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_users/__snapshots__/system_role_users.test.tsx.snap
@@ -361,7 +361,6 @@ exports[`admin_console/system_role_users should match snapshot 1`] = `
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term="asdfasdf"
     total={2}
@@ -730,7 +729,6 @@ exports[`admin_console/system_role_users should match snapshot with readOnly tru
         },
       ]
     }
-    searchPlaceholder=""
     startCount={1}
     term="asdfasdf"
     total={2}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
index a139f82f9d..6b7fef3dc1 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
@@ -194,7 +194,6 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
         "minHeight": "40px",
       }
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={1}
@@ -801,7 +800,6 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
         "minHeight": "400px",
       }
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={30}
@@ -1007,7 +1005,6 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
         "minHeight": "40px",
       }
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={1}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove.test.tsx.snap
index 6bda5527d7..da22c32680 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove.test.tsx.snap
@@ -98,7 +98,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemove shou
     }
     previousPage={[Function]}
     rows={Array []}
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={2}
@@ -204,7 +203,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemove shou
     }
     previousPage={[Function]}
     rows={Array []}
-    searchPlaceholder=""
     startCount={1}
     term="foo"
     total={2}
@@ -310,7 +308,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemove shou
     }
     previousPage={[Function]}
     rows={Array []}
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={2}
@@ -408,7 +405,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemove shou
     }
     previousPage={[Function]}
     rows={Array []}
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={2}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.tsx.snap
index 04303b44c8..06390e4065 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.tsx.snap
@@ -140,7 +140,6 @@ exports[`admin_console/team_channel_settings/team/TeamList should match snapshot
         "minHeight": "80px",
       }
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={1}
@@ -747,7 +746,6 @@ exports[`admin_console/team_channel_settings/team/TeamList should match snapshot
         "minHeight": "800px",
       }
     }
-    searchPlaceholder=""
     startCount={1}
     term=""
     total={30}
diff --git a/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap b/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
index d1c11918ff..37311e88b1 100644
--- a/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
@@ -368,7 +368,6 @@ exports[`components/admin_console/user_grid/UserGrid should match snapshot with
       "minHeight": "160px",
     }
   }
-  searchPlaceholder=""
   startCount={1}
   term=""
   total={2}
@@ -896,7 +895,6 @@ exports[`components/admin_console/user_grid/UserGrid should match snapshot with
       "minHeight": "240px",
     }
   }
-  searchPlaceholder=""
   startCount={1}
   term=""
   total={3}
@@ -1118,7 +1116,6 @@ exports[`components/admin_console/user_grid/UserGrid should match snapshot with
       "minHeight": "80px",
     }
   }
-  searchPlaceholder=""
   startCount={1}
   term=""
   total={1}
diff --git a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
index 5cb86c1d85..aa20143c29 100644
--- a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
+++ b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
@@ -208,7 +208,12 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
           id="appsModalSubmit"
           key="submit"
           spinning={false}
-          spinningText="Submitting..."
+          spinningText={
+            Object {
+              "defaultMessage": "Submitting...",
+              "id": "interactive_dialog.submitting",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/apps_form/apps_form_component.tsx b/webapp/channels/src/components/apps_form/apps_form_component.tsx
index 20d5ecd80b..28f6f9cbf3 100644
--- a/webapp/channels/src/components/apps_form/apps_form_component.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_component.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {Modal, Fade} from 'react-bootstrap';
-import {FormattedMessage, injectIntl} from 'react-intl';
+import {defineMessage, FormattedMessage, injectIntl} from 'react-intl';
 import type {WrappedComponentProps} from 'react-intl';
 
 import type {AppCallResponse, AppField, AppForm, AppFormValues, AppSelectOption, FormResponseData, AppLookupResponse, AppFormValue} from '@mattermost/types/apps';
@@ -21,7 +21,6 @@ import SuggestionList from 'components/suggestion/suggestion_list';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 import {filterEmptyOptions} from 'utils/apps';
-import {localizeMessage} from 'utils/utils';
 
 import type {DoAppCallResult} from 'types/apps';
 
@@ -518,7 +517,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
                 autoFocus={!fields || fields.length === 0}
                 className='btn btn-primary save-button'
                 spinning={Boolean(this.state.submitting)}
-                spinningText={localizeMessage({
+                spinningText={defineMessage({
                     id: 'interactive_dialog.submitting',
                     defaultMessage: 'Submitting...',
                 })}
diff --git a/webapp/channels/src/components/backstage/components/backstage_list.tsx b/webapp/channels/src/components/backstage/components/backstage_list.tsx
index 7cd928ab07..ba132cf48b 100644
--- a/webapp/channels/src/components/backstage/components/backstage_list.tsx
+++ b/webapp/channels/src/components/backstage/components/backstage_list.tsx
@@ -11,8 +11,6 @@ import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 import SearchIcon from 'components/widgets/icons/fa_search_icon';
 
-import {localizeMessage} from 'utils/utils';
-
 import './backstage_list.scss';
 
 type Props = {
@@ -51,13 +49,20 @@ const getPaging = (remainingProps: Props, childCount: number, hasFilter: boolean
     return {startCount, endCount, total, isFirstPage, isLastPage};
 };
 
-const BackstageList = ({searchPlaceholder = localizeMessage({id: 'backstage_list.search', defaultMessage: 'Search'}), ...remainingProps}: Props) => {
+const BackstageList = (remainingProps: Props) => {
     const {formatMessage} = useIntl();
 
     const [filter, setFilter] = useState('');
     const updateFilter = (e: ChangeEvent<HTMLInputElement>) => setFilter(e.target.value);
     const filterLowered = filter.toLowerCase();
 
+    let searchPlaceholder;
+    if (remainingProps.searchPlaceholder) {
+        searchPlaceholder = remainingProps.searchPlaceholder;
+    } else {
+        searchPlaceholder = formatMessage({id: 'backstage_list.search', defaultMessage: 'Search'});
+    }
+
     let children = [];
     let childCount = 0;
     if (remainingProps.loading) {
diff --git a/webapp/channels/src/components/channel_groups_manage_modal/channel_groups_manage_modal.tsx b/webapp/channels/src/components/channel_groups_manage_modal/channel_groups_manage_modal.tsx
index 727619b025..6f1cf123a2 100644
--- a/webapp/channels/src/components/channel_groups_manage_modal/channel_groups_manage_modal.tsx
+++ b/webapp/channels/src/components/channel_groups_manage_modal/channel_groups_manage_modal.tsx
@@ -73,9 +73,19 @@ class ChannelGroupsManageModal extends React.PureComponent<Props> {
     public renderRow = (item: Group, listModal: any) => {
         let title;
         if (item.scheme_admin) {
-            title = Utils.localizeMessage({id: 'channel_members_dropdown.channel_admins', defaultMessage: 'Channel Admins'});
+            title = (
+                <FormattedMessage
+                    id='channel_members_dropdown.channel_admins'
+                    defaultMessage='Channel Admins'
+                />
+            );
         } else {
-            title = Utils.localizeMessage({id: 'channel_members_dropdown.channel_members', defaultMessage: 'Channel Members'});
+            title = (
+                <FormattedMessage
+                    id='channel_members_dropdown.channel_members'
+                    defaultMessage='Channel Members'
+                />
+            );
         }
 
         return (
diff --git a/webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown.tsx b/webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown.tsx
index 0eecd7a25a..f156e1c2c3 100644
--- a/webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown.tsx
+++ b/webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown.tsx
@@ -2,19 +2,22 @@
 // See LICENSE.txt for license information.
 
 import React, {memo} from 'react';
+import {useIntl} from 'react-intl';
 
 import {ChannelHeaderDropdownItems} from 'components/channel_header_dropdown';
 import Menu from 'components/widgets/menu/menu';
 
-import {localizeMessage} from 'utils/utils';
+const ChannelHeaderDropdown = () => {
+    const intl = useIntl();
 
-const ChannelHeaderDropdown = () => (
-    <Menu
-        id='channelHeaderDropdownMenu'
-        ariaLabel={localizeMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
-    >
-        <ChannelHeaderDropdownItems isMobile={false}/>
-    </Menu>
-);
+    return (
+        <Menu
+            id='channelHeaderDropdownMenu'
+            ariaLabel={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+        >
+            <ChannelHeaderDropdownItems isMobile={false}/>
+        </Menu>
+    );
+};
 
 export default memo(ChannelHeaderDropdown);
diff --git a/webapp/channels/src/components/channel_header_dropdown/menu_items/toggle_info/toggle_info.tsx b/webapp/channels/src/components/channel_header_dropdown/menu_items/toggle_info/toggle_info.tsx
index c9606a8cb2..d304618d68 100644
--- a/webapp/channels/src/components/channel_header_dropdown/menu_items/toggle_info/toggle_info.tsx
+++ b/webapp/channels/src/components/channel_header_dropdown/menu_items/toggle_info/toggle_info.tsx
@@ -2,13 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
 import Menu from 'components/widgets/menu/menu';
 
-import {localizeMessage} from 'utils/utils';
-
 type Action = {
     closeRightHandSide: () => void;
     showChannelInfo: (channelId: string) => void;
@@ -22,6 +21,8 @@ type Props = {
 };
 
 const ToggleInfo = ({show, channel, rhsOpen, actions}: Props) => {
+    const intl = useIntl();
+
     const toggleRHS = () => {
         if (rhsOpen) {
             actions.closeRightHandSide();
@@ -30,7 +31,12 @@ const ToggleInfo = ({show, channel, rhsOpen, actions}: Props) => {
         actions.showChannelInfo(channel.id);
     };
 
-    const text = rhsOpen ? localizeMessage({id: 'channelHeader.hideInfo', defaultMessage: 'Close Info'}) : localizeMessage({id: 'channelHeader.viewInfo', defaultMessage: 'View Info'});
+    let text;
+    if (rhsOpen) {
+        text = intl.formatMessage({id: 'channelHeader.hideInfo', defaultMessage: 'Close Info'});
+    } else {
+        text = intl.formatMessage({id: 'channelHeader.viewInfo', defaultMessage: 'View Info'});
+    }
 
     return (
         <Menu.ItemAction
diff --git a/webapp/channels/src/components/channel_header_mobile/channel_info_button/channel_info_button.tsx b/webapp/channels/src/components/channel_header_mobile/channel_info_button/channel_info_button.tsx
index 0551099eb5..f575b11961 100644
--- a/webapp/channels/src/components/channel_header_mobile/channel_info_button/channel_info_button.tsx
+++ b/webapp/channels/src/components/channel_header_mobile/channel_info_button/channel_info_button.tsx
@@ -2,13 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
 import InfoIcon from 'components/widgets/icons/info_icon';
 
-import {localizeMessage} from 'utils/utils';
-
 type Props = {
     channel: Channel;
     actions: {
@@ -16,17 +15,21 @@ type Props = {
     };
 };
 
-const NavbarInfoButton: React.FunctionComponent<Props> = ({channel, actions}: Props): JSX.Element => (
-    <button
-        className='navbar-toggle navbar-right__icon navbar-info-button pull-right'
-        aria-label={localizeMessage({id: 'accessibility.button.Info', defaultMessage: 'Info'})}
-        onClick={() => actions.showChannelInfo(channel.id)}
-    >
-        <InfoIcon
-            className='icon icon__info'
-            aria-hidden='true'
-        />
-    </button>
-);
+const NavbarInfoButton: React.FunctionComponent<Props> = ({channel, actions}: Props): JSX.Element => {
+    const intl = useIntl();
+
+    return (
+        <button
+            className='navbar-toggle navbar-right__icon navbar-info-button pull-right'
+            aria-label={intl.formatMessage({id: 'accessibility.button.Info', defaultMessage: 'Info'})}
+            onClick={() => actions.showChannelInfo(channel.id)}
+        >
+            <InfoIcon
+                className='icon icon__info'
+                aria-hidden='true'
+            />
+        </button>
+    );
+};
 
 export default NavbarInfoButton;
diff --git a/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx b/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
index 5db8a6f825..19b30f0299 100644
--- a/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
+++ b/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import SearchIcon from 'components/widgets/icons/search_icon';
 
-import {localizeMessage} from 'utils/utils';
-
 type Actions = {
     openRHSSearch: () => void;
 }
@@ -16,6 +15,8 @@ type Props = {
 }
 
 const ShowSearchButton = ({actions}: Props) => {
+    const intl = useIntl();
+
     const handleClick = () => {
         actions.openRHSSearch();
     };
@@ -25,7 +26,7 @@ const ShowSearchButton = ({actions}: Props) => {
             type='button'
             className='navbar-toggle navbar-right__icon navbar-search pull-right'
             onClick={handleClick}
-            aria-label={localizeMessage({id: 'accessibility.button.Search', defaultMessage: 'Search'})}
+            aria-label={intl.formatMessage({id: 'accessibility.button.Search', defaultMessage: 'Search'})}
         >
             <SearchIcon
                 className='icon icon__search'
diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
index 94b64f86c8..d23aad026a 100644
--- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
@@ -66,6 +66,24 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        backButtonText={
+          Object {
+            "defaultMessage": "Cancel",
+            "id": "multiselect.cancel",
+          }
+        }
+        buttonSubmitLoadingText={
+          Object {
+            "defaultMessage": "Adding...",
+            "id": "multiselect.adding",
+          }
+        }
+        buttonSubmitText={
+          Object {
+            "defaultMessage": "Add",
+            "id": "multiselect.add",
+          }
+        }
         customNoOptionsMessage={null}
         focusOnLoad={true}
         handleAdd={[Function]}
@@ -117,6 +135,12 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         optionRenderer={[Function]}
         options={Array []}
         perPage={50}
+        placeholderText={
+          Object {
+            "defaultMessage": "Search for people or groups",
+            "id": "multiselect.placeholder.peopleOrGroups",
+          }
+        }
         saveButtonPosition="bottom"
         saving={false}
         savingEnabled={true}
@@ -204,6 +228,24 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        backButtonText={
+          Object {
+            "defaultMessage": "Cancel",
+            "id": "multiselect.cancel",
+          }
+        }
+        buttonSubmitLoadingText={
+          Object {
+            "defaultMessage": "Adding...",
+            "id": "multiselect.adding",
+          }
+        }
+        buttonSubmitText={
+          Object {
+            "defaultMessage": "Add",
+            "id": "multiselect.add",
+          }
+        }
         customNoOptionsMessage={null}
         focusOnLoad={true}
         handleAdd={[Function]}
@@ -255,6 +297,12 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         optionRenderer={[Function]}
         options={Array []}
         perPage={50}
+        placeholderText={
+          Object {
+            "defaultMessage": "Search for people or groups",
+            "id": "multiselect.placeholder.peopleOrGroups",
+          }
+        }
         saveButtonPosition="bottom"
         saving={false}
         savingEnabled={true}
@@ -364,6 +412,24 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        backButtonText={
+          Object {
+            "defaultMessage": "Cancel",
+            "id": "multiselect.cancel",
+          }
+        }
+        buttonSubmitLoadingText={
+          Object {
+            "defaultMessage": "Adding...",
+            "id": "multiselect.adding",
+          }
+        }
+        buttonSubmitText={
+          Object {
+            "defaultMessage": "Add",
+            "id": "multiselect.add",
+          }
+        }
         customNoOptionsMessage={null}
         focusOnLoad={true}
         handleAdd={[Function]}
@@ -415,6 +481,12 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
         optionRenderer={[Function]}
         options={Array []}
         perPage={50}
+        placeholderText={
+          Object {
+            "defaultMessage": "Search for people or groups",
+            "id": "multiselect.placeholder.peopleOrGroups",
+          }
+        }
         saveButtonPosition="bottom"
         saving={false}
         savingEnabled={true}
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx
index 32c5ae1734..52cd413375 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx
@@ -22,7 +22,6 @@ jest.mock('utils/utils', () => {
     const original = jest.requireActual('utils/utils');
     return {
         ...original,
-        localizeMessage: jest.fn(),
         sortUsersAndGroups: jest.fn(),
     };
 });
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
index 338a4f7997..f10edda8db 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -5,7 +5,7 @@ import isEqual from 'lodash/isEqual';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 import styled from 'styled-components';
 
 import type {Channel} from '@mattermost/types/channels';
@@ -28,7 +28,7 @@ import BotTag from 'components/widgets/tag/bot_tag';
 import GuestTag from 'components/widgets/tag/guest_tag';
 
 import Constants, {ModalIdentifiers} from 'utils/constants';
-import {localizeMessage, sortUsersAndGroups} from 'utils/utils';
+import {sortUsersAndGroups} from 'utils/utils';
 
 import GroupOption from './group_option';
 import TeamWarningBanner from './team_warning_banner';
@@ -454,8 +454,8 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
             inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
         }
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
-        const buttonSubmitLoadingText = localizeMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitLoadingText = defineMessage({id: 'multiselect.adding', defaultMessage: 'Adding...'});
 
         const closeMembersInviteModal = () => {
             this.props.actions.closeModal(ModalIdentifiers.CHANNEL_INVITE);
@@ -517,9 +517,9 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                 buttonSubmitLoadingText={buttonSubmitLoadingText}
                 saving={this.state.saving}
                 loading={this.state.loadingUsers}
-                placeholderText={this.props.isGroupsEnabled ? localizeMessage({id: 'multiselect.placeholder.peopleOrGroups', defaultMessage: 'Search for people or groups'}) : localizeMessage({id: 'multiselect.placeholder', defaultMessage: 'Search for people'})}
+                placeholderText={this.props.isGroupsEnabled ? defineMessage({id: 'multiselect.placeholder.peopleOrGroups', defaultMessage: 'Search for people or groups'}) : defineMessage({id: 'multiselect.placeholder', defaultMessage: 'Search for people'})}
                 valueWithImage={true}
-                backButtonText={localizeMessage({id: 'multiselect.cancel', defaultMessage: 'Cancel'})}
+                backButtonText={defineMessage({id: 'multiselect.cancel', defaultMessage: 'Cancel'})}
                 backButtonClick={closeMembersInviteModal}
                 backButtonClass={'btn-tertiary tertiary-button'}
                 customNoOptionsMessage={this.props.emailInvitationsEnabled ? customNoOptionsMessage : null}
diff --git a/webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx b/webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx
index 7c781e0791..d765a93964 100644
--- a/webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx
+++ b/webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import type {Channel, ChannelMembership} from '@mattermost/types/channels';
@@ -17,7 +17,6 @@ import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
 
@@ -58,6 +57,8 @@ export default function ChannelMembersDropdown({
     guestLabel,
     actions,
 }: Props) {
+    const intl = useIntl();
+
     const [removing, setRemoving] = useState(false);
     const [serverError, setServerError] = useState<string | null>(null);
     const dispatch = useDispatch();
@@ -159,7 +160,7 @@ export default function ChannelMembersDropdown({
     const canMakeUserChannelMember = canChangeMemberRoles && isChannelAdmin;
     const canMakeUserChannelAdmin = canChangeMemberRoles && isMember;
     const canRemoveUserFromChannel = canRemoveMember && (!channel.group_constrained || user.is_bot) && (!isDefaultChannel || isGuest);
-    const removeFromChannelText = user.id === currentUserId ? Utils.localizeMessage({id: 'channel_header.leave', defaultMessage: 'Leave Channel'}) : Utils.localizeMessage({id: 'channel_members_dropdown.remove_from_channel', defaultMessage: 'Remove from Channel'});
+    const removeFromChannelText = user.id === currentUserId ? intl.formatMessage({id: 'channel_header.leave', defaultMessage: 'Leave Channel'}) : intl.formatMessage({id: 'channel_members_dropdown.remove_from_channel', defaultMessage: 'Remove from Channel'});
     const removeFromChannelTestId = user.id === currentUserId ? 'leaveChannel' : 'removeFromChannel';
 
     if (canMakeUserChannelMember || canMakeUserChannelAdmin || canRemoveUserFromChannel) {
@@ -177,7 +178,7 @@ export default function ChannelMembersDropdown({
                 id={`${user.username}-make-channel-admin`}
                 show={canMakeUserChannelAdmin}
                 onClick={handleMakeChannelAdmin}
-                text={Utils.localizeMessage({id: 'channel_members_dropdown.make_channel_admin', defaultMessage: 'Make Channel Admin'})}
+                text={intl.formatMessage({id: 'channel_members_dropdown.make_channel_admin', defaultMessage: 'Make Channel Admin'})}
             />
         );
         const makeMemberMenu = (
@@ -185,7 +186,7 @@ export default function ChannelMembersDropdown({
                 id={`${user.username}-make-channel-member`}
                 show={canMakeUserChannelMember}
                 onClick={handleMakeChannelMember}
-                text={Utils.localizeMessage({id: 'channel_members_dropdown.make_channel_member', defaultMessage: 'Make Channel Member'})}
+                text={intl.formatMessage({id: 'channel_members_dropdown.make_channel_member', defaultMessage: 'Make Channel Member'})}
             />
         );
         return (
@@ -201,7 +202,7 @@ export default function ChannelMembersDropdown({
                 <Menu
                     openLeft={true}
                     openUp={totalUsers > ROWS_FROM_BOTTOM_TO_OPEN_UP && totalUsers - index <= ROWS_FROM_BOTTOM_TO_OPEN_UP}
-                    ariaLabel={Utils.localizeMessage({id: 'channel_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of channel member'})}
+                    ariaLabel={intl.formatMessage({id: 'channel_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of channel member'})}
                 >
                     {canMakeUserChannelMember ? makeMemberMenu : null}
                     {canMakeUserChannelAdmin ? makeAdminMenu : null}
diff --git a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx
index 256294bf9a..9f6c82aada 100644
--- a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx
+++ b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {IntlShape} from 'react-intl';
 import {useIntl} from 'react-intl';
 import {useSelector} from 'react-redux';
 
@@ -15,7 +16,7 @@ import URLInput from 'components/widgets/inputs/url_input/url_input';
 
 import Constants from 'utils/constants';
 import {cleanUpUrlable, getSiteURL, validateChannelUrl} from 'utils/url';
-import {generateSlug, localizeMessage} from 'utils/utils';
+import {generateSlug} from 'utils/utils';
 
 export type Props = {
     value: string;
@@ -31,17 +32,17 @@ export type Props = {
 
 import './channel_name_form_field.scss';
 
-function validateDisplayName(displayNameParam: string) {
+function validateDisplayName(intl: IntlShape, displayNameParam: string) {
     const errors: string[] = [];
 
     const displayName = displayNameParam.trim();
 
     if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) {
-        errors.push(localizeMessage({id: 'channel_modal.name.longer', defaultMessage: 'Channel names must have at least 2 characters.'}));
+        errors.push(intl.formatMessage({id: 'channel_modal.name.longer', defaultMessage: 'Channel names must have at least 2 characters.'}));
     }
 
     if (displayName.length > Constants.MAX_CHANNELNAME_LENGTH) {
-        errors.push(localizeMessage({id: 'channel_modal.name.shorter', defaultMessage: 'Channel names must have maximum 64 characters.'}));
+        errors.push(intl.formatMessage({id: 'channel_modal.name.shorter', defaultMessage: 'Channel names must have maximum 64 characters.'}));
     }
 
     return errors;
@@ -68,7 +69,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => {
         e.preventDefault();
         const {target: {value: updatedDisplayName}} = e;
 
-        const displayNameErrors = validateDisplayName(updatedDisplayName);
+        const displayNameErrors = validateDisplayName(intl, updatedDisplayName);
 
         // set error if any, else clear it
         setDisplayNameError(displayNameErrors.length ? displayNameErrors[displayNameErrors.length - 1] : '');
diff --git a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
index 2bb2d4530e..b636018bad 100644
--- a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
@@ -57,7 +57,12 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitText="Add"
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -138,7 +143,12 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
         ]
       }
       perPage={50}
-      placeholderText="Search and add channels"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add channels",
+          "id": "multiselect.addChannelsPlaceholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
@@ -212,7 +222,12 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
   >
     <MultiSelect
       ariaLabelRenderer={[Function]}
-      buttonSubmitText="Add"
+      buttonSubmitText={
+        Object {
+          "defaultMessage": "Add",
+          "id": "multiselect.add",
+        }
+      }
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -315,7 +330,12 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
         ]
       }
       perPage={50}
-      placeholderText="Search and add channels"
+      placeholderText={
+        Object {
+          "defaultMessage": "Search and add channels",
+          "id": "multiselect.addChannelsPlaceholder",
+        }
+      }
       saveButtonPosition="top"
       saving={false}
       savingEnabled={true}
diff --git a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
index 0b3c8b89df..b20ce01f3b 100644
--- a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
+++ b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {Channel, ChannelSearchOpts, ChannelWithTeamData} from '@mattermost/types/channels';
 
@@ -14,7 +14,6 @@ import MultiSelect from 'components/multiselect/multiselect';
 import type {Value} from 'components/multiselect/multiselect';
 
 import Constants from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 type ChannelWithTeamDataValue = ChannelWithTeamData & Value;
 
@@ -207,7 +206,7 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
             />
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
 
         let options = this.state.channels.map((i): ChannelWithTeamDataValue => ({...i, label: i.display_name, value: i.id}));
         if (this.props.alreadySelected) {
@@ -263,7 +262,7 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
                         buttonSubmitText={buttonSubmitText}
                         saving={false}
                         loading={this.state.loadingChannels}
-                        placeholderText={localizeMessage({id: 'multiselect.addChannelsPlaceholder', defaultMessage: 'Search and add channels'})}
+                        placeholderText={defineMessage({id: 'multiselect.addChannelsPlaceholder', defaultMessage: 'Search and add channels'})}
                     />
                 </Modal.Body>
             </Modal>
diff --git a/webapp/channels/src/components/claim/components/ldap_to_email.tsx b/webapp/channels/src/components/claim/components/ldap_to_email.tsx
index 4e0b8c8acb..494b662494 100644
--- a/webapp/channels/src/components/claim/components/ldap_to_email.tsx
+++ b/webapp/channels/src/components/claim/components/ldap_to_email.tsx
@@ -13,7 +13,6 @@ import LoginMfa from 'components/login/login_mfa';
 
 import {ClaimErrors} from 'utils/constants';
 import {isValidPassword} from 'utils/password';
-import {localizeMessage} from 'utils/utils';
 
 import type {SubmitOptions} from './email_to_ldap';
 import ErrorLabel from './error_label';
@@ -46,7 +45,7 @@ const LDAPToEmail = (props: Props) => {
 
         const ldapPassword = ldapPasswordInput.current?.value;
         if (!ldapPassword) {
-            setLdapPasswordError(localizeMessage({id: 'claim.ldap_to_email.ldapPasswordError', defaultMessage: 'Please enter your AD/LDAP password.'}));
+            setLdapPasswordError(formatMessage({id: 'claim.ldap_to_email.ldapPasswordError', defaultMessage: 'Please enter your AD/LDAP password.'}));
             setPasswordError('');
             setConfirmError('');
             setServerError('');
@@ -55,7 +54,7 @@ const LDAPToEmail = (props: Props) => {
 
         const password = passwordInput.current?.value;
         if (!password) {
-            setPasswordError(localizeMessage({id: 'claim.ldap_to_email.pwdError', defaultMessage: 'Please enter your password.'}));
+            setPasswordError(formatMessage({id: 'claim.ldap_to_email.pwdError', defaultMessage: 'Please enter your password.'}));
             setConfirmError('');
             setLdapPasswordError('');
             setServerError('');
@@ -75,7 +74,7 @@ const LDAPToEmail = (props: Props) => {
 
         const confirmPassword = passwordConfirmInput.current?.value;
         if (!confirmPassword || password !== confirmPassword) {
-            setConfirmError(localizeMessage({id: 'claim.ldap_to_email.pwdNotMatch', defaultMessage: 'Passwords do not match.'}));
+            setConfirmError(formatMessage({id: 'claim.ldap_to_email.pwdNotMatch', defaultMessage: 'Passwords do not match.'}));
             setPasswordError('');
             setLdapPasswordError('');
             setServerError('');
diff --git a/webapp/channels/src/components/claim/components/oauth_to_email.tsx b/webapp/channels/src/components/claim/components/oauth_to_email.tsx
index 57d2fd464f..6c13cb5ac1 100644
--- a/webapp/channels/src/components/claim/components/oauth_to_email.tsx
+++ b/webapp/channels/src/components/claim/components/oauth_to_email.tsx
@@ -13,7 +13,7 @@ import {oauthToEmail} from 'actions/admin_actions.jsx';
 
 import Constants from 'utils/constants';
 import {isValidPassword} from 'utils/password';
-import {localizeMessage, toTitleCase} from 'utils/utils';
+import {toTitleCase} from 'utils/utils';
 
 import ErrorLabel from './error_label';
 
@@ -36,7 +36,7 @@ const OAuthToEmail = (props: Props) => {
 
         const password = passwordInput.current?.value;
         if (!password) {
-            setError(localizeMessage({id: 'claim.oauth_to_email.enterPwd', defaultMessage: 'Please enter a password.'}));
+            setError(intl.formatMessage({id: 'claim.oauth_to_email.enterPwd', defaultMessage: 'Please enter a password.'}));
             return;
         }
 
@@ -50,7 +50,7 @@ const OAuthToEmail = (props: Props) => {
 
         const confirmPassword = passwordConfirmInput.current?.value;
         if (!confirmPassword || password !== confirmPassword) {
-            setError(localizeMessage({id: 'claim.oauth_to_email.pwdNotMatch', defaultMessage: 'Passwords do not match.'}));
+            setError(intl.formatMessage({id: 'claim.oauth_to_email.pwdNotMatch', defaultMessage: 'Passwords do not match.'}));
             return;
         }
 
diff --git a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
index 588b0ac5bf..00d6bba927 100644
--- a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
+++ b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
@@ -82,7 +82,12 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
           data-testid="nameInput"
           maxLength={64}
           onChange={[Function]}
-          placeholder="Name"
+          placeholder={
+            Object {
+              "defaultMessage": "Name",
+              "id": "user_groups_modal.name",
+            }
+          }
           type="text"
           value=""
         />
@@ -100,7 +105,12 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
           data-testid="mentionInput"
           maxLength={64}
           onChange={[Function]}
-          placeholder="Mention"
+          placeholder={
+            Object {
+              "defaultMessage": "Mention",
+              "id": "user_groups_modal.mention",
+            }
+          }
           type="text"
           value=""
         />
@@ -118,7 +128,12 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
           addUserCallback={[Function]}
           backButtonClass="multiselect-back"
           backButtonClick={[Function]}
-          backButtonText="Cancel"
+          backButtonText={
+            Object {
+              "defaultMessage": "Cancel",
+              "id": "multiselect.cancelButton",
+            }
+          }
           deleteUserCallback={[Function]}
           focusOnLoad={false}
           multilSelectKey="addUsersToGroupKey"
@@ -200,7 +215,12 @@ exports[`component/create_user_groups_modal should match snapshot without back b
           data-testid="nameInput"
           maxLength={64}
           onChange={[Function]}
-          placeholder="Name"
+          placeholder={
+            Object {
+              "defaultMessage": "Name",
+              "id": "user_groups_modal.name",
+            }
+          }
           type="text"
           value=""
         />
@@ -218,7 +238,12 @@ exports[`component/create_user_groups_modal should match snapshot without back b
           data-testid="mentionInput"
           maxLength={64}
           onChange={[Function]}
-          placeholder="Mention"
+          placeholder={
+            Object {
+              "defaultMessage": "Mention",
+              "id": "user_groups_modal.mention",
+            }
+          }
           type="text"
           value=""
         />
@@ -236,7 +261,12 @@ exports[`component/create_user_groups_modal should match snapshot without back b
           addUserCallback={[Function]}
           backButtonClass="multiselect-back"
           backButtonClick={[Function]}
-          backButtonText="Cancel"
+          backButtonText={
+            Object {
+              "defaultMessage": "Cancel",
+              "id": "multiselect.cancelButton",
+            }
+          }
           deleteUserCallback={[Function]}
           focusOnLoad={false}
           multilSelectKey="addUsersToGroupKey"
diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx
index 996034de34..5aab4e29c3 100644
--- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx
+++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx
@@ -83,7 +83,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Invalid character in mention.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Invalid character in mention.');
         });
     });
 
@@ -115,7 +115,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('nameInputErrorText')).toEqual('Name is a required field.');
+            expect((wrapper.state('nameInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Name is a required field.');
         });
     });
 
@@ -131,7 +131,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Mention is a required field.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Mention is a required field.');
         });
     });
 
@@ -193,7 +193,7 @@ describe('component/create_user_groups_modal', () => {
         expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Mention needs to be unique.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Mention needs to be unique.');
             expect(wrapper.state('nameInputErrorText')).toEqual('');
         });
     });
@@ -210,7 +210,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Mention contains a reserved word.');
         });
 
         wrapper.setState({name: 'Ursa', mention: 'here'});
@@ -219,7 +219,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Mention contains a reserved word.');
         });
 
         wrapper.setState({name: 'Ursa', mention: 'channel'});
@@ -228,7 +228,7 @@ describe('component/create_user_groups_modal', () => {
         expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('Mention contains a reserved word.');
         });
     });
     test('should fail to create with duplicate mention error', () => {
@@ -249,7 +249,7 @@ describe('component/create_user_groups_modal', () => {
         expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
-            expect(wrapper.state('mentionInputErrorText')).toEqual('A username already exists with this name. Mention must be unique.');
+            expect((wrapper.state('mentionInputErrorText') as React.JSX.Element).props.defaultMessage).toEqual('A username already exists with this name. Mention must be unique.');
             expect(wrapper.state('nameInputErrorText')).toEqual('');
         });
     });
diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
index 6d52790237..ba29eac95c 100644
--- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
+++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage, type IntlShape, injectIntl} from 'react-intl';
+import {FormattedMessage, type IntlShape, defineMessage, injectIntl} from 'react-intl';
 
 import type {GroupCreateWithUserIds} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
@@ -14,8 +14,6 @@ import AddUserToGroupMultiSelect from 'components/add_user_to_group_multiselect'
 import Input from 'components/widgets/inputs/input/input';
 
 import Constants, {ItemStatus} from 'utils/constants';
-import * as Utils from 'utils/utils';
-import {localizeMessage} from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
 
@@ -39,8 +37,8 @@ type State = {
     savingEnabled: boolean;
     usersToAdd: UserProfile[];
     mentionUpdatedManually: boolean;
-    mentionInputErrorText: string;
-    nameInputErrorText: string;
+    mentionInputErrorText: React.ReactNode;
+    nameInputErrorText: React.ReactNode;
     showUnknownError: boolean;
     saving: boolean;
 }
@@ -107,7 +105,15 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
         const displayName = this.state.name;
 
         if (!displayName || !displayName.trim()) {
-            this.setState({nameInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.nameIsEmpty', defaultMessage: 'Name is a required field.'}), saving: false});
+            this.setState({
+                nameInputErrorText: (
+                    <FormattedMessage
+                        id='user_groups_modal.nameIsEmpty'
+                        defaultMessage='Name is a required field.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
@@ -120,18 +126,42 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
         }
 
         if (mention.length < 1) {
-            this.setState({mentionInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.mentionIsEmpty', defaultMessage: 'Mention is a required field.'}), saving: false});
+            this.setState({
+                mentionInputErrorText: (
+                    <FormattedMessage
+                        id='user_groups_modal.mentionIsEmpty'
+                        defaultMessage='Mention is a required field.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
         if (Constants.SPECIAL_MENTIONS.includes(mention.toLowerCase())) {
-            this.setState({mentionInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.mentionReservedWord', defaultMessage: 'Mention contains a reserved word.'}), saving: false});
+            this.setState({
+                mentionInputErrorText: (
+                    <FormattedMessage
+                        id='user_groups_modal.mentionReservedWord'
+                        defaultMessage='Mention contains a reserved word.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
         const mentionRegEx = new RegExp(/^[a-z0-9.\-_]+$/);
         if (!mentionRegEx.test(mention)) {
-            this.setState({mentionInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.mentionInvalidError', defaultMessage: 'Invalid character in mention.'}), saving: false});
+            this.setState({
+                mentionInputErrorText: (
+                    <FormattedMessage
+                        id='user_groups_modal.mentionInvalidError'
+                        defaultMessage='Invalid character in mention.'
+                    />
+                ),
+                saving: false,
+            });
             return;
         }
 
@@ -149,9 +179,23 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
 
         if (data?.error) {
             if (data.error?.server_error_id === 'app.custom_group.unique_name') {
-                this.setState({mentionInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.mentionNotUnique', defaultMessage: 'Mention needs to be unique.'})});
+                this.setState({
+                    mentionInputErrorText: (
+                        <FormattedMessage
+                            id='user_groups_modal.mentionNotUnique'
+                            defaultMessage='Mention needs to be unique.'
+                        />
+                    ),
+                });
             } else if (data.error?.server_error_id === 'app.group.username_conflict') {
-                this.setState({mentionInputErrorText: Utils.localizeMessage({id: 'user_groups_modal.mentionUsernameConflict', defaultMessage: 'A username already exists with this name. Mention must be unique.'})});
+                this.setState({
+                    mentionInputErrorText: (
+                        <FormattedMessage
+                            id='user_groups_modal.mentionUsernameConflict'
+                            defaultMessage='A username already exists with this name. Mention must be unique.'
+                        />
+                    ),
+                });
             } else {
                 this.setState({showUnknownError: true});
             }
@@ -217,7 +261,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
                         <div className='group-name-input-wrapper'>
                             <Input
                                 type='text'
-                                placeholder={Utils.localizeMessage({id: 'user_groups_modal.name', defaultMessage: 'Name'})}
+                                placeholder={defineMessage({id: 'user_groups_modal.name', defaultMessage: 'Name'})}
                                 onChange={this.updateNameState}
                                 value={this.state.name}
                                 data-testid='nameInput'
@@ -229,7 +273,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
                         <div className='group-mention-input-wrapper'>
                             <Input
                                 type='text'
-                                placeholder={Utils.localizeMessage({id: 'user_groups_modal.mention', defaultMessage: 'Mention'})}
+                                placeholder={defineMessage({id: 'user_groups_modal.mention', defaultMessage: 'Mention'})}
                                 onChange={this.updateMentionState}
                                 value={this.state.mention}
                                 maxLength={64}
@@ -251,7 +295,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
                                 savingEnabled={this.isSaveEnabled()}
                                 addUserCallback={this.addUserCallback}
                                 deleteUserCallback={this.deleteUserCallback}
-                                backButtonText={localizeMessage({id: 'multiselect.cancelButton', defaultMessage: 'Cancel'})}
+                                backButtonText={defineMessage({id: 'multiselect.cancelButton', defaultMessage: 'Cancel'})}
                                 backButtonClick={
                                     typeof this.props.backButtonCallback === 'function' ? this.goBack : this.doHide
                                 }
diff --git a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx
index 5542e47600..d68d576c9e 100644
--- a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx
+++ b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import {DateTime} from 'luxon';
 import React from 'react';
 import type {DayPickerProps} from 'react-day-picker';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 import {GenericModal} from '@mattermost/components';
@@ -260,7 +260,7 @@ export default class DndCustomTimePicker extends React.PureComponent<Props, Stat
                                 readOnly={true}
                                 id='DndModal__calendar-input'
                                 className={classNames('DndModal__calendar-input', {'popper-open': isPopperOpen})}
-                                label={localizeMessage({id: 'dnd_custom_time_picker_modal.date', defaultMessage: 'Date'})}
+                                label={defineMessage({id: 'dnd_custom_time_picker_modal.date', defaultMessage: 'Date'})}
                                 onClick={() => this.handlePopperOpenState(true)}
                                 tabIndex={-1}
                                 inputPrefix={inputIcon}
diff --git a/webapp/channels/src/components/dot_menu/dot_menu.tsx b/webapp/channels/src/components/dot_menu/dot_menu.tsx
index d201ad861a..4637fa6083 100644
--- a/webapp/channels/src/components/dot_menu/dot_menu.tsx
+++ b/webapp/channels/src/components/dot_menu/dot_menu.tsx
@@ -95,7 +95,7 @@ type Props = {
         /**
          * Function to set the editing post
          */
-        setEditingPost: (postId?: string, refocusId?: string, title?: string, isRHS?: boolean) => void;
+        setEditingPost: (postId?: string, refocusId?: string, isRHS?: boolean) => void;
 
         /**
          * Function to pin the post
@@ -297,7 +297,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
         this.props.actions.setEditingPost(
             this.props.post.id,
             this.props.location === Locations.CENTER ? 'post_textbox' : 'reply_textbox',
-            this.props.post.root_id ? Utils.localizeMessage({id: 'rhs_comment.comment', defaultMessage: 'Comment'}) : Utils.localizeMessage({id: 'create_post.post', defaultMessage: 'Post'}),
             this.props.location === Locations.RHS_ROOT || this.props.location === Locations.RHS_COMMENT || this.props.location === Locations.SEARCH,
         );
         trackDotMenuEvent(e, TELEMETRY_LABELS.EDIT);
diff --git a/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap b/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap
index 7aa057b9a9..74465f9267 100644
--- a/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap
+++ b/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`EmojiPage should render without crashing 1`] = `
       </Link>
     </Memo(AnyTeamPermissionGate)>
   </div>
-  <Connect(injectIntl(EmojiList))
+  <Connect(EmojiList)
     scrollToTop={[MockFunction]}
   />
 </div>
diff --git a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
index b20438b95c..17cee65d8d 100644
--- a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
+++ b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
@@ -125,7 +125,12 @@ exports[`components/emoji/components/AddEmoji should match snapshot 1`] = `
           data-testid="save-button"
           onClick={[Function]}
           spinning={false}
-          spinningText="Saving..."
+          spinningText={
+            Object {
+              "defaultMessage": "Saving...",
+              "id": "add_emoji.saving",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -300,7 +305,12 @@ exports[`components/emoji/components/AddEmoji should select a file and match sna
           data-testid="save-button"
           onClick={[Function]}
           spinning={false}
-          spinningText="Saving..."
+          spinningText={
+            Object {
+              "defaultMessage": "Saving...",
+              "id": "add_emoji.saving",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -439,7 +449,12 @@ exports[`components/emoji/components/AddEmoji should update emoji name and match
           data-testid="save-button"
           onClick={[Function]}
           spinning={false}
-          spinningText="Saving..."
+          spinningText={
+            Object {
+              "defaultMessage": "Saving...",
+              "id": "add_emoji.saving",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx b/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
index 7fc7a18b68..788a72cd34 100644
--- a/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
+++ b/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import type {ChangeEvent, FormEvent, SyntheticEvent} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import type {CustomEmoji} from '@mattermost/types/emojis';
@@ -19,7 +19,6 @@ import SpinnerButton from 'components/spinner_button';
 import {getHistory} from 'utils/browser_history';
 import {Constants} from 'utils/constants';
 import type EmojiMap from 'utils/emoji_map';
-import {localizeMessage} from 'utils/utils';
 
 export interface AddEmojiProps {
     actions: {
@@ -389,7 +388,7 @@ export default class AddEmoji extends React.PureComponent<AddEmojiProps, AddEmoj
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={localizeMessage({id: 'add_emoji.saving', defaultMessage: 'Saving...'})}
+                                spinningText={defineMessage({id: 'add_emoji.saving', defaultMessage: 'Saving...'})}
                                 onClick={this.handleSaveButtonClick}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx b/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
index 8ea569711c..71fc48a2c0 100644
--- a/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
+++ b/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import type {ChangeEvent, ChangeEventHandler} from 'react';
-import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {CustomEmoji} from '@mattermost/types/emojis';
 
@@ -13,6 +13,7 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import EmojiListItem from 'components/emoji/emoji_list_item';
 import LoadingScreen from 'components/loading_screen';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import SaveButton from 'components/save_button';
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
@@ -32,7 +33,6 @@ export interface Props {
      * Function to scroll list to top.
      */
     scrollToTop: () => void;
-    intl: IntlShape;
     actions: {
 
         /**
@@ -56,7 +56,7 @@ interface State {
     missingPages: boolean;
 }
 
-class EmojiList extends React.PureComponent<Props, State> {
+export default class EmojiList extends React.PureComponent<Props, State> {
     private searchTimeout: NodeJS.Timeout | null;
 
     constructor(props: Props) {
@@ -267,10 +267,10 @@ class EmojiList extends React.PureComponent<Props, State> {
                 <div className='backstage-filters'>
                     <div className='backstage-filter__search'>
                         <SearchIcon/>
-                        <input
+                        <LocalizedPlaceholderInput
                             type='search'
                             className='form-control'
-                            placeholder={this.props.intl.formatMessage({id: 'emoji_list.search', defaultMessage: 'Search Custom Emoji'})}
+                            placeholder={defineMessage({id: 'emoji_list.search', defaultMessage: 'Search Custom Emoji'})}
                             onChange={this.onSearchChange}
                             style={style.search}
                         />
@@ -335,5 +335,3 @@ class EmojiList extends React.PureComponent<Props, State> {
 const style = {
     search: {flexGrow: 0, flexShrink: 0},
 };
-
-export default injectIntl(EmojiList);
diff --git a/webapp/channels/src/components/error_page/__snapshots__/error_title.test.tsx.snap b/webapp/channels/src/components/error_page/__snapshots__/error_title.test.tsx.snap
index 4ce1179407..aff64242a2 100644
--- a/webapp/channels/src/components/error_page/__snapshots__/error_title.test.tsx.snap
+++ b/webapp/channels/src/components/error_page/__snapshots__/error_title.test.tsx.snap
@@ -21,9 +21,10 @@ exports[`components/error_page/ErrorTitle should match snapshot, no type but wit
 `;
 
 exports[`components/error_page/ErrorTitle should match snapshot, no type nor title 1`] = `
-<Fragment>
-  Error
-</Fragment>
+<MemoizedFormattedMessage
+  defaultMessage="Error"
+  id="error.generic.title"
+/>
 `;
 
 exports[`components/error_page/ErrorTitle should match snapshot, oauth_access_denied type 1`] = `
diff --git a/webapp/channels/src/components/error_page/error_title.tsx b/webapp/channels/src/components/error_page/error_title.tsx
index b3f7c82bec..c7edc048fa 100644
--- a/webapp/channels/src/components/error_page/error_title.tsx
+++ b/webapp/channels/src/components/error_page/error_title.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {ErrorPageTypes} from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 type Props = {
     type?: string | null;
@@ -93,7 +92,12 @@ const ErrorTitle: React.FC<Props> = ({type, title}: Props) => {
     } else if (title) {
         errorTitle = <>{title}</>;
     } else {
-        errorTitle = <>{Utils.localizeMessage({id: 'error.generic.title', defaultMessage: 'Error'})}</>;
+        errorTitle = (
+            <FormattedMessage
+                id='error.generic.title'
+                defaultMessage='Error'
+            />
+        );
     }
 
     return errorTitle;
diff --git a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx
index 6b68c61a7b..c92d7bbc0b 100644
--- a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx
+++ b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx
@@ -127,7 +127,6 @@ const FeatureRestrictedModal = ({
 
     const trialBtn = (
         <StartTrialBtn
-            message={formatMessage({id: 'trial_btn.free.tryFreeFor30Days', defaultMessage: 'Start trial'})}
             onClick={dismissAction}
             telemetryId='start_self_hosted_trial_after_team_creation_restricted'
             btnClass='btn btn-primary'
diff --git a/webapp/channels/src/components/feedback_modal/feedback.tsx b/webapp/channels/src/components/feedback_modal/feedback.tsx
index decb5fdcff..4ee24e569a 100644
--- a/webapp/channels/src/components/feedback_modal/feedback.tsx
+++ b/webapp/channels/src/components/feedback_modal/feedback.tsx
@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
-import {injectIntl} from 'react-intl';
-import type {WrappedComponentProps} from 'react-intl';
+import {useIntl} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import {GenericModal} from '@mattermost/components';
@@ -28,11 +27,13 @@ type Props = {
     submitText: string;
     feedbackOptions: FeedbackOption[];
     freeformTextPlaceholder: string;
-} & WrappedComponentProps
+}
+
+export default function FeedbackModal(props: Props) {
+    const intl = useIntl();
 
-function FeedbackModal(props: Props) {
     const maxFreeFormTextLength = 500;
-    const optionOther = {translatedMessage: props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}), submissionValue: 'Other'};
+    const optionOther = {translatedMessage: intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}), submissionValue: 'Other'};
     const feedbackModalOptions: FeedbackOption[] = [
         ...props.feedbackOptions,
         optionOther,
@@ -69,7 +70,7 @@ function FeedbackModal(props: Props) {
             handleCancel={handleCancel}
             handleConfirm={handleSubmitFeedbackModal}
             confirmButtonText={props.submitText}
-            cancelButtonText={props.intl.formatMessage({id: 'feedback.cancelButton.text', defaultMessage: 'Cancel'})}
+            cancelButtonText={intl.formatMessage({id: 'feedback.cancelButton.text', defaultMessage: 'Cancel'})}
             modalHeaderText={props.title}
             autoCloseOnConfirmButton={false}
         >
@@ -107,5 +108,3 @@ function FeedbackModal(props: Props) {
         </GenericModal>
     );
 }
-
-export default injectIntl(FeedbackModal);
diff --git a/webapp/channels/src/components/file_info_preview/file_info_preview.tsx b/webapp/channels/src/components/file_info_preview/file_info_preview.tsx
index 8b149e03b9..b54041d6f3 100644
--- a/webapp/channels/src/components/file_info_preview/file_info_preview.tsx
+++ b/webapp/channels/src/components/file_info_preview/file_info_preview.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import type {FileInfo} from '@mattermost/types/files';
 
@@ -18,19 +19,21 @@ const FileInfoPreview = ({
     fileUrl,
     canDownloadFiles,
 }: Props) => {
+    const intl = useIntl();
+
     // non-image files include a section providing details about the file
     const infoParts = [];
 
     if (fileInfo.extension !== '') {
         infoParts.push(
-            Utils.localizeMessage({id: 'file_info_preview.type', defaultMessage: 'File type '}) +
+            intl.formatMessage({id: 'file_info_preview.type', defaultMessage: 'File type '}) +
         fileInfo.extension.toUpperCase(),
         );
     }
 
     if (fileInfo.size) {
         infoParts.push(
-            Utils.localizeMessage({id: 'file_info_preview.size', defaultMessage: 'Size '}) +
+            intl.formatMessage({id: 'file_info_preview.size', defaultMessage: 'Size '}) +
         Utils.fileSizeToString(fileInfo.size),
         );
     }
diff --git a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
index 854f2485dd..3013dead60 100644
--- a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
@@ -125,7 +125,12 @@ exports[`components/FilePreviewModal should fall back to default preview if plug
         >
           <LoadingImagePreview
             containerClass="view-image__loading"
-            loading="Loading"
+            loading={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Loading"
+                id="view_image.loading"
+              />
+            }
             progress={0}
           />
         </div>
@@ -260,7 +265,12 @@ exports[`components/FilePreviewModal should match snapshot 1`] = `
         >
           <LoadingImagePreview
             containerClass="view-image__loading"
-            loading="Loading"
+            loading={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Loading"
+                id="view_image.loading"
+              />
+            }
             progress={0}
           />
         </div>
@@ -395,7 +405,12 @@ exports[`components/FilePreviewModal should match snapshot for external file 1`]
         >
           <LoadingImagePreview
             containerClass="view-image__loading"
-            loading="Loading"
+            loading={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Loading"
+                id="view_image.loading"
+              />
+            }
             progress={0}
           />
         </div>
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
index 1b9119a9d6..bd915dc9b2 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
@@ -4,6 +4,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
 import type {FileInfo} from '@mattermost/types/files';
 import type {Post} from '@mattermost/types/posts';
@@ -365,12 +366,16 @@ export default class FilePreviewModal extends React.PureComponent<Props, State>
                 }
             } else {
                 // display a progress indicator when the preview for an image is still loading
-                const loading = Utils.localizeMessage({id: 'view_image.loading', defaultMessage: 'Loading'});
                 const progress = Math.floor(this.state.progress[this.state.imageIndex]);
 
                 content = (
                     <LoadingImagePreview
-                        loading={loading}
+                        loading={
+                            <FormattedMessage
+                                id='view_image.loading'
+                                defaultMessage='Loading'
+                            />
+                        }
                         progress={progress}
                     />
                 );
diff --git a/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx b/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
index 08a284bf91..2fee9cfd48 100644
--- a/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
+++ b/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useState} from 'react';
+import {useIntl} from 'react-intl';
 import {useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -17,7 +18,6 @@ import type {
 import WithTooltip from 'components/with_tooltip';
 
 import DesktopApp from 'utils/desktop_api';
-import * as Utils from 'utils/utils';
 
 const HistoryButtonsContainer = styled.nav`
     display: flex;
@@ -30,6 +30,7 @@ const HistoryButtonsContainer = styled.nav`
 
 const HistoryButtons = (): JSX.Element => {
     const history = useHistory();
+    const intl = useIntl();
 
     const [canGoBack, setCanGoBack] = useState(true);
     const [canGoForward, setCanGoForward] = useState(true);
@@ -83,7 +84,7 @@ const HistoryButtons = (): JSX.Element => {
                     compact={true}
                     inverted={true}
                     disabled={!canGoBack}
-                    aria-label={Utils.localizeMessage({id: 'sidebar_left.channel_navigator.goBackLabel', defaultMessage: 'Back'})}
+                    aria-label={intl.formatMessage({id: 'sidebar_left.channel_navigator.goBackLabel', defaultMessage: 'Back'})}
                 />
             </WithTooltip>
             <WithTooltip
@@ -98,7 +99,7 @@ const HistoryButtons = (): JSX.Element => {
                     compact={true}
                     inverted={true}
                     disabled={!canGoForward}
-                    aria-label={Utils.localizeMessage({id: 'sidebar_left.channel_navigator.goForwardLabel', defaultMessage: 'Forward'})}
+                    aria-label={intl.formatMessage({id: 'sidebar_left.channel_navigator.goForwardLabel', defaultMessage: 'Forward'})}
                 />
             </WithTooltip>
         </HistoryButtonsContainer>
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
index 3e198086bf..9cbd4e87c0 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
@@ -106,12 +106,17 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="trigger"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Command trigger e.g. \\"hello\\" not including the slash"
+            placeholder={
+              Object {
+                "defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
+                "id": "add_command.trigger.placeholder",
+              }
+            }
             type="text"
             value="trigger"
           />
@@ -171,7 +176,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         >
           <OAuthConnectionAudienceInput
             onChange={[Function]}
-            placeholder="Must start with http:// or https://"
+            placeholder={
+              Object {
+                "defaultMessage": "Must start with http:// or https://",
+                "id": "add_command.url.placeholder",
+              }
+            }
             value="https://google.com/command"
           />
           <div
@@ -254,12 +264,17 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="username"
             maxLength={64}
             onChange={[Function]}
-            placeholder="Username"
+            placeholder={
+              Object {
+                "defaultMessage": "Username",
+                "id": "add_command.username.placeholder",
+              }
+            }
             type="text"
             value="username"
           />
@@ -288,12 +303,17 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="iconUrl"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="https://www.example.com/myicon.png"
+            placeholder={
+              Object {
+                "defaultMessage": "https://www.example.com/myicon.png",
+                "id": "add_command.iconUrl.placeholder",
+              }
+            }
             type="text"
             value="https://google.com/icon"
           />
@@ -353,12 +373,17 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="autocompleteHint"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="Example: [Patient Name]"
+            placeholder={
+              Object {
+                "defaultMessage": "Example: [Patient Name]",
+                "id": "add_command.autocompleteHint.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_hint"
           />
@@ -387,12 +412,17 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="description"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Example: \\"Returns search results for patient records\\""
+            placeholder={
+              Object {
+                "defaultMessage": "Example: \\"Returns search results for patient records\\"",
+                "id": "add_command.autocompleteDescription.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_desc"
           />
@@ -432,7 +462,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
           id="saveCommand"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "Loading",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -554,12 +589,17 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="trigger"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Command trigger e.g. \\"hello\\" not including the slash"
+            placeholder={
+              Object {
+                "defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
+                "id": "add_command.trigger.placeholder",
+              }
+            }
             type="text"
             value="trigger"
           />
@@ -619,7 +659,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         >
           <OAuthConnectionAudienceInput
             onChange={[Function]}
-            placeholder="Must start with http:// or https://"
+            placeholder={
+              Object {
+                "defaultMessage": "Must start with http:// or https://",
+                "id": "add_command.url.placeholder",
+              }
+            }
             value="https://google.com/command"
           />
           <div
@@ -702,12 +747,17 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="username"
             maxLength={64}
             onChange={[Function]}
-            placeholder="Username"
+            placeholder={
+              Object {
+                "defaultMessage": "Username",
+                "id": "add_command.username.placeholder",
+              }
+            }
             type="text"
             value="username"
           />
@@ -736,12 +786,17 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="iconUrl"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="https://www.example.com/myicon.png"
+            placeholder={
+              Object {
+                "defaultMessage": "https://www.example.com/myicon.png",
+                "id": "add_command.iconUrl.placeholder",
+              }
+            }
             type="text"
             value="https://google.com/icon"
           />
@@ -801,12 +856,17 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="autocompleteHint"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="Example: [Patient Name]"
+            placeholder={
+              Object {
+                "defaultMessage": "Example: [Patient Name]",
+                "id": "add_command.autocompleteHint.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_hint"
           />
@@ -835,12 +895,17 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="description"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Example: \\"Returns search results for patient records\\""
+            placeholder={
+              Object {
+                "defaultMessage": "Example: \\"Returns search results for patient records\\"",
+                "id": "add_command.autocompleteDescription.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_desc"
           />
@@ -1002,12 +1067,17 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="trigger"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Command trigger e.g. \\"hello\\" not including the slash"
+            placeholder={
+              Object {
+                "defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
+                "id": "add_command.trigger.placeholder",
+              }
+            }
             type="text"
             value=""
           />
@@ -1067,7 +1137,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         >
           <OAuthConnectionAudienceInput
             onChange={[Function]}
-            placeholder="Must start with http:// or https://"
+            placeholder={
+              Object {
+                "defaultMessage": "Must start with http:// or https://",
+                "id": "add_command.url.placeholder",
+              }
+            }
             value="https://google.com/command"
           />
           <div
@@ -1150,12 +1225,17 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="username"
             maxLength={64}
             onChange={[Function]}
-            placeholder="Username"
+            placeholder={
+              Object {
+                "defaultMessage": "Username",
+                "id": "add_command.username.placeholder",
+              }
+            }
             type="text"
             value="username"
           />
@@ -1184,12 +1264,17 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="iconUrl"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="https://www.example.com/myicon.png"
+            placeholder={
+              Object {
+                "defaultMessage": "https://www.example.com/myicon.png",
+                "id": "add_command.iconUrl.placeholder",
+              }
+            }
             type="text"
             value="https://google.com/icon"
           />
@@ -1249,12 +1334,17 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="autocompleteHint"
             maxLength={1024}
             onChange={[Function]}
-            placeholder="Example: [Patient Name]"
+            placeholder={
+              Object {
+                "defaultMessage": "Example: [Patient Name]",
+                "id": "add_command.autocompleteHint.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_hint"
           />
@@ -1283,12 +1373,17 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
         <div
           className="col-md-5 col-sm-8"
         >
-          <input
+          <LocalizedPlaceholderInput
             className="form-control"
             id="description"
             maxLength={128}
             onChange={[Function]}
-            placeholder="Example: \\"Returns search results for patient records\\""
+            placeholder={
+              Object {
+                "defaultMessage": "Example: \\"Returns search results for patient records\\"",
+                "id": "add_command.autocompleteDescription.placeholder",
+              }
+            }
             type="text"
             value="auto_complete_desc"
           />
@@ -1331,7 +1426,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
           id="saveCommand"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "Loading",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
index 3c430f7db4..8f7a783206 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
@@ -246,7 +246,12 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -506,7 +511,12 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -769,7 +779,12 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -996,7 +1011,12 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -1223,7 +1243,12 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -1483,7 +1508,12 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
index 096871471c..5b0a372b1c 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap
@@ -287,7 +287,12 @@ https://test.com/callback2"
           id="saveOauthApp"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "Loading",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
@@ -593,7 +598,12 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
           id="saveOauthApp"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "Loading",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
index d03e1b9973..5c51494a06 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
@@ -332,7 +332,12 @@ callbackUrl2.com
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="Loading"
+          spinningText={
+            Object {
+              "defaultMessage": "Loading",
+              "id": "loading_id",
+            }
+          }
           type="submit"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/abstract_command.test.tsx b/webapp/channels/src/components/integrations/abstract_command.test.tsx
index 00ac9aa6ea..ce7812119e 100644
--- a/webapp/channels/src/components/integrations/abstract_command.test.tsx
+++ b/webapp/channels/src/components/integrations/abstract_command.test.tsx
@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {shallow} from 'enzyme';
 import React from 'react';
 import type {FormEvent} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import AbstractCommand from 'components/integrations/abstract_command';
-import type {AbstractCommand as AbstractCommandClass} from 'components/integrations/abstract_command';
 
-import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 import {TestHelper} from 'utils/test_helper';
 
 describe('components/integrations/AbstractCommand', () => {
@@ -57,14 +56,14 @@ describe('components/integrations/AbstractCommand', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <AbstractCommand {...baseProps}/>,
         );
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot when header/footer/loading is a string', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <AbstractCommand
                 {...baseProps}
                 header='Header as string'
@@ -78,7 +77,7 @@ describe('components/integrations/AbstractCommand', () => {
     test('should match snapshot, displays client error', () => {
         const newSeverError = 'server error';
         const props = {...baseProps, serverError: newSeverError};
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <AbstractCommand {...props}/>,
         );
 
@@ -90,7 +89,7 @@ describe('components/integrations/AbstractCommand', () => {
     });
 
     test('should call action function', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow(
             <AbstractCommand {...baseProps}/>,
         );
 
@@ -101,10 +100,10 @@ describe('components/integrations/AbstractCommand', () => {
     });
 
     test('should match object returned by getStateFromCommand', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow<AbstractCommand>(
             <AbstractCommand {...baseProps}/>,
         );
-        const instance = wrapper.instance() as AbstractCommandClass;
+        const instance = wrapper.instance();
 
         const expectedOutput = {
             autocomplete: true,
@@ -125,10 +124,10 @@ describe('components/integrations/AbstractCommand', () => {
     });
 
     test('should match state when method is called', () => {
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow<AbstractCommand>(
             <AbstractCommand {...baseProps}/>,
         );
-        const instance = wrapper.instance() as AbstractCommandClass;
+        const instance = wrapper.instance();
 
         const displayName = 'new display_name';
         const displayNameEvent = {preventDefault: jest.fn(), target: {value: displayName}} as any;
@@ -192,10 +191,10 @@ describe('components/integrations/AbstractCommand', () => {
             },
         );
         const props = {...baseProps, action: newAction};
-        const wrapper = shallowWithIntl(
+        const wrapper = shallow<AbstractCommand>(
             <AbstractCommand {...props}/>,
         );
-        const instance = wrapper.instance() as AbstractCommandClass;
+        const instance = wrapper.instance();
         expect(newAction).toHaveBeenCalledTimes(0);
 
         const evt = {preventDefault: jest.fn()} as unknown as FormEvent<Element>;
diff --git a/webapp/channels/src/components/integrations/abstract_command.tsx b/webapp/channels/src/components/integrations/abstract_command.tsx
index 4fca060b0c..e71067935a 100644
--- a/webapp/channels/src/components/integrations/abstract_command.tsx
+++ b/webapp/channels/src/components/integrations/abstract_command.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import type {ChangeEvent} from 'react';
-import {FormattedMessage, type MessageDescriptor, injectIntl, type IntlShape} from 'react-intl';
+import {defineMessage, FormattedMessage, type MessageDescriptor} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import type {Command} from '@mattermost/types/integrations';
@@ -12,6 +12,7 @@ import type {Team} from '@mattermost/types/teams';
 import BackstageHeader from 'components/backstage/components/backstage_header';
 import ExternalLink from 'components/external_link';
 import FormError from 'components/form_error';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import SpinnerButton from 'components/spinner_button';
 
 import {Constants, DeveloperLinks} from 'utils/constants';
@@ -63,8 +64,6 @@ type Props = {
     * The async function to run when the action button is pressed
     */
     action: (command: Command) => Promise<void>;
-
-    intl: IntlShape;
 }
 
 type State = {
@@ -82,7 +81,7 @@ type State = {
     autocompleteDescription: string;
 }
 
-export class AbstractCommand extends React.PureComponent<Props, State> {
+export default class AbstractCommand extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
@@ -331,14 +330,14 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                         />
                     </label>
                     <div className='col-md-5 col-sm-8'>
-                        <input
+                        <LocalizedPlaceholderInput
                             id='autocompleteHint'
                             type='text'
                             maxLength={1024}
                             className='form-control'
                             value={this.state.autocompleteHint}
                             onChange={this.updateAutocompleteHint}
-                            placeholder={this.props.intl.formatMessage({
+                            placeholder={defineMessage({
                                 id: 'add_command.autocompleteHint.placeholder',
                                 defaultMessage: 'Example: [Patient Name]',
                             })}
@@ -365,14 +364,14 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                         />
                     </label>
                     <div className='col-md-5 col-sm-8'>
-                        <input
+                        <LocalizedPlaceholderInput
                             id='description'
                             type='text'
                             maxLength={128}
                             className='form-control'
                             value={this.state.autocompleteDescription}
                             onChange={this.updateAutocompleteDescription}
-                            placeholder={this.props.intl.formatMessage({
+                            placeholder={defineMessage({
                                 id: 'add_command.autocompleteDescription.placeholder',
                                 defaultMessage: 'Example: "Returns search results for patient records"',
                             })}
@@ -469,14 +468,14 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                                 />
                             </label>
                             <div className='col-md-5 col-sm-8'>
-                                <input
+                                <LocalizedPlaceholderInput
                                     id='trigger'
                                     type='text'
                                     maxLength={Constants.MAX_TRIGGER_LENGTH}
                                     className='form-control'
                                     value={this.state.trigger}
                                     onChange={this.updateTrigger}
-                                    placeholder={this.props.intl.formatMessage({
+                                    placeholder={defineMessage({
                                         id: 'add_command.trigger.placeholder',
                                         defaultMessage: 'Command trigger e.g. "hello" not including the slash',
                                     })}
@@ -528,7 +527,7 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                                 <OAuthConnectionAudienceInput
                                     value={this.state.url}
                                     onChange={this.updateUrl}
-                                    placeholder={this.props.intl.formatMessage({
+                                    placeholder={defineMessage({
                                         id: 'add_command.url.placeholder',
                                         defaultMessage: 'Must start with http:// or https://',
                                     })}
@@ -595,14 +594,14 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                                 />
                             </label>
                             <div className='col-md-5 col-sm-8'>
-                                <input
+                                <LocalizedPlaceholderInput
                                     id='username'
                                     type='text'
                                     maxLength={64}
                                     className='form-control'
                                     value={this.state.username}
                                     onChange={this.updateUsername}
-                                    placeholder={this.props.intl.formatMessage({
+                                    placeholder={defineMessage({
                                         id: 'add_command.username.placeholder',
                                         defaultMessage: 'Username',
                                     })}
@@ -626,14 +625,14 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                                 />
                             </label>
                             <div className='col-md-5 col-sm-8'>
-                                <input
+                                <LocalizedPlaceholderInput
                                     id='iconUrl'
                                     type='text'
                                     maxLength={1024}
                                     className='form-control'
                                     value={this.state.iconUrl}
                                     onChange={this.updateIconUrl}
-                                    placeholder={this.props.intl.formatMessage({
+                                    placeholder={defineMessage({
                                         id: 'add_command.iconUrl.placeholder',
                                         defaultMessage: 'https://www.example.com/myicon.png',
                                     })}
@@ -691,7 +690,7 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={typeof this.props.loading === 'string' ? this.props.loading : Utils.localizeMessage({id: this.props.loading?.id ?? '', defaultMessage: this.props.loading?.defaultMessage as string})}
+                                spinningText={this.props.loading}
                                 onClick={this.handleSubmit}
                                 id='saveCommand'
                             >
@@ -705,5 +704,3 @@ export class AbstractCommand extends React.PureComponent<Props, State> {
         );
     }
 }
-
-export default injectIntl(AbstractCommand);
diff --git a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
index a65813c9ca..9abbb4baa8 100644
--- a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
+++ b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
@@ -15,8 +15,6 @@ import ChannelSelect from 'components/channel_select';
 import FormError from 'components/form_error';
 import SpinnerButton from 'components/spinner_button';
 
-import {localizeMessage} from 'utils/utils';
-
 interface State {
     displayName: string;
     description: string;
@@ -383,7 +381,7 @@ export default class AbstractIncomingWebhook extends PureComponent<Props, State>
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={localizeMessage({id: this.props.loading.id as string, defaultMessage: this.props.loading.defaultMessage as string})}
+                                spinningText={this.props.loading}
                                 onClick={(e) => this.handleSubmit(e)}
                                 id='saveWebhook'
                             >
diff --git a/webapp/channels/src/components/integrations/abstract_oauth_app.tsx b/webapp/channels/src/components/integrations/abstract_oauth_app.tsx
index d0524589ea..8825dacc07 100644
--- a/webapp/channels/src/components/integrations/abstract_oauth_app.tsx
+++ b/webapp/channels/src/components/integrations/abstract_oauth_app.tsx
@@ -17,8 +17,6 @@ import FormError from 'components/form_error';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import SpinnerButton from 'components/spinner_button';
 
-import {localizeMessage} from 'utils/utils';
-
 type Props = {
 
     /**
@@ -477,7 +475,7 @@ export default class AbstractOAuthApp extends React.PureComponent<Props, State>
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={localizeMessage({id: this.props.loading?.id || '', defaultMessage: (this.props.loading?.defaultMessage || '') as string})}
+                                spinningText={this.props.loading}
                                 onClick={this.handleSubmit}
                                 id='saveOauthApp'
                             >
diff --git a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
index de40d1cd80..72db32fcb8 100644
--- a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
+++ b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
@@ -594,7 +594,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent<Props,
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={localizeMessage({id: this.props.loading.id as string, defaultMessage: this.props.loading.defaultMessage as string})}
+                                spinningText={this.props.loading}
                                 onClick={this.handleSubmit}
                                 id='saveWebhook'
                             >
diff --git a/webapp/channels/src/components/integrations/add_command/__snapshots__/add_command.test.tsx.snap b/webapp/channels/src/components/integrations/add_command/__snapshots__/add_command.test.tsx.snap
index 77ef7a90b1..ca34aa2a56 100644
--- a/webapp/channels/src/components/integrations/add_command/__snapshots__/add_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/add_command/__snapshots__/add_command.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/integrations/AddCommand should match snapshot 1`] = `
-<injectIntl(AbstractCommand)
+<AbstractCommand
   action={[Function]}
   footer="Save"
   header="Add"
diff --git a/webapp/channels/src/components/integrations/edit_command/__snapshots__/edit_command.test.tsx.snap b/webapp/channels/src/components/integrations/edit_command/__snapshots__/edit_command.test.tsx.snap
index b4a2443e8b..7dc653c414 100644
--- a/webapp/channels/src/components/integrations/edit_command/__snapshots__/edit_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/edit_command/__snapshots__/edit_command.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/integrations/EditCommand should have match renderExtra 1`] =
 `;
 
 exports[`components/integrations/EditCommand should match snapshot 1`] = `
-<injectIntl(AbstractCommand)
+<AbstractCommand
   action={[Function]}
   footer={
     Object {
diff --git a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap b/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
index ed21a2325c..ed1e19f03a 100644
--- a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
@@ -86,15 +86,15 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
         className="item-details__url word-break--all"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Is Trusted: <b>{isTrusted}</b>"
-          id="installedOauthApps.isTrusted"
-          values={
-            Object {
-              "b": [Function],
-              "isTrusted": "Yes",
-            }
-          }
+          defaultMessage="Is Trusted: "
+          id="installed_oauth_apps.is_trusted"
         />
+        <strong>
+          <MemoizedFormattedMessage
+            defaultMessage="Yes"
+            id="installed_oauth_apps.trusted.yes"
+          />
+        </strong>
       </span>
     </div>
     <div
@@ -104,15 +104,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client ID: <b>{clientId}</b>"
-          id="installedIntegrations.clientId"
-          values={
-            Object {
-              "b": [Function],
-              "clientId": "facxd9wpzpbpfp8pad78xj75pr",
-            }
-          }
+          defaultMessage="Client ID: "
+          id="installed_integrations.client_id"
         />
+        <strong>
+          facxd9wpzpbpfp8pad78xj75pr
+        </strong>
         <Memo(CopyText)
           tooltip={
             <Memo(MemoizedFormattedMessage)
@@ -131,15 +128,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client Secret: <b>{clientSecret}</b>"
-          id="installedIntegrations.clientSecret"
-          values={
-            Object {
-              "b": [Function],
-              "clientSecret": "***************",
-            }
-          }
+          defaultMessage="Client Secret: "
+          id="installed_integrations.client_secret"
         />
+        <strong>
+          ***************
+        </strong>
       </span>
     </div>
     <div
@@ -320,15 +314,15 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
         className="item-details__url word-break--all"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Is Trusted: <b>{isTrusted}</b>"
-          id="installedOauthApps.isTrusted"
-          values={
-            Object {
-              "b": [Function],
-              "isTrusted": "No",
-            }
-          }
+          defaultMessage="Is Trusted: "
+          id="installed_oauth_apps.is_trusted"
         />
+        <strong>
+          <MemoizedFormattedMessage
+            defaultMessage="No"
+            id="installed_oauth_apps.trusted.no"
+          />
+        </strong>
       </span>
     </div>
     <div
@@ -338,15 +332,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client ID: <b>{clientId}</b>"
-          id="installedIntegrations.clientId"
-          values={
-            Object {
-              "b": [Function],
-              "clientId": "facxd9wpzpbpfp8pad78xj75pr",
-            }
-          }
+          defaultMessage="Client ID: "
+          id="installed_integrations.client_id"
         />
+        <strong>
+          facxd9wpzpbpfp8pad78xj75pr
+        </strong>
         <Memo(CopyText)
           tooltip={
             <Memo(MemoizedFormattedMessage)
@@ -365,15 +356,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client Secret: <b>{clientSecret}</b>"
-          id="installedIntegrations.clientSecret"
-          values={
-            Object {
-              "b": [Function],
-              "clientSecret": "***************",
-            }
-          }
+          defaultMessage="Client Secret: "
+          id="installed_integrations.client_secret"
         />
+        <strong>
+          ***************
+        </strong>
       </span>
     </div>
     <div
@@ -502,15 +490,15 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
         className="item-details__url word-break--all"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Is Trusted: <b>{isTrusted}</b>"
-          id="installedOauthApps.isTrusted"
-          values={
-            Object {
-              "b": [Function],
-              "isTrusted": "No",
-            }
-          }
+          defaultMessage="Is Trusted: "
+          id="installed_oauth_apps.is_trusted"
         />
+        <strong>
+          <MemoizedFormattedMessage
+            defaultMessage="No"
+            id="installed_oauth_apps.trusted.no"
+          />
+        </strong>
       </span>
     </div>
     <div
@@ -520,15 +508,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client ID: <b>{clientId}</b>"
-          id="installedIntegrations.clientId"
-          values={
-            Object {
-              "b": [Function],
-              "clientId": "facxd9wpzpbpfp8pad78xj75pr",
-            }
-          }
+          defaultMessage="Client ID: "
+          id="installed_integrations.client_id"
         />
+        <strong>
+          facxd9wpzpbpfp8pad78xj75pr
+        </strong>
         <Memo(CopyText)
           tooltip={
             <Memo(MemoizedFormattedMessage)
@@ -547,15 +532,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client Secret: <b>{clientSecret}</b>"
-          id="installedIntegrations.clientSecret"
-          values={
-            Object {
-              "b": [Function],
-              "clientSecret": "***************",
-            }
-          }
+          defaultMessage="Client Secret: "
+          id="installed_integrations.client_secret"
         />
+        <strong>
+          ***************
+        </strong>
       </span>
     </div>
     <div
diff --git a/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx b/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
index 1d79617e72..f74f3c2637 100644
--- a/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
+++ b/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
@@ -11,8 +11,6 @@ import type {Team} from '@mattermost/types/teams';
 import CopyText from 'components/copy_text';
 import FormError from 'components/form_error';
 
-import * as Utils from 'utils/utils';
-
 import DeleteIntegrationLink from '../delete_integration_link';
 
 const FAKE_SECRET = '***************';
@@ -159,9 +157,19 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
 
         let isTrusted;
         if (oauthApp.is_trusted) {
-            isTrusted = Utils.localizeMessage({id: 'installed_oauth_apps.trusted.yes', defaultMessage: 'Yes'});
+            isTrusted = (
+                <FormattedMessage
+                    id='installed_oauth_apps.trusted.yes'
+                    defaultMessage='Yes'
+                />
+            );
         } else {
-            isTrusted = Utils.localizeMessage({id: 'installed_oauth_apps.trusted.no', defaultMessage: 'No'});
+            isTrusted = (
+                <FormattedMessage
+                    id='installed_oauth_apps.trusted.no'
+                    defaultMessage='No'
+                />
+            );
         }
 
         let showHide;
@@ -182,13 +190,10 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
             clientSecret = (
                 <span className='item-details__token'>
                     <FormattedMessage
-                        id='installedIntegrations.clientSecret'
-                        defaultMessage='Client Secret: <b>{clientSecret}</b>'
-                        values={{
-                            clientSecret: this.state.clientSecret,
-                            b: (chunks: string) => <b>{chunks}</b>,
-                        }}
+                        id='installed_integrations.client_secret'
+                        defaultMessage='Client Secret: '
                     />
+                    <strong>{this.state.clientSecret}</strong>
                 </span>
             );
         } else {
@@ -207,13 +212,10 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
             clientSecret = (
                 <span className='item-details__token'>
                     <FormattedMessage
-                        id='installedIntegrations.clientSecret'
-                        defaultMessage='Client Secret: <b>{clientSecret}</b>'
-                        values={{
-                            clientSecret: this.state.clientSecret,
-                            b: (chunks: string) => <b>{chunks}</b>,
-                        }}
+                        id='installed_integrations.client_secret'
+                        defaultMessage='Client Secret: '
                     />
+                    <strong>{this.state.clientSecret}</strong>
                     <CopyText
                         tooltip={
                             <FormattedMessage
@@ -296,25 +298,19 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
                     <div className='item-details__row'>
                         <span className='item-details__url word-break--all'>
                             <FormattedMessage
-                                id='installedOauthApps.isTrusted'
-                                defaultMessage='Is Trusted: <b>{isTrusted}</b>'
-                                values={{
-                                    isTrusted,
-                                    b: (chunks: string) => <b>{chunks}</b>,
-                                }}
+                                id='installed_oauth_apps.is_trusted'
+                                defaultMessage='Is Trusted: '
                             />
+                            <strong>{isTrusted}</strong>
                         </span>
                     </div>
                     <div className='item-details__row'>
                         <span className='item-details__token'>
                             <FormattedMessage
-                                id='installedIntegrations.clientId'
-                                defaultMessage='Client ID: <b>{clientId}</b>'
-                                values={{
-                                    clientId: oauthApp.id,
-                                    b: (chunks: string) => <b>{chunks}</b>,
-                                }}
+                                id='installed_integrations.client_id'
+                                defaultMessage='Client ID: '
                             />
+                            <strong>{oauthApp.id}</strong>
                             <CopyText
                                 tooltip={
                                     <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connection.test.tsx.snap
index b7c8273ed8..f11cb57985 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connection.test.tsx.snap
@@ -58,15 +58,12 @@ exports[`components/integrations/InstalledOutgoingOAuthConnection should match s
         className="item-details__token"
       >
         <MemoizedFormattedMessage
-          defaultMessage="Client ID: <b>{clientId}</b>"
-          id="installedIntegrations.clientId"
-          values={
-            Object {
-              "b": [Function],
-              "clientId": "someid",
-            }
-          }
+          defaultMessage="Client ID: "
+          id="installed_integrations.client_id"
         />
+        <strong>
+          someid
+        </strong>
       </span>
     </div>
     <div
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/oauth_connection_audience_input.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/oauth_connection_audience_input.test.tsx.snap
index 19d3a2b598..340c7548be 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/oauth_connection_audience_input.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/oauth_connection_audience_input.test.tsx.snap
@@ -38,18 +38,38 @@ exports[`components/integrations/outgoing_oauth_connections/OAuthConnectionAudie
     >
       <OAuthConnectionAudienceInput
         onChange={[MockFunction]}
-        placeholder=""
+        placeholder={
+          Object {
+            "defaultMessage": "",
+            "id": "test-placeholder",
+          }
+        }
         value="https://aud.com/api/it_matches"
       >
-        <input
+        <LocalizedPlaceholderInput
           autoComplete="off"
           className="form-control"
           id="url"
           maxLength={1024}
           onChange={[Function]}
-          placeholder=""
+          placeholder={
+            Object {
+              "defaultMessage": "",
+              "id": "test-placeholder",
+            }
+          }
           value="https://aud.com/api/it_matches"
-        />
+        >
+          <input
+            autoComplete="off"
+            className="form-control"
+            id="url"
+            maxLength={1024}
+            onChange={[Function]}
+            placeholder="aaa"
+            value="https://aud.com/api/it_matches"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="outgoing-oauth-audience-match-message-container"
         >
@@ -128,18 +148,38 @@ exports[`components/integrations/outgoing_oauth_connections/OAuthConnectionAudie
     >
       <OAuthConnectionAudienceInput
         onChange={[MockFunction]}
-        placeholder=""
+        placeholder={
+          Object {
+            "defaultMessage": "",
+            "id": "test-placeholder",
+          }
+        }
         value="https://aud.com/api/no_match"
       >
-        <input
+        <LocalizedPlaceholderInput
           autoComplete="off"
           className="form-control"
           id="url"
           maxLength={1024}
           onChange={[Function]}
-          placeholder=""
+          placeholder={
+            Object {
+              "defaultMessage": "",
+              "id": "test-placeholder",
+            }
+          }
           value="https://aud.com/api/no_match"
-        />
+        >
+          <input
+            autoComplete="off"
+            className="form-control"
+            id="url"
+            maxLength={1024}
+            onChange={[Function]}
+            placeholder="aaa"
+            value="https://aud.com/api/no_match"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="outgoing-oauth-audience-match-message-container"
         >
@@ -218,18 +258,38 @@ exports[`components/integrations/outgoing_oauth_connections/OAuthConnectionAudie
     >
       <OAuthConnectionAudienceInput
         onChange={[MockFunction]}
-        placeholder=""
+        placeholder={
+          Object {
+            "defaultMessage": "",
+            "id": "test-placeholder",
+          }
+        }
         value="https://aud.com/api"
       >
-        <input
+        <LocalizedPlaceholderInput
           autoComplete="off"
           className="form-control"
           id="url"
           maxLength={1024}
           onChange={[Function]}
-          placeholder=""
+          placeholder={
+            Object {
+              "defaultMessage": "",
+              "id": "test-placeholder",
+            }
+          }
           value="https://aud.com/api"
-        />
+        >
+          <input
+            autoComplete="off"
+            className="form-control"
+            id="url"
+            maxLength={1024}
+            onChange={[Function]}
+            placeholder="aaa"
+            value="https://aud.com/api"
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="outgoing-oauth-audience-match-message-container"
         >
@@ -308,18 +368,38 @@ exports[`components/integrations/outgoing_oauth_connections/OAuthConnectionAudie
     >
       <OAuthConnectionAudienceInput
         onChange={[MockFunction]}
-        placeholder=""
+        placeholder={
+          Object {
+            "defaultMessage": "",
+            "id": "test-placeholder",
+          }
+        }
         value=""
       >
-        <input
+        <LocalizedPlaceholderInput
           autoComplete="off"
           className="form-control"
           id="url"
           maxLength={1024}
           onChange={[Function]}
-          placeholder=""
+          placeholder={
+            Object {
+              "defaultMessage": "",
+              "id": "test-placeholder",
+            }
+          }
           value=""
-        />
+        >
+          <input
+            autoComplete="off"
+            className="form-control"
+            id="url"
+            maxLength={1024}
+            onChange={[Function]}
+            placeholder="aaa"
+            value=""
+          />
+        </LocalizedPlaceholderInput>
         <div
           className="outgoing-oauth-audience-match-message-container"
         >
@@ -398,18 +478,38 @@ exports[`components/integrations/outgoing_oauth_connections/OAuthConnectionAudie
     >
       <OAuthConnectionAudienceInput
         onChange={[MockFunction]}
-        placeholder=""
+        placeholder={
+          Object {
+            "defaultMessage": "",
+            "id": "test-placeholder",
+          }
+        }
         value=""
       >
-        <input
+        <LocalizedPlaceholderInput
           autoComplete="off"
           className="form-control"
           id="url"
           maxLength={1024}
           onChange={[Function]}
-          placeholder=""
+          placeholder={
+            Object {
+              "defaultMessage": "",
+              "id": "test-placeholder",
+            }
+          }
           value=""
-        />
+        >
+          <input
+            autoComplete="off"
+            className="form-control"
+            id="url"
+            maxLength={1024}
+            onChange={[Function]}
+            placeholder="aaa"
+            value=""
+          />
+        </LocalizedPlaceholderInput>
       </OAuthConnectionAudienceInput>
     </Provider>
   </Router>
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/installed_outgoing_oauth_connection.tsx b/webapp/channels/src/components/integrations/outgoing_oauth_connections/installed_outgoing_oauth_connection.tsx
index a3f7e46094..74db3049ff 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/installed_outgoing_oauth_connection.tsx
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/installed_outgoing_oauth_connection.tsx
@@ -8,8 +8,6 @@ import {Link} from 'react-router-dom';
 import type {OutgoingOAuthConnection} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
 
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
 import DeleteIntegrationLink from '../delete_integration_link';
 
 export function matchesFilter(outgoingOAuthConnection: OutgoingOAuthConnection, filter?: string | null): boolean {
@@ -123,13 +121,10 @@ const InstalledOutgoingOAuthConnection = (props: InstalledOutgoingOAuthConnectio
             <div className='item-details__row'>
                 <span className='item-details__token'>
                     <FormattedMessage
-                        id='installedIntegrations.clientId'
-                        defaultMessage='Client ID: <b>{clientId}</b>'
-                        values={{
-                            clientId: outgoingOAuthConnection.client_id,
-                            b: (chunks: string) => <b>{chunks}</b>,
-                        }}
+                        id='installed_integrations.client_id'
+                        defaultMessage='Client ID: '
                     />
+                    <strong>{outgoingOAuthConnection.client_id}</strong>
                 </span>
             </div>
             <div className='item-details__row'>
@@ -144,13 +139,11 @@ const InstalledOutgoingOAuthConnection = (props: InstalledOutgoingOAuthConnectio
                 <>
                     <div className='item-details__row'>
                         <span className='item-details__token'>
-                            <FormattedMarkdownMessage
+                            <FormattedMessage
                                 id='installed_outgoing_oauth_connections.username'
-                                defaultMessage='Username: **{username}**'
-                                values={{
-                                    username: outgoingOAuthConnection.credentials_username,
-                                }}
+                                defaultMessage='Username: '
                             />
+                            <strong>{outgoingOAuthConnection.credentials_username}</strong>
                         </span>
                     </div>
                     <div className='item-details__row'>
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.test.tsx b/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.test.tsx
index 25a8fbf682..dd4b3e70b8 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.test.tsx
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.test.tsx
@@ -3,6 +3,7 @@
 
 import {act} from '@testing-library/react';
 import React from 'react';
+import {createIntl} from 'react-intl';
 import {Provider} from 'react-redux';
 import {BrowserRouter as Router} from 'react-router-dom';
 
@@ -16,6 +17,8 @@ import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import mockStore from 'tests/test_store';
 import {TestHelper} from 'utils/test_helper';
 
+jest.unmock('react-intl');
+
 describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudienceInput', () => {
     const connection: OutgoingOAuthConnection = {
         id: 'facxd9wpzpbpfp8pad78xj75pr',
@@ -33,7 +36,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
     const baseProps: React.ComponentProps<typeof OAuthConnectionAudienceInput> = {
         value: '',
         onChange: jest.fn(),
-        placeholder: '',
+        placeholder: {id: 'test-placeholder', defaultMessage: ''},
     };
 
     const team = TestHelper.getTeamMock({name: 'test'});
@@ -74,6 +77,14 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
         };
     };
 
+    const intl = createIntl({
+        locale: 'en',
+        defaultLocale: 'en',
+        timeZone: 'Etc/UTC',
+        messages: {'test-placeholder': 'aaa'},
+        textComponent: 'span',
+    });
+
     test('should match snapshot with no existing connections', async () => {
         const props = {...baseProps};
         const state = stateFromOAuthConnections({});
@@ -85,6 +96,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
                         <OAuthConnectionAudienceInput {...props}/>
                     </Provider>
                 </Router>,
+                {intl},
             );
 
             expect(wrapper).toMatchSnapshot();
@@ -102,6 +114,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
                         <OAuthConnectionAudienceInput {...props}/>
                     </Provider>
                 </Router>,
+                {intl},
             );
 
             expect(wrapper).toMatchSnapshot();
@@ -119,6 +132,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
                         <OAuthConnectionAudienceInput {...props}/>
                     </Provider>
                 </Router>,
+                {intl},
             );
 
             expect(wrapper).toMatchSnapshot();
@@ -137,6 +151,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
                         <OAuthConnectionAudienceInput {...props}/>
                     </Provider>
                 </Router>,
+                {intl},
             );
             expect(wrapper).toMatchSnapshot();
         });
@@ -154,6 +169,7 @@ describe('components/integrations/outgoing_oauth_connections/OAuthConnectionAudi
                         <OAuthConnectionAudienceInput {...props}/>
                     </Provider>
                 </Router>,
+                {intl},
             );
             expect(wrapper).toMatchSnapshot();
         });
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.tsx b/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.tsx
index 7525e32c23..99ba37a8e4 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.tsx
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/oauth_connection_audience_input.tsx
@@ -3,6 +3,7 @@
 
 import debounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
@@ -17,12 +18,13 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getOutgoingOAuthConnections} from 'mattermost-redux/selectors/entities/integrations';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 type Props = {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder: string;
+    placeholder: MessageDescriptor;
 }
 
 const OAuthConnectionAudienceInput = (props: Props) => {
@@ -78,7 +80,7 @@ const OAuthConnectionAudienceInput = (props: Props) => {
     const connections = Object.values(oauthConnections);
 
     const input = (
-        <input
+        <LocalizedPlaceholderInput
             autoComplete='off'
             id='url'
             maxLength={1024}
diff --git a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx
index 8fcf217090..005faf362a 100644
--- a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx
+++ b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx
@@ -48,8 +48,6 @@ const LearnMoreTrialModal = (
         setEmbargoed(true);
     }, []);
 
-    const startTrialBtnMsg = formatMessage({id: 'start_trial.modal_btn.start_free_trial', defaultMessage: 'Start free 30-day trial'});
-
     // close this modal once start trial btn is clicked and trial has started successfully
     const dismissAction = useCallback(() => {
         dispatch(closeModal(ModalIdentifiers.LEARN_MORE_TRIAL_MODAL));
@@ -57,7 +55,6 @@ const LearnMoreTrialModal = (
 
     const startTrialBtn = (
         <StartTrialBtn
-            message={startTrialBtnMsg}
             handleEmbargoError={handleEmbargoError}
             telemetryId={`start_trial__learn_more_modal__${launchedBy}`}
             onClick={dismissAction}
diff --git a/webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx b/webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx
index b628121473..b466978049 100644
--- a/webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx
+++ b/webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx
@@ -9,7 +9,6 @@ import useOpenStartTrialFormModal from 'components/common/hooks/useOpenStartTria
 import './start_trial_btn.scss';
 
 export type StartTrialBtnProps = {
-    message: string;
     telemetryId: string;
     onClick?: () => void;
     handleEmbargoError?: () => void;
diff --git a/webapp/channels/src/components/loading_image_preview.tsx b/webapp/channels/src/components/loading_image_preview.tsx
index b7a7d78b5b..443b102a8f 100644
--- a/webapp/channels/src/components/loading_image_preview.tsx
+++ b/webapp/channels/src/components/loading_image_preview.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 type Props = {
-    loading?: string;
+    loading?: React.ReactNode;
     progress?: number;
     containerClass?: string;
 }
@@ -19,7 +19,8 @@ const LoadingImagePreview: React.FC<Props> = ({loading, progress, containerClass
     if (progress) {
         progressView = (
             <span className='loader-percent'>
-                {`${loading} ${progress}%`}
+                {loading}
+                {` ${progress}%`}
             </span>
         );
     }
diff --git a/webapp/channels/src/components/localized_placeholder_input.tsx b/webapp/channels/src/components/localized_placeholder_input.tsx
new file mode 100644
index 0000000000..c6dabc7413
--- /dev/null
+++ b/webapp/channels/src/components/localized_placeholder_input.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl, type MessageDescriptor} from 'react-intl';
+
+type Props = {
+    placeholder: MessageDescriptor;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'>;
+
+const LocalizedPlaceholderInput = React.forwardRef<HTMLInputElement, Props>(({placeholder, ...otherProps}, ref) => {
+    const intl = useIntl();
+
+    return (
+        <input
+            ref={ref}
+            placeholder={intl.formatMessage(placeholder)}
+            {...otherProps}
+        />
+    );
+});
+
+LocalizedPlaceholderInput.displayName = 'LocalizedPlaceholderInput';
+
+export default LocalizedPlaceholderInput;
diff --git a/webapp/channels/src/components/localized_placeholder_textarea.tsx b/webapp/channels/src/components/localized_placeholder_textarea.tsx
new file mode 100644
index 0000000000..6cc446c2e3
--- /dev/null
+++ b/webapp/channels/src/components/localized_placeholder_textarea.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl, type MessageDescriptor} from 'react-intl';
+
+type Props = {
+    placeholder: MessageDescriptor;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'>;
+
+const LocalizedPlaceholderTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({placeholder, ...otherProps}, ref) => {
+    const intl = useIntl();
+
+    return (
+        <textarea
+            ref={ref}
+            placeholder={intl.formatMessage(placeholder)}
+            {...otherProps}
+        />
+    );
+});
+
+LocalizedPlaceholderTextarea.displayName = 'LocalizedPlaceholderTextarea';
+
+export default LocalizedPlaceholderTextarea;
diff --git a/webapp/channels/src/components/mfa/setup/setup.tsx b/webapp/channels/src/components/mfa/setup/setup.tsx
index d448d5807a..5d209e8e91 100644
--- a/webapp/channels/src/components/mfa/setup/setup.tsx
+++ b/webapp/channels/src/components/mfa/setup/setup.tsx
@@ -2,13 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
 import ExternalLink from 'components/external_link';
-
-import * as Utils from 'utils/utils';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 
 type MFAControllerState = {
     enforceMultifactorAuthentication: boolean;
@@ -20,7 +19,6 @@ type Props = {
      * Object containing enforceMultifactorAuthentication
      */
     state: MFAControllerState;
-    intl: IntlShape;
 
     /*
      * Function that updates parent component with state props
@@ -55,17 +53,21 @@ type Props = {
 type State = {
     secret: string;
     qrCode: string;
-    error?: any | null;
+    error: React.ReactNode;
     serverError?: string;
 }
 
-class Setup extends React.PureComponent<Props, State> {
+export default class Setup extends React.PureComponent<Props, State> {
     private input: React.RefObject<HTMLInputElement>;
 
     public constructor(props: Props) {
         super(props);
 
-        this.state = {secret: '', qrCode: ''};
+        this.state = {
+            error: undefined,
+            secret: '',
+            qrCode: '',
+        };
 
         this.input = React.createRef();
     }
@@ -96,7 +98,14 @@ class Setup extends React.PureComponent<Props, State> {
         e.preventDefault();
         const code = this.input?.current?.value.replace(/\s/g, '');
         if (!code || code.length === 0) {
-            this.setState({error: Utils.localizeMessage({id: 'mfa.setup.codeError', defaultMessage: 'Please enter the code from Google Authenticator.'})});
+            this.setState({
+                error: (
+                    <FormattedMessage
+                        id='mfa.setup.codeError'
+                        defaultMessage='Please enter the code from Google Authenticator.'
+                    />
+                ),
+            });
             return;
         }
 
@@ -106,7 +115,12 @@ class Setup extends React.PureComponent<Props, State> {
             if (error) {
                 if (error.server_error_id === 'ent.mfa.activate.authenticate.app_error') {
                     this.setState({
-                        error: Utils.localizeMessage({id: 'mfa.setup.badCode', defaultMessage: 'Invalid code. If this issue persists, contact your System Administrator.'}),
+                        error: (
+                            <FormattedMessage
+                                id='mfa.setup.badCode'
+                                defaultMessage='Invalid code. If this issue persists, contact your System Administrator.'
+                            />
+                        ),
                     });
                 } else {
                     this.setState({
@@ -217,10 +231,10 @@ class Setup extends React.PureComponent<Props, State> {
                         />
                     </p>
                     <p>
-                        <input
+                        <LocalizedPlaceholderInput
                             ref={this.input}
                             className='form-control'
-                            placeholder={this.props.intl.formatMessage({id: 'mfa.setup.code', defaultMessage: 'MFA Code'})}
+                            placeholder={defineMessage({id: 'mfa.setup.code', defaultMessage: 'MFA Code'})}
                             autoFocus={true}
                         />
                     </p>
@@ -243,5 +257,3 @@ class Setup extends React.PureComponent<Props, State> {
 const style = {
     qrCode: {maxHeight: 170},
 };
-
-export default injectIntl(Setup);
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index fd09244b83..318d190690 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import type {ReactNode} from 'react';
-import type {IntlShape} from 'react-intl';
+import type {IntlShape, MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
@@ -15,7 +15,8 @@ import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_ic
 import Avatar from 'components/widgets/users/avatar';
 
 import {Constants, A11yCustomEventTypes} from 'utils/constants';
-import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
+import {formatAsComponent, formatAsString} from 'utils/i18n';
+import {imageURLForUser, getDisplayName} from 'utils/utils';
 
 import MultiSelectList from './multiselect_list';
 
@@ -32,9 +33,9 @@ export type Props<T extends Value> = {
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
-    backButtonText?: string;
-    buttonSubmitLoadingText?: ReactNode;
-    buttonSubmitText?: ReactNode;
+    backButtonText?: string | MessageDescriptor;
+    buttonSubmitLoadingText?: ReactNode | MessageDescriptor;
+    buttonSubmitText?: ReactNode | MessageDescriptor;
     handleAdd: (value: T) => void;
     handleDelete: (values: T[]) => void;
     handleInput: (input: string, multiselect: MultiSelect<T>) => void;
@@ -45,7 +46,7 @@ export type Props<T extends Value> = {
     saveButtonPosition?: string;
     maxValues?: number;
     noteText?: ReactNode;
-    numRemainingText?: ReactNode;
+    numRemainingText?: ReactNode | MessageDescriptor;
     optionRenderer: (
         option: T,
         isSelected: boolean,
@@ -55,7 +56,7 @@ export type Props<T extends Value> = {
     selectedItemRef?: React.RefObject<HTMLDivElement>;
     options: T[];
     perPage: number;
-    placeholderText?: string;
+    placeholderText?: string | MessageDescriptor;
     saving?: boolean;
     submitImmediatelyOn?: (value: T) => boolean;
     totalCount?: number;
@@ -298,7 +299,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         let numRemainingText;
         if (this.props.numRemainingText) {
-            numRemainingText = this.props.numRemainingText;
+            numRemainingText = formatAsComponent(this.props.numRemainingText);
         } else if (this.props.maxValues != null && this.props.maxValues !== undefined) {
             numRemainingText = (
                 <FormattedMessage
@@ -314,7 +315,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         let buttonSubmitText: ReactNode;
         if (this.props.buttonSubmitText) {
-            buttonSubmitText = this.props.buttonSubmitText;
+            buttonSubmitText = formatAsComponent(this.props.buttonSubmitText);
         } else if (this.props.maxValues != null) {
             buttonSubmitText = (
                 <FormattedMessage
@@ -324,6 +325,18 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
             );
         }
 
+        let backButtonText: ReactNode;
+        if (this.props.backButtonText) {
+            backButtonText = formatAsComponent(this.props.backButtonText);
+        } else {
+            backButtonText = (
+                <FormattedMessage
+                    id='multiselect.backButton'
+                    defaultMessage='Back'
+                />
+            );
+        }
+
         let optionsToDisplay = [];
         let nextButton;
         let previousButton;
@@ -472,11 +485,11 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 onChange={this.onChange}
                                 value={this.props.values}
                                 formatOptionLabel={this.props.valueWithImage ? this.formatOptionLabel : undefined}
-                                placeholder={this.props.placeholderText}
+                                placeholder={formatAsString(this.props.intl.formatMessage, this.props.placeholderText)}
                                 inputValue={this.state.input}
                                 getOptionValue={(option: Value) => option.id}
                                 getOptionLabel={this.props.ariaLabelRenderer}
-                                aria-label={this.props.placeholderText}
+                                aria-label={formatAsString(this.props.intl.formatMessage, this.props.placeholderText)}
                                 className={this.state.a11yActive ? 'multi-select__focused' : ''}
                                 classNamePrefix='react-select-auto react-select'
                             />
@@ -487,7 +500,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                     disabled={this.props.saving}
                                     onClick={this.handleOnClick}
                                     defaultMessage={buttonSubmitText}
-                                    savingMessage={this.props.buttonSubmitLoadingText}
+                                    savingMessage={formatAsComponent(this.props.buttonSubmitLoadingText)}
                                 />
                             }
                         </div>
@@ -526,7 +539,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 }}
                                 className={classNames('btn btn-tertiary', this.props.backButtonClass)}
                             >
-                                {this.props.backButtonText || localizeMessage({id: 'multiselect.backButton', defaultMessage: 'Back'})}
+                                {backButtonText}
                             </button>
                         }
                         <SaveButton
@@ -535,7 +548,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             disabled={this.props.saving || !this.props.savingEnabled}
                             onClick={this.handleOnClick}
                             defaultMessage={buttonSubmitText}
-                            savingMessage={this.props.buttonSubmitLoadingText}
+                            savingMessage={formatAsComponent(this.props.buttonSubmitLoadingText)}
                         />
                     </div>
                 }
diff --git a/webapp/channels/src/components/onboarding_tasklist/__snapshots__/onboarding_tasklist_completed.test.tsx.snap b/webapp/channels/src/components/onboarding_tasklist/__snapshots__/onboarding_tasklist_completed.test.tsx.snap
index 66d19fdc96..233094db0c 100644
--- a/webapp/channels/src/components/onboarding_tasklist/__snapshots__/onboarding_tasklist_completed.test.tsx.snap
+++ b/webapp/channels/src/components/onboarding_tasklist/__snapshots__/onboarding_tasklist_completed.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`components/onboarding_tasklist/onboarding_tasklist_completed.tsx should
         />
       </span>
       <StartTrialBtn
-        message="Start free 30-day trial"
         onClick={[MockFunction]}
         telemetryId="start_trial_from_onboarding_completed_task"
       />
diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx
index c85c530761..7ed5c0ab68 100644
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 import {CSSTransition} from 'react-transition-group';
 import styled from 'styled-components';
@@ -150,8 +150,6 @@ const Completed = (props: Props): JSX.Element => {
     // if Cloud, don't show
     const showStartTrialBtn = selfHostedTrialCondition && !isCloud;
 
-    const {formatMessage} = useIntl();
-
     return (
         <>
             <CSSTransition
@@ -190,7 +188,6 @@ const Completed = (props: Props): JSX.Element => {
                                 />
                             </span>
                             <StartTrialBtn
-                                message={formatMessage({id: 'start_trial.modal_btn.start_free_trial', defaultMessage: 'Start free 30-day trial'})}
                                 telemetryId='start_trial_from_onboarding_completed_task'
                                 onClick={dismissAction}
                             />
diff --git a/webapp/channels/src/components/password_reset_send_link/__snapshots__/password_reset_send_link.test.tsx.snap b/webapp/channels/src/components/password_reset_send_link/__snapshots__/password_reset_send_link.test.tsx.snap
index c19deb3212..4425152bfc 100644
--- a/webapp/channels/src/components/password_reset_send_link/__snapshots__/password_reset_send_link.test.tsx.snap
+++ b/webapp/channels/src/components/password_reset_send_link/__snapshots__/password_reset_send_link.test.tsx.snap
@@ -28,11 +28,17 @@ exports[`components/PasswordResetSendLink should match snapshot 1`] = `
         <div
           className="form-group"
         >
-          <input
+          <LocalizedPlaceholderInput
             autoFocus={true}
             className="form-control"
             id="passwordResetEmailInput"
             name="email"
+            placeholder={
+              Object {
+                "defaultMessage": "Email",
+                "id": "password_send.email",
+              }
+            }
             spellCheck="false"
             type="email"
           />
diff --git a/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.test.tsx b/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.test.tsx
index 8c947a3da2..54d3fb5df9 100644
--- a/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.test.tsx
+++ b/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.test.tsx
@@ -5,18 +5,15 @@ import {shallow} from 'enzyme';
 import React from 'react';
 import {MemoryRouter} from 'react-router-dom';
 
-import {mountWithIntl, type MockIntl} from 'tests/helpers/intl-test-helper';
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 
-import {PasswordResetSendLink} from './password_reset_send_link';
+import PasswordResetSendLink from './password_reset_send_link';
 
 describe('components/PasswordResetSendLink', () => {
     const baseProps = {
         actions: {
             sendPasswordResetEmail: jest.fn().mockResolvedValue({data: true}),
         },
-        intl: {
-            formatMessage: jest.fn(),
-        } as MockIntl,
     };
 
     it('should match snapshot', () => {
diff --git a/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.tsx b/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.tsx
index ef557132ae..6c90939fc2 100644
--- a/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.tsx
+++ b/webapp/channels/src/components/password_reset_send_link/password_reset_send_link.tsx
@@ -2,18 +2,18 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import BackButton from 'components/common/back_button';
+import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 
 export interface Props {
     actions: {
         sendPasswordResetEmail: (email: string) => Promise<ActionResult>;
     };
-    intl: IntlShape;
 }
 
 interface State {
@@ -21,7 +21,7 @@ interface State {
     updateText: React.ReactNode;
 }
 
-export class PasswordResetSendLink extends React.PureComponent<Props, State> {
+export default class PasswordResetSendLink extends React.PureComponent<Props, State> {
     state = {
         error: null,
         updateText: null,
@@ -120,12 +120,12 @@ export class PasswordResetSendLink extends React.PureComponent<Props, State> {
                                 />
                             </p>
                             <div className={formClass}>
-                                <input
+                                <LocalizedPlaceholderInput
                                     id='passwordResetEmailInput'
                                     type='email'
                                     className='form-control'
                                     name='email'
-                                    placeholder={this.props.intl.formatMessage({
+                                    placeholder={defineMessage({
                                         id: 'password_send.email',
                                         defaultMessage: 'Email',
                                     })}
@@ -152,5 +152,3 @@ export class PasswordResetSendLink extends React.PureComponent<Props, State> {
         );
     }
 }
-
-export default injectIntl(PasswordResetSendLink);
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
index 2ec23610e1..462a26a6a2 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
@@ -17,7 +17,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render 1`] = `
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -89,7 +94,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with empty
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -129,7 +139,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with icon 1
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -170,7 +185,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no hom
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -208,7 +228,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no plu
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -246,7 +271,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with one la
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -294,7 +324,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with server
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Try Again"
@@ -334,7 +369,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with two la
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -387,7 +427,12 @@ exports[`components/MarketplaceItemApp MarketplaceItem when installing 1`] = `
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/marketplace_item_app.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/marketplace_item_app.tsx
index c310e95376..5cd2e29b59 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/marketplace_item_app.tsx
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/marketplace_item_app.tsx
@@ -2,14 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {MarketplaceLabel} from '@mattermost/types/marketplace';
 
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
-import {localizeMessage} from 'utils/utils';
-
 import MarketplaceItem from '../marketplace_item';
 
 export type MarketplaceItemAppProps = {
@@ -86,7 +84,7 @@ export default class MarketplaceItemApp extends React.PureComponent <Marketplace
             >
                 <LoadingWrapper
                     loading={this.props.installing}
-                    text={localizeMessage({id: 'marketplace_modal.installing', defaultMessage: 'Installing...'})}
+                    text={defineMessage({id: 'marketplace_modal.installing', defaultMessage: 'Installing...'})}
                 >
                     {actionButton}
                 </LoadingWrapper>
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
index 43a5deedff..74a9cc8591 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
@@ -17,7 +17,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render 1`] = `
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -143,7 +148,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with emp
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -208,7 +218,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -271,7 +286,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -334,7 +354,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -396,7 +421,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with one
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -469,7 +499,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with plu
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
@@ -546,7 +581,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with ser
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Try Again"
@@ -611,7 +651,12 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with two
       >
         <Memo(LoadingWrapper)
           loading={false}
-          text="Installing..."
+          text={
+            Object {
+              "defaultMessage": "Installing...",
+              "id": "marketplace_modal.installing",
+            }
+          }
         >
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Install"
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/marketplace_item_plugin.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/marketplace_item_plugin.tsx
index 54cfdd7810..1fc5779bdb 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/marketplace_item_plugin.tsx
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/marketplace_item_plugin.tsx
@@ -3,7 +3,7 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 import semver from 'semver';
 
@@ -15,8 +15,6 @@ import ExternalLink from 'components/external_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
-import {localizeMessage} from 'utils/utils';
-
 import MarketplaceItem from '../marketplace_item';
 
 type UpdateVersionProps = {
@@ -328,7 +326,7 @@ export default class MarketplaceItemPlugin extends React.PureComponent <Marketpl
             >
                 <LoadingWrapper
                     loading={this.props.installing}
-                    text={localizeMessage({id: 'marketplace_modal.installing', defaultMessage: 'Installing...'})}
+                    text={defineMessage({id: 'marketplace_modal.installing', defaultMessage: 'Installing...'})}
                 >
                     {actionButton}
                 </LoadingWrapper>
diff --git a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
index feaaa4c260..6ce6b94a37 100644
--- a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
@@ -50,7 +50,10 @@ exports[`components/post_view/ShowMore should match snapshot, PostAttachment on
         <span
           className="fa fa-angle-down"
         />
-        Show more
+        <MemoizedFormattedMessage
+          defaultMessage="Show more"
+          id="post_info.message.show_more"
+        />
       </button>
       <div
         className="post-collapse__show-more-line"
@@ -89,7 +92,10 @@ exports[`components/post_view/ShowMore should match snapshot, PostAttachment on
         <span
           className="fa fa-angle-up"
         />
-        Show less
+        <MemoizedFormattedMessage
+          defaultMessage="Show less"
+          id="post_info.message.show_less"
+        />
       </button>
       <div
         className="post-collapse__show-more-line"
@@ -128,7 +134,10 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
         <span
           className="fa fa-angle-down"
         />
-        Show more
+        <MemoizedFormattedMessage
+          defaultMessage="Show more"
+          id="post_info.message.show_more"
+        />
       </button>
       <div
         className="post-collapse__show-more-line"
@@ -167,7 +176,10 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
         <span
           className="fa fa-angle-up"
         />
-        Show less
+        <MemoizedFormattedMessage
+          defaultMessage="Show less"
+          id="post_info.message.show_less"
+        />
       </button>
       <div
         className="post-collapse__show-more-line"
@@ -206,7 +218,10 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
         <span
           className="fa fa-angle-up"
         />
-        Show less
+        <MemoizedFormattedMessage
+          defaultMessage="Show less"
+          id="post_info.message.show_less"
+        />
       </button>
       <div
         className="post-collapse__show-more-line"
diff --git a/webapp/channels/src/components/post_view/show_more/show_more.tsx b/webapp/channels/src/components/post_view/show_more/show_more.tsx
index 2fc1368886..ed147887f2 100644
--- a/webapp/channels/src/components/post_view/show_more/show_more.tsx
+++ b/webapp/channels/src/components/post_view/show_more/show_more.tsx
@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-
-import {localizeMessage} from 'utils/utils';
+import {FormattedMessage} from 'react-intl';
 
 export type AttachmentTextOverflowType = 'ellipsis';
 
@@ -132,10 +131,20 @@ export default class ShowMore extends React.PureComponent<Props, State> {
             }
 
             let showIcon = 'fa fa-angle-up';
-            let showText = localizeMessage({id: 'post_info.message.show_less', defaultMessage: 'Show less'});
+            let showText = (
+                <FormattedMessage
+                    id='post_info.message.show_less'
+                    defaultMessage='Show less'
+                />
+            );
             if (isCollapsed) {
                 showIcon = 'fa fa-angle-down';
-                showText = localizeMessage({id: 'post_info.message.show_more', defaultMessage: 'Show more'});
+                showText = (
+                    <FormattedMessage
+                        id='post_info.message.show_more'
+                        defaultMessage='Show more'
+                    />
+                );
             }
             switch (overflowType) {
             case 'ellipsis':
diff --git a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
index 3dcba645ef..20d31e0f8a 100644
--- a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
+++ b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
@@ -129,7 +129,6 @@ function SelfHostedContent(props: ContentProps) {
     const trialButton = () => {
         return (
             <StartTrialBtn
-                message={formatMessage({id: 'pricing_modal.btn.tryDays', defaultMessage: 'Try free for {days} days'}, {days: '30'})}
                 telemetryId='start_trial_from_self_hosted_pricing_modal'
                 renderAsButton={true}
                 disabled={isSelfHostedEnterpriseTrial}
diff --git a/webapp/channels/src/components/search_results/search_results.tsx b/webapp/channels/src/components/search_results/search_results.tsx
index d6ec67e40e..5bbe500fae 100644
--- a/webapp/channels/src/components/search_results/search_results.tsx
+++ b/webapp/channels/src/components/search_results/search_results.tsx
@@ -20,11 +20,10 @@ import NoResultsIndicator from 'components/no_results_indicator/no_results_indic
 import {NoResultsVariant} from 'components/no_results_indicator/types';
 import SearchHint from 'components/search_hint/search_hint';
 import SearchResultsHeader from 'components/search_results_header';
-import LoadingSpinner from 'components/widgets/loading/loading_wrapper';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import {searchHintOptions, DataSearchTypes} from 'utils/constants';
 import {isFileAttachmentsEnabled} from 'utils/file_utils';
-import * as Utils from 'utils/utils';
 
 import FilesFilterMenu from './files_filter_menu';
 import MessageOrFileSelector from './messages_or_files_selector';
@@ -267,7 +266,7 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
         contentItems = (
             <div className='sidebar--right__subheader a11y__section'>
                 <div className='sidebar--right__loading'>
-                    <LoadingSpinner text={Utils.localizeMessage({id: 'search_header.loading', defaultMessage: 'Searching'})}/>
+                    <LoadingWrapper text={defineMessage({id: 'search_header.loading', defaultMessage: 'Searching'})}/>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/searchable_channel_list.test.tsx b/webapp/channels/src/components/searchable_channel_list.test.tsx
index ec3ea1c79e..a1c9e3635a 100644
--- a/webapp/channels/src/components/searchable_channel_list.test.tsx
+++ b/webapp/channels/src/components/searchable_channel_list.test.tsx
@@ -29,7 +29,7 @@ describe('components/SearchableChannelList', () => {
         noResultsText: <>{'no channel found'}</>,
         filter: Filter.All,
         intl: {
-            formatMessage: jest.fn(),
+            formatMessage: ({defaultMessage}) => defaultMessage,
         } as MockIntl,
     };
 
diff --git a/webapp/channels/src/components/searchable_channel_list.tsx b/webapp/channels/src/components/searchable_channel_list.tsx
index 30c4e19381..33820d251c 100644
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/webapp/channels/src/components/searchable_channel_list.tsx
@@ -23,7 +23,6 @@ import {isArchivedChannel} from 'utils/channel_utils';
 import Constants, {ModalIdentifiers} from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';
 import * as UserAgent from 'utils/user_agent';
-import {localizeMessage, localizeAndFormatMessage} from 'utils/utils';
 
 import type {FilterType} from './browse_channels/browse_channels';
 import {Filter} from './browse_channels/browse_channels';
@@ -142,7 +141,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
         const membershipIndicator = this.isMemberOfChannel(channel.id) ? (
             <div
                 id='membershipIndicatorContainer'
-                aria-label={localizeMessage({id: 'more_channels.membership_indicator', defaultMessage: 'Membership Indicator: Joined'})}
+                aria-label={this.props.intl.formatMessage({id: 'more_channels.membership_indicator', defaultMessage: 'Membership Indicator: Joined'})}
             >
                 <CheckIcon size={14}/>
                 <FormattedMessage
@@ -152,7 +151,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             </div>
         ) : null;
 
-        const channelPurposeContainerAriaLabel = localizeAndFormatMessage(
+        const channelPurposeContainerAriaLabel = this.props.intl.formatMessage(
             messages.channelPurpose,
             {memberCount, channelPurpose: channel.purpose || ''},
         );
@@ -183,11 +182,11 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                 className={joinViewChannelButtonClass}
                 disabled={Boolean(this.state.joiningChannel)}
                 tabIndex={-1}
-                aria-label={this.isMemberOfChannel(channel.id) ? localizeMessage({id: 'more_channels.view', defaultMessage: 'View'}) : localizeMessage({id: 'joinChannel.JoinButton', defaultMessage: 'Join'})}
+                aria-label={this.isMemberOfChannel(channel.id) ? this.props.intl.formatMessage({id: 'more_channels.view', defaultMessage: 'View'}) : this.props.intl.formatMessage({id: 'joinChannel.JoinButton', defaultMessage: 'Join'})}
             >
                 <LoadingWrapper
                     loading={this.state.joiningChannel === channel.id}
-                    text={localizeMessage({id: 'joinChannel.joiningButton', defaultMessage: 'Joining...'})}
+                    text={messages.joiningButton}
                 >
                     <FormattedMessage
                         id={this.isMemberOfChannel(channel.id) ? 'more_channels.view' : 'joinChannel.JoinButton'}
@@ -356,7 +355,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             listContent = (
                 <div
                     className='no-channel-message'
-                    aria-label={this.state.channelSearchValue.length > 0 ? localizeAndFormatMessage(messages.noMore, {text: this.state.channelSearchValue}) : localizeMessage({id: 'widgets.channels_input.empty', defaultMessage: 'No channels found'})
+                    aria-label={this.state.channelSearchValue.length > 0 ? this.props.intl.formatMessage(messages.noMore, {text: this.state.channelSearchValue}) : this.props.intl.formatMessage({id: 'widgets.channels_input.empty', defaultMessage: 'No channels found'})
                     }
                 >
                     <MagnifyingGlassSVG/>
@@ -378,7 +377,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                         className='btn btn-sm btn-tertiary filter-control filter-control__next'
                         onClick={this.nextPage}
                         disabled={this.state.nextDisabled}
-                        aria-label={localizeMessage({id: 'more_channels.next', defaultMessage: 'Next'})}
+                        aria-label={this.props.intl.formatMessage({id: 'more_channels.next', defaultMessage: 'Next'})}
                     >
                         <FormattedMessage
                             id='more_channels.next'
@@ -393,7 +392,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     <button
                         className='btn btn-sm btn-tertiary filter-control filter-control__prev'
                         onClick={this.previousPage}
-                        aria-label={localizeMessage({id: 'more_channels.prev', defaultMessage: 'Previous'})}
+                        aria-label={this.props.intl.formatMessage({id: 'more_channels.prev', defaultMessage: 'Previous'})}
                     >
                         <FormattedMessage
                             id='more_channels.prev'
@@ -421,7 +420,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     clearable={true}
                     onClear={this.handleClear}
                     value={this.state.channelSearchValue}
-                    aria-label={localizeMessage({id: 'filtered_channels_list.search', defaultMessage: 'Search Channels'})}
+                    aria-label={this.props.intl.formatMessage({id: 'filtered_channels_list.search', defaultMessage: 'Search Channels'})}
                 />
             </div>
         );
@@ -445,7 +444,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     />
                 }
                 trailingElements={this.props.filter === Filter.All ? checkIcon : null}
-                aria-label={localizeMessage({id: 'suggestion.all', defaultMessage: 'All channel types'})}
+                aria-label={this.props.intl.formatMessage({id: 'suggestion.all', defaultMessage: 'All channel types'})}
             />,
             <Menu.Item
                 key='channelsMoreDropdownPublic'
@@ -459,7 +458,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     />
                 }
                 trailingElements={this.props.filter === Filter.Public ? checkIcon : null}
-                aria-label={localizeMessage({id: 'suggestion.public', defaultMessage: 'Public channels'})}
+                aria-label={this.props.intl.formatMessage({id: 'suggestion.public', defaultMessage: 'Public channels'})}
             />,
             <Menu.Item
                 key='channelsMoreDropdownPrivate'
@@ -473,7 +472,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     />
                 }
                 trailingElements={this.props.filter === Filter.Private ? checkIcon : null}
-                aria-label={localizeMessage({id: 'suggestion.private', defaultMessage: 'Private channels'})}
+                aria-label={this.props.intl.formatMessage({id: 'suggestion.private', defaultMessage: 'Private channels'})}
             />,
         ];
 
@@ -492,7 +491,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                         />
                     }
                     trailingElements={this.props.filter === Filter.Archived ? checkIcon : null}
-                    aria-label={localizeMessage({id: 'suggestion.archive', defaultMessage: 'Archived channels'})}
+                    aria-label={this.props.intl.formatMessage({id: 'suggestion.archive', defaultMessage: 'Archived channels'})}
                 />,
             );
         }
@@ -513,7 +512,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                 }}
                 menu={{
                     id: 'browseChannelsDropdown',
-                    'aria-label': localizeMessage({id: 'more_channels.title', defaultMessage: 'Browse channels'}),
+                    'aria-label': this.props.intl.formatMessage({id: 'more_channels.title', defaultMessage: 'Browse channels'}),
                 }}
             >
                 {channelDropdownItems.map((item) => item)}
@@ -528,7 +527,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             >
                 <button
                     className={hideJoinedButtonClass}
-                    aria-label={this.props.rememberHideJoinedChannelsChecked ? localizeMessage({id: 'more_channels.hide_joined_checked', defaultMessage: 'Hide joined channels checkbox, checked'}) : localizeMessage({id: 'more_channels.hide_joined_not_checked', defaultMessage: 'Hide joined channels checkbox, not checked'})}
+                    aria-label={this.props.rememberHideJoinedChannelsChecked ? this.props.intl.formatMessage({id: 'more_channels.hide_joined_checked', defaultMessage: 'Hide joined channels checkbox, checked'}) : this.props.intl.formatMessage({id: 'more_channels.hide_joined_not_checked', defaultMessage: 'Hide joined channels checkbox, not checked'})}
                 >
                     {this.props.rememberHideJoinedChannelsChecked ? <CheckboxCheckedIcon/> : null}
                 </button>
@@ -541,13 +540,13 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
 
         let channelCountLabel;
         if (channels.length === 0) {
-            channelCountLabel = localizeMessage({id: 'more_channels.count_zero', defaultMessage: '0 Results'});
+            channelCountLabel = this.props.intl.formatMessage({id: 'more_channels.count_zero', defaultMessage: '0 Results'});
         } else if (channels.length === 1) {
-            channelCountLabel = localizeMessage({id: 'more_channels.count_one', defaultMessage: '1 Result'});
+            channelCountLabel = this.props.intl.formatMessage({id: 'more_channels.count_one', defaultMessage: '1 Result'});
         } else if (channels.length > 1) {
-            channelCountLabel = localizeAndFormatMessage(messages.channelCount, {count: channels.length});
+            channelCountLabel = this.props.intl.formatMessage(messages.channelCount, {count: channels.length});
         } else {
-            channelCountLabel = localizeMessage({id: 'more_channels.count_zero', defaultMessage: '0 Results'});
+            channelCountLabel = this.props.intl.formatMessage({id: 'more_channels.count_zero', defaultMessage: '0 Results'});
         }
 
         const dropDownContainer = (
@@ -595,6 +594,10 @@ const messages = defineMessages({
         id: 'more_channels.channel_purpose',
         defaultMessage: 'Channel Information: Membership Indicator: Joined, Member count {memberCount} , Purpose: {channelPurpose}',
     },
+    joiningButton: {
+        id: 'joinChannel.joiningButton',
+        defaultMessage: 'Joining...',
+    },
     noMore: {
         id: 'more_channels.noMore',
         defaultMessage: 'No results for {text}',
diff --git a/webapp/channels/src/components/setting_picture.tsx b/webapp/channels/src/components/setting_picture.tsx
index 239f2e5066..850391803d 100644
--- a/webapp/channels/src/components/setting_picture.tsx
+++ b/webapp/channels/src/components/setting_picture.tsx
@@ -3,7 +3,7 @@
 
 import React, {Component, createRef} from 'react';
 import type {ChangeEvent, CSSProperties, MouseEvent, ReactNode, RefObject} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import FormError from 'components/form_error';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
@@ -314,7 +314,7 @@ export default class SettingPicture extends Component<Props, State> {
                     >
                         <LoadingWrapper
                             loading={this.props.loadingPicture}
-                            text={localizeMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'})}
+                            text={defineMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'})}
                         >
                             <FormattedMessage
                                 id='setting_picture.save'
diff --git a/webapp/channels/src/components/spinner_button.tsx b/webapp/channels/src/components/spinner_button.tsx
index b8daa88069..29b54f88c2 100644
--- a/webapp/channels/src/components/spinner_button.tsx
+++ b/webapp/channels/src/components/spinner_button.tsx
@@ -3,13 +3,14 @@
 
 import React from 'react';
 import type {ReactNode} from 'react';
+import type {MessageDescriptor} from 'react-intl';
 
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: ReactNode;
     spinning: boolean;
-    spinningText: ReactNode;
+    spinningText: ReactNode | MessageDescriptor;
 }
 
 const SpinnerButton = ({
diff --git a/webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.tsx b/webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.tsx
index 4bd0f982a4..19f9700233 100644
--- a/webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.tsx
+++ b/webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.tsx
@@ -111,9 +111,19 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
     renderRow = (item: Group, listModal: ListModal) => {
         let title;
         if (item.scheme_admin) {
-            title = Utils.localizeMessage({id: 'team_members_dropdown.teamAdmins', defaultMessage: 'Team Admins'});
+            title = (
+                <FormattedMessage
+                    id='team_members_dropdown.teamAdmins'
+                    defaultMessage='Team Admins'
+                />
+            );
         } else {
-            title = Utils.localizeMessage({id: 'team_members_dropdown.teamMembers', defaultMessage: 'Team Members'});
+            title = (
+                <FormattedMessage
+                    id='team_members_dropdown.teamMembers'
+                    defaultMessage='Team Members'
+                />
+            );
         }
 
         return (
diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
index b2be8a6189..bcb0fb41a9 100644
--- a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
+++ b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, FormattedMessage, defineMessage} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 
@@ -16,7 +16,7 @@ import type {Value} from 'components/multiselect/multiselect';
 import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 import Constants, {ModalIdentifiers} from 'utils/constants';
-import {localizeMessage, imageURLForTeam} from 'utils/utils';
+import {imageURLForTeam} from 'utils/utils';
 
 const TEAMS_PER_PAGE = 50;
 
@@ -242,7 +242,7 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
             />
         );
 
-        const buttonSubmitText = localizeMessage({id: 'multiselect.add', defaultMessage: 'Add'});
+        const buttonSubmitText = defineMessage({id: 'multiselect.add', defaultMessage: 'Add'});
 
         let teams = [] as Team[];
         if (this.props.teams) {
@@ -312,7 +312,7 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
                         buttonSubmitText={buttonSubmitText}
                         saving={false}
                         loading={this.state.loadingTeams}
-                        placeholderText={localizeMessage({id: 'multiselect.addTeamsPlaceholder', defaultMessage: 'Search and add teams'})}
+                        placeholderText={defineMessage({id: 'multiselect.addTeamsPlaceholder', defaultMessage: 'Search and add teams'})}
                     />
                 </Modal.Body>
             </Modal>
diff --git a/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx b/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx
index 4942cec704..9f25799b4c 100644
--- a/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx
+++ b/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx
@@ -20,7 +20,6 @@ import Constants from 'utils/constants';
 import {isToday} from 'utils/datetime';
 import {isKeyPressed} from 'utils/keyboard';
 import {isIdNotPost} from 'utils/post_utils';
-import {localizeMessage} from 'utils/utils';
 
 import './toast__wrapper.scss';
 
@@ -461,7 +460,12 @@ export class ToastWrapperClass extends React.PureComponent<Props, State> {
                 width,
                 onDismiss: this.hideArchiveToast,
                 onClick: this.scrollToLatestMessages,
-                onClickMessage: localizeMessage({id: 'postlist.toast.scrollToBottom', defaultMessage: 'Jump to recents'}),
+                onClickMessage: (
+                    <FormattedMessage
+                        id='postlist.toast.scrollToBottom'
+                        defaultMessage='Jump to recents'
+                    />
+                ),
                 showActions: true,
                 extraClasses: 'toast__history',
             };
diff --git a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
index cfc9d5242d..ba69b8ac2e 100644
--- a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
@@ -107,7 +107,10 @@ exports[`component/update_user_group_modal should match snapshot 1`] = `
           className="btn btn-tertiary"
           onClick={[Function]}
         >
-          Back
+          <MemoizedFormattedMessage
+            defaultMessage="Back"
+            id="multiselect.backButton"
+          />
         </button>
         <SaveButton
           defaultMessage="Save Details"
diff --git a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
index e70c8708ab..e19168d70e 100644
--- a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
+++ b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
@@ -14,7 +14,6 @@ import Input from 'components/widgets/inputs/input/input';
 
 import Constants, {ItemStatus} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
-import * as Utils from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
 
@@ -96,7 +95,7 @@ const UpdateUserGroupModal = (props: Props) => {
         const displayName = name;
 
         if (!displayName || !displayName.trim()) {
-            setNameInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.nameIsEmpty', defaultMessage: 'Name is a required field.'}));
+            setNameInputErrorText(formatMessage({id: 'user_groups_modal.nameIsEmpty', defaultMessage: 'Name is a required field.'}));
             setSaving(false);
             return;
         }
@@ -106,20 +105,20 @@ const UpdateUserGroupModal = (props: Props) => {
         }
 
         if (newMention.length < 1) {
-            setMentionInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.mentionIsEmpty', defaultMessage: 'Mention is a required field.'}));
+            setMentionInputErrorText(formatMessage({id: 'user_groups_modal.mentionIsEmpty', defaultMessage: 'Mention is a required field.'}));
             setSaving(false);
             return;
         }
 
         if (Constants.SPECIAL_MENTIONS.includes(newMention.toLowerCase())) {
-            setMentionInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.mentionReservedWord', defaultMessage: 'Mention contains a reserved word.'}));
+            setMentionInputErrorText(formatMessage({id: 'user_groups_modal.mentionReservedWord', defaultMessage: 'Mention contains a reserved word.'}));
             setSaving(false);
             return;
         }
 
         const mentionRegEx = new RegExp(/^[a-z0-9.\-_]+$/);
         if (!mentionRegEx.test(newMention)) {
-            setMentionInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.mentionInvalidError', defaultMessage: 'Invalid character in mention.'}));
+            setMentionInputErrorText(formatMessage({id: 'user_groups_modal.mentionInvalidError', defaultMessage: 'Invalid character in mention.'}));
             setSaving(false);
             return;
         }
@@ -131,10 +130,10 @@ const UpdateUserGroupModal = (props: Props) => {
         const data = await props.actions.patchGroup(props.groupId, group);
         if (data?.error) {
             if (data.error?.server_error_id === 'app.custom_group.unique_name') {
-                setMentionInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.mentionNotUnique', defaultMessage: 'Mention needs to be unique.'}));
+                setMentionInputErrorText(formatMessage({id: 'user_groups_modal.mentionNotUnique', defaultMessage: 'Mention needs to be unique.'}));
                 setSaving(false);
             } else if (data.error?.server_error_id === 'app.group.username_conflict') {
-                setMentionInputErrorText(Utils.localizeMessage({id: 'user_groups_modal.mentionUsernameConflict', defaultMessage: 'A username already exists with this name. Mention must be unique.'}));
+                setMentionInputErrorText(formatMessage({id: 'user_groups_modal.mentionUsernameConflict', defaultMessage: 'A username already exists with this name. Mention must be unique.'}));
                 setSaving(false);
             } else {
                 setShowUnknownError(true);
@@ -181,7 +180,7 @@ const UpdateUserGroupModal = (props: Props) => {
                     <div className='group-name-input-wrapper'>
                         <Input
                             type='text'
-                            placeholder={Utils.localizeMessage({id: 'user_groups_modal.name', defaultMessage: 'Name'})}
+                            placeholder={formatMessage({id: 'user_groups_modal.name', defaultMessage: 'Name'})}
                             onChange={updateNameState}
                             value={name}
                             data-testid='nameInput'
@@ -192,7 +191,7 @@ const UpdateUserGroupModal = (props: Props) => {
                     <div className='group-mention-input-wrapper'>
                         <Input
                             type='text'
-                            placeholder={Utils.localizeMessage({id: 'user_groups_modal.mention', defaultMessage: 'Mention'})}
+                            placeholder={formatMessage({id: 'user_groups_modal.mention', defaultMessage: 'Mention'})}
                             onChange={updateMentionState}
                             value={mention}
                             data-testid='nameInput'
@@ -217,7 +216,10 @@ const UpdateUserGroupModal = (props: Props) => {
                             }}
                             className='btn btn-tertiary'
                         >
-                            {Utils.localizeMessage({id: 'multiselect.backButton', defaultMessage: 'Back'})}
+                            <FormattedMessage
+                                id='multiselect.backButton'
+                                defaultMessage='Back'
+                            />
                         </button>
                         <SaveButton
                             id='saveItems'
@@ -227,8 +229,8 @@ const UpdateUserGroupModal = (props: Props) => {
                                 e.preventDefault();
                                 patchGroup();
                             }}
-                            defaultMessage={Utils.localizeMessage({id: 'multiselect.saveDetailsButton', defaultMessage: 'Save Details'})}
-                            savingMessage={Utils.localizeMessage({id: 'multiselect.savingDetailsButton', defaultMessage: 'Saving...'})}
+                            defaultMessage={formatMessage({id: 'multiselect.saveDetailsButton', defaultMessage: 'Save Details'})}
+                            savingMessage={formatMessage({id: 'multiselect.savingDetailsButton', defaultMessage: 'Saving...'})}
                         />
                     </div>
                 </div>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
index 83f5b3125a..04249dd22c 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useState, useRef} from 'react';
-import {useIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {useSelector} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -239,7 +239,12 @@ const GroupMemberList = (props: Props) => {
         } else if (searchState === Load.FAILED) {
             return (
                 <LoadFailedItem>
-                    <span>{Utils.localizeMessage({id: 'group_member_list.searchError', defaultMessage: 'There was a problem getting results. Clear your search term and try again.'})}</span>
+                    <span>
+                        <FormattedMessage
+                            id='group_member_list.searchError'
+                            defaultMessage='There was a problem getting results. Clear your search term and try again.'
+                        />
+                    </span>
                 </LoadFailedItem>
             );
         } else if (isSearching && members.length === 0) {
@@ -255,12 +260,18 @@ const GroupMemberList = (props: Props) => {
             return (
                 <LoadFailedItem>
                     <span>
-                        {Utils.localizeMessage({id: 'group_member_list.loadError', defaultMessage: 'Oops! Something went wrong while loading this group.'})}
+                        <FormattedMessage
+                            id='group_member_list.loadError'
+                            defaultMessage='Oops! Something went wrong while loading this group.'
+                        />
                         {' '}
                         <RetryButton
                             onClick={loadMoreItems}
                         >
-                            {Utils.localizeMessage({id: 'group_member_list.retryLoadButton', defaultMessage: 'Retry'})}
+                            <FormattedMessage
+                                id='group_member_list.retryLoadButton'
+                                defaultMessage='Retry'
+                            />
                         </RetryButton>
                     </span>
                 </LoadFailedItem>
diff --git a/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap b/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
index 5aa8f70708..1db2470597 100644
--- a/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
+++ b/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
@@ -51,7 +51,12 @@ exports[`component/user_groups_modal should match snapshot with groups 1`] = `
           />
         }
         onChange={[Function]}
-        placeholder="Search Groups"
+        placeholder={
+          Object {
+            "defaultMessage": "Search Groups",
+            "id": "user_groups_modal.searchGroups",
+          }
+        }
         type="text"
         value=""
       />
@@ -172,7 +177,12 @@ exports[`component/user_groups_modal should match snapshot without groups 1`] =
           />
         }
         onChange={[Function]}
-        placeholder="Search Groups"
+        placeholder={
+          Object {
+            "defaultMessage": "Search Groups",
+            "id": "user_groups_modal.searchGroups",
+          }
+        }
         type="text"
         value=""
       />
diff --git a/webapp/channels/src/components/user_groups_modal/ad_ldap_upsell_banner.tsx b/webapp/channels/src/components/user_groups_modal/ad_ldap_upsell_banner.tsx
index f212e50b0b..6e3ded85d5 100644
--- a/webapp/channels/src/components/user_groups_modal/ad_ldap_upsell_banner.tsx
+++ b/webapp/channels/src/components/user_groups_modal/ad_ldap_upsell_banner.tsx
@@ -91,7 +91,6 @@ function ADLDAPUpsellBanner() {
     let btn: JSX.Element | null = (
         <StartTrialBtn
             btnClass='ad-ldap-banner-btn'
-            message={formatMessage({id: 'adldap_upsell_banner.trial_btn', defaultMessage: 'Start trial'})}
             telemetryId={'start_self-hosted_trial_from_adldap_upsell_banner'}
             renderAsButton={true}
             onClick={() => setConfirmed(true)}
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx b/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
index 387f3adf96..a974692479 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
+++ b/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
@@ -3,6 +3,7 @@
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {Modal} from 'react-bootstrap';
+import {defineMessage} from 'react-intl';
 
 import type {GetGroupsForUserParams, GetGroupsParams, Group, GroupSearchParams} from '@mattermost/types/groups';
 
@@ -14,7 +15,6 @@ import {NoResultsVariant} from 'components/no_results_indicator/types';
 import Input from 'components/widgets/inputs/input/input';
 
 import Constants from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 import ADLDAPUpsellBanner from './ad_ldap_upsell_banner';
 import {usePagingMeta} from './hooks';
@@ -198,7 +198,7 @@ const UserGroupsModal = (props: Props) => {
                 <div className='user-groups-search'>
                     <Input
                         type='text'
-                        placeholder={Utils.localizeMessage({id: 'user_groups_modal.searchGroups', defaultMessage: 'Search Groups'})}
+                        placeholder={defineMessage({id: 'user_groups_modal.searchGroups', defaultMessage: 'Search Groups'})}
                         onChange={handleSearch}
                         value={props.searchTerm}
                         data-testid='searchInput'
diff --git a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx b/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
index ff562f78de..942311f943 100644
--- a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
+++ b/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
@@ -4,7 +4,7 @@
 /* eslint-disable max-lines */
 
 import React, {PureComponent} from 'react';
-import {defineMessages, FormattedDate, FormattedMessage, injectIntl} from 'react-intl';
+import {defineMessage, defineMessages, FormattedDate, FormattedMessage, injectIntl} from 'react-intl';
 import type {IntlShape} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
@@ -171,7 +171,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
             <span className='resend-verification-wrapper'>
                 <LoadingWrapper
                     loading={this.state.showSpinner}
-                    text={Utils.localizeMessage({id: 'user.settings.general.sending', defaultMessage: 'Sending'})}
+                    text={defineMessage({id: 'user.settings.general.sending', defaultMessage: 'Sending'})}
                 >
                     <a
                         onClick={() => {
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
index dc03949087..36dd8dbf53 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
@@ -215,12 +215,17 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
           <div
             className="pt-2"
           >
-            <textarea
+            <LocalizedPlaceholderTextarea
               className="form-control"
               id="autoResponderMessageInput"
               maxLength={200}
               onChange={[Function]}
-              placeholder="Message"
+              placeholder={
+                Object {
+                  "defaultMessage": "Message",
+                  "id": "user.settings.notifications.autoResponderPlaceholder",
+                }
+              }
               rows={5}
               style={
                 Object {
@@ -308,12 +313,17 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               <div
                 className="pt-2"
               >
-                <textarea
+                <LocalizedPlaceholderTextarea
                   className="form-control"
                   id="autoResponderMessageInput"
                   maxLength={200}
                   onChange={[Function]}
-                  placeholder="Message"
+                  placeholder={
+                    Object {
+                      "defaultMessage": "Message",
+                      "id": "user.settings.notifications.autoResponderPlaceholder",
+                    }
+                  }
                   rows={5}
                   style={
                     Object {
@@ -321,7 +331,22 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
                     }
                   }
                   value="Hello World!"
-                />
+                >
+                  <textarea
+                    className="form-control"
+                    id="autoResponderMessageInput"
+                    maxLength={200}
+                    onChange={[Function]}
+                    placeholder="Message"
+                    rows={5}
+                    style={
+                      Object {
+                        "resize": "none",
+                      }
+                    }
+                    value="Hello World!"
+                  />
+                </LocalizedPlaceholderTextarea>
               </div>
             </div>
             <div
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.test.tsx b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.test.tsx
index c032022dfb..1c92aa642f 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.test.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.test.tsx
@@ -53,9 +53,9 @@ describe('components/user_settings/notifications/ManageAutoResponder', () => {
         );
 
         expect(wrapper.find('#autoResponderActive').exists()).toBe(true);
-        expect(wrapper.find('#autoResponderMessageInput').exists()).toBe(true);
+        expect(wrapper.find('textarea#autoResponderMessageInput').exists()).toBe(true);
 
-        wrapper.find('#autoResponderMessageInput').simulate('change');
+        wrapper.find('textarea#autoResponderMessageInput').simulate('change');
         expect(setParentState).toBeCalled();
         expect(setParentState).toBeCalledWith('autoResponderMessage', 'Hello World!');
 
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.tsx b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.tsx
index 2602737887..4fd4353837 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/manage_auto_responder.tsx
@@ -3,12 +3,11 @@
 
 import React from 'react';
 import type {ChangeEvent} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
+import LocalizedPlaceholderTextarea from 'components/localized_placeholder_textarea';
 import SettingItemMax from 'components/setting_item_max';
 
-import {localizeMessage} from 'utils/utils';
-
 const MESSAGE_MAX_LENGTH = 200;
 
 type Props = {
@@ -70,12 +69,12 @@ export default class ManageAutoResponder extends React.PureComponent<Props> {
                 key='autoResponderMessage'
             >
                 <div className='pt-2'>
-                    <textarea
+                    <LocalizedPlaceholderTextarea
                         style={{resize: 'none'}}
                         id='autoResponderMessageInput'
                         className='form-control'
                         rows={5}
-                        placeholder={localizeMessage({id: 'user.settings.notifications.autoResponderPlaceholder', defaultMessage: 'Message'})}
+                        placeholder={defineMessage({id: 'user.settings.notifications.autoResponderPlaceholder', defaultMessage: 'Message'})}
                         value={autoResponderMessage}
                         maxLength={MESSAGE_MAX_LENGTH}
                         onChange={this.onMessageChanged}
diff --git a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
index 6f22feccfd..2c10e25b40 100644
--- a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
@@ -22,7 +22,6 @@ import WarningIcon from 'components/widgets/icons/fa_warning_icon';
 import {Constants, DeveloperLinks} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
 import {isMobile} from 'utils/user_agent';
-import * as Utils from 'utils/utils';
 
 const SECTION_TOKENS = 'tokens';
 const TOKEN_CREATING = 'creating';
@@ -51,7 +50,7 @@ type State = {
     showConfirmModal: boolean;
     newToken?: UserAccessToken | null;
     tokenCreationState?: string;
-    tokenError?: string;
+    tokenError?: React.ReactNode;
     serverError?: string|null;
     saving?: boolean;
     confirmTitle?: React.ReactNode;
@@ -126,7 +125,14 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
         const description = this.newtokendescriptionRef ? this.newtokendescriptionRef.current!.value : '';
 
         if (description === '') {
-            this.setState({tokenError: Utils.localizeMessage({id: 'user.settings.tokens.nameRequired', defaultMessage: 'Please enter a description.'})});
+            this.setState({
+                tokenError: (
+                    <FormattedMessage
+                        id='user.settings.tokens.nameRequired'
+                        defaultMessage='Please enter a description.'
+                    />
+                ),
+            });
             return;
         }
 
@@ -324,11 +330,21 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
         let tokenListClass = '';
 
         if (!this.props.active) {
-            const describe = Utils.localizeMessage({id: 'user.settings.tokens.clickToEdit', defaultMessage: "Click 'Edit' to manage your personal access tokens"});
+            const describe = (
+                <FormattedMessage
+                    id='user.settings.tokens.clickToEdit'
+                    defaultMessage="Click 'Edit' to manage your personal access tokens"
+                />
+            );
 
             return (
                 <SettingItemMin
-                    title={Utils.localizeMessage({id: 'user.settings.tokens.title', defaultMessage: 'Personal Access Tokens'})}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.tokens.title'
+                            defaultMessage='Personal Access Tokens'
+                        />
+                    }
                     describe={describe}
                     section={SECTION_TOKENS}
                     updateSection={this.props.updateSection}
@@ -629,7 +645,12 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
         return (
             <div>
                 <SettingItemMax
-                    title={Utils.localizeMessage({id: 'user.settings.tokens.title', defaultMessage: 'Personal Access Tokens'})}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.tokens.title'
+                            defaultMessage='Personal Access Tokens'
+                        />
+                    }
                     inputs={inputs}
                     extraInfo={extraInfo}
                     infoPosition='top'
diff --git a/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap b/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
index 96ced89b87..3b9acae069 100644
--- a/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
@@ -63,7 +63,12 @@ exports[`component/view_user_group_modal should match snapshot 1`] = `
           />
         }
         onChange={[Function]}
-        placeholder="Search group members"
+        placeholder={
+          Object {
+            "defaultMessage": "Search group members",
+            "id": "search_bar.searchGroupMembers",
+          }
+        }
         type="text"
         value=""
       />
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
index fe7264ab2e..3960e5d5e1 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
@@ -4,7 +4,7 @@
 import React, {createRef} from 'react';
 import type {RefObject} from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {Group} from '@mattermost/types/groups';
 import {GroupSource} from '@mattermost/types/groups';
@@ -19,7 +19,6 @@ import {NoResultsVariant} from 'components/no_results_indicator/types';
 import Input from 'components/widgets/inputs/input/input';
 
 import Constants from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 import ViewUserGroupListItem from './view_user_group_list_item';
 import ViewUserGroupModalHeader from './view_user_group_modal_header';
@@ -221,7 +220,7 @@ export default class ViewUserGroupModal extends React.PureComponent<Props, State
                             <div className='user-groups-search'>
                                 <Input
                                     type='text'
-                                    placeholder={Utils.localizeMessage({id: 'search_bar.searchGroupMembers', defaultMessage: 'Search group members'})}
+                                    placeholder={defineMessage({id: 'search_bar.searchGroupMembers', defaultMessage: 'Search group members'})}
                                     onChange={this.handleSearch}
                                     value={this.props.searchTerm}
                                     data-testid='searchInput'
diff --git a/webapp/channels/src/components/widgets/inputs/dropdown_input_hybrid.tsx b/webapp/channels/src/components/widgets/inputs/dropdown_input_hybrid.tsx
index dd44c8a37d..538dc76d0c 100644
--- a/webapp/channels/src/components/widgets/inputs/dropdown_input_hybrid.tsx
+++ b/webapp/channels/src/components/widgets/inputs/dropdown_input_hybrid.tsx
@@ -4,11 +4,14 @@
 import classNames from 'classnames';
 import React, {useState, useEffect, useRef} from 'react';
 import type {CSSProperties} from 'react';
+import type {MessageDescriptor} from 'react-intl';
+import {useIntl} from 'react-intl';
 import ReactSelect, {components} from 'react-select';
 import type {Props as SelectProps, IndicatorContainerProps, ControlProps, OptionProps} from 'react-select';
 
 import 'components/widgets/inputs/input/input.scss';
 import './dropdown_input_hybrid.scss';
+import {formatAsString} from 'utils/i18n';
 
 type OptionType = {
     label: string | JSX.Element;
@@ -17,11 +20,11 @@ type OptionType = {
 
 type Props<T extends OptionType> = Omit<SelectProps<T>, 'onChange'> & {
     value: T;
-    legend?: string;
+    legend?: string | MessageDescriptor;
     error?: string;
     onDropdownChange: (value: T) => void;
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder: string;
+    placeholder: string | MessageDescriptor;
     className?: string;
     name?: string;
     exceptionToInput: string[];
@@ -102,6 +105,8 @@ const DropdownInputHybrid = <T extends OptionType = OptionType>(props: Props<T>)
         ...otherProps
     } = props;
 
+    const intl = useIntl();
+
     const containerRef = useRef<HTMLInputElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
     const [inputFocused, setInputFocused] = useState(false);
@@ -188,7 +193,7 @@ const DropdownInputHybrid = <T extends OptionType = OptionType>(props: Props<T>)
                 })}
             >
                 <legend className={classNames('Input_legend', {Input_legend___focus: showLegend})}>
-                    {showLegend ? (legend || placeholder) : null}
+                    {showLegend ? formatAsString(intl.formatMessage, legend || placeholder) : null}
                 </legend>
                 <div
                     className={classNames('Input_wrapper input_hybrid_wrapper', {showInput})}
@@ -203,7 +208,7 @@ const DropdownInputHybrid = <T extends OptionType = OptionType>(props: Props<T>)
                         type={inputType || 'text'}
                         value={inputValue}
                         onChange={onInputChange}
-                        placeholder={placeholder}
+                        placeholder={formatAsString(intl.formatMessage, placeholder)}
                         required={false}
                         className={classNames('Input form-control')}
                         ref={inputRef}
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx
index fa22c8375f..e6d271b5a5 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx
@@ -3,6 +3,7 @@
 
 import classNames from 'classnames';
 import React, {useState, useEffect} from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {useIntl} from 'react-intl';
 
 import {CloseCircleIcon} from '@mattermost/compass-icons/components';
@@ -10,6 +11,7 @@ import {CloseCircleIcon} from '@mattermost/compass-icons/components';
 import WithTooltip from 'components/with_tooltip';
 
 import {ItemStatus} from 'utils/constants';
+import {formatAsString} from 'utils/i18n';
 
 import './input.scss';
 
@@ -20,14 +22,15 @@ export enum SIZE {
 
 export type CustomMessageInputType = {type?: 'info' | 'error' | 'warning' | 'success'; value: React.ReactNode} | null;
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'placeholder'> {
     required?: boolean;
     hasError?: boolean;
     addon?: React.ReactElement;
     textPrefix?: string;
     inputPrefix?: JSX.Element;
     inputSuffix?: JSX.Element;
-    label?: string;
+    label?: string | MessageDescriptor;
+    placeholder?: MessageDescriptor | string;
     containerClassName?: string;
     wrapperClassName?: string;
     inputClassName?: string;
@@ -153,6 +156,9 @@ const Input = React.forwardRef((
     ) : null;
 
     const generateInput = () => {
+        const placeholderValue = formatAsString(formatMessage, focused ? (label && placeholder) || label : label || placeholder);
+        const ariaLabel = formatAsString(formatMessage, label || placeholder);
+
         if (otherProps.type === 'textarea') {
             return (
                 <textarea
@@ -160,8 +166,8 @@ const Input = React.forwardRef((
                     id={`input_${name || ''}`}
                     className={classNames('Input form-control', inputSize, inputClassName, {Input__focus: showLegend})}
                     value={value}
-                    placeholder={focused ? (label && placeholder) || label : label || placeholder}
-                    aria-label={label || placeholder}
+                    placeholder={placeholderValue}
+                    aria-label={ariaLabel}
                     rows={3}
                     name={name}
                     disabled={disabled}
@@ -178,8 +184,8 @@ const Input = React.forwardRef((
                 id={`input_${name || ''}`}
                 className={classNames('Input form-control', inputSize, inputClassName, {Input__focus: showLegend})}
                 value={value}
-                placeholder={focused ? (label && placeholder) || label : label || placeholder}
-                aria-label={label || placeholder}
+                placeholder={placeholderValue}
+                aria-label={ariaLabel}
                 name={name}
                 disabled={disabled}
                 {...otherProps}
@@ -201,7 +207,7 @@ const Input = React.forwardRef((
             >
                 {useLegend && (
                     <legend className={classNames('Input_legend', {Input_legend___focus: showLegend})}>
-                        {showLegend ? label || placeholder : null}
+                        {showLegend ? formatAsString(formatMessage, label || placeholder) : null}
                     </legend>
                 )}
                 <div className={classNames('Input_wrapper', wrapperClassName)}>
diff --git a/webapp/channels/src/components/widgets/loading/__snapshots__/loading_spinner.test.tsx.snap b/webapp/channels/src/components/widgets/loading/__snapshots__/loading_spinner.test.tsx.snap
deleted file mode 100644
index e9155fc29b..0000000000
--- a/webapp/channels/src/components/widgets/loading/__snapshots__/loading_spinner.test.tsx.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/widgets/loadingLoadingSpinner showing spinner with text 1`] = `
-<span
-  className="LoadingSpinner with-text"
-  data-testid="loadingSpinner"
-  id="loadingSpinner"
->
-  <span
-    className="fa fa-spinner fa-fw fa-pulse spinner"
-    title="Loading Icon"
-  />
-  test
-</span>
-`;
-
-exports[`components/widgets/loadingLoadingSpinner showing spinner without text 1`] = `
-<span
-  className="LoadingSpinner"
-  data-testid="loadingSpinner"
-  id="loadingSpinner"
->
-  <span
-    className="fa fa-spinner fa-fw fa-pulse spinner"
-    title="Loading Icon"
-  />
-</span>
-`;
diff --git a/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap b/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
index f3c0eb2ea8..c0dc84d6ce 100644
--- a/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
@@ -41,9 +41,7 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner without text
 <Memo(LoadingWrapper)
   loading={true}
 >
-  <Memo(LoadingSpinner)
-    text={null}
-  >
+  <Memo(LoadingSpinner)>
     <span
       className="LoadingSpinner"
       data-testid="loadingSpinner"
diff --git a/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx b/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
index b8c4c6405b..0fef414d02 100644
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
@@ -1,18 +1,66 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {renderWithContext, screen} from 'tests/react_testing_utils';
 
 import LoadingSpinner from './loading_spinner';
 
+jest.unmock('react-intl');
+
 describe('components/widgets/loadingLoadingSpinner', () => {
     test('showing spinner with text', () => {
-        const wrapper = shallow(<LoadingSpinner text='test'/>);
-        expect(wrapper).toMatchSnapshot();
+        renderWithContext(
+            <LoadingSpinner
+                text='test text'
+            />,
+        );
+
+        expect(screen.getByText('test text')).toBeVisible();
     });
+
+    test('showing spinner with translated text using a FormattedMessage', () => {
+        const messageId = 'formattedText';
+        renderWithContext(
+            <LoadingSpinner
+                text={
+                    <FormattedMessage id={messageId}/>
+                }
+            />,
+            {},
+            {
+                intlMessages: {
+                    [messageId]: 'formatted message text',
+                },
+            },
+        );
+
+        expect(screen.getByText('formatted message text')).toBeVisible();
+    });
+
+    test('showing spinner with translated text using a MessageDescriptor', () => {
+        renderWithContext(
+            <LoadingSpinner
+                text={{id: 'messageDescriptor'}}
+            />,
+            {},
+            {
+                intlMessages: {
+                    messageDescriptor: 'message descriptor text',
+                },
+            },
+        );
+
+        expect(screen.getByText('message descriptor text')).toBeVisible();
+    });
+
     test('showing spinner without text', () => {
-        const wrapper = shallow(<LoadingSpinner/>);
-        expect(wrapper).toMatchSnapshot();
+        renderWithContext(
+            <LoadingSpinner/>,
+        );
+
+        expect(screen.getByTestId('loadingSpinner')).toBeVisible();
     });
 });
diff --git a/webapp/channels/src/components/widgets/loading/loading_spinner.tsx b/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
index 6cb345a7ab..eaa5e49145 100644
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
@@ -3,14 +3,18 @@
 
 import classNames from 'classnames';
 import React from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {useIntl} from 'react-intl';
 
+import {formatAsComponent} from 'utils/i18n';
+
 type Props = {
-    text?: React.ReactNode;
+    text?: React.ReactNode | MessageDescriptor;
     style?: React.CSSProperties;
 }
-const LoadingSpinner = ({text = null, style}: Props) => {
+const LoadingSpinner = ({text, style}: Props) => {
     const {formatMessage} = useIntl();
+
     return (
         <span
             id='loadingSpinner'
@@ -22,7 +26,7 @@ const LoadingSpinner = ({text = null, style}: Props) => {
                 className='fa fa-spinner fa-fw fa-pulse spinner'
                 title={formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
             />
-            {text}
+            {formatAsComponent(text)}
         </span>
     );
 };
diff --git a/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx b/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
index 91771aa58f..82678121f0 100644
--- a/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
@@ -2,16 +2,17 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import type {MessageDescriptor} from 'react-intl';
 
 import LoadingSpinner from './loading_spinner';
 
 type Props = {
     loading?: boolean;
-    text?: React.ReactNode;
+    text?: MessageDescriptor | React.ReactNode;
     children?: React.ReactNode;
 }
 
-const LoadingWrapper = ({loading = true, text = null, children = null}: Props) => {
+const LoadingWrapper = ({loading = true, text, children}: Props) => {
     return (
         <>
             {loading ? <LoadingSpinner text={text}/> : children}
diff --git a/webapp/channels/src/components/with_tooltip/create_tooltip.tsx b/webapp/channels/src/components/with_tooltip/create_tooltip.tsx
index 7446f95b45..8427b19132 100644
--- a/webapp/channels/src/components/with_tooltip/create_tooltip.tsx
+++ b/webapp/channels/src/components/with_tooltip/create_tooltip.tsx
@@ -8,8 +8,9 @@ import {type MessageDescriptor} from 'react-intl';
 import RenderEmoji from 'components/emoji/render_emoji';
 import Tooltip from 'components/tooltip';
 
+import {formatAsComponent} from 'utils/i18n';
+
 import {TooltipShortcutSequence, type ShortcutDefinition} from './shortcut';
-import {getAsFormattedMessage} from './utils';
 
 type EmojiStyle = 'inline' | 'large' | undefined;
 
@@ -40,7 +41,7 @@ export function createTooltip(commonTooltipProps: CommonTooltipProps) {
             );
         }
 
-        const title = getAsFormattedMessage(commonTooltipProps.title);
+        const title = formatAsComponent(commonTooltipProps.title);
         if (commonTooltipProps.emoji && commonTooltipProps.emojiStyle !== 'large') {
             contents.push(
                 <div
@@ -76,7 +77,7 @@ export function createTooltip(commonTooltipProps: CommonTooltipProps) {
             );
         }
 
-        const hint = getAsFormattedMessage(commonTooltipProps.hint);
+        const hint = formatAsComponent(commonTooltipProps.hint);
         if (commonTooltipProps.hint) {
             contents.push(
                 <div
diff --git a/webapp/channels/src/components/with_tooltip/utils.tsx b/webapp/channels/src/components/with_tooltip/utils.tsx
deleted file mode 100644
index 1a2998674d..0000000000
--- a/webapp/channels/src/components/with_tooltip/utils.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import type {ComponentProps} from 'react';
-import type {MessageDescriptor} from 'react-intl';
-import {FormattedMessage} from 'react-intl';
-
-import {isMessageDescriptor} from 'utils/i18n';
-
-export function getAsFormattedMessage(v: string | MessageDescriptor | React.ReactElement | undefined, values?: ComponentProps<typeof FormattedMessage>['values']) {
-    if (!v) {
-        return undefined;
-    }
-
-    if (isMessageDescriptor(v)) {
-        return (
-            <FormattedMessage
-                {...v}
-                values={values}
-            />
-        );
-    }
-
-    return v;
-}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 946ed300b3..11fda193af 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -249,7 +249,6 @@
   "adldap_upsell_banner.confirm.license_trial": "Welcome to your Mattermost Enterprise trial! It expires on {endDate}. You now have access to high-security Enterprise features, for free.",
   "adldap_upsell_banner.confirm.title": "Your trial has started!",
   "adldap_upsell_banner.sales_btn": "Contact sales to use",
-  "adldap_upsell_banner.trial_btn": "Try free for 30 days",
   "admin_settings.save_unsaved_changes": "Please save unsaved changes first",
   "admin.advance.cluster": "High Availability",
   "admin.advance.metrics": "Performance Monitoring",
@@ -3437,7 +3436,6 @@
   "create_post.file_limit_sticky_banner.snooze_tooltip": "Snooze for {snoozeDays} days",
   "create_post.fileProcessing": "Processing...",
   "create_post.icon": "Create a post",
-  "create_post.post": "Post",
   "create_post.prewritten.custom": "Custom message...",
   "create_post.prewritten.tip.dm_hello": "Oh hello",
   "create_post.prewritten.tip.dm_hello_message": ":v: Oh hello",
@@ -3950,6 +3948,8 @@
   "installed_incoming_webhooks.unknown_channel": "A Private Webhook",
   "installed_integrations.audience_urls": "Audience URLs: {urls}",
   "installed_integrations.callback_urls": "Callback URLs: {urls}",
+  "installed_integrations.client_id": "Client ID: ",
+  "installed_integrations.client_secret": "Client Secret: ",
   "installed_integrations.content_type": "Content-Type: {contentType}",
   "installed_integrations.creation": "Created by {creator} on {createAt, date, full}",
   "installed_integrations.delete": "Delete",
@@ -3979,6 +3979,7 @@
   "installed_oauth_apps.help.oauthApplications": "OAuth 2.0 applications",
   "installed_oauth_apps.homepage": "Homepage",
   "installed_oauth_apps.iconUrl": "Icon URL",
+  "installed_oauth_apps.is_trusted": "Is Trusted: ",
   "installed_oauth_apps.name": "Display Name",
   "installed_oauth_apps.save": "Save",
   "installed_oauth_apps.saving": "Saving...",
@@ -3998,7 +3999,7 @@
   "installed_outgoing_oauth_connections.help.outgoingOauthConnections": "Outgoing OAuth Connections",
   "installed_outgoing_oauth_connections.password": "Password: ********",
   "installed_outgoing_oauth_connections.search": "Search Outgoing OAuth Connections",
-  "installed_outgoing_oauth_connections.username": "Username: **{username}**",
+  "installed_outgoing_oauth_connections.username": "Username: ",
   "installed_outgoing_webhooks.add": "Add Outgoing Webhook",
   "installed_outgoing_webhooks.delete.confirm": "This action permanently deletes the outgoing webhook and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",
@@ -4009,9 +4010,6 @@
   "installed_outgoing_webhooks.search": "Search Outgoing Webhooks",
   "installed_outgoing_webhooks.search.empty": "No outgoing webhooks match <b>{searchTerm}</b>",
   "installed_outgoing_webhooks.unknown_channel": "A Private Webhook",
-  "installedIntegrations.clientId": "Client ID: <b>{clientId}</b>",
-  "installedIntegrations.clientSecret": "Client Secret: <b>{clientSecret}</b>",
-  "installedOauthApps.isTrusted": "Is Trusted: <b>{isTrusted}</b>",
   "integrations.add": "Add",
   "integrations.command.description": "Slash commands send events to external integrations",
   "integrations.command.title": "Slash Commands",
@@ -4708,7 +4706,6 @@
   "pricing_modal.btn.purchase": "Purchase",
   "pricing_modal.btn.switch_to_annual": "Switch to annual billing",
   "pricing_modal.btn.tooltip": "Only visible to system admins",
-  "pricing_modal.btn.tryDays": "Try free for {days} days",
   "pricing_modal.btn.upgrade": "Upgrade",
   "pricing_modal.btn.viewPlans": "View plans",
   "pricing_modal.contact_us": "Contact us",
@@ -4796,7 +4793,6 @@
   "revoke_user_sessions_modal.title": "Revoke Sessions for {username}",
   "rhs_card.jump": "Jump",
   "rhs_card.message_by": "Message by {avatar} {user}",
-  "rhs_comment.comment": "Comment",
   "rhs_header.back.icon": "Back Icon",
   "rhs_header.backToFlaggedTooltip": "Back to saved messages",
   "rhs_header.backToPinnedTooltip": "Back to pinned messages",
@@ -5155,7 +5151,6 @@
   "start_trial_form.modal_btn.start": "Start trial",
   "start_trial_form.modal_title": "Start Trial",
   "start_trial_form.name": "Name",
-  "start_trial.modal_btn.start_free_trial": "Start free 30-day trial",
   "start_trial.modal.failed": "Failed",
   "start_trial.modal.gettingTrial": "Getting Trial...",
   "start_trial.modal.loaded": "Loaded!",
@@ -5327,7 +5322,6 @@
   "trial_benefits.modal.trialStartTitleCloud": "Your trial has started!",
   "trial_benefits.modal.useSsoDescription": "Sign on quickly and easily with our SSO feature that works with OpenID, SAML, Google, and O365.",
   "trial_benefits.modal.useSsoTitle": "Use SSO (with OpenID, SAML, Google, O365)",
-  "trial_btn.free.tryFreeFor30Days": "Try free for 30 days",
   "tutorial_threads.list.description-p1": "Here you’ll see a preview of all threads you’re following or participating in. Clicking on a thread in this list will open the full thread on the right.",
   "tutorial_threads.list.description-p2": "Use {upKey} / {downKey} to navigate the thread list.",
   "tutorial_threads.list.Down": "Down",
diff --git a/webapp/channels/src/utils/i18n.tsx b/webapp/channels/src/utils/i18n.tsx
index 1e62b93291..f8f909e2e5 100644
--- a/webapp/channels/src/utils/i18n.tsx
+++ b/webapp/channels/src/utils/i18n.tsx
@@ -1,12 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {MessageDescriptor} from 'react-intl';
+import React from 'react';
+import {FormattedMessage, type IntlShape, type MessageDescriptor} from 'react-intl';
 
 export function isMessageDescriptor(descriptor: unknown): descriptor is MessageDescriptor {
     return Boolean(descriptor && (descriptor as MessageDescriptor).id);
 }
 
+export function formatAsString(formatMessage: IntlShape['formatMessage'], messageOrDescriptor: string | MessageDescriptor | undefined): string | undefined {
+    if (!messageOrDescriptor) {
+        return undefined;
+    }
+
+    if (isMessageDescriptor(messageOrDescriptor)) {
+        return formatMessage(messageOrDescriptor);
+    }
+
+    return messageOrDescriptor;
+}
+
+export function formatAsComponent(messageOrComponent: React.ReactNode | MessageDescriptor): React.ReactNode {
+    if (isMessageDescriptor(messageOrComponent)) {
+        return <FormattedMessage {...messageOrComponent}/>;
+    }
+
+    return messageOrComponent;
+}
+
 export function getMonthLong(locale: string): 'short' | 'long' {
     if (locale === 'ko') {
         // Long and short are equivalent in Korean except long has a bug on IE11/Windows 7