[MM-55100] Replace usage of LocalizedIcon in 'create_user_groups_modal/create_user_groups_modal.tsx' with i/span tags (#25617)

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

@@ -42,13 +42,7 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
       onClick={[Function]}
       type="button"
     >
-      <LocalizedIcon
+      <i
-        ariaLabel={
-          Object {
-            "defaultMessage": "Back",
-            "id": "user_groups_modal.goBackLabel",
-          }
-        }
         className="icon icon-arrow-left"
       />
     </button>

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

@@ -1,14 +1,16 @@
 // 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 {UserProfile} from '@mattermost/types/users';
 
 import type {Value} from 'components/multiselect/multiselect';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
+
 import CreateUserGroupsModal from './create_user_groups_modal';
+import type {CreateUserGroupsModal as CreateUserGroupsModalClass} from './create_user_groups_modal';
 
 type UserProfileValue = Value & UserProfile;
 
@@ -35,7 +37,7 @@ describe('component/create_user_groups_modal', () => {
     };
 
     test('should match snapshot with back button', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
@@ -44,7 +46,7 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('should match snapshot without back button', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
                 backButtonCallback={undefined}
@@ -54,14 +56,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('should create group', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: 'ursa', usersToAdd: users});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('');
@@ -69,14 +72,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('mention regex error', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: 'ursa!/'});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('Invalid character in mention.');
@@ -84,14 +88,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('create a mention with special characters', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: 'ursa.-_'});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('');
@@ -99,14 +104,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('fail to create with empty name', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: '', mention: 'ursa'});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('nameInputErrorText')).toEqual('Name is a required field.');
@@ -114,14 +120,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('fail to create with empty mention', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: ''});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('Mention is a required field.');
@@ -129,14 +136,15 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('should create when mention begins with @', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('');
@@ -147,7 +155,7 @@ describe('component/create_user_groups_modal', () => {
     test('should fail to create with unknown error', () => {
         const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'insert_error'}}));
 
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
                 actions={{
@@ -157,8 +165,9 @@ describe('component/create_user_groups_modal', () => {
             />,
         );
         wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(true);
             expect(wrapper.state('mentionInputErrorText')).toEqual('');
@@ -169,7 +178,7 @@ describe('component/create_user_groups_modal', () => {
     test('should fail to create with duplicate mention error', () => {
         const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'app.custom_group.unique_name'}}));
 
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
                 actions={{
@@ -179,8 +188,9 @@ describe('component/create_user_groups_modal', () => {
             />,
         );
         wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        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.');
@@ -189,30 +199,33 @@ describe('component/create_user_groups_modal', () => {
     });
 
     test('fail to create with reserved word for mention', () => {
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
             />,
         );
         wrapper.setState({name: 'Ursa', mention: 'all'});
-        wrapper.instance().createGroup(users);
+        let instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
         });
 
         wrapper.setState({name: 'Ursa', mention: 'here'});
-        wrapper.instance().createGroup(users);
+        instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
         });
 
         wrapper.setState({name: 'Ursa', mention: 'channel'});
-        wrapper.instance().createGroup(users);
+        instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
+        instance.createGroup(users);
+        expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0);
         process.nextTick(() => {
             expect(wrapper.state('showUnknownError')).toEqual(false);
             expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.');
@@ -221,7 +234,7 @@ describe('component/create_user_groups_modal', () => {
     test('should fail to create with duplicate mention error', () => {
         const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'app.group.username_conflict'}}));
 
-        const wrapper = shallow<CreateUserGroupsModal>(
+        const wrapper = shallowWithIntl(
             <CreateUserGroupsModal
                 {...baseProps}
                 actions={{
@@ -231,8 +244,9 @@ describe('component/create_user_groups_modal', () => {
             />,
         );
         wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
-        wrapper.instance().createGroup(users);
+        const instance = wrapper.instance() as CreateUserGroupsModalClass;
-        expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1);
+        instance.createGroup(users);
+        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.');

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} from 'react-intl';
+import {FormattedMessage, type IntlShape, injectIntl} from 'react-intl';
 
 import type {GroupCreateWithUserIds} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
@@ -11,11 +11,9 @@ import type {UserProfile} from '@mattermost/types/users';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import AddUserToGroupMultiSelect from 'components/add_user_to_group_multiselect';
-import LocalizedIcon from 'components/localized_icon';
 import Input from 'components/widgets/inputs/input/input';
 
 import Constants, {ItemStatus} from 'utils/constants';
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 import {localizeMessage} from 'utils/utils';
 
@@ -31,6 +29,7 @@ export type Props = {
         createGroupWithUserIds: (group: GroupCreateWithUserIds) => Promise<ActionResult>;
         openModal: <P>(modalData: ModalData<P>) => void;
     };
+    intl: IntlShape;
 }
 
 type State = {
@@ -46,7 +45,7 @@ type State = {
     saving: boolean;
 }
 
-export default class CreateUserGroupsModal extends React.PureComponent<Props, State> {
+export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
@@ -182,15 +181,12 @@ export default class CreateUserGroupsModal extends React.PureComponent<Props, St
                                 <button
                                     type='button'
                                     className='modal-header-back-button btn btn-icon'
-                                    aria-label='Back'
+                                    aria-label={this.props.intl.formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
                                     onClick={() => {
                                         this.goBack();
                                     }}
                                 >
-                                    <LocalizedIcon
+                                    <i className='icon icon-arrow-left'/>
-                                        className='icon icon-arrow-left'
-                                        ariaLabel={{id: t('user_groups_modal.goBackLabel'), defaultMessage: 'Back'}}
-                                    />
                                 </button>
                                 <Modal.Title
                                     componentClass='h1'
@@ -279,3 +275,5 @@ export default class CreateUserGroupsModal extends React.PureComponent<Props, St
         );
     }
 }
+
+export default injectIntl(CreateUserGroupsModal);