[MM-55123] Replace the usage of LocalizedIcon in 'loading_spinner.tsx' with i/span tags (#25139)

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

@@ -4,9 +4,7 @@ exports[`components/LoadingImagePreview should match snapshot 1`] = `
 <div
   className="view-image__loading"
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner) />
-    text={null}
-  />
   <span
     className="loader-percent"
   >
@@ -19,9 +17,7 @@ exports[`components/LoadingImagePreview should match snapshot 2`] = `
 <div
   className="view-image__loading"
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner) />
-    text={null}
-  />
   <span
     className="loader-percent"
   >

webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap

@@ -4,9 +4,7 @@ exports[`component/PDFPreview should match snapshot, loading 1`] = `
 <div
   className="view-image__loading"
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner) />
-    text={null}
-  />
 </div>
 `;
 

webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap

@@ -19,9 +19,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot while
     <div
       className="DataGrid_loading"
     >
-      <LoadingSpinner
+      <injectIntl(LoadingSpinner) />
-        text={null}
-      />
       <MemoizedFormattedMessage
         defaultMessage="Loading"
         id="admin.data_grid.loading"

webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap

@@ -75,13 +75,12 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
         <div
           className="apps-form-modal-body-common apps-form-modal-body-loaded"
         >
-          <LoadingSpinner
+          <injectIntl(LoadingSpinner)
             style={
               Object {
                 "fontSize": "24px",
               }
             }
-            text={null}
           />
         </div>
       </Fade>

webapp/channels/src/components/login/login.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow, mount} from 'enzyme';
+import {shallow} from 'enzyme';
 import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {MemoryRouter} from 'react-router-dom';
