diff --git a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx index 312b4dbf96..f72b12b794 100644 --- a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx +++ b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx @@ -264,6 +264,8 @@ function MiscSystemEdit() { /> ); }; -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 ( + { + helpers.setValue(false); + }} + actions={[ + , + , + ]} + >{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.`} + ); + } return config ? ( { 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} /> diff --git a/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx b/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx index 3ac561e3d2..35c494fe83 100644 --- a/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx +++ b/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx @@ -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( + + {() => ( + + )} + + ); + 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( + + {() => ( + + )} + + ); + 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); + }); });