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

2023-10-30 10:14:01 +05:30
--- a/webapp/channels/src/components/snapshots/loading_image_preview.test.tsx.snap
+++ b/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
-    text={null}
-  />
+  <injectIntl(LoadingSpinner) />
  <span
    className="loader-percent"
  >
@@ -19,9 +17,7 @@ exports[`components/LoadingImagePreview should match snapshot 2`] = `
 <div
  className="view-image__loading"
 >
-  <LoadingSpinner
-    text={null}
-  />
+  <injectIntl(LoadingSpinner) />
  <span
    className="loader-percent"
  >
--- a/webapp/channels/src/components/snapshots/pdf_preview.test.jsx.snap
+++ b/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
-    text={null}
-  />
+  <injectIntl(LoadingSpinner) />
 </div>
 `;

--- 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
@@ -19,9 +19,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot while
    <div
      className="DataGrid_loading"
    >
-      <LoadingSpinner
-        text={null}
-      />
+      <injectIntl(LoadingSpinner) />
      <MemoizedFormattedMessage
        defaultMessage="Loading"
        id="admin.data_grid.loading"
--- 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
@@ -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>
--- a/webapp/channels/src/components/login/login.test.tsx
+++ b/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>,
--- a/webapp/channels/src/components/login/login_mfa.test.tsx
+++ b/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}/>,
        );

--- a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx
+++ b/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);
--- 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
@@ -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>
+`;
--- 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
@@ -19,32 +19,64 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner with text 1`]
  loading={true}
  text="test"
 >
-  <LoadingSpinner
+  <injectIntl(LoadingSpinner)
    text="test"
  >
-    <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",
-          }
+    <LoadingSpinner
+      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",
+          "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
-    </span>
-  </LoadingSpinner>
+        test
+      </span>
+    </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
-      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",
-          }
+    <LoadingSpinner
+      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",
+          "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>
-  </LoadingSpinner>
+      </span>
+    </LoadingSpinner>
+  </injectIntl(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
+++ b/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'/>);
-        expect(wrapper).toMatchInlineSnapshot(`
-            <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>
-        `);
+        const wrapper = shallowWithIntl(<LoadingSpinner text='test'/>);
+        expect(wrapper).toMatchSnapshot();
    });
    test('showing spinner without text', () => {
-        const wrapper = shallow(<LoadingSpinner/>);
-        expect(wrapper).toMatchInlineSnapshot(`
-            <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>
-        `);
+        const wrapper = shallowWithIntl(<LoadingSpinner/>);
+        expect(wrapper).toMatchSnapshot();
    });
 });
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
+++ b/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 LocalizedIcon from 'components/localized_icon';
-
-import {t} from 'utils/i18n';
+import React, {PureComponent} from 'react';
+import type {ReactNode, CSSProperties} from 'react';
+import {injectIntl, type IntlShape} from 'react-intl';

 type Props = {
-    text: React.ReactNode;
-    style?: React.CSSProperties;
+    text?: ReactNode;
+    style?: CSSProperties;
+    intl: IntlShape;
 }
-
-export default class LoadingSpinner extends React.PureComponent<Props> {
-    public static defaultProps: Props = {
+class LoadingSpinner extends PureComponent<Props> {
+    public static defaultProps: Partial<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={{id: t('generic_icons.loading'), defaultMessage: 'Loading Icon'}}
+                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
                />
                {this.props.text}
            </span>
        );
    }
 }
+
+export default injectIntl(LoadingSpinner);
--- a/webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx
+++ b/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}