[MM-55101] Replace usage of LocalizedIcon in 'multiselect.tsx' with i/span tags (#25665)

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

@@ -65,6 +65,7 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      intl={Object {}}
       key="addGroupsToChannelKey"
       loading={true}
       maxValues={10}

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

@@ -1,19 +1,22 @@
 // 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 {IntlShape} from 'react-intl';
 
 import {SyncableType} from '@mattermost/types/groups';
 
 import AddGroupsToChannelModal from 'components/add_groups_to_channel_modal/add_groups_to_channel_modal';
-import type {Props} from 'components/add_groups_to_channel_modal/add_groups_to_channel_modal';
+import type {AddGroupsToChannelModal as AddGroupsToChannelModalClass, Props} from 'components/add_groups_to_channel_modal/add_groups_to_channel_modal';
+
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 
 describe('components/AddGroupsToChannelModal', () => {
     const baseProps: Props = {
         currentChannelName: 'foo',
         currentChannelId: '123',
         teamID: '456',
+        intl: {} as IntlShape,
         searchTerm: '',
         groups: [],
         onExited: jest.fn(),
@@ -28,19 +31,19 @@ describe('components/AddGroupsToChannelModal', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match state when handleResponse is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
 
         wrapper.setState({saving: true, addError: ''});
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         instance.handleResponse();
         expect(wrapper.state('saving')).toEqual(false);
         expect(wrapper.state('addError')).toEqual(null);
@@ -56,10 +59,10 @@ describe('components/AddGroupsToChannelModal', () => {
         const linkGroupSyncable = jest.fn().mockResolvedValue({error: true, data: true});
         const actions = {...baseProps.actions, linkGroupSyncable};
         const props = {...baseProps, actions};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...props}/>,
         );
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         instance.handleResponse = jest.fn();
         instance.handleHide = jest.fn();
         wrapper.setState({values: []});
@@ -81,14 +84,14 @@ describe('components/AddGroupsToChannelModal', () => {
     });
 
     test('should match state when addValue is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
         const value1: any = {id: 'id_1', label: 'label_1', value: 'value_1'};
         const value2: any = {id: 'id_2', label: 'label_2', value: 'value_2'};
 
         wrapper.setState({values: [value1]});
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         instance.addValue(value2);
         expect(wrapper.state('values')).toEqual([value1, value2]);
 
@@ -98,12 +101,12 @@ describe('components/AddGroupsToChannelModal', () => {
     });
 
     test('should match state when handlePageChange is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
 
         wrapper.setState({users: [{id: 'id_1'}]});
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         instance.handlePageChange(0, 1);
         expect(baseProps.actions.getGroupsNotAssociatedToChannel).toHaveBeenCalledTimes(1);
 
@@ -115,10 +118,10 @@ describe('components/AddGroupsToChannelModal', () => {
     });
 
     test('should match state when search is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         instance.search('');
         expect(baseProps.actions.setModalSearchTerm).toHaveBeenCalledTimes(1);
         expect(baseProps.actions.setModalSearchTerm).toBeCalledWith('');
@@ -131,7 +134,7 @@ describe('components/AddGroupsToChannelModal', () => {
     });
 
     test('should match state when handleDelete is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
 
@@ -141,12 +144,12 @@ describe('components/AddGroupsToChannelModal', () => {
 
         wrapper.setState({values: [value1]});
         const newValues: any = [value2, value3];
-        (wrapper.instance() as AddGroupsToChannelModal).handleDelete(newValues);
+        (wrapper.instance() as AddGroupsToChannelModalClass).handleDelete(newValues);
         expect(wrapper.state('values')).toEqual(newValues);
     });
 
     test('should match when renderOption is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
 
@@ -154,7 +157,7 @@ describe('components/AddGroupsToChannelModal', () => {
         let isSelected = false;
         function onAdd() {} //eslint-disable-line no-empty-function
 
-        const instance = wrapper.instance() as AddGroupsToChannelModal;
+        const instance = wrapper.instance() as AddGroupsToChannelModalClass;
         expect(instance.renderOption(option, isSelected, onAdd)).toMatchSnapshot();
 
         isSelected = true;
@@ -165,10 +168,10 @@ describe('components/AddGroupsToChannelModal', () => {
     });
 
     test('should match when renderValue is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToChannelModal {...baseProps}/>,
         );
 
-        expect((wrapper.instance() as AddGroupsToChannelModal).renderValue({data: {display_name: 'foo'}})).toEqual('foo');
+        expect((wrapper.instance() as AddGroupsToChannelModalClass).renderValue({data: {display_name: 'foo'}})).toEqual('foo');
     });
 });

webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {ServerError} from '@mattermost/types/errors';
 import type {Group, SyncablePatch} from '@mattermost/types/groups';
@@ -26,10 +27,10 @@ type GroupValue = (Group & Value);
 export type Props = {
     currentChannelName: string;
     currentChannelId: string;
+    intl: IntlShape;
     teamID: string;
     searchTerm: string;
     groups: Group[];
-
     excludeGroups?: Group[];
     includeGroups?: Group[];
     onExited: () => void;
@@ -55,7 +56,7 @@ type State = {
     loadingGroups: boolean;
 }
 
-export default class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
+export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
     private searchTimeoutId: number;
     private selectedItemRef: React.RefObject<HTMLDivElement>;
 
@@ -288,6 +289,7 @@ export default class AddGroupsToChannelModal extends React.PureComponent<Props,
                         key='addGroupsToChannelKey'
                         options={groupsToShowValues}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         selectedItemRef={this.selectedItemRef}
                         values={this.state.values}
                         valueRenderer={this.renderValue}
@@ -310,3 +312,5 @@ export default class AddGroupsToChannelModal extends React.PureComponent<Props,
         );
     }
 }
+
+export default injectIntl(AddGroupsToChannelModal);

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

@@ -65,6 +65,44 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addGroupsToTeamKey"
       loading={true}
       maxValues={10}

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

@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
 import {SyncableType} from '@mattermost/types/groups';
 
 import AddGroupsToTeamModal from 'components/add_groups_to_team_modal/add_groups_to_team_modal';
+import type {AddGroupsToTeamModal as AddGroupsToTeamModalClass} from 'components/add_groups_to_team_modal/add_groups_to_team_modal';
+
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 
 describe('components/AddGroupsToTeamModal', () => {
     const baseProps = {
@@ -24,34 +26,36 @@ describe('components/AddGroupsToTeamModal', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should have called onExited when handleExit is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
 
-        wrapper.instance().handleExit();
+        (wrapper.instance() as AddGroupsToTeamModalClass).handleExit();
         expect(baseProps.onExited).toHaveBeenCalledTimes(1);
     });
 
     test('should match state when handleResponse is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
 
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
+
         wrapper.setState({saving: true, addError: ''});
-        wrapper.instance().handleResponse();
+        instance.handleResponse();
         expect(wrapper.state('saving')).toEqual(false);
         expect(wrapper.state('addError')).toEqual(null);
 
         const message = 'error message';
         wrapper.setState({saving: true, addError: ''});
-        wrapper.instance().handleResponse(new Error(message));
+        instance.handleResponse(new Error(message));
         expect(wrapper.state('saving')).toEqual(false);
         expect(wrapper.state('addError')).toEqual(message);
     });
@@ -60,10 +64,10 @@ describe('components/AddGroupsToTeamModal', () => {
         const linkGroupSyncable = jest.fn().mockResolvedValue({error: true, data: true});
         const actions = {...baseProps.actions, linkGroupSyncable};
         const props = {...baseProps, actions};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...props}/>,
         );
-        const instance = wrapper.instance() as AddGroupsToTeamModal;
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
         instance.handleResponse = jest.fn();
         instance.handleHide = jest.fn();
 
@@ -86,57 +90,63 @@ describe('components/AddGroupsToTeamModal', () => {
     });
 
     test('should match state when addValue is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
 
         const value1 = {id: 'id_1', label: 'label_1', value: 'value_1'};
         const value2 = {id: 'id_2', label: 'label_2', value: 'value_2'};
 
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
+
         wrapper.setState({values: [value1]});
-        wrapper.instance().addValue(value2);
+        instance.addValue(value2);
         expect(wrapper.state('values')).toEqual([value1, value2]);
 
         wrapper.setState({values: [value1]});
-        wrapper.instance().addValue(value1);
+        instance.addValue(value1);
         expect(wrapper.state('values')).toEqual([value1]);
     });
 
     test('should match state when handlePageChange is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
 
-        wrapper.instance().handlePageChange(0, 1);
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
+
+        instance.handlePageChange(0, 1);
         expect(baseProps.actions.getGroupsNotAssociatedToTeam).toHaveBeenCalledTimes(1);
 
-        wrapper.instance().handlePageChange(1, 0);
+        instance.handlePageChange(1, 0);
         expect(baseProps.actions.getGroupsNotAssociatedToTeam).toHaveBeenCalledTimes(2);
 
-        wrapper.instance().handlePageChange(0, 1);
+        instance.handlePageChange(0, 1);
         expect(baseProps.actions.getGroupsNotAssociatedToTeam).toHaveBeenCalledTimes(2);
     });
 
     test('should match state when search is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
 
-        wrapper.instance().search('');
+        instance.search('');
         expect(baseProps.actions.setModalSearchTerm).toHaveBeenCalledTimes(1);
         expect(baseProps.actions.setModalSearchTerm).toBeCalledWith('');
 
         const searchTerm = 'term';
-        wrapper.instance().search(searchTerm);
+        instance.search(searchTerm);
         expect(wrapper.state('loadingGroups')).toEqual(true);
         expect(baseProps.actions.setModalSearchTerm).toHaveBeenCalledTimes(2);
         expect(baseProps.actions.setModalSearchTerm).toBeCalledWith(searchTerm);
     });
 
     test('should match state when handleDelete is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
 
         const value1 = {id: 'id_1', label: 'label_1', value: 'value_1'};
         const value2 = {id: 'id_2', label: 'label_2', value: 'value_2'};
@@ -144,31 +154,33 @@ describe('components/AddGroupsToTeamModal', () => {
 
         wrapper.setState({values: [value1]});
         const newValues = [value2, value3];
-        wrapper.instance().handleDelete(newValues);
+        instance.handleDelete(newValues);
         expect(wrapper.state('values')).toEqual(newValues);
     });
 
     test('should match when renderOption is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
 
         const option = {id: 'id_1', label: 'label_1', value: 'value_1'};
         let isSelected = false;
         const onAdd = jest.fn();
         const onMouseMove = jest.fn();
 
-        expect(wrapper.instance().renderOption(option, isSelected, onAdd, onMouseMove)).toMatchSnapshot();
+        expect(instance.renderOption(option, isSelected, onAdd, onMouseMove)).toMatchSnapshot();
 
         isSelected = true;
-        expect(wrapper.instance().renderOption(option, isSelected, onAdd, onMouseMove)).toMatchSnapshot();
+        expect(instance.renderOption(option, isSelected, onAdd, onMouseMove)).toMatchSnapshot();
     });
 
     test('should match when renderValue is called', () => {
-        const wrapper = shallow<AddGroupsToTeamModal>(
+        const wrapper = shallowWithIntl(
             <AddGroupsToTeamModal {...baseProps}/>,
         );
+        const instance = wrapper.instance() as AddGroupsToTeamModalClass;
 
-        expect(wrapper.instance().renderValue({data: {id: 'id_1', label: 'label_1', value: 'value_1', display_name: 'foo'}})).toEqual('foo');
+        expect(instance.renderValue({data: {id: 'id_1', label: 'label_1', value: 'value_1', display_name: 'foo'}})).toEqual('foo');
     });
 });

webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx

@@ -4,7 +4,8 @@
 import React from 'react';
 import type {RefObject} from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {Group, GroupsWithCount, SyncablePatch} from '@mattermost/types/groups';
 import {SyncableType} from '@mattermost/types/groups';
@@ -25,6 +26,7 @@ type GroupValue = Value & {member_count?: number};
 type Props = {
     currentTeamName: string;
     currentTeamId: string;
+    intl: IntlShape;
     searchTerm: string;
     groups: Group[];
 
@@ -53,7 +55,7 @@ type State = {
     loadingGroups: boolean;
 }
 
-export default class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
+export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
     private searchTimeoutId: number;
     private readonly selectedItemRef: RefObject<HTMLDivElement>;
 
@@ -299,6 +301,7 @@ export default class AddGroupsToTeamModal extends React.PureComponent<Props, Sta
                         key='addGroupsToTeamKey'
                         options={groupsOptionsToShow}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         selectedItemRef={this.selectedItemRef}
                         values={this.state.values}
                         valueRenderer={this.renderValue}
@@ -321,3 +324,4 @@ export default class AddGroupsToTeamModal extends React.PureComponent<Props, Sta
         );
     }
 }
+export default injectIntl(AddGroupsToTeamModal);

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

@@ -11,6 +11,44 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
   handleInput={[Function]}
   handlePageChange={[Function]}
   handleSubmit={[Function]}
+  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",
+    }
+  }
   key="addUsersToGroupKey"
   loading={true}
   numRemainingText={null}
