Merge pull request #10722 from AlexSCorey/10706-DisappearingField

Ensures that field is on screen behind the confirmation modal

awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.js

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

awx/ui/src/screens/Setting/shared/SharedFields.js

@@ -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={() =>
+        onChange={(isOn) => {
-          needsConfirmationModal
+          if (needsConfirmationModal && isOn) {
-            ? setIsModalOpen(true)
+            setIsModalOpen(true);
-            : helpers.setValue(!field.value)
+          }
-        }
+          helpers.setValue(!field.value);
+        }}
         aria-label={ariaLabel || config.label}
       />
     </SettingGroup>

awx/ui/src/screens/Setting/shared/SharedFields.test.js

@@ -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();