External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 20:30:46 -03:30
Code Issues Packages Projects Releases Wiki Activity

adds confirmation modal to switch

Browse Source
This commit is contained in:
Alex Corey 2021-05-20 09:31:31 -04:00
parent 2aa3fe756e
commit 3b5641c41b
3 changed files with 150 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx
View File

@ -264,6 +264,8 @@ function MiscSystemEdit() {
/>
<BooleanField
name="DISABLE_LOCAL_AUTH"
needsConfirmationModal
modalTitle={t`Confirm Disable Local Authorization`}
config={system.DISABLE_LOCAL_AUTH}
/>
<InputField

58
awx/ui_next/src/screens/Setting/shared/SharedFields.jsx
View File

@ -3,6 +3,7 @@ import { shape, string } from 'prop-types';
import { t } from '@lingui/macro';
import { useField } from 'formik';
import {
Button,
FileUpload,
FormGroup as PFFormGroup,
InputGroup,
@ -25,6 +26,7 @@ import {
url,
} from '../../../util/validators';
import RevertButton from './RevertButton';
import AlertModal from '../../../components/AlertModal';
const FormGroup = styled(PFFormGroup)`
.pf-c-form__group-label {
@ -73,8 +75,56 @@ const SettingGroup = ({
</FormGroup>
);
};
const BooleanField = ({ ariaLabel = '', name, config, disabled = false }) => {
const BooleanField = ({
ariaLabel = '',
name,
config,
disabled = false,
needsConfirmationModal,
modalTitle,
}) => {
const [field, meta, helpers] = useField(name);
const [isModalOpen, setIsModalOpen] = useState(false);
if (isModalOpen) {
return (
<AlertModal
isOpen
title={modalTitle}
variant="danger"
aria-label={modalTitle}
onClose={() => {
helpers.setValue(false);
}}
actions={[
<Button
ouiaId="confirm-misc-settings-modal"
key="confirm"
variant="danger"
aria-label={t`Confirm`}
onClick={() => {
helpers.setValue(true);
setIsModalOpen(false);
}}
>
{t`Confirm`}
</Button>,
<Button
ouiaId="cancel-misc-settings-modal"
key="cancel"
variant="link"
aria-label={t`Cancel`}
onClick={() => {
helpers.setValue(false);
setIsModalOpen(false);
}}
>
{t`Cancel`}
</Button>,
]}
>{t`Are you sure you want to disable local authentication? Doing so could impact users' ability to log in and the system administrator's ability to reverse this change.`}</AlertModal>
);
}
return config ? (
<SettingGroup
@ -92,7 +142,11 @@ const BooleanField = ({ ariaLabel = '', name, config, disabled = false }) => {
isDisabled={disabled}
label={t`On`}
labelOff={t`Off`}
onChange={() => helpers.setValue(!field.value)}
onChange={() =>
needsConfirmationModal
? setIsModalOpen(true)
: helpers.setValue(!field.value)
}
aria-label={ariaLabel || config.label}
/>
</SettingGroup>

92
awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx
View File

@ -265,4 +265,96 @@ describe('Setting form fields', () => {
wrapper.update();
expect(wrapper.find('input#mock_file-filename').prop('value')).toEqual('');
});
test('should render confirmation modal when toggle on for disable local auth', async () => {
const wrapper = mountWithContexts(
<Formik
initialValues={{
DISABLE_LOCAL_AUTH: false,
}}
>
{() => (
<BooleanField
name="DISABLE_LOCAL_AUTH"
needsConfirmationModal
modalTitle="Confirm Disable Local Authorization"
config={{
category: 'Authentication',
category_slug: 'authentication',
default: false,
help_text:
'Controls whether users are prevented from using the built-in authentication system. You probably want to do this if you are using an LDAP or SAML integration.',
label: 'Disable the built-in authentication system',
required: true,
type: 'boolean',
value: false,
}}
/>
)}
</Formik>
);
expect(wrapper.find('Switch')).toHaveLength(1);
expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
await act(async () => {
wrapper.find('Switch').invoke('onChange')();
});
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(1);
await act(async () =>
wrapper
.find('Button[ouiaId="confirm-misc-settings-modal"]')
.prop('onClick')()
);
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(0);
expect(wrapper.find('Switch').prop('isChecked')).toBe(true);
});
test('shold not toggle disable local auth', async () => {
const wrapper = mountWithContexts(
<Formik
initialValues={{
DISABLE_LOCAL_AUTH: false,
}}
>
{() => (
<BooleanField
name="DISABLE_LOCAL_AUTH"
needsConfirmationModal
modalTitle="Confirm Disable Local Authorization"
config={{
category: 'Authentication',
category_slug: 'authentication',
default: false,
help_text:
'Controls whether users are prevented from using the built-in authentication system. You probably want to do this if you are using an LDAP or SAML integration.',
label: 'Disable the built-in authentication system',
required: true,
type: 'boolean',
value: false,
}}
/>
)}
</Formik>
);
expect(wrapper.find('Switch')).toHaveLength(1);
expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
await act(async () => {
wrapper.find('Switch').invoke('onChange')();
});
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(1);
await act(async () =>
wrapper
.find('Button[ouiaId="cancel-misc-settings-modal"]')
.prop('onClick')()
);
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(0);
expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
});
});