Uses formik hooks for JT Form

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { withFormik, Field } from 'formik';
+import { withFormik, useField, useFormikContext } from 'formik';
 import {
   Form,
   FormGroup,
@@ -47,7 +47,6 @@ function JobTemplateForm({
   validateField,
   handleCancel,
   handleSubmit,
-  handleBlur,
   setFieldValue,
   submitError,
   i18n,
@@ -62,6 +61,38 @@ function JobTemplateForm({
     Boolean(template?.host_config_key)
   );
 
+  const formikBag = useFormikContext();
+  const formikValues = formikBag.values;
+  const setFormikFieldValue = formikBag.setFieldValue;
+  const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({
+    name: 'job_type',
+    validate: required(null, i18n),
+  });
+  const [, inventoryMeta, inventoryHelpers] = useField('inventory');
+
+  const [, projectMeta, projectHelpers] = useField({
+    name: 'project',
+    validate: () => handleProjectValidation(),
+  });
+
+  const [scmField] = useField('scm_branch');
+
+  const [playbookField, , playbookMeta] = useField({
+    name: 'playbook',
+    validate: required(i18n._(t`Select a value for this field`), i18n),
+  });
+
+  const [credentialField, , credentialHelpers] = useField('credentials');
+  const [labelsField, , labelsHelpers] = useField('labels');
+  const [limitField, limitMeta] = useField('limit');
+  const [verbosityField] = useField('verbosity');
+  const [diffModeField, , diffModeHelpers] = useField('diff_mode');
+  const [instanceGroupsField, , instanceGroupsHelpers] = useField(
+    'instanceGroups'
+  );
+  const [jobTagsField, , jobTagsHelpers] = useField('job_tags');
+  const [skipTagsField, , skipTagsHelpers] = useField('skip_tags');
+
   const {
     request: fetchProject,
     error: projectContentError,
@@ -184,26 +215,15 @@ function JobTemplateForm({
             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}
+            {...jobTypeField}
+            isValid={!jobTypeMeta.touched || !jobTypeMeta.error}
             id="template-job-type"
             data={jobTypeOptions}
-                  {...field}
             onChange={(event, value) => {
-                    form.setFieldValue('job_type', value);
+              jobTypeHelpers.setValue(value);
             }}
           />
-              );
-            }}
-          </Field>
         </FieldWithPrompt>
         <FieldWithPrompt
           fieldId="template-inventory"
@@ -214,108 +234,73 @@ function JobTemplateForm({
           tooltip={i18n._(t`Select the inventory containing the hosts
             you want this job to manage.`)}
         >
-          <Field name="inventory">
-            {({ form }) => (
-              <>
           <InventoryLookup
             value={inventory}
-                  onBlur={() => {
+            onBlur={() => inventoryHelpers.setTouched()}
-                    form.setFieldTouched('inventory');
-                  }}
             onChange={value => {
-                    form.setValues({
+              inventoryHelpers.setValue(value.id);
-                      ...form.values,
+              setFormikFieldValue('organizationId', value.organization);
-                      inventory: value.id,
-                      organizationId: value.organization,
-                    });
               setInventory(value);
             }}
             required
-                  touched={form.touched.inventory}
+            touched={inventoryMeta.touched}
-                  error={form.errors.inventory}
+            error={inventoryMeta.error}
           />
-                {(form.touched.inventory ||
+          {(inventoryMeta.touched || formikValues.ask_inventory_on_launch) &&
-                  form.touched.ask_inventory_on_launch) &&
+            inventoryMeta.error && (
-                  form.errors.inventory && (
               <div
                 className="pf-c-form__helper-text pf-m-error"
                 aria-live="polite"
               >
-                      {form.errors.inventory}
+                {inventoryMeta.error}
               </div>
             )}
-              </>
-            )}
-          </Field>
         </FieldWithPrompt>
-        <Field name="project" validate={handleProjectValidation}>
+
-          {({ form }) => (
         <ProjectLookup
           value={project}
-              onBlur={() => form.setFieldTouched('project')}
+          onBlur={() => projectHelpers.setTouched()}
           tooltip={i18n._(t`Select the project containing the playbook
                   you want this job to execute.`)}
-              isValid={!form.touched.project || !form.errors.project}
+          isValid={!projectMeta.touched || !projectMeta.error}
-              helperTextInvalid={form.errors.project}
+          helperTextInvalid={projectMeta.error}
           onChange={handleProjectUpdate}
           required
         />
-          )}
+        {project?.allow_override && (
-        </Field>
-        {project && project.allow_override && (
           <FieldWithPrompt
             fieldId="template-scm-branch"
             label={i18n._(t`SCM Branch`)}
             promptId="template-ask-scm-branch-on-launch"
             promptName="ask_scm_branch_on_launch"
           >
-            <Field name="scm_branch">
-              {({ field }) => {
-                return (
             <TextInput
               id="template-scm-branch"
-                    {...field}
+              {...scmField}
               onChange={(value, event) => {
-                      field.onChange(event);
+                scmField.onChange(event);
               }}
             />
-                );
-              }}
-            </Field>
           </FieldWithPrompt>
         )}
-        <Field
-          name="playbook"
-          validate={required(i18n._(t`Select a value for this field`), i18n)}
-          onBlur={handleBlur}
-        >
-          {({ field, form }) => {
-            const isValid = !form.touched.playbook || !form.errors.playbook;
-            return (
         <FormGroup
           fieldId="template-playbook"
-                helperTextInvalid={form.errors.playbook}
+          helperTextInvalid={playbookMeta.error}
           isRequired
-                isValid={isValid}
           label={i18n._(t`Playbook`)}
         >
           <FieldTooltip
-                  content={i18n._(
+            content={i18n._(t`Select the playbook to be executed by this job.`)}
-                    t`Select the playbook to be executed by this job.`
-                  )}
           />
           <PlaybookSelect
-                  projectId={form.values.project}
+            projectId={formikValues.project}
-                  isValid={isValid}
+            isValid={!(playbookMeta.touched || playbookMeta.error)}
-                  form={form}
+            form={formikBag}
-                  field={field}
+            field={playbookField}
-                  onBlur={() => form.setFieldTouched('playbook')}
+            onBlur={() => playbookMeta.setTouched()}
             onError={setContentError}
           />
         </FormGroup>
-            );
-          }}
-        </Field>
         <FormFullWidthLayout>
           <FieldWithPrompt
             fieldId="template-credentials"
@@ -328,22 +313,14 @@ function JobTemplateForm({
                 credential at run time. If you select credentials and check "Prompt on launch", the selected
                 credential(s) become the defaults that can be updated at run time.`)}
           >
-            <Field name="credentials" fieldId="template-credentials">
-              {({ field }) => {
-                return (
             <MultiCredentialsLookup
-                    value={field.value}
+              value={credentialField.value}
               onChange={newCredentials =>
-                      setFieldValue('credentials', newCredentials)
+                credentialHelpers.setValue(newCredentials)
               }
               onError={setContentError}
             />
-                );
-              }}
-            </Field>
           </FieldWithPrompt>
-          <Field name="labels">
-            {({ field }) => (
           <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
             <FieldTooltip
               content={i18n._(t`Optional labels that describe this job template,
@@ -351,13 +328,11 @@ function JobTemplateForm({
                       job templates and completed jobs.`)}
             />
             <LabelSelect
-                  value={field.value}
+              value={labelsField.value}
-                  onChange={labels => setFieldValue('labels', labels)}
+              onChange={labels => labelsHelpers.setValue(labels)}
               onError={setContentError}
             />
           </FormGroup>
-            )}
-          </Field>
           <VariablesField
             id="template-variables"
             name="extra_vars"
@@ -394,20 +369,14 @@ function JobTemplateForm({
                   playbook. Multiple patterns are allowed. Refer to Ansible
                   documentation for more information and examples on patterns.`)}
             >
-              <Field name="limit">
-                {({ form, field }) => {
-                  return (
               <TextInput
                 id="template-limit"
-                      {...field}
+                {...limitField}
-                      isValid={!form.touched.job_type || !form.errors.job_type}
+                isValid={!limitMeta.touched || !limitMeta.error}
                 onChange={(value, event) => {
-                        field.onChange(event);
+                  limitField.onChange(event);
                 }}
               />
-                  );
-                }}
-              </Field>
             </FieldWithPrompt>
             <FieldWithPrompt
               fieldId="template-verbosity"
@@ -417,15 +386,11 @@ function JobTemplateForm({
               tooltip={i18n._(t`Control the level of output ansible will
                 produce as the playbook executes.`)}
             >
-              <Field name="verbosity">
-                {({ field }) => (
               <AnsibleSelect
                 id="template-verbosity"
                 data={verbosityOptions}
-                    {...field}
+                {...verbosityField}
               />
-                )}
-              </Field>
             </FieldWithPrompt>
             <FormField
               id="template-job-slicing"
@@ -456,32 +421,20 @@ function JobTemplateForm({
                 Ansible tasks, where supported. This is equivalent
                 to Ansible&#x2019s --diff mode.`)}
             >
-              <Field name="diff_mode">
-                {({ form, field }) => {
-                  return (
               <Switch
                 id="template-show-changes"
-                      label={field.value ? i18n._(t`On`) : i18n._(t`Off`)}
+                label={diffModeField.value ? i18n._(t`On`) : i18n._(t`Off`)}
-                      isChecked={field.value}
+                isChecked={diffModeField.value}
-                      onChange={checked =>
+                onChange={checked => diffModeHelpers.setValue(checked)}
-                        form.setFieldValue(field.name, checked)
-                      }
               />
-                  );
-                }}
-              </Field>
             </FieldWithPrompt>
             <FormFullWidthLayout>
-              <Field name="instanceGroups">
-                {({ field, form }) => (
               <InstanceGroupsLookup
-                    value={field.value}
+                value={instanceGroupsField.value}
-                    onChange={value => form.setFieldValue(field.name, value)}
+                onChange={value => instanceGroupsHelpers.setValue(value)}
                 tooltip={i18n._(t`Select the Instance Groups for this Organization
                         to run on.`)}
               />
-                )}
-              </Field>
               <FieldWithPrompt
                 fieldId="template-tags"
                 label={i18n._(t`Job Tags`)}
@@ -493,14 +446,10 @@ function JobTemplateForm({
                     Refer to Ansible Tower documentation for details on
                     the usage of tags.`)}
               >
-                <Field name="job_tags">
-                  {({ field, form }) => (
                 <TagMultiSelect
-                      value={field.value}
+                  value={jobTagsField.value}
-                      onChange={value => form.setFieldValue(field.name, value)}
+                  onChange={value => jobTagsHelpers.setValue(value)}
                 />
-                  )}
-                </Field>
               </FieldWithPrompt>
               <FieldWithPrompt
                 fieldId="template-skip-tags"
@@ -513,14 +462,10 @@ function JobTemplateForm({
                     to Ansible Tower documentation for details on the usage
                     of tags.`)}
               >
-                <Field name="skip_tags">
-                  {({ field, form }) => (
                 <TagMultiSelect
-                      value={field.value}
+                  value={skipTagsField.value}
-                      onChange={value => form.setFieldValue(field.name, value)}
+                  onChange={value => skipTagsHelpers.setValue(value)}
                 />
-                  )}
-                </Field>
               </FieldWithPrompt>
               <FormGroup
                 fieldId="template-option-checkboxes"