@@ -57,6 +95,44 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
   handleInput={[Function]}
   handlePageChange={[Function]}
   handleSubmit={[Function]}
+  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",
+    }
+  }
   key="addUsersToGroupKey"
   loading={true}
   numRemainingText={null}
@@ -103,6 +179,44 @@ exports[`component/add_user_to_group_multiselect should match snapshot without a
   handleInput={[Function]}
   handlePageChange={[Function]}
   handleSubmit={[Function]}
+  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",
+    }
+  }
   key="addUsersToGroupKey"
   loading={true}
   numRemainingText={null}

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

@@ -1,7 +1,6 @@
 // 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';
@@ -9,7 +8,10 @@ import type {RelationOneToOne} from '@mattermost/types/utilities';
 
 import type {Value} from 'components/multiselect/multiselect';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
+
 import AddUserToGroupMultiSelect from './add_user_to_group_multiselect';
+import type {AddUserToGroupMultiSelect as AddUserToGroupMultiSelectClass} from './add_user_to_group_multiselect';
 
 type UserProfileValue = Value & UserProfile;
 
@@ -50,7 +52,7 @@ describe('component/add_user_to_group_multiselect', () => {
     };
 
     test('should match snapshot without any profiles', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUserToGroupMultiSelect
                 {...baseProps}
             />,
@@ -59,7 +61,7 @@ describe('component/add_user_to_group_multiselect', () => {
     });
 
     test('should match snapshot with profiles', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUserToGroupMultiSelect
                 {...baseProps}
                 profiles={users}
@@ -69,7 +71,7 @@ describe('component/add_user_to_group_multiselect', () => {
     });
 
     test('should match snapshot with different submit button text', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUserToGroupMultiSelect
                 {...baseProps}
                 profiles={users}
@@ -82,24 +84,25 @@ describe('component/add_user_to_group_multiselect', () => {
     });
 
     test('should trim the search term', () => {
-        const wrapper = shallow<AddUserToGroupMultiSelect>(
+        const wrapper = shallowWithIntl(
             <AddUserToGroupMultiSelect {...baseProps}/>,
         );
 
-        wrapper.instance().search(' something ');
+        (wrapper.instance() as AddUserToGroupMultiSelectClass).search(' something ');
         expect(wrapper.state('term')).toEqual('something');
     });
 
     test('should add users on handleSubmit', (done) => {
-        const wrapper = shallow<AddUserToGroupMultiSelect>(
+        const wrapper = shallowWithIntl(
             <AddUserToGroupMultiSelect
                 {...baseProps}
             />,
         );
+        const instance = wrapper.instance() as AddUserToGroupMultiSelectClass;
 
         wrapper.setState({values: users});
-        wrapper.instance().handleSubmit();
+        instance.handleSubmit();
-        expect(wrapper.instance().props.onSubmitCallback).toHaveBeenCalledTimes(1);
+        expect(instance.props.onSubmitCallback).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             done();
         });

webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx

@@ -2,6 +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 {UserProfile} from '@mattermost/types/users';
 import type {RelationOneToOne} from '@mattermost/types/utilities';
@@ -27,6 +29,8 @@ export type Props = {
     userStatuses: RelationOneToOne<UserProfile, string>;
     focusOnLoad?: boolean;
 
+    intl: IntlShape;
+
     // Used if we are adding new members to an existing group
     groupId?: string;
 
@@ -66,7 +70,7 @@ type State = {
     loadingUsers: boolean;
 }
 
-export default class AddUserToGroupMultiSelect extends React.PureComponent<Props, State> {
+export class AddUserToGroupMultiSelect extends React.PureComponent<Props, State> {
     private searchTimeoutId = 0;
     selectedItemRef;
 
@@ -218,6 +222,7 @@ export default class AddUserToGroupMultiSelect extends React.PureComponent<Props
                 key={this.props.multilSelectKey}
                 options={users}
                 optionRenderer={this.renderOption}
+                intl={this.props.intl}
                 selectedItemRef={this.selectedItemRef}
                 values={this.state.values}
                 ariaLabelRenderer={this.renderAriaLabel}
@@ -245,3 +250,5 @@ export default class AddUserToGroupMultiSelect extends React.PureComponent<Props
         );
     };
 }
+
+export default injectIntl(AddUserToGroupMultiSelect);

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

@@ -76,7 +76,7 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
         <div
           className="group-add-user"
         >
-          <Connect(AddUserToGroupMultiSelect)
+          <Connect(injectIntl(AddUserToGroupMultiSelect))
             addUserCallback={[Function]}
             backButtonClass="multiselect-back"
             backButtonClick={[Function]}

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

@@ -65,6 +65,44 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToTeamKey"
       loading={true}
       maxValues={20}
@@ -253,6 +291,44 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToTeamKey"
       loading={true}
       maxValues={20}

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

@@ -1,15 +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 {Team} from '@mattermost/types/teams';
 import type {UserProfile} from '@mattermost/types/users';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 import {TestHelper} from 'utils/test_helper';
 
 import AddUsersToTeamModal from './add_users_to_team_modal';
+import type {AddUsersToTeamModal as AddUsersToTeamModalClass} from './add_users_to_team_modal';
 
 describe('components/admin_console/add_users_to_team_modal/AddUsersToTeamModal', () => {
     function createUser(id: string, username: string, bot: boolean): UserProfile {
@@ -58,7 +59,7 @@ describe('components/admin_console/add_users_to_team_modal/AddUsersToTeamModal',
     };
 
     test('should match snapshot with 2 users', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToTeamModal
                 {...baseProps}
             />,
@@ -67,7 +68,7 @@ describe('components/admin_console/add_users_to_team_modal/AddUsersToTeamModal',
     });
 
     test('should match snapshot with 2 users, 1 included and 1 removed', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToTeamModal
                 {...baseProps}
                 includeUsers={{[removedUser.id]: removedUser}}
@@ -78,22 +79,22 @@ describe('components/admin_console/add_users_to_team_modal/AddUsersToTeamModal',
     });
 
     test('should match state when handleHide is called', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToTeamModal {...baseProps}/>,
         );
 
         wrapper.setState({show: true});
-        (wrapper.instance() as AddUsersToTeamModal).handleHide();
+        (wrapper.instance() as AddUsersToTeamModalClass).handleHide();
         expect(wrapper.state('show')).toEqual(false);
     });
 
     test('should search', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToTeamModal
                 {...baseProps}
             />,
         );
-        const addUsers = wrapper.instance() as AddUsersToTeamModal;
+        const addUsers = wrapper.instance() as AddUsersToTeamModalClass;
 
         // search profiles when search term given
         addUsers.search('foo');

webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 import type {UserProfile} from '@mattermost/types/users';
@@ -27,6 +28,7 @@ type UserProfileValue = Value & UserProfile;
 type Props = {
     team: Team;
     users: UserProfile[];
+    intl: IntlShape;
     filterExcludeGuests?: boolean;
     excludeUsers: { [userId: string]: UserProfile };
     includeUsers: { [userId: string]: UserProfile };
@@ -50,7 +52,7 @@ type State = {
     filterOptions: {[key: string]: any};
 }
 
-export default class AddUsersToTeamModal extends React.PureComponent<Props, State> {
+export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
     selectedItemRef: React.RefObject<HTMLDivElement>;
 
     public constructor(props: Props) {
@@ -239,6 +241,7 @@ export default class AddUsersToTeamModal extends React.PureComponent<Props, Stat
                         key='addUsersToTeamKey'
                         options={options}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         selectedItemRef={this.selectedItemRef}
                         ariaLabelRenderer={this.renderAriaLabel}
                         values={this.state.values}
@@ -262,3 +265,5 @@ export default class AddUsersToTeamModal extends React.PureComponent<Props, Stat
         );
     };
 }
+
+export default injectIntl(AddUsersToTeamModal);

webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_details.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
           teams={Array []}
         />
       </AdminPanel>
-      <Connect(ChannelSelectorModal)
+      <Connect(injectIntl(ChannelSelectorModal))
         alreadySelected={
           Array [
             "44444444444444444444444444",
@@ -250,7 +250,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
           teams={Array []}
         />
       </AdminPanel>
-      <Connect(TeamSelectorModal)
+      <Connect(injectIntl(TeamSelectorModal))
         alreadySelected={
           Array [
             "11111111111111111111111111",

webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap

@@ -68,6 +68,44 @@ exports[`admin_console/add_users_to_role_modal search should not include bot use
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}
@@ -213,6 +251,44 @@ exports[`admin_console/add_users_to_role_modal should exclude user 1`] = `
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}
@@ -314,6 +390,44 @@ exports[`admin_console/add_users_to_role_modal should have single passed value 1
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}
@@ -459,6 +573,44 @@ exports[`admin_console/add_users_to_role_modal should include additional user 1`
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}
@@ -645,6 +797,44 @@ exports[`admin_console/add_users_to_role_modal should include additional user 2`
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}
@@ -831,6 +1021,44 @@ exports[`admin_console/add_users_to_role_modal should not include bot user 1`] =
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addUsersToRoleKey"
       loading={true}
       maxValues={20}

webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.test.tsx

@@ -1,9 +1,9 @@
 // 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 {TestHelper} from 'utils/test_helper';
 
 import AddUsersToRoleModal from './add_users_to_role_modal';
@@ -23,7 +23,7 @@ describe('admin_console/add_users_to_role_modal', () => {
     };
 
     test('should have single passed value', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...baseProps}
             />);
@@ -33,7 +33,7 @@ describe('admin_console/add_users_to_role_modal', () => {
 
     test('should exclude user', () => {
         const props = {...baseProps, excludeUsers: {user_id: TestHelper.getUserMock()}};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...props}
             />);
@@ -43,7 +43,7 @@ describe('admin_console/add_users_to_role_modal', () => {
 
     test('should include additional user', () => {
         const props = {...baseProps, includeUsers: {user_id1: TestHelper.getUserMock()}};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...props}
             />);
@@ -53,7 +53,7 @@ describe('admin_console/add_users_to_role_modal', () => {
 
     test('should include additional user', () => {
         const props = {...baseProps, includeUsers: {user_id1: TestHelper.getUserMock()}};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...props}
             />);
@@ -70,7 +70,7 @@ describe('admin_console/add_users_to_role_modal', () => {
                 searchProfiles: jest.fn(),
             },
         };
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...props}
             />);
@@ -87,7 +87,7 @@ describe('admin_console/add_users_to_role_modal', () => {
                 getProfiles: jest.fn(),
             },
         };
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <AddUsersToRoleModal
                 {...props}
             />);

webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {Role} from '@mattermost/types/roles';
 import type {UserProfile} from '@mattermost/types/users';
@@ -30,6 +31,7 @@ export type Props = {
     users: UserProfile[];
     excludeUsers: { [userId: string]: UserProfile };
     includeUsers: { [userId: string]: UserProfile };
+    intl: IntlShape;
     onAddCallback: (users: UserProfile[]) => void;
     onExited: () => void;
 
@@ -55,7 +57,7 @@ function searchUsersToAdd(users: Record<string, UserProfile>, term: string): Rec
     return filterProfiles(profileListToMap(filteredProfilesList), {});
 }
 
-export default class AddUsersToRoleModal extends React.PureComponent<Props, State> {
+export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
@@ -248,6 +250,7 @@ export default class AddUsersToRoleModal extends React.PureComponent<Props, Stat
                         key='addUsersToRoleKey'
                         options={options}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         ariaLabelRenderer={this.renderAriaLabel}
                         values={this.state.values}
                         valueRenderer={this.renderValue}
@@ -270,3 +273,5 @@ export default class AddUsersToRoleModal extends React.PureComponent<Props, Stat
         );
     };
 }
+
+export default injectIntl(AddUsersToRoleModal);

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

@@ -74,6 +74,44 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         handleInput={[Function]}
         handlePageChange={[Function]}
         handleSubmit={[Function]}
+        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",
+          }
+        }
         key="addUsersToChannelKey"
         loading={true}
         optionRenderer={[Function]}
