From 52a8935b20b7226555552bea3a83256303d133a0 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 4 Feb 2020 16:30:06 -0500
Subject: [PATCH 01/13] Adds WorkflowJobTemplate Add and Edit form and
 functionality.

---
 .../src/api/models/WorkflowJobTemplates.js    |  31 ++-
 .../Template/TemplateList/TemplateList.jsx    |   6 +-
 .../src/screens/Template/Templates.jsx        |  89 ++++-----
 .../screens/Template/WorkflowJobTemplate.jsx  | 153 ++++++++-------
 .../WorkflowJobTemplateAdd.jsx                |  49 +++++
 .../WorkflowJobTemplateAdd.test.jsx           |  64 +++++++
 .../Template/WorkflowJobTemplateAdd/index.js  |   1 +
 .../WorkflowJobTemplateEdit.jsx               |  76 ++++++++
 .../WorkflowJobTemplateEdit.test.jsx          |  97 ++++++++++
 .../Template/WorkflowJobTemplateEdit/index.js |   1 +
 .../shared/WorkflowJobTemplateForm.jsx        | 176 ++++++++++++++++++
 .../shared/WorkflowJobTemplateForm.test.jsx   | 137 ++++++++++++++
 .../src/screens/Template/shared/index.js      |   3 +-
 13 files changed, 767 insertions(+), 116 deletions(-)
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
 create mode 100644 awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js
 create mode 100644 awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
 create mode 100644 awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx

diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index 691c444379..922d5cde00 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -6,6 +6,24 @@ class WorkflowJobTemplates extends Base {
     this.baseUrl = '/api/v2/workflow_job_templates/';
   }
 
+  associateLabel(id, label, orgId) {
+    return this.http.post(`${this.baseUrl}${id}/labels/`, {
+      name: label.name,
+      organization: orgId,
+    });
+  }
+
+  createNode(id, data) {
+    return this.http.post(`${this.baseUrl}${id}/workflow_nodes/`, data);
+  }
+
+  disassociateLabel(id, label) {
+    return this.http.post(`${this.baseUrl}${id}/labels/`, {
+      id: label.id,
+      disassociate: true,
+    });
+  }
+
   launch(id, data) {
     return this.http.post(`${this.baseUrl}${id}/launch/`, data);
   }
@@ -20,17 +38,16 @@ class WorkflowJobTemplates extends Base {
     });
   }
 
