From 12b87fca8cdfce2047d01d25b85562330dc89373 Mon Sep 17 00:00:00 2001
From: Vadiem Janssens <info@vadiemjanssens.nl>
Date: Thu, 18 Jun 2020 17:05:18 +0200
Subject: [PATCH] Use consistent layout for subforms in job/template forms

Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>
---
 awx/ui_next/README.md                         |  2 +-
 .../Template/shared/JobTemplateForm.jsx       | 71 ++++++++++-----
 .../shared/WorkflowJobTemplateForm.jsx        | 86 +++++++++++--------
 3 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/awx/ui_next/README.md b/awx/ui_next/README.md
index d473bcf79c..3d554915ec 100644
--- a/awx/ui_next/README.md
+++ b/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
 ```
 
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index ca5ad56073..8df4dc1875 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/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,30 +549,53 @@ function JobTemplateForm({
                 </FormCheckboxLayout>
               </FormGroup>
             </FormFullWidthLayout>
-            <WebhookSubForm
-              enableWebhooks={enableWebhooks}
-              templateType={template.type}
-            />
-            {allowCallbacks && (
+
+            {(allowCallbacks || enableWebhooks) && (
               <>
-                {callbackUrl && (
-                  <FormGroup
-                    label={i18n._(t`Provisioning Callback URL`)}
-                    fieldId="template-callback-url"
-                  >
-                    <TextInput
-                      id="template-callback-url"
-                      isDisabled
-                      value={callbackUrl}
-                    />
-                  </FormGroup>
-                )}
-                <FormField
-                  id="template-host-config-key"
-                  name="host_config_key"
-                  label={i18n._(t`Host Config Key`)}
-                  validate={allowCallbacks ? required(null, i18n) : null}
-                />
+                <SubFormLayout>
+                  {allowCallbacks && (
+                    <>
+                      <Title size="md">
+                        {i18n._(t`Provisioning Callback details`)}
+                      </Title>
+                      <FormColumnLayout>
+                        {callbackUrl && (
+                          <FormGroup
+                            label={i18n._(t`Provisioning Callback URL`)}
+                            fieldId="template-callback-url"
+                          >
+                            <TextInput
+                              id="template-callback-url"
+                              isDisabled
+                              value={callbackUrl}
+                            />
+                          </FormGroup>
+                        )}
+                        <FormField
+                          id="template-host-config-key"
+                          name="host_config_key"
+                          label={i18n._(t`Host Config Key`)}
+                          validate={
+                            allowCallbacks ? required(null, i18n) : null
+                          }
+                        />
+                      </FormColumnLayout>
+
+                      <br />
+                    </>
+                  )}
+                  {enableWebhooks && (
+                    <>
+                      <Title size="md">{i18n._(t`Webhook details`)}</Title>
+                      <FormColumnLayout>
+                        <WebhookSubForm
+                          enableWebhooks={enableWebhooks}
+                          templateType={template.type}
+                        />
+                      </FormColumnLayout>
+                    </>
+                  )}
+                </SubFormLayout>
               </>
             )}
           </FormColumnLayout>
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 8306b849cf..ad6aedd2ce 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/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,39 +182,50 @@ function WorkflowJobTemplateForm({
           )}
         />
       </FormFullWidthLayout>
-      <FormCheckboxLayout fieldId="options" isInline label={i18n._(t`Options`)}>
-        <Checkbox
-          aria-label={i18n._(t`Enable Webhook`)}
-          label={
-            <span>
-              {i18n._(t`Enable Webhook`)}
-              &nbsp;
-              <FieldTooltip
-                content={i18n._(
-                  t`Enable Webhook for this workflow job template.`
-                )}
-              />
-            </span>
-          }
-          id="wfjt-enabled-webhooks"
-          isChecked={enableWebhooks}
-          onChange={checked => {
-            setEnableWebhooks(checked);
-          }}
-        />
-        <CheckboxField
-          name="allow_simultaneous"
-          id="allow_simultaneous"
-          tooltip={i18n._(
-            t`If enabled, simultaneous runs of this workflow job template will be allowed.`
-          )}
-          label={i18n._(t`Enable Concurrent Jobs`)}
-        />
-      </FormCheckboxLayout>
-      <WebhookSubForm
-        enableWebhooks={enableWebhooks}
-        templateType={template.type}
-      />
+      <FormGroup fieldId="options" label={i18n._(t`Options`)}>
+        <FormCheckboxLayout isInline>
+          <Checkbox
+            aria-label={i18n._(t`Enable Webhook`)}
+            label={
+              <span>
+                {i18n._(t`Enable Webhook`)}
+                &nbsp;
+                <FieldTooltip
+                  content={i18n._(
+                    t`Enable Webhook for this workflow job template.`
+                  )}
+                />
+              </span>
+            }
+            id="wfjt-enabled-webhooks"
+            isChecked={enableWebhooks}
+            onChange={checked => {
+              setEnableWebhooks(checked);
+            }}
+          />
+          <CheckboxField
+            name="allow_simultaneous"
+            id="allow_simultaneous"
+            tooltip={i18n._(
+              t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+            )}
+            label={i18n._(t`Enable Concurrent Jobs`)}
+          />
+        </FormCheckboxLayout>
+      </FormGroup>
+
+      {enableWebhooks && (
+        <>
+          <SubFormLayout>
+            <Title size="md">{i18n._(t`Webhook details`)}</Title>
+            <WebhookSubForm
+              enableWebhooks={enableWebhooks}
+              templateType={template.type}
+            />
+          </SubFormLayout>
+        </>
+      )}
+
       {submitError && <FormSubmitError error={submitError} />}
       <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
     </Form>