Merge pull request #7375 from vjanssens/5929-consistent-subforms-in-job-template-forms

Use consistent layout for subforms in job/template forms

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/README.md

@@ -8,7 +8,7 @@ The API development server will need to be running. See [CONTRIBUTING.md](../../
 
 ```shell
 # Start the ui development server. While running, the ui will be reachable
-# at https://127.0.01:3001 and updated automatically when code changes.
+# at https://127.0.0.1:3001 and updated automatically when code changes.
 npm --prefix=awx/ui_next start
 ```
 

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx

@@ -16,6 +16,8 @@ function JobTemplateAdd() {
       initialInstanceGroups,
       credentials,
       webhook_credential,
+      webhook_key,
+      webhook_url,
       ...remainingValues
     } = values;
 

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx

@@ -172,9 +172,7 @@ describe('<JobTemplateAdd />', () => {
       playbook: 'Baz',
       inventory: 2,
       webhook_credential: undefined,
-      webhook_key: '',
       webhook_service: '',
-      webhook_url: '',
     });
   });
 

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -101,6 +101,8 @@ class JobTemplateEdit extends Component {
       initialInstanceGroups,
       credentials,
       webhook_credential,
+      webhook_key,
+      webhook_url,
       ...remainingValues
     } = values;
 

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx

