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-55100] Replace usage of LocalizedIcon in 'create_user_groups_modal/create_user_groups_modal.tsx' with i/span tags (#25617)

Browse Source
This commit is contained in:
Siddhanth M
2023-12-13 23:45:10 +05:30
committed by GitHub
parent 440039ba98
commit 9d6bfc77ae
3 changed files with 59 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

88
webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.test.tsx
View File

@@ -1,14 +1,16 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {shallow} from 'enzyme';
import React from 'react';
import type {UserProfile} from '@mattermost/types/users';
import type {Value} from 'components/multiselect/multiselect';
import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
import CreateUserGroupsModal from './create_user_groups_modal';
import type {CreateUserGroupsModal as CreateUserGroupsModalClass} from './create_user_groups_modal';
type UserProfileValue = Value & UserProfile;
@@ -35,7 +37,7 @@ describe('component/create_user_groups_modal', () => {
};
test('should match snapshot with back button', () => {
const wrapper = shallow(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
@@ -44,7 +46,7 @@ describe('component/create_user_groups_modal', () => {
});
test('should match snapshot without back button', () => {
const wrapper = shallow(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
backButtonCallback={undefined}
@@ -54,14 +56,15 @@ describe('component/create_user_groups_modal', () => {
});
test('should create group', () => {
const wrapper = shallow<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
wrapper.setState({name: 'Ursa', mention: 'ursa', usersToAdd: users});
wrapper.instance().createGroup(users);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
actions={{
@@ -157,8 +165,9 @@ describe('component/create_user_groups_modal', () => {
/>,
);
wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
wrapper.instance().createGroup(users);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
actions={{
@@ -179,8 +188,9 @@ describe('component/create_user_groups_modal', () => {
/>,
);
wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
wrapper.instance().createGroup(users);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
/>,
);
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<CreateUserGroupsModal>(
const wrapper = shallowWithIntl(
<CreateUserGroupsModal
{...baseProps}
actions={{
@@ -231,8 +244,9 @@ describe('component/create_user_groups_modal', () => {
/>,
);
wrapper.setState({name: 'Ursa', mention: '@ursa', usersToAdd: users});
wrapper.instance().createGroup(users);
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.');

16
webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
View File

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