Adds FieldWithPrompt component to handle fields that are also promptable

awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Tooltip } from '@patternfly/react-core';
+import { CheckboxField } from '@components/FormField';
+import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
+
+const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
+  margin-left: 10px;
+`;
+
+const FieldHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--pf-c-form__label--PaddingBottom);
+
+  label {
+    --pf-c-form__label--PaddingBottom: 0px;
+  }
+`;
+
+const StyledCheckboxField = styled(CheckboxField)`
+  --pf-c-check__label--FontSize: var(--pf-c-form__label--FontSize);
+`;
+
+function FieldWithPrompt({
+  children,
+  fieldId,
+  i18n,
+  isRequired,
+  label,
+  promptId,
+  promptName,
+  promptValidate,
+  tooltip,
+  tooltipMaxWidth,
+}) {
+  return (
+    <div className="pf-c-form__group">
+      <FieldHeader>
+        <div>
+          <label className="pf-c-form__label" htmlFor={fieldId}>
+            <span className="pf-c-form__label-text">{label}</span>
+            {isRequired && (
+              <span className="pf-c-form__label-required" aria-hidden="true">
+                *
+              </span>
+            )}
+          </label>
+          {tooltip && (
+            <Tooltip
+              content={tooltip}
+              maxWidth={tooltipMaxWidth}
+              position="right"
+            >
+              <QuestionCircleIcon />
+            </Tooltip>
+          )}
+        </div>
+        <StyledCheckboxField
+          id={promptId}
+          label={i18n._(t`Prompt On Launch`)}
+          name={promptName}
+          validate={promptValidate}
+        />
+      </FieldHeader>
+      {children}
+    </div>
+  );
+}
+
+FieldWithPrompt.propTypes = {
+  fieldId: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  promptId: PropTypes.string.isRequired,
+  promptValidate: PropTypes.func,
+  tooltip: PropTypes.node,
+  tooltipMaxWidth: PropTypes.string,
+};
+
+FieldWithPrompt.defaultProps = {
+  isRequired: false,
+  promptValidate: () => {},
+  tooltip: null,
+  tooltipMaxWidth: '',
+};
+
+export default withI18n()(FieldWithPrompt);

awx/ui_next/src/components/FieldWithPrompt/index.js

@@ -0,0 +1 @@
+export { default } from './FieldWithPrompt';

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

@@ -21,6 +21,7 @@ import FormField, {
   FieldTooltip,
   FormSubmitError,
 } from '@components/FormField';
+import FieldWithPrompt from '@components/FieldWithPrompt';
 import FormRow from '@components/FormRow';
 import CollapsibleSection from '@components/CollapsibleSection';
 import { required } from '@util/validators';
@@ -227,37 +228,31 @@ class JobTemplateForm extends Component {
             type="text"
             label={i18n._(t`Description`)}
           />
-          <Field
-            name="job_type"
-            validate={required(null, i18n)}
-            onBlur={handleBlur}
+          <FieldWithPrompt
+            fieldId="template-job-type"
+            label={i18n._(t`Job Type`)}
+            promptId="template-ask-job-type-on-launch"
+            promptName="ask_job_type_on_launch"
+            isRequired
           >
-            {({ form, field }) => {
-              const isValid = !form.touched.job_type || !form.errors.job_type;
-              return (
-                <FormGroup
-                  fieldId="template-job-type"
-                  helperTextInvalid={form.errors.job_type}
-                  isRequired
-                  isValid={isValid}
-                  label={i18n._(t`Job Type`)}
-                >
-                  <FieldTooltip
-                    content={i18n._(t`For job templates, select run to execute
-                      the playbook. Select check to only check playbook syntax,
-                      test environment setup, and report problems without
-                      executing the playbook.`)}
-                  />
+            <Field
+              name="job_type"
+              validate={required(null, i18n)}
+              onBlur={handleBlur}
+            >
+              {({ form, field }) => {
+                const isValid = !form.touched.job_type || !form.errors.job_type;
+                return (
                   <AnsibleSelect
                     isValid={isValid}
                     id="template-job-type"
                     data={jobTypeOptions}
                     {...field}
                   />
-                </FormGroup>
-              );
-            }}
-          </Field>
+                );
+              }}
+            </Field>
+          </FieldWithPrompt>
           <Field
             name="inventory"
             validate={required(i18n._(t`Select a value for this field`), i18n)}
@@ -613,6 +608,7 @@ const FormikApp = withFormik({
       ? summary_fields.inventory.organization_id
       : null;
     return {
+      ask_job_type_on_launch: template.ask_job_type_on_launch || false,
       name: template.name || '',
       description: template.description || '',
       job_type: template.job_type || 'run',