@@ -271,7 +271,8 @@ describe('<JobTemplateEdit />', () => {
     delete expected.id;
     delete expected.type;
     delete expected.related;
-    expected.webhook_url = `${window.location.origin}${mockJobTemplate.related.webhook_receiver}`;
+    delete expected.webhook_key;
+    delete expected.webhook_url;
     expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, expected);
     expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(4);

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -9,6 +9,7 @@ import {
   Switch,
   Checkbox,
   TextInput,
+  Title,
 } from '@patternfly/react-core';
 import ContentError from '../../../components/ContentError';
 import ContentLoading from '../../../components/ContentLoading';
@@ -27,6 +28,7 @@ import {
   FormColumnLayout,
   FormFullWidthLayout,
   FormCheckboxLayout,
+  SubFormLayout,
 } from '../../../components/FormLayout';
 import { VariablesField } from '../../../components/CodeMirrorInput';
 import { required } from '../../../util/validators';
@@ -547,12 +549,16 @@ function JobTemplateForm({
                 </FormCheckboxLayout>
               </FormGroup>
             </FormFullWidthLayout>
-            <WebhookSubForm
+
-              enableWebhooks={enableWebhooks}
+            {(allowCallbacks || enableWebhooks) && (
-              templateType={template.type}
+              <>
-            />
+                <SubFormLayout>
                   {allowCallbacks && (
                     <>
+                      <Title size="md" headingLevel="h4">
+                        {i18n._(t`Provisioning Callback details`)}
+                      </Title>
+                      <FormColumnLayout>
                         {callbackUrl && (
                           <FormGroup
                             label={i18n._(t`Provisioning Callback URL`)}
@@ -569,8 +575,27 @@ function JobTemplateForm({
                           id="template-host-config-key"
                           name="host_config_key"
                           label={i18n._(t`Host Config Key`)}
-                  validate={allowCallbacks ? required(null, i18n) : null}
+                          validate={
+                            allowCallbacks ? required(null, i18n) : null
+                          }
                         />
+                      </FormColumnLayout>
+                    </>
+                  )}
+
+                  {allowCallbacks && enableWebhooks && <br />}
+
+                  {enableWebhooks && (
+                    <>
+                      <Title size="md" headingLevel="h4">
+                        {i18n._(t`Webhook details`)}
+                      </Title>
+                      <FormColumnLayout>
+                        <WebhookSubForm templateType={template.type} />
+                      </FormColumnLayout>
+                    </>
+                  )}
+                </SubFormLayout>
               </>
             )}
           </FormColumnLayout>

awx/ui_next/src/screens/Template/shared/WebhookSubForm.jsx

@@ -23,7 +23,7 @@ import {
   CredentialTypesAPI,
 } from '../../../api';
 
-function WebhookSubForm({ i18n, enableWebhooks, templateType }) {
+function WebhookSubForm({ i18n, templateType }) {
   const { id } = useParams();
 
   const { pathname } = useLocation();
@@ -36,6 +36,7 @@ function WebhookSubForm({ i18n, enableWebhooks, templateType }) {
     webhookServiceHelpers,
   ] = useField('webhook_service');
 
+  // eslint-disable-next-line no-unused-vars
   const [webhookUrlField, webhookUrlMeta, webhookUrlHelpers] = useField(
     'webhook_url'
   );
@@ -71,21 +72,6 @@ function WebhookSubForm({ i18n, enableWebhooks, templateType }) {
     loadCredentialType();
   }, [loadCredentialType]);
 
-  useEffect(() => {
-    if (enableWebhooks) {
-      webhookServiceHelpers.setValue(webhookServiceMeta.initialValue);
-      webhookUrlHelpers.setValue(webhookUrlMeta.initialValue);
-      webhookKeyHelpers.setValue(webhookKeyMeta.initialValue);
-      webhookCredentialHelpers.setValue(webhookCredentialMeta.initialValue);
-    } else {
-      webhookServiceHelpers.setValue('');
-      webhookUrlHelpers.setValue('');
-      webhookKeyHelpers.setValue('');
-      webhookCredentialHelpers.setValue(null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enableWebhooks]);
-
   const { request: fetchWebhookKey, error: webhookKeyError } = useRequest(
     useCallback(async () => {
       const updateWebhookKey =
@@ -134,7 +120,6 @@ function WebhookSubForm({ i18n, enableWebhooks, templateType }) {
     return <ContentLoading />;
   }
   return (
-    enableWebhooks && (
     <FormColumnLayout>
       <FormGroup
         name="webhook_service"
@@ -235,7 +220,6 @@ function WebhookSubForm({ i18n, enableWebhooks, templateType }) {
         />
       )}
     </FormColumnLayout>
-    )
   );
 }
 export default withI18n()(WebhookSubForm);

awx/ui_next/src/screens/Template/shared/WebhookSubForm.test.jsx

@@ -34,7 +34,7 @@ describe('<WebhookSubForm />', () => {
       wrapper = mountWithContexts(
         <Route path="templates/:templateType/:id/edit">
           <Formik initialValues={initialValues}>
-            <WebhookSubForm enableWebhooks templateType="job_template" />
+            <WebhookSubForm templateType="job_template" />
           </Formik>
         </Route>,
         {
@@ -103,7 +103,7 @@ describe('<WebhookSubForm />', () => {
               webhook_key: 'A NEW WEBHOOK KEY WILL BE GENERATED ON SAVE.',
             }}
           >
-            <WebhookSubForm enableWebhooks templateType="job_template" />
+            <WebhookSubForm templateType="job_template" />
           </Formik>
         </Route>,
         {
@@ -133,10 +133,7 @@ describe('<WebhookSubForm />', () => {
       newWrapper = mountWithContexts(
         <Route path="templates/:templateType/:id/edit">
           <Formik initialValues={{ ...initialValues, webhook_url }}>
-            <WebhookSubForm
+            <WebhookSubForm templateType="workflow_job_template" />
-              enableWebhooks
-              templateType="workflow_job_template"
-            />
           </Formik>
         </Route>,
         {

awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx

@@ -4,7 +4,13 @@ import PropTypes, { shape } from 'prop-types';
 
 import { withI18n } from '@lingui/react';
 import { useField, withFormik } from 'formik';
-import { Form, FormGroup, Checkbox, TextInput } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  Checkbox,
+  TextInput,
+  Title,
+} from '@patternfly/react-core';
 import { required } from '../../../util/validators';
 
 import FieldWithPrompt from '../../../components/FieldWithPrompt';
@@ -16,6 +22,7 @@ import {
   FormColumnLayout,
   FormFullWidthLayout,
   FormCheckboxLayout,
+  SubFormLayout,
 } from '../../../components/FormLayout';
 import OrganizationLookup from '../../../components/Lookup/OrganizationLookup';
 import { InventoryLookup } from '../../../components/Lookup';
@@ -175,7 +182,8 @@ function WorkflowJobTemplateForm({
           )}
         />
       </FormFullWidthLayout>
-      <FormCheckboxLayout fieldId="options" isInline label={i18n._(t`Options`)}>
+      <FormGroup fieldId="options" label={i18n._(t`Options`)}>
+        <FormCheckboxLayout isInline>
           <Checkbox
             aria-label={i18n._(t`Enable Webhook`)}
             label={
@@ -204,10 +212,17 @@ function WorkflowJobTemplateForm({
             label={i18n._(t`Enable Concurrent Jobs`)}
           />
         </FormCheckboxLayout>
-      <WebhookSubForm
+      </FormGroup>
-        enableWebhooks={enableWebhooks}
+
-        templateType={template.type}
+      {enableWebhooks && (
-      />
+        <SubFormLayout>
+          <Title size="md" headingLevel="h4">
+            {i18n._(t`Webhook details`)}
+          </Title>
+          <WebhookSubForm templateType={template.type} />
+        </SubFormLayout>
+      )}
+
       {submitError && <FormSubmitError error={submitError} />}
       <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
     </Form>

awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx

@@ -44,7 +44,9 @@ describe('<WorkflowJobTemplateForm/>', () => {
     related: {
       webhook_receiver: '/api/v2/workflow_job_templates/57/gitlab/',
     },
+    webhook_credential: null,
     webhook_key: 'sdfghjklmnbvcdsew435678iokjhgfd',
+    webhook_service: 'github',
   };
 
   beforeEach(async () => {