@@ -174,6 +212,44 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         handleInput={[Function]}
         handlePageChange={[Function]}
         handleSubmit={[Function]}
+        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",
+          }
+        }
         key="addUsersToChannelKey"
         loading={true}
         optionRenderer={[Function]}
@@ -296,6 +372,44 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
         handleInput={[Function]}
         handlePageChange={[Function]}
         handleSubmit={[Function]}
+        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",
+          }
+        }
         key="addUsersToChannelKey"
         loading={true}
         optionRenderer={[Function]}

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

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 
@@ -12,8 +11,11 @@ import type {RelationOneToOne} from '@mattermost/types/utilities';
 import {General} from 'mattermost-redux/constants';
 
 import ChannelInviteModal from 'components/channel_invite_modal/channel_invite_modal';
+import type {ChannelInviteModal as ChannelInviteModalClass} from 'components/channel_invite_modal/channel_invite_modal';
 import type {Value} from 'components/multiselect/multiselect';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
+
 type UserProfileValue = Value & UserProfile;
 
 jest.mock('utils/utils', () => {
@@ -91,7 +93,7 @@ describe('components/channel_invite_modal', () => {
     };
 
     test('should match snapshot for channel_invite_modal with profiles', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...baseProps}
                 profilesNotInCurrentChannel={users}
@@ -104,7 +106,7 @@ describe('components/channel_invite_modal', () => {
     });
 
     test('should match snapshot for channel_invite_modal with profiles from DMs', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...baseProps}
                 profilesNotInCurrentChannel={[]}
@@ -117,7 +119,7 @@ describe('components/channel_invite_modal', () => {
     });
 
     test('should match snapshot with exclude and include users', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...baseProps}
                 profilesNotInCurrentChannel={users}
@@ -150,7 +152,7 @@ describe('components/channel_invite_modal', () => {
     });
 
     test('should match snapshot for channel_invite_modal with userStatuses', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...baseProps}
                 profilesNotInCurrentChannel={users}
@@ -159,23 +161,26 @@ describe('components/channel_invite_modal', () => {
                 profilesFromRecentDMs={[]}
             />,
         );
-        const instance = wrapper.instance() as ChannelInviteModal;
+        const instance = wrapper.instance() as ChannelInviteModalClass;
         expect(instance.renderOption(users[0], true, jest.fn(), jest.fn())).toMatchSnapshot();
     });
 
     test('should match state when onHide is called', () => {
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal {...baseProps}/>,
         );
 
         wrapper.setState({show: true});
-        wrapper.instance().onHide();
+
+        const instance = wrapper.instance() as ChannelInviteModalClass;
+        instance.onHide();
+
         expect(wrapper.state('show')).toEqual(false);
     });
 
     test('should have called props.onHide when Modal.onExited is called', () => {
         const props = {...baseProps};
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal {...props}/>,
         );
 
@@ -184,16 +189,19 @@ describe('components/channel_invite_modal', () => {
     });
 
     test('should fail to add users on handleSubmit', (done) => {
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...baseProps}
             />,
         );
 
         wrapper.setState({selectedUsers: users, show: true});
-        wrapper.instance().handleSubmit();
+
+        const instance = wrapper.instance() as ChannelInviteModalClass;
+        instance.handleSubmit();
+
         expect(wrapper.state('saving')).toEqual(true);
-        expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(1);
+        expect(instance.props.actions.addUsersToChannel).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('inviteError')).toEqual('Failed');
             expect(wrapper.state('saving')).toEqual(false);
@@ -213,16 +221,19 @@ describe('components/channel_invite_modal', () => {
             },
         };
 
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...props}
             />,
         );
 
         wrapper.setState({selectedUsers: users, show: true});
