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,8 +94,16 @@ const BooleanField = ({
   const [field, meta, helpers] = useField(name);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  if (isModalOpen) {
+  return config ? (
-    return (
+    <SettingGroup
+      defaultValue={config.default ?? false}
+      fieldId={name}
+      helperTextInvalid={meta.error}
+      isDisabled={disabled}
+      label={config.label}
+      popoverContent={config.help_text}
+    >
+      {isModalOpen && (
         <AlertModal
           isOpen
           title={modalTitle}
@@ -130,21 +138,8 @@ const BooleanField = ({
               {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>
-        {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}
-      fieldId={name}
-      helperTextInvalid={meta.error}
-      isDisabled={disabled}
-      label={config.label}
-      popoverContent={config.help_text}
-    >
       <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();