mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-55113] Replace usage of LocalizedIcon in 'user_settings_security.tsx' with i/span tags (#25151)

Просмотр исходного кода
Этот коммит содержится в:
Nicolas Le Cam
2023-10-28 09:19:16 +02:00
коммит произвёл GitHub
родитель 1043aa5330
Коммит 1f3bb8b81d
3 изменённых файлов: 106 добавлений и 146 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

108
webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
Просмотреть файл

@@ -24,15 +24,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
className="modal-back"
>
<LocalizedIcon
<i
className="fa fa-angle-left"
onClick={[MockFunction]}
title={
Object {
"defaultMessage": "Collapse Icon",
"id": "generic_icons.collapse",
}
}
title="Collapse Icon"
/>
</div>
<MemoizedFormattedMessage
@@ -137,14 +132,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAccessHistory"
modalId="access_history"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Access History Icon",
"id": "user.settings.security.viewHistory.icon",
}
}
title="Access History Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View Access History"
@@ -164,14 +154,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAndLogOutOfActiveSessions"
modalId="activity_log"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Active Sessions Icon",
"id": "user.settings.security.logoutActiveSessions.icon",
}
}
title="Active Sessions Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View and Log Out of Active Sessions"
@@ -206,15 +191,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
className="modal-back"
>
<LocalizedIcon
<i
className="fa fa-angle-left"
onClick={[MockFunction]}
title={
Object {
"defaultMessage": "Collapse Icon",
"id": "generic_icons.collapse",
}
}
title="Collapse Icon"
/>
</div>
<MemoizedFormattedMessage
@@ -319,14 +299,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAccessHistory"
modalId="access_history"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Access History Icon",
"id": "user.settings.security.viewHistory.icon",
}
}
title="Access History Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View Access History"
@@ -346,14 +321,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAndLogOutOfActiveSessions"
modalId="activity_log"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Active Sessions Icon",
"id": "user.settings.security.logoutActiveSessions.icon",
}
}
title="Active Sessions Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View and Log Out of Active Sessions"
@@ -388,15 +358,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
className="modal-back"
>
<LocalizedIcon
<i
className="fa fa-angle-left"
onClick={[MockFunction]}
title={
Object {
"defaultMessage": "Collapse Icon",
"id": "generic_icons.collapse",
}
}
title="Collapse Icon"
/>
</div>
<MemoizedFormattedMessage
@@ -501,14 +466,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAccessHistory"
modalId="access_history"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Access History Icon",
"id": "user.settings.security.viewHistory.icon",
}
}
title="Access History Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View Access History"
@@ -528,14 +488,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAndLogOutOfActiveSessions"
modalId="activity_log"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Active Sessions Icon",
"id": "user.settings.security.logoutActiveSessions.icon",
}
}
title="Active Sessions Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View and Log Out of Active Sessions"
@@ -570,15 +525,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
className="modal-back"
>
<LocalizedIcon
<i
className="fa fa-angle-left"
onClick={[MockFunction]}
title={
Object {
"defaultMessage": "Collapse Icon",
"id": "generic_icons.collapse",
}
}
title="Collapse Icon"
/>
</div>
<MemoizedFormattedMessage
@@ -683,14 +633,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAccessHistory"
modalId="access_history"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Access History Icon",
"id": "user.settings.security.viewHistory.icon",
}
}
title="Access History Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View Access History"
@@ -710,14 +655,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="viewAndLogOutOfActiveSessions"
modalId="activity_log"
>
<LocalizedIcon
<i
className="fa fa-clock-o"
title={
Object {
"defaultMessage": "Active Sessions Icon",
"id": "user.settings.security.logoutActiveSessions.icon",
}
}
title="Active Sessions Icon"
/>
<MemoizedFormattedMessage
defaultMessage="View and Log Out of Active Sessions"

43
webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx
Просмотреть файл

