Merge pull request #4582 from marshmalien/4233-playbook-field

Add playbook select and project field validation

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/api/models/Projects.js

@@ -4,6 +4,12 @@ class Projects extends Base {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/projects/';
+
+    this.readPlaybooks = this.readPlaybooks.bind(this);
+  }
+
+  readPlaybooks(id) {
+    return this.http.get(`${this.baseUrl}${id}/playbooks/`);
   }
 }
 

awx/ui_next/src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -17,13 +17,16 @@ class AnsibleSelect extends React.Component {
   }
 
   render() {
-    const { value, data, i18n } = this.props;
+    const { id, data, i18n, isValid, onBlur, value } = this.props;
 
     return (
       <FormSelect
+        id={id}
         value={value}
         onChange={this.onSelectChange}
+        onBlur={onBlur}
         aria-label={i18n._(t`Select Input`)}
+        isValid={isValid}
       >
         {data.map(datum => (
           <FormSelectOption
@@ -40,10 +43,15 @@ class AnsibleSelect extends React.Component {
 
 AnsibleSelect.defaultProps = {
   data: [],
+  isValid: true,
+  onBlur: () => {},
 };
 
 AnsibleSelect.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object),
+  id: PropTypes.string.isRequired,
+  isValid: PropTypes.bool,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
 };

awx/ui_next/src/components/AnsibleSelect/AnsibleSelect.test.jsx

@@ -19,6 +19,7 @@ describe('<AnsibleSelect />', () => {
   test('initially renders succesfully', async () => {
     mountWithContexts(
       <AnsibleSelect
+        id="bar"
         value="foo"
         name="bar"
         onChange={() => {}}
@@ -31,6 +32,7 @@ describe('<AnsibleSelect />', () => {
     const spy = jest.spyOn(_AnsibleSelect.prototype, 'onSelectChange');
     const wrapper = mountWithContexts(
       <AnsibleSelect
+        id="bar"
         value="foo"
         name="bar"
         onChange={() => {}}
@@ -45,6 +47,7 @@ describe('<AnsibleSelect />', () => {
   test('Returns correct select options', () => {
     const wrapper = mountWithContexts(
       <AnsibleSelect
+        id="bar"
         value="foo"
         name="bar"
         onChange={() => {}}

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -186,6 +186,7 @@ class Lookup extends React.Component {
       columns,
       multiple,
       name,
+      onBlur,
       required,
       i18n,
     } = this.props;
@@ -209,7 +210,7 @@ class Lookup extends React.Component {
 
     return (
       <Fragment>
-        <InputGroup>
+        <InputGroup onBlur={onBlur}>
           <Button
             aria-label="Search"
             id={id}

awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx

@@ -164,6 +164,7 @@ class OrganizationForm extends Component {
                           label={i18n._(t`Ansible Environment`)}
                         >
                           <AnsibleSelect
+                            id="org-custom-virtualenv"
                             data={[
                               defaultVenv,
                               ...custom_virtualenvs

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { sleep } from '@testUtils/testUtils';
 import JobTemplateAdd from './JobTemplateAdd';
 import { JobTemplatesAPI, LabelsAPI } from '@api';
 
@@ -54,8 +55,8 @@ describe('<JobTemplateAdd />', () => {
     ).toEqual(true);
 
     expect(wrapper.find('input#template-name').text()).toBe(defaultProps.name);
-    expect(wrapper.find('input#template-playbook').text()).toBe(
-      defaultProps.playbook
+    expect(wrapper.find('AnsibleSelect[name="playbook"]').text()).toBe(
+      'Choose a playbook'
     );
     expect(wrapper.find('ProjectLookup').prop('value')).toBe(null);
     done();
@@ -78,7 +79,18 @@ describe('<JobTemplateAdd />', () => {
     });
     const wrapper = mountWithContexts(<JobTemplateAdd />);
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
-    wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    const formik = wrapper.find('Formik').instance();
+    const changeState = new Promise(resolve => {
+      formik.setState(
+        {
+          values: jobTemplateData,
+        },
+        () => resolve()
+      );
+    });
+    await changeState;
+    wrapper.find('form').simulate('submit');
+    await sleep(1);
     expect(JobTemplatesAPI.create).toHaveBeenCalledWith(jobTemplateData);
     done();
   });
@@ -107,6 +119,7 @@ describe('<JobTemplateAdd />', () => {
     });
 
     await wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    await sleep(0);
     expect(history.push).toHaveBeenCalledWith(
       '/templates/job_template/1/details'
     );

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

@@ -4,7 +4,7 @@ import { withRouter, Redirect } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
-import { JobTemplatesAPI } from '@api';
+import { JobTemplatesAPI, ProjectsAPI } from '@api';
 import { JobTemplate } from '@types';
 import JobTemplateForm from '../shared/JobTemplateForm';
 
@@ -21,6 +21,7 @@ class JobTemplateEdit extends Component {
       contentError: null,
       formSubmitError: null,
       relatedCredentials: [],
+      relatedProjectPlaybooks: [],
     };
 
     const {
@@ -31,6 +32,9 @@ class JobTemplateEdit extends Component {
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.loadRelatedCredentials = this.loadRelatedCredentials.bind(this);
+    this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind(
+      this
+    );
     this.submitLabels = this.submitLabels.bind(this);
   }
 
@@ -41,15 +45,13 @@ class JobTemplateEdit extends Component {
   async loadRelated() {
     this.setState({ contentError: null, hasContentLoading: true });
     try {
-      const [
-        relatedCredentials,
-        // relatedProjectPlaybooks,
-      ] = await Promise.all([
+      const [relatedCredentials, relatedProjectPlaybooks] = await Promise.all([
         this.loadRelatedCredentials(),
-        // this.loadRelatedProjectPlaybooks(),
+        this.loadRelatedProjectPlaybooks(),
       ]);
       this.setState({
         relatedCredentials,
+        relatedProjectPlaybooks,
       });
     } catch (contentError) {
       this.setState({ contentError });
@@ -86,15 +88,31 @@ class JobTemplateEdit extends Component {
     }
   }
 
-  async handleSubmit(values, newLabels = [], removedLabels = []) {
+  async loadRelatedProjectPlaybooks() {
+    const {
+      template: { project },
+    } = this.props;
+    try {
+      const { data: playbooks = [] } = await ProjectsAPI.readPlaybooks(project);
+      this.setState({ relatedProjectPlaybooks: playbooks });
+      return playbooks;
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  async handleSubmit(values) {
     const {
       template: { id },
       history,
     } = this.props;
+    const { newLabels, removedLabels } = values;
+    delete values.newLabels;
+    delete values.removedLabels;
 
     this.setState({ formSubmitError: null });
     try {
-      await JobTemplatesAPI.update(id, { ...values });
+      await JobTemplatesAPI.update(id, values);
       await Promise.all([this.submitLabels(newLabels, removedLabels)]);
       history.push(this.detailsUrl);
     } catch (formSubmitError) {
@@ -102,7 +120,7 @@ class JobTemplateEdit extends Component {
     }
   }
 
-  async submitLabels(newLabels, removedLabels) {
+  async submitLabels(newLabels = [], removedLabels = []) {
     const {
       template: { id },
     } = this.props;
@@ -131,7 +149,12 @@ class JobTemplateEdit extends Component {
 
   render() {
     const { template } = this.props;
-    const { contentError, formSubmitError, hasContentLoading } = this.state;
+    const {
+      contentError,
+      formSubmitError,
+      hasContentLoading,
+      relatedProjectPlaybooks,
+    } = this.state;
     const canEdit = template.summary_fields.user_capabilities.edit;
 
     if (hasContentLoading) {
@@ -152,6 +175,7 @@ class JobTemplateEdit extends Component {
           template={template}
           handleCancel={this.handleCancel}
           handleSubmit={this.handleSubmit}
+          relatedProjectPlaybooks={relatedProjectPlaybooks}
         />
         {formSubmitError ? <div> error </div> : null}
       </CardBody>

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { JobTemplatesAPI, LabelsAPI } from '@api';
+import { sleep } from '@testUtils/testUtils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
 import JobTemplateEdit from './JobTemplateEdit';
 
 jest.mock('@api');
@@ -74,9 +75,29 @@ const mockRelatedCredentials = {
   ],
 };
 
+const mockRelatedProjectPlaybooks = [
+  'check.yml',
+  'debug-50.yml',
+  'debug.yml',
+  'debug2.yml',
+  'debug_extra_vars.yml',
+  'dynamic_inventory.yml',
+  'environ_test.yml',
+  'fail_unless.yml',
+  'pass_unless.yml',
+  'pause.yml',
+  'ping-20.yml',
+  'ping.yml',
+  'setfact_50.yml',
+  'vault.yml',
+];
+
 JobTemplatesAPI.readCredentials.mockResolvedValue({
   data: mockRelatedCredentials,
 });
+ProjectsAPI.readPlaybooks.mockResolvedValue({
+  data: mockRelatedProjectPlaybooks,
+});
 LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
 
 describe('<JobTemplateEdit />', () => {
@@ -101,20 +122,38 @@ describe('<JobTemplateEdit />', () => {
     const newLabels = [
       { associate: true, id: 3 },
       { associate: true, id: 3 },
-      { name: 'Mapel', organization: 1 },
+      { name: 'Maple', organization: 1 },
       { name: 'Tree', organization: 1 },
     ];
     const removedLabels = [
       { disassociate: true, id: 1 },
       { disassociate: true, id: 2 },
     ];
+    JobTemplatesAPI.update.mockResolvedValue({
+      data: { ...updatedTemplateData },
+    });
+    const formik = wrapper.find('Formik').instance();
+    const changeState = new Promise(resolve => {
+      formik.setState(
+        {
+          values: {
+            ...mockJobTemplate,
+            ...updatedTemplateData,
+            newLabels,
+            removedLabels,
+          },
+        },
+        () => resolve()
+      );
+    });
+    await changeState;
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
 
-    await wrapper.find('JobTemplateForm').prop('handleSubmit')(
-      updatedTemplateData,
-      newLabels,
-      removedLabels
-    );
-    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, updatedTemplateData);
+    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, {
+      ...mockJobTemplate,
+      ...updatedTemplateData,
+    });
     expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.generateLabel).toHaveBeenCalledTimes(2);

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 { Formik, Field } from 'formik';
+import { withFormik, Field } from 'formik';
 import { Form, FormGroup, Tooltip, Card } from '@patternfly/react-core';
 import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
 import ContentError from '@components/ContentError';
@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import { JobTemplate } from '@types';
 import InventoriesLookup from './InventoriesLookup';
 import ProjectLookup from './ProjectLookup';
-import { LabelsAPI } from '@api';
+import { LabelsAPI, ProjectsAPI } from '@api';
 
 const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
   margin-left: 10px;
@@ -47,6 +47,7 @@ class JobTemplateForm extends Component {
       summary_fields: {
         inventory: null,
         labels: { results: [] },
+        project: null,
       },
     },
   };
@@ -61,14 +62,21 @@ class JobTemplateForm extends Component {
       removedLabels: [],
       project: props.template.summary_fields.project,
       inventory: props.template.summary_fields.inventory,
+      relatedProjectPlaybooks: props.relatedProjectPlaybooks,
     };
     this.handleNewLabel = this.handleNewLabel.bind(this);
     this.loadLabels = this.loadLabels.bind(this);
     this.removeLabel = this.removeLabel.bind(this);
+    this.handleProjectValidation = this.handleProjectValidation.bind(this);
+    this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind(
+      this
+    );
   }
 
-  componentDidMount() {
-    this.loadLabels(QSConfig);
+  async componentDidMount() {
+    const { validateField } = this.props;
+    await this.loadLabels(QSConfig);
+    validateField('project');
   }
 
   async loadLabels(QueryConfig) {
@@ -101,7 +109,7 @@ class JobTemplateForm extends Component {
 
   handleNewLabel(label) {
     const { newLabels } = this.state;
-    const { template } = this.props;
+    const { template, setFieldValue } = this.props;
     const isIncluded = newLabels.some(newLabel => newLabel.name === label.name);
     if (isIncluded) {
       const filteredLabels = newLabels.filter(
@@ -109,6 +117,13 @@ class JobTemplateForm extends Component {
       );
       this.setState({ newLabels: filteredLabels });
     } else if (typeof label === 'string') {
+      setFieldValue('newLabels', [
+        ...newLabels,
+        {
+          name: label,
+          organization: template.summary_fields.inventory.organization_id,
+        },
+      ]);
       this.setState({
         newLabels: [
           ...newLabels,
@@ -119,6 +134,10 @@ class JobTemplateForm extends Component {
         ],
       });
     } else {
+      setFieldValue('newLabels', [
+        ...newLabels,
+        { name: label.name, associate: true, id: label.id },
+      ]);
       this.setState({
         newLabels: [
           ...newLabels,
@@ -130,13 +149,20 @@ class JobTemplateForm extends Component {
 
   removeLabel(label) {
     const { removedLabels, newLabels } = this.state;
-    const { template } = this.props;
+    const { template, setFieldValue } = this.props;
 
     const isAssociatedLabel = template.summary_fields.labels.results.some(
       tempLabel => tempLabel.id === label.id
     );
 
     if (isAssociatedLabel) {
+      setFieldValue(
+        'removedLabels',
+        removedLabels.concat({
+          disassociate: true,
+          id: label.id,
+        })
+      );
       this.setState({
         removedLabels: removedLabels.concat({
           disassociate: true,
@@ -147,10 +173,34 @@ class JobTemplateForm extends Component {
       const filteredLabels = newLabels.filter(
         newLabel => newLabel.name !== label.name
       );
+      setFieldValue('newLabels', filteredLabels);
       this.setState({ newLabels: filteredLabels });
     }
   }
 
+  async loadRelatedProjectPlaybooks(project) {
+    try {
+      const { data: playbooks = [] } = await ProjectsAPI.readPlaybooks(project);
+      this.setState({ relatedProjectPlaybooks: playbooks });
+    } catch (contentError) {
+      this.setState({ contentError });
+    }
+  }
+
+  handleProjectValidation() {
+    const { i18n, touched } = this.props;
+    const { project } = this.state;
+    return () => {
+      if (!project && touched.project) {
+        return i18n._(t`Select a value for this field`);
+      }
+      if (project && project.status === 'never updated') {
+        return i18n._(t`This project needs to be updated`);
+      }
+      return undefined;
+    };
+  }
+
   render() {
     const {
       loadedLabels,
@@ -158,10 +208,15 @@ class JobTemplateForm extends Component {
       hasContentLoading,
       inventory,
       project,
-      newLabels,
-      removedLabels,
+      relatedProjectPlaybooks = [],
     } = this.state;
-    const { handleCancel, handleSubmit, i18n, template } = this.props;
+    const {
+      handleCancel,
+      handleSubmit,
+      handleBlur,
+      i18n,
+      template,
+    } = this.props;
     const jobTypeOptions = [
       {
         value: '',
@@ -177,6 +232,28 @@ class JobTemplateForm extends Component {
         isDisabled: false,
       },
     ];
+    const playbookOptions = relatedProjectPlaybooks
+      .map(playbook => {
+        return {
+          value: playbook,
+          key: playbook,
+          label: playbook,
+          isDisabled: false,
+        };
+      })
+      .reduce(
+        (arr, playbook) => {
+          return arr.concat(playbook);
+        },
+        [
+          {
+            value: '',
+            key: '',
+            label: i18n._(t`Choose a playbook`),
+            isDisabled: false,
+          },
+        ]
+      );
 
     if (hasContentLoading) {
       return (
@@ -195,129 +272,180 @@ class JobTemplateForm extends Component {
     }
 
     return (
-      <Formik
-        initialValues={{
-          name: template.name,
-          description: template.description,
-          job_type: template.job_type,
-          inventory: template.inventory || '',
-          project: template.project || '',
-          playbook: template.playbook,
-          labels: template.summary_fields.labels.results,
-        }}
-        onSubmit={values => {
-          handleSubmit(values, newLabels, removedLabels);
-        }}
-        render={formik => (
-          <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-            <FormRow>
-              <FormField
-                id="template-name"
-                name="name"
-                type="text"
-                label={i18n._(t`Name`)}
-                validate={required(null, i18n)}
-                isRequired
-              />
-              <FormField
-                id="template-description"
-                name="description"
-                type="text"
-                label={i18n._(t`Description`)}
-              />
-              <Field
-                name="job_type"
-                validate={required(null, i18n)}
-                render={({ field }) => (
-                  <FormGroup
-                    fieldId="template-job-type"
-                    isRequired
-                    label={i18n._(t`Job Type`)}
-                  >
-                    <Tooltip
-                      position="right"
-                      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.`)}
-                    >
-                      <QuestionCircleIcon />
-                    </Tooltip>
-                    <AnsibleSelect data={jobTypeOptions} {...field} />
-                  </FormGroup>
-                )}
-              />
-              <Field
-                name="inventory"
-                validate={required(null, i18n)}
-                render={({ form }) => (
-                  <InventoriesLookup
-                    value={inventory}
-                    tooltip={i18n._(t`Select the inventory containing the hosts
-                      you want this job to manage.`)}
-                    onChange={value => {
-                      form.setFieldValue('inventory', value.id);
-                      this.setState({ inventory: value });
-                    }}
-                    required
-                  />
-                )}
-              />
-              <Field
-                name="project"
-                validate={required(null, i18n)}
-                render={({ form }) => (
-                  <ProjectLookup
-                    value={project}
-                    tooltip={i18n._(t`Select the project containing the playbook
-                    you want this job to execute.`)}
-                    onChange={value => {
-                      form.setFieldValue('project', value.id);
-                      this.setState({ project: value });
-                    }}
-                    required
-                  />
-                )}
-              />
-              <FormField
-                id="template-playbook"
-                name="playbook"
-                type="text"
-                label={i18n._(t`Playbook`)}
-                tooltip={i18n._(
-                  t`Select the playbook to be executed by this job.`
-                )}
-                isRequired
-                validate={required(null, i18n)}
-              />
-            </FormRow>
-            <FormRow>
-              <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
-                <Tooltip
-                  position="right"
-                  content={i18n._(
-                    t`Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.`
-                  )}
+      <Form autoComplete="off" onSubmit={handleSubmit}>
+        <FormRow>
+          <FormField
+            id="template-name"
+            name="name"
+            type="text"
+            label={i18n._(t`Name`)}
+            validate={required(null, i18n)}
+            isRequired
+          />
+          <FormField
+            id="template-description"
+            name="description"
+            type="text"
+            label={i18n._(t`Description`)}
+          />
+          <Field
+            name="job_type"
+            validate={required(null, i18n)}
+            onBlur={handleBlur}
+            render={({ form, field }) => {
+              const isValid =
+                form && (!form.touched[field.name] || !form.errors[field.name]);
+              return (
+                <FormGroup
+                  fieldId="template-job-type"
+                  helperTextInvalid={form.errors.job_type}
+                  isRequired
+                  isValid={isValid}
+                  label={i18n._(t`Job Type`)}
                 >
-                  <QuestionCircleIcon />
-                </Tooltip>
-                <MultiSelect
-                  onAddNewItem={this.handleNewLabel}
-                  onRemoveItem={this.removeLabel}
-                  associatedItems={template.summary_fields.labels.results}
-                  options={loadedLabels}
+                  <Tooltip
+                    position="right"
+                    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.`)}
+                  >
+                    <QuestionCircleIcon />
+                  </Tooltip>
+                  <AnsibleSelect
+                    isValid={isValid}
+                    id="job_type"
+                    data={jobTypeOptions}
+                    {...field}
+                  />
+                </FormGroup>
+              );
+            }}
+          />
+          <Field
+            name="inventory"
+            validate={required(null, i18n)}
+            render={({ form }) => (
+              <InventoriesLookup
+                value={inventory}
+                tooltip={i18n._(t`Select the inventory containing the hosts
+                  you want this job to manage.`)}
+                onChange={value => {
+                  form.setFieldValue('inventory', value.id);
+                  this.setState({ inventory: value });
+                }}
+                required
+              />
+            )}
+          />
+          <Field
+            name="project"
+            validate={this.handleProjectValidation()}
+            render={({ form }) => {
+              const isValid = form && !form.errors.project;
+              return (
+                <ProjectLookup
+                  helperTextInvalid={form.errors.project}
+                  isValid={isValid}
+                  value={project}
+                  onBlur={handleBlur}
+                  tooltip={i18n._(t`Select the project containing the playbook
+                  you want this job to execute.`)}
+                  onChange={value => {
+                    this.loadRelatedProjectPlaybooks(value.id);
+                    form.setFieldValue('project', value.id);
+                    form.setFieldTouched('project');
+                    this.setState({ project: value });
+                  }}
+                  required
                 />
-              </FormGroup>
-            </FormRow>
-            <FormActionGroup
-              onCancel={handleCancel}
-              onSubmit={formik.handleSubmit}
+              );
+            }}
+          />
+          <Field
+            name="playbook"
+            validate={required(i18n._(t`Select a value for this field`), i18n)}
+            onBlur={handleBlur}
+            render={({ field, form }) => {
+              const isValid =
+                form && (!form.touched[field.name] || !form.errors[field.name]);
+              return (
+                <FormGroup
+                  fieldId="template-playbook"
+                  helperTextInvalid={form.errors.playbook}
+                  isRequired
+                  isValid={isValid}
+                  label={i18n._(t`Playbook`)}
+                >
+                  <Tooltip
+                    position="right"
+                    content={i18n._(
+                      t`Select the playbook to be executed by this job.`
+                    )}
+                  >
+                    <QuestionCircleIcon />
+                  </Tooltip>
+                  <AnsibleSelect
+                    id="playbook"
+                    data={playbookOptions}
+                    isValid={isValid}
+                    form={form}
+                    {...field}
+                  />
+                </FormGroup>
+              );
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
+            <Tooltip
+              position="right"
+              content={i18n._(
+                t`Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.`
+              )}
+            >
+              <QuestionCircleIcon />
+            </Tooltip>
+            <MultiSelect
+              onAddNewItem={this.handleNewLabel}
+              onRemoveItem={this.removeLabel}
+              associatedItems={template.summary_fields.labels.results}
+              options={loadedLabels}
             />
-          </Form>
-        )}
-      />
+          </FormGroup>
+        </FormRow>
+        <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
+      </Form>
     );
   }
 }
+
+const FormikApp = withFormik({
+  mapPropsToValues(props) {
+    const { template = {} } = props;
+    const {
+      name = '',
+      description = '',
+      job_type = 'run',
+      inventory = '',
+      playbook = '',
+      project = '',
+      summary_fields = { labels: { results: [] } },
+    } = { ...template };
+
+    return {
+      name: name || '',
+      description: description || '',
+      job_type: job_type || '',
+      inventory: inventory || '',
+      project: project || '',
+      playbook: playbook || '',
+      labels: summary_fields.labels.results,
+    };
+  },
+  handleSubmit: (values, bag) => bag.props.handleSubmit(values),
+})(JobTemplateForm);
+
 export { JobTemplateForm as _JobTemplateForm };
-export default withI18n()(withRouter(JobTemplateForm));
+export default withI18n()(withRouter(FormikApp));

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

@@ -47,6 +47,7 @@ describe('<JobTemplateForm />', () => {
         handleCancel={jest.fn()}
       />
     );
+
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     expect(LabelsAPI.read).toHaveBeenCalled();
     expect(
@@ -66,6 +67,7 @@ describe('<JobTemplateForm />', () => {
         handleCancel={jest.fn()}
       />
     );
+
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     const form = wrapper.find('Formik');
     wrapper.find('input#template-name').simulate('change', {
@@ -90,7 +92,7 @@ describe('<JobTemplateForm />', () => {
       name: 'project',
     });
     expect(form.state('values').project).toEqual(4);
-    wrapper.find('input#template-playbook').simulate('change', {
+    wrapper.find('AnsibleSelect[name="playbook"]').simulate('change', {
       target: { value: 'new baz type', name: 'playbook' },
     });
     expect(form.state('values').playbook).toEqual('new baz type');
@@ -130,6 +132,27 @@ describe('<JobTemplateForm />', () => {
     done();
   });
 
+  test('should call loadRelatedProjectPlaybooks when project value changes', async done => {
+    const loadRelatedProjectPlaybooks = jest.spyOn(
+      _JobTemplateForm.prototype,
+      'loadRelatedProjectPlaybooks'
+    );
+    const wrapper = mountWithContexts(
+      <JobTemplateForm
+        template={mockData}
+        handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
+      />
+    );
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    wrapper.find('ProjectLookup').prop('onChange')({
+      id: 10,
+      name: 'project',
+    });
+    expect(loadRelatedProjectPlaybooks).toHaveBeenCalledWith(10);
+    done();
+  });
+
   test('handleNewLabel should arrange new labels properly', async done => {
     const handleNewLabel = jest.spyOn(
       _JobTemplateForm.prototype,

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

@@ -17,12 +17,23 @@ const loadProjects = async params => ProjectsAPI.read(params);
 
 class ProjectLookup extends React.Component {
   render() {
-    const { value, tooltip, onChange, required, i18n } = this.props;
+    const {
+      helperTextInvalid,
+      i18n,
+      isValid,
+      onChange,
+      required,
+      tooltip,
+      value,
+      onBlur,
+    } = this.props;
 
     return (
       <FormGroup
-        fieldId="project-lookup"
+        fieldId="project"
+        helperTextInvalid={helperTextInvalid}
         isRequired={required}
+        isValid={isValid}
         label={i18n._(t`Project`)}
       >
         {tooltip && (
@@ -31,10 +42,11 @@ class ProjectLookup extends React.Component {
           </Tooltip>
         )}
         <Lookup
-          id="project-lookup"
+          id="project"
           lookupHeader={i18n._(t`Projects`)}
           name="project"
           value={value}
+          onBlur={onBlur}
           onLookupSave={onChange}
           getItems={loadProjects}
           required={required}
@@ -47,15 +59,21 @@ class ProjectLookup extends React.Component {
 
 ProjectLookup.propTypes = {
   value: Project,
-  tooltip: string,
+  helperTextInvalid: string,
+  isValid: bool,
+  onBlur: func,
   onChange: func.isRequired,
   required: bool,
+  tooltip: string,
 };
 
 ProjectLookup.defaultProps = {
-  value: null,
-  tooltip: '',
+  helperTextInvalid: '',
+  isValid: true,
   required: false,
+  tooltip: '',
+  value: null,
+  onBlur: () => {},
 };
 
 export default withI18n()(ProjectLookup);