From b4ee90afcae17d8ded0178e4f232e82fc8234838 Mon Sep 17 00:00:00 2001 From: Kapil Dutta Date: Mon, 1 Jan 2024 17:42:03 +0530 Subject: [PATCH] [MM-55101] Replace usage of LocalizedIcon in 'multiselect.tsx' with i/span tags (#25665) --- .../add_groups_to_channel_modal.test.tsx.snap | 1 + .../add_groups_to_channel_modal.test.tsx | 41 ++- .../add_groups_to_channel_modal.tsx | 10 +- .../add_groups_to_team_modal.test.tsx.snap | 38 ++ .../add_groups_to_team_modal.test.tsx | 64 ++-- .../add_groups_to_team_modal.tsx | 8 +- ...dd_user_to_group_multiselect.test.tsx.snap | 114 ++++++ .../add_user_to_group_multiselect.test.tsx | 21 +- .../add_user_to_group_multiselect.tsx | 9 +- .../add_users_to_group_modal.test.tsx.snap | 2 +- .../add_users_to_team_modal.test.tsx.snap | 76 ++++ .../add_users_to_team_modal.test.tsx | 15 +- .../add_users_to_team_modal.tsx | 9 +- .../__snapshots__/group_details.test.tsx.snap | 4 +- .../add_users_to_role_modal.test.tsx.snap | 228 ++++++++++++ .../add_users_to_role_modal.test.tsx | 14 +- .../add_users_to_role_modal.tsx | 9 +- .../channel_invite_modal.test.tsx.snap | 114 ++++++ .../channel_invite_modal.test.tsx | 59 ++-- .../channel_invite_modal.tsx | 9 +- .../channel_selector_modal.test.tsx.snap | 76 ++++ .../channel_selector_modal.test.tsx | 6 +- .../channel_selector_modal.tsx | 9 +- .../create_user_groups_modal.test.tsx.snap | 4 +- .../more_direct_channels/list/list.tsx | 2 + .../multiselect/multiselect.test.tsx | 11 +- .../components/multiselect/multiselect.tsx | 11 +- .../team_selector_modal.test.tsx.snap | 325 +----------------- .../team_selector_modal.test.tsx | 2 + .../team_selector_modal.tsx | 9 +- 30 files changed, 861 insertions(+), 439 deletions(-) diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap index 4ecbf9806d..36b7c687aa 100644 --- a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap +++ b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap @@ -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} diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.test.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.test.tsx index d9b768216b..b5191ecaa3 100644 --- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.test.tsx +++ b/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( , ); expect(wrapper).toMatchSnapshot(); }); test('should match state when handleResponse is called', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); 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( , ); - 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( , ); 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( , ); 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( , ); - 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( , ); @@ -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( , ); @@ -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( , ); - expect((wrapper.instance() as AddGroupsToChannelModal).renderValue({data: {display_name: 'foo'}})).toEqual('foo'); + expect((wrapper.instance() as AddGroupsToChannelModalClass).renderValue({data: {display_name: 'foo'}})).toEqual('foo'); }); }); diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx index 2b9a63ee21..a69f8fd0d8 100644 --- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx +++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx @@ -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 { +export class AddGroupsToChannelModal extends React.PureComponent { private searchTimeoutId: number; private selectedItemRef: React.RefObject; @@ -288,6 +289,7 @@ export default class AddGroupsToChannelModal extends React.PureComponent { const baseProps = { @@ -24,34 +26,36 @@ describe('components/AddGroupsToTeamModal', () => { }; test('should match snapshot', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); expect(wrapper).toMatchSnapshot(); }); test('should have called onExited when handleExit is called', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); - wrapper.instance().handleExit(); + (wrapper.instance() as AddGroupsToTeamModalClass).handleExit(); expect(baseProps.onExited).toHaveBeenCalledTimes(1); }); test('should match state when handleResponse is called', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); + 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( , ); - 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( + const wrapper = shallowWithIntl( , ); 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( + const wrapper = shallowWithIntl( , ); - 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( + const wrapper = shallowWithIntl( , ); + 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( + const wrapper = shallowWithIntl( , ); + 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( + const wrapper = shallowWithIntl( , ); + 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( + const wrapper = shallowWithIntl( , ); + 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'); }); }); diff --git a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx index 757309aecf..11dbb52149 100644 --- a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx +++ b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx @@ -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 { +export class AddGroupsToTeamModal extends React.PureComponent { private searchTimeoutId: number; private readonly selectedItemRef: RefObject; @@ -299,6 +301,7 @@ export default class AddGroupsToTeamModal extends React.PureComponent { }; test('should match snapshot without any profiles', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , @@ -59,7 +61,7 @@ describe('component/add_user_to_group_multiselect', () => { }); test('should match snapshot with profiles', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { }); test('should match snapshot with different submit button text', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { }); test('should trim the search term', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); - 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( + const wrapper = shallowWithIntl( , ); + const instance = wrapper.instance() as AddUserToGroupMultiSelectClass; wrapper.setState({values: users}); - wrapper.instance().handleSubmit(); - expect(wrapper.instance().props.onSubmitCallback).toHaveBeenCalledTimes(1); + instance.handleSubmit(); + expect(instance.props.onSubmitCallback).toHaveBeenCalledTimes(1); process.nextTick(() => { done(); }); diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx b/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx index 15a85c5ce1..e198834977 100644 --- a/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx +++ b/webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx @@ -2,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; 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 { +export class AddUserToGroupMultiSelect extends React.PureComponent { private searchTimeoutId = 0; selectedItemRef; @@ -218,6 +222,7 @@ export default class AddUserToGroupMultiSelect extends React.PureComponent - { 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( , @@ -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( { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); 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( , ); - const addUsers = wrapper.instance() as AddUsersToTeamModal; + const addUsers = wrapper.instance() as AddUsersToTeamModalClass; // search profiles when search term given addUsers.search('foo'); diff --git a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx index 3191e623d4..abd51afb0f 100644 --- a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx +++ b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx @@ -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 { +export class AddUsersToTeamModal extends React.PureComponent { selectedItemRef: React.RefObject; public constructor(props: Props) { @@ -239,6 +241,7 @@ export default class AddUsersToTeamModal extends React.PureComponent - - { }; test('should have single passed value', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( ); @@ -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( ); @@ -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( ); @@ -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( ); @@ -70,7 +70,7 @@ describe('admin_console/add_users_to_role_modal', () => { searchProfiles: jest.fn(), }, }; - const wrapper = shallow( + const wrapper = shallowWithIntl( ); @@ -87,7 +87,7 @@ describe('admin_console/add_users_to_role_modal', () => { getProfiles: jest.fn(), }, }; - const wrapper = shallow( + const wrapper = shallowWithIntl( ); diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx index a7f2bbe316..d89aeca75f 100644 --- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx +++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx @@ -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, term: string): Rec return filterProfiles(profileListToMap(filteredProfilesList), {}); } -export default class AddUsersToRoleModal extends React.PureComponent { +export class AddUsersToRoleModal extends React.PureComponent { constructor(props: Props) { super(props); @@ -248,6 +250,7 @@ export default class AddUsersToRoleModal extends React.PureComponent { @@ -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( { }); test('should match snapshot for channel_invite_modal with profiles from DMs', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { }); test('should match snapshot with exclude and include users', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { }); test('should match snapshot for channel_invite_modal with userStatuses', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { 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( + const wrapper = shallowWithIntl( , ); 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( , ); @@ -184,16 +189,19 @@ describe('components/channel_invite_modal', () => { }); test('should fail to add users on handleSubmit', (done) => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); 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( + const wrapper = shallowWithIntl( , ); 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( + const wrapper = shallowWithIntl( , ); 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( + const wrapper = shallowWithIntl( , ); - 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( + const wrapper = shallowWithIntl( , ); @@ -283,7 +298,7 @@ describe('components/channel_invite_modal', () => { canInviteGuests: false, emailInvitationsEnabled: false, }; - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx index 058e75a334..86cdad98c1 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx @@ -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; userStatuses: RelationOneToOne; onExited: () => void; @@ -98,7 +100,7 @@ const UserMappingSpan = styled.span` right: 20px; `; -export default class ChannelInviteModal extends React.PureComponent { +export class ChannelInviteModal extends React.PureComponent { private searchTimeoutId = 0; private selectedItemRef = React.createRef(); @@ -499,6 +501,7 @@ export default class ChannelInviteModal extends React.PureComponent { @@ -36,7 +36,7 @@ describe('components/ChannelSelectorModal', () => { }; test('should match snapshot', () => { - const wrapper = shallow(); + const wrapper = shallowWithIntl(); wrapper.setState({channels: [ channel1, channel2, @@ -46,7 +46,7 @@ describe('components/ChannelSelectorModal', () => { }); test('exclude already selected', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( 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 { +export class ChannelSelectorModal extends React.PureComponent { searchTimeoutId = 0; selectedItemRef = React.createRef(); @@ -245,6 +247,7 @@ export default class ChannelSelectorModal extends React.PureComponent - - ); }); + export default List; function renderValue(props: {data: OptionValue}) { diff --git a/webapp/channels/src/components/multiselect/multiselect.test.tsx b/webapp/channels/src/components/multiselect/multiselect.test.tsx index c8508b4b32..6a0d2983c7 100644 --- a/webapp/channels/src/components/multiselect/multiselect.test.tsx +++ b/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( - , + , ); expect(wrapper).toMatchSnapshot(); @@ -47,7 +52,9 @@ describe('components/multiselect/multiselect', () => { test('should match snapshot for page 2', () => { const wrapper = shallow( - , + , ); wrapper.find('.filter-control__next').simulate('click'); diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx index 1567ed931b..116e77eaa3 100644 --- a/webapp/channels/src/components/multiselect/multiselect.tsx +++ b/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 = { handleInput: (input: string, multiselect: MultiSelect) => 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 extends React.PureComponent, State> { +export class MultiSelect extends React.PureComponent, State> { private listRef = React.createRef>(); private reactSelectRef = React.createRef(); private selected: T | null = null; @@ -332,9 +333,9 @@ export default class MultiSelect extends React.PureComponent
-
{this.props.noteText}
@@ -571,3 +572,5 @@ const styles = { }; }, }; + +export default MultiSelect; diff --git a/webapp/channels/src/components/team_selector_modal/__snapshots__/team_selector_modal.test.tsx.snap b/webapp/channels/src/components/team_selector_modal/__snapshots__/team_selector_modal.test.tsx.snap index ccb027b315..e5b1be76a2 100644 --- a/webapp/channels/src/components/team_selector_modal/__snapshots__/team_selector_modal.test.tsx.snap +++ b/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`] = ` - - - - - - - - - } - message={ - - } - modalClass="" - onCancel={[Function]} - onConfirm={[Function]} - show={false} - title={ - - } - /> - - } - 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 []} - /> - - + + + `; exports[`components/TeamSelectorModal should match snapshot 1`] = ` - - - - - - - - - } - message={ - - } - modalClass="" - onCancel={[Function]} - onConfirm={[Function]} - show={false} - title={ - - } - /> - - } - 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 []} - /> - - + + + `; diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.test.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.test.tsx index ec15fe93e9..287a3b37cf 100644 --- a/webapp/channels/src/components/team_selector_modal/team_selector_modal.test.tsx +++ b/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({ diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx index 924eede687..6a358ddaa8 100644 --- a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx +++ b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx @@ -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 { +export class TeamSelectorModal extends React.PureComponent { private searchTimeoutId?: number; private selectedItemRef?: React.RefObject | undefined; private currentSchemeId?: string; @@ -297,6 +299,7 @@ export default class TeamSelectorModal extends React.PureComponent 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 ); } } + +export default injectIntl(TeamSelectorModal);