@@ -20,6 +20,7 @@ import SaveButton from 'components/save_button';
 import Input from 'components/widgets/inputs/input/input';
 import PasswordInput from 'components/widgets/inputs/password_input/password_input';
 
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import Constants, {WindowSizes} from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
@@ -152,7 +153,7 @@ describe('components/login/Login', () => {
         LocalStorageStore.setWasLoggedIn(true);
         mockConfig.EnableSignInWithEmail = 'true';
 
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <MemoryRouter><Login/></MemoryRouter>,
         );
 
@@ -174,7 +175,7 @@ describe('components/login/Login', () => {
             messages: {},
         };
 
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <IntlProvider {...intlProviderProps}>
                 <MemoryRouter>
                     <Login/>
@@ -195,7 +196,7 @@ describe('components/login/Login', () => {
             messages: {},
         };
 
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <IntlProvider {...intlProviderProps}>
                 <Login/>
             </IntlProvider>,
@@ -210,7 +211,7 @@ describe('components/login/Login', () => {
         LocalStorageStore.setWasLoggedIn(true);
         mockConfig.EnableSignInWithEmail = 'true';
 
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <MemoryRouter>
                 <Login/>
             </MemoryRouter>,
@@ -231,7 +232,7 @@ describe('components/login/Login', () => {
         LocalStorageStore.setWasLoggedIn(true);
         mockConfig.EnableSignInWithEmail = 'true';
 
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <MemoryRouter>
                 <Login/>
             </MemoryRouter>,
@@ -297,7 +298,7 @@ describe('components/login/Login', () => {
         mockConfig.EnableSignInWithEmail = 'true';
         const redirectPath = '/boards/team/teamID/boardID';
         mockLocation.search = '?redirect_to=' + redirectPath;
-        mount(
+        mountWithIntl(
             <MemoryRouter>
                 <Login/>
             </MemoryRouter>,

webapp/channels/src/components/login/login_mfa.test.tsx

@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow, mount} from 'enzyme';
+import {shallow} from 'enzyme';
 import React from 'react';
 
 import LoginMfa from 'components/login/login_mfa';
 import SaveButton from 'components/save_button';
 
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+
 describe('components/login/LoginMfa', () => {
     const baseProps = {
         loginId: 'login_id',
@@ -24,7 +26,7 @@ describe('components/login/LoginMfa', () => {
     });
 
     test('should handle token entered', () => {
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <LoginMfa {...baseProps}/>,
         );
 
@@ -44,7 +46,7 @@ describe('components/login/LoginMfa', () => {
     });
 
     test('should handle submit', () => {
-        const wrapper = mount(
+        const wrapper = mountWithIntl(
             <LoginMfa {...baseProps}/>,
         );
 

webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx

@@ -7,7 +7,7 @@ import {Preferences} from 'mattermost-redux/constants';
 import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
-import {render, screen, userEvent} from 'tests/react_testing_utils';
+import {screen, userEvent, renderWithIntl} from 'tests/react_testing_utils';
 
 import ActionButton from './action_button';
 
@@ -19,7 +19,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
     };
 
     test('should match default component state with given props', () => {
-        render(<ActionButton {...baseProps}/>);
+        renderWithIntl(<ActionButton {...baseProps}/>);
 
         const button = screen.getByRole('button');
         expect(button).toHaveAttribute('data-action-cookie', 'cookie-contents');
@@ -30,7 +30,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
     });
 
     test('should call handleAction on click', () => {
-        render(<ActionButton {...baseProps}/>);
+        renderWithIntl(<ActionButton {...baseProps}/>);
 
         const button = screen.getByRole('button');
 
@@ -45,7 +45,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'onlineIndicator'},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
 
         const button = screen.getByRole('button');
 
@@ -60,7 +60,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'danger'},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
 
         const button = screen.getByRole('button');
 
@@ -74,7 +74,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'success'},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
         expect(button).toHaveStyle(`background-color: ${changeOpacity('#339970', 0.08)}`);
@@ -87,7 +87,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: '#28a745'},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
         expect(button).toHaveStyle(`background-color: ${changeOpacity(props.action.style, 0.08)}`);
@@ -100,7 +100,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: '#wrong'},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
         expect(button.style.length).toBe(0);
@@ -112,7 +112,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: undefined},
         };
 
-        render(<ActionButton {...props}/>);
+        renderWithIntl(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
         expect(button.style.length).toBe(0);

webapp/channels/src/components/widgets/loading/__snapshots__/loading_spinner.test.tsx.snap

@@ -0,0 +1,28 @@
+// 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>
+`;

webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap

@@ -19,32 +19,64 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner with text 1`]
   loading={true}
   text="test"
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner)
     text="test"
   >
-    <span
+    <LoadingSpinner
-      className="LoadingSpinner with-text"
+      intl={
-      data-testid="loadingSpinner"
+        Object {
-      id="loadingSpinner"
+          "$t": [Function],
-    >
+          "defaultFormats": Object {},
-      <LocalizedIcon
+          "defaultLocale": "en",
-        className="fa fa-spinner fa-fw fa-pulse spinner"
+          "defaultRichTextElements": undefined,
-        component="span"
+          "fallbackOnEmptyString": true,
-        title={
+          "formatDate": [Function],
-          Object {
+          "formatDateTimeRange": [Function],
-            "defaultMessage": "Loading Icon",
+          "formatDateToParts": [Function],
-            "id": "generic_icons.loading",
+          "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",
+          "wrapRichTextChunksInFragment": undefined,
         }
+      }
+      text="test"
+    >
+      <span
+        className="LoadingSpinner with-text"
+        data-testid="loadingSpinner"
+        id="loadingSpinner"
       >
         <span
           className="fa fa-spinner fa-fw fa-pulse spinner"
           title="Loading Icon"
         />
-      </LocalizedIcon>
+        test
-      test
+      </span>
-    </span>
+    </LoadingSpinner>
-  </LoadingSpinner>
+  </injectIntl(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;
 
@@ -52,30 +84,62 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner without text
 <Memo(LoadingWrapper)
   loading={true}
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner)
     text={null}
   >
-    <span
+    <LoadingSpinner
-      className="LoadingSpinner"
+      intl={
-      data-testid="loadingSpinner"
+        Object {
-      id="loadingSpinner"
+          "$t": [Function],
-    >
+          "defaultFormats": Object {},
-      <LocalizedIcon
+          "defaultLocale": "en",
-        className="fa fa-spinner fa-fw fa-pulse spinner"
+          "defaultRichTextElements": undefined,
-        component="span"
+          "fallbackOnEmptyString": true,
-        title={
+          "formatDate": [Function],
-          Object {
+          "formatDateTimeRange": [Function],
-            "defaultMessage": "Loading Icon",
+          "formatDateToParts": [Function],
-            "id": "generic_icons.loading",
+          "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",
+          "wrapRichTextChunksInFragment": undefined,
         }
+      }
+      text={null}
+    >
+      <span
+        className="LoadingSpinner"
+        data-testid="loadingSpinner"
+        id="loadingSpinner"
       >
         <span
           className="fa fa-spinner fa-fw fa-pulse spinner"
           title="Loading Icon"
         />
-      </LocalizedIcon>
+      </span>
-    </span>
+    </LoadingSpinner>
-  </LoadingSpinner>
+  </injectIntl(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;

webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx

@@ -1,53 +1,19 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
+
 import LoadingSpinner from './loading_spinner';
 
 describe('components/widgets/loadingLoadingSpinner', () => {
     test('showing spinner with text', () => {
-        const wrapper = shallow(<LoadingSpinner text='test'/>);
+        const wrapper = shallowWithIntl(<LoadingSpinner text='test'/>);
-        expect(wrapper).toMatchInlineSnapshot(`
+        expect(wrapper).toMatchSnapshot();
-            <span
-              className="LoadingSpinner with-text"
-              data-testid="loadingSpinner"
-              id="loadingSpinner"
-            >
-              <LocalizedIcon
-                className="fa fa-spinner fa-fw fa-pulse spinner"
-                component="span"
-                title={
-                  Object {
-                    "defaultMessage": "Loading Icon",
-                    "id": "generic_icons.loading",
-                  }
-                }
-              />
-              test
-            </span>
-        `);
     });
     test('showing spinner without text', () => {
-        const wrapper = shallow(<LoadingSpinner/>);
+        const wrapper = shallowWithIntl(<LoadingSpinner/>);
-        expect(wrapper).toMatchInlineSnapshot(`
+        expect(wrapper).toMatchSnapshot();
-            <span
-              className="LoadingSpinner"
-              data-testid="loadingSpinner"
-              id="loadingSpinner"
-            >
-              <LocalizedIcon
-                className="fa fa-spinner fa-fw fa-pulse spinner"
-                component="span"
-                title={
-                  Object {
-                    "defaultMessage": "Loading Icon",
-                    "id": "generic_icons.loading",
-                  }
-                }
-              />
-            </span>
-        `);
     });
 });

webapp/channels/src/components/widgets/loading/loading_spinner.tsx

@@ -1,19 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {PureComponent} from 'react';
-
+import type {ReactNode, CSSProperties} from 'react';
-import LocalizedIcon from 'components/localized_icon';
+import {injectIntl, type IntlShape} from 'react-intl';
-
-import {t} from 'utils/i18n';
 
 type Props = {
-    text: React.ReactNode;
+    text?: ReactNode;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
+    intl: IntlShape;
 }
-
+class LoadingSpinner extends PureComponent<Props> {
-export default class LoadingSpinner extends React.PureComponent<Props> {
+    public static defaultProps: Partial<Props> = {
-    public static defaultProps: Props = {
         text: null,
     };
 
@@ -25,13 +23,14 @@ export default class LoadingSpinner extends React.PureComponent<Props> {
                 style={this.props.style}
                 data-testid='loadingSpinner'
             >
-                <LocalizedIcon
+                <span
                     className='fa fa-spinner fa-fw fa-pulse spinner'
-                    component='span'
+                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                    title={{id: t('generic_icons.loading'), defaultMessage: 'Loading Icon'}}
                 />
                 {this.props.text}
             </span>
         );
     }
 }
+
+export default injectIntl(LoadingSpinner);

webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {mount} from 'enzyme';
 import React from 'react';
 
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+
 import LoadingWrapper from './loading_wrapper';
 
 describe('components/widgets/loading/LoadingWrapper', () => {
@@ -31,7 +32,7 @@ describe('components/widgets/loading/LoadingWrapper', () => {
     ];
     for (const testCase of testCases) {
         test(testCase.name, () => {
-            const wrapper = mount(
+            const wrapper = mountWithIntl(
                 <LoadingWrapper
                     loading={testCase.loading}
                     text={testCase.text}