Use consistent layout for subforms in job/template forms

Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>

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/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">
+                        {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>
+
+                      <br />
+                    </>
+                  )}
+                  {enableWebhooks && (
+                    <>
+                      <Title size="md">{i18n._(t`Webhook details`)}</Title>
+                      <FormColumnLayout>
+                        <WebhookSubForm
+                          enableWebhooks={enableWebhooks}
+                          templateType={template.type}
+                        />
+                      </FormColumnLayout>
+                    </>
+                  )}
+                </SubFormLayout>
               </>
             )}
           </FormColumnLayout>

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,20 @@ function WorkflowJobTemplateForm({
             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>