Add support Prompt on Launch for Workflow Job Template

Add support Prompt on Launch for Workflow Job Template

see: https://github.com/ansible/awx/issues/5819

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

@@ -19,7 +19,7 @@ function WorkflowJobTemplateEdit({ template }) {
       webhook_key,
       ...templatePayload
     } = values;
-    templatePayload.inventory = inventory?.id;
+    templatePayload.inventory = inventory?.id || null;
     templatePayload.organization = organization?.id;
     templatePayload.webhook_credential = webhook_credential?.id || null;
 

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { t } from '@lingui/macro';
-
 import PropTypes, { shape } from 'prop-types';
 
 import { withI18n } from '@lingui/react';
 import { useField, withFormik } from 'formik';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+import { Form, FormGroup, Checkbox, TextInput } from '@patternfly/react-core';
 import { required } from '../../../util/validators';
 
+import FieldWithPrompt from '../../../components/FieldWithPrompt';
 import FormField, {
   FieldTooltip,
   FormSubmitError,
@@ -36,19 +36,20 @@ function WorkflowJobTemplateForm({
   i18n,
   submitError,
 }) {
-  const [hasContentError, setContentError] = useState(null);
+  const [enableWebhooks, setEnableWebhooks] = useState(
-
+    Boolean(template.webhook_service)
-  const [organizationField, organizationMeta, organizationHelpers] = useField(
-    'organization'
   );
+  const [hasContentError, setContentError] = useState(null);
+  const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
   const [inventoryField, inventoryMeta, inventoryHelpers] = useField(
     'inventory'
   );
   const [labelsField, , labelsHelpers] = useField('labels');
-
+  const [limitField, limitMeta, limitHelpers] = useField('limit');
-  const [enableWebhooks, setEnableWebhooks] = useState(
+  const [organizationField, organizationMeta, organizationHelpers] = useField(
-    Boolean(template.webhook_service)
+    'organization'
   );
+  const [scmField, , scmHelpers] = useField('scm_branch');
 
   if (hasContentError) {
     return <ContentError error={hasContentError} />;
@@ -79,39 +80,74 @@ function WorkflowJobTemplateForm({
           value={organizationField.value}
           isValid={!organizationMeta.error}
         />
-        <FormGroup label={i18n._(t`Inventory`)} fieldId="wfjt-inventory">
+
-          <FieldTooltip
+        <FieldWithPrompt
-            content={i18n._(
+          fieldId="wfjt-inventory"
-              t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
+          label={i18n._(t`Inventory`)}
-            )}
+          promptId="wfjt-ask-inventory-on-launch"
-          />
+          promptName="ask_inventory_on_launch"
+          tooltip={i18n._(
+            t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
+          )}
+        >
           <InventoryLookup
             value={inventoryField.value}
-            isValid={!inventoryMeta.error}
+            onBlur={() => inventoryHelpers.setTouched()}
-            helperTextInvalid={inventoryMeta.error}
             onChange={value => {
-              inventoryHelpers.setValue(value || null);
+              inventoryHelpers.setValue(value);
+            }}
+            required={askInventoryOnLaunchField.value}
+            touched={inventoryMeta.touched}
+            error={inventoryMeta.error}
+          />
+          {(inventoryMeta.touched || askInventoryOnLaunchField.value) &&
+            inventoryMeta.error && (
+              <div
+                className="pf-c-form__helper-text pf-m-error"
+                aria-live="polite"
+              >
+                {inventoryMeta.error}
+              </div>
+            )}
+        </FieldWithPrompt>
+
+        <FieldWithPrompt
+          fieldId="wjft-limit"
+          label={i18n._(t`Limit`)}
+          promptId="template-ask-limit-on-launch"
+          promptName="ask_limit_on_launch"
+          tooltip={i18n._(t`Provide a host pattern to further constrain
+                  the list of hosts that will be managed or affected by the
+                  playbook. Multiple patterns are allowed. Refer to Ansible
+                  documentation for more information and examples on patterns.`)}
+        >
+          <TextInput
+            id="text-wfjt-limit"
+            {...limitField}
+            isValid={!limitMeta.touched || !limitMeta.error}
+            onChange={value => {
+              limitHelpers.setValue(value);
             }}
           />
-        </FormGroup>
+        </FieldWithPrompt>
-        <FormField
+
-          type="text"
+        <FieldWithPrompt
-          name="limit"
+          fieldId="wfjt-scm-branch"
-          id="wfjt-limit"
+          label={i18n._(t`Source control branch`)}
-          label={i18n._(t`Limit`)}
+          promptId="wfjt-ask-scm-branch-on-launch"
-          tooltip={i18n._(
+          promptName="ask_scm_branch_on_launch"
-            t`Provide a host pattern to further constrain the list of hosts that will be managed or affected by the workflow. This limit is applied to all job template nodes that prompt for a limit. Refer to Ansible documentation for more information and examples on patterns.`
-          )}
-        />
-        <FormField
-          type="text"
-          label={i18n._(t`Source Control Branch`)}
           tooltip={i18n._(
             t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`
           )}
-          id="wfjt-scm_branch"
+        >
-          name="scm_branch"
+          <TextInput
-        />
+            id="text-wfjt-scm-branch"
+            {...scmField}
+            onChange={value => {
+              scmHelpers.setValue(value);
+            }}
+          />
+        </FieldWithPrompt>
       </FormColumnLayout>
       <FormFullWidthLayout>
         <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
@@ -133,6 +169,7 @@ function WorkflowJobTemplateForm({
           id="wfjt-variables"
           name="extra_vars"
           label={i18n._(t`Variables`)}
+          promptId="template-ask-variables-on-launch"
           tooltip={i18n._(
             t`Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter for ansible-playbook. Provide key/value pairs using either YAML or JSON. Refer to the Ansible Tower documentation for example syntax.`
           )}

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

@@ -114,9 +114,9 @@ describe('<WorkflowJobTemplateForm/>', () => {
       'FormField[name="name"]',
       'FormField[name="description"]',
       'FormGroup[label="Organization"]',
-      'FormGroup[label="Inventory"]',
+      'FieldWithPrompt[label="Inventory"]',
-      'FormField[name="limit"]',
+      'FieldWithPrompt[label="Limit"]',
-      'FormField[name="scm_branch"]',
+      'FieldWithPrompt[label="Source control branch"]',
       'FormGroup[label="Labels"]',
       'VariablesField',
     ];
@@ -137,11 +137,6 @@ describe('<WorkflowJobTemplateForm/>', () => {
         element: 'wfjt-description',
         value: { value: 'new bar', name: 'description' },
       },
-      { element: 'wfjt-limit', value: { value: 1234567890, name: 'limit' } },
-      {
-        element: 'wfjt-scm_branch',
-        value: { value: 'new branch', name: 'scm_branch' },
-      },
     ];
     const changeInputs = async ({ element, value }) => {
       wrapper.find(`input#${element}`).simulate('change', {
@@ -177,6 +172,26 @@ describe('<WorkflowJobTemplateForm/>', () => {
     inputsToChange.map(input => assertChanges(input));
   });
 
+  test('test changes in FieldWithPrompt', async () => {
+    await act(async () => {
+      wrapper.find('TextInputBase#text-wfjt-scm-branch').prop('onChange')(
+        'main'
+      );
+      wrapper.find('TextInputBase#text-wfjt-limit').prop('onChange')(
+        1234567890
+      );
+    });
+
+    wrapper.update();
+
+    expect(wrapper.find('input#text-wfjt-scm-branch').prop('value')).toEqual(
+      'main'
+    );
+    expect(wrapper.find('input#text-wfjt-limit').prop('value')).toEqual(
+      1234567890
+    );
+  });
+
   test('webhooks and enable concurrent jobs functions properly', async () => {
     act(() => {
       wrapper.find('Checkbox[aria-label="Enable Webhook"]').invoke('onChange')(