ensures that field is on screen behind the confirmation modal

This commit is contained in:
Alex Corey 2021-07-22 12:26:19 -04:00
parent dae3f1a164
commit 53817d3cbe
3 changed files with 92 additions and 50 deletions

View File

@ -30,6 +30,7 @@ describe('<NotificationTemplateListItem />', () => {
<tbody>
<NotificationTemplateListItem
template={template}
onAddToast={jest.fn()}
detailUrl="/notification_templates/3/detail"
/>
</tbody>
@ -53,6 +54,7 @@ describe('<NotificationTemplateListItem />', () => {
<tbody>
<NotificationTemplateListItem
template={template}
onAddToast={jest.fn()}
detailUrl="/notification_templates/3/detail"
/>
</tbody>
@ -73,6 +75,7 @@ describe('<NotificationTemplateListItem />', () => {
<tbody>
<NotificationTemplateListItem
template={template}
onAddToast={jest.fn()}
detailUrl="/notification_templates/3/detail"
/>
</tbody>
@ -94,6 +97,7 @@ describe('<NotificationTemplateListItem />', () => {
<tbody>
<NotificationTemplateListItem
template={template}
onAddToast={jest.fn()}
detailUrl="/notification_templates/3/detail"
/>
</tbody>
@ -121,6 +125,7 @@ describe('<NotificationTemplateListItem />', () => {
},
},
}}
onAddToast={jest.fn()}
detailUrl="/notification_templates/3/detail"
/>
</tbody>

View File

@ -94,48 +94,6 @@ const BooleanField = ({
const [field, meta, helpers] = useField(name);
const [isModalOpen, setIsModalOpen] = useState(false);
if (isModalOpen) {
return (
<AlertModal
isOpen
title={modalTitle}
variant="danger"
aria-label={modalTitle}
onClose={() => {
setIsModalOpen(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
defaultValue={config.default ?? false}
@ -145,6 +103,43 @@ const BooleanField = ({
label={config.label}
popoverContent={config.help_text}
>
{isModalOpen && (
<AlertModal
isOpen
title={modalTitle}
variant="danger"
aria-label={modalTitle}
onClose={() => {
setIsModalOpen(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>
)}
<Switch
id={name}
ouiaId={name}
@ -152,11 +147,12 @@ const BooleanField = ({
isDisabled={disabled}
label={t`On`}
labelOff={t`Off`}
onChange={() =>
needsConfirmationModal
? setIsModalOpen(true)
: helpers.setValue(!field.value)
}
onChange={(isOn) => {
if (needsConfirmationModal && isOn) {
setIsModalOpen(true);
}
helpers.setValue(!field.value);
}}
aria-label={ariaLabel || config.label}
/>
</SettingGroup>

View File

@ -321,11 +321,14 @@ describe('Setting form fields', () => {
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.find('Switch').invoke('onChange')(true);
});
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(1);
expect(
wrapper.find('BooleanField[name="DISABLE_LOCAL_AUTH"]')
).toHaveLength(1);
await act(async () =>
wrapper
.find('Button[ouiaId="confirm-misc-settings-modal"]')
@ -336,7 +339,45 @@ describe('Setting form fields', () => {
expect(wrapper.find('Switch').prop('isChecked')).toBe(true);
});
test('shold not toggle disable local auth', async () => {
test('should not render confirmation modal when toggling off', async () => {
const wrapper = mountWithContexts(
<Formik
initialValues={{
DISABLE_LOCAL_AUTH: true,
}}
>
{() => (
<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(true);
expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
await act(async () => {
wrapper.find('Switch').invoke('onChange')(false);
});
wrapper.update();
expect(wrapper.find('AlertModal')).toHaveLength(0);
expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
});
test('should not toggle disable local auth', async () => {
const wrapper = mountWithContexts(
<Formik
initialValues={{
@ -367,7 +408,7 @@ describe('Setting form fields', () => {
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.find('Switch').invoke('onChange')(true);
});
wrapper.update();