-        wrapper.instance().handleSubmit();
+
+        const instance = wrapper.instance() as ChannelInviteModalClass;
+        instance.handleSubmit();
+
         expect(wrapper.state('saving')).toEqual(true);
-        expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(1);
+        expect(instance.props.actions.addUsersToChannel).toHaveBeenCalledTimes(1);
         process.nextTick(() => {
             expect(wrapper.state('inviteError')).toBeUndefined();
             expect(wrapper.state('saving')).toEqual(false);
@@ -239,24 +250,28 @@ describe('components/channel_invite_modal', () => {
             onAddCallback,
         };
 
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal
                 {...props}
             />,
         );
 
         wrapper.setState({selectedUsers: users, show: true});
-        wrapper.instance().handleSubmit();
+        const instance = wrapper.instance() as ChannelInviteModalClass;
+        instance.handleSubmit();
+
         expect(onAddCallback).toHaveBeenCalled();
-        expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(0);
+        expect(instance.props.actions.addUsersToChannel).toHaveBeenCalledTimes(0);
     });
 
     test('should trim the search term', () => {
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal {...baseProps}/>,
         );
 
-        wrapper.instance().search(' something ');
+        const instance = wrapper.instance() as ChannelInviteModalClass;
+
+        instance.search(' something ');
         expect(wrapper.state('term')).toEqual('something');
     });
 
