adds confirmation modal to switch

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx

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

awx/ui_next/src/screens/Setting/shared/SharedFields.jsx

@@ -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>

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(
+      <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);
+  });
 });