+  readScheduleList(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/schedules/`, {
+      params
+    });
+  }
+
   readWebhookKey(id) {
     return this.http.get(`${this.baseUrl}${id}/webhook_key/`);
   }
 
-  createNode(id, data) {
-    return this.http.post(`${this.baseUrl}${id}/workflow_nodes/`, data);
-  }
-
-  readScheduleList(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/schedules/`, { params });
-  }
 }
 
 export default WorkflowJobTemplates;
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 717b1b5f89..913fcfb648 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 
 import {
   JobTemplatesAPI,
@@ -141,7 +141,7 @@ function TemplateList({ i18n }) {
   );
 
   return (
-    <>
+    <PageSection>
       <Card>
         <PaginatedDataList
           contentError={contentError}
@@ -245,7 +245,7 @@ function TemplateList({ i18n }) {
         {i18n._(t`Failed to delete one or more templates.`)}
         <ErrorDetail error={deletionError} />
       </AlertModal>
-    </>
+    </PageSection>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index c8eb2f243e..456f8b3ca4 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
-import { PageSection } from '@patternfly/react-core';
 
 import { Config } from '@contexts/Config';
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
@@ -10,6 +9,7 @@ import { TemplateList } from './TemplateList';
 import Template from './Template';
 import WorkflowJobTemplate from './WorkflowJobTemplate';
 import JobTemplateAdd from './JobTemplateAdd';
+import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
 
 class Templates extends Component {
   constructor(props) {
@@ -20,6 +20,9 @@ class Templates extends Component {
       breadcrumbConfig: {
         '/templates': i18n._(t`Templates`),
         '/templates/job_template/add': i18n._(t`Create New Job Template`),
+        '/templates/workflow_job_template/add': i18n._(
+          t`Create New Workflow Job Template`
+        ),
       },
     };
   }
@@ -56,47 +59,49 @@ class Templates extends Component {
     return (
       <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <PageSection>
-          <Switch>
-            <Route
-              path={`${match.path}/job_template/add`}
-              render={() => <JobTemplateAdd />}
-            />
-            <Route
-              path={`${match.path}/job_template/:id`}
-              render={({ match: newRouteMatch }) => (
-                <Config>
-                  {({ me }) => (
-                    <Template
-                      history={history}
-                      location={location}
-                      setBreadcrumb={this.setBreadCrumbConfig}
-                      me={me || {}}
-                      match={newRouteMatch}
-                    />
-                  )}
-                </Config>
-              )}
-            />
-            <Route
-              path={`${match.path}/workflow_job_template/:id`}
-              render={({ match: newRouteMatch }) => (
-                <Config>
-                  {({ me }) => (
-                    <WorkflowJobTemplate
-                      history={history}
-                      location={location}
-                      setBreadcrumb={this.setBreadCrumbConfig}
-                      me={me || {}}
-                      match={newRouteMatch}
-                    />
-                  )}
-                </Config>
-              )}
-            />
-            <Route path={`${match.path}`} render={() => <TemplateList />} />
-          </Switch>
-        </PageSection>
+        <Switch>
+          <Route
+            path={`${match.path}/job_template/add`}
+            render={() => <JobTemplateAdd />}
+          />
+          <Route
+            path={`${match.path}/workflow_job_template/add`}
+            render={() => <WorkflowJobTemplateAdd />}
+          />
+          <Route
+            path={`${match.path}/job_template/:id`}
+            render={({ match: newRouteMatch }) => (
+              <Config>
+                {({ me }) => (
+                  <Template
+                    history={history}
+                    location={location}
+                    setBreadcrumb={this.setBreadCrumbConfig}
+                    me={me || {}}
+                    match={newRouteMatch}
+                  />
+                )}
+              </Config>
+            )}
+          />
+          <Route
+            path={`${match.path}/workflow_job_template/:id`}
+            render={({ match: newRouteMatch }) => (
+              <Config>
+                {({ me }) => (
+                  <WorkflowJobTemplate
+                    history={history}
+                    location={location}
+                    setBreadcrumb={this.setBreadCrumbConfig}
+                    me={me || {}}
+                    match={newRouteMatch}
+                  />
+                )}
+              </Config>
+            )}
+          />
+          <Route path={`${match.path}`} render={() => <TemplateList />} />
+        </Switch>
       </>
     );
   }
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index bdb9ca8ad6..5bb13eab8d 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -13,6 +13,7 @@ import RoutedTabs from '@components/RoutedTabs';
 import ScheduleList from '@components/ScheduleList';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
+import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
 import { Visualizer } from './WorkflowJobTemplateVisualizer';
 
 class WorkflowJobTemplate extends Component {
@@ -134,73 +135,99 @@ class WorkflowJobTemplate extends Component {
     }
 
     return (
-      <Card>
-        {cardHeader}
-        <Switch>
-          <Redirect
-            from="/templates/workflow_job_template/:id"
-            to="/templates/workflow_job_template/:id/details"
-            exact
-          />
-          {template && (
-            <Route
-              key="wfjt-details"
-              path="/templates/workflow_job_template/:id/details"
-              render={() => (
-                <WorkflowJobTemplateDetail
-                  template={template}
-                  webHookKey={webHookKey}
-                />
-              )}
+      <PageSection>
+        <Card className="awx-c-card">
+          {cardHeader}
+          <Switch>
+            <Redirect
+              from="/templates/workflow_job_template/:id"
+              to="/templates/workflow_job_template/:id/details"
+              exact
             />
-          )}
-          {template && (
-            <Route
-              key="wfjt-visualizer"
-              path="/templates/workflow_job_template/:id/visualizer"
-              render={() => (
-                <AppendBody>
-                  <FullPage>
-                    <Visualizer template={template} />
-                  </FullPage>
-                </AppendBody>
-              )}
-            />
-          )}
-          {template?.id && (
-            <Route path="/templates/workflow_job_template/:id/completed_jobs">
-              <JobList
-                defaultParams={{
-                  workflow_job__workflow_job_template: template.id,
-                }}
+            {template && (
+              <Route
+                key="wfjt-details"
+                path="/templates/workflow_job_template/:id/details"
+                render={() => (
+                  <WorkflowJobTemplateDetail
+                    template={template}
+                    webHookKey={webHookKey}
+                  />
+                )}
               />
-            </Route>
-          )}
-          {template && (
+            )}
+            {template && (
+              <Route
+                key="wfjt-edit"
+                path="/templates/workflow_job_template/:id/edit"
+                render={() => (
+                  <WorkflowJobTemplateEdit
+                    template={template}
+                    webHookKey={webHookKey}
+                  />
+                )}
+              />
+            )}
+            {template && (
+              <Route
+                key="wfjt-visualizer"
+                path="/templates/workflow_job_template/:id/visualizer"
+                render={() => (
+                  <AppendBody>
+                    <FullPage>
+                      <Visualizer template={template} />
+                    </FullPage>
+                  </AppendBody>
+                )}
+              />
+            )}
+            {template?.id && (
+              <Route path="/templates/workflow_job_template/:id/completed_jobs">
+                <JobList
+                  defaultParams={{
+                    workflow_job__workflow_job_template: template.id,
+                  }}
+                />
+              </Route>
+            )}
+
+            {template?.id && (
+              <Route path="/templates/workflow_job_template/:id/completed_jobs">
+                <JobList
+                  defaultParams={{
+                    workflow_job__workflow_job_template: template.id,
+                  }}
+                />
+              </Route>
+            )}
+            {template && (
+              <Route
+                path="/templates/:templateType/:id/schedules"
+                render={() => (
+                  <ScheduleList loadSchedules={this.loadSchedules} />
+                )}
+              />
+            )}
             <Route
-              path="/templates/:templateType/:id/schedules"
-              render={() => <ScheduleList loadSchedules={this.loadSchedules} />}
+              key="not-found"
+              path="*"
+              render={() =>
+                !hasContentLoading && (
+                  <ContentError isNotFound>
+                    {match.params.id && (
+                      <Link
+                        to={`/templates/workflow_job_template/${match.params.id}/details`}
+                      >
+                        {i18n._(`View Template Details`)}
+                      </Link>
+                    )}
+                  </ContentError>
+                )
+              }
             />
-          )}
-          <Route
-            key="not-found"
-            path="*"
-            render={() =>
-              !hasContentLoading && (
-                <ContentError isNotFound>
-                  {match.params.id && (
-                    <Link
-                      to={`/templates/workflow_job_template/${match.params.id}/details`}
-                    >
-                      {i18n._(`View Template Details`)}
-                    </Link>
-                  )}
-                </ContentError>
-              )
-            }
-          />
-        </Switch>
-      </Card>
+          </Switch>
+        </Card>
+      </PageSection>
     );
   }
 }
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
new file mode 100644
index 0000000000..96874360d5
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Card, PageSection } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
+
+import { WorkflowJobTemplatesAPI } from '@api';
+import WorkflowJobTemplateForm from '../shared/WorkflowJobTemplateForm';
+
+function WorkflowJobTemplateAdd() {
+  const [formSubmitError, setFormSubmitError] = useState();
+  const history = useHistory();
+  const handleSubmit = async values => {
+    const { labels, organizationId, ...remainingValues } = values;
+    try {
+      const {
+        data: { id },
+      } = await WorkflowJobTemplatesAPI.create(remainingValues);
+      await Promise.all([submitLabels(id, labels, organizationId)]);
+      history.push(`/templates/workflow_job_template/${id}/details`);
+    } catch (err) {
+      setFormSubmitError(err);
+    }
+  };
+  const submitLabels = (templateId, labels = [], organizationId) => {
+    const associatePromises = labels.map(label =>
+      WorkflowJobTemplatesAPI.associateLabel(templateId, label, organizationId)
+    );
+    return Promise.all([...associatePromises]);
+  };
+  const handleCancel = () => {
+    history.push(`/templates`);
+  };
+  return (
+    <PageSection>
+      <Card>
+        <CardBody>
+          <WorkflowJobTemplateForm
+            handleCancel={handleCancel}
+            handleSubmit={handleSubmit}
+          />
+        </CardBody>
+        {formSubmitError ? <div>formSubmitError</div> : ''}
+      </Card>
+    </PageSection>
+  );
+}
+
+export default WorkflowJobTemplateAdd;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
new file mode 100644
index 0000000000..584a27cb7b
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { WorkflowJobTemplatesAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+
+import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
+
+jest.mock('@api');
+
+describe('<WorkflowJobTemplateAdd/>', () => {
+  let wrapper;
+  let history;
+  beforeEach(async () => {
+    WorkflowJobTemplatesAPI.create.mockResolvedValue({ data: { id: 1 } });
+    await act(async () => {
+      history = createMemoryHistory({
+        initialEntries: ['/templates/workflow_job_template/add'],
+      });
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/workflow_job_template/add"
+          component={() => <WorkflowJobTemplateAdd />}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+              },
+            },
+          },
+        }
+      );
+    });
+  });
+  afterEach(async () => {
+    wrapper.unmount();
+  });
+  test('initially renders successfully', async () => {
+    expect(wrapper.length).toBe(1);
+  });
+  test('calls workflowJobTemplatesAPI with correct information on submit', async () => {
+    await act(async () => {
+      await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
+        name: 'Alex',
+        labels: [{ name: 'Foo', id: 1 }, { name: 'bar', id: 2 }],
+        organizationId: 1,
+      });
+    });
+    expect(WorkflowJobTemplatesAPI.create).toHaveBeenCalledWith({
+      name: 'Alex',
+    });
+    expect(WorkflowJobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
+  });
+  test('handleCancel navigates the user to the /templates', async () => {
+    await act(async () => {
+      await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
+    });
+    expect(history.location.pathname).toBe('/templates');
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js
new file mode 100644
index 0000000000..51111ce0fb
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js
@@ -0,0 +1 @@
+export { default } from './WorkflowJobTemplateAdd';
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
new file mode 100644
index 0000000000..e2f12dcbd7
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { CardBody } from '@components/Card';
+import { getAddedAndRemoved } from '@util/lists';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
+import ContentLoading from '@components/ContentLoading';
+import { WorkflowJobTemplateForm } from '../shared';
+
+function WorkflowJobTemplateEdit({ template, hasContentLoading }) {
+  const [formSubmitError, setFormSubmitError] = useState();
+  const history = useHistory();
+
+  const handleSubmit = async values => {
+    const { labels, ...remainingValues } = values;
+    try {
+      await WorkflowJobTemplatesAPI.update(template.id, remainingValues);
+      await Promise.all([submitLabels(labels, values.organization)]);
+      history.push(`/templates/workflow_job_template/${template.id}/details`);
+    } catch (err) {
+      setFormSubmitError(err);
+    }
+  };
+  const submitLabels = async (labels = [], orgId) => {
+    const { added, removed } = getAddedAndRemoved(
+      template.summary_fields.labels.results,
+      labels
+    );
+    if (!orgId && !template.organization) {
+      try {
+        const {
+          data: { results },
+        } = await OrganizationsAPI.read();
+        orgId = results[0].id;
+      } catch (err) {
+        setFormSubmitError(err);
+      }
+    }
+    const disassociationPromises = removed.map(label =>
+      WorkflowJobTemplatesAPI.disassociateLabel(template.id, label)
+    );
+    const associationPromises = added.map(label => {
+      return WorkflowJobTemplatesAPI.associateLabel(
+        template.id,
+        label,
+        orgId || template.organization
+      );
+    });
+
+    const results = await Promise.all([
+      ...disassociationPromises,
+      ...associationPromises,
+    ]);
+    return results;
+  };
+
+  const handleCancel = () => {
+    history.push(`/templates`);
+  };
+  if (hasContentLoading) {
+    return <ContentLoading />;
+  }
+  return (
+    <>
+      <CardBody>
+        <WorkflowJobTemplateForm
+          handleSubmit={handleSubmit}
+          handleCancel={handleCancel}
+          template={template}
+        />
+      </CardBody>
+      {formSubmitError ? <div>formSubmitError</div> : ''}
+    </>
+  );
+}
+export default WorkflowJobTemplateEdit;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
new file mode 100644
index 0000000000..c5bfbe7e6e
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { WorkflowJobTemplatesAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
+
+jest.mock('@api');
+const mockTemplate = {
+  id: 6,
+  name: 'Foo',
+  description: 'Foo description',
+  summary_fields: {
+    inventory: { id: 1, name: 'Inventory 1' },
+    organization: { id: 1, name: 'Organization 1' },
+    labels: {
+      results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+    },
+  },
+  scm_branch: 'devel',
+  limit: '5000',
+  variables: '---',
+};
+describe('<WorkflowJobTemplateEdit/>', () => {
+  let wrapper;
+  let history;
+  beforeEach(async () => {
+    await act(async () => {
+      history = createMemoryHistory({
+        initialEntries: ['/templates/workflow_job_template/6/edit'],
+      });
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/workflow_job_template/:id/edit"
+          component={() => <WorkflowJobTemplateEdit template={mockTemplate} />}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 6 } },
+              },
+            },
+          },
+        }
+      );
+    });
+  });
+  afterEach(async () => {
+    wrapper.unmount();
+  });
+  test('renders successfully', () => {
+    expect(wrapper.find('WorkflowJobTemplateEdit').length).toBe(1);
+  });
+  test('api is called to properly to save the updated template.', async () => {
+    await act(async () => {
+      await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
+        id: 6,
+        name: 'Alex',
+        description: 'Apollo and Athena',
+        inventory: { id: 1, name: 'Inventory 1' },
+        organization: 2,
+        labels: [{ name: 'Label 2', id: 2 }, { name: 'Generated Label' }],
+        scm_branch: 'master',
+        limit: '5000',
+        variables: '---',
+      });
+    });
+    expect(WorkflowJobTemplatesAPI.update).toHaveBeenCalledWith(6, {
+      id: 6,
+      name: 'Alex',
+      description: 'Apollo and Athena',
+      inventory: { id: 1, name: 'Inventory 1' },
+      organization: 2,
+      scm_branch: 'master',
+      limit: '5000',
+      variables: '---',
+    });
+    wrapper.update();
+    await expect(WorkflowJobTemplatesAPI.disassociateLabel).toBeCalledWith(6, {
+      name: 'Label 1',
+      id: 1,
+    });
+    wrapper.update();
+
+    await expect(WorkflowJobTemplatesAPI.associateLabel).toBeCalledTimes(1);
+  });
+  test('handleCancel navigates the user to the /templates', async () => {
+    await act(async () => {
+      await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
+    });
+    expect(history.location.pathname).toBe('/templates');
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js
new file mode 100644
index 0000000000..bd84799fb0
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js
@@ -0,0 +1 @@
+export { default } from './WorkflowJobTemplateEdit';
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
new file mode 100644
index 0000000000..f30cea96b5
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { Formik, Field } from 'formik';
+
+import { Form, FormGroup } from '@patternfly/react-core';
+import { required } from '@util/validators';
+import PropTypes from 'prop-types';
+
+import FormRow from '@components/FormRow';
+import FormField, { FieldTooltip } from '@components/FormField';
+import OrganizationLookup from '@components/Lookup/OrganizationLookup';
+import { InventoryLookup } from '@components/Lookup';
+import { VariablesField } from '@components/CodeMirrorInput';
+import FormActionGroup from '@components/FormActionGroup';
+import ContentError from '@components/ContentError';
+import LabelSelect from './LabelSelect';
+
+function WorkflowJobTemplateForm({
+  handleSubmit,
+  handleCancel,
+  i18n,
+  template = {},
+}) {
+  const [contentError, setContentError] = useState(null);
+  const [inventory, setInventory] = useState(
+    template?.summary_fields?.inventory || null
+  );
+  const [organization, setOrganization] = useState(
+    template?.summary_fields?.organization || null
+  );
+
+  if (contentError) {
+    return <ContentError error={contentError} />;
+  }
+  return (
+    <Formik
+      onSubmit={handleSubmit}
+      initialValues={{
+        name: template.name || '',
+        description: template.description || '',
+        inventory: template.summary_fields?.inventory?.id || '',
+        organization: template.summary_fields?.organization?.id || '',
+        labels: template.summary_fields?.labels?.results || [],
+        variables: template.variables || '---',
+        limit: template.limit || '',
+        scmBranch: template.scm_branch || '',
+        ask_limit_on_launch: template.ask_limit_on_launch || false,
+        ask_inventory_on_launch: template.ask_inventory_on_launch || false,
+        ask_variables_on_launch: template.ask_variables_on_launch || false,
+        ask_scm_branch_on_launch: template.ask_scm_branch_on_launch || false,
+      }}
+    >
+      {formik => (
+        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
+          <FormRow>
+            <FormField
+              id="wfjt-name"
+              name="name"
+              type="text"
+              label={i18n._(t`Name`)}
+              validate={required(null, i18n)}
+              isRequired
+            />
+            <FormField
+              id="wfjt-description"
+              name="description"
+              type="text"
+              label={i18n._(t`Description`)}
+            />
+            <Field
+              id="wfjt-organization"
+              label={i18n._(t`Organization`)}
+              name="organization"
+            >
+              {({ form }) => (
+                <OrganizationLookup
+                  helperTextInvalid={form.errors.organization}
+                  isValid={
+                    !form.touched.organization || !form.errors.organization
+                  }
+                  onBlur={() => form.setFieldTouched('organization')}
+                  onChange={value => {
+                    form.setFieldValue('organization', value?.id || null);
+                    setOrganization(value);
+                  }}
+                  value={organization}
+                  touched={form.touched.organization}
+                  error={form.errors.organization}
+                />
+              )}
+            </Field>
+          </FormRow>
+          <FormRow>
+            <Field name="inventory">
+              {({ form }) => (
+                <InventoryLookup
+                  value={inventory}
+                  onBlur={() => form.setFieldTouched('inventory')}
+                  tooltip={i18n._(t`Select the inventory containing the hosts
+                  you want this job to manage.`)}
+                  isValid={!form.touched.inventory || !form.errors.inventory}
+                  helperTextInvalid={form.errors.inventory}
+                  onChange={value => {
+                    form.setFieldValue('inventory', value?.id || null);
+                    form.setFieldValue(
+                      'organizationId',
+                      value?.organization || null
+                    );
+                    setInventory(value);
+                  }}
+                  touched={form.touched.inventory}
+                  error={form.errors.inventory}
+                />
+              )}
+            </Field>
+            <FormGroup
+              fieldId="wfjt-limit"
+              name="limit"
+              label={i18n._(t`Limit`)}
+            >
+              <FieldTooltip
+                content={i18n._(
+                  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" name="limit" id="wfjt-limit" label="" />
+            </FormGroup>
+            <FormField
+              type="text"
+              id="wfjt-scmBranch"
+              label={i18n._(t`SCM Branch`)}
+              name="scmBranch"
+            />
+          </FormRow>
+
+          <FormRow>
+            <Field name="labels">
+              {({ field, form }) => (
+                <FormGroup label={i18n._(t`Labels`)} fieldId="wfjt-labels">
+                  <FieldTooltip
+                    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.`)}
+                  />
+                  <LabelSelect
+                    value={field.value}
+                    onChange={labels => form.setFieldValue('labels', labels)}
+                    onError={() => setContentError()}
+                  />
+                </FormGroup>
+              )}
+            </Field>
+          </FormRow>
+          <FormRow>
+            <VariablesField
+              id="host-variables"
+              name="variables"
+              label={i18n._(t`Variables`)}
+            />
+          </FormRow>
+          <FormActionGroup
+            onCancel={handleCancel}
+            onSubmit={formik.handleSubmit}
+          />
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+WorkflowJobTemplateForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  handleCancel: PropTypes.func.isRequired,
+};
+export default withI18n()(WorkflowJobTemplateForm);
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
new file mode 100644
index 0000000000..9c05c53dff
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
+
+describe('<WorkflowJobTemplateForm/>', () => {
+  let wrapper;
+  const handleSubmit = jest.fn();
+  const handleCancel = jest.fn();
+  const mockTemplate = {
+    id: 6,
+    name: 'Foo',
+    description: 'Foo description',
+    summary_fields: {
+      inventory: { id: 1, name: 'Inventory 1' },
+      organization: { id: 1, name: 'Organization 1' },
+      labels: {
+        results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+      },
+    },
+    scm_branch: 'devel',
+    limit: '5000',
+    variables: '---',
+  };
+  beforeEach(() => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <WorkflowJobTemplateForm
+          template={mockTemplate}
+          handleCancel={handleCancel}
+          handleSubmit={handleSubmit}
+        />
+      );
+    });
+  });
+  afterEach(() => {
+    wrapper.unmount();
+    jest.clearAllMocks();
+  });
+  test('renders successfully', () => {
+    expect(wrapper.length).toBe(1);
+  });
+  test('all the fields render successfully', () => {
+    const fields = [
+      'name',
+      'description',
+      'organization',
+      'inventory',
+      'limit',
+      'scmBranch',
+      'labels',
+      'variables',
+    ];
+    const assertField = (field, index) => {
+      expect(
+        wrapper
+          .find('Field')
+          .at(index)
+          .prop('name')
+      ).toBe(`${field}`);
+    };
+    fields.map((field, index) => assertField(field, index));
+  });
+  test('changing inputs should update values', async () => {
+    const inputsToChange = [
+      { element: 'wfjt-name', value: { value: 'new foo', name: 'name' } },
+      {
+        element: 'wfjt-description',
+        value: { value: 'new bar', name: 'description' },
+      },
+      { element: 'wfjt-limit', value: { value: 1234567890, name: 'limit' } },
+      {
+        element: 'wfjt-scmBranch',
+        value: { value: 'new branch', name: 'scmBranch' },
+      },
+    ];
+    const changeInputs = async ({ element, value }) => {
+      wrapper.find(`input#${element}`).simulate('change', {
+        target: value,
+      });
+    };
+
+    await act(async () => {
+      inputsToChange.map(input => changeInputs(input));
+      wrapper.find('LabelSelect').invoke('onChange')([
+        { name: 'new label', id: 5 },
+        { name: 'Label 1', id: 1 },
+        { name: 'Label 2', id: 2 },
+      ]);
+      wrapper.find('InventoryLookup').invoke('onChange')({
+        id: 3,
+        name: 'inventory',
+      });
+      wrapper.find('OrganizationLookup').invoke('onChange')({
+        id: 3,
+        name: 'organization',
+      });
+    });
+    wrapper.update();
+    const assertChanges = ({ element, value }) => {
+      expect(wrapper.find(`input#${element}`).prop('value')).toEqual(
+        typeof value.value === 'string' ? `${value.value}` : value.value
+      );
+    };
+
+    inputsToChange.map(input => assertChanges(input));
+    expect(wrapper.find('InventoryLookup').prop('value')).toEqual({
+      id: 3,
+      name: 'inventory',
+    });
+    expect(wrapper.find('OrganizationLookup').prop('value')).toEqual({
+      id: 3,
+      name: 'organization',
+    });
+    expect(wrapper.find('LabelSelect').prop('value')).toEqual([
+      { name: 'new label', id: 5 },
+      { name: 'Label 1', id: 1 },
+      { name: 'Label 2', id: 2 },
+    ]);
+  });
+  test('handleSubmit is called on submit button click', async () => {
+    await act(async () => {
+      await wrapper.find('button[aria-label="Save"]').simulate('click');
+    });
+
+    act(() => {
+      expect(handleSubmit).toBeCalled();
+    });
+  });
+  test('handleCancel is called on cancel button click', () => {
+    act(() => {
+      wrapper.find('button[aria-label="Cancel"]').simulate('click');
+    });
+
+    expect(handleCancel).toBeCalled();
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/shared/index.js b/awx/ui_next/src/screens/Template/shared/index.js
index 4e4c871715..a446c029c5 100644
--- a/awx/ui_next/src/screens/Template/shared/index.js
+++ b/awx/ui_next/src/screens/Template/shared/index.js
@@ -1 +1,2 @@
-export { default } from './JobTemplateForm';
+export { default as JobTemplateForm } from './JobTemplateForm';
+export { default as WorkflowJobTemplateForm } from './WorkflowJobTemplateForm';

From d97f516c3a2e4ecc8a6c7dab8d52524691c923cc Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 12 Feb 2020 12:11:13 -0500
Subject: [PATCH 02/13] Fields work and forms save

---
 .../src/api/models/WorkflowJobTemplates.js    |   8 +
 .../CodeMirrorInput/VariablesField.jsx        |  12 +-
 .../components/Lookup/CredentialLookup.jsx    |   3 +
 .../screens/Template/WorkflowJobTemplate.jsx  |   2 +-
 .../WorkflowJobTemplateEdit.jsx               |   9 +-
 .../shared/WorkflowJobTemplateForm.jsx        | 292 +++++++++++++++++-
 6 files changed, 309 insertions(+), 17 deletions(-)

diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index 922d5cde00..20158334ad 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -6,6 +6,14 @@ class WorkflowJobTemplates extends Base {
     this.baseUrl = '/api/v2/workflow_job_templates/';
   }
 
+  readWebhookKey(id) {
+    return this.http.get(`${this.baseUrl}${id}/webhook_key/`);
+  }
+
+  updateWebhookKey(id) {
+    return this.http.post(`${this.baseUrl}${id}/webhook_key/`);
+  }
+
   associateLabel(id, label, orgId) {
     return this.http.post(`${this.baseUrl}${id}/labels/`, {
       name: label.name,
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 336a3fa996..5a468bcccb 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { Split, SplitItem } from '@patternfly/react-core';
 import { CheckboxField } from '@components/FormField';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
+import { FieldTooltip } from '@components/FormField';
 import CodeMirrorInput from './CodeMirrorInput';
 import YamlJsonToggle from './YamlJsonToggle';
 import { JSON_MODE, YAML_MODE } from './constants';
@@ -20,7 +21,15 @@ const StyledCheckboxField = styled(CheckboxField)`
   --pf-c-check__label--FontSize: var(--pf-c-form__label--FontSize);
 `;
 
-function VariablesField({ i18n, id, name, label, readOnly, promptId }) {
+function VariablesField({
+  i18n,
+  id,
+  name,
+  label,
+  readOnly,
+  promptId,
+  tooltip,
+}) {
   const [field, meta, helpers] = useField(name);
   const [mode, setMode] = useState(isJson(field.value) ? JSON_MODE : YAML_MODE);
 
@@ -32,6 +41,7 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) {
             <label htmlFor={id} className="pf-c-form__label">
               <span className="pf-c-form__label-text">{label}</span>
             </label>
+            {tooltip && <FieldTooltip content={tooltip} />}
           </SplitItem>
           <SplitItem>
             <YamlJsonToggle
diff --git a/awx/ui_next/src/components/Lookup/CredentialLookup.jsx b/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
index bd3dbe3a5c..3f3221adeb 100644
--- a/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
@@ -6,6 +6,7 @@ import { t } from '@lingui/macro';
 import { CredentialsAPI } from '@api';
 import { Credential } from '@types';
 import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
+import { FieldTooltip } from '@components/FormField';
 import { FormGroup } from '@patternfly/react-core';
 import Lookup from '@components/Lookup';
 import OptionsList from './shared/OptionsList';
@@ -28,6 +29,7 @@ function CredentialLookup({
   value,
   history,
   i18n,
+  tooltip,
 }) {
   const [credentials, setCredentials] = useState([]);
   const [count, setCount] = useState(0);
@@ -60,6 +62,7 @@ function CredentialLookup({
       label={label}
       helperTextInvalid={helperTextInvalid}
     >
+      {tooltip && <FieldTooltip content={tooltip} />}
       <Lookup
         id="credential"
         header={label}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 5bb13eab8d..ab051f677f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -63,7 +63,7 @@ class WorkflowJobTemplate extends Component {
         );
         data.summary_fields.webhook_credential.kind = name;
       }
-
+      setBreadcrumb(data);
       this.setState({ template: data });
       setBreadcrumb(data);
     } catch (err) {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index e2f12dcbd7..b8c93d96ba 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -7,7 +7,11 @@ import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
 import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplateForm } from '../shared';
 
-function WorkflowJobTemplateEdit({ template, hasContentLoading }) {
+function WorkflowJobTemplateEdit({
+  template,
+  hasTemplateLoading,
+  webhook_key,
+}) {
   const [formSubmitError, setFormSubmitError] = useState();
   const history = useHistory();
 
@@ -57,7 +61,7 @@ function WorkflowJobTemplateEdit({ template, hasContentLoading }) {
   const handleCancel = () => {
     history.push(`/templates`);
   };
-  if (hasContentLoading) {
+  if (hasTemplateLoading) {
     return <ContentLoading />;
   }
   return (
@@ -67,6 +71,7 @@ function WorkflowJobTemplateEdit({ template, hasContentLoading }) {
           handleSubmit={handleSubmit}
           handleCancel={handleCancel}
           template={template}
+          webhook_key={webhook_key}
         />
       </CardBody>
       {formSubmitError ? <div>formSubmitError</div> : ''}
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index f30cea96b5..00ee0beb32 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -1,27 +1,54 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import { Formik, Field } from 'formik';
-
-import { Form, FormGroup } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  Checkbox,
+  InputGroup,
+  Button,
+  TextInput,
+} from '@patternfly/react-core';
 import { required } from '@util/validators';
 import PropTypes from 'prop-types';
+import { SyncAltIcon } from '@patternfly/react-icons';
+import { useParams } from 'react-router-dom';
 
+import AnsibleSelect from '@components/AnsibleSelect';
+import { WorkflowJobTemplatesAPI, CredentialTypesAPI } from '@api';
 import FormRow from '@components/FormRow';
-import FormField, { FieldTooltip } from '@components/FormField';
+import FormField, { FieldTooltip, CheckboxField } from '@components/FormField';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
+import CredentialLookup from '@components/Lookup/CredentialLookup';
 import { InventoryLookup } from '@components/Lookup';
 import { VariablesField } from '@components/CodeMirrorInput';
 import FormActionGroup from '@components/FormActionGroup';
 import ContentError from '@components/ContentError';
+import styled from 'styled-components';
 import LabelSelect from './LabelSelect';
 
+const GridFormGroup = styled(FormGroup)`
+  & > label {
+    grid-column: 1 / -1;
+  }
+
+  && {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+`;
+
 function WorkflowJobTemplateForm({
   handleSubmit,
   handleCancel,
   i18n,
   template = {},
+  className,
+  webhook_key,
 }) {
+  const urlOrigin = window.location.origin;
+  const { id } = useParams();
   const [contentError, setContentError] = useState(null);
   const [inventory, setInventory] = useState(
     template?.summary_fields?.inventory || null
@@ -29,10 +56,77 @@ function WorkflowJobTemplateForm({
   const [organization, setOrganization] = useState(
     template?.summary_fields?.organization || null
   );
+  const [webHookKey, setWebHookKey] = useState(webhook_key);
+  const [credTypeId, setCredentialTypeId] = useState();
+  const [webhookService, setWebHookService] = useState(
+    template.webhook_service || ''
+  );
+  const [hasWebhooks, setHasWebhooks] = useState(
+    webhookService !== '' || false
+  );
+  const [webhookCredential, setWebHookCredential] = useState(
+    template?.summary_fields?.webhook_credential || null
+  );
+
+  const webhookServiceOptions = [
+    {
+      value: '',
+      key: '',
+      label: i18n._(t`Choose a Webhook Service`),
+      isDisabled: true,
+    },
+    {
+      value: 'github',
+      key: 'github',
+      namespace: 'git_hub',
+      label: i18n._(t`GitHub`),
+      isDisabled: false,
+    },
+    {
+      value: 'gitlab',
+      key: 'gitlab',
+      namespace: 'git_lab',
+      label: i18n._(t`Git Lab`),
+      isDisabled: false,
+    },
+  ];
+
+  useEffect(() => {
+    if (!webhookService) {
+      return;
+    }
+    const loadCredentialType = async () => {
+      try {
+        const {
+          data: { results },
+        } = await CredentialTypesAPI.read({
+          namespace: webhookService.includes('hub')
+            ? 'github_token'
+            : 'gitlab_token',
+        });
+        setCredentialTypeId(results[0].id);
+      } catch (err) {
+        setContentError(err);
+      }
+    };
+    loadCredentialType();
+  }, [webhookService]);
+
+  const changeWebhookKey = async () => {
+    try {
+      const {
+        data: { webhook_key: key },
+      } = await WorkflowJobTemplatesAPI.updateWebhookKey(id);
+      setWebHookKey(key);
+    } catch (err) {
+      setContentError(err);
+    }
+  };
 
   if (contentError) {
     return <ContentError error={contentError} />;
   }
+
   return (
     <Formik
       onSubmit={handleSubmit}
@@ -45,6 +139,12 @@ function WorkflowJobTemplateForm({
         variables: template.variables || '---',
         limit: template.limit || '',
         scmBranch: template.scm_branch || '',
+        allow_simultaneous: template?.allow_simultaneous || false,
+        webhook_url: `${urlOrigin}${template?.related?.webhook_receiver}` || '',
+        webhook_key: webHookKey,
+        webhook_credential:
+          template?.summary_fields?.webhook_credential?.id || null,
+        webhook_service: webhookService,
         ask_limit_on_launch: template.ask_limit_on_launch || false,
         ask_inventory_on_launch: template.ask_inventory_on_launch || false,
         ask_variables_on_launch: template.ask_variables_on_launch || false,
@@ -96,9 +196,9 @@ function WorkflowJobTemplateForm({
               {({ form }) => (
                 <InventoryLookup
                   value={inventory}
-                  onBlur={() => form.setFieldTouched('inventory')}
-                  tooltip={i18n._(t`Select the inventory containing the hosts
-                  you want this job to manage.`)}
+                  tooltip={i18n._(
+                    t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
+                  )}
                   isValid={!form.touched.inventory || !form.errors.inventory}
                   helperTextInvalid={form.errors.inventory}
                   onChange={value => {
@@ -109,7 +209,6 @@ function WorkflowJobTemplateForm({
                     );
                     setInventory(value);
                   }}
-                  touched={form.touched.inventory}
                   error={form.errors.inventory}
                 />
               )}
@@ -126,18 +225,34 @@ function WorkflowJobTemplateForm({
               />
               <FormField type="text" name="limit" id="wfjt-limit" label="" />
             </FormGroup>
-            <FormField
-              type="text"
+            <FormGroup
+              fieldId="wfjt-scmBranch"
               id="wfjt-scmBranch"
               label={i18n._(t`SCM Branch`)}
               name="scmBranch"
-            />
+            >
+              <FieldTooltip
+                content={i18n._(
+                  t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`
+                )}
+              />
+              <FormField
+                type="text"
+                id="wfjt-scmBranch"
+                label=""
+                name="scmBranch"
+              />
+            </FormGroup>
           </FormRow>
 
           <FormRow>
             <Field name="labels">
-              {({ field, form }) => (
-                <FormGroup label={i18n._(t`Labels`)} fieldId="wfjt-labels">
+              {({ form, field }) => (
+                <FormGroup
+                  label={i18n._(t`Labels`)}
+                  name="wfjt-labels"
+                  fieldId="wfjt-labels"
+                >
                   <FieldTooltip
                     content={i18n._(t`Optional labels that describe this job template,
                     such as 'dev' or 'test'. Labels can be used to group and filter
@@ -157,8 +272,159 @@ function WorkflowJobTemplateForm({
               id="host-variables"
               name="variables"
               label={i18n._(t`Variables`)}
+              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.`
+              )}
             />
           </FormRow>
+          <GridFormGroup
+            className={className}
+            fieldId="options"
+            isInline
+            label={i18n._(t`Options`)}
+            css="margin-top: 20px"
+          >
+            <Checkbox
+              id="wfjt-webhooks"
+              name="has_webhooks"
+              label={
+                <span>
+                  {i18n._(t`Webhooks`)} &nbsp;
+                  <FieldTooltip
+                    content={i18n._(
+                      t`Enable webhook for this workflow job template.`
+                    )}
+                  />
+                </span>
+              }
+              isChecked={hasWebhooks}
+              onChange={checked => {
+                setHasWebhooks(checked);
+              }}
+            />
+            <CheckboxField
+              id="wfjt-allow_simultaneous"
+              name="allow_simultaneous"
+              label={i18n._(t`Enable Concurrent Jobs`)}
+              tooltip={i18n._(
+                t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+              )}
+            />
+          </GridFormGroup>
+          {hasWebhooks && (
+            <>
+              <FormRow>
+                {template.related && (
+                  <FormGroup
+                    className={className}
+                    fieldId="wfjt-webhook-url"
+                    id="wfjt-webhook-url"
+                    name="webhook_url"
+                    label={i18n._(t`Webhook URL`)}
+                  >
+                    <FieldTooltip
+                      content={i18n._(
+                        t`Webhook services can launch jobs with this job template by making a POST request to this URL.`
+                      )}
+                    />
+                    <FormField
+                      type="text"
+                      id="wfjt-webhook-url"
+                      name="webhook_url"
+                      label=""
+                      isReadOnly
+                    />
+                  </FormGroup>
+                )}
+                {template.related && (
+                  <FormGroup
+                    fieldId="wfjt-webhook-key"
+                    type="text"
+                    id="wfjt-webhook-key"
+                    name="webhook_key"
+                    label={i18n._(t`Webhook Key`)}
+                  >
+                    <FieldTooltip
+                      content={i18n._(
+                        t`Webhook services can use this as a shared secret.`
+                      )}
+                    />
+                    <InputGroup>
+                      <TextInput
+                        isReadOnly
+                        aria-label="wfjt-webhook-key"
+                        value={webHookKey}
+                      />
+                      <Button variant="tertiary" onClick={changeWebhookKey}>
+                        <SyncAltIcon />
+                      </Button>
+                    </InputGroup>
+                  </FormGroup>
+                )}
+                <Field name="webhook_service">
+                  {({ form }) => {
+                    const isValid =
+                      !form.errors.webhook_service;
+                    return (
+                      <FormGroup
+                        name="webhook_service"
+                        fieldId="webhook_service"
+                        helperTextInvalid={form.errors.webhook_service}
+                        isValid={isValid}
+                        label={i18n._(t`Webhook Service`)}
+                      >
+                        <FieldTooltip
+                          content={i18n._(t`Select a webhook service`)}
+                        />
+                        <AnsibleSelect
+                          isValid={isValid}
+                          id="webhook_service"
+                          data={webhookServiceOptions}
+                          value={webhookService}
+                          onChange={(event, val) => {
+                            setWebHookService(val);
+                            setWebHookCredential(null);
+                            form.setFieldValue('webhook_credential', null);
+                          }}
+                        />
+                      </FormGroup>
+                    );
+                  }}
+                </Field>
+              </FormRow>
+              {credTypeId && (
+                <FormRow>
+                  <Field name="webhook_credential">
+                    {({ form }) => {
+                      return (
+                        <FormGroup
+                          fieldId="webhook_credential"
+                          id="webhook_credential"
+                          name="webhook_credential"
+                        >
+                          <CredentialLookup
+                            label={i18n._(t`Webhook Credential`)}
+                            tooltip={i18n._(
+                              t`Optionally select the credential to use to send status updates back to the webhook service.`
+                            )}
+                            credentialTypeId={credTypeId || null}
+                            onChange={value => {
+                              setWebHookCredential(value);
+                              form.setFieldValue(
+                                'webhook_credential',
+                                value.id
+                              );
+                            }}
+                            value={webhookCredential}
+                          />
+                        </FormGroup>
+                      );
+                    }}
+                  </Field>
+                </FormRow>
+              )}
+            </>
+          )}
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}

From d4ba32d0c5198c2a885c0665d7efd987fbbc99ed Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 14 Feb 2020 16:01:58 -0500
Subject: [PATCH 03/13] Adds Webhook form fields and tooltip to VariablesField
 component

---
 .../CodeMirrorInput/VariablesField.test.jsx   |  16 ++
 .../WorkflowJobTemplateAdd.jsx                |   5 +-
 .../WorkflowJobTemplateAdd.test.jsx           |  23 +++
 .../WorkflowJobTemplateEdit.jsx               |   6 +-
 .../WorkflowJobTemplateEdit.test.jsx          |  23 +++
 .../shared/WorkflowJobTemplateForm.jsx        | 162 ++++++++++--------
 .../shared/WorkflowJobTemplateForm.test.jsx   | 110 ++++++++++--
 7 files changed, 254 insertions(+), 91 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
index 79dfdbae42..5789183527 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
@@ -69,6 +69,22 @@ describe('VariablesField', () => {
     expect(field.prop('hasErrors')).toEqual(true);
     expect(wrapper.find('.pf-m-error')).toHaveLength(1);
   });
+  it('should render tooltip', () => {
+    const value = '---\n';
+    const wrapper = mount(
+      <Formik initialValues={{ variables: value }}>
+        {() => (
+          <VariablesField
+            id="the-field"
+            name="variables"
+            label="Variables"
+            tooltip="This is a tooltip"
+          />
+        )}
+      </Formik>
+    );
+    expect(wrapper.find('Tooltip').length).toBe(1);
+  });
 
   it('should submit value through Formik', async () => {
     const value = '---\nfoo: bar\n';
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
index 96874360d5..40c874328c 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -22,15 +22,18 @@ function WorkflowJobTemplateAdd() {
       setFormSubmitError(err);
     }
   };
+
   const submitLabels = (templateId, labels = [], organizationId) => {
     const associatePromises = labels.map(label =>
       WorkflowJobTemplatesAPI.associateLabel(templateId, label, organizationId)
     );
     return Promise.all([...associatePromises]);
   };
+
   const handleCancel = () => {
     history.push(`/templates`);
   };
+
   return (
     <PageSection>
       <Card>
@@ -38,9 +41,9 @@ function WorkflowJobTemplateAdd() {
           <WorkflowJobTemplateForm
             handleCancel={handleCancel}
             handleSubmit={handleSubmit}
+            submitError={formSubmitError}
           />
         </CardBody>
-        {formSubmitError ? <div>formSubmitError</div> : ''}
       </Card>
     </PageSection>
   );
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
index 584a27cb7b..1424c689e0 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -61,4 +61,27 @@ describe('<WorkflowJobTemplateAdd/>', () => {
     });
     expect(history.location.pathname).toBe('/templates');
   });
+  test('throwing error renders FormSubmitError component', async () => {
+    const error = new Error('oops');
+    WorkflowJobTemplatesAPI.create.mockImplementation(() =>
+      Promise.reject(error)
+    );
+    await act(async () => {
+      await wrapper.find('WorkflowJobTemplateForm').prop('handleSubmit')({
+        id: 6,
+        name: 'Alex',
+        description: 'Apollo and Athena',
+        inventory: { id: 1, name: 'Inventory 1' },
+        organization: 2,
+        scm_branch: 'master',
+        limit: '5000',
+        variables: '---',
+      });
+    });
+    wrapper.update();
+    expect(WorkflowJobTemplatesAPI.create).toBeCalled();
+    expect(wrapper.find('WorkflowJobTemplateForm').prop('submitError')).toEqual(
+      error
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index b8c93d96ba..6594b55def 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -25,6 +25,7 @@ function WorkflowJobTemplateEdit({
       setFormSubmitError(err);
     }
   };
+
   const submitLabels = async (labels = [], orgId) => {
     const { added, removed } = getAddedAndRemoved(
       template.summary_fields.labels.results,
@@ -40,9 +41,11 @@ function WorkflowJobTemplateEdit({
         setFormSubmitError(err);
       }
     }
+
     const disassociationPromises = removed.map(label =>
       WorkflowJobTemplatesAPI.disassociateLabel(template.id, label)
     );
+
     const associationPromises = added.map(label => {
       return WorkflowJobTemplatesAPI.associateLabel(
         template.id,
@@ -61,6 +64,7 @@ function WorkflowJobTemplateEdit({
   const handleCancel = () => {
     history.push(`/templates`);
   };
+
   if (hasTemplateLoading) {
     return <ContentLoading />;
   }
@@ -72,9 +76,9 @@ function WorkflowJobTemplateEdit({
           handleCancel={handleCancel}
           template={template}
           webhook_key={webhook_key}
+          submitError={formSubmitError}
         />
       </CardBody>
-      {formSubmitError ? <div>formSubmitError</div> : ''}
     </>
   );
 }
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index c5bfbe7e6e..e73b29ae4e 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -94,4 +94,27 @@ describe('<WorkflowJobTemplateEdit/>', () => {
     });
     expect(history.location.pathname).toBe('/templates');
   });
+  test('throwing error renders FormSubmitError component', async () => {
+    const error = new Error('oops');
+    WorkflowJobTemplatesAPI.update.mockImplementation(() =>
+      Promise.reject(error)
+    );
+    await act(async () => {
+      wrapper.find('WorkflowJobTemplateForm').prop('handleSubmit')({
+        id: 6,
+        name: 'Alex',
+        description: 'Apollo and Athena',
+        inventory: { id: 1, name: 'Inventory 1' },
+        organization: 2,
+        scm_branch: 'master',
+        limit: '5000',
+        variables: '---',
+      });
+    });
+    wrapper.update();
+    expect(WorkflowJobTemplatesAPI.update).toHaveBeenCalled();
+    expect(wrapper.find('WorkflowJobTemplateForm').prop('submitError')).toEqual(
+      error
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 00ee0beb32..68aa66983f 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { t } from '@lingui/macro';
+import { func, shape } from 'prop-types';
+
 import { withI18n } from '@lingui/react';
 import { Formik, Field } from 'formik';
 import {
@@ -11,14 +13,17 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { required } from '@util/validators';
-import PropTypes from 'prop-types';
 import { SyncAltIcon } from '@patternfly/react-icons';
 import { useParams } from 'react-router-dom';
 
 import AnsibleSelect from '@components/AnsibleSelect';
 import { WorkflowJobTemplatesAPI, CredentialTypesAPI } from '@api';
 import FormRow from '@components/FormRow';
-import FormField, { FieldTooltip, CheckboxField } from '@components/FormField';
+
+import FormField, {
+  FieldTooltip,
+  FormSubmitError,
+} from '@components/FormField';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import CredentialLookup from '@components/Lookup/CredentialLookup';
 import { InventoryLookup } from '@components/Lookup';
@@ -44,11 +49,11 @@ function WorkflowJobTemplateForm({
   handleCancel,
   i18n,
   template = {},
-  className,
   webhook_key,
+  submitError,
 }) {
-  const urlOrigin = window.location.origin;
   const { id } = useParams();
+  const urlOrigin = window.location.origin;
   const [contentError, setContentError] = useState(null);
   const [inventory, setInventory] = useState(
     template?.summary_fields?.inventory || null
@@ -139,9 +144,10 @@ function WorkflowJobTemplateForm({
         variables: template.variables || '---',
         limit: template.limit || '',
         scmBranch: template.scm_branch || '',
-        allow_simultaneous: template?.allow_simultaneous || false,
-        webhook_url: `${urlOrigin}${template?.related?.webhook_receiver}` || '',
-        webhook_key: webHookKey,
+        allow_simultaneous: template.allow_simultaneous || false,
+        webhook_url:
+          template?.related?.webhook_receiver &&
+          `${urlOrigin}${template?.related?.webhook_receiver}`,
         webhook_credential:
           template?.summary_fields?.webhook_credential?.id || null,
         webhook_service: webhookService,
@@ -269,16 +275,12 @@ function WorkflowJobTemplateForm({
           </FormRow>
           <FormRow>
             <VariablesField
-              id="host-variables"
+              id="wfjt-variables"
               name="variables"
               label={i18n._(t`Variables`)}
-              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.`
-              )}
             />
           </FormRow>
           <GridFormGroup
-            className={className}
             fieldId="options"
             isInline
             label={i18n._(t`Options`)}
@@ -302,21 +304,34 @@ function WorkflowJobTemplateForm({
                 setHasWebhooks(checked);
               }}
             />
-            <CheckboxField
-              id="wfjt-allow_simultaneous"
-              name="allow_simultaneous"
-              label={i18n._(t`Enable Concurrent Jobs`)}
-              tooltip={i18n._(
-                t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+            <Field name="allow_simultaneous">
+              {({ field, form }) => (
+                <Checkbox
+                  name="allow_simultaneous"
+                  id="wfjt-allow_simultaneous"
+                  label={
+                    <span>
+                      {i18n._(t`Enable Concurrent Jobs`)} &nbsp;
+                      <FieldTooltip
+                        content={i18n._(
+                          t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+                        )}
+                      />
+                    </span>
+                  }
+                  isChecked={field.value}
+                  onChange={value => {
+                    form.setFieldValue('allow_simultaneous', value);
+                  }}
+                />
               )}
-            />
+            </Field>
           </GridFormGroup>
           {hasWebhooks && (
             <>
               <FormRow>
                 {template.related && (
                   <FormGroup
-                    className={className}
                     fieldId="wfjt-webhook-url"
                     id="wfjt-webhook-url"
                     name="webhook_url"
@@ -362,69 +377,60 @@ function WorkflowJobTemplateForm({
                   </FormGroup>
                 )}
                 <Field name="webhook_service">
-                  {({ form }) => {
-                    const isValid =
-                      !form.errors.webhook_service;
-                    return (
-                      <FormGroup
-                        name="webhook_service"
-                        fieldId="webhook_service"
-                        helperTextInvalid={form.errors.webhook_service}
-                        isValid={isValid}
-                        label={i18n._(t`Webhook Service`)}
-                      >
-                        <FieldTooltip
-                          content={i18n._(t`Select a webhook service`)}
-                        />
-                        <AnsibleSelect
-                          isValid={isValid}
-                          id="webhook_service"
-                          data={webhookServiceOptions}
-                          value={webhookService}
-                          onChange={(event, val) => {
-                            setWebHookService(val);
-                            setWebHookCredential(null);
-                            form.setFieldValue('webhook_credential', null);
-                          }}
-                        />
-                      </FormGroup>
-                    );
-                  }}
+                  {({ form }) => (
+                    <FormGroup
+                      name="webhook_service"
+                      fieldId="webhook_service"
+                      helperTextInvalid={form.errors.webhook_service}
+                      label={i18n._(t`Webhook Service`)}
+                    >
+                      <FieldTooltip
+                        content={i18n._(t`Select a webhook service`)}
+                      />
+                      <AnsibleSelect
+                        id="webhook_service"
+                        data={webhookServiceOptions}
+                        value={webhookService}
+                        onChange={(event, val) => {
+                          setWebHookService(val);
+                          setWebHookCredential(null);
+                          form.setFieldValue('webhook_service', val);
+                          form.setFieldValue('webhook_credential', null);
+                        }}
+                      />
+                    </FormGroup>
+                  )}
                 </Field>
               </FormRow>
               {credTypeId && (
                 <FormRow>
                   <Field name="webhook_credential">
-                    {({ form }) => {
-                      return (
-                        <FormGroup
-                          fieldId="webhook_credential"
-                          id="webhook_credential"
-                          name="webhook_credential"
-                        >
-                          <CredentialLookup
-                            label={i18n._(t`Webhook Credential`)}
-                            tooltip={i18n._(
-                              t`Optionally select the credential to use to send status updates back to the webhook service.`
-                            )}
-                            credentialTypeId={credTypeId || null}
-                            onChange={value => {
-                              setWebHookCredential(value);
-                              form.setFieldValue(
-                                'webhook_credential',
-                                value.id
-                              );
-                            }}
-                            value={webhookCredential}
-                          />
-                        </FormGroup>
-                      );
-                    }}
+                    {({ form }) => (
+                      <FormGroup
+                        fieldId="webhook_credential"
+                        id="webhook_credential"
+                        name="webhook_credential"
+                      >
+                        <CredentialLookup
+                          label={i18n._(t`Webhook Credential`)}
+                          tooltip={i18n._(
+                            t`Optionally select the credential to use to send status updates back to the webhook service.`
+                          )}
+                          credentialTypeId={credTypeId || null}
+                          onChange={value => {
+                            setWebHookCredential(value);
+                            form.setFieldValue('webhook_credential', value.id);
+                          }}
+                          value={webhookCredential}
+                        />
+                      </FormGroup>
+                    )}
                   </Field>
                 </FormRow>
               )}
             </>
           )}
+          <FormSubmitError error={submitError} />
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
@@ -436,7 +442,13 @@ function WorkflowJobTemplateForm({
 }
 
 WorkflowJobTemplateForm.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  handleCancel: PropTypes.func.isRequired,
+  handleSubmit: func.isRequired,
+  handleCancel: func.isRequired,
+  submitError: shape({}),
 };
+
+WorkflowJobTemplateForm.defaultProps = {
+  submitError: null,
+};
+
 export default withI18n()(WorkflowJobTemplateForm);
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
index 9c05c53dff..f4edf0c405 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -1,10 +1,20 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { Route } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { sleep } from '@testUtils/testUtils';
+
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
+import { WorkflowJobTemplatesAPI } from '../../../api';
 
+jest.mock('@api/models/WorkflowJobTemplates');
+WorkflowJobTemplatesAPI.updateWebhookKey.mockResolvedValue({
+  data: { webhook_key: 'sdafdghjkl2345678ionbvcxz' },
+});
 describe('<WorkflowJobTemplateForm/>', () => {
   let wrapper;
+  let history;
   const handleSubmit = jest.fn();
   const handleCancel = jest.fn();
   const mockTemplate = {
@@ -21,15 +31,38 @@ describe('<WorkflowJobTemplateForm/>', () => {
     scm_branch: 'devel',
     limit: '5000',
     variables: '---',
+    related: {
+      webhook_receiver: '/api/v2/workflow_job_templates/57/gitlab/',
+    },
   };
   beforeEach(() => {
+    history = createMemoryHistory({
+      initialEntries: ['/templates/workflow_job_template/6/edit'],
+    });
     act(() => {
       wrapper = mountWithContexts(
-        <WorkflowJobTemplateForm
-          template={mockTemplate}
-          handleCancel={handleCancel}
-          handleSubmit={handleSubmit}
-        />
+        <Route
+          path="/templates/workflow_job_template/:id/edit"
+          component={() => (
+            <WorkflowJobTemplateForm
+              template={mockTemplate}
+              handleCancel={handleCancel}
+              handleSubmit={handleSubmit}
+              webhook_key="sdfghjklmnbvcdsew435678iokjhgfd"
+            />
+          )}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 6 } },
+              },
+            },
+          },
+        }
       );
     });
   });
@@ -63,7 +96,10 @@ describe('<WorkflowJobTemplateForm/>', () => {
   });
   test('changing inputs should update values', async () => {
     const inputsToChange = [
-      { element: 'wfjt-name', value: { value: 'new foo', name: 'name' } },
+      {
+        element: 'wfjt-name',
+        value: { value: 'new foo', name: 'name' },
+      },
       {
         element: 'wfjt-description',
         value: { value: 'new bar', name: 'description' },
@@ -76,12 +112,13 @@ describe('<WorkflowJobTemplateForm/>', () => {
     ];
     const changeInputs = async ({ element, value }) => {
       wrapper.find(`input#${element}`).simulate('change', {
-        target: value,
+        target: { value: `${value.value}`, name: `${value.name}` },
       });
     };
 
     await act(async () => {
       inputsToChange.map(input => changeInputs(input));
+
       wrapper.find('LabelSelect').invoke('onChange')([
         { name: 'new label', id: 5 },
         { name: 'Label 1', id: 1 },
@@ -97,13 +134,17 @@ describe('<WorkflowJobTemplateForm/>', () => {
       });
     });
     wrapper.update();
+
+    expect(wrapper.find('input#wfjt-name').prop('value')).toEqual('new foo');
+
     const assertChanges = ({ element, value }) => {
       expect(wrapper.find(`input#${element}`).prop('value')).toEqual(
-        typeof value.value === 'string' ? `${value.value}` : value.value
+        `${value.value}`
       );
     };
 
     inputsToChange.map(input => assertChanges(input));
+    expect(wrapper.find('input#wfjt-name').prop('value')).toEqual('new foo');
     expect(wrapper.find('InventoryLookup').prop('value')).toEqual({
       id: 3,
       name: 'inventory',
@@ -118,16 +159,57 @@ describe('<WorkflowJobTemplateForm/>', () => {
       { name: 'Label 2', id: 2 },
     ]);
   });
-  test('handleSubmit is called on submit button click', async () => {
-    await act(async () => {
-      await wrapper.find('button[aria-label="Save"]').simulate('click');
-    });
 
+  test('webhooks and enable concurrent jobs functions properly', async () => {
     act(() => {
-      expect(handleSubmit).toBeCalled();
+      wrapper.find('Checkbox[name="has_webhooks"]').invoke('onChange')(true);
+      wrapper.find('Checkbox[name="allow_simultaneous"]').invoke('onChange')(
+        true
+      );
     });
+    wrapper.update();
+    expect(
+      wrapper.find('input[aria-label="wfjt-webhook-key"]').prop('readOnly')
+    ).toBe(true);
+    expect(
+      wrapper.find('input[aria-label="wfjt-webhook-key"]').prop('value')
+    ).toBe('sdfghjklmnbvcdsew435678iokjhgfd');
+    await act(() =>
+      wrapper
+        .find('FormGroup[name="webhook_key"]')
+        .find('Button[variant="tertiary"]')
+        .prop('onClick')()
+    );
+
+    expect(WorkflowJobTemplatesAPI.updateWebhookKey).toBeCalledWith('6');
+    expect(
+      wrapper.find('TextInputBase[name="webhook_url"]').prop('value')
+    ).toBe('http://127.0.0.1:3001/api/v2/workflow_job_templates/57/gitlab/');
+
+    wrapper.update();
+
+    expect(
+      wrapper.find('Checkbox[name="has_webhooks"]').prop('isChecked')
+    ).toBe(true);
+    expect(
+      wrapper.find('Checkbox[name="allow_simultaneous"]').prop('isChecked')
+    ).toBe(true);
+    expect(wrapper.find('Field[name="webhook_service"]').length).toBe(1);
+
+    act(() => wrapper.find('AnsibleSelect').prop('onChange')({}, 'gitlab'));
+    wrapper.update();
+
+    expect(wrapper.find('AnsibleSelect').prop('value')).toBe('gitlab');
   });
-  test('handleCancel is called on cancel button click', () => {
+  test('handleSubmit is called on submit button click', async () => {
+    act(() => {
+      wrapper.find('Formik').prop('onSubmit')();
+    });
+    wrapper.update();
+    sleep(0);
+    expect(handleSubmit).toBeCalled();
+  });
+  test('handleCancel is called on cancel button click', async () => {
     act(() => {
       wrapper.find('button[aria-label="Cancel"]').simulate('click');
     });

From 3ee6f1f3c79b71262cd0a1b5c7d831c5ca95c3d3 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 19 Feb 2020 09:07:51 -0500
Subject: [PATCH 04/13] Alpha order

---
 awx/ui_next/src/api/models/WorkflowJobTemplates.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index 20158334ad..650b8d17a5 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -52,10 +52,6 @@ class WorkflowJobTemplates extends Base {
     });
   }
 
-  readWebhookKey(id) {
-    return this.http.get(`${this.baseUrl}${id}/webhook_key/`);
-  }
-
 }
 
 export default WorkflowJobTemplates;

From b757fdebf850664dd4c20fe4b22597b87a70022a Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 19 Feb 2020 09:47:06 -0500
Subject: [PATCH 05/13] Fixes contentLoading issue in PR and enables Launch on
 JT List

---
 .../src/api/models/WorkflowJobTemplates.js    |  1 -
 .../screens/Template/WorkflowJobTemplate.jsx  | 19 ++++++++++++-------
 .../WorkflowJobTemplateDetail.jsx             |  4 ++--
 .../WorkflowJobTemplateDetail.test.jsx        |  2 +-
 .../WorkflowJobTemplateEdit.jsx               | 10 +---------
 5 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index 650b8d17a5..eec62cedfc 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -51,7 +51,6 @@ class WorkflowJobTemplates extends Base {
       params
     });
   }
-
 }
 
 export default WorkflowJobTemplates;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index ab051f677f..1586551455 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -11,6 +11,7 @@ import FullPage from '@components/FullPage';
 import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
 import ScheduleList from '@components/ScheduleList';
+import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
 import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
@@ -51,12 +52,14 @@ class WorkflowJobTemplate extends Component {
         const {
           data: { webhook_key },
         } = await WorkflowJobTemplatesAPI.readWebhookKey(id);
-        this.setState({ webHookKey: webhook_key });
+        this.setState({ webhook_key });
       }
       if (data?.summary_fields?.webhook_credential) {
         const {
           data: {
-            summary_fields: { credential_type: name },
+            summary_fields: {
+              credential_type: { name },
+            },
           },
         } = await CredentialsAPI.readDetail(
           data.summary_fields.webhook_credential.id
@@ -84,7 +87,7 @@ class WorkflowJobTemplate extends Component {
       contentError,
       hasContentLoading,
       template,
-      webHookKey,
+      webhook_key,
     } = this.state;
 
     const tabsArray = [
@@ -116,7 +119,9 @@ class WorkflowJobTemplate extends Component {
     if (location.pathname.endsWith('edit')) {
       cardHeader = null;
     }
-
+    if (hasContentLoading) {
+      return <ContentLoading />;
+    }
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
@@ -151,7 +156,7 @@ class WorkflowJobTemplate extends Component {
                 render={() => (
                   <WorkflowJobTemplateDetail
                     template={template}
-                    webHookKey={webHookKey}
+                    webhook_key={webhook_key}
                   />
                 )}
               />
@@ -163,7 +168,7 @@ class WorkflowJobTemplate extends Component {
                 render={() => (
                   <WorkflowJobTemplateEdit
                     template={template}
-                    webHookKey={webHookKey}
+                    webhook_key={webhook_key}
                   />
                 )}
               />
@@ -200,7 +205,7 @@ class WorkflowJobTemplate extends Component {
                 />
               </Route>
             )}
-            {template && (
+            {template.id && (
               <Route
                 path="/templates/:templateType/:id/schedules"
                 render={() => (
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index f97ed439fe..fcfea46b82 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -25,7 +25,7 @@ import LaunchButton from '@components/LaunchButton';
 import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 
-function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
+function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
   const {
     id,
     ask_inventory_on_launch,
@@ -143,7 +143,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
             value={`${urlOrigin}${template.related.webhook_receiver}`}
           />
         )}
-        <Detail label={i18n._(t`Webhook Key`)} value={webHookKey} />
+        <Detail label={i18n._(t`Webhook Key`)} value={webhook_key} />
         {webhook_credential && (
           <Detail
             fullWidth
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
index 7d137deb3d..d979a2713a 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
@@ -51,7 +51,7 @@ describe('<WorkflowJobTemplateDetail/>', () => {
           component={() => (
             <WorkflowJobTemplateDetail
               template={template}
-              webHookKey="Foo webhook key"
+              webhook_key="Foo webhook key"
               hasContentLoading={false}
               onSetContentLoading={() => {}}
             />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index 6594b55def..2a83c18033 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -4,14 +4,9 @@ import { useHistory } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 import { getAddedAndRemoved } from '@util/lists';
 import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
-import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplateForm } from '../shared';
 
-function WorkflowJobTemplateEdit({
-  template,
-  hasTemplateLoading,
-  webhook_key,
-}) {
+function WorkflowJobTemplateEdit({ template, webhook_key }) {
   const [formSubmitError, setFormSubmitError] = useState();
   const history = useHistory();
 
@@ -65,9 +60,6 @@ function WorkflowJobTemplateEdit({
     history.push(`/templates`);
   };
 
-  if (hasTemplateLoading) {
-    return <ContentLoading />;
-  }
   return (
     <>
       <CardBody>

From 4ccca08cda1f5997e780d65dd47b514e52e1a4ba Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Thu, 20 Feb 2020 13:56:56 -0500
Subject: [PATCH 06/13] Adds page section to fix render issue

---
 awx/ui_next/src/screens/Template/Template.jsx | 106 +++++++++---------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 84839c1a3f..6fe466482a 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -164,57 +164,63 @@ class Template extends Component {
     }
 
     return (
-      <Card>
-        {cardHeader}
-        <Switch>
-          <Redirect
-            from="/templates/:templateType/:id"
-            to="/templates/:templateType/:id/details"
-            exact
-          />
-          {template && (
-            <Route
-              key="details"
-              path="/templates/:templateType/:id/details"
-              render={() => (
-                <JobTemplateDetail
-                  hasTemplateLoading={hasContentLoading}
-                  template={template}
-                />
-              )}
+      <PageSection>
+        <Card>
+          {cardHeader}
+          <Switch>
+            <Redirect
+              from="/templates/:templateType/:id"
+              to="/templates/:templateType/:id/details"
+              exact
             />
-          )}
-          {template && (
-            <Route
-              key="edit"
-              path="/templates/:templateType/:id/edit"
-              render={() => <JobTemplateEdit template={template} />}
-            />
-          )}
-          {template && (
-            <Route
-              key="access"
-              path="/templates/:templateType/:id/access"
-              render={() => (
-                <ResourceAccessList
-                  resource={template}
-                  apiModel={JobTemplatesAPI}
-                />
-              )}
-            />
-          )}
-          {canSeeNotificationsTab && (
-            <Route
-              path="/templates/:templateType/:id/notifications"
-              render={() => (
-                <NotificationList
-                  id={Number(match.params.id)}
-                  canToggleNotifications={isNotifAdmin}
-                  apiModel={JobTemplatesAPI}
-                />
-              )}
-            />
-          )}
+            {template && (
+              <Route
+                key="details"
+                path="/templates/:templateType/:id/details"
+                render={() => (
+                  <JobTemplateDetail
+                    hasTemplateLoading={hasContentLoading}
+                    template={template}
+                  />
+                )}
+              />
+            )}
+            {template && (
+              <Route
+                key="edit"
+                path="/templates/:templateType/:id/edit"
+                render={() => <JobTemplateEdit template={template} />}
+              />
+            )}
+            {template && (
+              <Route
+                key="access"
+                path="/templates/:templateType/:id/access"
+                render={() => (
+                  <ResourceAccessList
+                    resource={template}
+                    apiModel={JobTemplatesAPI}
+                  />
+                )}
+              />
+            )}
+            {canSeeNotificationsTab && (
+              <Route
+                path="/templates/:templateType/:id/notifications"
+                render={() => (
+                  <NotificationList
+                    id={Number(match.params.id)}
+                    canToggleNotifications={isNotifAdmin}
+                    apiModel={JobTemplatesAPI}
+                  />
+                )}
+              />
+            )}
+            {template?.id && (
+              <Route path="/templates/:templateType/:id/completed_jobs">
+                <JobList defaultParams={{ job__job_template: template.id }} />
+              </Route>
+            )}
           {template?.id && (
             <Route path="/templates/:templateType/:id/completed_jobs">
               <JobList defaultParams={{ job__job_template: template.id }} />

From e90ee5113d3f4ac2ffccb3cfa743532f231a8e33 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Sat, 22 Feb 2020 17:20:23 -0500
Subject: [PATCH 07/13] Adds subform restore functionality and addresses PR
 issues

---
 .../src/api/mixins/InstanceGroups.mixin.js    |   7 +-
 .../screens/Template/WorkflowJobTemplate.jsx  |   4 +-
 .../shared/WorkflowJobTemplateForm.jsx        | 303 ++++++++++--------
 .../shared/WorkflowJobTemplateForm.test.jsx   |  44 ++-
 4 files changed, 184 insertions(+), 174 deletions(-)

diff --git a/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js b/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
index e3b2be1cb5..e6745ac522 100644
--- a/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
+++ b/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
@@ -1,10 +1,9 @@
 const InstanceGroupsMixin = parent =>
   class extends parent {
     readInstanceGroups(resourceId, params) {
-      return this.http.get(
-        `${this.baseUrl}${resourceId}/instance_groups/`,
-        params
-      );
+      return this.http.get(`${this.baseUrl}${resourceId}/instance_groups/`, {
+        params,
+      });
     }
 
     associateInstanceGroup(resourceId, instanceGroupId) {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 1586551455..35e0336d36 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -25,6 +25,7 @@ class WorkflowJobTemplate extends Component {
       contentError: null,
       hasContentLoading: true,
       template: null,
+      webhook_key: null,
     };
     this.loadTemplate = this.loadTemplate.bind(this);
     this.loadSchedules = this.loadSchedules.bind(this);
@@ -66,7 +67,6 @@ class WorkflowJobTemplate extends Component {
         );
         data.summary_fields.webhook_credential.kind = name;
       }
-      setBreadcrumb(data);
       this.setState({ template: data });
       setBreadcrumb(data);
     } catch (err) {
@@ -141,7 +141,7 @@ class WorkflowJobTemplate extends Component {
 
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           {cardHeader}
           <Switch>
             <Redirect
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 68aa66983f..afa68ea97a 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { t } from '@lingui/macro';
+import { useRouteMatch, useParams } from 'react-router-dom';
+
 import { func, shape } from 'prop-types';
 
 import { withI18n } from '@lingui/react';
@@ -7,42 +9,34 @@ import { Formik, Field } from 'formik';
 import {
   Form,
   FormGroup,
-  Checkbox,
   InputGroup,
   Button,
   TextInput,
+  Checkbox,
 } from '@patternfly/react-core';
 import { required } from '@util/validators';
 import { SyncAltIcon } from '@patternfly/react-icons';
-import { useParams } from 'react-router-dom';
 
 import AnsibleSelect from '@components/AnsibleSelect';
 import { WorkflowJobTemplatesAPI, CredentialTypesAPI } from '@api';
-import FormRow from '@components/FormRow';
 
 import FormField, {
   FieldTooltip,
   FormSubmitError,
 } from '@components/FormField';
+import {
+  FormColumnLayout,
+  FormFullWidthLayout,
+  FormCheckboxLayout,
+} from '@components/FormLayout';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import CredentialLookup from '@components/Lookup/CredentialLookup';
 import { InventoryLookup } from '@components/Lookup';
 import { VariablesField } from '@components/CodeMirrorInput';
 import FormActionGroup from '@components/FormActionGroup';
 import ContentError from '@components/ContentError';
-import styled from 'styled-components';
 import LabelSelect from './LabelSelect';
-
-const GridFormGroup = styled(FormGroup)`
-  & > label {
-    grid-column: 1 / -1;
-  }
-
-  && {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  }
-`;
+import CheckboxField from '../../../components/FormField/CheckboxField';
 
 function WorkflowJobTemplateForm({
   handleSubmit,
@@ -53,25 +47,17 @@ function WorkflowJobTemplateForm({
   submitError,
 }) {
   const { id } = useParams();
+  const wfjtAddMatch = useRouteMatch('/templates/workflow_job_template/add');
+
   const urlOrigin = window.location.origin;
+
   const [contentError, setContentError] = useState(null);
-  const [inventory, setInventory] = useState(
-    template?.summary_fields?.inventory || null
-  );
-  const [organization, setOrganization] = useState(
-    template?.summary_fields?.organization || null
-  );
-  const [webHookKey, setWebHookKey] = useState(webhook_key);
+  const [webhookKey, setWebHookKey] = useState(webhook_key);
   const [credTypeId, setCredentialTypeId] = useState();
   const [webhookService, setWebHookService] = useState(
     template.webhook_service || ''
   );
-  const [hasWebhooks, setHasWebhooks] = useState(
-    webhookService !== '' || false
-  );
-  const [webhookCredential, setWebHookCredential] = useState(
-    template?.summary_fields?.webhook_credential || null
-  );
+  const [hasWebhooks, setHasWebhooks] = useState(Boolean(webhookService));
 
   const webhookServiceOptions = [
     {
@@ -83,14 +69,12 @@ function WorkflowJobTemplateForm({
     {
       value: 'github',
       key: 'github',
-      namespace: 'git_hub',
       label: i18n._(t`GitHub`),
       isDisabled: false,
     },
     {
       value: 'gitlab',
       key: 'gitlab',
-      namespace: 'git_lab',
       label: i18n._(t`Git Lab`),
       isDisabled: false,
     },
@@ -105,9 +89,7 @@ function WorkflowJobTemplateForm({
         const {
           data: { results },
         } = await CredentialTypesAPI.read({
-          namespace: webhookService.includes('hub')
-            ? 'github_token'
-            : 'gitlab_token',
+          namespace: `${webhookService}_token`,
         });
         setCredentialTypeId(results[0].id);
       } catch (err) {
@@ -128,20 +110,67 @@ function WorkflowJobTemplateForm({
     }
   };
 
+  let initialWebhookKey = webhook_key;
+
+  const setWebhookValues = (form, webhookServiceValue) => {
+    if (
+      webhookServiceValue === form.initialValues.webhook_service ||
+      webhookServiceValue === ''
+    ) {
+      form.setFieldValue(
+        'webhook_credential',
+        form.initialValues.webhook_credential
+      );
+      form.setFieldValue('webhook_url', form.initialValues.webhook_url);
+      form.setFieldValue('webhook_service', form.initialValues.webhook_service);
+
+      setWebHookKey(initialWebhookKey);
+    } else {
+      form.setFieldValue('webhook_credential', null);
+      form.setFieldValue(
+        'webhook_url',
+        `${urlOrigin}/api/v2/workflow_job_templates/${template.id}/${webhookServiceValue}/`
+      );
+
+      setWebHookKey('A NEW WEBHOOK KEY WILL BE GENERATED ON SAVE');
+    }
+  };
+
+  const handleWebhookEnablement = (
+    form,
+    enabledWebhooks,
+    webhookServiceValue
+  ) => {
+    if (!enabledWebhooks) {
+      initialWebhookKey = webhookKey;
+      form.setFieldValue('webhook_credential', null);
+      form.setFieldValue('webhook_service', '');
+      form.setFieldValue('webhook_url', '');
+      setWebHookService('');
+      setWebHookKey('');
+    } else {
+      setWebhookValues(form, webhookServiceValue);
+    }
+  };
+
   if (contentError) {
     return <ContentError error={contentError} />;
   }
-
   return (
     <Formik
-      onSubmit={handleSubmit}
+      onSubmit={values => {
+        values.webhook_credential = values?.webhook_credential?.id;
+        values.organization = values?.organization?.id;
+        values.inventory = values?.inventory?.id;
+        return handleSubmit(values);
+      }}
       initialValues={{
         name: template.name || '',
         description: template.description || '',
-        inventory: template.summary_fields?.inventory?.id || '',
-        organization: template.summary_fields?.organization?.id || '',
+        inventory: template?.summary_fields?.inventory || null,
+        organization: template?.summary_fields?.organization || null,
         labels: template.summary_fields?.labels?.results || [],
-        variables: template.variables || '---',
+        extra_vars: template.variables || '---',
         limit: template.limit || '',
         scmBranch: template.scm_branch || '',
         allow_simultaneous: template.allow_simultaneous || false,
@@ -149,8 +178,8 @@ function WorkflowJobTemplateForm({
           template?.related?.webhook_receiver &&
           `${urlOrigin}${template?.related?.webhook_receiver}`,
         webhook_credential:
-          template?.summary_fields?.webhook_credential?.id || null,
-        webhook_service: webhookService,
+          template?.summary_fields?.webhook_credential || null,
+        webhook_service: template.webhook_service || '',
         ask_limit_on_launch: template.ask_limit_on_launch || false,
         ask_inventory_on_launch: template.ask_inventory_on_launch || false,
         ask_variables_on_launch: template.ask_variables_on_launch || false,
@@ -159,7 +188,7 @@ function WorkflowJobTemplateForm({
     >
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-          <FormRow>
+          <FormColumnLayout>
             <FormField
               id="wfjt-name"
               name="name"
@@ -179,7 +208,7 @@ function WorkflowJobTemplateForm({
               label={i18n._(t`Organization`)}
               name="organization"
             >
-              {({ form }) => (
+              {({ form, field }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -187,33 +216,26 @@ function WorkflowJobTemplateForm({
                   }
                   onBlur={() => form.setFieldTouched('organization')}
                   onChange={value => {
-                    form.setFieldValue('organization', value?.id || null);
-                    setOrganization(value);
+                    form.setFieldValue('organization', value);
                   }}
-                  value={organization}
+                  value={field.value}
                   touched={form.touched.organization}
                   error={form.errors.organization}
                 />
               )}
             </Field>
-          </FormRow>
-          <FormRow>
             <Field name="inventory">
-              {({ form }) => (
+              {({ form, field }) => (
                 <InventoryLookup
-                  value={inventory}
+                  value={field.value}
                   tooltip={i18n._(
                     t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
                   )}
                   isValid={!form.touched.inventory || !form.errors.inventory}
                   helperTextInvalid={form.errors.inventory}
                   onChange={value => {
-                    form.setFieldValue('inventory', value?.id || null);
-                    form.setFieldValue(
-                      'organizationId',
-                      value?.organization || null
-                    );
-                    setInventory(value);
+                    form.setFieldValue('inventory', value);
+                    form.setFieldValue('organizationId', value.organization);
                   }}
                   error={form.errors.inventory}
                 />
@@ -249,9 +271,8 @@ function WorkflowJobTemplateForm({
                 name="scmBranch"
               />
             </FormGroup>
-          </FormRow>
-
-          <FormRow>
+          </FormColumnLayout>
+          <FormFullWidthLayout>
             <Field name="labels">
               {({ form, field }) => (
                 <FormGroup
@@ -272,65 +293,92 @@ function WorkflowJobTemplateForm({
                 </FormGroup>
               )}
             </Field>
-          </FormRow>
-          <FormRow>
+          </FormFullWidthLayout>
+          <FormFullWidthLayout>
             <VariablesField
               id="wfjt-variables"
-              name="variables"
+              name="extra_vars"
               label={i18n._(t`Variables`)}
+              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.`
+              )}
             />
-          </FormRow>
-          <GridFormGroup
+          </FormFullWidthLayout>
+          <FormCheckboxLayout
             fieldId="options"
             isInline
             label={i18n._(t`Options`)}
             css="margin-top: 20px"
           >
-            <Checkbox
+            <Field
               id="wfjt-webhooks"
-              name="has_webhooks"
-              label={
-                <span>
-                  {i18n._(t`Webhooks`)} &nbsp;
-                  <FieldTooltip
-                    content={i18n._(
-                      t`Enable webhook for this workflow job template.`
-                    )}
-                  />
-                </span>
-              }
-              isChecked={hasWebhooks}
-              onChange={checked => {
-                setHasWebhooks(checked);
-              }}
-            />
-            <Field name="allow_simultaneous">
-              {({ field, form }) => (
+              name="hasWebhooks"
+              label={i18n._(t`Webhooks`)}
+            >
+              {({ form }) => (
                 <Checkbox
-                  name="allow_simultaneous"
-                  id="wfjt-allow_simultaneous"
+                  aria-label={i18n._(t`Webhooks`)}
                   label={
                     <span>
-                      {i18n._(t`Enable Concurrent Jobs`)} &nbsp;
+                      {i18n._(t`Webhooks`)}
+                      &nbsp;
                       <FieldTooltip
                         content={i18n._(
-                          t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+                          t`Enable webhook for this workflow job template.`
                         )}
                       />
                     </span>
                   }
-                  isChecked={field.value}
-                  onChange={value => {
-                    form.setFieldValue('allow_simultaneous', value);
+                  id="wfjt-enabled-webhooks"
+                  isChecked={
+                    Boolean(form.values.webhook_service) || hasWebhooks
+                  }
+                  onChange={checked => {
+                    setHasWebhooks(checked);
+                    handleWebhookEnablement(form, checked, webhookService);
                   }}
                 />
               )}
             </Field>
-          </GridFormGroup>
+
+            <CheckboxField
+              name="allow_simultaneous"
+              id="allow_simultaneous"
+              tooltip={i18n._(
+                t`If enabled, simultaneous runs of this workflow job template will be allowed.`
+              )}
+              label={i18n._(t`Enable Concurrent Jobs`)}
+            />
+          </FormCheckboxLayout>
           {hasWebhooks && (
-            <>
-              <FormRow>
-                {template.related && (
+            <FormColumnLayout>
+              <Field name="webhook_service">
+                {({ form, field }) => (
+                  <FormGroup
+                    name="webhook_service"
+                    fieldId="webhook_service"
+                    helperTextInvalid={form.errors.webhook_service}
+                    label={i18n._(t`Webhook Service`)}
+                  >
+                    <FieldTooltip
+                      content={i18n._(t`Select a webhook service`)}
+                    />
+                    <AnsibleSelect
+                      id="webhook_service"
+                      data={webhookServiceOptions}
+                      value={field.value}
+                      onChange={(event, val) => {
+                        setWebHookService(val);
+                        setWebhookValues(form, val);
+
+                        form.setFieldValue('webhook_service', val);
+                      }}
+                    />
+                  </FormGroup>
+                )}
+              </Field>
+              {!wfjtAddMatch && (
+                <>
                   <FormGroup
                     fieldId="wfjt-webhook-url"
                     id="wfjt-webhook-url"
@@ -348,10 +396,9 @@ function WorkflowJobTemplateForm({
                       name="webhook_url"
                       label=""
                       isReadOnly
+                      value="asdfgh"
                     />
                   </FormGroup>
-                )}
-                {template.related && (
                   <FormGroup
                     fieldId="wfjt-webhook-key"
                     type="text"
@@ -368,67 +415,39 @@ function WorkflowJobTemplateForm({
                       <TextInput
                         isReadOnly
                         aria-label="wfjt-webhook-key"
-                        value={webHookKey}
+                        value={webhookKey}
                       />
                       <Button variant="tertiary" onClick={changeWebhookKey}>
                         <SyncAltIcon />
                       </Button>
                     </InputGroup>
                   </FormGroup>
-                )}
-                <Field name="webhook_service">
-                  {({ form }) => (
+                </>
+              )}
+              {credTypeId && (
+                <Field name="webhook_credential">
+                  {({ form, field }) => (
                     <FormGroup
-                      name="webhook_service"
-                      fieldId="webhook_service"
-                      helperTextInvalid={form.errors.webhook_service}
-                      label={i18n._(t`Webhook Service`)}
+                      fieldId="webhook_credential"
+                      id="webhook_credential"
+                      name="webhook_credential"
                     >
-                      <FieldTooltip
-                        content={i18n._(t`Select a webhook service`)}
-                      />
-                      <AnsibleSelect
-                        id="webhook_service"
-                        data={webhookServiceOptions}
-                        value={webhookService}
-                        onChange={(event, val) => {
-                          setWebHookService(val);
-                          setWebHookCredential(null);
-                          form.setFieldValue('webhook_service', val);
-                          form.setFieldValue('webhook_credential', null);
+                      <CredentialLookup
+                        label={i18n._(t`Webhook Credential`)}
+                        tooltip={i18n._(
+                          t`Optionally select the credential to use to send status updates back to the webhook service.`
+                        )}
+                        credentialTypeId={credTypeId || null}
+                        onChange={value => {
+                          form.setFieldValue('webhook_credential', value);
                         }}
+                        value={field.value}
                       />
                     </FormGroup>
                   )}
                 </Field>
-              </FormRow>
-              {credTypeId && (
-                <FormRow>
-                  <Field name="webhook_credential">
-                    {({ form }) => (
-                      <FormGroup
-                        fieldId="webhook_credential"
-                        id="webhook_credential"
-                        name="webhook_credential"
-                      >
-                        <CredentialLookup
-                          label={i18n._(t`Webhook Credential`)}
-                          tooltip={i18n._(
-                            t`Optionally select the credential to use to send status updates back to the webhook service.`
-                          )}
-                          credentialTypeId={credTypeId || null}
-                          onChange={value => {
-                            setWebHookCredential(value);
-                            form.setFieldValue('webhook_credential', value.id);
-                          }}
-                          value={webhookCredential}
-                        />
-                      </FormGroup>
-                    )}
-                  </Field>
-                </FormRow>
               )}
-            </>
+            </FormColumnLayout>
           )}
           <FormSubmitError error={submitError} />
           <FormActionGroup
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
index f4edf0c405..c7fa586c06 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -75,22 +75,17 @@ describe('<WorkflowJobTemplateForm/>', () => {
   });
   test('all the fields render successfully', () => {
     const fields = [
-      'name',
-      'description',
-      'organization',
-      'inventory',
-      'limit',
-      'scmBranch',
-      'labels',
-      'variables',
+      'FormField[name="name"]',
+      'FormField[name="description"]',
+      'Field[name="organization"]',
+      'Field[name="inventory"]',
+      'FormField[name="limit"]',
+      'FormField[name="scmBranch"]',
+      'Field[name="labels"]',
+      'VariablesField',
     ];
-    const assertField = (field, index) => {
-      expect(
-        wrapper
-          .find('Field')
-          .at(index)
-          .prop('name')
-      ).toBe(`${field}`);
+    const assertField = field => {
+      expect(wrapper.find(`${field}`).length).toBe(1);
     };
     fields.map((field, index) => assertField(field, index));
   });
@@ -162,12 +157,15 @@ describe('<WorkflowJobTemplateForm/>', () => {
 
   test('webhooks and enable concurrent jobs functions properly', async () => {
     act(() => {
-      wrapper.find('Checkbox[name="has_webhooks"]').invoke('onChange')(true);
-      wrapper.find('Checkbox[name="allow_simultaneous"]').invoke('onChange')(
-        true
-      );
+      wrapper.find('Checkbox[aria-label="Webhooks"]').invoke('onChange')(true, {
+        currentTarget: { value: true, type: 'change', checked: true },
+      });
     });
     wrapper.update();
+    expect(
+      wrapper.find('Checkbox[aria-label="Webhooks"]').prop('isChecked')
+    ).toBe(true);
+
     expect(
       wrapper.find('input[aria-label="wfjt-webhook-key"]').prop('readOnly')
     ).toBe(true);
@@ -188,12 +186,6 @@ describe('<WorkflowJobTemplateForm/>', () => {
 
     wrapper.update();
 
-    expect(
-      wrapper.find('Checkbox[name="has_webhooks"]').prop('isChecked')
-    ).toBe(true);
-    expect(
-      wrapper.find('Checkbox[name="allow_simultaneous"]').prop('isChecked')
-    ).toBe(true);
     expect(wrapper.find('Field[name="webhook_service"]').length).toBe(1);
 
     act(() => wrapper.find('AnsibleSelect').prop('onChange')({}, 'gitlab'));
@@ -203,7 +195,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
   });
   test('handleSubmit is called on submit button click', async () => {
     act(() => {
-      wrapper.find('Formik').prop('onSubmit')();
+      wrapper.find('Formik').prop('onSubmit')({});
     });
     wrapper.update();
     sleep(0);

From fc89b627d7f86622fc2d59cbaf87dfd475b8e38b Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 25 Feb 2020 17:23:22 -0500
Subject: [PATCH 08/13] Adds pageSection to jt add form and fixes other PR
 issues

-Fixes spelling error on WFJTDetail
-Adds page section to JT Add Form to fix styling issue
-Adds spacing between functions
-Fixes form submission error by allowing state to handle the lookups while formik
only handles their ids.
---
 .../JobTemplateAdd/JobTemplateAdd.jsx         | 22 +++++----
 .../WorkflowJobTemplateAdd.jsx                |  3 +-
 .../WorkflowJobTemplateAdd.test.jsx           |  4 ++
 .../WorkflowJobTemplateDetail.jsx             |  7 ++-
 .../WorkflowJobTemplateDetail.test.jsx        |  5 ++
 .../WorkflowJobTemplateEdit.jsx               |  2 +-
 .../WorkflowJobTemplateEdit.test.jsx          |  7 +++
 .../shared/WorkflowJobTemplateForm.jsx        | 49 ++++++++++++-------
 .../shared/WorkflowJobTemplateForm.test.jsx   |  9 ++++
 9 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
index 69a55550f1..5863abe8ea 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Card } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
@@ -61,15 +61,17 @@ function JobTemplateAdd() {
   }
 
   return (
-    <Card>
-      <CardBody>
-        <JobTemplateForm
-          handleCancel={handleCancel}
-          handleSubmit={handleSubmit}
-          submitError={formSubmitError}
-        />
-      </CardBody>
-    </Card>
+    <PageSection>
+      <Card>
+        <CardBody>
+          <JobTemplateForm
+            handleCancel={handleCancel}
+            handleSubmit={handleSubmit}
+            submitError={formSubmitError}
+          />
+        </CardBody>
+      </Card>
+    </PageSection>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
index 40c874328c..921aa7486b 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -8,8 +8,9 @@ import { WorkflowJobTemplatesAPI } from '@api';
 import WorkflowJobTemplateForm from '../shared/WorkflowJobTemplateForm';
 
 function WorkflowJobTemplateAdd() {
-  const [formSubmitError, setFormSubmitError] = useState();
   const history = useHistory();
+  const [formSubmitError, setFormSubmitError] = useState();
+
   const handleSubmit = async values => {
     const { labels, organizationId, ...remainingValues } = values;
     try {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
index 1424c689e0..fd063ac73b 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -39,9 +39,11 @@ describe('<WorkflowJobTemplateAdd/>', () => {
   afterEach(async () => {
     wrapper.unmount();
   });
+
   test('initially renders successfully', async () => {
     expect(wrapper.length).toBe(1);
   });
+
   test('calls workflowJobTemplatesAPI with correct information on submit', async () => {
     await act(async () => {
       await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
@@ -55,12 +57,14 @@ describe('<WorkflowJobTemplateAdd/>', () => {
     });
     expect(WorkflowJobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
   });
+
   test('handleCancel navigates the user to the /templates', async () => {
     await act(async () => {
       await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
     });
     expect(history.location.pathname).toBe('/templates');
   });
+
   test('throwing error renders FormSubmitError component', async () => {
     const error = new Error('oops');
     WorkflowJobTemplatesAPI.create.mockImplementation(() =>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index fcfea46b82..f39035286a 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -39,12 +39,15 @@ function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
     related,
     webhook_credential,
   } = template;
+
   const urlOrigin = window.location.origin;
   const history = useHistory();
+
   const [deletionError, setDeletionError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(false);
+
   const renderOptionsField =
-    template.allow_simultaneous || template.webhook_servicee;
+    template.allow_simultaneous || template.webhook_service;
 
   const renderOptions = (
     <TextList component={TextListVariants.ul}>
@@ -75,6 +78,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
     }
     setHasContentLoading(false);
   };
+
   const inventoryValue = (kind, inventoryId) => {
     const inventorykind = kind === 'smart' ? 'smart_inventory' : 'inventory';
 
@@ -91,6 +95,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
       </Link>
     );
   };
+
   const canLaunch = summary_fields?.user_capabilities?.start;
   const recentPlaybookJobs = summary_fields.recent_jobs.map(job => ({
     ...job,
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
index d979a2713a..90f1ab08e1 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx
@@ -40,6 +40,7 @@ describe('<WorkflowJobTemplateDetail/>', () => {
     },
     webhook_service: 'Github',
   };
+
   beforeEach(async () => {
     history = createMemoryHistory({
       initialEntries: ['/templates/workflow_job_template/1/details'],
@@ -75,12 +76,15 @@ describe('<WorkflowJobTemplateDetail/>', () => {
       );
     });
   });
+
   afterEach(() => {
     wrapper.unmount();
   });
+
   test('renders successfully', () => {
     expect(wrapper.find(WorkflowJobTemplateDetail).length).toBe(1);
   });
+
   test('expect detail fields to render properly', () => {
     const renderedValues = [
       {
@@ -147,6 +151,7 @@ describe('<WorkflowJobTemplateDetail/>', () => {
 
     renderedValues.map(value => assertValue(value));
   });
+
   test('link out resource have the correct url', () => {
     const inventory = wrapper.find('Detail[label="Inventory"]').find('Link');
     const organization = wrapper
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index 2a83c18033..53dd2ba442 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -7,8 +7,8 @@ import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
 import { WorkflowJobTemplateForm } from '../shared';
 
 function WorkflowJobTemplateEdit({ template, webhook_key }) {
-  const [formSubmitError, setFormSubmitError] = useState();
   const history = useHistory();
+  const [formSubmitError, setFormSubmitError] = useState();
 
   const handleSubmit = async values => {
     const { labels, ...remainingValues } = values;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index e73b29ae4e..ebb3155abc 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -25,6 +25,7 @@ const mockTemplate = {
 describe('<WorkflowJobTemplateEdit/>', () => {
   let wrapper;
   let history;
+
   beforeEach(async () => {
     await act(async () => {
       history = createMemoryHistory({
@@ -49,12 +50,15 @@ describe('<WorkflowJobTemplateEdit/>', () => {
       );
     });
   });
+
   afterEach(async () => {
     wrapper.unmount();
   });
+
   test('renders successfully', () => {
     expect(wrapper.find('WorkflowJobTemplateEdit').length).toBe(1);
   });
+
   test('api is called to properly to save the updated template.', async () => {
     await act(async () => {
       await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
@@ -69,6 +73,7 @@ describe('<WorkflowJobTemplateEdit/>', () => {
         variables: '---',
       });
     });
+
     expect(WorkflowJobTemplatesAPI.update).toHaveBeenCalledWith(6, {
       id: 6,
       name: 'Alex',
@@ -88,12 +93,14 @@ describe('<WorkflowJobTemplateEdit/>', () => {
 
     await expect(WorkflowJobTemplatesAPI.associateLabel).toBeCalledTimes(1);
   });
+
   test('handleCancel navigates the user to the /templates', async () => {
     await act(async () => {
       await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
     });
     expect(history.location.pathname).toBe('/templates');
   });
+
   test('throwing error renders FormSubmitError component', async () => {
     const error = new Error('oops');
     WorkflowJobTemplatesAPI.update.mockImplementation(() =>
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index afa68ea97a..db36f925f3 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -46,14 +46,24 @@ function WorkflowJobTemplateForm({
   webhook_key,
   submitError,
 }) {
+  const urlOrigin = window.location.origin;
+
   const { id } = useParams();
   const wfjtAddMatch = useRouteMatch('/templates/workflow_job_template/add');
 
-  const urlOrigin = window.location.origin;
-
   const [contentError, setContentError] = useState(null);
-  const [webhookKey, setWebHookKey] = useState(webhook_key);
   const [credTypeId, setCredentialTypeId] = useState();
+
+  const [inventory, setInventory] = useState(
+    template?.summary_fields?.inventory || null
+  );
+  const [organization, setOrganization] = useState(
+    template?.summary_fields?.organization || null
+  );
+  const [webhookCredential, setWebhookCredential] = useState(
+    template?.summary_fields?.webhook_credential || null
+  );
+  const [webhookKey, setWebHookKey] = useState(webhook_key);
   const [webhookService, setWebHookService] = useState(
     template.webhook_service || ''
   );
@@ -159,16 +169,16 @@ function WorkflowJobTemplateForm({
   return (
     <Formik
       onSubmit={values => {
-        values.webhook_credential = values?.webhook_credential?.id;
-        values.organization = values?.organization?.id;
-        values.inventory = values?.inventory?.id;
+        if (values.webhook_service === '') {
+          values.webhook_credential = '';
+        }
         return handleSubmit(values);
       }}
       initialValues={{
         name: template.name || '',
         description: template.description || '',
-        inventory: template?.summary_fields?.inventory || null,
-        organization: template?.summary_fields?.organization || null,
+        inventory: template?.summary_fields?.inventory?.id || null,
+        organization: template?.summary_fields?.organization?.id || null,
         labels: template.summary_fields?.labels?.results || [],
         extra_vars: template.variables || '---',
         limit: template.limit || '',
@@ -178,7 +188,7 @@ function WorkflowJobTemplateForm({
           template?.related?.webhook_receiver &&
           `${urlOrigin}${template?.related?.webhook_receiver}`,
         webhook_credential:
-          template?.summary_fields?.webhook_credential || null,
+          template?.summary_fields?.webhook_credential?.id || null,
         webhook_service: template.webhook_service || '',
         ask_limit_on_launch: template.ask_limit_on_launch || false,
         ask_inventory_on_launch: template.ask_inventory_on_launch || false,
@@ -208,7 +218,7 @@ function WorkflowJobTemplateForm({
               label={i18n._(t`Organization`)}
               name="organization"
             >
-              {({ form, field }) => (
+              {({ form }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -216,25 +226,27 @@ function WorkflowJobTemplateForm({
                   }
                   onBlur={() => form.setFieldTouched('organization')}
                   onChange={value => {
-                    form.setFieldValue('organization', value);
+                    form.setFieldValue('organization', value.id);
+                    setOrganization(value);
                   }}
-                  value={field.value}
+                  value={organization}
                   touched={form.touched.organization}
                   error={form.errors.organization}
                 />
               )}
             </Field>
             <Field name="inventory">
-              {({ form, field }) => (
+              {({ form }) => (
                 <InventoryLookup
-                  value={field.value}
+                  value={inventory}
                   tooltip={i18n._(
                     t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
                   )}
                   isValid={!form.touched.inventory || !form.errors.inventory}
                   helperTextInvalid={form.errors.inventory}
                   onChange={value => {
-                    form.setFieldValue('inventory', value);
+                    form.setFieldValue('inventory', value.id);
+                    setInventory(value);
                     form.setFieldValue('organizationId', value.organization);
                   }}
                   error={form.errors.inventory}
@@ -426,7 +438,7 @@ function WorkflowJobTemplateForm({
               )}
               {credTypeId && (
                 <Field name="webhook_credential">
-                  {({ form, field }) => (
+                  {({ form }) => (
                     <FormGroup
                       fieldId="webhook_credential"
                       id="webhook_credential"
@@ -439,9 +451,10 @@ function WorkflowJobTemplateForm({
                         )}
                         credentialTypeId={credTypeId || null}
                         onChange={value => {
-                          form.setFieldValue('webhook_credential', value);
+                          form.setFieldValue('webhook_credential', value.id);
+                          setWebhookCredential(value);
                         }}
-                        value={field.value}
+                        value={webhookCredential}
                       />
                     </FormGroup>
                   )}
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
index c7fa586c06..328ba5de85 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -9,9 +9,11 @@ import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
 import { WorkflowJobTemplatesAPI } from '../../../api';
 
 jest.mock('@api/models/WorkflowJobTemplates');
+
 WorkflowJobTemplatesAPI.updateWebhookKey.mockResolvedValue({
   data: { webhook_key: 'sdafdghjkl2345678ionbvcxz' },
 });
+
 describe('<WorkflowJobTemplateForm/>', () => {
   let wrapper;
   let history;
@@ -35,6 +37,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
       webhook_receiver: '/api/v2/workflow_job_templates/57/gitlab/',
     },
   };
+
   beforeEach(() => {
     history = createMemoryHistory({
       initialEntries: ['/templates/workflow_job_template/6/edit'],
@@ -66,13 +69,16 @@ describe('<WorkflowJobTemplateForm/>', () => {
       );
     });
   });
+
   afterEach(() => {
     wrapper.unmount();
     jest.clearAllMocks();
   });
+
   test('renders successfully', () => {
     expect(wrapper.length).toBe(1);
   });
+
   test('all the fields render successfully', () => {
     const fields = [
       'FormField[name="name"]',
@@ -89,6 +95,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
     };
     fields.map((field, index) => assertField(field, index));
   });
+
   test('changing inputs should update values', async () => {
     const inputsToChange = [
       {
@@ -193,6 +200,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
 
     expect(wrapper.find('AnsibleSelect').prop('value')).toBe('gitlab');
   });
+
   test('handleSubmit is called on submit button click', async () => {
     act(() => {
       wrapper.find('Formik').prop('onSubmit')({});
@@ -201,6 +209,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
     sleep(0);
     expect(handleSubmit).toBeCalled();
   });
+
   test('handleCancel is called on cancel button click', async () => {
     act(() => {
       wrapper.find('button[aria-label="Cancel"]').simulate('click');

From 51a069fcc49f0020f44655a3c283c6608a7e3449 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 26 Feb 2020 15:50:54 -0500
Subject: [PATCH 09/13] Fixes styling issues, navigation, props, and adds
 useRequest hook -Add functionality to remove chips from look up fields
 -Removes uncessary custome styling from -Removes uncessary Form Group
 wrappers -Adds internationalization to webhook key string. -Adds field level
 error handling -updates tests -Adds initial null value to form submit error

---
 .../src/screens/Template/Templates.jsx        |   1 -
 .../WorkflowJobTemplateAdd.jsx                |  23 +-
 .../WorkflowJobTemplateAdd.test.jsx           |   3 +
 .../WorkflowJobTemplateEdit.jsx               |  24 +-
 .../WorkflowJobTemplateEdit.test.jsx          |   4 +-
 .../shared/WorkflowJobTemplateForm.jsx        | 261 +++++++++---------
 .../shared/WorkflowJobTemplateForm.test.jsx   |  21 +-
 7 files changed, 174 insertions(+), 163 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index 456f8b3ca4..97b86ebb84 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -90,7 +90,6 @@ class Templates extends Component {
               <Config>
                 {({ me }) => (
                   <WorkflowJobTemplate
-                    history={history}
                     location={location}
                     setBreadcrumb={this.setBreadCrumbConfig}
                     me={me || {}}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
index 921aa7486b..0cfead83c8 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -4,12 +4,12 @@ import { useHistory } from 'react-router-dom';
 import { Card, PageSection } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 
-import { WorkflowJobTemplatesAPI } from '@api';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
 import WorkflowJobTemplateForm from '../shared/WorkflowJobTemplateForm';
 
 function WorkflowJobTemplateAdd() {
   const history = useHistory();
-  const [formSubmitError, setFormSubmitError] = useState();
+  const [formSubmitError, setFormSubmitError] = useState(null);
 
   const handleSubmit = async values => {
     const { labels, organizationId, ...remainingValues } = values;
@@ -17,14 +17,29 @@ function WorkflowJobTemplateAdd() {
       const {
         data: { id },
       } = await WorkflowJobTemplatesAPI.create(remainingValues);
-      await Promise.all([submitLabels(id, labels, organizationId)]);
+      await Promise.all([submitLabels(id, labels, organizationId, values)]);
       history.push(`/templates/workflow_job_template/${id}/details`);
     } catch (err) {
       setFormSubmitError(err);
     }
   };
 
-  const submitLabels = (templateId, labels = [], organizationId) => {
+  const submitLabels = async (
+    templateId,
+    labels = [],
+    organizationId,
+    values
+  ) => {
+    if (!organizationId && !values.organization) {
+      try {
+        const {
+          data: { results },
+        } = await OrganizationsAPI.read();
+        organizationId = results[0].id;
+      } catch (err) {
+        setFormSubmitError(err);
+      }
+    }
     const associatePromises = labels.map(label =>
       WorkflowJobTemplatesAPI.associateLabel(templateId, label, organizationId)
     );
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
index fd063ac73b..65161efb0f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -82,8 +82,11 @@ describe('<WorkflowJobTemplateAdd/>', () => {
         variables: '---',
       });
     });
+    expect(wrapper.find('ContentError').length).toBe(0);
+    expect(wrapper.length).toBe(1);
     wrapper.update();
     expect(WorkflowJobTemplatesAPI.create).toBeCalled();
+    expect(wrapper.find('ContentError').length).toBe(1);
     expect(wrapper.find('WorkflowJobTemplateForm').prop('submitError')).toEqual(
       error
     );
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index 53dd2ba442..7b620044ed 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -8,7 +8,7 @@ import { WorkflowJobTemplateForm } from '../shared';
 
 function WorkflowJobTemplateEdit({ template, webhook_key }) {
   const history = useHistory();
-  const [formSubmitError, setFormSubmitError] = useState();
+  const [formSubmitError, setFormSubmitError] = useState(null);
 
   const handleSubmit = async values => {
     const { labels, ...remainingValues } = values;
@@ -57,21 +57,19 @@ function WorkflowJobTemplateEdit({ template, webhook_key }) {
   };
 
   const handleCancel = () => {
-    history.push(`/templates`);
+    history.push(`/templates/workflow_job_template/${template.id}/details`);
   };
 
   return (
-    <>
-      <CardBody>
-        <WorkflowJobTemplateForm
-          handleSubmit={handleSubmit}
-          handleCancel={handleCancel}
-          template={template}
-          webhook_key={webhook_key}
-          submitError={formSubmitError}
-        />
-      </CardBody>
-    </>
+    <CardBody>
+      <WorkflowJobTemplateForm
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        template={template}
+        webhook_key={webhook_key}
+        submitError={formSubmitError}
+      />
+    </CardBody>
   );
 }
 export default WorkflowJobTemplateEdit;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index ebb3155abc..0cd3979e35 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -98,7 +98,9 @@ describe('<WorkflowJobTemplateEdit/>', () => {
     await act(async () => {
       await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
     });
-    expect(history.location.pathname).toBe('/templates');
+    expect(history.location.pathname).toBe(
+      '/templates/workflow_job_template/6/details'
+    );
   });
 
   test('throwing error renders FormSubmitError component', async () => {
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index db36f925f3..19a8391f8c 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { t } from '@lingui/macro';
 import { useRouteMatch, useParams } from 'react-router-dom';
 
@@ -20,6 +20,7 @@ import { SyncAltIcon } from '@patternfly/react-icons';
 import AnsibleSelect from '@components/AnsibleSelect';
 import { WorkflowJobTemplatesAPI, CredentialTypesAPI } from '@api';
 
+import useRequest from '@util/useRequest';
 import FormField, {
   FieldTooltip,
   FormSubmitError,
@@ -29,14 +30,15 @@ import {
   FormFullWidthLayout,
   FormCheckboxLayout,
 } from '@components/FormLayout';
+import ContentLoading from '@components/ContentLoading';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import CredentialLookup from '@components/Lookup/CredentialLookup';
 import { InventoryLookup } from '@components/Lookup';
 import { VariablesField } from '@components/CodeMirrorInput';
 import FormActionGroup from '@components/FormActionGroup';
 import ContentError from '@components/ContentError';
+import CheckboxField from '@components/FormField/CheckboxField';
 import LabelSelect from './LabelSelect';
-import CheckboxField from '../../../components/FormField/CheckboxField';
 
 function WorkflowJobTemplateForm({
   handleSubmit,
@@ -51,8 +53,7 @@ function WorkflowJobTemplateForm({
   const { id } = useParams();
   const wfjtAddMatch = useRouteMatch('/templates/workflow_job_template/add');
 
-  const [contentError, setContentError] = useState(null);
-  const [credTypeId, setCredentialTypeId] = useState();
+  const [hasContentError, setContentError] = useState(null);
 
   const [inventory, setInventory] = useState(
     template?.summary_fields?.inventory || null
@@ -85,30 +86,33 @@ function WorkflowJobTemplateForm({
     {
       value: 'gitlab',
       key: 'gitlab',
-      label: i18n._(t`Git Lab`),
+      label: i18n._(t`GitLab`),
       isDisabled: false,
     },
   ];
+  const {
+    request: loadCredentialType,
+    error: contentError,
+    contentLoading,
+    result: credTypeId,
+  } = useRequest(
+    useCallback(async () => {
+      const results = await CredentialTypesAPI.read({
+        namespace: `${webhookService}_token`,
+      });
+      // TODO: Consider how to handle the situation where the results returns
+      // and empty array, or any of the other values is undefined or null (data, results, id)
+      return results?.data?.results[0]?.id;
+    }, [webhookService])
+  );
 
   useEffect(() => {
-    if (!webhookService) {
-      return;
-    }
-    const loadCredentialType = async () => {
-      try {
-        const {
-          data: { results },
-        } = await CredentialTypesAPI.read({
-          namespace: `${webhookService}_token`,
-        });
-        setCredentialTypeId(results[0].id);
-      } catch (err) {
-        setContentError(err);
-      }
-    };
     loadCredentialType();
-  }, [webhookService]);
-
+  }, [loadCredentialType]);
+  // TODO: Convert this function below to useRequest. Create a new webhookkey component
+  // that handles all of that api calls.  Will also need to move this api call out of
+  // WorkflowJobTemplate.jsx and add it to workflowJobTemplateDetai.jsx
+  let initialWebhookKey = webhook_key;
   const changeWebhookKey = async () => {
     try {
       const {
@@ -120,9 +124,8 @@ function WorkflowJobTemplateForm({
     }
   };
 
-  let initialWebhookKey = webhook_key;
-
-  const setWebhookValues = (form, webhookServiceValue) => {
+  const initialWebhookCredential = template?.summary_fields?.webhook_credential;
+  const storeWebhookValues = (form, webhookServiceValue) => {
     if (
       webhookServiceValue === form.initialValues.webhook_service ||
       webhookServiceValue === ''
@@ -131,18 +134,21 @@ function WorkflowJobTemplateForm({
         'webhook_credential',
         form.initialValues.webhook_credential
       );
+      setWebhookCredential(initialWebhookCredential);
       form.setFieldValue('webhook_url', form.initialValues.webhook_url);
       form.setFieldValue('webhook_service', form.initialValues.webhook_service);
-
       setWebHookKey(initialWebhookKey);
     } else {
       form.setFieldValue('webhook_credential', null);
+      setWebhookCredential(null);
       form.setFieldValue(
         'webhook_url',
         `${urlOrigin}/api/v2/workflow_job_templates/${template.id}/${webhookServiceValue}/`
       );
 
-      setWebHookKey('A NEW WEBHOOK KEY WILL BE GENERATED ON SAVE');
+      setWebHookKey(
+        i18n._(t`a new webhook key will be generated on save.`).toUpperCase()
+      );
     }
   };
 
@@ -159,13 +165,18 @@ function WorkflowJobTemplateForm({
       setWebHookService('');
       setWebHookKey('');
     } else {
-      setWebhookValues(form, webhookServiceValue);
+      storeWebhookValues(form, webhookServiceValue);
     }
   };
 
-  if (contentError) {
-    return <ContentError error={contentError} />;
+  if (hasContentError || contentError) {
+    return <ContentError error={contentError || hasContentError} />;
   }
+
+  if (contentLoading) {
+    return <ContentLoading />;
+  }
+
   return (
     <Formik
       onSubmit={values => {
@@ -221,15 +232,15 @@ function WorkflowJobTemplateForm({
               {({ form }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
-                  isValid={
-                    !form.touched.organization || !form.errors.organization
-                  }
                   onBlur={() => form.setFieldTouched('organization')}
                   onChange={value => {
-                    form.setFieldValue('organization', value.id);
+                    form.setFieldValue('organization', value?.id || null);
                     setOrganization(value);
                   }}
                   value={organization}
+                  isValid={
+                    !(form.touched.organization || form.errors.organization)
+                  }
                   touched={form.touched.organization}
                   error={form.errors.organization}
                 />
@@ -242,53 +253,43 @@ function WorkflowJobTemplateForm({
                   tooltip={i18n._(
                     t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
                   )}
-                  isValid={!form.touched.inventory || !form.errors.inventory}
+                  isValid={!(form.touched.inventory || form.errors.inventory)}
                   helperTextInvalid={form.errors.inventory}
                   onChange={value => {
-                    form.setFieldValue('inventory', value.id);
+                    form.setFieldValue('inventory', value?.id || null);
                     setInventory(value);
-                    form.setFieldValue('organizationId', value.organization);
+                    form.setFieldValue('organizationId', value?.organization);
                   }}
                   error={form.errors.inventory}
                 />
               )}
             </Field>
-            <FormGroup
-              fieldId="wfjt-limit"
+            <FormField
+              type="text"
               name="limit"
+              id="wfjt-limit"
               label={i18n._(t`Limit`)}
-            >
-              <FieldTooltip
-                content={i18n._(
-                  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" name="limit" id="wfjt-limit" label="" />
-            </FormGroup>
-            <FormGroup
-              fieldId="wfjt-scmBranch"
-              id="wfjt-scmBranch"
+              tooltip={i18n._(
+                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`SCM 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-scmBranch"
               name="scmBranch"
-            >
-              <FieldTooltip
-                content={i18n._(
-                  t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`
-                )}
-              />
-              <FormField
-                type="text"
-                id="wfjt-scmBranch"
-                label=""
-                name="scmBranch"
-              />
-            </FormGroup>
+            />
           </FormColumnLayout>
           <FormFullWidthLayout>
             <Field name="labels">
               {({ form, field }) => (
                 <FormGroup
                   label={i18n._(t`Labels`)}
+                  helperTextInvalid={form.errors.webhook_service}
+                  isValid={!(form.touched.labels || form.errors.labels)}
                   name="wfjt-labels"
                   fieldId="wfjt-labels"
                 >
@@ -300,7 +301,7 @@ function WorkflowJobTemplateForm({
                   <LabelSelect
                     value={field.value}
                     onChange={labels => form.setFieldValue('labels', labels)}
-                    onError={() => setContentError()}
+                    onError={err => setContentError(err)}
                   />
                 </FormGroup>
               )}
@@ -320,7 +321,6 @@ function WorkflowJobTemplateForm({
             fieldId="options"
             isInline
             label={i18n._(t`Options`)}
-            css="margin-top: 20px"
           >
             <Field
               id="wfjt-webhooks"
@@ -370,6 +370,12 @@ function WorkflowJobTemplateForm({
                     name="webhook_service"
                     fieldId="webhook_service"
                     helperTextInvalid={form.errors.webhook_service}
+                    isValid={
+                      !(
+                        form.touched.webhook_service ||
+                        form.errors.webhook_service
+                      )
+                    }
                     label={i18n._(t`Webhook Service`)}
                   >
                     <FieldTooltip
@@ -381,7 +387,7 @@ function WorkflowJobTemplateForm({
                       value={field.value}
                       onChange={(event, val) => {
                         setWebHookService(val);
-                        setWebhookValues(form, val);
+                        storeWebhookValues(form, val);
 
                         form.setFieldValue('webhook_service', val);
                       }}
@@ -391,72 +397,77 @@ function WorkflowJobTemplateForm({
               </Field>
               {!wfjtAddMatch && (
                 <>
-                  <FormGroup
-                    fieldId="wfjt-webhook-url"
+                  <FormField
+                    type="text"
+                    label={i18n._(t`Webhook URL`)}
                     id="wfjt-webhook-url"
                     name="webhook_url"
-                    label={i18n._(t`Webhook URL`)}
-                  >
-                    <FieldTooltip
-                      content={i18n._(
-                        t`Webhook services can launch jobs with this job template by making a POST request to this URL.`
-                      )}
-                    />
-                    <FormField
-                      type="text"
-                      id="wfjt-webhook-url"
-                      name="webhook_url"
-                      label=""
-                      isReadOnly
-                      value="asdfgh"
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    fieldId="wfjt-webhook-key"
-                    type="text"
-                    id="wfjt-webhook-key"
-                    name="webhook_key"
-                    label={i18n._(t`Webhook Key`)}
-                  >
-                    <FieldTooltip
-                      content={i18n._(
-                        t`Webhook services can use this as a shared secret.`
-                      )}
-                    />
-                    <InputGroup>
-                      <TextInput
-                        isReadOnly
-                        aria-label="wfjt-webhook-key"
-                        value={webhookKey}
-                      />
-                      <Button variant="tertiary" onClick={changeWebhookKey}>
-                        <SyncAltIcon />
-                      </Button>
-                    </InputGroup>
-                  </FormGroup>
+                    tooltip={i18n._(
+                      t`Webhook services can launch jobs with this job template by making a POST request to this URL.`
+                    )}
+                    isReadOnly
+                  />
+                  <Field>
+                    {({ form }) => (
+                      <FormGroup
+                        fieldId="wfjt-webhook-key"
+                        type="text"
+                        id="wfjt-webhook-key"
+                        name="webhook_key"
+                        isValid={
+                          !(form.touched.webhook_key || form.errors.webhook_key)
+                        }
+                        helperTextInvalid={form.errors.webhook_service}
+                        label={i18n._(t`Webhook Key`)}
+                      >
+                        <FieldTooltip
+                          content={i18n._(
+                            t`Webhook services can use this as a shared secret.`
+                          )}
+                        />
+                        <InputGroup>
+                          <TextInput
+                            isReadOnly
+                            aria-label="wfjt-webhook-key"
+                            value={webhookKey}
+                          />
+                          <Button variant="tertiary" onClick={changeWebhookKey}>
+                            <SyncAltIcon />
+                          </Button>
+                        </InputGroup>
+                      </FormGroup>
+                    )}
+                  </Field>
                 </>
               )}
               {credTypeId && (
+                // TODO: Consider how to handle the situation where the results returns
+                // an empty array, or any of the other values is undefined or null
+                // (data, results, id)
                 <Field name="webhook_credential">
                   {({ form }) => (
-                    <FormGroup
-                      fieldId="webhook_credential"
-                      id="webhook_credential"
-                      name="webhook_credential"
-                    >
-                      <CredentialLookup
-                        label={i18n._(t`Webhook Credential`)}
-                        tooltip={i18n._(
-                          t`Optionally select the credential to use to send status updates back to the webhook service.`
-                        )}
-                        credentialTypeId={credTypeId || null}
-                        onChange={value => {
-                          form.setFieldValue('webhook_credential', value.id);
-                          setWebhookCredential(value);
-                        }}
-                        value={webhookCredential}
-                      />
-                    </FormGroup>
+                    <CredentialLookup
+                      label={i18n._(t`Webhook Credential`)}
+                      tooltip={i18n._(
+                        t`Optionally select the credential to use to send status updates back to the webhook service.`
+                      )}
+                      credentialTypeId={credTypeId}
+                      onChange={value => {
+                        form.setFieldValue(
+                          'webhook_credential',
+                          value?.id || null
+                        );
+                        setWebhookCredential(value);
+                      }}
+                      isValid={
+                        !(
+                          form.touched.webhook_credential ||
+                          form.errors.webhook_credential
+                        )
+                      }
+                      helperTextInvalid={form.errors.webhook_credential}
+                      value={webhookCredential}
+                    />
                   )}
                 </Field>
               )}
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
index 328ba5de85..02aad9ef20 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -6,7 +6,7 @@ import { sleep } from '@testUtils/testUtils';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
-import { WorkflowJobTemplatesAPI } from '../../../api';
+import { WorkflowJobTemplatesAPI } from '@api';
 
 jest.mock('@api/models/WorkflowJobTemplates');
 
@@ -137,8 +137,6 @@ describe('<WorkflowJobTemplateForm/>', () => {
     });
     wrapper.update();
 
-    expect(wrapper.find('input#wfjt-name').prop('value')).toEqual('new foo');
-
     const assertChanges = ({ element, value }) => {
       expect(wrapper.find(`input#${element}`).prop('value')).toEqual(
         `${value.value}`
@@ -146,20 +144,6 @@ describe('<WorkflowJobTemplateForm/>', () => {
     };
 
     inputsToChange.map(input => assertChanges(input));
-    expect(wrapper.find('input#wfjt-name').prop('value')).toEqual('new foo');
-    expect(wrapper.find('InventoryLookup').prop('value')).toEqual({
-      id: 3,
-      name: 'inventory',
-    });
-    expect(wrapper.find('OrganizationLookup').prop('value')).toEqual({
-      id: 3,
-      name: 'organization',
-    });
-    expect(wrapper.find('LabelSelect').prop('value')).toEqual([
-      { name: 'new label', id: 5 },
-      { name: 'Label 1', id: 1 },
-      { name: 'Label 2', id: 2 },
-    ]);
   });
 
   test('webhooks and enable concurrent jobs functions properly', async () => {
@@ -185,11 +169,10 @@ describe('<WorkflowJobTemplateForm/>', () => {
         .find('Button[variant="tertiary"]')
         .prop('onClick')()
     );
-
     expect(WorkflowJobTemplatesAPI.updateWebhookKey).toBeCalledWith('6');
     expect(
       wrapper.find('TextInputBase[name="webhook_url"]').prop('value')
-    ).toBe('http://127.0.0.1:3001/api/v2/workflow_job_templates/57/gitlab/');
+    ).toContain('/api/v2/workflow_job_templates/57/gitlab/');
 
     wrapper.update();
 

From acfa6d056f1d45d446bd25c41c22daf11631ffbf Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 28 Feb 2020 09:43:02 -0500
Subject: [PATCH 10/13] Adds error handling to submit labels, prevents
 uncessary api call

The unecessary api call is for the webhook credential id.  If there is no
webhook service we do not want the api to make a call for get the webhook credential
type id.
---
 .../CodeMirrorInput/VariablesField.jsx        |  3 +-
 .../WorkflowJobTemplateAdd.jsx                | 15 ++--
 .../WorkflowJobTemplateEdit.jsx               | 28 +++----
 .../WorkflowJobTemplateEdit.test.jsx          | 65 ++++++++++------
 .../shared/WorkflowJobTemplateForm.jsx        | 78 ++++++++++---------
 5 files changed, 100 insertions(+), 89 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 5a468bcccb..3c72e56084 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
@@ -5,9 +5,8 @@ import { t } from '@lingui/macro';
 import { useField } from 'formik';
 import styled from 'styled-components';
 import { Split, SplitItem } from '@patternfly/react-core';
-import { CheckboxField } from '@components/FormField';
+import { CheckboxField, FieldTooltip } from '@components/FormField';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
-import { FieldTooltip } from '@components/FormField';
 import CodeMirrorInput from './CodeMirrorInput';
 import YamlJsonToggle from './YamlJsonToggle';
 import { JSON_MODE, YAML_MODE } from './constants';
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
index 0cfead83c8..05d68a1b6e 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -17,33 +17,28 @@ function WorkflowJobTemplateAdd() {
       const {
         data: { id },
       } = await WorkflowJobTemplatesAPI.create(remainingValues);
-      await Promise.all([submitLabels(id, labels, organizationId, values)]);
+      await submitLabels(id, labels, organizationId);
       history.push(`/templates/workflow_job_template/${id}/details`);
     } catch (err) {
       setFormSubmitError(err);
     }
   };
 
-  const submitLabels = async (
-    templateId,
-    labels = [],
-    organizationId,
-    values
-  ) => {
-    if (!organizationId && !values.organization) {
+  const submitLabels = async (templateId, labels = [], organizationId) => {
+    if (!organizationId) {
       try {
         const {
           data: { results },
         } = await OrganizationsAPI.read();
         organizationId = results[0].id;
       } catch (err) {
-        setFormSubmitError(err);
+        throw err;
       }
     }
     const associatePromises = labels.map(label =>
       WorkflowJobTemplatesAPI.associateLabel(templateId, label, organizationId)
     );
-    return Promise.all([...associatePromises]);
+    return [...associatePromises];
   };
 
   const handleCancel = () => {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index 7b620044ed..6c9356e70d 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -13,46 +13,38 @@ function WorkflowJobTemplateEdit({ template, webhook_key }) {
   const handleSubmit = async values => {
     const { labels, ...remainingValues } = values;
     try {
+      await submitLabels(labels, values.organization, template.organization);
       await WorkflowJobTemplatesAPI.update(template.id, remainingValues);
-      await Promise.all([submitLabels(labels, values.organization)]);
       history.push(`/templates/workflow_job_template/${template.id}/details`);
     } catch (err) {
       setFormSubmitError(err);
     }
   };
 
-  const submitLabels = async (labels = [], orgId) => {
+  const submitLabels = async (labels = [], formOrgId, templateOrgId) => {
     const { added, removed } = getAddedAndRemoved(
       template.summary_fields.labels.results,
       labels
     );
-    if (!orgId && !template.organization) {
+    let orgId = formOrgId || templateOrgId;
+    if (!orgId) {
       try {
         const {
           data: { results },
         } = await OrganizationsAPI.read();
         orgId = results[0].id;
       } catch (err) {
-        setFormSubmitError(err);
+        throw err;
       }
     }
 
-    const disassociationPromises = removed.map(label =>
+    const disassociationPromises = await removed.map(label =>
       WorkflowJobTemplatesAPI.disassociateLabel(template.id, label)
     );
-
-    const associationPromises = added.map(label => {
-      return WorkflowJobTemplatesAPI.associateLabel(
-        template.id,
-        label,
-        orgId || template.organization
-      );
-    });
-
-    const results = await Promise.all([
-      ...disassociationPromises,
-      ...associationPromises,
-    ]);
+    const associationPromises = await added.map(label =>
+      WorkflowJobTemplatesAPI.associateLabel(template.id, label, orgId)
+    );
+    const results = [...disassociationPromises, ...associationPromises];
     return results;
   };
 
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index 0cd3979e35..f38fe2134b 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { act } from 'react-dom/test-utils';
-import { WorkflowJobTemplatesAPI } from '@api';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { createMemoryHistory } from 'history';
 import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
 
-jest.mock('@api');
+jest.mock('@api/models/WorkflowJobTemplates');
+jest.mock('@api/models/Organizations');
+
 const mockTemplate = {
   id: 6,
   name: 'Foo',
@@ -53,6 +55,7 @@ describe('<WorkflowJobTemplateEdit/>', () => {
 
   afterEach(async () => {
     wrapper.unmount();
+    jest.clearAllMocks();
   });
 
   test('renders successfully', () => {
@@ -65,8 +68,8 @@ describe('<WorkflowJobTemplateEdit/>', () => {
         id: 6,
         name: 'Alex',
         description: 'Apollo and Athena',
-        inventory: { id: 1, name: 'Inventory 1' },
-        organization: 2,
+        inventory: 1,
+        organization: 1,
         labels: [{ name: 'Label 2', id: 2 }, { name: 'Generated Label' }],
         scm_branch: 'master',
         limit: '5000',
@@ -78,8 +81,8 @@ describe('<WorkflowJobTemplateEdit/>', () => {
       id: 6,
       name: 'Alex',
       description: 'Apollo and Athena',
-      inventory: { id: 1, name: 'Inventory 1' },
-      organization: 2,
+      inventory: 1,
+      organization: 1,
       scm_branch: 'master',
       limit: '5000',
       variables: '---',
@@ -94,9 +97,9 @@ describe('<WorkflowJobTemplateEdit/>', () => {
     await expect(WorkflowJobTemplatesAPI.associateLabel).toBeCalledTimes(1);
   });
 
-  test('handleCancel navigates the user to the /templates', async () => {
-    await act(async () => {
-      await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
+  test('handleCancel navigates the user to the /templates', () => {
+    act(() => {
+      wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
     });
     expect(history.location.pathname).toBe(
       '/templates/workflow_job_template/6/details'
@@ -105,25 +108,41 @@ describe('<WorkflowJobTemplateEdit/>', () => {
 
   test('throwing error renders FormSubmitError component', async () => {
     const error = new Error('oops');
-    WorkflowJobTemplatesAPI.update.mockImplementation(() =>
-      Promise.reject(error)
-    );
+    OrganizationsAPI.read.mockResolvedValue({ results: [{ id: 1 }] });
+    WorkflowJobTemplatesAPI.update.mockRejectedValue(error);
     await act(async () => {
-      wrapper.find('WorkflowJobTemplateForm').prop('handleSubmit')({
-        id: 6,
-        name: 'Alex',
-        description: 'Apollo and Athena',
-        inventory: { id: 1, name: 'Inventory 1' },
-        organization: 2,
-        scm_branch: 'master',
-        limit: '5000',
-        variables: '---',
-      });
+      wrapper.find('Button[aria-label="Save"]').simulate('click');
     });
-    wrapper.update();
     expect(WorkflowJobTemplatesAPI.update).toHaveBeenCalled();
+    wrapper.update();
     expect(wrapper.find('WorkflowJobTemplateForm').prop('submitError')).toEqual(
       error
     );
   });
+
+  test('throwing error prevents form submission', () => {
+    OrganizationsAPI.read.mockRejectedValue(new Error('An error occurred'));
+    WorkflowJobTemplatesAPI.update.mockResolvedValue();
+
+    act(() => {
+      wrapper = mountWithContexts(
+        <WorkflowJobTemplateEdit template={mockTemplate} />,
+        {
+          context: {
+            router: {
+              history,
+            },
+          },
+        }
+      );
+    });
+    wrapper.find('Button[aria-label="Save"]').simulate('click');
+
+    expect(wrapper.find('WorkflowJobTemplateForm').length).toBe(1);
+    expect(OrganizationsAPI.read).toBeCalled();
+    expect(WorkflowJobTemplatesAPI.update).not.toBeCalled();
+    expect(history.location.pathname).toBe(
+      '/templates/workflow_job_template/6/edit'
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 19a8391f8c..7ebea06f9a 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -97,11 +97,14 @@ function WorkflowJobTemplateForm({
     result: credTypeId,
   } = useRequest(
     useCallback(async () => {
-      const results = await CredentialTypesAPI.read({
-        namespace: `${webhookService}_token`,
-      });
-      // TODO: Consider how to handle the situation where the results returns
-      // and empty array, or any of the other values is undefined or null (data, results, id)
+      let results;
+      if (webhookService) {
+        results = await CredentialTypesAPI.read({
+          namespace: `${webhookService}_token`,
+        });
+        // TODO: Consider how to handle the situation where the results returns
+        // and empty array, or any of the other values is undefined or null (data, results, id)
+      }
       return results?.data?.results[0]?.id;
     }, [webhookService])
   );
@@ -109,10 +112,10 @@ function WorkflowJobTemplateForm({
   useEffect(() => {
     loadCredentialType();
   }, [loadCredentialType]);
-  // TODO: Convert this function below to useRequest. Create a new webhookkey component
-  // that handles all of that api calls.  Will also need to move this api call out of
-  // WorkflowJobTemplate.jsx and add it to workflowJobTemplateDetai.jsx
-  let initialWebhookKey = webhook_key;
+
+  // TODO: Convert this function below to useRequest. Might want to create a new
+  // webhookkey component that handles all of that api calls.  Will also need
+  // to move this api call out of WorkflowJobTemplate.jsx and add it to workflowJobTemplateDetai.jsx
   const changeWebhookKey = async () => {
     try {
       const {
@@ -124,7 +127,9 @@ function WorkflowJobTemplateForm({
     }
   };
 
+  let initialWebhookKey = webhook_key;
   const initialWebhookCredential = template?.summary_fields?.webhook_credential;
+
   const storeWebhookValues = (form, webhookServiceValue) => {
     if (
       webhookServiceValue === form.initialValues.webhook_service ||
@@ -135,12 +140,17 @@ function WorkflowJobTemplateForm({
         form.initialValues.webhook_credential
       );
       setWebhookCredential(initialWebhookCredential);
+
       form.setFieldValue('webhook_url', form.initialValues.webhook_url);
+
       form.setFieldValue('webhook_service', form.initialValues.webhook_service);
+      setWebHookService(form.initialValues.webhook_service);
+
       setWebHookKey(initialWebhookKey);
     } else {
       form.setFieldValue('webhook_credential', null);
       setWebhookCredential(null);
+
       form.setFieldValue(
         'webhook_url',
         `${urlOrigin}/api/v2/workflow_job_templates/${template.id}/${webhookServiceValue}/`
@@ -232,36 +242,37 @@ function WorkflowJobTemplateForm({
               {({ form }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
-                  onBlur={() => form.setFieldTouched('organization')}
                   onChange={value => {
                     form.setFieldValue('organization', value?.id || null);
                     setOrganization(value);
                   }}
                   value={organization}
-                  isValid={
-                    !(form.touched.organization || form.errors.organization)
-                  }
-                  touched={form.touched.organization}
-                  error={form.errors.organization}
+                  isValid={!form.errors.organization}
                 />
               )}
             </Field>
             <Field name="inventory">
               {({ form }) => (
-                <InventoryLookup
-                  value={inventory}
-                  tooltip={i18n._(
-                    t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
-                  )}
-                  isValid={!(form.touched.inventory || form.errors.inventory)}
-                  helperTextInvalid={form.errors.inventory}
-                  onChange={value => {
-                    form.setFieldValue('inventory', value?.id || null);
-                    setInventory(value);
-                    form.setFieldValue('organizationId', value?.organization);
-                  }}
-                  error={form.errors.inventory}
-                />
+                <FormGroup
+                  label={i18n._(t`Inventory`)}
+                  fieldId="wfjt-inventory"
+                >
+                  <FieldTooltip
+                    content={i18n._(
+                      t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
+                    )}
+                  />
+                  <InventoryLookup
+                    value={inventory}
+                    isValid={!form.errors.inventory}
+                    helperTextInvalid={form.errors.inventory}
+                    onChange={value => {
+                      form.setFieldValue('inventory', value?.id || null);
+                      setInventory(value);
+                      form.setFieldValue('organizationId', value?.organization);
+                    }}
+                  />
+                </FormGroup>
               )}
             </Field>
             <FormField
@@ -459,12 +470,7 @@ function WorkflowJobTemplateForm({
                         );
                         setWebhookCredential(value);
                       }}
-                      isValid={
-                        !(
-                          form.touched.webhook_credential ||
-                          form.errors.webhook_credential
-                        )
-                      }
+                      isValid={!form.errors.webhook_credential}
                       helperTextInvalid={form.errors.webhook_credential}
                       value={webhookCredential}
                     />
@@ -473,7 +479,7 @@ function WorkflowJobTemplateForm({
               )}
             </FormColumnLayout>
           )}
-          <FormSubmitError error={submitError} />
+          {submitError && <FormSubmitError error={submitError} />}
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}

From b055aad64197af5ffbf778c13d6c2c54499a77f3 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 2 Mar 2020 14:48:44 -0500
Subject: [PATCH 11/13] Adds error handling test to add and edit form. Updates
 Form component

---
 .../src/api/models/WorkflowJobTemplates.js    |  2 +-
 .../components/Lookup/CredentialLookup.jsx    |  1 +
 awx/ui_next/src/screens/Template/Template.jsx | 54 ++++++-----
 .../src/screens/Template/Templates.jsx        |  5 +-
 .../screens/Template/WorkflowJobTemplate.jsx  | 10 --
 .../WorkflowJobTemplateAdd.jsx                |  2 +-
 .../WorkflowJobTemplateAdd.test.jsx           | 92 ++++++++++++-------
 .../WorkflowJobTemplateDetail.jsx             |  2 +-
 .../WorkflowJobTemplateEdit.jsx               |  4 +-
 .../WorkflowJobTemplateEdit.test.jsx          | 56 ++++++++---
 .../shared/WorkflowJobTemplateForm.jsx        | 58 ++++++------
 .../shared/WorkflowJobTemplateForm.test.jsx   | 60 ++++++++----
 12 files changed, 216 insertions(+), 130 deletions(-)

diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index eec62cedfc..a71fe68cbc 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -48,7 +48,7 @@ class WorkflowJobTemplates extends Base {
 
   readScheduleList(id, params) {
     return this.http.get(`${this.baseUrl}${id}/schedules/`, {
-      params
+      params,
     });
   }
 }
diff --git a/awx/ui_next/src/components/Lookup/CredentialLookup.jsx b/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
index 3f3221adeb..37f8a2e3bb 100644
--- a/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/CredentialLookup.jsx
@@ -100,6 +100,7 @@ function CredentialLookup({
               },
             ]}
             readOnly={!canDelete}
+            name="credential"
             selectItem={item => dispatch({ type: 'SELECT_ITEM', item })}
             deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
           />
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 6fe466482a..61f63e70e4 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -221,36 +221,34 @@ class Template extends Component {
                 <JobList defaultParams={{ job__job_template: template.id }} />
               </Route>
             )}
-          {template?.id && (
-            <Route path="/templates/:templateType/:id/completed_jobs">
-              <JobList defaultParams={{ job__job_template: template.id }} />
-            </Route>
-          )}
-          {template && (
+            {template && (
+              <Route
+                path="/templates/:templateType/:id/schedules"
+                render={() => (
+                  <ScheduleList loadSchedules={this.loadSchedules} />
+                )}
+              />
+            )}
             <Route
-              path="/templates/:templateType/:id/schedules"
-              render={() => <ScheduleList loadSchedules={this.loadSchedules} />}
+              key="not-found"
+              path="*"
+              render={() =>
+                !hasContentLoading && (
+                  <ContentError isNotFound>
+                    {match.params.id && (
+                      <Link
+                        to={`/templates/${match.params.templateType}/${match.params.id}/details`}
+                      >
+                        {i18n._(`View Template Details`)}
+                      </Link>
+                    )}
+                  </ContentError>
+                )
+              }
             />
-          )}
-          <Route
-            key="not-found"
-            path="*"
-            render={() =>
-              !hasContentLoading && (
-                <ContentError isNotFound>
-                  {match.params.id && (
-                    <Link
-                      to={`/templates/${match.params.templateType}/${match.params.id}/details`}
-                    >
-                      {i18n._(`View Template Details`)}
-                    </Link>
-                  )}
-                </ContentError>
-              )
-            }
-          />
-        </Switch>
-      </Card>
+          </Switch>
+        </Card>
+      </PageSection>
     );
   }
 }
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index 97b86ebb84..f6572a54ab 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -21,7 +21,7 @@ class Templates extends Component {
         '/templates': i18n._(t`Templates`),
         '/templates/job_template/add': i18n._(t`Create New Job Template`),
         '/templates/workflow_job_template/add': i18n._(
-          t`Create New Workflow Job Template`
+          t`Create New Workflow Template`
         ),
       },
     };
@@ -35,6 +35,9 @@ class Templates extends Component {
     const breadcrumbConfig = {
       '/templates': i18n._(t`Templates`),
       '/templates/job_template/add': i18n._(t`Create New Job Template`),
+      '/templates/workflow_job_template/add': i18n._(
+        t`Create New Workflow Template`
+      ),
       [`/templates/${template.type}/${template.id}`]: `${template.name}`,
       [`/templates/${template.type}/${template.id}/details`]: i18n._(
         t`Details`
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 35e0336d36..6c63e16ab0 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -186,16 +186,6 @@ class WorkflowJobTemplate extends Component {
                 )}
               />
             )}
-            {template?.id && (
-              <Route path="/templates/workflow_job_template/:id/completed_jobs">
-                <JobList
-                  defaultParams={{
-                    workflow_job__workflow_job_template: template.id,
-                  }}
-                />
-              </Route>
-            )}
-
             {template?.id && (
               <Route path="/templates/workflow_job_template/:id/completed_jobs">
                 <JobList
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
index 05d68a1b6e..c1efe45572 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -17,7 +17,7 @@ function WorkflowJobTemplateAdd() {
       const {
         data: { id },
       } = await WorkflowJobTemplatesAPI.create(remainingValues);
-      await submitLabels(id, labels, organizationId);
+      await Promise.all(await submitLabels(id, labels, organizationId));
       history.push(`/templates/workflow_job_template/${id}/details`);
     } catch (err) {
       setFormSubmitError(err);
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
index 65161efb0f..e20c216523 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -1,43 +1,60 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { act } from 'react-dom/test-utils';
-import { WorkflowJobTemplatesAPI } from '@api';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI, LabelsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { createMemoryHistory } from 'history';
 
 import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
 
-jest.mock('@api');
+jest.mock('@api/models/WorkflowJobTemplates');
+jest.mock('@api/models/Organizations');
+jest.mock('@api/models/Labels');
+jest.mock('@api/models/Inventories');
 
 describe('<WorkflowJobTemplateAdd/>', () => {
   let wrapper;
   let history;
   beforeEach(async () => {
     WorkflowJobTemplatesAPI.create.mockResolvedValue({ data: { id: 1 } });
+    OrganizationsAPI.read.mockResolvedValue({ results: [{ id: 1 }] });
+    LabelsAPI.read.mockResolvedValue({
+      data: {
+        results: [
+          { name: 'Label 1', id: 1 },
+          { name: 'Label 2', id: 2 },
+          { name: 'Label 3', id: 3 },
+        ],
+      },
+    });
+
     await act(async () => {
       history = createMemoryHistory({
         initialEntries: ['/templates/workflow_job_template/add'],
       });
-      wrapper = mountWithContexts(
-        <Route
-          path="/templates/workflow_job_template/add"
-          component={() => <WorkflowJobTemplateAdd />}
-        />,
-        {
-          context: {
-            router: {
-              history,
-              route: {
-                location: history.location,
+      await act(async () => {
+        wrapper = await mountWithContexts(
+          <Route
+            path="/templates/workflow_job_template/add"
+            component={() => <WorkflowJobTemplateAdd />}
+          />,
+          {
+            context: {
+              router: {
+                history,
+                route: {
+                  location: history.location,
+                },
               },
             },
-          },
-        }
-      );
+          }
+        );
+      });
     });
   });
   afterEach(async () => {
     wrapper.unmount();
+    jest.clearAllMocks();
   });
 
   test('initially renders successfully', async () => {
@@ -67,28 +84,39 @@ describe('<WorkflowJobTemplateAdd/>', () => {
 
   test('throwing error renders FormSubmitError component', async () => {
     const error = new Error('oops');
-    WorkflowJobTemplatesAPI.create.mockImplementation(() =>
-      Promise.reject(error)
-    );
+    WorkflowJobTemplatesAPI.create.mockRejectedValue(error);
     await act(async () => {
-      await wrapper.find('WorkflowJobTemplateForm').prop('handleSubmit')({
-        id: 6,
-        name: 'Alex',
-        description: 'Apollo and Athena',
-        inventory: { id: 1, name: 'Inventory 1' },
-        organization: 2,
-        scm_branch: 'master',
-        limit: '5000',
-        variables: '---',
+      wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
+        name: 'Foo',
       });
     });
-    expect(wrapper.find('ContentError').length).toBe(0);
-    expect(wrapper.length).toBe(1);
+    expect(WorkflowJobTemplatesAPI.create).toHaveBeenCalled();
     wrapper.update();
-    expect(WorkflowJobTemplatesAPI.create).toBeCalled();
-    expect(wrapper.find('ContentError').length).toBe(1);
     expect(wrapper.find('WorkflowJobTemplateForm').prop('submitError')).toEqual(
       error
     );
   });
+
+  test('throwing error prevents navigation away from form', async () => {
+    OrganizationsAPI.read.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'get',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    WorkflowJobTemplatesAPI.update.mockResolvedValue();
+
+    await act(async () => {
+      await wrapper.find('Button[aria-label="Save"]').simulate('click');
+    });
+    expect(wrapper.find('WorkflowJobTemplateForm').length).toBe(1);
+    expect(OrganizationsAPI.read).toBeCalled();
+    expect(history.location.pathname).toBe(
+      '/templates/workflow_job_template/add'
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index f39035286a..d528013def 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -58,7 +58,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
       )}
       {template.webhook_service && (
         <TextListItem component={TextListItemVariants.li}>
-          {i18n._(t`- Webhooks`)}
+          {i18n._(t`- Enable Webhook`)}
         </TextListItem>
       )}
     </TextList>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
index 6c9356e70d..b958ff9ff4 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -13,7 +13,9 @@ function WorkflowJobTemplateEdit({ template, webhook_key }) {
   const handleSubmit = async values => {
     const { labels, ...remainingValues } = values;
     try {
-      await submitLabels(labels, values.organization, template.organization);
+      await Promise.all(
+        await submitLabels(labels, values.organization, template.organization)
+      );
       await WorkflowJobTemplatesAPI.update(template.id, remainingValues);
       history.push(`/templates/workflow_job_template/${template.id}/details`);
     } catch (err) {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index f38fe2134b..648f5caa4c 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { act } from 'react-dom/test-utils';
-import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI, LabelsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { createMemoryHistory } from 'history';
 import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
 
 jest.mock('@api/models/WorkflowJobTemplates');
+jest.mock('@api/models/Labels');
 jest.mock('@api/models/Organizations');
+jest.mock('@api/models/Inventories');
 
 const mockTemplate = {
   id: 6,
@@ -27,8 +29,14 @@ const mockTemplate = {
 describe('<WorkflowJobTemplateEdit/>', () => {
   let wrapper;
   let history;
-
   beforeEach(async () => {
+    LabelsAPI.read.mockResolvedValue({
+      data: {
+        results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+      },
+    });
+    OrganizationsAPI.read.mockResolvedValue({ results: [{ id: 1 }] });
+
     await act(async () => {
       history = createMemoryHistory({
         initialEntries: ['/templates/workflow_job_template/6/edit'],
@@ -93,7 +101,6 @@ describe('<WorkflowJobTemplateEdit/>', () => {
       id: 1,
     });
     wrapper.update();
-
     await expect(WorkflowJobTemplatesAPI.associateLabel).toBeCalledTimes(1);
   });
 
@@ -108,7 +115,6 @@ describe('<WorkflowJobTemplateEdit/>', () => {
 
   test('throwing error renders FormSubmitError component', async () => {
     const error = new Error('oops');
-    OrganizationsAPI.read.mockResolvedValue({ results: [{ id: 1 }] });
     WorkflowJobTemplatesAPI.update.mockRejectedValue(error);
     await act(async () => {
       wrapper.find('Button[aria-label="Save"]').simulate('click');
@@ -120,13 +126,26 @@ describe('<WorkflowJobTemplateEdit/>', () => {
     );
   });
 
-  test('throwing error prevents form submission', () => {
-    OrganizationsAPI.read.mockRejectedValue(new Error('An error occurred'));
-    WorkflowJobTemplatesAPI.update.mockResolvedValue();
+  test('throwing error prevents form submission', async () => {
+    const templateWithoutOrg = {
+      id: 6,
+      name: 'Foo',
+      description: 'Foo description',
+      summary_fields: {
+        inventory: { id: 1, name: 'Inventory 1' },
+        labels: {
+          results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+        },
+      },
+      scm_branch: 'devel',
+      limit: '5000',
+      variables: '---',
+    };
 
-    act(() => {
-      wrapper = mountWithContexts(
-        <WorkflowJobTemplateEdit template={mockTemplate} />,
+    let newWrapper;
+    await act(async () => {
+      newWrapper = await mountWithContexts(
+        <WorkflowJobTemplateEdit template={templateWithoutOrg} />,
         {
           context: {
             router: {
@@ -136,9 +155,22 @@ describe('<WorkflowJobTemplateEdit/>', () => {
         }
       );
     });
-    wrapper.find('Button[aria-label="Save"]').simulate('click');
+    OrganizationsAPI.read.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'get',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    WorkflowJobTemplatesAPI.update.mockResolvedValue();
 
-    expect(wrapper.find('WorkflowJobTemplateForm').length).toBe(1);
+    await act(async () => {
+      await newWrapper.find('Button[aria-label="Save"]').simulate('click');
+    });
+    expect(newWrapper.find('WorkflowJobTemplateForm').length).toBe(1);
     expect(OrganizationsAPI.read).toBeCalled();
     expect(WorkflowJobTemplatesAPI.update).not.toBeCalled();
     expect(history.location.pathname).toBe(
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 7ebea06f9a..323010ce34 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -49,12 +49,15 @@ function WorkflowJobTemplateForm({
   submitError,
 }) {
   const urlOrigin = window.location.origin;
-
   const { id } = useParams();
   const wfjtAddMatch = useRouteMatch('/templates/workflow_job_template/add');
 
   const [hasContentError, setContentError] = useState(null);
-
+  const [webhook_url, setWebhookUrl] = useState(
+    template?.related?.webhook_receiver
+      ? `${urlOrigin}${template.related.webhook_receiver}`
+      : ''
+  );
   const [inventory, setInventory] = useState(
     template?.summary_fields?.inventory || null
   );
@@ -141,8 +144,11 @@ function WorkflowJobTemplateForm({
       );
       setWebhookCredential(initialWebhookCredential);
 
-      form.setFieldValue('webhook_url', form.initialValues.webhook_url);
-
+      setWebhookUrl(
+        template?.related?.webhook_receiver
+          ? `${urlOrigin}${template.related.webhook_receiver}`
+          : ''
+      );
       form.setFieldValue('webhook_service', form.initialValues.webhook_service);
       setWebHookService(form.initialValues.webhook_service);
 
@@ -151,8 +157,7 @@ function WorkflowJobTemplateForm({
       form.setFieldValue('webhook_credential', null);
       setWebhookCredential(null);
 
-      form.setFieldValue(
-        'webhook_url',
+      setWebhookUrl(
         `${urlOrigin}/api/v2/workflow_job_templates/${template.id}/${webhookServiceValue}/`
       );
 
@@ -171,7 +176,7 @@ function WorkflowJobTemplateForm({
       initialWebhookKey = webhookKey;
       form.setFieldValue('webhook_credential', null);
       form.setFieldValue('webhook_service', '');
-      form.setFieldValue('webhook_url', '');
+      setWebhookUrl('');
       setWebHookService('');
       setWebHookKey('');
     } else {
@@ -203,11 +208,8 @@ function WorkflowJobTemplateForm({
         labels: template.summary_fields?.labels?.results || [],
         extra_vars: template.variables || '---',
         limit: template.limit || '',
-        scmBranch: template.scm_branch || '',
+        scm_branch: template.scm_branch || '',
         allow_simultaneous: template.allow_simultaneous || false,
-        webhook_url:
-          template?.related?.webhook_receiver &&
-          `${urlOrigin}${template?.related?.webhook_receiver}`,
         webhook_credential:
           template?.summary_fields?.webhook_credential?.id || null,
         webhook_service: template.webhook_service || '',
@@ -290,8 +292,8 @@ function WorkflowJobTemplateForm({
               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-scmBranch"
-              name="scmBranch"
+              id="wfjt-scm_branch"
+              name="scm_branch"
             />
           </FormColumnLayout>
           <FormFullWidthLayout>
@@ -333,17 +335,13 @@ function WorkflowJobTemplateForm({
             isInline
             label={i18n._(t`Options`)}
           >
-            <Field
-              id="wfjt-webhooks"
-              name="hasWebhooks"
-              label={i18n._(t`Webhooks`)}
-            >
+            <Field id="wfjt-webhooks" name="hasWebhooks">
               {({ form }) => (
                 <Checkbox
-                  aria-label={i18n._(t`Webhooks`)}
+                  aria-label={i18n._(t`Enable Webhook`)}
                   label={
                     <span>
-                      {i18n._(t`Webhooks`)}
+                      {i18n._(t`Enable Webhook`)}
                       &nbsp;
                       <FieldTooltip
                         content={i18n._(
@@ -408,16 +406,24 @@ function WorkflowJobTemplateForm({
               </Field>
               {!wfjtAddMatch && (
                 <>
-                  <FormField
+                  <FormGroup
                     type="text"
+                    fieldId="wfjt-webhookURL"
                     label={i18n._(t`Webhook URL`)}
                     id="wfjt-webhook-url"
                     name="webhook_url"
-                    tooltip={i18n._(
-                      t`Webhook services can launch jobs with this job template by making a POST request to this URL.`
-                    )}
-                    isReadOnly
-                  />
+                  >
+                    <FieldTooltip
+                      content={i18n._(
+                        t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`
+                      )}
+                    />
+                    <TextInput
+                      aria-label={i18n._(t`Webhook URL`)}
+                      value={webhook_url}
+                      isReadOnly
+                    />
+                  </FormGroup>
                   <Field>
                     {({ form }) => (
                       <FormGroup
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
index 02aad9ef20..904ac78204 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -6,13 +6,17 @@ import { sleep } from '@testUtils/testUtils';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
-import { WorkflowJobTemplatesAPI } from '@api';
+import {
+  WorkflowJobTemplatesAPI,
+  LabelsAPI,
+  OrganizationsAPI,
+  InventoriesAPI,
+} from '@api';
 
 jest.mock('@api/models/WorkflowJobTemplates');
-
-WorkflowJobTemplatesAPI.updateWebhookKey.mockResolvedValue({
-  data: { webhook_key: 'sdafdghjkl2345678ionbvcxz' },
-});
+jest.mock('@api/models/Labels');
+jest.mock('@api/models/Organizations');
+jest.mock('@api/models/Inventories');
 
 describe('<WorkflowJobTemplateForm/>', () => {
   let wrapper;
@@ -38,12 +42,31 @@ describe('<WorkflowJobTemplateForm/>', () => {
     },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    WorkflowJobTemplatesAPI.updateWebhookKey.mockResolvedValue({
+      data: { webhook_key: 'sdafdghjkl2345678ionbvcxz' },
+    });
+    LabelsAPI.read.mockResolvedValue({
+      data: {
+        results: [
+          { name: 'Label 1', id: 1 },
+          { name: 'Label 2', id: 2 },
+          { name: 'Label 3', id: 3 },
+        ],
+      },
+    });
+    OrganizationsAPI.read.mockResolvedValue({
+      results: [{ id: 1 }, { id: 2 }],
+    });
+    InventoriesAPI.read.mockResolvedValue({
+      results: [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }],
+    });
+
     history = createMemoryHistory({
       initialEntries: ['/templates/workflow_job_template/6/edit'],
     });
-    act(() => {
-      wrapper = mountWithContexts(
+    await act(async () => {
+      wrapper = await mountWithContexts(
         <Route
           path="/templates/workflow_job_template/:id/edit"
           component={() => (
@@ -86,7 +109,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
       'Field[name="organization"]',
       'Field[name="inventory"]',
       'FormField[name="limit"]',
-      'FormField[name="scmBranch"]',
+      'FormField[name="scm_branch"]',
       'Field[name="labels"]',
       'VariablesField',
     ];
@@ -108,8 +131,8 @@ describe('<WorkflowJobTemplateForm/>', () => {
       },
       { element: 'wfjt-limit', value: { value: 1234567890, name: 'limit' } },
       {
-        element: 'wfjt-scmBranch',
-        value: { value: 'new branch', name: 'scmBranch' },
+        element: 'wfjt-scm_branch',
+        value: { value: 'new branch', name: 'scm_branch' },
       },
     ];
     const changeInputs = async ({ element, value }) => {
@@ -122,7 +145,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
       inputsToChange.map(input => changeInputs(input));
 
       wrapper.find('LabelSelect').invoke('onChange')([
-        { name: 'new label', id: 5 },
+        { name: 'Label 3', id: 3 },
         { name: 'Label 1', id: 1 },
         { name: 'Label 2', id: 2 },
       ]);
@@ -148,13 +171,16 @@ describe('<WorkflowJobTemplateForm/>', () => {
 
   test('webhooks and enable concurrent jobs functions properly', async () => {
     act(() => {
-      wrapper.find('Checkbox[aria-label="Webhooks"]').invoke('onChange')(true, {
-        currentTarget: { value: true, type: 'change', checked: true },
-      });
+      wrapper.find('Checkbox[aria-label="Enable Webhook"]').invoke('onChange')(
+        true,
+        {
+          currentTarget: { value: true, type: 'change', checked: true },
+        }
+      );
     });
     wrapper.update();
     expect(
-      wrapper.find('Checkbox[aria-label="Webhooks"]').prop('isChecked')
+      wrapper.find('Checkbox[aria-label="Enable Webhook"]').prop('isChecked')
     ).toBe(true);
 
     expect(
@@ -171,7 +197,7 @@ describe('<WorkflowJobTemplateForm/>', () => {
     );
     expect(WorkflowJobTemplatesAPI.updateWebhookKey).toBeCalledWith('6');
     expect(
-      wrapper.find('TextInputBase[name="webhook_url"]').prop('value')
+      wrapper.find('TextInputBase[aria-label="Webhook URL"]').prop('value')
     ).toContain('/api/v2/workflow_job_templates/57/gitlab/');
 
     wrapper.update();

From 4709f57f4610dcef506dca18282636e0b3f3118f Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 3 Mar 2020 11:56:52 -0500
Subject: [PATCH 12/13] Updates tests to a real error.

---
 .../WorkflowJobTemplateAdd.test.jsx           | 28 ++++++++++++-------
 .../WorkflowJobTemplateEdit.test.jsx          | 28 ++++++++++++-------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
index e20c216523..7a4c11831c 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -83,7 +83,16 @@ describe('<WorkflowJobTemplateAdd/>', () => {
   });
 
   test('throwing error renders FormSubmitError component', async () => {
-    const error = new Error('oops');
+    const error = {
+      response: {
+        config: {
+          method: 'post',
+          url: '/api/v2/workflow_job_templates/',
+        },
+        data: { detail: 'An error occurred' },
+      },
+    };
+
     WorkflowJobTemplatesAPI.create.mockRejectedValue(error);
     await act(async () => {
       wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
@@ -98,16 +107,15 @@ describe('<WorkflowJobTemplateAdd/>', () => {
   });
 
   test('throwing error prevents navigation away from form', async () => {
-    OrganizationsAPI.read.mockRejectedValue(
-      new Error({
-        response: {
-          config: {
-            method: 'get',
-          },
-          data: 'An error occurred',
+    OrganizationsAPI.read.mockRejectedValue({
+      response: {
+        config: {
+          method: 'get',
+          url: '/api/v2/organizations/',
         },
-      })
-    );
+        data: 'An error occurred',
+      },
+    });
     WorkflowJobTemplatesAPI.update.mockResolvedValue();
 
     await act(async () => {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
index 648f5caa4c..49475d71f8 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -114,7 +114,15 @@ describe('<WorkflowJobTemplateEdit/>', () => {
   });
 
   test('throwing error renders FormSubmitError component', async () => {
-    const error = new Error('oops');
+    const error = {
+      response: {
+        config: {
+          method: 'patch',
+          url: '/api/v2/workflow_job_templates/',
+        },
+        data: { detail: 'An error occurred' },
+      },
+    };
     WorkflowJobTemplatesAPI.update.mockRejectedValue(error);
     await act(async () => {
       wrapper.find('Button[aria-label="Save"]').simulate('click');
@@ -155,16 +163,16 @@ describe('<WorkflowJobTemplateEdit/>', () => {
         }
       );
     });
-    OrganizationsAPI.read.mockRejectedValue(
-      new Error({
-        response: {
-          config: {
-            method: 'get',
-          },
-          data: 'An error occurred',
+    OrganizationsAPI.read.mockRejectedValue({
+      response: {
+        config: {
+          method: 'get',
+          url: '/api/v2/organizations/',
         },
-      })
-    );
+        data: { detail: 'An error occurred' },
+      },
+    });
+
     WorkflowJobTemplatesAPI.update.mockResolvedValue();
 
     await act(async () => {

From 8227054d116dd58d715447ac8cd64daed1503308 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 4 Feb 2020 16:30:06 -0500
Subject: [PATCH 13/13] Adds WorkflowJobTemplate Add and Edit form and
 functionality.

Fields work and forms save

Adds Webhook form fields and tooltip to VariablesField component

Alpha order

Fixes contentLoading issue in PR and enables Launch on JT List

Adds page section to fix render issue

Adds subform restore functionality and addresses PR issues

Adds pageSection to jt add form and fixes other PR issues

-Fixes spelling error on WFJTDetail
-Adds page section to JT Add Form to fix styling issue
-Adds spacing between functions
-Fixes form submission error by allowing state to handle the lookups while formik
only handles their ids.

Fixes styling issues, navigation, props, and adds useRequest hook
-Add functionality to remove chips from look up fields
-Removes uncessary custome styling from
-Removes uncessary Form Group wrappers
-Adds internationalization to webhook key string.
-Adds field level error handling
-updates tests
-Adds initial null value to form submit error

Adds error handling to submit labels, prevents uncessary api call

The unecessary api call is for the webhook credential id.  If there is no
webhook service we do not want the api to make a call for get the webhook credential
type id.

Adds error handling test to add and edit form. Updates Form component

Updates tests to a real error.

Fixes extra vars bug
---
 .../src/screens/Template/shared/WorkflowJobTemplateForm.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
index 323010ce34..770f665982 100644
--- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -206,7 +206,7 @@ function WorkflowJobTemplateForm({
         inventory: template?.summary_fields?.inventory?.id || null,
         organization: template?.summary_fields?.organization?.id || null,
         labels: template.summary_fields?.labels?.results || [],
-        extra_vars: template.variables || '---',
+        extra_vars: template.extra_vars || '---',
         limit: template.limit || '',
         scm_branch: template.scm_branch || '',
         allow_simultaneous: template.allow_simultaneous || false,