@@ -266,7 +281,7 @@ describe('components/channel_invite_modal', () => {
             canInviteGuests: true,
             emailInvitationsEnabled: true,
         };
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal {...props}/>,
         );
 
@@ -283,7 +298,7 @@ describe('components/channel_invite_modal', () => {
             canInviteGuests: false,
             emailInvitationsEnabled: false,
         };
-        const wrapper = shallow<ChannelInviteModal>(
+        const wrapper = shallowWithIntl(
             <ChannelInviteModal {...props}/>,
         );
 

webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx

@@ -4,7 +4,8 @@
 import {isEqual} from 'lodash';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 import styled from 'styled-components';
 
 import type {Channel} from '@mattermost/types/channels';
@@ -45,6 +46,7 @@ export type Props = {
     profilesInCurrentChannel: UserProfile[];
     profilesNotInCurrentTeam: UserProfile[];
     profilesFromRecentDMs: UserProfile[];
+    intl: IntlShape;
     membersInTeam: RelationOneToOne<UserProfile, TeamMembership>;
     userStatuses: RelationOneToOne<UserProfile, string>;
     onExited: () => void;
@@ -98,7 +100,7 @@ const UserMappingSpan = styled.span`
     right: 20px;
 `;
 
-export default class ChannelInviteModal extends React.PureComponent<Props, State> {
+export class ChannelInviteModal extends React.PureComponent<Props, State> {
     private searchTimeoutId = 0;
     private selectedItemRef = React.createRef<HTMLDivElement>();
 
@@ -499,6 +501,7 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
                 key='addUsersToChannelKey'
                 options={this.state.groupAndUserOptions}
                 optionRenderer={this.renderOption}
+                intl={this.props.intl}
                 selectedItemRef={this.selectedItemRef}
                 values={this.state.selectedUsers}
                 ariaLabelRenderer={this.renderAriaLabel}
@@ -578,3 +581,5 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
         );
     };
 }
+
+export default injectIntl(ChannelInviteModal);

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

@@ -59,6 +59,44 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addChannelsToSchemeKey"
       loading={true}
       numRemainingText={
@@ -171,6 +209,44 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
       handleInput={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
+      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",
+        }
+      }
       key="addChannelsToSchemeKey"
       loading={true}
       numRemainingText={

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

@@ -1,13 +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 {ChannelWithTeamData} from '@mattermost/types/channels';
 
 import ChannelSelectorModal from 'components/channel_selector_modal/channel_selector_modal';
 
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 import {TestHelper} from 'utils/test_helper';
 
 describe('components/ChannelSelectorModal', () => {
@@ -36,7 +36,7 @@ describe('components/ChannelSelectorModal', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallow(<ChannelSelectorModal {...defaultProps}/>);
+        const wrapper = shallowWithIntl(<ChannelSelectorModal {...defaultProps}/>);
         wrapper.setState({channels: [
             channel1,
             channel2,
@@ -46,7 +46,7 @@ describe('components/ChannelSelectorModal', () => {
     });
 
     test('exclude already selected', () => {
-        const wrapper = shallow(
+        const wrapper = shallowWithIntl(
             <ChannelSelectorModal
                 {...defaultProps}
                 excludeTeamIds={['teamid2']}

webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {Channel, ChannelSearchOpts, ChannelWithTeamData} from '@mattermost/types/channels';
 
@@ -22,6 +23,7 @@ type Props = {
     searchTerm: string;
     onModalDismissed?: () => void;
     onChannelsSelected?: (channels: ChannelWithTeamData[]) => void;
+    intl: IntlShape;
     groupID: string;
     actions: {
         loadChannels: (page?: number, perPage?: number, notAssociatedToGroup?: string, excludeDefaultChannels?: boolean, excludePolicyConstrained?: boolean) => Promise<{data: ChannelWithTeamData[]}>;
@@ -43,7 +45,7 @@ type State = {
 
 const CHANNELS_PER_PAGE = 50;
 
-export default class ChannelSelectorModal extends React.PureComponent<Props, State> {
+export class ChannelSelectorModal extends React.PureComponent<Props, State> {
     searchTimeoutId = 0;
     selectedItemRef = React.createRef<HTMLDivElement>();
 
@@ -245,6 +247,7 @@ export default class ChannelSelectorModal extends React.PureComponent<Props, Sta
                         key='addChannelsToSchemeKey'
                         options={options}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         selectedItemRef={this.selectedItemRef}
                         values={values}
                         valueRenderer={this.renderValue}
@@ -278,3 +281,5 @@ function compareChannels(a: Channel, b: Channel) {
     const bName = b.name.toUpperCase();
     return aName.localeCompare(bName);
 }
+
+export default injectIntl(ChannelSelectorModal);

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

@@ -114,7 +114,7 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
       <div
         className="group-add-user"
       >
-        <Connect(AddUserToGroupMultiSelect)
+        <Connect(injectIntl(AddUserToGroupMultiSelect))
           addUserCallback={[Function]}
           backButtonClass="multiselect-back"
           backButtonClick={[Function]}
@@ -232,7 +232,7 @@ exports[`component/create_user_groups_modal should match snapshot without back b
       <div
         className="group-add-user"
       >
-        <Connect(AddUserToGroupMultiSelect)
+        <Connect(injectIntl(AddUserToGroupMultiSelect))
           addUserCallback={[Function]}
           backButtonClass="multiselect-back"
           backButtonClick={[Function]}

webapp/channels/src/components/more_direct_channels/list/list.tsx

@@ -91,6 +91,7 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             ref={ref}
             options={options}
             optionRenderer={renderOptionValue}
+            intl={intl}
             selectedItemRef={props.selectedItemRef}
             values={props.values}
             valueRenderer={renderValue}
@@ -133,6 +134,7 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
         />
     );
 });
+
 export default List;
 
 function renderValue(props: {data: OptionValue}) {

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

@@ -3,6 +3,7 @@
 
 import {shallow} from 'enzyme';
 import React from 'react';
+import type {IntlShape} from 'react-intl';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 
@@ -27,6 +28,7 @@ describe('components/multiselect/multiselect', () => {
         handleDelete: jest.fn(),
         handleInput: jest.fn(),
         handleSubmit: jest.fn(),
+        intl: {} as IntlShape,
         optionRenderer: element,
         options: users,
         perPage: 5,
@@ -35,11 +37,14 @@ describe('components/multiselect/multiselect', () => {
         users,
         valueRenderer: element as any,
         values: [{id: 'id', label: 'label', value: 'value'}],
+        valueWithImage: false,
     };
 
     test('should match snapshot', () => {
         const wrapper = shallow(
-            <MultiSelect {...baseProps}/>,
+            <MultiSelect
+                {...baseProps}
+            />,
         );
 
         expect(wrapper).toMatchSnapshot();
@@ -47,7 +52,9 @@ describe('components/multiselect/multiselect', () => {
 
     test('should match snapshot for page 2', () => {
         const wrapper = shallow(
-            <MultiSelect {...baseProps}/>,
+            <MultiSelect
+                {...baseProps}
+            />,
         );
 
         wrapper.find('.filter-control__next').simulate('click');

webapp/channels/src/components/multiselect/multiselect.tsx

@@ -4,12 +4,12 @@
 import classNames from 'classnames';
 import React from 'react';
 import type {ReactNode} from 'react';
+import type {IntlShape} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
 import type {InputActionMeta} from 'react-select/src/types';
 
-import LocalizedIcon from 'components/localized_icon';
 import SaveButton from 'components/save_button';
 import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_icon';
 import Avatar from 'components/widgets/users/avatar';
@@ -40,6 +40,7 @@ export type Props<T extends Value> = {
     handleInput: (input: string, multiselect: MultiSelect<T>) => void;
     handlePageChange?: (newPage: number, currentPage: number) => void;
     handleSubmit: (value?: T[]) => void;
+    intl: IntlShape;
     loading?: boolean;
     saveButtonPosition?: string;
     maxValues?: number;
@@ -76,7 +77,7 @@ export type State = {
 
 const KeyCodes = Constants.KeyCodes;
 
-export default class MultiSelect<T extends Value> extends React.PureComponent<Props<T>, State> {
+export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>, State> {
     private listRef = React.createRef<MultiSelectList<T>>();
     private reactSelectRef = React.createRef<ReactSelect>();
     private selected: T | null = null;
@@ -332,9 +333,9 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
             noteTextContainer = (
                 <div className='multi-select__note'>
                     <div className='note__icon'>
-                        <LocalizedIcon
+                        <i
                             className='fa fa-info'
-                            title={{id: 'generic_icons.info', defaultMessage: 'Info Icon'}}
+                            title={this.props.intl.formatMessage({id: 'generic_icons.info', defaultMessage: 'Info Icon'})}
                         />
                     </div>
                     <div>{this.props.noteText}</div>
@@ -571,3 +572,5 @@ const styles = {
         };
     },
 };
+
+export default MultiSelect;

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

@@ -1,326 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/TeamSelectorModal should hide group constrained teams when excludeGroupConstrained is true 1`] = `
-<Modal
+<ContextConsumer>
-  animation={true}
+  <Component />
-  aria-labelledby="teamSelectorModalLabel"
+</ContextConsumer>
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal more-modal more-direct-channels team-selector-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[Function]}
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  role="dialog"
-  show={true}
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle
-      bsClass="modal-title"
-      componentClass="h1"
-      id="teamSelectorModalLabel"
-    >
-      <FormattedMarkdownMessage
-        defaultMessage="Add Teams to **Team Selection** List"
-        id="add_teams_to_scheme.title"
-      />
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
-  >
-    <ConfirmModal
-      confirmButtonClass="btn btn-primary"
-      confirmButtonText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Yes, Move Team"
-          id="add_teams_to_scheme.confirmation.accept"
-        />
-      }
-      message={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="This team is already selected in another team scheme, are you sure you want to move it to this team scheme?"
-          id="add_teams_to_scheme.confirmation.message"
-        />
-      }
-      modalClass=""
-      onCancel={[Function]}
-      onConfirm={[Function]}
-      show={false}
-      title={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Team Override Scheme Change?"
-          id="add_teams_to_scheme.confirmation.title"
-        />
-      }
-    />
-    <MultiSelect
-      ariaLabelRenderer={[Function]}
-      buttonSubmitText="Add"
-      focusOnLoad={true}
-      handleAdd={[Function]}
-      handleDelete={[Function]}
-      handleInput={[Function]}
-      handlePageChange={[Function]}
-      handleSubmit={[Function]}
-      key="addTeamsToSchemeKey"
-      loading={true}
-      numRemainingText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Use ↑↓ to browse, ↵ to select."
-          id="multiselect.selectTeams"
-        />
-      }
-      optionRenderer={[Function]}
-      options={
-        Array [
-          Object {
-            "allow_open_invite": false,
-            "allowed_domains": "",
-            "company_name": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "description": "",
-            "display_name": "Team 3",
-            "email": "",
-            "group_constrained": false,
-            "id": "id3",
-            "invite_id": "",
-            "label": "DN",
-            "name": "DN",
-            "scheme_id": "test",
-            "type": "O",
-            "update_at": 0,
-            "value": "id3",
-          },
-          Object {
-            "allow_open_invite": false,
-            "allowed_domains": "",
-            "company_name": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "description": "",
-            "display_name": "Team 4",
-            "email": "",
-            "group_constrained": false,
-            "id": "id4",
-            "invite_id": "",
-            "label": "DN",
-            "name": "DN",
-            "scheme_id": "",
-            "type": "O",
-            "update_at": 0,
-            "value": "id4",
-          },
-        ]
-      }
-      perPage={50}
-      placeholderText="Search and add teams"
-      saveButtonPosition="top"
-      saving={false}
-      savingEnabled={true}
-      selectedItemRef={
-        Object {
-          "current": null,
-        }
-      }
-      valueRenderer={[Function]}
-      valueWithImage={false}
-      values={Array []}
-    />
-  </ModalBody>
-</Modal>
 `;
 
 exports[`components/TeamSelectorModal should match snapshot 1`] = `
-<Modal
+<ContextConsumer>
-  animation={true}
+  <Component />
-  aria-labelledby="teamSelectorModalLabel"
+</ContextConsumer>
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal more-modal more-direct-channels team-selector-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[Function]}
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  role="dialog"
-  show={true}
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle
-      bsClass="modal-title"
-      componentClass="h1"
-      id="teamSelectorModalLabel"
-    >
-      <FormattedMarkdownMessage
-        defaultMessage="Add Teams to **Team Selection** List"
-        id="add_teams_to_scheme.title"
-      />
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
-  >
-    <ConfirmModal
-      confirmButtonClass="btn btn-primary"
-      confirmButtonText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Yes, Move Team"
-          id="add_teams_to_scheme.confirmation.accept"
-        />
-      }
-      message={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="This team is already selected in another team scheme, are you sure you want to move it to this team scheme?"
-          id="add_teams_to_scheme.confirmation.message"
-        />
-      }
-      modalClass=""
-      onCancel={[Function]}
-      onConfirm={[Function]}
-      show={false}
-      title={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Team Override Scheme Change?"
-          id="add_teams_to_scheme.confirmation.title"
-        />
-      }
-    />
-    <MultiSelect
-      ariaLabelRenderer={[Function]}
-      buttonSubmitText="Add"
-      focusOnLoad={true}
-      handleAdd={[Function]}
-      handleDelete={[Function]}
-      handleInput={[Function]}
-      handlePageChange={[Function]}
-      handleSubmit={[Function]}
-      key="addTeamsToSchemeKey"
-      loading={true}
-      numRemainingText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Use ↑↓ to browse, ↵ to select."
-          id="multiselect.selectTeams"
-        />
-      }
-      optionRenderer={[Function]}
-      options={
-        Array [
-          Object {
-            "allow_open_invite": false,
-            "allowed_domains": "",
-            "company_name": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "description": "",
-            "display_name": "Team 3",
-            "email": "",
-            "group_constrained": false,
-            "id": "id3",
-            "invite_id": "",
-            "label": "DN",
-            "name": "DN",
-            "scheme_id": "test",
-            "type": "O",
-            "update_at": 0,
-            "value": "id3",
-          },
-          Object {
-            "allow_open_invite": false,
-            "allowed_domains": "",
-            "company_name": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "description": "",
-            "display_name": "Team 4",
-            "email": "",
-            "group_constrained": false,
-            "id": "id4",
-            "invite_id": "",
-            "label": "DN",
-            "name": "DN",
-            "scheme_id": "",
-            "type": "O",
-            "update_at": 0,
-            "value": "id4",
-          },
-          Object {
-            "allow_open_invite": false,
-            "allowed_domains": "",
-            "company_name": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "description": "",
-            "display_name": "Team 5",
-            "email": "",
-            "group_constrained": true,
-            "id": "id5",
-            "invite_id": "",
-            "label": "DN",
-            "name": "DN",
-            "scheme_id": "",
-            "type": "O",
-            "update_at": 0,
-            "value": "id5",
-          },
-        ]
-      }
-      perPage={50}
-      placeholderText="Search and add teams"
-      saveButtonPosition="top"
-      saving={false}
-      savingEnabled={true}
-      selectedItemRef={
-        Object {
-          "current": null,
-        }
-      }
-      valueRenderer={[Function]}
-      valueWithImage={false}
-      values={Array []}
-    />
-  </ModalBody>
-</Modal>
 `;

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

@@ -3,6 +3,7 @@
 
 import {shallow} from 'enzyme';
 import React from 'react';
+import type {IntlShape} from 'react-intl';
 
 import {TestHelper} from 'utils/test_helper';
 
@@ -13,6 +14,7 @@ describe('components/TeamSelectorModal', () => {
     const defaultProps: Props = {
         currentSchemeId: 'xxx',
         alreadySelected: ['id1'],
+        intl: {} as IntlShape,
         searchTerm: '',
         teams: [
             TestHelper.getTeamMock({

webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {injectIntl, FormattedMessage} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 
@@ -25,6 +26,7 @@ type TeamValue = (Team & Value);
 export type Props = {
     currentSchemeId?: string;
     alreadySelected?: string[];
+    intl: IntlShape;
     excludeGroupConstrained?: boolean;
     searchTerm: string;
     teams: Team[];
@@ -49,7 +51,7 @@ type State = {
     confirmAddTeam: any;
 };
 
-export default class TeamSelectorModal extends React.PureComponent<Props, State> {
+export class TeamSelectorModal extends React.PureComponent<Props, State> {
     private searchTimeoutId?: number;
     private selectedItemRef?: React.RefObject<HTMLDivElement> | undefined;
     private currentSchemeId?: string;
@@ -297,6 +299,7 @@ export default class TeamSelectorModal extends React.PureComponent<Props, State>
                         key='addTeamsToSchemeKey'
                         options={teamsValues}
                         optionRenderer={this.renderOption}
+                        intl={this.props.intl}
                         selectedItemRef={this.selectedItemRef}
                         values={this.state.values}
                         valueRenderer={this.renderValue}
@@ -317,3 +320,5 @@ export default class TeamSelectorModal extends React.PureComponent<Props, State>
         );
     }
 }
+
+export default injectIntl(TeamSelectorModal);