@@ -4,11 +4,13 @@
import {shallow} from 'enzyme';
import React from 'react';
import type {OAuthApp} from '@mattermost/types/integrations';
import type {UserProfile} from '@mattermost/types/users';
import type {MockIntl} from 'tests/helpers/intl-test-helper';
import type * as Utils from 'utils/utils';
import UserSettingsSecurity from './user_settings_security';
import {SecurityTab} from './user_settings_security';
jest.mock('utils/utils', () => {
const original = jest.requireActual('utils/utils');
@@ -45,40 +47,43 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
experimentalEnableAuthenticationTransfer: true,
passwordConfig: {} as ReturnType<typeof Utils.getPasswordConfig>,
militaryTime: false,
intl: {
formatMessage: jest.fn(({id, defaultMessage}) => defaultMessage || id),
} as MockIntl,
};
test('should match snapshot, enable google', () => {
const props = {...requiredProps, enableSaml: false};
const wrapper = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, enable gitlab', () => {
const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithGitLab: true};
const wrapper = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, enable office365', () => {
const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithOffice365: true};
const wrapper = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, enable openID', () => {
const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithOpenId: true};
const wrapper = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
expect(wrapper).toMatchSnapshot();
});
test('componentDidMount() should have called getAuthorizedOAuthApps', () => {
const props = {...requiredProps, enableOAuthServiceProvider: true};
shallow(<UserSettingsSecurity {...props}/>);
shallow<SecurityTab>(<SecurityTab {...props}/>);
expect(requiredProps.actions.getAuthorizedOAuthApps).toHaveBeenCalled();
});
@@ -93,7 +98,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
enableOAuthServiceProvider: true,
};
const wrapper = shallow<UserSettingsSecurity>(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
await promise;
@@ -110,7 +115,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
enableOAuthServiceProvider: true,
};
const wrapper = shallow<UserSettingsSecurity>(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
await promise;
@@ -118,9 +123,9 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
});
test('submitPassword() should not have called updateUserPassword', async () => {
const wrapper = shallow(<UserSettingsSecurity {...requiredProps}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...requiredProps}/>);
await (wrapper.instance() as UserSettingsSecurity).submitPassword();
await wrapper.instance().submitPassword();
expect(requiredProps.actions.updateUserPassword).toHaveBeenCalledTimes(0);
});
@@ -130,7 +135,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
...requiredProps,
actions: {...requiredProps.actions, updateUserPassword},
};
const wrapper = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
const password = 'psw';
const state = {
@@ -140,7 +145,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
};
wrapper.setState(state);
await (wrapper.instance() as UserSettingsSecurity).submitPassword();
await wrapper.instance().submitPassword();
expect(updateUserPassword).toHaveBeenCalled();
expect(updateUserPassword).toHaveBeenCalledWith(
@@ -160,9 +165,9 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
preventDefault: jest.fn(),
};
const wrapper = shallow(<UserSettingsSecurity {...requiredProps}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...requiredProps}/>);
wrapper.setState({authorizedApps: []});
(wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
wrapper.instance().deauthorizeApp(event);
expect(requiredProps.actions.deauthorizeOAuthApp).toHaveBeenCalled();
expect(requiredProps.actions.deauthorizeOAuthApp).toHaveBeenCalledWith(
@@ -177,16 +182,16 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
actions: {...requiredProps.actions, deauthorizeOAuthApp: () => promise},
};
const wrapper: any = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
const appId = 'appId';
const apps = [{id: appId}, {id: '2'}];
const apps = [{id: appId}, {id: '2'}] as OAuthApp[];
const event: any = {
currentTarget: {getAttribute: jest.fn().mockReturnValue(appId)},
preventDefault: jest.fn(),
};
wrapper.setState({authorizedApps: apps});
(wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
wrapper.instance().deauthorizeApp(event);
await promise;
@@ -201,13 +206,13 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
actions: {...requiredProps.actions, deauthorizeOAuthApp: () => promise},
};
const wrapper: any = shallow(<UserSettingsSecurity {...props}/>);
const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
const event: any = {
currentTarget: {getAttribute: jest.fn().mockReturnValue('appId')},
preventDefault: jest.fn(),
};
(wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
wrapper.instance().deauthorizeApp(event);
await promise;

101
webapp/channels/src/components/user_settings/security/user_settings_security.tsx
Просмотреть файл

@@ -4,7 +4,8 @@
/* eslint-disable max-lines */
import React from 'react';
import {FormattedDate, FormattedMessage, FormattedTime} from 'react-intl';
import type {IntlShape} from 'react-intl';
import {FormattedDate, FormattedMessage, FormattedTime, injectIntl} from 'react-intl';
import {Link} from 'react-router-dom';
import type {OAuthApp} from '@mattermost/types/integrations';
@@ -15,14 +16,12 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
import AccessHistoryModal from 'components/access_history_modal';
import ActivityLogModal from 'components/activity_log_modal';
import ExternalLink from 'components/external_link';
import LocalizedIcon from 'components/localized_icon';
import SettingItem from 'components/setting_item';
import SettingItemMax from 'components/setting_item_max';
import ToggleModalButton from 'components/toggle_modal_button';
import icon50 from 'images/icon50x50.png';
import Constants from 'utils/constants';
import {t} from 'utils/i18n';
import * as Utils from 'utils/utils';
import MfaSection from './mfa_section';
@@ -65,6 +64,7 @@ type Props = {
passwordConfig: ReturnType<typeof Utils.getPasswordConfig>;
militaryTime: boolean;
actions: Actions;
intl: IntlShape;
};
type State = {
@@ -78,7 +78,7 @@ type State = {
authorizedApps: OAuthApp[];
};
export default class SecurityTab extends React.PureComponent<Props, State> {
export class SecurityTab extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = this.getDefaultState();
@@ -123,10 +123,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
if (currentPassword === '') {
this.setState({
passwordError: Utils.localizeMessage(
'user.settings.security.currentPasswordError',
'Please enter your current password.',
),
passwordError: this.props.intl.formatMessage({
id: 'user.settings.security.currentPasswordError',
defaultMessage: 'Please enter your current password.',
}),
serverError: '',
});
return;
@@ -146,10 +146,11 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
if (newPassword !== confirmPassword) {
const defaultState = Object.assign(this.getDefaultState(), {
passwordError: Utils.localizeMessage(
'user.settings.security.passwordMatchError',
'The new passwords you entered do not match.',
),
passwordError: this.props.intl.formatMessage({
id: 'user.settings.security.passwordMatchError',
defaultMessage:
'The new passwords you entered do not match.',
}),
serverError: '',
});
this.setState(defaultState);
@@ -267,10 +268,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
type='password'
onChange={this.updateCurrentPassword}
value={this.state.currentPassword}
aria-label={Utils.localizeMessage(
'user.settings.security.currentPassword',
'Current Password',
)}
aria-label={this.props.intl.formatMessage({
id: 'user.settings.security.currentPassword',
defaultMessage: 'Current Password',
})}
/>
</div>
</div>,
@@ -293,10 +294,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
type='password'
onChange={this.updateNewPassword}
value={this.state.newPassword}
aria-label={Utils.localizeMessage(
'user.settings.security.newPassword',
'New Password',
)}
aria-label={this.props.intl.formatMessage({
id: 'user.settings.security.newPassword',
defaultMessage: 'New Password',
})}
/>
</div>
</div>,
@@ -319,10 +320,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
type='password'
onChange={this.updateConfirmPassword}
value={this.state.confirmPassword}
aria-label={Utils.localizeMessage(
'user.settings.security.retypePassword',
'Retype New Password',
)}
aria-label={this.props.intl.formatMessage({
id: 'user.settings.security.retypePassword',
defaultMessage: 'Retype New Password',
})}
/>
</div>
</div>,
@@ -721,10 +722,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
max = (
<SettingItemMax
title={Utils.localizeMessage(
'user.settings.security.method',
'Sign-in Method',
)}
title={this.props.intl.formatMessage({
id: 'user.settings.security.method',
defaultMessage: 'Sign-in Method',
})}
extraInfo={extraInfo}
inputs={inputs}
serverError={this.state.serverError}
@@ -791,10 +792,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
<SettingItem
active={active}
areAllSectionsInactive={this.props.activeSection === ''}
title={Utils.localizeMessage(
'user.settings.security.method',
'Sign-in Method',
)}
title={this.props.intl.formatMessage({
id: 'user.settings.security.method',
defaultMessage: 'Sign-in Method',
})}
describe={describe}
section={SECTION_SIGNIN}
updateSection={this.handleUpdateSection}
@@ -929,10 +930,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
<SettingItem
active={active}
areAllSectionsInactive={this.props.activeSection === ''}
title={Utils.localizeMessage(
'user.settings.security.oauthApps',
'OAuth 2.0 Applications',
)}
title={this.props.intl.formatMessage({
id: 'user.settings.security.oauthApps',
defaultMessage: 'OAuth 2.0 Applications',
})}
describe={
<FormattedMessage
id='user.settings.security.oauthAppsDescription'
@@ -994,7 +995,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
type='button'
className='close'
data-dismiss='modal'
aria-label={Utils.localizeMessage('user.settings.security.close', 'Close')}
aria-label={this.props.intl.formatMessage({
id: 'user.settings.security.close',
defaultMessage: 'Close',
})}
onClick={this.props.closeModal}
>
<span aria-hidden='true'>{'×'}</span>
@@ -1003,9 +1007,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
className='modal-title'
>
<div className='modal-back'>
<LocalizedIcon
<i
className='fa fa-angle-left'
title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
title={this.props.intl.formatMessage({
id: 'generic_icons.collapse',
defaultMessage: 'Collapse Icon',
})}
onClick={this.props.collapseModal}
/>
</div>
@@ -1044,9 +1051,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
dialogType={AccessHistoryModal}
id='viewAccessHistory'
>
<LocalizedIcon
<i
className='fa fa-clock-o'
title={{id: t('user.settings.security.viewHistory.icon'), defaultMessage: 'Access History Icon'}}
title={this.props.intl.formatMessage({
id: 'user.settings.security.viewHistory.icon',
defaultMessage: 'Access History Icon',
})}
/>
<FormattedMessage
id='user.settings.security.viewHistory'
@@ -1059,9 +1069,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
dialogType={ActivityLogModal}
id='viewAndLogOutOfActiveSessions'
>
<LocalizedIcon
<i
className='fa fa-clock-o'
title={{id: t('user.settings.security.logoutActiveSessions.icon'), defaultMessage: 'Active Sessions Icon'}}
title={this.props.intl.formatMessage({
id: 'user.settings.security.logoutActiveSessions.icon',
defaultMessage: 'Active Sessions Icon',
})}
/>
<FormattedMessage
id='user.settings.security.logoutActiveSessions'
@@ -1073,3 +1086,5 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
);
}
}
export default injectIntl(SecurityTab);