IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kapil Dutta
2024-01-01 17:42:03 +05:30
committed by GitHub
parent ef0c5e2125
commit b4ee90afca
30 changed files with 861 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
View File

@@ -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}

41
webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.test.tsx
View File

@@ -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');
});
});

10
webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
View File

@@ -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);

38
webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
View File

@@ -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}

64
webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.test.tsx
View File

@@ -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');
});
});

8
webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
View File

@@ -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);

114
webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
View File

@@ -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}

21
webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.test.tsx
View File

@@ -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();
expect(wrapper.instance().props.onSubmitCallback).toHaveBeenCalledTimes(1);
instance.handleSubmit();
expect(instance.props.onSubmitCallback).toHaveBeenCalledTimes(1);
process.nextTick(() => {
done();
});

9
webapp/channels/src/components/add_user_to_group_multiselect/add_user_to_group_multiselect.tsx
View File

@@ -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);

2
webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
View File

@@ -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]}

76
webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
View File

@@ -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}

15
webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.test.tsx
View File

@@ -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');

9
webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
View File

@@ -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);

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

@@ -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",

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

@@ -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}

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

@@ -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}
/>);

9
webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
View File

@@ -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);

114
webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
View File

@@ -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]}

59
webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx
View File

@@ -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}/>,
);

9
webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
View File

@@ -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);

76
webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
View File

@@ -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={

6
webapp/channels/src/components/channel_selector_modal/channel_selector_modal.test.tsx
View File

@@ -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']}

9
webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
View File

@@ -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);

4
webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
View File

@@ -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]}

2
webapp/channels/src/components/more_direct_channels/list/list.tsx
View File

@@ -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}) {

11
webapp/channels/src/components/multiselect/multiselect.test.tsx
View File

@@ -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');

11
webapp/channels/src/components/multiselect/multiselect.tsx
View File

@@ -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;

325
webapp/channels/src/components/team_selector_modal/__snapshots__/team_selector_modal.test.tsx.snap
View File

@@ -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
animation={true}
aria-labelledby="teamSelectorModalLabel"
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>
<ContextConsumer>
<Component />
</ContextConsumer>
`;
exports[`components/TeamSelectorModal should match snapshot 1`] = `
<Modal
animation={true}
aria-labelledby="teamSelectorModalLabel"
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>
<ContextConsumer>
<Component />
</ContextConsumer>
`;

2
webapp/channels/src/components/team_selector_modal/team_selector_modal.test.tsx
View File

@@ -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({

9
webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
View File

@@ -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);