diff --git a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap index 21cec084bf..af42d2d339 100644 --- a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap +++ b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap @@ -42,13 +42,7 @@ exports[`component/create_user_groups_modal should match snapshot with back butt onClick={[Function]} type="button" > - diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx index ac1cd4e7af..996034de34 100644 --- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx +++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx @@ -1,14 +1,16 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {shallow} from 'enzyme'; import React from 'react'; import type {UserProfile} from '@mattermost/types/users'; import type {Value} from 'components/multiselect/multiselect'; +import {shallowWithIntl} from 'tests/helpers/intl-test-helper'; + import CreateUserGroupsModal from './create_user_groups_modal'; +import type {CreateUserGroupsModal as CreateUserGroupsModalClass} from './create_user_groups_modal'; type UserProfileValue = Value & UserProfile; @@ -35,7 +37,7 @@ describe('component/create_user_groups_modal', () => { }; test('should match snapshot with back button', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , @@ -44,7 +46,7 @@ describe('component/create_user_groups_modal', () => { }); test('should match snapshot without back button', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( { }); test('should create group', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: 'ursa', usersToAdd: users}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual(''); @@ -69,14 +72,15 @@ describe('component/create_user_groups_modal', () => { }); test('mention regex error', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: 'ursa!/'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Invalid character in mention.'); @@ -84,14 +88,15 @@ describe('component/create_user_groups_modal', () => { }); test('create a mention with special characters', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: 'ursa.-_'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual(''); @@ -99,14 +104,15 @@ describe('component/create_user_groups_modal', () => { }); test('fail to create with empty name', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: '', mention: 'ursa'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('nameInputErrorText')).toEqual('Name is a required field.'); @@ -114,14 +120,15 @@ describe('component/create_user_groups_modal', () => { }); test('fail to create with empty mention', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: ''}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Mention is a required field.'); @@ -129,14 +136,15 @@ describe('component/create_user_groups_modal', () => { }); test('should create when mention begins with @', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual(''); @@ -147,7 +155,7 @@ describe('component/create_user_groups_modal', () => { test('should fail to create with unknown error', () => { const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'insert_error'}})); - const wrapper = shallow( + const wrapper = shallowWithIntl( { />, ); wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(true); expect(wrapper.state('mentionInputErrorText')).toEqual(''); @@ -169,7 +178,7 @@ describe('component/create_user_groups_modal', () => { test('should fail to create with duplicate mention error', () => { const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'app.custom_group.unique_name'}})); - const wrapper = shallow( + const wrapper = shallowWithIntl( { />, ); wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Mention needs to be unique.'); @@ -189,30 +199,33 @@ describe('component/create_user_groups_modal', () => { }); test('fail to create with reserved word for mention', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); wrapper.setState({name: 'Ursa', mention: 'all'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + let instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.'); }); wrapper.setState({name: 'Ursa', mention: 'here'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.'); }); wrapper.setState({name: 'Ursa', mention: 'channel'}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); + instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(baseProps.actions.createGroupWithUserIds).toHaveBeenCalledTimes(0); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('Mention contains a reserved word.'); @@ -221,7 +234,7 @@ describe('component/create_user_groups_modal', () => { test('should fail to create with duplicate mention error', () => { const createGroupWithUserIds = jest.fn().mockImplementation(() => Promise.resolve({error: {message: 'test error', server_error_id: 'app.group.username_conflict'}})); - const wrapper = shallow( + const wrapper = shallowWithIntl( { />, ); wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users}); - wrapper.instance().createGroup(users); - expect(wrapper.instance().props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); + const instance = wrapper.instance() as CreateUserGroupsModalClass; + instance.createGroup(users); + expect(instance.props.actions.createGroupWithUserIds).toHaveBeenCalledTimes(1); process.nextTick(() => { expect(wrapper.state('showUnknownError')).toEqual(false); expect(wrapper.state('mentionInputErrorText')).toEqual('A username already exists with this name. Mention must be unique.'); diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx index fb7c3c98d7..5e2b94df60 100644 --- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx +++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {Modal} from 'react-bootstrap'; -import {FormattedMessage} from 'react-intl'; +import {FormattedMessage, type IntlShape, injectIntl} from 'react-intl'; import type {GroupCreateWithUserIds} from '@mattermost/types/groups'; import type {UserProfile} from '@mattermost/types/users'; @@ -11,11 +11,9 @@ import type {UserProfile} from '@mattermost/types/users'; import type {ActionResult} from 'mattermost-redux/types/actions'; import AddUserToGroupMultiSelect from 'components/add_user_to_group_multiselect'; -import LocalizedIcon from 'components/localized_icon'; import Input from 'components/widgets/inputs/input/input'; import Constants, {ItemStatus} from 'utils/constants'; -import {t} from 'utils/i18n'; import * as Utils from 'utils/utils'; import {localizeMessage} from 'utils/utils'; @@ -31,6 +29,7 @@ export type Props = { createGroupWithUserIds: (group: GroupCreateWithUserIds) => Promise; openModal:

(modalData: ModalData

) => void; }; + intl: IntlShape; } type State = { @@ -46,7 +45,7 @@ type State = { saving: boolean; } -export default class CreateUserGroupsModal extends React.PureComponent { +export class CreateUserGroupsModal extends React.PureComponent { constructor(props: Props) { super(props); @@ -182,15 +181,12 @@ export default class CreateUserGroupsModal extends React.PureComponent { this.goBack(); }} > - +