[MM-60073] Migrate /components/admin_console/custom_enable_disable_guest_accounts_setting.tsx from class to function component (#27963)
* chore: update to functional component * chore: add test and fix text * chore: remove redundant fn * fix: comments from review --------- Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Tihomir Nikolov
коммит произвёл
GitHub
GitHub
родитель
d2a5b2e56c
Коммит
9801007b90
@@ -1,99 +1,129 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with false 1`] = `
|
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when disabled 1`] = `
|
||||||
<Fragment>
|
<div>
|
||||||
<Memo(BooleanSetting)
|
<div
|
||||||
disabled={false}
|
class="form-group"
|
||||||
helpText={
|
data-testid="MySetting"
|
||||||
<FormattedMarkdownMessage
|
>
|
||||||
defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
|
<label
|
||||||
id="admin.guest_access.enableDescription"
|
class="control-label col-sm-4"
|
||||||
|
for="MySetting"
|
||||||
|
>
|
||||||
|
Enable Guest Access:
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="col-sm-8"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="MySetting"
|
||||||
/>
|
/>
|
||||||
}
|
<label
|
||||||
id="MySetting"
|
class="Label-eIDBis glIJuw"
|
||||||
label={
|
>
|
||||||
<Memo(MemoizedFormattedMessage)
|
<input
|
||||||
defaultMessage="Enable Guest Access: "
|
data-testid="MySettingtrue"
|
||||||
id="admin.guest_access.enableTitle"
|
id="MySettingtrue"
|
||||||
/>
|
name="MySetting"
|
||||||
}
|
type="radio"
|
||||||
onChange={[Function]}
|
value="true"
|
||||||
setByEnv={false}
|
/>
|
||||||
value={false}
|
True
|
||||||
/>
|
</label>
|
||||||
<ConfirmModal
|
<label
|
||||||
confirmButtonClass="btn btn-primary"
|
class="Label-eIDBis glIJuw"
|
||||||
confirmButtonText={
|
>
|
||||||
<Memo(MemoizedFormattedMessage)
|
<input
|
||||||
defaultMessage="Save and Disable Guest Access"
|
checked=""
|
||||||
id="admin.guest_access.disableConfirmButton"
|
data-testid="MySettingfalse"
|
||||||
/>
|
id="MySettingfalse"
|
||||||
}
|
name="MySetting"
|
||||||
message={
|
type="radio"
|
||||||
<Memo(MemoizedFormattedMessage)
|
value="false"
|
||||||
defaultMessage="Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?"
|
/>
|
||||||
id="admin.guest_access.disableConfirmMessage"
|
False
|
||||||
/>
|
</label>
|
||||||
}
|
<div
|
||||||
modalClass=""
|
class="help-text"
|
||||||
onCancel={[MockFunction]}
|
data-testid="MySettinghelp-text"
|
||||||
onConfirm={[Function]}
|
>
|
||||||
show={false}
|
<span>
|
||||||
title={
|
When true, external guest can be invited to channels within teams. Please see
|
||||||
<Memo(MemoizedFormattedMessage)
|
<a
|
||||||
defaultMessage="Save and Disable Guest Access?"
|
href="../user_management/permissions/system_scheme"
|
||||||
id="admin.guest_access.disableConfirmTitle"
|
rel="noopener noreferrer"
|
||||||
/>
|
target="_blank"
|
||||||
}
|
>
|
||||||
/>
|
Permissions Schemes
|
||||||
</Fragment>
|
</a>
|
||||||
|
for which roles can invite guests.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with true 1`] = `
|
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when enabled 1`] = `
|
||||||
<Fragment>
|
<div>
|
||||||
<Memo(BooleanSetting)
|
<div
|
||||||
disabled={false}
|
class="form-group"
|
||||||
helpText={
|
data-testid="MySetting"
|
||||||
<FormattedMarkdownMessage
|
>
|
||||||
defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
|
<label
|
||||||
id="admin.guest_access.enableDescription"
|
class="control-label col-sm-4"
|
||||||
|
for="MySetting"
|
||||||
|
>
|
||||||
|
Enable Guest Access:
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="col-sm-8"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="MySetting"
|
||||||
/>
|
/>
|
||||||
}
|
<label
|
||||||
id="MySetting"
|
class="Label-eIDBis glIJuw"
|
||||||
label={
|
>
|
||||||
<Memo(MemoizedFormattedMessage)
|
<input
|
||||||
defaultMessage="Enable Guest Access: "
|
checked=""
|
||||||
id="admin.guest_access.enableTitle"
|
data-testid="MySettingtrue"
|
||||||
/>
|
id="MySettingtrue"
|
||||||
}
|
name="MySetting"
|
||||||
onChange={[Function]}
|
type="radio"
|
||||||
setByEnv={false}
|
value="true"
|
||||||
value={true}
|
/>
|
||||||
/>
|
True
|
||||||
<ConfirmModal
|
</label>
|
||||||
confirmButtonClass="btn btn-primary"
|
<label
|
||||||
confirmButtonText={
|
class="Label-eIDBis glIJuw"
|
||||||
<Memo(MemoizedFormattedMessage)
|
>
|
||||||
defaultMessage="Save and Disable Guest Access"
|
<input
|
||||||
id="admin.guest_access.disableConfirmButton"
|
data-testid="MySettingfalse"
|
||||||
/>
|
id="MySettingfalse"
|
||||||
}
|
name="MySetting"
|
||||||
message={
|
type="radio"
|
||||||
<Memo(MemoizedFormattedMessage)
|
value="false"
|
||||||
defaultMessage="Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?"
|
/>
|
||||||
id="admin.guest_access.disableConfirmMessage"
|
False
|
||||||
/>
|
</label>
|
||||||
}
|
<div
|
||||||
modalClass=""
|
class="help-text"
|
||||||
onCancel={[MockFunction]}
|
data-testid="MySettinghelp-text"
|
||||||
onConfirm={[Function]}
|
>
|
||||||
show={false}
|
<span>
|
||||||
title={
|
When true, external guest can be invited to channels within teams. Please see
|
||||||
<Memo(MemoizedFormattedMessage)
|
<a
|
||||||
defaultMessage="Save and Disable Guest Access?"
|
href="../user_management/permissions/system_scheme"
|
||||||
id="admin.guest_access.disableConfirmTitle"
|
rel="noopener noreferrer"
|
||||||
/>
|
target="_blank"
|
||||||
}
|
>
|
||||||
/>
|
Permissions Schemes
|
||||||
</Fragment>
|
</a>
|
||||||
|
for which roles can invite guests.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
// See LICENSE.txt for license information.
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
import {shallow} from 'enzyme';
|
import {fireEvent, screen} from '@testing-library/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {FormattedMessage} from 'react-intl';
|
import {FormattedMessage} from 'react-intl';
|
||||||
|
|
||||||
|
import {renderWithContext} from 'tests/react_testing_utils';
|
||||||
|
|
||||||
import CustomEnableDisableGuestAccountsSetting from './custom_enable_disable_guest_accounts_setting';
|
import CustomEnableDisableGuestAccountsSetting from './custom_enable_disable_guest_accounts_setting';
|
||||||
|
|
||||||
describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () => {
|
describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () => {
|
||||||
@@ -25,61 +27,66 @@ describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () =
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
describe('initial state', () => {
|
describe('renders correctly', () => {
|
||||||
test('with true', () => {
|
test('when enabled', () => {
|
||||||
const props = {
|
const {container} = renderWithContext(
|
||||||
...baseProps,
|
<CustomEnableDisableGuestAccountsSetting
|
||||||
value: true,
|
{...baseProps}
|
||||||
};
|
value={true}
|
||||||
|
/>,
|
||||||
const wrapper = shallow(
|
|
||||||
<CustomEnableDisableGuestAccountsSetting {...props}/>,
|
|
||||||
);
|
);
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('with false', () => {
|
test('when disabled', () => {
|
||||||
const props = {
|
const {container} = renderWithContext(
|
||||||
...baseProps,
|
<CustomEnableDisableGuestAccountsSetting
|
||||||
value: false,
|
{...baseProps}
|
||||||
};
|
value={false}
|
||||||
|
/>,
|
||||||
const wrapper = shallow(
|
|
||||||
<CustomEnableDisableGuestAccountsSetting {...props}/>,
|
|
||||||
);
|
);
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('handleChange', () => {
|
describe('handleChange', () => {
|
||||||
test('should enable without show confirmation modal or warning', () => {
|
test('should enable without show confirmation modal or warning', () => {
|
||||||
const props = {
|
const props = {
|
||||||
...baseProps,
|
|
||||||
showConfirm: true,
|
showConfirm: true,
|
||||||
onChange: jest.fn(),
|
onChange: jest.fn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
|
renderWithContext(
|
||||||
<CustomEnableDisableGuestAccountsSetting {...props}/>,
|
<CustomEnableDisableGuestAccountsSetting
|
||||||
|
{...baseProps}
|
||||||
|
{...props}
|
||||||
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
wrapper.instance().handleChange('MySetting', true);
|
const trueRadio = screen.getByTestId('MySettingtrue');
|
||||||
expect(props.onChange).toBeCalledWith(baseProps.id, true, false, false, '');
|
fireEvent.click(trueRadio);
|
||||||
|
|
||||||
|
expect(props.onChange).toHaveBeenCalledWith(baseProps.id, true, false, false, '');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should show confirmation modal and warning when disabling', () => {
|
test('should show confirmation modal and warning when disabling', () => {
|
||||||
const props = {
|
const props = {
|
||||||
...baseProps,
|
value: true,
|
||||||
showConfirm: true,
|
showConfirm: true,
|
||||||
onChange: jest.fn(),
|
onChange: jest.fn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
|
renderWithContext(
|
||||||
<CustomEnableDisableGuestAccountsSetting {...props}/>,
|
<CustomEnableDisableGuestAccountsSetting
|
||||||
|
{...baseProps}
|
||||||
|
{...props}
|
||||||
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
wrapper.instance().handleChange('MySetting', false);
|
const falseRadio = screen.getByTestId('MySettingfalse');
|
||||||
expect(props.onChange).toBeCalledWith(baseProps.id, false, true, false, warningMessage);
|
fireEvent.click(falseRadio);
|
||||||
|
|
||||||
|
expect(props.onChange).toHaveBeenCalledWith(baseProps.id, false, true, false, warningMessage);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should call onChange with doSubmit = true when confirm is true', () => {
|
test('should call onChange with doSubmit = true when confirm is true', () => {
|
||||||
@@ -89,12 +96,19 @@ describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () =
|
|||||||
showConfirm: true,
|
showConfirm: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
|
renderWithContext(
|
||||||
<CustomEnableDisableGuestAccountsSetting {...props}/>,
|
<CustomEnableDisableGuestAccountsSetting
|
||||||
|
{...props}
|
||||||
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
wrapper.instance().handleChange('MySetting', false, true);
|
const falseRadio = screen.getByTestId('MySettingfalse');
|
||||||
expect(props.onChange).toBeCalledWith(baseProps.id, false, true, true, warningMessage);
|
fireEvent.click(falseRadio);
|
||||||
|
|
||||||
|
const confirmButton = screen.getByText('Save and Disable Guest Access');
|
||||||
|
fireEvent.click(confirmButton);
|
||||||
|
|
||||||
|
expect(props.onChange).toHaveBeenCalledWith(baseProps.id, false, true, true, warningMessage);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
// See LICENSE.txt for license information.
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
import React from 'react';
|
import React, {useCallback} from 'react';
|
||||||
import {FormattedMessage} from 'react-intl';
|
import {FormattedMessage} from 'react-intl';
|
||||||
|
|
||||||
import ConfirmModal from 'components/confirm_modal';
|
import ConfirmModal from 'components/confirm_modal';
|
||||||
@@ -19,9 +19,17 @@ type Props = {
|
|||||||
showConfirm: boolean;
|
showConfirm: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class CustomEnableDisableGuestAccountsSetting extends React.PureComponent<Props> {
|
const CustomEnableDisableGuestAccountsSetting = ({
|
||||||
public handleChange = (id: string, value: boolean, submit = false) => {
|
id,
|
||||||
const confirmNeeded = value === false; // Requires confirmation if disabling guest accounts
|
value,
|
||||||
|
onChange,
|
||||||
|
cancelSubmit,
|
||||||
|
disabled,
|
||||||
|
setByEnv,
|
||||||
|
showConfirm,
|
||||||
|
}: Props) => {
|
||||||
|
const handleChange = useCallback((targetId: string, newValue: boolean, submit = false) => {
|
||||||
|
const confirmNeeded = newValue === false; // Requires confirmation if disabling guest accounts
|
||||||
let warning: React.ReactNode | string = '';
|
let warning: React.ReactNode | string = '';
|
||||||
if (confirmNeeded) {
|
if (confirmNeeded) {
|
||||||
warning = (
|
warning = (
|
||||||
@@ -31,61 +39,63 @@ export default class CustomEnableDisableGuestAccountsSetting extends React.PureC
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
this.props.onChange(id, value, confirmNeeded, submit, warning);
|
onChange(targetId, newValue, confirmNeeded, submit, warning);
|
||||||
};
|
}, [onChange]);
|
||||||
|
|
||||||
public render() {
|
const handleConfirm = useCallback(() => {
|
||||||
const label = (
|
handleChange(id, false, true);
|
||||||
<FormattedMessage
|
}, [handleChange, id]);
|
||||||
id='admin.guest_access.enableTitle'
|
|
||||||
defaultMessage='Enable Guest Access: '
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const helpText = (
|
|
||||||
<FormattedMarkdownMessage
|
|
||||||
id='admin.guest_access.enableDescription'
|
|
||||||
defaultMessage='When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests.'
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
const label = (
|
||||||
<>
|
<FormattedMessage
|
||||||
<BooleanSetting
|
id='admin.guest_access.enableTitle'
|
||||||
id={this.props.id}
|
defaultMessage='Enable Guest Access: '
|
||||||
value={this.props.value}
|
/>
|
||||||
label={label}
|
);
|
||||||
helpText={helpText}
|
|
||||||
setByEnv={this.props.setByEnv}
|
const helpText = (
|
||||||
onChange={this.handleChange}
|
<FormattedMarkdownMessage
|
||||||
disabled={this.props.disabled}
|
id='admin.guest_access.enableDescription'
|
||||||
/>
|
defaultMessage='When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests.'
|
||||||
<ConfirmModal
|
/>
|
||||||
show={this.props.showConfirm && (this.props.value === false)}
|
);
|
||||||
title={
|
|
||||||
<FormattedMessage
|
return (
|
||||||
id='admin.guest_access.disableConfirmTitle'
|
<>
|
||||||
defaultMessage='Save and Disable Guest Access?'
|
<BooleanSetting
|
||||||
/>
|
id={id}
|
||||||
}
|
value={value}
|
||||||
message={
|
label={label}
|
||||||
<FormattedMessage
|
helpText={helpText}
|
||||||
id='admin.guest_access.disableConfirmMessage'
|
setByEnv={setByEnv}
|
||||||
defaultMessage='Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?'
|
onChange={handleChange}
|
||||||
/>
|
disabled={disabled}
|
||||||
}
|
/>
|
||||||
confirmButtonText={
|
<ConfirmModal
|
||||||
<FormattedMessage
|
show={showConfirm && (value === false)}
|
||||||
id='admin.guest_access.disableConfirmButton'
|
title={
|
||||||
defaultMessage='Save and Disable Guest Access'
|
<FormattedMessage
|
||||||
/>
|
id='admin.guest_access.disableConfirmTitle'
|
||||||
}
|
defaultMessage='Save and Disable Guest Access?'
|
||||||
onConfirm={() => {
|
/>
|
||||||
this.handleChange(this.props.id, false, true);
|
}
|
||||||
this.setState({showConfirm: false});
|
message={
|
||||||
}}
|
<FormattedMessage
|
||||||
onCancel={this.props.cancelSubmit}
|
id='admin.guest_access.disableConfirmMessage'
|
||||||
/>
|
defaultMessage='Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?'
|
||||||
</>
|
/>
|
||||||
);
|
}
|
||||||
}
|
confirmButtonText={
|
||||||
}
|
<FormattedMessage
|
||||||
|
id='admin.guest_access.disableConfirmButton'
|
||||||
|
defaultMessage='Save and Disable Guest Access'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onConfirm={handleConfirm}
|
||||||
|
onCancel={cancelSubmit}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomEnableDisableGuestAccountsSetting;
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user