From 58c06d5aeab5943f7632d292e7ed31a8fdbcf393 Mon Sep 17 00:00:00 2001
From: root <root@ip-172-31-10-22.us-west-2.compute.internal>
Date: Sun, 23 Feb 2020 14:58:47 +0000
Subject: [PATCH 01/48] fixed precedence on ansible.cfg

---
 awx/main/utils/ansible.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/main/utils/ansible.py b/awx/main/utils/ansible.py
index fa15c47ab1..91b117ae5d 100644
--- a/awx/main/utils/ansible.py
+++ b/awx/main/utils/ansible.py
@@ -106,7 +106,7 @@ def could_be_inventory(project_path, dir_path, filename):
 def read_ansible_config(project_path, variables_of_interest):
     fnames = ['/etc/ansible/ansible.cfg']
     if project_path:
-        fnames.insert(0, os.path.join(project_path, 'ansible.cfg'))
+        fnames.insert(1, os.path.join(project_path, 'ansible.cfg'))
     values = {}
     try:
         parser = ConfigParser()

From 350046d495c9e2d815993b04205af64d01df37f3 Mon Sep 17 00:00:00 2001
From: gamuniz <root@ip-172-31-10-22.us-west-2.compute.internal>
Date: Wed, 26 Feb 2020 14:28:22 +0000
Subject: [PATCH 02/48] changed syntax as insert isn't required

---
 awx/main/utils/ansible.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/main/utils/ansible.py b/awx/main/utils/ansible.py
index 91b117ae5d..18011504b9 100644
--- a/awx/main/utils/ansible.py
+++ b/awx/main/utils/ansible.py
@@ -106,7 +106,7 @@ def could_be_inventory(project_path, dir_path, filename):
 def read_ansible_config(project_path, variables_of_interest):
     fnames = ['/etc/ansible/ansible.cfg']
     if project_path:
-        fnames.insert(1, os.path.join(project_path, 'ansible.cfg'))
+        fnames.append(os.path.join(project_path, 'ansible.cfg'))
     values = {}
     try:
         parser = ConfigParser()

From 07807c2decd82e01dc0a2047d21aba92114555b0 Mon Sep 17 00:00:00 2001
From: AlanCoding <arominge@redhat.com>
Date: Thu, 27 Feb 2020 14:37:29 -0500
Subject: [PATCH 03/48] Fail on launch for scenario where job cannot run

---
 awx/api/serializers.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/awx/api/serializers.py b/awx/api/serializers.py
index 93124ea19e..f4a61f0c43 100644
--- a/awx/api/serializers.py
+++ b/awx/api/serializers.py
@@ -4054,6 +4054,13 @@ class JobLaunchSerializer(BaseSerializer):
             **attrs)
         self._ignored_fields = rejected
 
+        # Basic validation - cannot run a playbook without a playbook
+        if not template.project:
+            errors['project'] = _("A project is required to run a job.")
+        elif template.project.status in ('error', 'failed'):
+            errors['playbook'] = _("Missing a revision to run due to failed project update.")
+
+        # cannot run a playbook without an inventory
         if template.inventory and template.inventory.pending_deletion is True:
             errors['inventory'] = _("The inventory associated with this Job Template is being deleted.")
         elif 'inventory' in accepted and accepted['inventory'].pending_deletion:

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 04/48] 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 05/48] 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 06/48] 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 07/48] 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 08/48] 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 09/48] 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 10/48] 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 11/48] 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 12/48] 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 13/48] 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 14/48] 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 15/48] 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 2b48e439466a34bb223e8487bf62130be5fbf906 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 2 Mar 2020 23:29:49 -0500
Subject: [PATCH 16/48] Add Inventory Group Host list

---
 awx/ui_next/src/api/models/Groups.js          |   6 +
 awx/ui_next/src/api/models/Inventories.js     |   4 +
 .../src/screens/Inventory/Inventories.jsx     |  10 +-
 .../InventoryGroup/InventoryGroup.jsx         |   8 +
 .../InventoryGroupHosts/AddHostDropdown.jsx   |  58 +++
 .../AddHostDropdown.test.jsx                  |  33 ++
 .../InventoryGroupHostList.jsx                | 162 ++++++++
 .../InventoryGroupHostList.test.jsx           | 164 ++++++++
 .../InventoryGroupHostListItem.jsx            |  98 +++++
 .../InventoryGroupHostListItem.test.jsx       |  57 +++
 .../InventoryGroupHosts.jsx                   |  16 +
 .../InventoryGroupHosts.test.jsx              |  27 ++
 .../Inventory/InventoryGroupHosts/index.js    |   1 +
 .../screens/Inventory/shared/data.hosts.json  | 393 ++++++++++++++++++
 14 files changed, 1034 insertions(+), 3 deletions(-)
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryGroupHosts/index.js
 create mode 100644 awx/ui_next/src/screens/Inventory/shared/data.hosts.json

diff --git a/awx/ui_next/src/api/models/Groups.js b/awx/ui_next/src/api/models/Groups.js
index 019ba0ea94..4c19a44572 100644
--- a/awx/ui_next/src/api/models/Groups.js
+++ b/awx/ui_next/src/api/models/Groups.js
@@ -4,6 +4,12 @@ class Groups extends Base {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/groups/';
+
+    this.readAllHosts = this.readAllHosts.bind(this);
+  }
+
+  readAllHosts(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/all_hosts/`, { params });
   }
 }
 
diff --git a/awx/ui_next/src/api/models/Inventories.js b/awx/ui_next/src/api/models/Inventories.js
index 08640173d4..858e7a390a 100644
--- a/awx/ui_next/src/api/models/Inventories.js
+++ b/awx/ui_next/src/api/models/Inventories.js
@@ -35,6 +35,10 @@ class Inventories extends InstanceGroupsMixin(Base) {
     return this.http.options(`${this.baseUrl}${id}/groups/`);
   }
 
+  readHostsOptions(id) {
+    return this.http.options(`${this.baseUrl}${id}/hosts/`);
+  }
+
   promoteGroup(inventoryId, groupId) {
     return this.http.post(`${this.baseUrl}${inventoryId}/groups/`, {
       id: groupId,
diff --git a/awx/ui_next/src/screens/Inventory/Inventories.jsx b/awx/ui_next/src/screens/Inventory/Inventories.jsx
index d7361690f6..d6bfa12f74 100644
--- a/awx/ui_next/src/screens/Inventory/Inventories.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventories.jsx
@@ -32,8 +32,10 @@ class Inventories extends Component {
     if (!inventory) {
       return;
     }
+
     const inventoryKind =
       inventory.kind === 'smart' ? 'smart_inventory' : 'inventory';
+
     const breadcrumbConfig = {
       '/inventories': i18n._(t`Inventories`),
       '/inventories/inventory/add': i18n._(t`Create New Inventory`),
@@ -65,9 +67,7 @@ class Inventories extends Component {
         t`Create New Host`
       ),
       [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
-        nestedResource.id}`]: i18n._(
-        t`${nestedResource && nestedResource.name}`
-      ),
+        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
       [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
         nestedResource.id}/edit`]: i18n._(t`Edit Details`),
       [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
@@ -83,6 +83,10 @@ class Inventories extends Component {
         nestedResource.id}/edit`]: i18n._(t`Edit Details`),
       [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
         nestedResource.id}/details`]: i18n._(t`Group Details`),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}/nested_hosts`]: i18n._(t`Hosts`),
     };
     this.setState({ breadcrumbConfig });
   };
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
index ef5b0a7995..b1d3734a5f 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
@@ -19,6 +19,8 @@ import ContentLoading from '@components/ContentLoading';
 import { TabbedCardHeader } from '@components/Card';
 import InventoryGroupEdit from '../InventoryGroupEdit/InventoryGroupEdit';
 import InventoryGroupDetail from '../InventoryGroupDetail/InventoryGroupDetail';
+import InventoryGroupHosts from '../InventoryGroupHosts';
+
 import { GroupsAPI } from '@api';
 
 function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
@@ -142,6 +144,12 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
             }}
           />,
         ]}
+        <Route
+          key="hosts"
+          path="/inventories/inventory/:id/groups/:groupId/nested_hosts"
+        >
+          <InventoryGroupHosts />
+        </Route>
         <Route
           key="not-found"
           path="*"
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.jsx
new file mode 100644
index 0000000000..e5393aa50d
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { func } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  DropdownToggle,
+} from '@patternfly/react-core';
+
+function AddHostDropdown({ i18n, onAddNew, onAddExisting }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownItems = [
+    <DropdownItem
+      key="add-new"
+      aria-label="add new host"
+      component="button"
+      onClick={onAddNew}
+    >
+      {i18n._(t`Add New Host`)}
+    </DropdownItem>,
+    <DropdownItem
+      key="add-existing"
+      aria-label="add existing host"
+      component="button"
+      onClick={onAddExisting}
+    >
+      {i18n._(t`Add Existing Host`)}
+    </DropdownItem>,
+  ];
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      position={DropdownPosition.right}
+      toggle={
+        <DropdownToggle
+          id="add-host-dropdown"
+          aria-label="add host"
+          isPrimary
+          onToggle={() => setIsOpen(prevState => !prevState)}
+        >
+          {i18n._(t`Add`)}
+        </DropdownToggle>
+      }
+      dropdownItems={dropdownItems}
+    />
+  );
+}
+
+AddHostDropdown.propTypes = {
+  onAddNew: func.isRequired,
+  onAddExisting: func.isRequired,
+};
+
+export default withI18n()(AddHostDropdown);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.test.jsx
new file mode 100644
index 0000000000..c72e505ea2
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/AddHostDropdown.test.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import AddHostDropdown from './AddHostDropdown';
+
+describe('<AddHostDropdown />', () => {
+  let wrapper;
+  let dropdownToggle;
+  const onAddNew = jest.fn();
+  const onAddExisting = jest.fn();
+
+  beforeEach(() => {
+    wrapper = mountWithContexts(
+      <AddHostDropdown onAddNew={onAddNew} onAddExisting={onAddExisting} />
+    );
+    dropdownToggle = wrapper.find('DropdownToggle button');
+  });
+
+  test('should initially render a closed dropdown', () => {
+    expect(wrapper.find('DropdownItem').length).toBe(0);
+  });
+
+  test('should render two dropdown items', () => {
+    dropdownToggle.simulate('click');
+    expect(wrapper.find('DropdownItem').length).toBe(2);
+  });
+
+  test('should close when button re-clicked', () => {
+    dropdownToggle.simulate('click');
+    expect(wrapper.find('DropdownItem').length).toBe(2);
+    dropdownToggle.simulate('click');
+    expect(wrapper.find('DropdownItem').length).toBe(0);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
new file mode 100644
index 0000000000..237c9e5c93
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import { GroupsAPI, InventoriesAPI } from '@api';
+
+import AlertModal from '@components/AlertModal';
+import DataListToolbar from '@components/DataListToolbar';
+import PaginatedDataList from '@components/PaginatedDataList';
+import useRequest from '@util/useRequest';
+import InventoryGroupHostListItem from './InventoryGroupHostListItem';
+import AddHostDropdown from './AddHostDropdown';
+
+const QS_CONFIG = getQSConfig('host', {
+  page: 1,
+  page_size: 20,
+  order_by: 'name',
+});
+
+function InventoryGroupHostList({ i18n }) {
+  const [selected, setSelected] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { id: inventoryId, groupId } = useParams();
+  const location = useLocation();
+  const history = useHistory();
+
+  const {
+    result: { hosts, hostCount, actions },
+    error: contentError,
+    isLoading,
+    request: fetchHosts,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        GroupsAPI.readAllHosts(groupId, params),
+        InventoriesAPI.readHostsOptions(inventoryId),
+      ]);
+
+      return {
+        hosts: response.data.results,
+        hostCount: response.data.count,
+        actions: actionsResponse.data.actions,
+      };
+    }, [groupId, inventoryId, location.search]),
+    {
+      hosts: [],
+      hostCount: 0,
+    }
+  );
+
+  useEffect(() => {
+    fetchHosts();
+  }, [fetchHosts]);
+
+  const handleSelectAll = isSelected => {
+    setSelected(isSelected ? [...hosts] : []);
+  };
+
+  const handleSelect = row => {
+    if (selected.some(s => s.id === row.id)) {
+      setSelected(selected.filter(s => s.id !== row.id));
+    } else {
+      setSelected(selected.concat(row));
+    }
+  };
+
+  const isAllSelected = selected.length > 0 && selected.length === hosts.length;
+  const canAdd =
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+  const addFormUrl = `/inventories/inventory/${inventoryId}/groups/${groupId}/nested_hosts/add`;
+
+  return (
+    <>
+      <PaginatedDataList
+        contentError={contentError}
+        hasContentLoading={isLoading}
+        items={hosts}
+        itemCount={hostCount}
+        pluralizedItemName={i18n._(t`Hosts`)}
+        qsConfig={QS_CONFIG}
+        onRowClick={handleSelect}
+        toolbarSearchColumns={[
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+            isDefault: true,
+          },
+          {
+            name: i18n._(t`Created By (Username)`),
+            key: 'created_by__username',
+          },
+          {
+            name: i18n._(t`Modified By (Username)`),
+            key: 'modified_by__username',
+          },
+        ]}
+        toolbarSortColumns={[
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+          },
+        ]}
+        renderToolbar={props => (
+          <DataListToolbar
+            {...props}
+            showSelectAll
+            isAllSelected={isAllSelected}
+            onSelectAll={handleSelectAll}
+            qsConfig={QS_CONFIG}
+            additionalControls={[
+              ...(canAdd
+                ? [
+                    <AddHostDropdown
+                      onAddExisting={() => setIsModalOpen(true)}
+                      onAddNew={() => history.push(addFormUrl)}
+                    />,
+                  ]
+                : []),
+              // TODO HOST DISASSOCIATE BUTTON
+            ]}
+          />
+        )}
+        renderItem={o => (
+          <InventoryGroupHostListItem
+            key={o.id}
+            host={o}
+            detailUrl={`/inventories/inventory/${inventoryId}/hosts/${o.id}/details`}
+            editUrl={`/inventories/inventory/${inventoryId}/hosts/${o.id}/edit`}
+            isSelected={selected.some(row => row.id === o.id)}
+            onSelect={() => handleSelect(o)}
+          />
+        )}
+        emptyStateControls={
+          canAdd && (
+            <AddHostDropdown
+              onAddExisting={() => setIsModalOpen(true)}
+              onAddNew={() => history.push(addFormUrl)}
+            />
+          )
+        }
+      />
+
+      {/* DISASSOCIATE HOST MODAL PLACEHOLDER */}
+
+      {isModalOpen && (
+        <AlertModal
+          isOpen={isModalOpen}
+          variant="info"
+          title={i18n._(t`Select Hosts`)}
+          onClose={() => setIsModalOpen(false)}
+        >
+          {/* ADD/ASSOCIATE HOST MODAL PLACEHOLDER */}
+          {i18n._(t`Host Select Modal`)}
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+export default withI18n()(InventoryGroupHostList);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx
new file mode 100644
index 0000000000..8345964e40
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { GroupsAPI, InventoriesAPI } from '@api';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import InventoryGroupHostList from './InventoryGroupHostList';
+import mockHosts from '../shared/data.hosts.json';
+
+jest.mock('@api/models/Groups');
+jest.mock('@api/models/Inventories');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    id: 1,
+    groupId: 2,
+  }),
+}));
+
+describe('<InventoryGroupHostList />', () => {
+  let wrapper;
+
+  beforeEach(async () => {
+    GroupsAPI.readAllHosts.mockResolvedValue({
+      data: { ...mockHosts },
+    });
+    InventoriesAPI.readHostsOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHostList />);
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  test('initially renders successfully ', () => {
+    expect(wrapper.find('InventoryGroupHostList').length).toBe(1);
+  });
+
+  test('should fetch inventory group hosts from api and render them in the list', () => {
+    expect(GroupsAPI.readAllHosts).toHaveBeenCalled();
+    expect(InventoriesAPI.readHostsOptions).toHaveBeenCalled();
+    expect(wrapper.find('InventoryGroupHostListItem').length).toBe(3);
+  });
+
+  test('should check and uncheck the row item', async () => {
+    expect(
+      wrapper.find('DataListCheck[id="select-host-2"]').props().checked
+    ).toBe(false);
+    await act(async () => {
+      wrapper.find('DataListCheck[id="select-host-2"]').invoke('onChange')();
+    });
+    wrapper.update();
+    expect(
+      wrapper.find('DataListCheck[id="select-host-2"]').props().checked
+    ).toBe(true);
+    await act(async () => {
+      wrapper.find('DataListCheck[id="select-host-2"]').invoke('onChange')();
+    });
+    wrapper.update();
+    expect(
+      wrapper.find('DataListCheck[id="select-host-2"]').props().checked
+    ).toBe(false);
+  });
+
+  test('should check all row items when select all is checked', async () => {
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toBe(false);
+    });
+    await act(async () => {
+      wrapper.find('Checkbox#select-all').invoke('onChange')(true);
+    });
+    wrapper.update();
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toBe(true);
+    });
+    await act(async () => {
+      wrapper.find('Checkbox#select-all').invoke('onChange')(false);
+    });
+    wrapper.update();
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toBe(false);
+    });
+  });
+
+  test('should show add dropdown button according to permissions', async () => {
+    expect(wrapper.find('AddHostDropdown').length).toBe(1);
+    InventoriesAPI.readHostsOptions.mockResolvedValueOnce({
+      data: {
+        actions: {
+          GET: {},
+        },
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHostList />);
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    expect(wrapper.find('AddHostDropdown').length).toBe(0);
+  });
+
+  test('should show associate host modal when adding an existing host', () => {
+    const dropdownToggle = wrapper.find(
+      'DropdownToggle button[aria-label="add host"]'
+    );
+    dropdownToggle.simulate('click');
+    wrapper
+      .find('DropdownItem[aria-label="add existing host"]')
+      .simulate('click');
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    wrapper.find('ModalBoxCloseButton').simulate('click');
+    expect(wrapper.find('AlertModal').length).toBe(0);
+  });
+
+  test('should navigate to host add form when adding a new host', async () => {
+    GroupsAPI.readAllHosts.mockResolvedValue({
+      data: { ...mockHosts },
+    });
+    InventoriesAPI.readHostsOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+      },
+    });
+    const history = createMemoryHistory();
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHostList />, {
+        context: {
+          router: { history },
+        },
+      });
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    const dropdownToggle = wrapper.find(
+      'DropdownToggle button[aria-label="add host"]'
+    );
+    dropdownToggle.simulate('click');
+    wrapper.find('DropdownItem[aria-label="add new host"]').simulate('click');
+    expect(history.location.pathname).toEqual(
+      '/inventories/inventory/1/groups/2/nested_hosts/add'
+    );
+  });
+
+  test('should show content error when api throws error on initial render', async () => {
+    InventoriesAPI.readHostsOptions.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHostList />);
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx
new file mode 100644
index 0000000000..a234b9597f
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { string, bool, func } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import {
+  Button,
+  DataListAction as _DataListAction,
+  DataListCell,
+  DataListCheck,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Tooltip,
+} from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons';
+import HostToggle from '@components/HostToggle';
+import Sparkline from '@components/Sparkline';
+import { Host } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: min-content 40px;
+`;
+
+function InventoryGroupHostListItem({
+  i18n,
+  detailUrl,
+  editUrl,
+  host,
+  isSelected,
+  onSelect,
+}) {
+  const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
+    ...job,
+    type: 'job',
+  }));
+
+  const labelId = `check-action-${host.id}`;
+
+  return (
+    <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-host-${host.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="name">
+              <Link to={`${detailUrl}`}>
+                <b>{host.name}</b>
+              </Link>
+            </DataListCell>,
+            <DataListCell key="recentJobs">
+              <Sparkline jobs={recentPlaybookJobs} />
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          <HostToggle css="grid-column: 1" host={host} />
+          {host.summary_fields.user_capabilities?.edit && (
+            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+              <Button
+                css="grid-column: 2"
+                variant="plain"
+                component={Link}
+                to={`${editUrl}`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+InventoryGroupHostListItem.propTypes = {
+  detailUrl: string.isRequired,
+  editUrl: string.isRequired,
+  host: Host.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
+export default withI18n()(InventoryGroupHostListItem);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.jsx
new file mode 100644
index 0000000000..830bd5540e
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import InventoryGroupHostListItem from './InventoryGroupHostListItem';
+import mockHosts from '../shared/data.hosts.json';
+
+jest.mock('@api');
+
+describe('<InventoryGroupHostListItem />', () => {
+  let wrapper;
+  const mockHost = mockHosts.results[0];
+
+  beforeEach(() => {
+    wrapper = mountWithContexts(
+      <InventoryGroupHostListItem
+        detailUrl="/host/1"
+        editUrl="/host/1"
+        host={mockHost}
+        isSelected={false}
+        onSelect={() => {}}
+      />
+    );
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('should display expected row item content', () => {
+    expect(
+      wrapper
+        .find('DataListCell')
+        .first()
+        .text()
+    ).toBe('.host-000001.group-00000.dummy');
+    expect(wrapper.find('Sparkline').length).toBe(1);
+    expect(wrapper.find('HostToggle').length).toBe(1);
+  });
+
+  test('edit button shown to users with edit capabilities', () => {
+    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
+  });
+
+  test('edit button hidden from users without edit capabilities', () => {
+    const copyMockHost = Object.assign({}, mockHost);
+    copyMockHost.summary_fields.user_capabilities.edit = false;
+    wrapper = mountWithContexts(
+      <InventoryGroupHostListItem
+        detailUrl="/host/1"
+        editUrl="/host/1"
+        host={mockHost}
+        isSelected={false}
+        onSelect={() => {}}
+      />
+    );
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.jsx
new file mode 100644
index 0000000000..dc3da57781
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import InventoryGroupHostList from './InventoryGroupHostList';
+
+function InventoryGroupHosts() {
+  return (
+    <Switch>
+      {/* Route to InventoryGroupHostAddForm */}
+      <Route path="/inventories/inventory/:id/groups/:groupId/nested_hosts">
+        <InventoryGroupHostList />
+      </Route>
+    </Switch>
+  );
+}
+
+export default InventoryGroupHosts;
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.test.jsx
new file mode 100644
index 0000000000..0a4cecc19d
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.test.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import InventoryGroupHosts from './InventoryGroupHosts';
+
+jest.mock('@api');
+
+describe('<InventoryGroupHosts />', () => {
+  let wrapper;
+
+  test('initially renders successfully', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/inventories/inventory/1/groups/1/nested_hosts'],
+    });
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHosts />, {
+        context: {
+          router: { history, route: { location: history.location } },
+        },
+      });
+    });
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('InventoryGroupHostList').length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/index.js b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/index.js
new file mode 100644
index 0000000000..58e24ac90e
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/index.js
@@ -0,0 +1 @@
+export { default } from './InventoryGroupHosts';
diff --git a/awx/ui_next/src/screens/Inventory/shared/data.hosts.json b/awx/ui_next/src/screens/Inventory/shared/data.hosts.json
new file mode 100644
index 0000000000..07c6ef7d9f
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/shared/data.hosts.json
@@ -0,0 +1,393 @@
+
+{
+  "count": 3,
+  "results": [
+      {
+          "id": 2,
+          "type": "host",
+          "url": "/api/v2/hosts/2/",
+          "related": {
+              "created_by": "/api/v2/users/10/",
+              "modified_by": "/api/v2/users/19/",
+              "variable_data": "/api/v2/hosts/2/variable_data/",
+              "groups": "/api/v2/hosts/2/groups/",
+              "all_groups": "/api/v2/hosts/2/all_groups/",
+              "job_events": "/api/v2/hosts/2/job_events/",
+              "job_host_summaries": "/api/v2/hosts/2/job_host_summaries/",
+              "activity_stream": "/api/v2/hosts/2/activity_stream/",
+              "inventory_sources": "/api/v2/hosts/2/inventory_sources/",
+              "smart_inventories": "/api/v2/hosts/2/smart_inventories/",
+              "ad_hoc_commands": "/api/v2/hosts/2/ad_hoc_commands/",
+              "ad_hoc_command_events": "/api/v2/hosts/2/ad_hoc_command_events/",
+              "insights": "/api/v2/hosts/2/insights/",
+              "ansible_facts": "/api/v2/hosts/2/ansible_facts/",
+              "inventory": "/api/v2/inventories/2/",
+              "last_job": "/api/v2/jobs/236/",
+              "last_job_host_summary": "/api/v2/job_host_summaries/2202/"
+          },
+          "summary_fields": {
+              "inventory": {
+                  "id": 2,
+                  "name": " Inventory 1 Org 0",
+                  "description": "",
+                  "has_active_failures": false,
+                  "total_hosts": 33,
+                  "hosts_with_active_failures": 0,
+                  "total_groups": 4,
+                  "has_inventory_sources": false,
+                  "total_inventory_sources": 0,
+                  "inventory_sources_with_failures": 0,
+                  "organization_id": 2,
+                  "kind": ""
+              },
+              "last_job": {
+                  "id": 236,
+                  "name": " Job Template 1 Project 0",
+                  "description": "",
+                  "finished": "2020-02-26T03:15:21.471439Z",
+                  "status": "successful",
+                  "failed": false,
+                  "job_template_id": 18,
+                  "job_template_name": " Job Template 1 Project 0"
+              },
+              "last_job_host_summary": {
+                  "id": 2202,
+                  "failed": false
+              },
+              "created_by": {
+                  "id": 10,
+                  "username": "user-3",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "modified_by": {
+                  "id": 19,
+                  "username": "all",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "user_capabilities": {
+                  "edit": true,
+                  "delete": true
+              },
+              "groups": {
+                  "count": 2,
+                  "results": [
+                      {
+                          "id": 1,
+                          "name": " Group 1 Inventory 0"
+                      },
+                      {
+                          "id": 2,
+                          "name": " Group 2 Inventory 0"
+                      }
+                  ]
+              },
+              "recent_jobs": [
+                  {
+                      "id": 236,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-26T03:15:21.471439Z"
+                  },
+                  {
+                      "id": 232,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T21:20:33.593789Z"
+                  },
+                  {
+                      "id": 229,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:19:46.364134Z"
+                  },
+                  {
+                      "id": 228,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:18:54.138363Z"
+                  },
+                  {
+                      "id": 225,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T15:55:32.247652Z"
+                  }
+              ]
+          },
+          "created": "2020-02-24T15:10:58.922179Z",
+          "modified": "2020-02-26T21:52:43.428530Z",
+          "name": ".host-000001.group-00000.dummy",
+          "description": "",
+          "inventory": 2,
+          "enabled": false,
+          "instance_id": "",
+          "variables": "",
+          "has_active_failures": false,
+          "has_inventory_sources": false,
+          "last_job": 236,
+          "last_job_host_summary": 2202,
+          "insights_system_id": null,
+          "ansible_facts_modified": null
+      },
+      {
+          "id": 3,
+          "type": "host",
+          "url": "/api/v2/hosts/3/",
+          "related": {
+              "created_by": "/api/v2/users/11/",
+              "modified_by": "/api/v2/users/1/",
+              "variable_data": "/api/v2/hosts/3/variable_data/",
+              "groups": "/api/v2/hosts/3/groups/",
+              "all_groups": "/api/v2/hosts/3/all_groups/",
+              "job_events": "/api/v2/hosts/3/job_events/",
+              "job_host_summaries": "/api/v2/hosts/3/job_host_summaries/",
+              "activity_stream": "/api/v2/hosts/3/activity_stream/",
+              "inventory_sources": "/api/v2/hosts/3/inventory_sources/",
+              "smart_inventories": "/api/v2/hosts/3/smart_inventories/",
+              "ad_hoc_commands": "/api/v2/hosts/3/ad_hoc_commands/",
+              "ad_hoc_command_events": "/api/v2/hosts/3/ad_hoc_command_events/",
+              "insights": "/api/v2/hosts/3/insights/",
+              "ansible_facts": "/api/v2/hosts/3/ansible_facts/",
+              "inventory": "/api/v2/inventories/2/",
+              "last_job": "/api/v2/jobs/236/",
+              "last_job_host_summary": "/api/v2/job_host_summaries/2195/"
+          },
+          "summary_fields": {
+              "inventory": {
+                  "id": 2,
+                  "name": " Inventory 1 Org 0",
+                  "description": "",
+                  "has_active_failures": false,
+                  "total_hosts": 33,
+                  "hosts_with_active_failures": 0,
+                  "total_groups": 4,
+                  "has_inventory_sources": false,
+                  "total_inventory_sources": 0,
+                  "inventory_sources_with_failures": 0,
+                  "organization_id": 2,
+                  "kind": ""
+              },
+              "last_job": {
+                  "id": 236,
+                  "name": " Job Template 1 Project 0",
+                  "description": "",
+                  "finished": "2020-02-26T03:15:21.471439Z",
+                  "status": "successful",
+                  "failed": false,
+                  "job_template_id": 18,
+                  "job_template_name": " Job Template 1 Project 0"
+              },
+              "last_job_host_summary": {
+                  "id": 2195,
+                  "failed": false
+              },
+              "created_by": {
+                  "id": 11,
+                  "username": "user-4",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "modified_by": {
+                  "id": 1,
+                  "username": "admin",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "user_capabilities": {
+                  "edit": true,
+                  "delete": true
+              },
+              "groups": {
+                  "count": 2,
+                  "results": [
+                      {
+                          "id": 1,
+                          "name": " Group 1 Inventory 0"
+                      },
+                      {
+                          "id": 2,
+                          "name": " Group 2 Inventory 0"
+                      }
+                  ]
+              },
+              "recent_jobs": [
+                  {
+                      "id": 236,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-26T03:15:21.471439Z"
+                  },
+                  {
+                      "id": 232,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T21:20:33.593789Z"
+                  },
+                  {
+                      "id": 229,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:19:46.364134Z"
+                  },
+                  {
+                      "id": 228,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:18:54.138363Z"
+                  },
+                  {
+                      "id": 225,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T15:55:32.247652Z"
+                  }
+              ]
+          },
+          "created": "2020-02-24T15:10:58.945113Z",
+          "modified": "2020-02-27T03:43:43.635871Z",
+          "name": ".host-000002.group-00000.dummy",
+          "description": "",
+          "inventory": 2,
+          "enabled": false,
+          "instance_id": "",
+          "variables": "",
+          "has_active_failures": false,
+          "has_inventory_sources": false,
+          "last_job": 236,
+          "last_job_host_summary": 2195,
+          "insights_system_id": null,
+          "ansible_facts_modified": null
+      },
+      {
+          "id": 4,
+          "type": "host",
+          "url": "/api/v2/hosts/4/",
+          "related": {
+              "created_by": "/api/v2/users/12/",
+              "modified_by": "/api/v2/users/1/",
+              "variable_data": "/api/v2/hosts/4/variable_data/",
+              "groups": "/api/v2/hosts/4/groups/",
+              "all_groups": "/api/v2/hosts/4/all_groups/",
+              "job_events": "/api/v2/hosts/4/job_events/",
+              "job_host_summaries": "/api/v2/hosts/4/job_host_summaries/",
+              "activity_stream": "/api/v2/hosts/4/activity_stream/",
+              "inventory_sources": "/api/v2/hosts/4/inventory_sources/",
+              "smart_inventories": "/api/v2/hosts/4/smart_inventories/",
+              "ad_hoc_commands": "/api/v2/hosts/4/ad_hoc_commands/",
+              "ad_hoc_command_events": "/api/v2/hosts/4/ad_hoc_command_events/",
+              "insights": "/api/v2/hosts/4/insights/",
+              "ansible_facts": "/api/v2/hosts/4/ansible_facts/",
+              "inventory": "/api/v2/inventories/2/",
+              "last_job": "/api/v2/jobs/236/",
+              "last_job_host_summary": "/api/v2/job_host_summaries/2192/"
+          },
+          "summary_fields": {
+              "inventory": {
+                  "id": 2,
+                  "name": " Inventory 1 Org 0",
+                  "description": "",
+                  "has_active_failures": false,
+                  "total_hosts": 33,
+                  "hosts_with_active_failures": 0,
+                  "total_groups": 4,
+                  "has_inventory_sources": false,
+                  "total_inventory_sources": 0,
+                  "inventory_sources_with_failures": 0,
+                  "organization_id": 2,
+                  "kind": ""
+              },
+              "last_job": {
+                  "id": 236,
+                  "name": " Job Template 1 Project 0",
+                  "description": "",
+                  "finished": "2020-02-26T03:15:21.471439Z",
+                  "status": "successful",
+                  "failed": false,
+                  "job_template_id": 18,
+                  "job_template_name": " Job Template 1 Project 0"
+              },
+              "last_job_host_summary": {
+                  "id": 2192,
+                  "failed": false
+              },
+              "created_by": {
+                  "id": 12,
+                  "username": "user-5",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "modified_by": {
+                  "id": 1,
+                  "username": "admin",
+                  "first_name": "",
+                  "last_name": ""
+              },
+              "user_capabilities": {
+                  "edit": true,
+                  "delete": true
+              },
+              "groups": {
+                  "count": 2,
+                  "results": [
+                      {
+                          "id": 1,
+                          "name": " Group 1 Inventory 0"
+                      },
+                      {
+                          "id": 2,
+                          "name": " Group 2 Inventory 0"
+                      }
+                  ]
+              },
+              "recent_jobs": [
+                  {
+                      "id": 236,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-26T03:15:21.471439Z"
+                  },
+                  {
+                      "id": 232,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T21:20:33.593789Z"
+                  },
+                  {
+                      "id": 229,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:19:46.364134Z"
+                  },
+                  {
+                      "id": 228,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T16:18:54.138363Z"
+                  },
+                  {
+                      "id": 225,
+                      "name": " Job Template 1 Project 0",
+                      "status": "successful",
+                      "finished": "2020-02-25T15:55:32.247652Z"
+                  }
+              ]
+          },
+          "created": "2020-02-24T15:10:58.962312Z",
+          "modified": "2020-02-27T03:43:45.528882Z",
+          "name": ".host-000003.group-00000.dummy",
+          "description": "",
+          "inventory": 2,
+          "enabled": false,
+          "instance_id": "",
+          "variables": "",
+          "has_active_failures": false,
+          "has_inventory_sources": false,
+          "last_job": 236,
+          "last_job_host_summary": 2192,
+          "insights_system_id": null,
+          "ansible_facts_modified": null
+        }
+    ]
+}

From d5372dae36c89d436211c4027a9ffbc84dea0d58 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Tue, 3 Mar 2020 13:07:03 -0500
Subject: [PATCH 17/48] Upgrade react and react-dom to latest

---
 awx/ui_next/package-lock.json | 20 ++++++++++----------
 awx/ui_next/package.json      |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json
index 75edf45828..7c8b645522 100644
--- a/awx/ui_next/package-lock.json
+++ b/awx/ui_next/package-lock.json
@@ -15370,9 +15370,9 @@
       }
     },
     "react": {
-      "version": "16.10.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.10.2.tgz",
-      "integrity": "sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw==",
+      "version": "16.13.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.0.tgz",
+      "integrity": "sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -15385,20 +15385,20 @@
       "integrity": "sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag=="
     },
     "react-dom": {
-      "version": "16.10.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.10.2.tgz",
-      "integrity": "sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==",
+      "version": "16.13.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz",
+      "integrity": "sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.16.2"
+        "scheduler": "^0.19.0"
       },
       "dependencies": {
         "scheduler": {
-          "version": "0.16.2",
-          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.16.2.tgz",
-          "integrity": "sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg==",
+          "version": "0.19.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.0.tgz",
+          "integrity": "sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==",
           "requires": {
             "loose-envify": "^1.1.0",
             "object-assign": "^4.1.1"
diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json
index e934301d13..cdd79cd2d7 100644
--- a/awx/ui_next/package.json
+++ b/awx/ui_next/package.json
@@ -72,9 +72,9 @@
     "html-entities": "^1.2.1",
     "js-yaml": "^3.13.1",
     "prop-types": "^15.6.2",
-    "react": "^16.10.2",
+    "react": "^16.13.0",
     "react-codemirror2": "^6.0.0",
-    "react-dom": "^16.10.2",
+    "react-dom": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "react-virtualized": "^9.21.1",
     "styled-components": "^4.2.0"

From 32ef805e23b4ee0b561c41091d3e619fae5656b5 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Tue, 3 Mar 2020 14:28:46 -0500
Subject: [PATCH 18/48] properly support job host summary data in custom
 notification templates

see: https://github.com/ansible/tower/issues/4148
---
 awx/main/models/notifications.py | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/awx/main/models/notifications.py b/awx/main/models/notifications.py
index 71a68b2a9f..7a20ed4e19 100644
--- a/awx/main/models/notifications.py
+++ b/awx/main/models/notifications.py
@@ -270,7 +270,8 @@ class JobNotificationMixin(object):
                             'elapsed', 'job_explanation', 'execution_node', 'controller_node', 'allow_simultaneous',
                             'scm_revision', 'diff_mode', 'job_slice_number', 'job_slice_count', 'custom_virtualenv',
                             'approval_status', 'approval_node_name', 'workflow_url',
-                            {'host_status_counts': ['skipped', 'ok', 'changed', 'failures', 'dark']},
+                            {'host_status_counts': ['skipped', 'ok', 'changed', 'failed', 'failures', 'dark'
+                                                    'processed', 'rescued', 'ignored']},
                             {'playbook_counts': ['play_count', 'task_count']},
                             {'summary_fields': [{'inventory': ['id', 'name', 'description', 'has_active_failures',
                                                                'total_hosts', 'hosts_with_active_failures', 'total_groups',
@@ -303,7 +304,7 @@ class JobNotificationMixin(object):
                            'finished': False,
                            'force_handlers': False,
                            'forks': 0,
-                           'host_status_counts': {'skipped': 1, 'ok': 5, 'changed': 3, 'failures': 0, 'dark': 0},
+                           'host_status_counts': {'skipped': 1, 'ok': 5, 'changed': 3, 'failures': 0, 'dark': 0, 'failed': False, 'processed': 0, 'rescued': 0},
                            'id': 42,
                            'job_explanation': 'Sample job explanation',
                            'job_slice_count': 1,
@@ -392,10 +393,20 @@ class JobNotificationMixin(object):
         The context will contain whitelisted content retrieved from a serialized job object
         (see JobNotificationMixin.JOB_FIELDS_WHITELIST), the job's friendly name,
         and a url to the job run."""
-        context = {'job': {},
-                   'job_friendly_name': self.get_notification_friendly_name(),
-                   'url': self.get_ui_url(),
-                   'job_metadata': json.dumps(self.notification_data(), indent=4)}
+        job_context = {'host_status_counts': {}}
+        summary = None
+        if hasattr(self, 'job_host_summaries'):
+            summary = self.job_host_summaries.first()
+        if summary:
+            from awx.api.serializers import JobHostSummarySerializer
+            summary_data = JobHostSummarySerializer(summary).to_representation(summary)
+            job_context['host_status_counts'] = summary_data
+        context = {
+            'job': job_context,
+            'job_friendly_name': self.get_notification_friendly_name(),
+            'url': self.get_ui_url(),
+            'job_metadata': json.dumps(self.notification_data(), indent=4)
+        }
 
         def build_context(node, fields, whitelisted_fields):
             for safe_field in whitelisted_fields:

From c261d6acf030cc37f0270b758cfed3836974278a Mon Sep 17 00:00:00 2001
From: John Mitchell <jmitchel@Johns-MacBook-Pro-46.local>
Date: Tue, 3 Mar 2020 15:16:57 -0500
Subject: [PATCH 19/48] update multi select credential logic vault credential
 logic, add notice, and update multicred tests

---
 .../Lookup/MultiCredentialsLookup.jsx         |  27 ++--
 .../Lookup/MultiCredentialsLookup.test.jsx    | 125 ++++++++++++++++--
 2 files changed, 136 insertions(+), 16 deletions(-)

diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index 9a24316c74..81601a687d 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem, Alert } from '@patternfly/react-core';
 import { CredentialsAPI, CredentialTypesAPI } from '@api';
 import AnsibleSelect from '@components/AnsibleSelect';
 import CredentialChip from '@components/CredentialChip';
@@ -77,7 +77,7 @@ function MultiCredentialsLookup(props) {
     />
   );
 
-  const isMultiple = selectedType && selectedType.kind === 'vault';
+  const isVault = selectedType?.kind === 'vault';
 
   return (
     <Lookup
@@ -91,6 +91,16 @@ function MultiCredentialsLookup(props) {
       renderOptionsList={({ state, dispatch, canDelete }) => {
         return (
           <Fragment>
+            {isVault && (
+              <Alert
+                variant="info"
+                isInline
+                css="margin-bottom: 20px;"
+                title={i18n._(
+                  t`You cannot select multiple vault credentials with the same vault ID. Doing so will automatically deselect the other with the same vault ID.`
+                )}
+              />
+            )}
             {credentialTypes && credentialTypes.length > 0 && (
               <ToolbarItem css=" display: flex; align-items: center;">
                 <div css="flex: 0 0 25%; margin-right: 32px">
@@ -140,17 +150,18 @@ function MultiCredentialsLookup(props) {
                   key: 'name',
                 },
               ]}
-              multiple={isMultiple}
+              multiple={isVault}
               header={i18n._(t`Credentials`)}
               name="credentials"
               qsConfig={QS_CONFIG}
               readOnly={!canDelete}
               selectItem={item => {
-                if (isMultiple) {
-                  return dispatch({ type: 'SELECT_ITEM', item });
-                }
-                const selectedItems = state.selectedItems.filter(
-                  i => i.kind !== item.kind
+                const hasSameVaultID = val =>
+                  val?.inputs?.vault_id !== undefined &&
+                  val?.inputs?.vault_id === item?.inputs?.vault_id;
+                const hasSameKind = val => val.kind === item.kind;
+                const selectedItems = state.selectedItems.filter(i =>
+                  isVault ? !hasSameVaultID(i) : !hasSameKind(i)
                 );
                 selectedItems.push(item);
                 return dispatch({
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
index fa73edad3a..fa8eb5a15f 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
@@ -12,7 +12,8 @@ describe('<MultiCredentialsLookup />', () => {
   const credentials = [
     { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
     { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
-    { name: 'Gatsby', id: 21, kind: 'vault' },
+    { name: 'Gatsby', id: 21, kind: 'vault', inputs: { vault_id: '1' } },
+    { name: 'Gatsby 2', id: 23, kind: 'vault' },
     { name: 'Gatsby', id: 8, kind: 'Machine' },
   ];
 
@@ -80,14 +81,15 @@ describe('<MultiCredentialsLookup />', () => {
       );
     });
     const chip = wrapper.find('CredentialChip');
-    expect(chip).toHaveLength(4);
+    expect(chip).toHaveLength(5);
     const button = chip.at(1).find('ChipButton');
     await act(async () => {
       button.invoke('onClick')();
     });
     expect(onChange).toBeCalledWith([
       { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
-      { id: 21, kind: 'vault', name: 'Gatsby' },
+      { id: 21, inputs: { vault_id: '1' }, kind: 'vault', name: 'Gatsby' },
+      { id: 23, kind: 'vault', name: 'Gatsby 2' },
       { id: 8, kind: 'Machine', name: 'Gatsby' },
     ]);
   });
@@ -161,12 +163,13 @@ describe('<MultiCredentialsLookup />', () => {
     expect(onChange).toBeCalledWith([
       { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
       { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
-      { id: 21, kind: 'vault', name: 'Gatsby' },
+      { id: 21, inputs: { vault_id: '1' }, kind: 'vault', name: 'Gatsby' },
+      { id: 23, kind: 'vault', name: 'Gatsby 2' },
       { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
     ]);
   });
 
-  test('should allow multiple vault credentials', async () => {
+  test('should allow multiple vault credentials with no vault id', async () => {
     const onChange = jest.fn();
     await act(async () => {
       wrapper = mountWithContexts(
@@ -193,7 +196,7 @@ describe('<MultiCredentialsLookup />', () => {
     act(() => {
       optionsList.invoke('selectItem')({
         id: 5,
-        kind: 'Machine',
+        kind: 'vault',
         name: 'Cred 5',
         url: 'www.google.com',
       });
@@ -205,9 +208,115 @@ describe('<MultiCredentialsLookup />', () => {
     expect(onChange).toBeCalledWith([
       { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
       { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
-      { id: 21, kind: 'vault', name: 'Gatsby' },
+      { id: 21, kind: 'vault', name: 'Gatsby', inputs: { vault_id: '1' } },
+      { id: 23, kind: 'vault', name: 'Gatsby 2' },
       { id: 8, kind: 'Machine', name: 'Gatsby' },
-      { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
+      { id: 5, kind: 'vault', name: 'Cred 5', url: 'www.google.com' },
+    ]);
+  });
+
+  test('should allow multiple vault credentials with different vault ids', async () => {
+    const onChange = jest.fn();
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <MultiCredentialsLookup
+          value={credentials}
+          tooltip="This is credentials look up"
+          onChange={onChange}
+          onError={() => {}}
+        />
+      );
+    });
+    const searchButton = await waitForElement(wrapper, 'SearchButton');
+    await act(async () => {
+      searchButton.invoke('onClick')();
+    });
+    wrapper.update();
+    const typeSelect = wrapper.find('AnsibleSelect');
+    act(() => {
+      typeSelect.invoke('onChange')({}, 500);
+    });
+    wrapper.update();
+    const optionsList = wrapper.find('OptionsList');
+    expect(optionsList.prop('multiple')).toEqual(true);
+    act(() => {
+      optionsList.invoke('selectItem')({
+        id: 5,
+        kind: 'vault',
+        name: 'Cred 5',
+        url: 'www.google.com',
+        inputs: { vault_id: '2' },
+      });
+    });
+    wrapper.update();
+    act(() => {
+      wrapper.find('Button[variant="primary"]').invoke('onClick')();
+    });
+    expect(onChange).toBeCalledWith([
+      { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
+      { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
+      { id: 21, kind: 'vault', name: 'Gatsby', inputs: { vault_id: '1' } },
+      { id: 23, kind: 'vault', name: 'Gatsby 2' },
+      { id: 8, kind: 'Machine', name: 'Gatsby' },
+      {
+        id: 5,
+        kind: 'vault',
+        name: 'Cred 5',
+        url: 'www.google.com',
+        inputs: { vault_id: '2' },
+      },
+    ]);
+  });
+
+  test('should not select multiple vault credentials with same vault id', async () => {
+    const onChange = jest.fn();
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <MultiCredentialsLookup
+          value={credentials}
+          tooltip="This is credentials look up"
+          onChange={onChange}
+          onError={() => {}}
+        />
+      );
+    });
+    const searchButton = await waitForElement(wrapper, 'SearchButton');
+    await act(async () => {
+      searchButton.invoke('onClick')();
+    });
+    wrapper.update();
+    const typeSelect = wrapper.find('AnsibleSelect');
+    act(() => {
+      typeSelect.invoke('onChange')({}, 500);
+    });
+    wrapper.update();
+    const optionsList = wrapper.find('OptionsList');
+    expect(optionsList.prop('multiple')).toEqual(true);
+    act(() => {
+      optionsList.invoke('selectItem')({
+        id: 24,
+        kind: 'vault',
+        name: 'Cred 5',
+        url: 'www.google.com',
+        inputs: { vault_id: '1' },
+      });
+    });
+    wrapper.update();
+    act(() => {
+      wrapper.find('Button[variant="primary"]').invoke('onClick')();
+    });
+    expect(onChange).toBeCalledWith([
+      { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
+      { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
+      { id: 23, kind: 'vault', name: 'Gatsby 2' },
+      { id: 8, kind: 'Machine', name: 'Gatsby' },
+      {
+        id: 24,
+        kind: 'vault',
+        name: 'Cred 5',
+        url: 'www.google.com',
+        inputs: { vault_id: '1' },
+      },
     ]);
   });
 });

From e7f36eb2ead58a0e75f2e682463e5e09d0f8ccf0 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Tue, 3 Mar 2020 14:58:36 -0500
Subject: [PATCH 20/48] remove a few custom notification fields that don't work

these aren't top-level serializer fields; they're summary fields
if we want to support these properly, we should treat them as
enhancements, and write support, tests, and documentation
---
 awx/main/models/notifications.py                | 16 ++--------------
 .../functional/models/test_notifications.py     | 17 ++++++-----------
 2 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/awx/main/models/notifications.py b/awx/main/models/notifications.py
index 7a20ed4e19..f731a03ce0 100644
--- a/awx/main/models/notifications.py
+++ b/awx/main/models/notifications.py
@@ -272,20 +272,17 @@ class JobNotificationMixin(object):
                             'approval_status', 'approval_node_name', 'workflow_url',
                             {'host_status_counts': ['skipped', 'ok', 'changed', 'failed', 'failures', 'dark'
                                                     'processed', 'rescued', 'ignored']},
-                            {'playbook_counts': ['play_count', 'task_count']},
                             {'summary_fields': [{'inventory': ['id', 'name', 'description', 'has_active_failures',
                                                                'total_hosts', 'hosts_with_active_failures', 'total_groups',
                                                                'has_inventory_sources',
                                                                'total_inventory_sources', 'inventory_sources_with_failures',
                                                                'organization_id', 'kind']},
                                                 {'project': ['id', 'name', 'description', 'status', 'scm_type']},
-                                                {'project_update': ['id', 'name', 'description', 'status', 'failed']},
                                                 {'job_template': ['id', 'name', 'description']},
                                                 {'unified_job_template': ['id', 'name', 'description', 'unified_job_type']},
                                                 {'instance_group': ['name', 'id']},
                                                 {'created_by': ['id', 'username', 'first_name', 'last_name']},
-                                                {'labels': ['count', 'results']},
-                                                {'source_workflow_job': ['description', 'elapsed', 'failed', 'id', 'name', 'status']}]}]
+                                                {'labels': ['count', 'results']}]}]
 
     @classmethod
     def context_stub(cls):
@@ -315,7 +312,6 @@ class JobNotificationMixin(object):
                            'limit': 'bar_limit',
                            'modified': datetime.datetime(2018, 12, 13, 6, 4, 0, 0, tzinfo=datetime.timezone.utc),
                            'name': 'Stub JobTemplate',
-                           'playbook_counts': {'play_count': 5, 'task_count': 10},
                            'playbook': 'ping.yml',
                            'scm_revision': '',
                            'skip_tags': '',
@@ -348,18 +344,10 @@ class JobNotificationMixin(object):
                                                           'name': 'Stub project',
                                                           'scm_type': 'git',
                                                           'status': 'successful'},
-                                              'project_update': {'id': 5, 'name': 'Stub Project Update', 'description': 'Project Update',
-                                                                 'status': 'running', 'failed': False},
                                               'unified_job_template': {'description': 'Sample unified job template description',
                                                                        'id': 39,
                                                                        'name': 'Stub Job Template',
-                                                                       'unified_job_type': 'job'},
-                                              'source_workflow_job': {'description': 'Sample workflow job description',
-                                                                      'elapsed': 0.000,
-                                                                      'failed': False,
-                                                                      'id': 88,
-                                                                      'name': 'Stub WorkflowJobTemplate',
-                                                                      'status': 'running'}},
+                                                                       'unified_job_type': 'job'}},
                            'timeout': 0,
                            'type': 'job',
                            'url': '/api/v2/jobs/13/',
diff --git a/awx/main/tests/functional/models/test_notifications.py b/awx/main/tests/functional/models/test_notifications.py
index 02a2b28e83..57fd4cca91 100644
--- a/awx/main/tests/functional/models/test_notifications.py
+++ b/awx/main/tests/functional/models/test_notifications.py
@@ -23,8 +23,11 @@ class TestJobNotificationMixin(object):
                                  'finished': bool,
                                  'force_handlers': bool,
                                  'forks': int,
-                                 'host_status_counts': {'skipped': int, 'ok': int, 'changed': int,
-                                                        'failures': int, 'dark': int},
+                                 'host_status_counts': {
+                                     'skipped': int, 'ok': int, 'changed': int,
+                                     'failures': int, 'dark': int, 'processed': int,
+                                     'rescued': int, 'failed': bool
+                                 },
                                  'id': int,
                                  'job_explanation': str,
                                  'job_slice_count': int,
@@ -36,7 +39,6 @@ class TestJobNotificationMixin(object):
                                  'modified': datetime.datetime,
                                  'name': str,
                                  'playbook': str,
-                                 'playbook_counts': {'play_count': int, 'task_count': int},
                                  'scm_revision': str,
                                  'skip_tags': str,
                                  'start_at_task': str,
@@ -68,17 +70,10 @@ class TestJobNotificationMixin(object):
                                                                 'name': str,
                                                                 'scm_type': str,
                                                                 'status': str},
-                                                    'project_update': {'id': int, 'name': str, 'description': str, 'status': str, 'failed': bool},
                                                     'unified_job_template': {'description': str,
                                                                              'id': int,
                                                                              'name': str,
-                                                                             'unified_job_type': str},
-                                                    'source_workflow_job': {'description': str,
-                                                                            'elapsed': float,
-                                                                            'failed': bool,
-                                                                            'id': int,
-                                                                            'name': str,
-                                                                            'status': str}},
+                                                                             'unified_job_type': str}},
 
                                  'timeout': int,
                                  'type': str,

From e232cd392c9b2252a6a2ddecb1d6d44a5a5a3771 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Tue, 3 Mar 2020 14:46:00 -0500
Subject: [PATCH 21/48] make fact saving code more robust to unexpected fact
 data

see: https://github.com/ansible/awx/issues/5935
---
 awx/main/models/jobs.py                 |  6 ++++--
 awx/main/tests/unit/models/test_jobs.py | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/awx/main/models/jobs.py b/awx/main/models/jobs.py
index eb351dcd53..77b3871626 100644
--- a/awx/main/models/jobs.py
+++ b/awx/main/models/jobs.py
@@ -829,8 +829,10 @@ class Job(UnifiedJob, JobOptions, SurveyJobMixin, JobNotificationMixin, TaskMana
                             continue
                         host.ansible_facts = ansible_facts
                         host.ansible_facts_modified = now()
-                        ansible_local_system_id = ansible_facts.get('ansible_local', {}).get('insights', {}).get('system_id', None)
-                        ansible_facts_system_id = ansible_facts.get('insights', {}).get('system_id', None)
+                        ansible_local = ansible_facts.get('ansible_local', {}).get('insights', {})
+                        ansible_facts = ansible_facts.get('insights', {})
+                        ansible_local_system_id = ansible_local.get('system_id', None) if isinstance(ansible_local, dict) else None
+                        ansible_facts_system_id = ansible_facts.get('system_id', None) if isinstance(ansible_facts, dict) else None
                         if ansible_local_system_id:
                             print("Setting local {}".format(ansible_local_system_id))
                             logger.debug("Insights system_id {} found for host <{}, {}> in"
diff --git a/awx/main/tests/unit/models/test_jobs.py b/awx/main/tests/unit/models/test_jobs.py
index b8964a94f8..f28691f500 100644
--- a/awx/main/tests/unit/models/test_jobs.py
+++ b/awx/main/tests/unit/models/test_jobs.py
@@ -89,6 +89,27 @@ def test_finish_job_fact_cache_with_existing_data(job, hosts, inventory, mocker,
     hosts[1].save.assert_called_once_with()
 
 
+def test_finish_job_fact_cache_with_malformed_fact(job, hosts, inventory, mocker, tmpdir):
+    fact_cache = os.path.join(tmpdir, 'facts')
+    modified_times = {}
+    job.start_job_fact_cache(fact_cache, modified_times, 0)
+
+    for h in hosts:
+        h.save = mocker.Mock()
+
+    for h in hosts:
+        filepath = os.path.join(fact_cache, h.name)
+        with open(filepath, 'w') as f:
+            json.dump({'ansible_local': {'insights': 'this is an unexpected error from ansible'}}, f)
+            new_modification_time = time.time() + 3600
+            os.utime(filepath, (new_modification_time, new_modification_time))
+
+    job.finish_job_fact_cache(fact_cache, modified_times)
+
+    for h in hosts:
+        assert h.insights_system_id is None
+
+
 def test_finish_job_fact_cache_with_bad_data(job, hosts, inventory, mocker, tmpdir):
     fact_cache = os.path.join(tmpdir, 'facts')
     modified_times = {}

From b5e5fea1170434ce777a88980f5fc315d6cd3025 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Tue, 3 Mar 2020 16:47:38 -0500
Subject: [PATCH 22/48] respect home directory symlinks for BASE_VENV_PATH

---
 awx/settings/production.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/settings/production.py b/awx/settings/production.py
index b5d4ad4437..cda057c087 100644
--- a/awx/settings/production.py
+++ b/awx/settings/production.py
@@ -44,7 +44,7 @@ JOBOUTPUT_ROOT = '/var/lib/awx/job_status/'
 SCHEDULE_METADATA_LOCATION = '/var/lib/awx/.tower_cycle'
 
 # Ansible base virtualenv paths and enablement
-BASE_VENV_PATH = "/var/lib/awx/venv"
+BASE_VENV_PATH = os.path.realpath("/var/lib/awx/venv")
 ANSIBLE_VENV_PATH = os.path.join(BASE_VENV_PATH, "ansible")
 
 # Tower base virtualenv paths and enablement

From f1120d39dba6d6b934428e7c9cedb0eb7f138653 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 3 Mar 2020 10:37:16 -0800
Subject: [PATCH 23/48] fix column widths when action buttons hidden due to
 permissions

---
 .../src/components/JobList/JobListItem.jsx    | 46 +++++++++++--------
 .../ScheduleList/ScheduleListItem.jsx         |  6 ++-
 .../CredentialList/CredentialListItem.jsx     | 15 ++++--
 .../screens/Host/HostList/HostListItem.jsx    |  6 ++-
 .../InventoryList/InventoryListItem.jsx       | 14 +++++-
 .../OrganizationList/OrganizationListItem.jsx | 13 +++++-
 .../Project/ProjectList/ProjectListItem.jsx   |  8 +++-
 .../screens/Team/TeamList/TeamListItem.jsx    | 14 +++++-
 .../TemplateList/TemplateListItem.jsx         |  4 +-
 9 files changed, 92 insertions(+), 34 deletions(-)

diff --git a/awx/ui_next/src/components/JobList/JobListItem.jsx b/awx/ui_next/src/components/JobList/JobListItem.jsx
index a577c605b8..fc280498cf 100644
--- a/awx/ui_next/src/components/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/components/JobList/JobListItem.jsx
@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
-  DataListAction,
+  DataListAction as _DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -18,6 +18,14 @@ import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
 
 function JobListItem({
   i18n,
@@ -63,24 +71,26 @@ function JobListItem({
             </DataListCell>,
           ]}
         />
-        {job.type !== 'system_job' &&
-          job.summary_fields?.user_capabilities?.start && (
-            <DataListAction
-              aria-label="actions"
-              aria-labelledby={labelId}
-              id={labelId}
-            >
-              <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
-                <LaunchButton resource={job}>
-                  {({ handleRelaunch }) => (
-                    <Button variant="plain" onClick={handleRelaunch}>
-                      <RocketIcon />
-                    </Button>
-                  )}
-                </LaunchButton>
-              </Tooltip>
-            </DataListAction>
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {job.type !== 'system_job' &&
+          job.summary_fields?.user_capabilities?.start ? (
+            <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
+              <LaunchButton resource={job}>
+                {({ handleRelaunch }) => (
+                  <Button variant="plain" onClick={handleRelaunch}>
+                    <RocketIcon />
+                  </Button>
+                )}
+              </LaunchButton>
+            </Tooltip>
+          ) : (
+            ''
           )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx b/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
index 980cecfac5..79ff96f6e1 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
+++ b/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
@@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: auto 40px;
+  grid-template-columns: 92px 40px;
 `;
 
 function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
@@ -104,7 +104,7 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
               key="actions"
             >
               <ScheduleToggle schedule={schedule} />
-              {schedule.summary_fields.user_capabilities.edit && (
+              {schedule.summary_fields.user_capabilities.edit ? (
                 <Tooltip content={i18n._(t`Edit Schedule`)} position="top">
                   <Button
                     css="grid-column: 2"
@@ -115,6 +115,8 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
                     <PencilAltIcon />
                   </Button>
                 </Tooltip>
+              ) : (
+                ''
               )}
             </DataListAction>,
           ]}
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index 9b519bfcb1..a2d9feaae5 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Button,
-  DataListAction,
+  DataListAction as _DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -14,8 +14,15 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
-
 import { Credential } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
 
 function CredentialListItem({
   credential,
@@ -57,7 +64,7 @@ function CredentialListItem({
           aria-labelledby={labelId}
           id={labelId}
         >
-          {canEdit && (
+          {canEdit ? (
             <Tooltip content={i18n._(t`Edit Credential`)} position="top">
               <Button
                 variant="plain"
@@ -67,6 +74,8 @@ function CredentialListItem({
                 <PencilAltIcon />
               </Button>
             </Tooltip>
+          ) : (
+            ''
           )}
         </DataListAction>
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index fec58640a6..3bc9c9f949 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
   grid-gap: 24px;
-  grid-template-columns: min-content 40px;
+  grid-template-columns: 92px 40px;
 `;
 
 function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
@@ -77,7 +77,7 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
           id={labelId}
         >
           <HostToggle host={host} />
-          {host.summary_fields.user_capabilities.edit && (
+          {host.summary_fields.user_capabilities.edit ? (
             <Tooltip content={i18n._(t`Edit Host`)} position="top">
               <Button
                 variant="plain"
@@ -87,6 +87,8 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
                 <PencilAltIcon />
               </Button>
             </Tooltip>
+          ) : (
+            ''
           )}
         </DataListAction>
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index ea5e445994..3edd54e169 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -3,7 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
-  DataListAction,
+  DataListAction as _DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -13,10 +13,18 @@ import {
 } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import { Inventory } from '@types';
 
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
+
 class InventoryListItem extends React.Component {
   static propTypes = {
     inventory: Inventory.isRequired,
@@ -60,7 +68,7 @@ class InventoryListItem extends React.Component {
             aria-labelledby={labelId}
             id={labelId}
           >
-            {inventory.summary_fields.user_capabilities.edit && (
+            {inventory.summary_fields.user_capabilities.edit ? (
               <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
                 <Button
                   variant="plain"
@@ -72,6 +80,8 @@ class InventoryListItem extends React.Component {
                   <PencilAltIcon />
                 </Button>
               </Tooltip>
+            ) : (
+              ''
             )}
           </DataListAction>
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index f2b1a4f8ee..35145e3998 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
   Button,
-  DataListAction,
+  DataListAction as _DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -31,6 +31,13 @@ const ListGroup = styled.span`
   }
 `;
 
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
+
 function OrganizationListItem({
   organization,
   isSelected,
@@ -82,7 +89,7 @@ function OrganizationListItem({
           aria-labelledby={labelId}
           id={labelId}
         >
-          {organization.summary_fields.user_capabilities.edit && (
+          {organization.summary_fields.user_capabilities.edit ? (
             <Tooltip content={i18n._(t`Edit Organization`)} position="top">
               <Button
                 variant="plain"
@@ -92,6 +99,8 @@ function OrganizationListItem({
                 <PencilAltIcon />
               </Button>
             </Tooltip>
+          ) : (
+            ''
           )}
         </DataListAction>
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index b540be821a..92e337e892 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -126,7 +126,7 @@ class ProjectListItem extends React.Component {
             aria-labelledby={labelId}
             id={labelId}
           >
-            {project.summary_fields.user_capabilities.start && (
+            {project.summary_fields.user_capabilities.start ? (
               <Tooltip content={i18n._(t`Sync Project`)} position="top">
                 <ProjectSyncButton projectId={project.id}>
                   {handleSync => (
@@ -140,8 +140,10 @@ class ProjectListItem extends React.Component {
                   )}
                 </ProjectSyncButton>
               </Tooltip>
+            ) : (
+              ''
             )}
-            {project.summary_fields.user_capabilities.edit && (
+            {project.summary_fields.user_capabilities.edit ? (
               <Tooltip content={i18n._(t`Edit Project`)} position="top">
                 <Button
                   css="grid-column: 2"
@@ -152,6 +154,8 @@ class ProjectListItem extends React.Component {
                   <PencilAltIcon />
                 </Button>
               </Tooltip>
+            ) : (
+              ''
             )}
           </DataListAction>
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index 0b1e66e9d3..b915117d2e 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
-  DataListAction,
+  DataListAction as _DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -12,11 +12,19 @@ import {
   DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import { Team } from '@types';
 
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
+
 class TeamListItem extends React.Component {
   static propTypes = {
     team: Team.isRequired,
@@ -64,7 +72,7 @@ class TeamListItem extends React.Component {
             aria-labelledby={labelId}
             id={labelId}
           >
-            {team.summary_fields.user_capabilities.edit && (
+            {team.summary_fields.user_capabilities.edit ? (
               <Tooltip content={i18n._(t`Edit Team`)} position="top">
                 <Button
                   variant="plain"
@@ -74,6 +82,8 @@ class TeamListItem extends React.Component {
                   <PencilAltIcon />
                 </Button>
               </Tooltip>
+            ) : (
+              ''
             )}
           </DataListAction>
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index b13eb92298..d412e25baf 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -98,7 +98,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
               </LaunchButton>
             </Tooltip>
           )}
-          {template.summary_fields.user_capabilities.edit && (
+          {template.summary_fields.user_capabilities.edit ? (
             <Tooltip content={i18n._(t`Edit Template`)} position="top">
               <Button
                 css="grid-column: 2"
@@ -109,6 +109,8 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                 <PencilAltIcon />
               </Button>
             </Tooltip>
+          ) : (
+            ''
           )}
         </DataListAction>
       </DataListItemRow>

From be56a1d3dffd6529ab4e7ceba39110a8eccb8892 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Tue, 3 Mar 2020 18:42:49 -0500
Subject: [PATCH 24/48] Fix job->inventory links

---
 awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 3634c73b89..01f09e6c11 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -164,7 +164,15 @@ function JobDetail({ job, i18n }) {
           <Detail
             label={i18n._(t`Inventory`)}
             value={
-              <Link to={`/inventory/${inventory.id}`}>{inventory.name}</Link>
+              <Link
+                to={
+                  inventory.kind === 'smart'
+                    ? `/inventories/smart_inventory/${inventory.id}`
+                    : `/inventories/inventory/${inventory.id}`
+                }
+              >
+                {inventory.name}
+              </Link>
             }
           />
         )}

From 85ec73bf4beb5ee66ba2d876d9147816a945c0a2 Mon Sep 17 00:00:00 2001
From: AlanCoding <arominge@redhat.com>
Date: Tue, 3 Mar 2020 20:19:41 -0500
Subject: [PATCH 25/48] Unify collection targets for install and ansible-test

---
 Makefile                 | 22 +++++++++++-----------
 awx_collection/README.md | 15 +++++++++------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/Makefile b/Makefile
index 069a6ff748..defab38047 100644
--- a/Makefile
+++ b/Makefile
@@ -402,6 +402,7 @@ prepare_collection_venv:
 COLLECTION_TEST_DIRS ?= awx_collection/test/awx
 COLLECTION_PACKAGE ?= awx
 COLLECTION_NAMESPACE ?= awx
+COLLECTION_INSTALL = ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)/awx
 
 test_collection:
 	@if [ "$(VENV_BASE)" ]; then \
@@ -414,28 +415,27 @@ flake8_collection:
 
 test_collection_all: prepare_collection_venv test_collection flake8_collection
 
-test_collection_sanity:
-	rm -rf sanity
-	mkdir -p sanity/ansible_collections/$(COLLECTION_NAMESPACE)
-	cp -Ra awx_collection sanity/ansible_collections/$(COLLECTION_NAMESPACE)/awx  # symlinks do not work
-	cd sanity/ansible_collections/$(COLLECTION_NAMESPACE)/awx && git init && git add . # requires both this file structure and a git repo, so there you go
-	cd sanity/ansible_collections/$(COLLECTION_NAMESPACE)/awx && ansible-test sanity
-
 # WARNING: symlinking a collection is fundamentally unstable
 # this is for rapid development iteration with playbooks, do not use with other test targets
 symlink_collection:
-	rm -rf ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)
-	mkdir -p ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)
-	ln -s $(shell pwd)/awx_collection ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)/awx
+	rm -rf $(COLLECTION_INSTALL)
+	mkdir -p ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)  # in case it does not exist
+	ln -s $(shell pwd)/awx_collection $(COLLECTION_INSTALL)
 
 build_collection:
 	ansible-playbook -i localhost, awx_collection/template_galaxy.yml -e collection_package=$(COLLECTION_PACKAGE) -e collection_namespace=$(COLLECTION_NAMESPACE) -e collection_version=$(VERSION)
 	ansible-galaxy collection build awx_collection --force --output-path=awx_collection
 
 install_collection: build_collection
-	rm -rf ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)/awx
+	rm -rf $(COLLECTION_INSTALL)
 	ansible-galaxy collection install awx_collection/$(COLLECTION_NAMESPACE)-awx-$(VERSION).tar.gz
 
+test_collection_sanity: install_collection
+	cd $(COLLECTION_INSTALL) && ansible-test sanity
+
+test_collection_integration: install_collection
+	cd $(COLLECTION_INSTALL) && ansible-test integration
+
 test_unit:
 	@if [ "$(VENV_BASE)" ]; then \
 		. $(VENV_BASE)/awx/bin/activate; \
diff --git a/awx_collection/README.md b/awx_collection/README.md
index f91396e59c..26b17ca268 100644
--- a/awx_collection/README.md
+++ b/awx_collection/README.md
@@ -8,6 +8,15 @@ inside the folder `lib/ansible/modules/web_infrastructure/ansible_tower`
 as well as other folders for the inventory plugin, module utils, and
 doc fragment.
 
+## Building and Installing
+
+This collection templates the `galaxy.yml` file it uses.
+Run `make build_collection` from the root folder of the AWX source tree.
+This will create the `tar.gz` file inside the `awx_collection` folder
+with the current AWX version, for example: `awx_collection/awx-awx-9.2.0.tar.gz`.
+
+Installing the `tar.gz` involves no special instructions.
+
 ## Release and Upgrade Notes
 
 The release 7.0.0 of the `awx.awx` collection is intended to be identical
@@ -95,12 +104,6 @@ cd ~/.ansible/collections/ansible_collections/awx/awx/
 ansible-test integration
 ```
 
-## Building
-
-The build target `make build_collection` will template out a `galaxy.yml` file
-with automatic detection of the current AWX version. Then it builds the
-collection with the `ansible-galaxy` CLI.
-
 ## Licensing
 
 All content in this folder is licensed under the same license as Ansible,

From 22524589e3b1ebd3731d657b7065083a57ca4901 Mon Sep 17 00:00:00 2001
From: AlanCoding <arominge@redhat.com>
Date: Tue, 3 Mar 2020 22:19:38 -0500
Subject: [PATCH 26/48] Employ the collection_package var in a few missing
 places

---
 Makefile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index defab38047..4a4f8bb18e 100644
--- a/Makefile
+++ b/Makefile
@@ -402,7 +402,7 @@ prepare_collection_venv:
 COLLECTION_TEST_DIRS ?= awx_collection/test/awx
 COLLECTION_PACKAGE ?= awx
 COLLECTION_NAMESPACE ?= awx
-COLLECTION_INSTALL = ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)/awx
+COLLECTION_INSTALL = ~/.ansible/collections/ansible_collections/$(COLLECTION_NAMESPACE)/$(COLLECTION_PACKAGE)
 
 test_collection:
 	@if [ "$(VENV_BASE)" ]; then \
@@ -428,7 +428,7 @@ build_collection:
 
 install_collection: build_collection
 	rm -rf $(COLLECTION_INSTALL)
-	ansible-galaxy collection install awx_collection/$(COLLECTION_NAMESPACE)-awx-$(VERSION).tar.gz
+	ansible-galaxy collection install awx_collection/$(COLLECTION_NAMESPACE)-$(COLLECTION_PACKAGE)-$(VERSION).tar.gz
 
 test_collection_sanity: install_collection
 	cd $(COLLECTION_INSTALL) && ansible-test sanity

From 3e08bbeb9392c6d9ad2e07592347e7eac0e16c7e Mon Sep 17 00:00:00 2001
From: AlanCoding <arominge@redhat.com>
Date: Wed, 4 Mar 2020 07:42:52 -0500
Subject: [PATCH 27/48] Make wording on running less perscriptive and more
 general

---
 awx_collection/README.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/awx_collection/README.md b/awx_collection/README.md
index 26b17ca268..da70e001a5 100644
--- a/awx_collection/README.md
+++ b/awx_collection/README.md
@@ -17,6 +17,16 @@ with the current AWX version, for example: `awx_collection/awx-awx-9.2.0.tar.gz`
 
 Installing the `tar.gz` involves no special instructions.
 
+## Running
+
+Modules in this collection may have any of the following python requirements:
+
+ - the official [AWX CLI](https://docs.ansible.com/ansible-tower/latest/html/towercli/index.html)
+ - the deprecated `tower-cli` [PyPI](https://pypi.org/project/ansible-tower-cli/)
+ - no requirements
+
+See requirements in the `DOCUMENTATION` string specific to each module.
+
 ## Release and Upgrade Notes
 
 The release 7.0.0 of the `awx.awx` collection is intended to be identical
@@ -36,16 +46,6 @@ The following notes are changes that may require changes to playbooks:
  - The `variables` parameter in the `tower_group`, `tower_host` and `tower_inventory` modules are now in `dict` format and no longer supports the use of the `C(@)` syntax (for an external `vars` file).
  - Some return values (e.g., `credential_type`) have been removed. Use of `id` is recommended.
 
-## Running
-
-To use this collection, the "old" `tower-cli` needs to be installed
-in the virtual environment where the collection runs.
-You can install it from [PyPI](https://pypi.org/project/ansible-tower-cli/).
-
-To use this collection in AWX, you should create a custom virtual environment into which to install the requirements. NOTE: running locally, you will also need
-to set the job template `extra_vars` to include `ansible_python_interpreter`
-to be the Python in that virtual environment.
-
 ## Running Unit Tests
 
 Tests to verify compatibility with the most recent AWX code are

From 54b553b78c7f6efbdcaf746c5858ac0b8d91528c Mon Sep 17 00:00:00 2001
From: AlanCoding <arominge@redhat.com>
Date: Wed, 4 Mar 2020 08:07:10 -0500
Subject: [PATCH 28/48] Simplify syntax for loop labels

---
 awx_collection/template_galaxy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx_collection/template_galaxy.yml b/awx_collection/template_galaxy.yml
index adf302aa14..efe200a440 100644
--- a/awx_collection/template_galaxy.yml
+++ b/awx_collection/template_galaxy.yml
@@ -23,7 +23,7 @@
             replace: 'extends_documentation_fragment: {{ collection_namespace }}.{{ collection_package }}.auth'
           loop: "{{ module_files.files }}"
           loop_control:
-            label: "{{ item.path[ playbook_dir | length :] }}"
+            label: "{{ item.path | basename }}"
 
         - name: Change files to support desired namespace and package names
           replace:

From d812972d3c7a722beb1e20442c5f8f44d69a3175 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Wed, 4 Mar 2020 08:24:20 -0500
Subject: [PATCH 29/48] Wrap credential help text at 110 chars

---
 .../src/screens/Template/shared/JobTemplateForm.jsx       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index f9f68507cb..19ca4d3467 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -368,9 +368,11 @@ class JobTemplateForm extends Component {
               label={i18n._(t`Credentials`)}
               promptId="template-ask-credential-on-launch"
               promptName="ask_credential_on_launch"
-              tooltip={i18n._(
-                t`Select credentials that allow Tower to access the nodes this job will be ran against. You can only select one credential of each type. For machine credentials (SSH), checking "Prompt on launch" without selecting credentials will require you to select a machine credential at run time. If you select credentials and check "Prompt on launch", the selected credential(s) become the defaults that can be updated at run time.`
-              )}
+              tooltip={i18n._(t`Select credentials that allow Tower to access the nodes this job will be ran
+                against. You can only select one credential of each type. For machine credentials (SSH),
+                checking "Prompt on launch" without selecting credentials will require you to select a machine
+                credential at run time. If you select credentials and check "Prompt on launch", the selected
+                credential(s) become the defaults that can be updated at run time.`)}
             >
               <Field name="credentials" fieldId="template-credentials">
                 {({ field }) => {

From deaf2028ad6575e162d1ca8d64e068b4c2a8f358 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Wed, 4 Mar 2020 09:08:46 -0500
Subject: [PATCH 30/48] Request all types  for multicred lookup

---
 .../Lookup/MultiCredentialsLookup.jsx         | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index 81601a687d..1bc80341b9 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -18,9 +18,24 @@ const QS_CONFIG = getQSConfig('credentials', {
 });
 
 async function loadCredentialTypes() {
-  const { data } = await CredentialTypesAPI.read();
-  const acceptableTypes = ['machine', 'cloud', 'net', 'ssh', 'vault'];
-  return data.results.filter(type => acceptableTypes.includes(type.kind));
+  const pageSize = 200;
+  const acceptableKinds = ['machine', 'cloud', 'net', 'ssh', 'vault'];
+  // The number of credential types a user can have is unlimited. In practice, it is unlikely for
+  // users to have more than a page at the maximum request size.
+  const {
+    data: { next, results },
+  } = await CredentialTypesAPI.read({ page_size: pageSize });
+  let nextResults = [];
+  if (next) {
+    const { data } = await CredentialTypesAPI.read({
+      page_size: pageSize,
+      page: 2,
+    });
+    nextResults = data.results;
+  }
+  return results
+    .concat(nextResults)
+    .filter(type => acceptableKinds.includes(type.kind));
 }
 
 async function loadCredentials(params, selectedCredentialTypeId) {

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 31/48] 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,

From 9d449c419b9246c69f0e43f5a69da48f2cd66d12 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 5 Mar 2020 10:58:06 -0500
Subject: [PATCH 32/48] Fix bug where Inv Host Add form doesn't save due to
 form error

---
 .../src/screens/Host/HostAdd/HostAdd.test.jsx |   2 +-
 .../src/screens/Host/shared/HostForm.jsx      | 115 ++++++++----------
 2 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
index ebb302fc42..c7b6df05f3 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
@@ -20,7 +20,7 @@ describe('<HostAdd />', () => {
 
   beforeEach(async () => {
     history = createMemoryHistory({
-      initialEntries: ['/hosts/1/add'],
+      initialEntries: ['/hosts/add'],
     });
     await act(async () => {
       wrapper = mountWithContexts(<HostAdd />, {
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 7df23e70c8..3b72f71081 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -18,78 +18,48 @@ import { required } from '@util/validators';
 import { InventoryLookup } from '@components/Lookup';
 import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
 
-function HostFormFields({ host, i18n }) {
+const InventoryLookupField = withI18n()(({ i18n, host }) => {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
 
-  const hostAddMatch = useRouteMatch('/hosts/add');
-  const inventoryFieldArr = useField({
+  const [, inventoryMeta, inventoryHelpers] = useField({
     name: 'inventory',
     validate: required(i18n._(t`Select a value for this field`), i18n),
   });
-  const inventoryMeta = inventoryFieldArr[1];
-  const inventoryHelpers = inventoryFieldArr[2];
 
   return (
-    <>
-      <FormField
-        id="host-name"
-        name="name"
-        type="text"
-        label={i18n._(t`Name`)}
-        validate={required(null, i18n)}
-        isRequired
+    <FormGroup
+      label={i18n._(t`Inventory`)}
+      isRequired
+      fieldId="inventory-lookup"
+      isValid={!inventoryMeta.touched || !inventoryMeta.error}
+      helperTextInvalid={inventoryMeta.error}
+    >
+      <FieldTooltip
+        content={i18n._(t`Select the inventory that this host will belong to.`)}
       />
-      <FormField
-        id="host-description"
-        name="description"
-        type="text"
-        label={i18n._(t`Description`)}
+      <InventoryLookup
+        value={inventory}
+        onBlur={() => inventoryHelpers.setTouched()}
+        tooltip={i18n._(t`Select the inventory that this host will belong to.`)}
+        isValid={!inventoryMeta.touched || !inventoryMeta.error}
+        helperTextInvalid={inventoryMeta.error}
+        onChange={value => {
+          inventoryHelpers.setValue(value.id);
+          setInventory(value);
+        }}
+        required
+        touched={inventoryMeta.touched}
+        error={inventoryMeta.error}
       />
-      {hostAddMatch && (
-        <FormGroup
-          label={i18n._(t`Inventory`)}
-          isRequired
-          fieldId="inventory-lookup"
-          isValid={!inventoryMeta.touched || !inventoryMeta.error}
-          helperTextInvalid={inventoryMeta.error}
-        >
-          <FieldTooltip
-            content={i18n._(
-              t`Select the inventory that this host will belong to.`
-            )}
-          />
-          <InventoryLookup
-            value={inventory}
-            onBlur={() => inventoryHelpers.setTouched()}
-            tooltip={i18n._(
-              t`Select the inventory that this host will belong to.`
-            )}
-            isValid={!inventoryMeta.touched || !inventoryMeta.error}
-            helperTextInvalid={inventoryMeta.error}
-            onChange={value => {
-              inventoryHelpers.setValue(value.id);
-              setInventory(value);
-            }}
-            required
-            touched={inventoryMeta.touched}
-            error={inventoryMeta.error}
-          />
-        </FormGroup>
-      )}
-      <FormFullWidthLayout>
-        <VariablesField
-          id="host-variables"
-          name="variables"
-          label={i18n._(t`Variables`)}
-        />
-      </FormFullWidthLayout>
-    </>
+    </FormGroup>
   );
-}
+});
+
+const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
+  const hostAddMatch = useRouteMatch('/hosts/add');
 
-function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
   return (
     <Formik
       initialValues={{
@@ -103,7 +73,28 @@ function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormColumnLayout>
-            <HostFormFields host={host} {...rest} />
+            <FormField
+              id="host-name"
+              name="name"
+              type="text"
+              label={i18n._(t`Name`)}
+              validate={required(null, i18n)}
+              isRequired
+            />
+            <FormField
+              id="host-description"
+              name="description"
+              type="text"
+              label={i18n._(t`Description`)}
+            />
+            {hostAddMatch && <InventoryLookupField host={host} />}
+            <FormFullWidthLayout>
+              <VariablesField
+                id="host-variables"
+                name="variables"
+                label={i18n._(t`Variables`)}
+              />
+            </FormFullWidthLayout>
             <FormSubmitError error={submitError} />
             <FormActionGroup
               onCancel={handleCancel}
@@ -114,11 +105,11 @@ function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
       )}
     </Formik>
   );
-}
+};
 
 HostForm.propTypes = {
-  handleSubmit: func.isRequired,
   handleCancel: func.isRequired,
+  handleSubmit: func.isRequired,
   host: shape({}),
   submitError: shape({}),
 };

From d33daeee91a503f7e71da8033b055b16d1f5fbeb Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 5 Mar 2020 12:33:59 -0500
Subject: [PATCH 33/48] Adds Add button to schedules list along with rbac
 restrictions

---
 awx/ui_next/src/api/mixins/Schedules.mixin.js | 12 +++++
 awx/ui_next/src/api/models/JobTemplates.js    |  9 ++--
 awx/ui_next/src/api/models/Projects.js        |  9 ++--
 .../src/api/models/WorkflowJobTemplates.js    |  9 +---
 .../components/ScheduleList/ScheduleList.jsx  | 52 ++++++++++++++++---
 .../ScheduleList/ScheduleList.test.jsx        | 46 ++++++++++++++--
 awx/ui_next/src/screens/Project/Project.jsx   | 13 ++++-
 .../src/screens/Schedule/Schedules.jsx        | 10 +++-
 awx/ui_next/src/screens/Template/Template.jsx | 27 ++++++----
 .../screens/Template/WorkflowJobTemplate.jsx  | 13 ++++-
 10 files changed, 157 insertions(+), 43 deletions(-)
 create mode 100644 awx/ui_next/src/api/mixins/Schedules.mixin.js

diff --git a/awx/ui_next/src/api/mixins/Schedules.mixin.js b/awx/ui_next/src/api/mixins/Schedules.mixin.js
new file mode 100644
index 0000000000..4ea44f418e
--- /dev/null
+++ b/awx/ui_next/src/api/mixins/Schedules.mixin.js
@@ -0,0 +1,12 @@
+const SchedulesMixin = parent =>
+  class extends parent {
+    readSchedules(id, params) {
+      return this.http.get(`${this.baseUrl}${id}/schedules/`, { params });
+    }
+
+    readScheduleOptions(id) {
+      return this.http.options(`${this.baseUrl}${id}/schedules/`);
+    }
+  };
+
+export default SchedulesMixin;
diff --git a/awx/ui_next/src/api/models/JobTemplates.js b/awx/ui_next/src/api/models/JobTemplates.js
index ef615a65f6..9e2e4ee851 100644
--- a/awx/ui_next/src/api/models/JobTemplates.js
+++ b/awx/ui_next/src/api/models/JobTemplates.js
@@ -1,8 +1,11 @@
 import Base from '../Base';
 import NotificationsMixin from '../mixins/Notifications.mixin';
 import InstanceGroupsMixin from '../mixins/InstanceGroups.mixin';
+import SchedulesMixin from '../mixins/Schedules.mixin';
 
-class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) {
+class JobTemplates extends SchedulesMixin(
+  InstanceGroupsMixin(NotificationsMixin(Base))
+) {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/job_templates/';
@@ -61,10 +64,6 @@ class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) {
       params,
     });
   }
-
-  readScheduleList(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/schedules/`, { params });
-  }
 }
 
 export default JobTemplates;
diff --git a/awx/ui_next/src/api/models/Projects.js b/awx/ui_next/src/api/models/Projects.js
index 3a4049f9f8..3761c61961 100644
--- a/awx/ui_next/src/api/models/Projects.js
+++ b/awx/ui_next/src/api/models/Projects.js
@@ -1,8 +1,11 @@
 import Base from '../Base';
 import NotificationsMixin from '../mixins/Notifications.mixin';
 import LaunchUpdateMixin from '../mixins/LaunchUpdate.mixin';
+import SchedulesMixin from '../mixins/Schedules.mixin';
 
-class Projects extends LaunchUpdateMixin(NotificationsMixin(Base)) {
+class Projects extends SchedulesMixin(
+  LaunchUpdateMixin(NotificationsMixin(Base))
+) {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/projects/';
@@ -21,10 +24,6 @@ class Projects extends LaunchUpdateMixin(NotificationsMixin(Base)) {
     return this.http.get(`${this.baseUrl}${id}/playbooks/`);
   }
 
-  readScheduleList(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/schedules/`, { params });
-  }
-
   readSync(id) {
     return this.http.get(`${this.baseUrl}${id}/update/`);
   }
diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index a71fe68cbc..0725a1a3e4 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -1,6 +1,7 @@
 import Base from '../Base';
+import SchedulesMixin from '../mixins/Schedules.mixin';
 
-class WorkflowJobTemplates extends Base {
+class WorkflowJobTemplates extends SchedulesMixin(Base) {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/workflow_job_templates/';
@@ -45,12 +46,6 @@ class WorkflowJobTemplates extends Base {
       params,
     });
   }
-
-  readScheduleList(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/schedules/`, {
-      params,
-    });
-  }
 }
 
 export default WorkflowJobTemplates;
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx b/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx
index e24e46e0b6..999f28a6b9 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx
+++ b/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
+import { bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { SchedulesAPI } from '@api';
@@ -7,6 +8,7 @@ import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import DataListToolbar from '@components/DataListToolbar';
 import PaginatedDataList, {
+  ToolbarAddButton,
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
 import useRequest, { useDeleteItems } from '@util/useRequest';
@@ -19,28 +21,40 @@ const QS_CONFIG = getQSConfig('schedule', {
   order_by: 'unified_job_template__polymorphic_ctype__model',
 });
 
-function ScheduleList({ i18n, loadSchedules }) {
+function ScheduleList({
+  i18n,
+  loadSchedules,
+  loadScheduleOptions,
+  hideAddButton,
+}) {
   const [selected, setSelected] = useState([]);
 
   const location = useLocation();
 
   const {
-    result: { schedules, itemCount },
+    result: { schedules, itemCount, actions },
     error: contentError,
     isLoading,
     request: fetchSchedules,
   } = useRequest(
     useCallback(async () => {
       const params = parseQueryString(QS_CONFIG, location.search);
-      const response = loadSchedules(params);
-      const {
-        data: { count, results },
-      } = await response;
-      return { itemCount: count, schedules: results };
-    }, [location, loadSchedules]),
+      const [
+        {
+          data: { count, results },
+        },
+        scheduleActions,
+      ] = await Promise.all([loadSchedules(params), loadScheduleOptions()]);
+      return {
+        schedules: results,
+        itemCount: count,
+        actions: scheduleActions.data.actions,
+      };
+    }, [location, loadSchedules, loadScheduleOptions]),
     {
       schedules: [],
       itemCount: 0,
+      actions: {},
     }
   );
 
@@ -84,6 +98,11 @@ function ScheduleList({ i18n, loadSchedules }) {
     setSelected([]);
   };
 
+  const canAdd =
+    actions &&
+    Object.prototype.hasOwnProperty.call(actions, 'POST') &&
+    !hideAddButton;
+
   return (
     <>
       <PaginatedDataList
@@ -130,6 +149,14 @@ function ScheduleList({ i18n, loadSchedules }) {
             onSelectAll={handleSelectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
+              ...(canAdd
+                ? [
+                    <ToolbarAddButton
+                      key="add"
+                      linkTo={`${location.pathname}/add`}
+                    />,
+                  ]
+                : []),
               <ToolbarDeleteButton
                 key="delete"
                 onDelete={handleDelete}
@@ -155,4 +182,13 @@ function ScheduleList({ i18n, loadSchedules }) {
   );
 }
 
+ScheduleList.propTypes = {
+  hideAddButton: bool,
+  loadSchedules: func.isRequired,
+  loadScheduleOptions: func.isRequired,
+};
+ScheduleList.defaultProps = {
+  hideAddButton: false,
+};
+
 export default withI18n()(ScheduleList);
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx b/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx
index c257c47c45..25101677c8 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx
+++ b/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx
@@ -11,6 +11,18 @@ SchedulesAPI.destroy = jest.fn();
 SchedulesAPI.update.mockResolvedValue({
   data: mockSchedules.results[0],
 });
+SchedulesAPI.read.mockResolvedValue({ data: mockSchedules });
+SchedulesAPI.readOptions.mockResolvedValue({
+  data: {
+    actions: {
+      GET: {},
+      POST: {},
+    },
+  },
+});
+
+const loadSchedules = params => SchedulesAPI.read(params);
+const loadScheduleOptions = () => SchedulesAPI.readOptions();
 
 describe('ScheduleList', () => {
   let wrapper;
@@ -21,11 +33,12 @@ describe('ScheduleList', () => {
 
   describe('read call successful', () => {
     beforeAll(async () => {
-      SchedulesAPI.read.mockResolvedValue({ data: mockSchedules });
-      const loadSchedules = params => SchedulesAPI.read(params);
       await act(async () => {
         wrapper = mountWithContexts(
-          <ScheduleList loadSchedules={loadSchedules} />
+          <ScheduleList
+            loadSchedules={loadSchedules}
+            loadScheduleOptions={loadScheduleOptions}
+          />
         );
       });
       wrapper.update();
@@ -40,6 +53,10 @@ describe('ScheduleList', () => {
       expect(wrapper.find('ScheduleListItem').length).toBe(5);
     });
 
+    test('should show add button', () => {
+      expect(wrapper.find('ToolbarAddButton').length).toBe(1);
+    });
+
     test('should check and uncheck the row item', async () => {
       expect(
         wrapper.find('DataListCheck[id="select-schedule-1"]').props().checked
@@ -153,11 +170,32 @@ describe('ScheduleList', () => {
     });
   });
 
+  describe('hidden add button', () => {
+    test('should hide add button when flag is passed', async () => {
+      await act(async () => {
+        wrapper = mountWithContexts(
+          <ScheduleList
+            loadSchedules={loadSchedules}
+            loadScheduleOptions={loadScheduleOptions}
+            hideAddButton
+          />
+        );
+      });
+      wrapper.update();
+      expect(wrapper.find('ToolbarAddButton').length).toBe(0);
+    });
+  });
+
   describe('read call unsuccessful', () => {
     test('should show content error when read call unsuccessful', async () => {
       SchedulesAPI.read.mockRejectedValue(new Error());
       await act(async () => {
-        wrapper = mountWithContexts(<ScheduleList />);
+        wrapper = mountWithContexts(
+          <ScheduleList
+            loadSchedules={loadSchedules}
+            loadScheduleOptions={loadScheduleOptions}
+          />
+        );
       });
       wrapper.update();
       expect(wrapper.find('ContentError').length).toBe(1);
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index 9e401fde76..de6b609bdb 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -31,6 +31,7 @@ class Project extends Component {
     this.loadProject = this.loadProject.bind(this);
     this.loadProjectAndRoles = this.loadProjectAndRoles.bind(this);
     this.loadSchedules = this.loadSchedules.bind(this);
+    this.loadScheduleOptions = this.loadScheduleOptions.bind(this);
   }
 
   async componentDidMount() {
@@ -104,9 +105,14 @@ class Project extends Component {
     }
   }
 
+  loadScheduleOptions() {
+    const { project } = this.state;
+    return ProjectsAPI.readScheduleOptions(project.id);
+  }
+
   loadSchedules(params) {
     const { project } = this.state;
-    return ProjectsAPI.readScheduleList(project.id, params);
+    return ProjectsAPI.readSchedules(project.id, params);
   }
 
   render() {
@@ -241,7 +247,10 @@ class Project extends Component {
               <Route
                 path="/projects/:id/schedules"
                 render={() => (
-                  <ScheduleList loadSchedules={this.loadSchedules} />
+                  <ScheduleList
+                    loadSchedules={this.loadSchedules}
+                    loadScheduleOptions={this.loadScheduleOptions}
+                  />
                 )}
               />
             )}
diff --git a/awx/ui_next/src/screens/Schedule/Schedules.jsx b/awx/ui_next/src/screens/Schedule/Schedules.jsx
index 0f7c9b0ee0..514f4b4392 100644
--- a/awx/ui_next/src/screens/Schedule/Schedules.jsx
+++ b/awx/ui_next/src/screens/Schedule/Schedules.jsx
@@ -9,6 +9,10 @@ import { SchedulesAPI } from '@api';
 import { PageSection, Card } from '@patternfly/react-core';
 
 function Schedules({ i18n }) {
+  const loadScheduleOptions = () => {
+    return SchedulesAPI.readOptions();
+  };
+
   const loadSchedules = params => {
     return SchedulesAPI.read(params);
   };
@@ -24,7 +28,11 @@ function Schedules({ i18n }) {
         <Route path="/schedules">
           <PageSection>
             <Card>
-              <ScheduleList loadSchedules={loadSchedules} />
+              <ScheduleList
+                loadSchedules={loadSchedules}
+                loadScheduleOptions={loadScheduleOptions}
+                hideAddButton
+              />
             </Card>
           </PageSection>
         </Route>
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 61f63e70e4..a600563a4a 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -29,6 +29,7 @@ class Template extends Component {
     this.loadTemplate = this.loadTemplate.bind(this);
     this.loadTemplateAndRoles = this.loadTemplateAndRoles.bind(this);
     this.loadSchedules = this.loadSchedules.bind(this);
+    this.loadScheduleOptions = this.loadScheduleOptions.bind(this);
   }
 
   async componentDidMount() {
@@ -83,9 +84,14 @@ class Template extends Component {
     }
   }
 
+  loadScheduleOptions() {
+    const { template } = this.state;
+    return JobTemplatesAPI.readScheduleOptions(template.id);
+  }
+
   loadSchedules(params) {
     const { template } = this.state;
-    return JobTemplatesAPI.readScheduleList(template.id, params);
+    return JobTemplatesAPI.readSchedules(template.id, params);
   }
 
   render() {
@@ -111,6 +117,13 @@ class Template extends Component {
       });
     }
 
+    if (template) {
+      tabsArray.push({
+        name: i18n._(t`Schedules`),
+        link: `${match.url}/schedules`,
+      });
+    }
+
     tabsArray.push(
       {
         name: i18n._(t`Completed Jobs`),
@@ -122,13 +135,6 @@ class Template extends Component {
       }
     );
 
-    if (template) {
-      tabsArray.push({
-        name: i18n._(t`Schedules`),
-        link: `${match.url}/schedules`,
-      });
-    }
-
     tabsArray.forEach((tab, n) => {
       tab.id = n;
     });
@@ -225,7 +231,10 @@ class Template extends Component {
               <Route
                 path="/templates/:templateType/:id/schedules"
                 render={() => (
-                  <ScheduleList loadSchedules={this.loadSchedules} />
+                  <ScheduleList
+                    loadSchedules={this.loadSchedules}
+                    loadScheduleOptions={this.loadScheduleOptions}
+                  />
                 )}
               />
             )}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 6c63e16ab0..1a71bb644f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -29,6 +29,7 @@ class WorkflowJobTemplate extends Component {
     };
     this.loadTemplate = this.loadTemplate.bind(this);
     this.loadSchedules = this.loadSchedules.bind(this);
+    this.loadScheduleOptions = this.loadScheduleOptions.bind(this);
   }
 
   async componentDidMount() {
@@ -76,9 +77,14 @@ class WorkflowJobTemplate extends Component {
     }
   }
 
+  loadScheduleOptions() {
+    const { template } = this.state;
+    return WorkflowJobTemplatesAPI.readScheduleOptions(template.id);
+  }
+
   loadSchedules(params) {
     const { template } = this.state;
-    return WorkflowJobTemplatesAPI.readScheduleList(template.id, params);
+    return WorkflowJobTemplatesAPI.readSchedules(template.id, params);
   }
 
   render() {
@@ -199,7 +205,10 @@ class WorkflowJobTemplate extends Component {
               <Route
                 path="/templates/:templateType/:id/schedules"
                 render={() => (
-                  <ScheduleList loadSchedules={this.loadSchedules} />
+                  <ScheduleList
+                    loadSchedules={this.loadSchedules}
+                    loadScheduleOptions={this.loadScheduleOptions}
+                  />
                 )}
               />
             )}

From 63fa367e9d1fae0ff3250a1c40806303296a00c5 Mon Sep 17 00:00:00 2001
From: Caleb Boylan <calebboylan@gmail.com>
Date: Thu, 5 Mar 2020 10:23:39 -0800
Subject: [PATCH 34/48] Fix a typo in the collection README

---
 awx_collection/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx_collection/README.md b/awx_collection/README.md
index da70e001a5..c9abe15542 100644
--- a/awx_collection/README.md
+++ b/awx_collection/README.md
@@ -80,7 +80,7 @@ pip install -e .
 PYTHONPATH=awx_collection:$PYTHONPATH py.test awx_collection/test/awx/
 ```
 
-## Running Integration tests Tests
+## Running Integration Tests
 
 The integration tests require a virtualenv with `ansible` >= 2.9 and `tower_cli`.
 The collection must first be installed, which can be done using `make install_collection`.

From cd1ff6b16a0d4583e0a05a4e136efa81b26d0ac2 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Thu, 5 Mar 2020 14:43:54 -0500
Subject: [PATCH 35/48] fix a bug in OPTIONS /api/v2/schedules/

a side effect of this bug is that `awx schedules create` doesn't work
properly for non-admin users (i.e., users who have execute access for
a JT)

see: https://github.com/ansible/awx/issues/5717
---
 awx/main/access.py                            |  5 +++
 .../tests/functional/api/test_schedules.py    | 40 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/awx/main/access.py b/awx/main/access.py
index e0274e1fdf..29778b05d6 100644
--- a/awx/main/access.py
+++ b/awx/main/access.py
@@ -2429,6 +2429,11 @@ class ScheduleAccess(BaseAccess):
     def can_add(self, data):
         if not JobLaunchConfigAccess(self.user).can_add(data):
             return False
+        if not data:
+            return UnifiedJobTemplate.accessible_pk_qs(
+                self.user, 'execute_role'
+            ).exists()
+
         return self.check_related('unified_job_template', UnifiedJobTemplate, data, role_field='execute_role', mandatory=True)
 
     @check_superuser
diff --git a/awx/main/tests/functional/api/test_schedules.py b/awx/main/tests/functional/api/test_schedules.py
index bdb3534fb3..bae83ef93e 100644
--- a/awx/main/tests/functional/api/test_schedules.py
+++ b/awx/main/tests/functional/api/test_schedules.py
@@ -365,3 +365,43 @@ def test_zoneinfo(get, admin_user):
     url = reverse('api:schedule_zoneinfo')
     r = get(url, admin_user, expect=200)
     assert {'name': 'America/New_York'} in r.data
+
+
+@pytest.mark.django_db
+def test_normal_user_can_create_ujt_schedule(options, post, project, inventory, alice):
+    jt1 = JobTemplate.objects.create(
+        name='test-jt',
+        project=project,
+        playbook='helloworld.yml',
+        inventory=inventory
+    )
+    jt1.save()
+    url = reverse('api:schedule_list')
+
+    # can't create a schedule on JT1 because we don't have execute rights
+    params = {
+        'name': 'My Example Schedule',
+        'rrule': RRULE_EXAMPLE,
+        'unified_job_template': jt1.id,
+    }
+    assert 'POST' not in options(url, user=alice).data['actions'].keys()
+    post(url, params, alice, expect=403)
+
+    # now we can, because we're allowed to execute JT1
+    jt1.execute_role.members.add(alice)
+    assert 'POST' in options(url, user=alice).data['actions'].keys()
+    post(url, params, alice, expect=201)
+
+    # can't create a schedule on JT2 because we don't have execute rights
+    jt2 = JobTemplate.objects.create(
+        name='test-jt-2',
+        project=project,
+        playbook='helloworld.yml',
+        inventory=inventory
+    )
+    jt2.save()
+    post(url, {
+        'name': 'My Example Schedule',
+        'rrule': RRULE_EXAMPLE,
+        'unified_job_template': jt2.id,
+    }, alice, expect=403)

From a5afac62caa0b9bf8b57e749aa83400494ba0edd Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Thu, 5 Mar 2020 15:21:01 -0500
Subject: [PATCH 36/48] Fix panel reloading and clean up unneeded code

---
 .../screens/Template/WorkflowJobTemplate.jsx  | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 6c63e16ab0..e3e3783287 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -46,7 +46,7 @@ class WorkflowJobTemplate extends Component {
     const { setBreadcrumb, match } = this.props;
     const { id } = match.params;
 
-    this.setState({ contentError: null, hasContentLoading: true });
+    this.setState({ contentError: null });
     try {
       const { data } = await WorkflowJobTemplatesAPI.readDetail(id);
       if (data?.related?.webhook_key) {
@@ -107,22 +107,17 @@ class WorkflowJobTemplate extends Component {
       tab.id = n;
     });
 
-    let cardHeader = hasContentLoading ? null : (
-      <TabbedCardHeader>
-        <RoutedTabs tabsArray={tabsArray} />
-        <CardActions>
-          <CardCloseButton linkTo="/templates" />
-        </CardActions>
-      </TabbedCardHeader>
-    );
-
-    if (location.pathname.endsWith('edit')) {
-      cardHeader = null;
-    }
     if (hasContentLoading) {
-      return <ContentLoading />;
+      return (
+        <PageSection>
+          <Card>
+            <ContentLoading />
+          </Card>
+        </PageSection>
+      );
     }
-    if (!hasContentLoading && contentError) {
+
+    if (contentError) {
       return (
         <PageSection>
           <Card>
@@ -139,10 +134,19 @@ class WorkflowJobTemplate extends Component {
       );
     }
 
+    const cardHeader = (
+      <TabbedCardHeader>
+        <RoutedTabs tabsArray={tabsArray} />
+        <CardActions>
+          <CardCloseButton linkTo="/templates" />
+        </CardActions>
+      </TabbedCardHeader>
+    );
+
     return (
       <PageSection>
         <Card>
-          {cardHeader}
+          {location.pathname.endsWith('edit') ? null : cardHeader}
           <Switch>
             <Redirect
               from="/templates/workflow_job_template/:id"
@@ -195,7 +199,7 @@ class WorkflowJobTemplate extends Component {
                 />
               </Route>
             )}
-            {template.id && (
+            {template?.id && (
               <Route
                 path="/templates/:templateType/:id/schedules"
                 render={() => (
@@ -206,19 +210,17 @@ class WorkflowJobTemplate extends Component {
             <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>
-                )
-              }
+              render={() => (
+                <ContentError isNotFound>
+                  {match.params.id && (
+                    <Link
+                      to={`/templates/workflow_job_template/${match.params.id}/details`}
+                    >
+                      {i18n._(`View Template Details`)}
+                    </Link>
+                  )}
+                </ContentError>
+              )}
             />
           </Switch>
         </Card>

From d849e8189156e6580b28bbf3b0ef2d590fa8f5ab Mon Sep 17 00:00:00 2001
From: Jeff Bradberry <jeff.bradberry@gmail.com>
Date: Thu, 5 Mar 2020 16:45:38 -0500
Subject: [PATCH 37/48] Show API choice field metadata more correctly for null
 vs ''

---
 awx/api/metadata.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/awx/api/metadata.py b/awx/api/metadata.py
index 144aea3012..dba633a13c 100644
--- a/awx/api/metadata.py
+++ b/awx/api/metadata.py
@@ -101,8 +101,10 @@ class Metadata(metadata.SimpleMetadata):
                 (choice_value, choice_name) for choice_value, choice_name in field.choices.items()
             ]
             if not any(choice in ('', None) for choice, _ in choices):
-                if field.allow_blank or (field.allow_null and not isinstance(field, ChoiceNullField)):
+                if field.allow_blank:
                     choices = [("", "---------")] + choices
+                if field.allow_null and not isinstance(field, ChoiceNullField):
+                    choices = [(None, "---------")] + choices
             field_info['choices'] = choices
 
         # Indicate if a field is write-only.

From da94b2dc9ec505bf18afbc1e8090c8786021471d Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Fri, 6 Mar 2020 00:51:55 -0500
Subject: [PATCH 38/48] Add InventoryHostAdd route file

---
 .../HostForm}/HostForm.jsx                    | 24 +++--
 .../HostForm}/HostForm.test.jsx               | 91 +++++++++----------
 .../shared => components/HostForm}/index.js   |  0
 .../src/screens/Host/HostAdd/HostAdd.jsx      | 20 +---
 .../src/screens/Host/HostAdd/HostAdd.test.jsx | 64 ++++++++-----
 .../src/screens/Host/HostEdit/HostEdit.jsx    |  1 +
 awx/ui_next/src/screens/Host/Hosts.test.jsx   | 19 ++++
 .../InventoryHostAdd/InventoryHostAdd.jsx     | 42 +++++++++
 .../InventoryHostAdd.test.jsx                 | 70 ++++++++++++++
 .../Inventory/InventoryHostAdd/index.js       |  1 +
 .../InventoryHosts/InventoryHosts.jsx         | 20 +---
 .../InventoryHosts/InventoryHosts.test.jsx    | 25 +++++
 .../screens/Inventory/shared/data.host.json   | 86 ++++++++++++++++++
 13 files changed, 350 insertions(+), 113 deletions(-)
 rename awx/ui_next/src/{screens/Host/shared => components/HostForm}/HostForm.jsx (90%)
 rename awx/ui_next/src/{screens/Host/shared => components/HostForm}/HostForm.test.jsx (63%)
 rename awx/ui_next/src/{screens/Host/shared => components/HostForm}/index.js (100%)
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostAdd/index.js
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/shared/data.host.json

diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/components/HostForm/HostForm.jsx
similarity index 90%
rename from awx/ui_next/src/screens/Host/shared/HostForm.jsx
rename to awx/ui_next/src/components/HostForm/HostForm.jsx
index 3b72f71081..5e662ea313 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/components/HostForm/HostForm.jsx
@@ -1,22 +1,19 @@
 import React, { useState } from 'react';
-import { func, shape } from 'prop-types';
-
-import { useRouteMatch } from 'react-router-dom';
+import { bool, func, shape } from 'prop-types';
 import { Formik, useField } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Form, FormGroup } from '@patternfly/react-core';
-
 import FormField, {
   FormSubmitError,
   FieldTooltip,
 } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import { VariablesField } from '@components/CodeMirrorInput';
-import { required } from '@util/validators';
 import { InventoryLookup } from '@components/Lookup';
 import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
+import { required } from '@util/validators';
 
 const InventoryLookupField = withI18n()(({ i18n, host }) => {
   const [inventory, setInventory] = useState(
@@ -57,9 +54,14 @@ const InventoryLookupField = withI18n()(({ i18n, host }) => {
   );
 });
 
-const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
-  const hostAddMatch = useRouteMatch('/hosts/add');
-
+const HostForm = ({
+  handleCancel,
+  handleSubmit,
+  host,
+  isInventoryVisible,
+  i18n,
+  submitError,
+}) => {
   return (
     <Formik
       initialValues={{
@@ -87,7 +89,7 @@ const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
               type="text"
               label={i18n._(t`Description`)}
             />
-            {hostAddMatch && <InventoryLookupField host={host} />}
+            {isInventoryVisible && <InventoryLookupField host={host} />}
             <FormFullWidthLayout>
               <VariablesField
                 id="host-variables"
@@ -95,7 +97,7 @@ const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
                 label={i18n._(t`Variables`)}
               />
             </FormFullWidthLayout>
-            <FormSubmitError error={submitError} />
+            {submitError && <FormSubmitError error={submitError} />}
             <FormActionGroup
               onCancel={handleCancel}
               onSubmit={formik.handleSubmit}
@@ -111,6 +113,7 @@ HostForm.propTypes = {
   handleCancel: func.isRequired,
   handleSubmit: func.isRequired,
   host: shape({}),
+  isInventoryVisible: bool,
   submitError: shape({}),
 };
 
@@ -124,6 +127,7 @@ HostForm.defaultProps = {
       inventory: null,
     },
   },
+  isInventoryVisible: true,
   submitError: null,
 };
 
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.test.jsx b/awx/ui_next/src/components/HostForm/HostForm.test.jsx
similarity index 63%
rename from awx/ui_next/src/screens/Host/shared/HostForm.test.jsx
rename to awx/ui_next/src/components/HostForm/HostForm.test.jsx
index 8664b64eb0..c39867641e 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.test.jsx
+++ b/awx/ui_next/src/components/HostForm/HostForm.test.jsx
@@ -6,43 +6,43 @@ import HostForm from './HostForm';
 
 jest.mock('@api');
 
+const mockData = {
+  id: 1,
+  name: 'Foo',
+  description: 'Bar',
+  variables: '---',
+  inventory: 1,
+  summary_fields: {
+    inventory: {
+      id: 1,
+      name: 'Test Inv',
+    },
+  },
+};
+
 describe('<HostForm />', () => {
-  const meConfig = {
-    me: {
-      is_superuser: false,
-    },
-  };
-  const mockData = {
-    id: 1,
-    name: 'Foo',
-    description: 'Bar',
-    variables: '---',
-    inventory: 1,
-    summary_fields: {
-      inventory: {
-        id: 1,
-        name: 'Test Inv',
-      },
-    },
-  };
+  let wrapper;
+  const handleSubmit = jest.fn();
+  const handleCancel = jest.fn();
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('changing inputs should update form values', async () => {
-    let wrapper;
+  beforeEach(async () => {
     await act(async () => {
       wrapper = mountWithContexts(
         <HostForm
           host={mockData}
-          handleSubmit={jest.fn()}
-          handleCancel={jest.fn()}
-          me={meConfig.me}
+          handleSubmit={handleSubmit}
+          handleCancel={handleCancel}
         />
       );
     });
+  });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  test('changing inputs should update form values', async () => {
     await act(async () => {
       wrapper.find('input#host-name').simulate('change', {
         target: { value: 'new foo', name: 'name' },
@@ -59,35 +59,30 @@ describe('<HostForm />', () => {
   });
 
   test('calls handleSubmit when form submitted', async () => {
-    const handleSubmit = jest.fn();
-    const wrapper = mountWithContexts(
-      <HostForm
-        host={mockData}
-        handleSubmit={handleSubmit}
-        handleCancel={jest.fn()}
-        me={meConfig.me}
-      />
-    );
     expect(handleSubmit).not.toHaveBeenCalled();
     await act(async () => {
       wrapper.find('button[aria-label="Save"]').simulate('click');
     });
-    expect(handleSubmit).toHaveBeenCalled();
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
   });
 
   test('calls "handleCancel" when Cancel button is clicked', () => {
-    const handleCancel = jest.fn();
-
-    const wrapper = mountWithContexts(
-      <HostForm
-        host={mockData}
-        handleSubmit={jest.fn()}
-        handleCancel={handleCancel}
-        me={meConfig.me}
-      />
-    );
     expect(handleCancel).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
-    expect(handleCancel).toBeCalled();
+    expect(handleCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test('should hide inventory lookup field', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <HostForm
+          host={mockData}
+          handleSubmit={jest.fn()}
+          handleCancel={jest.fn()}
+          isInventoryVisible={false}
+        />
+      );
+    });
+    expect(wrapper.find('InventoryLookupField').length).toBe(0);
   });
 });
diff --git a/awx/ui_next/src/screens/Host/shared/index.js b/awx/ui_next/src/components/HostForm/index.js
similarity index 100%
rename from awx/ui_next/src/screens/Host/shared/index.js
rename to awx/ui_next/src/components/HostForm/index.js
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index 422cabb721..122ce7dd27 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -1,34 +1,24 @@
 import React, { useState } from 'react';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { CardBody } from '@components/Card';
+import HostForm from '@components/HostForm';
 import { HostsAPI } from '@api';
-import HostForm from '../shared';
 
 function HostAdd() {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
-  const hostsMatch = useRouteMatch('/hosts');
-  const inventoriesMatch = useRouteMatch('/inventories/inventory/:id/hosts');
-  const url = hostsMatch ? hostsMatch.url : inventoriesMatch.url;
 
   const handleSubmit = async formData => {
-    const values = {
-      ...formData,
-      inventory: inventoriesMatch
-        ? inventoriesMatch.params.id
-        : formData.inventory,
-    };
-
     try {
-      const { data: response } = await HostsAPI.create(values);
-      history.push(`${url}/${response.id}/details`);
+      const { data: response } = await HostsAPI.create(formData);
+      history.push(`/hosts/${response.id}/details`);
     } catch (error) {
       setFormError(error);
     }
   };
 
   const handleCancel = () => {
-    history.push(`${url}`);
+    history.push(`/hosts`);
   };
 
   return (
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
index c7b6df05f3..1096b83ca6 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
@@ -1,27 +1,32 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import HostAdd from './HostAdd';
 import { HostsAPI } from '@api';
 
 jest.mock('@api');
 
+const hostData = {
+  name: 'new name',
+  description: 'new description',
+  inventory: 1,
+  variables: '---\nfoo: bar',
+};
+
+HostsAPI.create.mockResolvedValue({
+  data: {
+    ...hostData,
+    id: 5,
+  },
+});
+
 describe('<HostAdd />', () => {
   let wrapper;
   let history;
 
-  const hostData = {
-    name: 'new name',
-    description: 'new description',
-    inventory: 1,
-    variables: '---\nfoo: bar',
-  };
-
   beforeEach(async () => {
-    history = createMemoryHistory({
-      initialEntries: ['/hosts/add'],
-    });
+    history = createMemoryHistory();
     await act(async () => {
       wrapper = mountWithContexts(<HostAdd />, {
         context: { router: { history } },
@@ -29,13 +34,12 @@ describe('<HostAdd />', () => {
     });
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
   test('handleSubmit should post to api', async () => {
-    HostsAPI.create.mockResolvedValueOnce({
-      data: {
-        ...hostData,
-        id: 5,
-      },
-    });
     await act(async () => {
       wrapper.find('HostForm').prop('handleSubmit')(hostData);
     });
@@ -43,21 +47,31 @@ describe('<HostAdd />', () => {
   });
 
   test('should navigate to hosts list when cancel is clicked', async () => {
-    wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
+    await act(async () => {
+      wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    });
     expect(history.location.pathname).toEqual('/hosts');
   });
 
   test('successful form submission should trigger redirect', async () => {
-    HostsAPI.create.mockResolvedValueOnce({
-      data: {
-        ...hostData,
-        id: 5,
-      },
-    });
-    await waitForElement(wrapper, 'button[aria-label="Save"]');
     await act(async () => {
       wrapper.find('HostForm').invoke('handleSubmit')(hostData);
     });
+    expect(wrapper.find('FormSubmitError').length).toBe(0);
     expect(history.location.pathname).toEqual('/hosts/5/details');
   });
+
+  test('failed form submission should show an error message', async () => {
+    const error = {
+      response: {
+        data: { detail: 'An error occurred' },
+      },
+    };
+    HostsAPI.create.mockImplementationOnce(() => Promise.reject(error));
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(hostData);
+    });
+    wrapper.update();
+    expect(wrapper.find('FormSubmitError').length).toBe(1);
+  });
 });
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index d2ef0252e9..f6dc82e767 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { CardBody } from '@components/Card';
+import HostForm from '@components/HostForm';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
diff --git a/awx/ui_next/src/screens/Host/Hosts.test.jsx b/awx/ui_next/src/screens/Host/Hosts.test.jsx
index 0581b3371e..7db85fbb84 100644
--- a/awx/ui_next/src/screens/Host/Hosts.test.jsx
+++ b/awx/ui_next/src/screens/Host/Hosts.test.jsx
@@ -30,4 +30,23 @@ describe('<Hosts />', () => {
     expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
     wrapper.unmount();
   });
+
+  test('should render Host component', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/hosts/1'],
+    });
+
+    const match = {
+      path: '/hosts/:id',
+      url: '/hosts/1',
+      isExact: true,
+    };
+
+    const wrapper = mountWithContexts(<Hosts />, {
+      context: { router: { history, route: { match } } },
+    });
+
+    expect(wrapper.find('Host').length).toBe(1);
+    wrapper.unmount();
+  });
 });
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.jsx
new file mode 100644
index 0000000000..9afb38c90b
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { CardBody } from '@components/Card';
+import HostForm from '@components/HostForm';
+
+import { HostsAPI } from '@api';
+
+function InventoryHostAdd({ inventory }) {
+  const [formError, setFormError] = useState(null);
+  const hostsUrl = `/inventories/inventory/${inventory.id}/hosts`;
+  const history = useHistory();
+
+  const handleSubmit = async formData => {
+    try {
+      const values = {
+        ...formData,
+        inventory: inventory.id,
+      };
+      const { data: response } = await HostsAPI.create(values);
+      history.push(`${hostsUrl}/${response.id}/details`);
+    } catch (error) {
+      setFormError(error);
+    }
+  };
+
+  const handleCancel = () => {
+    history.push(hostsUrl);
+  };
+
+  return (
+    <CardBody>
+      <HostForm
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        isInventoryVisible={false}
+        submitError={formError}
+      />
+    </CardBody>
+  );
+}
+
+export default InventoryHostAdd;
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.test.jsx
new file mode 100644
index 0000000000..d17216ac10
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.test.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import InventoryHostAdd from './InventoryHostAdd';
+import mockHost from '../shared/data.host.json';
+import { HostsAPI } from '@api';
+
+jest.mock('@api');
+
+HostsAPI.create.mockResolvedValue({
+  data: {
+    ...mockHost,
+  },
+});
+
+describe('<InventoryHostAdd />', () => {
+  let wrapper;
+  let history;
+
+  beforeAll(async () => {
+    history = createMemoryHistory();
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryHostAdd inventory={{ id: 3 }} />, {
+        context: { router: { history } },
+      });
+    });
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  test('handleSubmit should post to api', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').prop('handleSubmit')(mockHost);
+    });
+    expect(HostsAPI.create).toHaveBeenCalledWith(mockHost);
+  });
+
+  test('should navigate to hosts list when cancel is clicked', () => {
+    wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
+    expect(history.location.pathname).toEqual('/inventories/inventory/3/hosts');
+  });
+
+  test('successful form submission should trigger redirect', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(mockHost);
+    });
+    expect(wrapper.find('FormSubmitError').length).toBe(0);
+    expect(history.location.pathname).toEqual(
+      '/inventories/inventory/3/hosts/2/details'
+    );
+  });
+
+  test('failed form submission should show an error message', async () => {
+    const error = {
+      response: {
+        data: { detail: 'An error occurred' },
+      },
+    };
+    HostsAPI.create.mockImplementationOnce(() => Promise.reject(error));
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(mockHost);
+    });
+    wrapper.update();
+    expect(wrapper.find('FormSubmitError').length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostAdd/index.js b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/index.js
new file mode 100644
index 0000000000..56bb7e05ad
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostAdd/index.js
@@ -0,0 +1 @@
+export { default } from './InventoryHostAdd';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
index 3257024cef..f8f4578c71 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
@@ -1,28 +1,18 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
-import Host from '../../Host/Host';
+import InventoryHostAdd from '../InventoryHostAdd';
 import InventoryHostList from './InventoryHostList';
-import HostAdd from '../../Host/HostAdd';
 
 function InventoryHosts({ setBreadcrumb, inventory }) {
   return (
     <Switch>
       <Route key="host-add" path="/inventories/inventory/:id/hosts/add">
-        <HostAdd />
+        <InventoryHostAdd inventory={inventory} />
+      </Route>
+      <Route key="host-list" path="/inventories/inventory/:id/hosts">
+        <InventoryHostList />
       </Route>
-      <Route
-        key="host"
-        path="/inventories/inventory/:id/hosts/:hostId"
-        render={() => (
-          <Host setBreadcrumb={setBreadcrumb} inventory={inventory} />
-        )}
-      />
-      <Route
-        key="host-list"
-        path="/inventories/inventory/:id/hosts/"
-        render={() => <InventoryHostList setBreadcrumb={setBreadcrumb} />}
-      />
     </Switch>
   );
 }
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx
new file mode 100644
index 0000000000..140a6e57ea
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import InventoryHosts from './InventoryHosts';
+
+describe('<InventoryHosts />', () => {
+  test('should render inventory host list', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/inventories/inventory/1/hosts'],
+    });
+
+    const match = {
+      path: '/inventories/inventory/:id/hosts',
+      url: '/inventories/inventory/1/hosts',
+      isExact: true,
+    };
+
+    const wrapper = mountWithContexts(<InventoryHosts />, {
+      context: { router: { history, route: { match } } },
+    });
+
+    expect(wrapper.find('InventoryHostList').length).toBe(1);
+    wrapper.unmount();
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/shared/data.host.json b/awx/ui_next/src/screens/Inventory/shared/data.host.json
new file mode 100644
index 0000000000..a4975ad01b
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/shared/data.host.json
@@ -0,0 +1,86 @@
+{
+  "id": 2,
+  "type": "host",
+  "url": "/api/v2/hosts/2/",
+  "related": {
+      "created_by": "/api/v2/users/1/",
+      "modified_by": "/api/v2/users/1/",
+      "variable_data": "/api/v2/hosts/2/variable_data/",
+      "groups": "/api/v2/hosts/2/groups/",
+      "all_groups": "/api/v2/hosts/2/all_groups/",
+      "job_events": "/api/v2/hosts/2/job_events/",
+      "job_host_summaries": "/api/v2/hosts/2/job_host_summaries/",
+      "activity_stream": "/api/v2/hosts/2/activity_stream/",
+      "inventory_sources": "/api/v2/hosts/2/inventory_sources/",
+      "smart_inventories": "/api/v2/hosts/2/smart_inventories/",
+      "ad_hoc_commands": "/api/v2/hosts/2/ad_hoc_commands/",
+      "ad_hoc_command_events": "/api/v2/hosts/2/ad_hoc_command_events/",
+      "insights": "/api/v2/hosts/2/insights/",
+      "ansible_facts": "/api/v2/hosts/2/ansible_facts/",
+      "inventory": "/api/v2/inventories/3/",
+      "last_job": "/api/v2/jobs/3/",
+      "last_job_host_summary": "/api/v2/job_host_summaries/1/"
+  },
+  "summary_fields": {
+      "inventory": {
+          "id": 3,
+          "name": "Mikes Inventory",
+          "description": "",
+          "has_active_failures": false,
+          "total_hosts": 3,
+          "hosts_with_active_failures": 0,
+          "total_groups": 0,
+          "groups_with_active_failures": 0,
+          "has_inventory_sources": true,
+          "total_inventory_sources": 1,
+          "inventory_sources_with_failures": 0,
+          "organization_id": 3,
+          "kind": ""
+      },
+      "last_job": {
+          "id": 3,
+          "name": "Ping",
+          "description": "",
+          "finished": "2019-10-28T21:29:08.880572Z",
+          "status": "successful",
+          "failed": false,
+          "job_template_id": 9,
+          "job_template_name": "Ping"
+      },
+      "last_job_host_summary": {
+          "id": 1,
+          "failed": false
+      },
+      "user_capabilities": {
+          "edit": true,
+          "delete": true
+      },
+      "groups": {
+          "count": 0,
+          "results": []
+      },
+      "recent_jobs": [
+          {
+              "id": 3,
+              "name": "Ping",
+              "status": "successful",
+              "finished": "2019-10-28T21:29:08.880572Z",
+              "type": "job"
+          }
+      ]
+  },
+  "created": "2019-10-28T21:26:54.508081Z",
+  "modified": "2019-10-29T20:18:41.915796Z",
+  "name": "localhost",
+  "description": "localhost description",
+  "inventory": 3,
+  "enabled": true,
+  "instance_id": "",
+  "variables": "---\nansible_connection: local",
+  "has_active_failures": false,
+  "has_inventory_sources": false,
+  "last_job": 3,
+  "last_job_host_summary": 1,
+  "insights_system_id": null,
+  "ansible_facts_modified": null
+}
\ No newline at end of file

From bb6d9af90b1e9893f5698b46d6d66aab58260764 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Fri, 6 Mar 2020 01:35:58 -0500
Subject: [PATCH 39/48] Create nested inventory host route files and components

---
 .../Inventory/InventoryHost/InventoryHost.jsx | 174 ++++++++++++++++++
 .../InventoryHost/InventoryHost.test.jsx      |  79 ++++++++
 .../screens/Inventory/InventoryHost/index.js  |   1 +
 .../InventoryHostDetail.jsx                   | 129 +++++++++++++
 .../InventoryHostDetail.test.jsx              |  88 +++++++++
 .../Inventory/InventoryHostDetail/index.js    |   1 +
 .../InventoryHostEdit/InventoryHostEdit.jsx   |  44 +++++
 .../InventoryHostEdit.test.jsx                |  77 ++++++++
 .../Inventory/InventoryHostEdit/index.js      |   1 +
 .../InventoryHosts/InventoryHosts.jsx         |   4 +
 10 files changed, 598 insertions(+)
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHost/index.js
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostDetail/index.js
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.test.jsx
 create mode 100644 awx/ui_next/src/screens/Inventory/InventoryHostEdit/index.js

diff --git a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
new file mode 100644
index 0000000000..89121e8cd5
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Switch,
+  Route,
+  Redirect,
+  Link,
+  useRouteMatch,
+  useLocation,
+} from 'react-router-dom';
+import useRequest from '@util/useRequest';
+
+import { HostsAPI } from '@api';
+import { Card, CardActions } from '@patternfly/react-core';
+import { CaretLeftIcon } from '@patternfly/react-icons';
+import { TabbedCardHeader } from '@components/Card';
+import CardCloseButton from '@components/CardCloseButton';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import RoutedTabs from '@components/RoutedTabs';
+import JobList from '@components/JobList';
+import InventoryHostDetail from '../InventoryHostDetail';
+import InventoryHostEdit from '../InventoryHostEdit';
+
+function InventoryHost({ i18n, setBreadcrumb, inventory }) {
+  const location = useLocation();
+  const match = useRouteMatch('/inventories/inventory/:id/hosts/:hostId');
+  const hostListUrl = `/inventories/inventory/${inventory.id}/hosts`;
+
+  const {
+    result: { host },
+    error: contentError,
+    isLoading,
+    request: fetchHost,
+  } = useRequest(
+    useCallback(async () => {
+      const { data } = await HostsAPI.readDetail(match.params.hostId);
+
+      return {
+        host: data,
+      };
+    }, [match.params.hostId]), // eslint-disable-line react-hooks/exhaustive-deps
+    {
+      host: null,
+    }
+  );
+
+  useEffect(() => {
+    fetchHost();
+  }, [fetchHost]);
+
+  useEffect(() => {
+    if (inventory && host) {
+      setBreadcrumb(inventory, host);
+    }
+  }, [inventory, host, setBreadcrumb]);
+
+  const tabsArray = [
+    {
+      name: (
+        <>
+          <CaretLeftIcon />
+          {i18n._(t`Back to Hosts`)}
+        </>
+      ),
+      link: `${hostListUrl}`,
+      id: 0,
+    },
+    {
+      name: i18n._(t`Details`),
+      link: `${match.url}/details`,
+      id: 1,
+    },
+    {
+      name: i18n._(t`Facts`),
+      link: `${match.url}/facts`,
+      id: 2,
+    },
+    {
+      name: i18n._(t`Groups`),
+      link: `${match.url}/groups`,
+      id: 3,
+    },
+    {
+      name: i18n._(t`Completed Jobs`),
+      link: `${match.url}/completed_jobs`,
+      id: 4,
+    },
+  ];
+
+  let cardHeader = (
+    <TabbedCardHeader>
+      <RoutedTabs tabsArray={tabsArray} />
+      <CardActions>
+        <CardCloseButton linkTo={hostListUrl} />
+      </CardActions>
+    </TabbedCardHeader>
+  );
+
+  if (location.pathname.endsWith('edit')) {
+    cardHeader = null;
+  }
+
+  if (isLoading) {
+    return <ContentLoading />;
+  }
+
+  if (!isLoading && contentError) {
+    return (
+      <Card>
+        <ContentError error={contentError}>
+          {contentError.response && contentError.response.status === 404 && (
+            <span>
+              {i18n._(`Host not found.`)}{' '}
+              <Link to={hostListUrl}>
+                {i18n._(`View all Inventory Hosts.`)}
+              </Link>
+            </span>
+          )}
+        </ContentError>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      {cardHeader}
+      <Switch>
+        <Redirect
+          from="/inventories/inventory/:id/hosts/:hostId"
+          to="/inventories/inventory/:id/hosts/:hostId/details"
+          exact
+        />
+        {host &&
+          inventory && [
+            <Route
+              key="details"
+              path="/inventories/inventory/:id/hosts/:hostId/details"
+            >
+              <InventoryHostDetail host={host} />
+            </Route>,
+            <Route
+              key="edit"
+              path="/inventories/inventory/:id/hosts/:hostId/edit"
+            >
+              <InventoryHostEdit host={host} inventory={inventory} />
+            </Route>,
+            <Route
+              key="completed-jobs"
+              path="/inventories/inventory/:id/hosts/:hostId/completed_jobs"
+            >
+              <JobList defaultParams={{ job__hosts: host.id }} />
+            </Route>,
+          ]}
+        <Route
+          key="not-found"
+          path="*"
+          render={() =>
+            !isLoading && (
+              <ContentError isNotFound>
+                <Link to={`${match.url}/details`}>
+                  {i18n._(`View Inventory Host Details`)}
+                </Link>
+              </ContentError>
+            )
+          }
+        />
+      </Switch>
+    </>
+  );
+}
+
+export default withI18n()(InventoryHost);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
new file mode 100644
index 0000000000..bea26df827
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { HostsAPI } from '@api';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import mockHost from '../shared/data.host.json';
+import InventoryHost from './InventoryHost';
+
+jest.mock('@api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({
+    url: '/inventories/inventory/1/hosts/1',
+    params: { id: 1, hostId: 1 },
+  }),
+}));
+
+HostsAPI.readDetail.mockResolvedValue({
+  data: { ...mockHost },
+});
+
+const mockInventory = {
+  id: 1,
+  name: 'Mock Inventory',
+};
+
+describe('<InventoryHost />', () => {
+  let wrapper;
+  let history;
+
+  beforeEach(async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHost inventory={mockInventory} setBreadcrumb={() => {}} />
+      );
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('should render expected tabs', async () => {
+    const expectedTabs = [
+      'Back to Hosts',
+      'Details',
+      'Facts',
+      'Groups',
+      'Completed Jobs',
+    ];
+    wrapper.find('RoutedTabs li').forEach((tab, index) => {
+      expect(tab.text()).toEqual(expectedTabs[index]);
+    });
+  });
+
+  test('should show content error when api throws error on initial render', async () => {
+    HostsAPI.readDetail.mockRejectedValueOnce(new Error());
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHost inventory={mockInventory} setBreadcrumb={() => {}} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
+    history = createMemoryHistory({
+      initialEntries: ['/inventories/inventory/1/hosts/1/foobar'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHost inventory={mockInventory} setBreadcrumb={() => {}} />,
+        { context: { router: { history } } }
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHost/index.js b/awx/ui_next/src/screens/Inventory/InventoryHost/index.js
new file mode 100644
index 0000000000..5419035b15
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHost/index.js
@@ -0,0 +1 @@
+export { default } from './InventoryHost';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
new file mode 100644
index 0000000000..cfa36e4e83
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Host } from '@types';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '@components/Card';
+import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { VariablesDetail } from '@components/CodeMirrorInput';
+import Sparkline from '@components/Sparkline';
+import DeleteButton from '@components/DeleteButton';
+import { HostsAPI } from '@api';
+import HostToggle from '@components/HostToggle';
+
+function InventoryHostDetail({ i18n, host }) {
+  const {
+    created,
+    description,
+    id,
+    modified,
+    name,
+    variables,
+    summary_fields: {
+      inventory,
+      recent_jobs,
+      created_by,
+      modified_by,
+      user_capabilities,
+    },
+  } = host;
+
+  const [isLoading, setIsloading] = useState(false);
+  const [deletionError, setDeletionError] = useState(false);
+  const history = useHistory();
+
+  const handleHostDelete = async () => {
+    setIsloading(true);
+    try {
+      await HostsAPI.destroy(id);
+      history.push(`/inventories/inventory/${inventory.id}/hosts`);
+    } catch (err) {
+      setDeletionError(err);
+    } finally {
+      setIsloading(false);
+    }
+  };
+
+  if (!isLoading && deletionError) {
+    return (
+      <AlertModal
+        isOpen={deletionError}
+        variant="error"
+        title={i18n._(t`Error!`)}
+        onClose={() => setDeletionError(false)}
+      >
+        {i18n._(t`Failed to delete ${name}.`)}
+        <ErrorDetail error={deletionError} />
+      </AlertModal>
+    );
+  }
+
+  const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
+
+  return (
+    <CardBody>
+      <HostToggle host={host} css="padding-bottom: 40px" />
+      <DetailList gutter="sm">
+        <Detail label={i18n._(t`Name`)} value={name} />
+        <Detail
+          label={i18n._(t`Activity`)}
+          value={<Sparkline jobs={recentPlaybookJobs} />}
+        />
+        <Detail label={i18n._(t`Description`)} value={description} />
+        <UserDateDetail
+          date={created}
+          label={i18n._(t`Created`)}
+          user={created_by}
+        />
+        <UserDateDetail
+          date={modified}
+          label={i18n._(t`Last Modified`)}
+          user={modified_by}
+        />
+        <VariablesDetail
+          label={i18n._(t`Variables`)}
+          rows={4}
+          value={variables}
+        />
+      </DetailList>
+      <CardActionsRow>
+        {user_capabilities?.edit && (
+          <Button
+            aria-label={i18n._(t`edit`)}
+            component={Link}
+            to={`/inventories/inventory/${inventory.id}/hosts/${id}/edit`}
+          >
+            {i18n._(t`Edit`)}
+          </Button>
+        )}
+        {user_capabilities?.delete && (
+          <DeleteButton
+            name={name}
+            modalTitle={i18n._(t`Delete Host`)}
+            onConfirm={() => handleHostDelete()}
+          />
+        )}
+      </CardActionsRow>
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={() => setDeletionError(null)}
+        >
+          {i18n._(t`Failed to delete host.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
+    </CardBody>
+  );
+}
+
+InventoryHostDetail.propTypes = {
+  host: Host.isRequired,
+};
+
+export default withI18n()(InventoryHostDetail);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.jsx
new file mode 100644
index 0000000000..66735e19cb
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import InventoryHostDetail from './InventoryHostDetail';
+import { HostsAPI } from '@api';
+import mockHost from '../shared/data.host.json';
+
+jest.mock('@api');
+
+describe('<InventoryHostDetail />', () => {
+  let wrapper;
+
+  describe('User has edit permissions', () => {
+    beforeAll(() => {
+      wrapper = mountWithContexts(<InventoryHostDetail host={mockHost} />);
+    });
+
+    afterAll(() => {
+      wrapper.unmount();
+    });
+
+    test('should render Details', async () => {
+      function assertDetail(label, value) {
+        expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
+        expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
+      }
+
+      assertDetail('Name', 'localhost');
+      assertDetail('Description', 'localhost description');
+      assertDetail('Created', '10/28/2019, 9:26:54 PM');
+      assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
+    });
+
+    test('should show edit button for users with edit permission', () => {
+      const editButton = wrapper.find('Button[aria-label="edit"]');
+      expect(editButton.text()).toEqual('Edit');
+      expect(editButton.prop('to')).toBe(
+        '/inventories/inventory/3/hosts/2/edit'
+      );
+    });
+
+    test('expected api call is made for delete', async () => {
+      await act(async () => {
+        wrapper.find('DeleteButton').invoke('onConfirm')();
+      });
+      expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
+    });
+
+    test('Error dialog shown for failed deletion', async () => {
+      HostsAPI.destroy.mockImplementationOnce(() =>
+        Promise.reject(new Error())
+      );
+      await act(async () => {
+        wrapper.find('DeleteButton').invoke('onConfirm')();
+      });
+      await waitForElement(
+        wrapper,
+        'Modal[title="Error!"]',
+        el => el.length === 1
+      );
+      await act(async () => {
+        wrapper.find('Modal[title="Error!"]').invoke('onClose')();
+      });
+      await waitForElement(
+        wrapper,
+        'Modal[title="Error!"]',
+        el => el.length === 0
+      );
+    });
+  });
+
+  describe('User has read-only permissions', () => {
+    beforeAll(() => {
+      const readOnlyHost = { ...mockHost };
+      readOnlyHost.summary_fields.user_capabilities.edit = false;
+
+      wrapper = mountWithContexts(<InventoryHostDetail host={mockHost} />);
+    });
+
+    afterAll(() => {
+      wrapper.unmount();
+    });
+
+    test('should hide edit button for users without edit permission', async () => {
+      expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
+    });
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/index.js b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/index.js
new file mode 100644
index 0000000000..df9deaf20d
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/index.js
@@ -0,0 +1 @@
+export { default } from './InventoryHostDetail';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.jsx
new file mode 100644
index 0000000000..c7f0845bd4
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.jsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { CardBody } from '@components/Card';
+import HostForm from '@components/HostForm';
+
+import { HostsAPI } from '@api';
+
+function InventoryHostEdit({ host, inventory }) {
+  const [formError, setFormError] = useState(null);
+  const detailsUrl = `/inventories/inventory/${inventory.id}/hosts/${host.id}/details`;
+  const history = useHistory();
+
+  const handleSubmit = async values => {
+    try {
+      await HostsAPI.update(host.id, values);
+      history.push(detailsUrl);
+    } catch (error) {
+      setFormError(error);
+    }
+  };
+
+  const handleCancel = () => {
+    history.push(detailsUrl);
+  };
+
+  return (
+    <CardBody>
+      <HostForm
+        host={host}
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        isInventoryVisible={false}
+        submitError={formError}
+      />
+    </CardBody>
+  );
+}
+
+InventoryHostEdit.propTypes = {
+  host: PropTypes.shape().isRequired,
+};
+
+export default InventoryHostEdit;
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.test.jsx
new file mode 100644
index 0000000000..f6a6ccb849
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.test.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { HostsAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import InventoryHostEdit from './InventoryHostEdit';
+import mockHost from '../shared/data.host.json';
+
+jest.mock('@api');
+
+describe('<InventoryHostEdit />', () => {
+  let wrapper;
+  let history;
+
+  const updatedHostData = {
+    name: 'new name',
+    description: 'new description',
+    variables: '---\nfoo: bar',
+  };
+
+  beforeAll(async () => {
+    history = createMemoryHistory();
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHostEdit host={mockHost} inventory={{ id: 123 }} />,
+        {
+          context: { router: { history } },
+        }
+      );
+    });
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  test('handleSubmit should call api update', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').prop('handleSubmit')(updatedHostData);
+    });
+    expect(HostsAPI.update).toHaveBeenCalledWith(2, updatedHostData);
+  });
+
+  test('should navigate to inventory host detail when cancel is clicked', async () => {
+    await act(async () => {
+      wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    });
+    expect(history.location.pathname).toEqual(
+      '/inventories/inventory/123/hosts/2/details'
+    );
+  });
+
+  test('should navigate to inventory host detail after successful submission', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(updatedHostData);
+    });
+    expect(wrapper.find('FormSubmitError').length).toBe(0);
+    expect(history.location.pathname).toEqual(
+      '/inventories/inventory/123/hosts/2/details'
+    );
+  });
+
+  test('failed form submission should show an error message', async () => {
+    const error = {
+      response: {
+        data: { detail: 'An error occurred' },
+      },
+    };
+    HostsAPI.update.mockImplementationOnce(() => Promise.reject(error));
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(mockHost);
+    });
+    wrapper.update();
+    expect(wrapper.find('FormSubmitError').length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostEdit/index.js b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/index.js
new file mode 100644
index 0000000000..428da2e09c
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostEdit/index.js
@@ -0,0 +1 @@
+export { default } from './InventoryHostEdit';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
index f8f4578c71..a15fbebf6d 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
+import InventoryHost from '../InventoryHost';
 import InventoryHostAdd from '../InventoryHostAdd';
 import InventoryHostList from './InventoryHostList';
 
@@ -10,6 +11,9 @@ function InventoryHosts({ setBreadcrumb, inventory }) {
       <Route key="host-add" path="/inventories/inventory/:id/hosts/add">
         <InventoryHostAdd inventory={inventory} />
       </Route>
+      <Route key="host" path="/inventories/inventory/:id/hosts/:hostId">
+        <InventoryHost setBreadcrumb={setBreadcrumb} inventory={inventory} />
+      </Route>
       <Route key="host-list" path="/inventories/inventory/:id/hosts">
         <InventoryHostList />
       </Route>

From 3d5a002676b8c355c57f60275c717b2f3b0e00ee Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Fri, 6 Mar 2020 01:36:38 -0500
Subject: [PATCH 40/48] Remove all inventory route logic from Host screens

---
 awx/ui_next/src/screens/Host/Host.jsx         | 123 ++++-------------
 awx/ui_next/src/screens/Host/Host.test.jsx    |  52 +++-----
 .../screens/Host/HostDetail/HostDetail.jsx    |  86 +++++-------
 .../Host/HostDetail/HostDetail.test.jsx       | 126 ++++++++++--------
 .../src/screens/Host/HostEdit/HostEdit.jsx    |  21 +--
 .../screens/Host/HostEdit/HostEdit.test.jsx   |  85 +++++++-----
 awx/ui_next/src/screens/Host/data.host.json   |  12 --
 7 files changed, 215 insertions(+), 290 deletions(-)

diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx
index 37096fc024..2a8f286bd2 100644
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@@ -10,7 +10,6 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { Card, CardActions } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
@@ -24,20 +23,13 @@ import HostEdit from './HostEdit';
 import HostGroups from './HostGroups';
 import { HostsAPI } from '@api';
 
-function Host({ inventory, i18n, setBreadcrumb }) {
+function Host({ i18n, setBreadcrumb }) {
   const [host, setHost] = useState(null);
   const [contentError, setContentError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(true);
 
   const location = useLocation();
-  const hostsMatch = useRouteMatch('/hosts/:id');
-  const inventoriesMatch = useRouteMatch(
-    '/inventories/inventory/:id/hosts/:hostId'
-  );
-  const baseUrl = hostsMatch ? hostsMatch.url : inventoriesMatch.url;
-  const hostListUrl = hostsMatch
-    ? '/hosts'
-    : `/inventories/inventory/${inventoriesMatch.params.id}/hosts`;
+  const match = useRouteMatch('/hosts/:id');
 
   useEffect(() => {
     (async () => {
@@ -45,17 +37,10 @@ function Host({ inventory, i18n, setBreadcrumb }) {
       setHasContentLoading(true);
 
       try {
-        const hostId = hostsMatch
-          ? hostsMatch.params.id
-          : inventoriesMatch.params.hostId;
-        const { data } = await HostsAPI.readDetail(hostId);
-        setHost(data);
+        const { data } = await HostsAPI.readDetail(match.params.id);
 
-        if (hostsMatch) {
-          setBreadcrumb(data);
-        } else if (inventoriesMatch) {
-          setBreadcrumb(inventory, data);
-        }
+        setHost(data);
+        setBreadcrumb(data);
       } catch (error) {
         setContentError(error);
       } finally {
@@ -67,44 +52,31 @@ function Host({ inventory, i18n, setBreadcrumb }) {
   const tabsArray = [
     {
       name: i18n._(t`Details`),
-      link: `${baseUrl}/details`,
+      link: `${match.url}/details`,
       id: 0,
     },
     {
       name: i18n._(t`Facts`),
-      link: `${baseUrl}/facts`,
+      link: `${match.url}/facts`,
       id: 1,
     },
     {
       name: i18n._(t`Groups`),
-      link: `${baseUrl}/groups`,
+      link: `${match.url}/groups`,
       id: 2,
     },
     {
       name: i18n._(t`Completed Jobs`),
-      link: `${baseUrl}/completed_jobs`,
+      link: `${match.url}/completed_jobs`,
       id: 3,
     },
   ];
 
-  if (inventoriesMatch) {
-    tabsArray.unshift({
-      name: (
-        <>
-          <CaretLeftIcon />
-          {i18n._(t`Back to Hosts`)}
-        </>
-      ),
-      link: hostListUrl,
-      id: 99,
-    });
-  }
-
   let cardHeader = (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
       <CardActions>
-        <CardCloseButton linkTo={hostListUrl} />
+        <CardCloseButton linkTo="/hosts" />
       </CardActions>
     </TabbedCardHeader>
   );
@@ -124,7 +96,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
           {contentError.response && contentError.response.status === 404 && (
             <span>
               {i18n._(`Host not found.`)}{' '}
-              <Link to={hostListUrl}>{i18n._(`View all Hosts.`)}</Link>
+              <Link to="/hosts">{i18n._(`View all Hosts.`)}</Link>
             </span>
           )}
         </ContentError>
@@ -132,72 +104,35 @@ function Host({ inventory, i18n, setBreadcrumb }) {
     );
   }
 
-  const redirect = hostsMatch ? (
-    <Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
-  ) : (
-    <Redirect
-      from="/inventories/inventory/:id/hosts/:hostId"
-      to="/inventories/inventory/:id/hosts/:hostId/details"
-      exact
-    />
-  );
-
   return (
     <Card>
       {cardHeader}
       <Switch>
-        {redirect}
-        {host && (
-          <Route
-            path={[
-              '/hosts/:id/details',
-              '/inventories/inventory/:id/hosts/:hostId/details',
-            ]}
-          >
-            <HostDetail
-              host={host}
-              onUpdateHost={newHost => setHost(newHost)}
-            />
-          </Route>
-        )}
-        {host && (
-          <Route
-            path={[
-              '/hosts/:id/edit',
-              '/inventories/inventory/:id/hosts/:hostId/edit',
-            ]}
-            render={() => <HostEdit host={host} />}
-          />
-        )}
-        {host && (
-          <Route
-            path="/hosts/:id/facts"
-            render={() => <HostFacts host={host} />}
-          />
-        )}
-        {host && (
-          <Route
-            path="/hosts/:id/groups"
-            render={() => <HostGroups host={host} />}
-          />
-        )}
-        {host?.id && (
-          <Route
-            path={[
-              '/hosts/:id/completed_jobs',
-              '/inventories/inventory/:id/hosts/:hostId/completed_jobs',
-            ]}
-          >
+        <Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
+        {host && [
+          <Route path="/hosts/:id/details" key="details">
+            <HostDetail host={host} />
+          </Route>,
+          <Route path="/hosts/:id/edit" key="edit">
+            <HostEdit host={host} />
+          </Route>,
+          <Route path="/hosts/:id/facts" key="facts">
+            <HostFacts host={host} />
+          </Route>,
+          <Route path="/hosts/:id/groups" key="groups">
+            <HostGroups host={host} />
+          </Route>,
+          <Route path="/hosts/:id/completed_jobs" key="completed-jobs">
             <JobList defaultParams={{ job__hosts: host.id }} />
-          </Route>
-        )}
+          </Route>,
+        ]}
         <Route
           key="not-found"
           path="*"
           render={() =>
             !hasContentLoading && (
               <ContentError isNotFound>
-                <Link to={`${baseUrl}/details`}>
+                <Link to={`${match.url}/details`}>
                   {i18n._(`View Host Details`)}
                 </Link>
               </ContentError>
diff --git a/awx/ui_next/src/screens/Host/Host.test.jsx b/awx/ui_next/src/screens/Host/Host.test.jsx
index 8d5b83d2ef..64c188fc06 100644
--- a/awx/ui_next/src/screens/Host/Host.test.jsx
+++ b/awx/ui_next/src/screens/Host/Host.test.jsx
@@ -3,53 +3,41 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { HostsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import mockDetails from './data.host.json';
+import mockHost from './data.host.json';
 import Host from './Host';
 
 jest.mock('@api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({
+    url: '/hosts/1',
+    params: { id: 1 },
+  }),
+}));
+
+HostsAPI.readDetail.mockResolvedValue({
+  data: { ...mockHost },
+});
 
 describe('<Host />', () => {
   let wrapper;
   let history;
 
-  HostsAPI.readDetail.mockResolvedValue({
-    data: { ...mockDetails },
+  beforeEach(async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />);
+    });
   });
 
   afterEach(() => {
     wrapper.unmount();
   });
 
-  test('initially renders succesfully', async () => {
-    history = createMemoryHistory({
-      initialEntries: ['/hosts/1/edit'],
+  test('should render expected tabs', async () => {
+    const expectedTabs = ['Details', 'Facts', 'Groups', 'Completed Jobs'];
+    wrapper.find('RoutedTabs li').forEach((tab, index) => {
+      expect(tab.text()).toEqual(expectedTabs[index]);
     });
-
-    await act(async () => {
-      wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />, {
-        context: { router: { history } },
-      });
-    });
-    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    expect(wrapper.find('Host').length).toBe(1);
-  });
-
-  test('should render "Back to Hosts" tab when navigating from inventories', async () => {
-    history = createMemoryHistory({
-      initialEntries: ['/inventories/inventory/1/hosts/1'],
-    });
-    await act(async () => {
-      wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />, {
-        context: { router: { history } },
-      });
-    });
-    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    expect(
-      wrapper
-        .find('RoutedTabs li')
-        .first()
-        .text()
-    ).toBe('Back to Hosts');
   });
 
   test('should show content error when api throws error on initial render', async () => {
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index 316ac4e485..2cedbaa6e0 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link, useHistory, useParams, useLocation } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Host } from '@types';
@@ -14,42 +14,36 @@ import DeleteButton from '@components/DeleteButton';
 import { HostsAPI } from '@api';
 import HostToggle from '@components/HostToggle';
 
-function HostDetail({ host, i18n, onUpdateHost }) {
+function HostDetail({ i18n, host }) {
   const {
     created,
     description,
     id,
     modified,
     name,
+    variables,
     summary_fields: {
       inventory,
       recent_jobs,
-      kind,
       created_by,
       modified_by,
       user_capabilities,
     },
   } = host;
 
-  const history = useHistory();
-  const { pathname } = useLocation();
-  const { id: inventoryId, hostId: inventoryHostId } = useParams();
   const [isLoading, setIsloading] = useState(false);
   const [deletionError, setDeletionError] = useState(false);
-
-  const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
+  const history = useHistory();
 
   const handleHostDelete = async () => {
     setIsloading(true);
     try {
       await HostsAPI.destroy(id);
-      setIsloading(false);
-      const url = pathname.startsWith('/inventories')
-        ? `/inventories/inventory/${inventoryId}/hosts/`
-        : `/hosts`;
-      history.push(url);
+      history.push('/hosts');
     } catch (err) {
       setDeletionError(err);
+    } finally {
+      setIsloading(false);
     }
   };
 
@@ -66,77 +60,71 @@ function HostDetail({ host, i18n, onUpdateHost }) {
       </AlertModal>
     );
   }
+
+  const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
   return (
     <CardBody>
-      <HostToggle
-        host={host}
-        onToggle={enabled =>
-          onUpdateHost({
-            ...host,
-            enabled,
-          })
-        }
-        css="padding-bottom: 40px"
-      />
+      <HostToggle host={host} css="padding-bottom: 40px" />
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />
         <Detail
-          value={<Sparkline jobs={recentPlaybookJobs} />}
           label={i18n._(t`Activity`)}
+          value={<Sparkline jobs={recentPlaybookJobs} />}
         />
         <Detail label={i18n._(t`Description`)} value={description} />
-        {inventory && (
-          <Detail
-            label={i18n._(t`Inventory`)}
-            value={
-              <Link
-                to={`/inventories/${
-                  kind === 'smart' ? 'smart_inventory' : 'inventory'
-                }/${inventoryId}/details`}
-              >
-                {inventory.name}
-              </Link>
-            }
-          />
-        )}
+        <Detail
+          label={i18n._(t`Inventory`)}
+          value={
+            <Link to={`/inventories/inventory/${inventory.id}/details`}>
+              {inventory.name}
+            </Link>
+          }
+        />
         <UserDateDetail
           date={created}
           label={i18n._(t`Created`)}
           user={created_by}
         />
         <UserDateDetail
+          date={modified}
           label={i18n._(t`Last Modified`)}
           user={modified_by}
-          date={modified}
         />
         <VariablesDetail
-          value={host.variables}
-          rows={4}
           label={i18n._(t`Variables`)}
+          rows={4}
+          value={variables}
         />
       </DetailList>
       <CardActionsRow>
-        {user_capabilities && user_capabilities.edit && (
+        {user_capabilities?.edit && (
           <Button
             aria-label={i18n._(t`edit`)}
             component={Link}
-            to={
-              pathname.startsWith('/inventories')
-                ? `/inventories/inventory/${inventoryId}/hosts/${inventoryHostId}/edit`
-                : `/hosts/${id}/edit`
-            }
+            to={`/hosts/${id}/edit`}
           >
             {i18n._(t`Edit`)}
           </Button>
         )}
-        {user_capabilities && user_capabilities.delete && (
+        {user_capabilities?.delete && (
           <DeleteButton
             onConfirm={() => handleHostDelete()}
             modalTitle={i18n._(t`Delete Host`)}
-            name={host.name}
+            name={name}
           />
         )}
       </CardActionsRow>
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={() => setDeletionError(null)}
+        >
+          {i18n._(t`Failed to delete host.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
     </CardBody>
   );
 }
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
index 0f1ccc037a..d809bf1732 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
@@ -1,66 +1,88 @@
 import React from 'react';
-
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-
 import HostDetail from './HostDetail';
+import { HostsAPI } from '@api';
+
+import mockHost from '../data.host.json';
 
 jest.mock('@api');
 
 describe('<HostDetail />', () => {
-  const mockHost = {
-    id: 1,
-    name: 'Foo',
-    description: 'Bar',
-    inventory: 1,
-    created: '2015-07-07T17:21:26.429745Z',
-    modified: '2019-08-11T19:47:37.980466Z',
-    variables: '---',
-    summary_fields: {
-      inventory: {
-        id: 1,
-        name: 'test inventory',
-      },
-      user_capabilities: {
-        edit: true,
-      },
-      recent_jobs: [],
-    },
-  };
+  let wrapper;
 
-  test('initially renders succesfully', () => {
-    mountWithContexts(<HostDetail host={mockHost} />);
+  describe('User has edit permissions', () => {
+    beforeAll(() => {
+      wrapper = mountWithContexts(<HostDetail host={mockHost} />);
+    });
+
+    afterAll(() => {
+      wrapper.unmount();
+    });
+
+    test('should render Details', async () => {
+      function assertDetail(label, value) {
+        expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
+        expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
+      }
+
+      assertDetail('Name', 'localhost');
+      assertDetail('Description', 'a good description');
+      assertDetail('Inventory', 'Mikes Inventory');
+      assertDetail('Created', '10/28/2019, 9:26:54 PM');
+      assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
+    });
+
+    test('should show edit button for users with edit permission', () => {
+      const editButton = wrapper.find('Button[aria-label="edit"]');
+      expect(editButton.text()).toEqual('Edit');
+      expect(editButton.prop('to')).toBe('/hosts/2/edit');
+    });
+
+    test('expected api call is made for delete', async () => {
+      await act(async () => {
+        wrapper.find('DeleteButton').invoke('onConfirm')();
+      });
+      expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
+    });
+
+    test('Error dialog shown for failed deletion', async () => {
+      HostsAPI.destroy.mockImplementationOnce(() =>
+        Promise.reject(new Error())
+      );
+      await act(async () => {
+        wrapper.find('DeleteButton').invoke('onConfirm')();
+      });
+      await waitForElement(
+        wrapper,
+        'Modal[title="Error!"]',
+        el => el.length === 1
+      );
+      await act(async () => {
+        wrapper.find('Modal[title="Error!"]').invoke('onClose')();
+      });
+      await waitForElement(
+        wrapper,
+        'Modal[title="Error!"]',
+        el => el.length === 0
+      );
+    });
   });
 
-  test('should render Details', async () => {
-    const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
-    const testParams = [
-      { label: 'Name', value: 'Foo' },
-      { label: 'Description', value: 'Bar' },
-      { label: 'Inventory', value: 'test inventory' },
-      { label: 'Created', value: '7/7/2015, 5:21:26 PM' },
-      { label: 'Last Modified', value: '8/11/2019, 7:47:37 PM' },
-    ];
-    // eslint-disable-next-line no-restricted-syntax
-    for (const { label, value } of testParams) {
-      // eslint-disable-next-line no-await-in-loop
-      const detail = await waitForElement(wrapper, `Detail[label="${label}"]`);
-      expect(detail.find('dt').text()).toBe(label);
-      expect(detail.find('dd').text()).toBe(value);
-    }
-  });
+  describe('User has read-only permissions', () => {
+    beforeAll(() => {
+      const readOnlyHost = { ...mockHost };
+      readOnlyHost.summary_fields.user_capabilities.edit = false;
 
-  test('should show edit button for users with edit permission', async () => {
-    const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
-    const editButton = wrapper.find('Button[aria-label="edit"]');
-    expect(editButton.text()).toEqual('Edit');
-    expect(editButton.prop('to')).toBe('/hosts/1/edit');
-  });
+      wrapper = mountWithContexts(<HostDetail host={mockHost} />);
+    });
 
-  test('should hide edit button for users without edit permission', async () => {
-    const readOnlyHost = { ...mockHost };
-    readOnlyHost.summary_fields.user_capabilities.edit = false;
-    const wrapper = mountWithContexts(<HostDetail host={readOnlyHost} />);
-    await waitForElement(wrapper, 'HostDetail');
-    expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
+    afterAll(() => {
+      wrapper.unmount();
+    });
+
+    test('should hide edit button for users without edit permission', async () => {
+      expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
+    });
   });
 });
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index f6dc82e767..bddb692b14 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -1,31 +1,14 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 import HostForm from '@components/HostForm';
 import { HostsAPI } from '@api';
-import HostForm from '../shared';
 
 function HostEdit({ host }) {
   const [formError, setFormError] = useState(null);
-  const hostsMatch = useRouteMatch('/hosts/:id/edit');
-  const inventoriesMatch = useRouteMatch(
-    '/inventories/inventory/:id/hosts/:hostId/edit'
-  );
+  const detailsUrl = `/hosts/${host.id}/details`;
   const history = useHistory();
-  let detailsUrl;
-
-  if (hostsMatch) {
-    detailsUrl = `/hosts/${hostsMatch.params.id}/details`;
-  }
-
-  if (inventoriesMatch) {
-    const kind =
-      host.summary_fields.inventory.kind === 'smart'
-        ? 'smart_inventory'
-        : 'inventory';
-    detailsUrl = `/inventories/${kind}/${inventoriesMatch.params.id}/hosts/${inventoriesMatch.params.hostId}/details`;
-  }
 
   const handleSubmit = async values => {
     try {
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.test.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.test.jsx
index 637dd64273..038ee90bbf 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.test.jsx
@@ -1,49 +1,70 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { HostsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import mockHost from '../data.host.json';
 import HostEdit from './HostEdit';
 
 jest.mock('@api');
 
 describe('<HostEdit />', () => {
-  const mockData = {
-    id: 1,
-    name: 'Foo',
-    description: 'Bar',
-    inventory: 1,
-    variables: '---',
-    summary_fields: {
-      inventory: {
-        id: 1,
-        name: 'test inventory',
-      },
-    },
+  let wrapper;
+  let history;
+
+  const updatedHostData = {
+    name: 'new name',
+    description: 'new description',
+    variables: '---\nfoo: bar',
   };
 
-  test('handleSubmit should call api update', () => {
-    const wrapper = mountWithContexts(<HostEdit host={mockData} />);
-
-    const updatedHostData = {
-      name: 'new name',
-      description: 'new description',
-      variables: '---\nfoo: bar',
-    };
-    wrapper.find('HostForm').prop('handleSubmit')(updatedHostData);
-
-    expect(HostsAPI.update).toHaveBeenCalledWith(1, updatedHostData);
+  beforeAll(async () => {
+    history = createMemoryHistory();
+    await act(async () => {
+      wrapper = mountWithContexts(<HostEdit host={mockHost} />, {
+        context: { router: { history } },
+      });
+    });
   });
 
-  test('should navigate to host detail when cancel is clicked', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['/hosts/1/edit'],
-    });
-    const wrapper = mountWithContexts(<HostEdit host={mockData} />, {
-      context: { router: { history } },
-    });
+  afterAll(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
 
-    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+  test('handleSubmit should call api update', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').prop('handleSubmit')(updatedHostData);
+    });
+    expect(HostsAPI.update).toHaveBeenCalledWith(2, updatedHostData);
+  });
 
-    expect(history.location.pathname).toEqual('/hosts/1/details');
+  test('should navigate to host detail when cancel is clicked', async () => {
+    await act(async () => {
+      wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    });
+    expect(history.location.pathname).toEqual('/hosts/2/details');
+  });
+
+  test('should navigate to host detail after successful submission', async () => {
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(updatedHostData);
+    });
+    expect(wrapper.find('FormSubmitError').length).toBe(0);
+    expect(history.location.pathname).toEqual('/hosts/2/details');
+  });
+
+  test('failed form submission should show an error message', async () => {
+    const error = {
+      response: {
+        data: { detail: 'An error occurred' },
+      },
+    };
+    HostsAPI.update.mockImplementationOnce(() => Promise.reject(error));
+    await act(async () => {
+      wrapper.find('HostForm').invoke('handleSubmit')(mockHost);
+    });
+    wrapper.update();
+    expect(wrapper.find('FormSubmitError').length).toBe(1);
   });
 });
diff --git a/awx/ui_next/src/screens/Host/data.host.json b/awx/ui_next/src/screens/Host/data.host.json
index d2ef565610..aacc08f787 100644
--- a/awx/ui_next/src/screens/Host/data.host.json
+++ b/awx/ui_next/src/screens/Host/data.host.json
@@ -51,18 +51,6 @@
           "id": 1,
           "failed": false
       },
-      "created_by": {
-          "id": 1,
-          "username": "admin",
-          "first_name": "",
-          "last_name": ""
-      },
-      "modified_by": {
-          "id": 1,
-          "username": "admin",
-          "first_name": "",
-          "last_name": ""
-      },
       "user_capabilities": {
           "edit": true,
           "delete": true

From acc34c13933c36ccd2f5b45ffd3b5c6d7e892d70 Mon Sep 17 00:00:00 2001
From: Ryan Petrello <rpetrell@redhat.com>
Date: Fri, 6 Mar 2020 08:21:20 -0500
Subject: [PATCH 41/48] fix global schedule creation for project and inventory
 updates too

related: https://github.com/ansible/awx/pull/6193
---
 awx/main/access.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/awx/main/access.py b/awx/main/access.py
index 29778b05d6..95ec0f20a8 100644
--- a/awx/main/access.py
+++ b/awx/main/access.py
@@ -2430,9 +2430,7 @@ class ScheduleAccess(BaseAccess):
         if not JobLaunchConfigAccess(self.user).can_add(data):
             return False
         if not data:
-            return UnifiedJobTemplate.accessible_pk_qs(
-                self.user, 'execute_role'
-            ).exists()
+            return Role.objects.filter(role_field__in=['update_role', 'execute_role'], ancestors__in=self.user.roles.all()).exists()
 
         return self.check_related('unified_job_template', UnifiedJobTemplate, data, role_field='execute_role', mandatory=True)
 

From edb3f6df556fb33f56572d3b104b86c22bf98822 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 3 Mar 2020 22:33:28 -0500
Subject: [PATCH 42/48] Adds the list of the survey questions.

TODO:  Add delete functionality.  Add sort functionality.
Add preview functionality.
Toolbar will be built out with the other functionalities.
---
 awx/ui_next/src/api/models/JobTemplates.js    | 10 +++
 awx/ui_next/src/screens/Template/Template.jsx |  9 ++-
 .../src/screens/Template/Templates.jsx        |  1 +
 .../screens/Template/shared/SurveyList.jsx    | 48 +++++++++++
 .../Template/shared/SurveyList.test.jsx       | 47 +++++++++++
 .../Template/shared/SurveyListItem.jsx        | 80 +++++++++++++++++++
 .../Template/shared/SurveyListItem.test.jsx   | 47 +++++++++++
 7 files changed, 241 insertions(+), 1 deletion(-)
 create mode 100644 awx/ui_next/src/screens/Template/shared/SurveyList.jsx
 create mode 100644 awx/ui_next/src/screens/Template/shared/SurveyList.test.jsx
 create mode 100644 awx/ui_next/src/screens/Template/shared/SurveyListItem.jsx
 create mode 100644 awx/ui_next/src/screens/Template/shared/SurveyListItem.test.jsx

diff --git a/awx/ui_next/src/api/models/JobTemplates.js b/awx/ui_next/src/api/models/JobTemplates.js
index 9e2e4ee851..98174bc1e7 100644
--- a/awx/ui_next/src/api/models/JobTemplates.js
+++ b/awx/ui_next/src/api/models/JobTemplates.js
@@ -64,6 +64,16 @@ class JobTemplates extends SchedulesMixin(
       params,
     });
   }
+
+  readScheduleList(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/schedules/`, {
+      params,
+    });
+  }
+
+  readSurvey(id) {
+    return this.http.get(`${this.baseUrl}${id}/survey_spec/`);
+  }
 }
 
 export default JobTemplates;
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index a600563a4a..9de406abaf 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -15,6 +15,7 @@ import { ResourceAccessList } from '@components/ResourceAccessList';
 import JobTemplateDetail from './JobTemplateDetail';
 import JobTemplateEdit from './JobTemplateEdit';
 import { JobTemplatesAPI, OrganizationsAPI } from '@api';
+import SurveyList from './shared/SurveyList';
 
 class Template extends Component {
   constructor(props) {
@@ -131,7 +132,7 @@ class Template extends Component {
       },
       {
         name: i18n._(t`Survey`),
-        link: '/home',
+        link: `${match.url}/survey`,
       }
     );
 
@@ -238,6 +239,12 @@ class Template extends Component {
                 )}
               />
             )}
+            {template && (
+              <Route
+                path="/templates/:templateType/:id/survey"
+                render={() => <SurveyList template={template} />}
+              />
+            )}
             <Route
               key="not-found"
               path="*"
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index f6572a54ab..9bc33d0a0e 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -52,6 +52,7 @@ class Templates extends Component {
       [`/templates/${template.type}/${template.id}/completed_jobs`]: i18n._(
         t`Completed Jobs`
       ),
+      [`/templates/${template.type}/${template.id}/survey`]: i18n._(t`Survey`),
     };
     this.setState({ breadcrumbConfig });
   };
diff --git a/awx/ui_next/src/screens/Template/shared/SurveyList.jsx b/awx/ui_next/src/screens/Template/shared/SurveyList.jsx
new file mode 100644
index 0000000000..d5ae1a3c35
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/SurveyList.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+
+import useRequest from '@util/useRequest';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import { JobTemplatesAPI } from '@api';
+import SurveyListItem from './SurveyListItem';
+
+function SurveyList({ template }) {
+  const {
+    result: questions,
+    error: contentError,
+    isLoading,
+    request: fetchSurvey,
+  } = useRequest(
+    useCallback(async () => {
+      const {
+        data: { spec },
+      } = await JobTemplatesAPI.readSurvey(template.id);
+
+      return spec.map((s, index) => ({ ...s, id: index }));
+    }, [template.id])
+  );
+
+  useEffect(() => {
+    fetchSurvey();
+  }, [fetchSurvey]);
+  if (contentError) {
+    return <ContentError error={contentError} />;
+  }
+  if (isLoading) {
+    return <ContentLoading />;
+  }
+
+  return (
+    questions?.length > 0 &&
+    questions.map((question, index) => (
+      <SurveyListItem
+        key={question.id}
+        isLast={index === questions.length - 1}
+        isFirst={index === 0}
+        question={question}
+      />
+    ))
+  );
+}
+export default withI18n()(SurveyList);
diff --git a/awx/ui_next/src/screens/Template/shared/SurveyList.test.jsx b/awx/ui_next/src/screens/Template/shared/SurveyList.test.jsx
new file mode 100644
index 0000000000..271ddf39bb
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/SurveyList.test.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import SurveyList from './SurveyList';
+import { JobTemplatesAPI } from '@api';
+import mockJobTemplateData from './data.job_template.json';
+
+jest.mock('@api/models/JobTemplates');
+
+describe('<SurveyList />', () => {
+  beforeEach(() => {
+    JobTemplatesAPI.readSurvey.mockResolvedValue({
+      data: { spec: [{ question_name: 'Foo', type: 'text', default: 'Bar' }] },
+    });
+  });
+  test('expect component to mount successfully', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <SurveyList template={mockJobTemplateData} />
+      );
+    });
+    expect(wrapper.length).toBe(1);
+  });
+  test('expect api to be called to get survey', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <SurveyList template={mockJobTemplateData} />
+      );
+    });
+    expect(JobTemplatesAPI.readSurvey).toBeCalledWith(7);
+    wrapper.update();
+    expect(wrapper.find('SurveyListItem').length).toBe(1);
+  });
+  test('error in retrieving the survey throws an error', async () => {
+    JobTemplatesAPI.readSurvey.mockRejectedValue(new Error());
+    let wrapper;
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <SurveyList template={{ ...mockJobTemplateData, id: 'a' }} />
+      );
+    });
+    wrapper.update();
+    expect(wrapper.find('ContentError').length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/shared/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/shared/SurveyListItem.jsx
new file mode 100644
index 0000000000..f50b428c25
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/SurveyListItem.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+
+import {
+  Button as _Button,
+  DataList,
+  DataListAction as _DataListAction,
+  DataListCheck,
+  DataListItemCells,
+  DataListItemRow,
+  DataListItem,
+  DataListCell,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  margin-left: 0;
+  margin-right: 20px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+`;
+const Button = styled(_Button)`
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+`;
+function SurveyListItem({ question, i18n, isLast, isFirst }) {
+  return (
+    <DataList aria-label={i18n._(t`Survey List`)}>
+      <DataListItem aria-labelledby={i18n._(t`Survey questions`)}>
+        <DataListItemRow>
+          <DataListAction
+            id="sortQuestions"
+            aria-labelledby={i18n._(t`Sort question order`)}
+            aria-label={i18n._(t`Sort question order`)}
+          >
+            <Stack>
+              <StackItem>
+                <Button
+                  variant="plain"
+                  aria-label={i18n._(t`move up`)}
+                  isDisabled={isFirst}
+                >
+                  <CaretUpIcon />
+                </Button>
+              </StackItem>
+              <StackItem>
+                <Button
+                  variant="plain"
+                  aria-label={i18n._(t`move down`)}
+                  isDisabled={isLast}
+                >
+                  <CaretDownIcon />
+                </Button>
+              </StackItem>
+            </Stack>
+          </DataListAction>
+          <DataListCheck checked={false} aria-labelledby="survey check" />
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key={question.question_name}>
+                {question.question_name}
+              </DataListCell>,
+              <DataListCell key={question.type}>{question.type}</DataListCell>,
+              <DataListCell key={question.default}>
+                {question.default}
+              </DataListCell>,
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
+}
+
+export default withI18n()(SurveyListItem);
diff --git a/awx/ui_next/src/screens/Template/shared/SurveyListItem.test.jsx b/awx/ui_next/src/screens/Template/shared/SurveyListItem.test.jsx
new file mode 100644
index 0000000000..2c55648eee
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/SurveyListItem.test.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import SurveyListItem from './SurveyListItem';
+
+describe('<SurveyListItem />', () => {
+  const item = { question_name: 'Foo', default: 'Bar', type: 'text' };
+  test('renders successfully', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={item} isFirst={false} isLast={false} />
+      );
+    });
+    expect(wrapper.length).toBe(1);
+  });
+  test('fields are rendering properly', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={item} isFirst={false} isLast={false} />
+      );
+    });
+    const moveUp = wrapper.find('Button[aria-label="move up"]');
+    const moveDown = wrapper.find('Button[aria-label="move down"]');
+    expect(moveUp.length).toBe(1);
+    expect(moveDown.length).toBe(1);
+    expect(wrapper.find('DataListCheck').length).toBe(1);
+    expect(wrapper.find('DataListCell').length).toBe(3);
+  });
+  test('move up and move down buttons are disabled', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={item} isFirst isLast />
+      );
+    });
+    const moveUp = wrapper
+      .find('Button[aria-label="move up"]')
+      .prop('isDisabled');
+    const moveDown = wrapper
+      .find('Button[aria-label="move down"]')
+      .prop('isDisabled');
+    expect(moveUp).toBe(true);
+    expect(moveDown).toBe(true);
+  });
+});

From 1f2edd81abbdcc7f316e6d46d26308c15564169a Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 4 Mar 2020 16:41:21 -0500
Subject: [PATCH 43/48] Adds generic schedule detail component and applies it
 to JT schedules

---
 awx/ui_next/package-lock.json                 |  22 ++
 awx/ui_next/package.json                      |   1 +
 awx/ui_next/src/api/models/Schedules.js       |   8 +
 .../MultiButtonToggle/MultiButtonToggle.jsx   |   1 +
 .../components/Schedule/ScheduleDetail.jsx    | 203 ++++++++++++++
 .../Schedule/ScheduleDetail.test.jsx          | 265 ++++++++++++++++++
 .../ScheduleList.jsx                          |   2 +-
 .../ScheduleList.test.jsx                     |   2 +-
 .../ScheduleListItem.jsx                      |   2 +-
 .../ScheduleListItem.test.jsx                 |   2 +-
 .../Schedule/ScheduleOccurrences.jsx          |  72 +++++
 .../Schedule/ScheduleOccurrences.test.jsx     |  61 ++++
 .../ScheduleToggle.jsx                        |   0
 .../ScheduleToggle.test.jsx                   |   0
 .../data.schedules.json                       |   0
 awx/ui_next/src/components/Schedule/index.js  |   5 +
 .../src/components/ScheduleList/index.js      |   1 -
 awx/ui_next/src/screens/Project/Project.jsx   |   2 +-
 .../src/screens/Schedule/Schedules.jsx        |   2 +-
 .../JobTemplateSchedule.jsx                   | 157 +++++++++++
 .../JobTemplateSchedule.test.jsx              | 111 ++++++++
 .../Template/JobTemplateSchedule/index.js     |   1 +
 .../JobTemplateSchedules.jsx                  |  26 ++
 .../JobTemplateSchedules.test.jsx             |  31 ++
 .../Template/JobTemplateSchedules/index.js    |   1 +
 awx/ui_next/src/screens/Template/Template.jsx |  26 +-
 .../src/screens/Template/Template.test.jsx    |   2 +-
 .../src/screens/Template/Templates.jsx        |   9 +-
 .../screens/Template/WorkflowJobTemplate.jsx  |   2 +-
 awx/ui_next/src/types.js                      |   2 +-
 awx/ui_next/src/util/dates.jsx                |   4 +
 31 files changed, 1009 insertions(+), 14 deletions(-)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleList.jsx (98%)
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleList.test.jsx (99%)
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleListItem.jsx (98%)
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleListItem.test.jsx (98%)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleToggle.jsx (100%)
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/ScheduleToggle.test.jsx (100%)
 rename awx/ui_next/src/components/{ScheduleList => Schedule}/data.schedules.json (100%)
 create mode 100644 awx/ui_next/src/components/Schedule/index.js
 delete mode 100644 awx/ui_next/src/components/ScheduleList/index.js
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx
 create mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js

diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json
index 7c8b645522..75b693e4d8 100644
--- a/awx/ui_next/package-lock.json
+++ b/awx/ui_next/package-lock.json
@@ -13202,6 +13202,12 @@
         "yallist": "^2.1.2"
       }
     },
+    "luxon": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.22.0.tgz",
+      "integrity": "sha512-3sLvlfbFo+AxVEY3IqxymbumtnlgBwjDExxK60W3d+trrUzErNAz/PfvPT+mva+vEUrdIodeCOs7fB6zHtRSrw==",
+      "optional": true
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -16217,6 +16223,22 @@
         "inherits": "^2.0.1"
       }
     },
+    "rrule": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",
+      "integrity": "sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA==",
+      "requires": {
+        "luxon": "^1.21.3",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.11.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
+          "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA=="
+        }
+      }
+    },
     "rst-selector-parser": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json
index cdd79cd2d7..2d290c7c15 100644
--- a/awx/ui_next/package.json
+++ b/awx/ui_next/package.json
@@ -77,6 +77,7 @@
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "react-virtualized": "^9.21.1",
+    "rrule": "^2.6.4",
     "styled-components": "^4.2.0"
   }
 }
diff --git a/awx/ui_next/src/api/models/Schedules.js b/awx/ui_next/src/api/models/Schedules.js
index e5581d2875..01bff4891e 100644
--- a/awx/ui_next/src/api/models/Schedules.js
+++ b/awx/ui_next/src/api/models/Schedules.js
@@ -5,6 +5,14 @@ class Schedules extends Base {
     super(http);
     this.baseUrl = '/api/v2/schedules/';
   }
+
+  createPreview(data) {
+    return this.http.post(`${this.baseUrl}preview/`, data);
+  }
+
+  readCredentials(resourceId, params) {
+    return this.http.get(`${this.baseUrl}${resourceId}/credentials/`, params);
+  }
 }
 
 export default Schedules;
diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
index 9c72cfbab3..b76c4c6a61 100644
--- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
+++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
@@ -21,6 +21,7 @@ function MultiButtonToggle({ buttons, value, onChange }) {
       {buttons &&
         buttons.map(([buttonValue, buttonLabel]) => (
           <SmallButton
+            aria-label={buttonLabel}
             key={buttonLabel}
             onClick={() => setValue(buttonValue)}
             variant={buttonValue === value ? 'primary' : 'secondary'}
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
new file mode 100644
index 0000000000..a8aad4daf1
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
@@ -0,0 +1,203 @@
+import React, { useCallback, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { rrulestr } from 'rrule';
+import styled from 'styled-components';
+import { shape } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Schedule } from '@types';
+import { Chip, ChipGroup, Title } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import CredentialChip from '@components/CredentialChip';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { ScheduleOccurrences, ScheduleToggle } from '@components/Schedule';
+import { formatDateString } from '@util/dates';
+import useRequest from '@util/useRequest';
+import { SchedulesAPI } from '@api';
+
+const PromptTitle = styled(Title)`
+  --pf-c-title--m-md--FontWeight: 700;
+`;
+
+function ScheduleDetail({ preview, schedule, i18n }) {
+  const {
+    id,
+    created,
+    description,
+    diff_mode,
+    dtend,
+    dtstart,
+    job_tags,
+    job_type,
+    inventory,
+    limit,
+    modified,
+    name,
+    next_run,
+    rrule,
+    scm_branch,
+    skip_tags,
+    summary_fields,
+    timezone,
+  } = schedule;
+
+  const {
+    result: credentials,
+    isLoading,
+    error,
+    request: fetchCredentials,
+  } = useRequest(
+    useCallback(async () => {
+      const { data } = await SchedulesAPI.readCredentials(id);
+      return data.results;
+    }, [id]),
+    []
+  );
+
+  useEffect(() => {
+    fetchCredentials();
+  }, [fetchCredentials]);
+
+  const rule = rrulestr(rrule);
+  const repeatFrequency =
+    rule.options.freq === 3 && dtstart === dtend
+      ? i18n._(t`None (Run Once)`)
+      : rule.toText().replace(/^\w/, c => c.toUpperCase());
+  const showPromptedFields =
+    (credentials && credentials.length > 0) ||
+    job_type ||
+    (inventory && summary_fields.inventory) ||
+    scm_branch ||
+    limit ||
+    typeof diff_mode === 'boolean' ||
+    (job_tags && job_tags.length > 0) ||
+    (skip_tags && skip_tags.length > 0);
+
+  if (isLoading) {
+    return <ContentLoading />;
+  }
+
+  if (error) {
+    return <ContentError error={error} />;
+  }
+
+  return (
+    <CardBody>
+      <ScheduleToggle schedule={schedule} css="padding-bottom: 40px" />
+      <DetailList gutter="sm">
+        <Detail label={i18n._(t`Name`)} value={name} />
+        <Detail label={i18n._(t`Description`)} value={description} />
+        <Detail
+          label={i18n._(t`First Run`)}
+          value={formatDateString(dtstart)}
+        />
+        <Detail
+          label={i18n._(t`Next Run`)}
+          value={formatDateString(next_run)}
+        />
+        <Detail label={i18n._(t`Last Run`)} value={formatDateString(dtend)} />
+        <Detail label={i18n._(t`Local Time Zone`)} value={timezone} />
+        <Detail label={i18n._(t`Repeat Frequency`)} value={repeatFrequency} />
+        <ScheduleOccurrences preview={preview} />
+        <UserDateDetail
+          label={i18n._(t`Created`)}
+          date={created}
+          user={summary_fields.created_by}
+        />
+        <UserDateDetail
+          label={i18n._(t`Last Modified`)}
+          date={modified}
+          user={summary_fields.modified_by}
+        />
+        {showPromptedFields && (
+          <>
+            <PromptTitle size="md" css="grid-column: 1 / -1;">
+              {i18n._(t`Prompted Fields`)}
+            </PromptTitle>
+            <Detail label={i18n._(t`Job Type`)} value={job_type} />
+            {inventory && summary_fields.inventory && (
+              <Detail
+                label={i18n._(t`Inventory`)}
+                value={
+                  <Link
+                    to={`/inventories/${
+                      summary_fields.inventory.kind === 'smart'
+                        ? 'smart_inventory'
+                        : 'inventory'
+                    }/${summary_fields.inventory.id}/details`}
+                  >
+                    {summary_fields.inventory.name}
+                  </Link>
+                }
+              />
+            )}
+            <Detail label={i18n._(t`SCM Branch`)} value={scm_branch} />
+            <Detail label={i18n._(t`Limit`)} value={limit} />
+            {typeof diff_mode === 'boolean' && (
+              <Detail
+                label={i18n._(t`Show Changes`)}
+                value={diff_mode ? 'On' : 'Off'}
+              />
+            )}
+            {credentials && credentials.length > 0 && (
+              <Detail
+                fullWidth
+                label={i18n._(t`Credentials`)}
+                value={
+                  <ChipGroup numChips={5}>
+                    {credentials.map(c => (
+                      <CredentialChip key={c.id} credential={c} isReadOnly />
+                    ))}
+                  </ChipGroup>
+                }
+              />
+            )}
+            {job_tags && job_tags.length > 0 && (
+              <Detail
+                fullWidth
+                label={i18n._(t`Job Tags`)}
+                value={
+                  <ChipGroup numChips={5}>
+                    {job_tags.split(',').map(jobTag => (
+                      <Chip key={jobTag} isReadOnly>
+                        {jobTag}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                }
+              />
+            )}
+            {skip_tags && skip_tags.length > 0 && (
+              <Detail
+                fullWidth
+                label={i18n._(t`Skip Tags`)}
+                value={
+                  <ChipGroup numChips={5}>
+                    {skip_tags.split(',').map(skipTag => (
+                      <Chip key={skipTag} isReadOnly>
+                        {skipTag}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                }
+              />
+            )}
+          </>
+        )}
+      </DetailList>
+    </CardBody>
+  );
+}
+
+ScheduleDetail.propTypes = {
+  preview: shape(),
+  schedule: Schedule.isRequired,
+};
+
+ScheduleDetail.defaultProps = {
+  preview: { local: [], utc: [] },
+};
+
+export default withI18n()(ScheduleDetail);
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
new file mode 100644
index 0000000000..0dbe6ff6bb
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
@@ -0,0 +1,265 @@
+import React from 'react';
+import { SchedulesAPI } from '@api';
+import { Route } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import ScheduleDetail from './ScheduleDetail';
+
+jest.mock('@api/models/Schedules');
+
+const schedule = {
+  url: '/api/v2/schedules/1',
+  rrule:
+    'DTSTART;TZID=America/New_York:20200220T000000 RRULE:FREQ=DAILY;INTERVAL=1;COUNT=1',
+  id: 1,
+  summary_fields: {
+    unified_job_template: {
+      id: 1,
+      name: 'Mock JT',
+      description: '',
+      unified_job_type: 'job',
+    },
+    user_capabilities: {
+      edit: true,
+      delete: true,
+    },
+    created_by: {
+      id: 1,
+      username: 'admin',
+      first_name: '',
+      last_name: '',
+    },
+    modified_by: {
+      id: 1,
+      username: 'admin',
+      first_name: '',
+      last_name: '',
+    },
+    inventory: {
+      id: 1,
+      name: 'Test Inventory',
+    },
+  },
+  created: '2020-03-03T20:38:54.210306Z',
+  modified: '2020-03-03T20:38:54.210336Z',
+  name: 'Mock JT Schedule',
+  enabled: false,
+  description: 'A good schedule',
+  timezone: 'America/New_York',
+  dtstart: '2020-03-16T04:00:00Z',
+  dtend: '2020-07-06T04:00:00Z',
+  next_run: '2020-03-16T04:00:00Z',
+};
+
+const preview = {
+  local: [],
+  utc: [],
+};
+
+describe('<ScheduleDetail />', () => {
+  let wrapper;
+  const history = createMemoryHistory({
+    initialEntries: ['/templates/job_template/1/schedules/1/details'],
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('details should render with the proper values without prompts', async () => {
+    SchedulesAPI.readCredentials.mockResolvedValueOnce({
+      data: {
+        count: 0,
+        results: [],
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/job_template/:id/schedules/:scheduleId"
+          component={() => (
+            <ScheduleDetail schedule={schedule} preview={preview} />
+          )}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 1 } },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    expect(
+      wrapper
+        .find('Detail[label="Name"]')
+        .find('dd')
+        .text()
+    ).toBe('Mock JT Schedule');
+    expect(
+      wrapper
+        .find('Detail[label="Description"]')
+        .find('dd')
+        .text()
+    ).toBe('A good schedule');
+    expect(wrapper.find('Detail[label="First Run"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Next Run"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Last Run"]').length).toBe(1);
+    expect(
+      wrapper
+        .find('Detail[label="Local Time Zone"]')
+        .find('dd')
+        .text()
+    ).toBe('America/New_York');
+    expect(wrapper.find('Detail[label="Repeat Frequency"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);
+    expect(wrapper.find('Title[children="Prompted Fields"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Job Type"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Inventory"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="SCM Branch"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Limit"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Show Changes"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Credentials"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Job Tags"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Skip Tags"]').length).toBe(0);
+  });
+  test('details should render with the proper values with prompts', async () => {
+    SchedulesAPI.readCredentials.mockResolvedValueOnce({
+      data: {
+        count: 2,
+        results: [
+          {
+            id: 1,
+            name: 'Cred 1',
+          },
+          {
+            id: 2,
+            name: 'Cred 2',
+          },
+        ],
+      },
+    });
+    const scheduleWithPrompts = {
+      ...schedule,
+      job_type: 'run',
+      inventory: 1,
+      job_tags: 'tag1',
+      skip_tags: 'tag2',
+      scm_branch: 'foo/branch',
+      limit: 'localhost',
+      diff_mode: true,
+      verbosity: 1,
+    };
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/job_template/:id/schedules/:scheduleId"
+          component={() => (
+            <ScheduleDetail schedule={scheduleWithPrompts} preview={preview} />
+          )}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 1 } },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    expect(
+      wrapper
+        .find('Detail[label="Name"]')
+        .find('dd')
+        .text()
+    ).toBe('Mock JT Schedule');
+    expect(
+      wrapper
+        .find('Detail[label="Description"]')
+        .find('dd')
+        .text()
+    ).toBe('A good schedule');
+    expect(wrapper.find('Detail[label="First Run"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Next Run"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Last Run"]').length).toBe(1);
+    expect(
+      wrapper
+        .find('Detail[label="Local Time Zone"]')
+        .find('dd')
+        .text()
+    ).toBe('America/New_York');
+    expect(wrapper.find('Detail[label="Repeat Frequency"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);
+    expect(wrapper.find('Title[children="Prompted Fields"]').length).toBe(1);
+    expect(
+      wrapper
+        .find('Detail[label="Job Type"]')
+        .find('dd')
+        .text()
+    ).toBe('run');
+    expect(wrapper.find('Detail[label="Inventory"]').length).toBe(1);
+    expect(
+      wrapper
+        .find('Detail[label="SCM Branch"]')
+        .find('dd')
+        .text()
+    ).toBe('foo/branch');
+    expect(
+      wrapper
+        .find('Detail[label="Limit"]')
+        .find('dd')
+        .text()
+    ).toBe('localhost');
+    expect(wrapper.find('Detail[label="Show Changes"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Credentials"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Job Tags"]').length).toBe(1);
+    expect(wrapper.find('Detail[label="Skip Tags"]').length).toBe(1);
+  });
+  test('error shown when error encountered fetching credentials', async () => {
+    SchedulesAPI.readCredentials.mockRejectedValueOnce(
+      new Error({
+        response: {
+          config: {
+            method: 'get',
+            url: '/api/v2/job_templates/1/schedules/1/credentials',
+          },
+          data: 'An error occurred',
+          status: 500,
+        },
+      })
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/job_template/:id/schedules/:scheduleId"
+          component={() => (
+            <ScheduleDetail schedule={schedule} preview={preview} />
+          )}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 1 } },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+});
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx b/awx/ui_next/src/components/Schedule/ScheduleList.jsx
similarity index 98%
rename from awx/ui_next/src/components/ScheduleList/ScheduleList.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList.jsx
index 999f28a6b9..71f1e2d3f4 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleList.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleList.jsx
@@ -7,13 +7,13 @@ import { SchedulesAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import DataListToolbar from '@components/DataListToolbar';
+import { ScheduleListItem } from '@components/Schedule';
 import PaginatedDataList, {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
 import useRequest, { useDeleteItems } from '@util/useRequest';
 import { getQSConfig, parseQueryString } from '@util/qs';
-import ScheduleListItem from './ScheduleListItem';
 
 const QS_CONFIG = getQSConfig('schedule', {
   page: 1,
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleList.test.jsx
similarity index 99%
rename from awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList.test.jsx
index 25101677c8..c210837aea 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleList.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleList.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { SchedulesAPI } from '@api';
-import ScheduleList from './ScheduleList';
+import { ScheduleList } from '@components/Schedule';
 import mockSchedules from './data.schedules.json';
 
 jest.mock('@api/models/Schedules');
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx b/awx/ui_next/src/components/Schedule/ScheduleListItem.jsx
similarity index 98%
rename from awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleListItem.jsx
index 79ff96f6e1..ff2b3d05b5 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleListItem.jsx
@@ -15,10 +15,10 @@ import {
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { DetailList, Detail } from '@components/DetailList';
+import { ScheduleToggle } from '@components/Schedule';
 import styled from 'styled-components';
 import { Schedule } from '@types';
 import { formatDateString } from '@util/dates';
-import ScheduleToggle from './ScheduleToggle';
 
 const DataListAction = styled(_DataListAction)`
   align-items: center;
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx
similarity index 98%
rename from awx/ui_next/src/components/ScheduleList/ScheduleListItem.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx
index 8e64b651a2..2fe7bd4b53 100644
--- a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import ScheduleListItem from './ScheduleListItem';
+import { ScheduleListItem } from '@components/Schedule';
 
 const mockSchedule = {
   rrule:
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx
new file mode 100644
index 0000000000..fd200a4195
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { shape } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { formatDateString, formatDateStringUTC } from '@util/dates';
+import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
+import { DetailName, DetailValue } from '@components/DetailList';
+import MultiButtonToggle from '@components/MultiButtonToggle';
+
+function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
+  const [mode, setMode] = useState('local');
+
+  if (preview.local.length < 2) {
+    return null;
+  }
+
+  return (
+    <>
+      <DetailName
+        component={TextListItemVariants.dt}
+        fullWidth
+        css="grid-column: 1 / -1"
+      >
+        <Split gutter="sm">
+          <SplitItem>
+            <div className="pf-c-form__label">
+              <span
+                className="pf-c-form__label-text"
+                css="font-weight: var(--pf-global--FontWeight--bold)"
+              >
+                {i18n._(t`Occurrences`)}
+              </span>
+              <span css="margin-left: 10px">
+                {i18n._(t`(Limited to first 10)`)}
+              </span>
+            </div>
+          </SplitItem>
+          <SplitItem>
+            <MultiButtonToggle
+              buttons={[['local', 'Local'], ['utc', 'UTC']]}
+              value={mode}
+              onChange={newMode => setMode(newMode)}
+            />
+          </SplitItem>
+        </Split>
+      </DetailName>
+      <DetailValue
+        component={TextListItemVariants.dd}
+        fullWidth
+        css="grid-column: 1 / -1; margin-top: -10px"
+      >
+        {preview[mode].map(dateStr => (
+          <div key={dateStr}>
+            {mode === 'local'
+              ? formatDateString(dateStr)
+              : formatDateStringUTC(dateStr)}
+          </div>
+        ))}
+      </DetailValue>
+    </>
+  );
+}
+
+ScheduleOccurrences.propTypes = {
+  preview: shape(),
+};
+
+ScheduleOccurrences.defaultProps = {
+  preview: { local: [], utc: [] },
+};
+
+export default withI18n()(ScheduleOccurrences);
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx
new file mode 100644
index 0000000000..46cc795995
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import ScheduleOccurrences from './ScheduleOccurrences';
+
+describe('<ScheduleOccurrences>', () => {
+  let wrapper;
+  describe('At least two dates passed in', () => {
+    beforeAll(() => {
+      wrapper = mountWithContexts(
+        <ScheduleOccurrences
+          preview={{
+            local: ['2020-03-16T00:00:00-04:00', '2020-03-30T00:00:00-04:00'],
+            utc: ['2020-03-16T04:00:00Z', '2020-03-30T04:00:00Z'],
+          }}
+        />
+      );
+    });
+    afterAll(() => {
+      wrapper.unmount();
+    });
+    test('Local option initially set', async () => {
+      expect(wrapper.find('MultiButtonToggle').props().value).toBe('local');
+    });
+    test('It renders the correct number of dates', async () => {
+      expect(wrapper.find('dd').children().length).toBe(2);
+    });
+    test('Clicking UTC button toggles the dates to utc', async () => {
+      wrapper.find('button[aria-label="UTC"]').simulate('click');
+      expect(wrapper.find('MultiButtonToggle').props().value).toBe('utc');
+      expect(wrapper.find('dd').children().length).toBe(2);
+      expect(
+        wrapper
+          .find('dd')
+          .children()
+          .at(0)
+          .text()
+      ).toBe('3/16/2020, 4:00:00 AM');
+      expect(
+        wrapper
+          .find('dd')
+          .children()
+          .at(1)
+          .text()
+      ).toBe('3/30/2020, 4:00:00 AM');
+    });
+  });
+  describe('Only one date passed in', () => {
+    test('Component should not render chldren', async () => {
+      wrapper = mountWithContexts(
+        <ScheduleOccurrences
+          preview={{
+            local: ['2020-03-16T00:00:00-04:00'],
+            utc: ['2020-03-16T04:00:00Z'],
+          }}
+        />
+      );
+      expect(wrapper.find('ScheduleOccurrences').children().length).toBe(0);
+      wrapper.unmount();
+    });
+  });
+});
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleToggle.jsx b/awx/ui_next/src/components/Schedule/ScheduleToggle.jsx
similarity index 100%
rename from awx/ui_next/src/components/ScheduleList/ScheduleToggle.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleToggle.jsx
diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleToggle.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleToggle.test.jsx
similarity index 100%
rename from awx/ui_next/src/components/ScheduleList/ScheduleToggle.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleToggle.test.jsx
diff --git a/awx/ui_next/src/components/ScheduleList/data.schedules.json b/awx/ui_next/src/components/Schedule/data.schedules.json
similarity index 100%
rename from awx/ui_next/src/components/ScheduleList/data.schedules.json
rename to awx/ui_next/src/components/Schedule/data.schedules.json
diff --git a/awx/ui_next/src/components/Schedule/index.js b/awx/ui_next/src/components/Schedule/index.js
new file mode 100644
index 0000000000..bc17abadfc
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/index.js
@@ -0,0 +1,5 @@
+export { default as ScheduleList } from './ScheduleList';
+export { default as ScheduleListItem } from './ScheduleListItem';
+export { default as ScheduleOccurrences } from './ScheduleOccurrences';
+export { default as ScheduleToggle } from './ScheduleToggle';
+export { default as ScheduleDetail } from './ScheduleDetail';
diff --git a/awx/ui_next/src/components/ScheduleList/index.js b/awx/ui_next/src/components/ScheduleList/index.js
deleted file mode 100644
index 35e4093cba..0000000000
--- a/awx/ui_next/src/components/ScheduleList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ScheduleList';
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index de6b609bdb..4a758d79a2 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -9,7 +9,7 @@ import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList';
 import { ResourceAccessList } from '@components/ResourceAccessList';
-import ScheduleList from '@components/ScheduleList';
+import { ScheduleList } from '@components/Schedule';
 import ProjectDetail from './ProjectDetail';
 import ProjectEdit from './ProjectEdit';
 import ProjectJobTemplatesList from './ProjectJobTemplatesList';
diff --git a/awx/ui_next/src/screens/Schedule/Schedules.jsx b/awx/ui_next/src/screens/Schedule/Schedules.jsx
index 514f4b4392..3322e10d1b 100644
--- a/awx/ui_next/src/screens/Schedule/Schedules.jsx
+++ b/awx/ui_next/src/screens/Schedule/Schedules.jsx
@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import Breadcrumbs from '@components/Breadcrumbs';
-import ScheduleList from '@components/ScheduleList';
+import { ScheduleList } from '@components/Schedule';
 import { SchedulesAPI } from '@api';
 import { PageSection, Card } from '@patternfly/react-core';
 
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
new file mode 100644
index 0000000000..134ee37ffb
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+
+import {
+  Switch,
+  Route,
+  Link,
+  Redirect,
+  useLocation,
+  useParams,
+} from 'react-router-dom';
+import { CardActions } from '@patternfly/react-core';
+import { CaretLeftIcon } from '@patternfly/react-icons';
+import CardCloseButton from '@components/CardCloseButton';
+import RoutedTabs from '@components/RoutedTabs';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import { TabbedCardHeader } from '@components/Card';
+import { ScheduleDetail } from '@components/Schedule';
+import { SchedulesAPI } from '@api';
+
+function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
+  const [jobTemplateSchedule, setJobTemplateSchedule] = useState(null);
+  const [schedulePreview, setSchedulePreview] = useState(null);
+  const [contentLoading, setContentLoading] = useState(true);
+  const [contentError, setContentError] = useState(null);
+  const { id: jobTemplateId, scheduleId } = useParams();
+  const location = useLocation();
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const { data } = await SchedulesAPI.readDetail(scheduleId);
+        const { data: preview } = await SchedulesAPI.createPreview({
+          rrule: data.rrule,
+        });
+
+        setJobTemplateSchedule(data);
+        setSchedulePreview(preview);
+        setBreadcrumb(jobTemplate, data);
+      } catch (err) {
+        setContentError(err);
+      } finally {
+        setContentLoading(false);
+      }
+    };
+
+    loadData();
+  }, [location.pathname, scheduleId, jobTemplate, setBreadcrumb]);
+
+  const tabsArray = [
+    {
+      name: (
+        <>
+          <CaretLeftIcon />
+          {i18n._(t`Back to Schedules`)}
+        </>
+      ),
+      link: `/templates/job_template/${jobTemplate.id}/schedules`,
+      id: 99,
+    },
+    {
+      name: i18n._(t`Details`),
+      link: `/templates/job_template/${
+        jobTemplate.id
+      }/schedules/${jobTemplateSchedule && jobTemplateSchedule.id}/details`,
+      id: 0,
+    },
+  ];
+
+  if (contentLoading) {
+    return <ContentLoading />;
+  }
+
+  if (
+    jobTemplateSchedule.summary_fields.unified_job_template.id !==
+    parseInt(jobTemplateId, 10)
+  ) {
+    return (
+      <ContentError>
+        {jobTemplateSchedule && (
+          <Link to={`/templates/job_template/${jobTemplate.id}/schedules`}>
+            {i18n._(t`View Template Schedules`)}
+          </Link>
+        )}
+      </ContentError>
+    );
+  }
+
+  if (contentError) {
+    return <ContentError error={contentError} />;
+  }
+
+  let cardHeader = null;
+  if (
+    location.pathname.includes('schedules/') &&
+    !location.pathname.endsWith('edit')
+  ) {
+    cardHeader = (
+      <TabbedCardHeader>
+        <RoutedTabs tabsArray={tabsArray} />
+        <CardActions>
+          <CardCloseButton
+            linkTo={`/templates/job_template/${jobTemplate.id}/schedules`}
+          />
+        </CardActions>
+      </TabbedCardHeader>
+    );
+  }
+  return (
+    <>
+      {cardHeader}
+      <Switch>
+        <Redirect
+          from="/templates/job_template/:id/schedules/:scheduleId"
+          to="/templates/job_template/:id/schedules/:scheduleId/details"
+          exact
+        />
+        {jobTemplateSchedule && [
+          <Route
+            key="details"
+            path="/templates/job_template/:id/schedules/:scheduleId/details"
+            render={() => {
+              return (
+                <ScheduleDetail
+                  schedule={jobTemplateSchedule}
+                  preview={schedulePreview}
+                />
+              );
+            }}
+          />,
+        ]}
+        <Route
+          key="not-found"
+          path="*"
+          render={() => {
+            return (
+              <ContentError>
+                {jobTemplate && (
+                  <Link
+                    to={`/templates/job_template/${jobTemplate.id}/details`}
+                  >
+                    {i18n._(t`View Template Details`)}
+                  </Link>
+                )}
+              </ContentError>
+            );
+          }}
+        />
+      </Switch>
+    </>
+  );
+}
+
+export { JobTemplateSchedule as _JobTemplateSchedule };
+export default withI18n()(JobTemplateSchedule);
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx
new file mode 100644
index 0000000000..edbf0ead28
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { SchedulesAPI } from '@api';
+import { Route } from 'react-router-dom';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+
+import JobTemplateSchedule from './JobTemplateSchedule';
+
+jest.mock('@api/models/Schedules');
+
+SchedulesAPI.readDetail.mockResolvedValue({
+  data: {
+    url: '/api/v2/schedules/1',
+    rrule:
+      'DTSTART;TZID=America/New_York:20200220T000000 RRULE:FREQ=DAILY;INTERVAL=1;COUNT=1',
+    id: 1,
+    summary_fields: {
+      unified_job_template: {
+        id: 1,
+        name: 'Mock JT',
+        description: '',
+        unified_job_type: 'job',
+      },
+      user_capabilities: {
+        edit: true,
+        delete: true,
+      },
+      created_by: {
+        id: 1,
+        username: 'admin',
+        first_name: '',
+        last_name: '',
+      },
+      modified_by: {
+        id: 1,
+        username: 'admin',
+        first_name: '',
+        last_name: '',
+      },
+    },
+    created: '2020-03-03T20:38:54.210306Z',
+    modified: '2020-03-03T20:38:54.210336Z',
+    name: 'Mock JT Schedule',
+    next_run: '2020-02-20T05:00:00Z',
+  },
+});
+
+SchedulesAPI.createPreview.mockResolvedValue({
+  data: {
+    local: [],
+    utc: [],
+  },
+});
+
+SchedulesAPI.readCredentials.mockResolvedValue({
+  data: {
+    count: 0,
+    results: [],
+  },
+});
+
+describe('<JobTemplateSchedule />', () => {
+  let wrapper;
+  let history;
+  const jobTemplate = { id: 1, name: 'Mock JT' };
+  beforeAll(async () => {
+    history = createMemoryHistory({
+      initialEntries: ['/templates/job_template/1/schedules/1/details'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/templates/job_template/:id/schedules"
+          component={() => (
+            <JobTemplateSchedule
+              setBreadcrumb={() => {}}
+              jobTemplate={jobTemplate}
+            />
+          )}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: {
+                  params: { id: 1 },
+                },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+  });
+  afterAll(() => {
+    wrapper.unmount();
+  });
+  test('renders successfully', async () => {
+    expect(wrapper.length).toBe(1);
+  });
+  test('expect all tabs to exist, including Back to Schedules', async () => {
+    expect(
+      wrapper.find('button[link="/templates/job_template/1/schedules"]').length
+    ).toBe(1);
+    expect(wrapper.find('button[aria-label="Details"]').length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js b/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
new file mode 100644
index 0000000000..553eeb129d
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
@@ -0,0 +1 @@
+export { default } from './JobTemplateSchedule';
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
new file mode 100644
index 0000000000..e16f9629a1
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { withI18n } from '@lingui/react';
+
+import { Switch, Route, withRouter } from 'react-router-dom';
+
+import JobTemplateSchedule from '../JobTemplateSchedule/JobTemplateSchedule';
+
+function JobTemplateSchedules({ setBreadcrumb, jobTemplate }) {
+  return (
+    <Switch>
+      <Route
+        key="details"
+        path="/templates/job_template/:id/schedules/:scheduleId/"
+        render={() => (
+          <JobTemplateSchedule
+            jobTemplate={jobTemplate}
+            setBreadcrumb={setBreadcrumb}
+          />
+        )}
+      />
+    </Switch>
+  );
+}
+
+export { JobTemplateSchedules as _JobTemplateSchedules };
+export default withI18n()(withRouter(JobTemplateSchedules));
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx
new file mode 100644
index 0000000000..3a577e5557
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import JobTemplateSchedules from './JobTemplateSchedules';
+
+describe('<JobTemplateSchedules />', () => {
+  test('initially renders successfully', async () => {
+    let wrapper;
+    const history = createMemoryHistory({
+      initialEntries: ['/templates/job_template/1/schedules'],
+    });
+    const jobTemplate = { id: 1, name: 'Mock JT' };
+
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobTemplateSchedules
+          setBreadcrumb={() => {}}
+          jobTemplate={jobTemplate}
+        />,
+
+        {
+          context: {
+            router: { history, route: { location: history.location } },
+          },
+        }
+      );
+    });
+    expect(wrapper.length).toBe(1);
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js b/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js
new file mode 100644
index 0000000000..25b0df327b
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js
@@ -0,0 +1 @@
+export { default } from './JobTemplateSchedules';
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 9de406abaf..b867c41bee 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -10,10 +10,11 @@ import ContentError from '@components/ContentError';
 import JobList from '@components/JobList';
 import NotificationList from '@components/NotificationList';
 import RoutedTabs from '@components/RoutedTabs';
-import ScheduleList from '@components/ScheduleList';
+import { ScheduleList } from '@components/Schedule';
 import { ResourceAccessList } from '@components/ResourceAccessList';
 import JobTemplateDetail from './JobTemplateDetail';
 import JobTemplateEdit from './JobTemplateEdit';
+import JobTemplateSchedules from './JobTemplateSchedules';
 import { JobTemplatesAPI, OrganizationsAPI } from '@api';
 import SurveyList from './shared/SurveyList';
 
@@ -96,7 +97,7 @@ class Template extends Component {
   }
 
   render() {
-    const { i18n, location, match, me } = this.props;
+    const { i18n, location, match, me, setBreadcrumb } = this.props;
     const {
       contentError,
       hasContentLoading,
@@ -126,6 +127,10 @@ class Template extends Component {
     }
 
     tabsArray.push(
+      {
+        name: i18n._(t`Schedules`),
+        link: `${match.url}/schedules`,
+      },
       {
         name: i18n._(t`Completed Jobs`),
         link: `${match.url}/completed_jobs`,
@@ -149,7 +154,10 @@ class Template extends Component {
       </TabbedCardHeader>
     );
 
-    if (location.pathname.endsWith('edit')) {
+    if (
+      location.pathname.endsWith('edit') ||
+      location.pathname.includes('schedules/')
+    ) {
       cardHeader = null;
     }
 
@@ -211,6 +219,18 @@ class Template extends Component {
                 )}
               />
             )}
+            {template && (
+              <Route
+                key="groups"
+                path="/templates/:templateType/:id/schedules"
+                render={() => (
+                  <JobTemplateSchedules
+                    setBreadcrumb={setBreadcrumb}
+                    jobTemplate={template}
+                  />
+                )}
+              />
+            )}
             {canSeeNotificationsTab && (
               <Route
                 path="/templates/:templateType/:id/notifications"
diff --git a/awx/ui_next/src/screens/Template/Template.test.jsx b/awx/ui_next/src/screens/Template/Template.test.jsx
index c4f0a36af5..3e72dcd987 100644
--- a/awx/ui_next/src/screens/Template/Template.test.jsx
+++ b/awx/ui_next/src/screens/Template/Template.test.jsx
@@ -61,7 +61,7 @@ describe('<Template />', () => {
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
-      el => el.length === 6
+      el => el.length === 7
     );
     expect(tabs.at(2).text()).toEqual('Notifications');
     done();
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index 9bc33d0a0e..760ef2d1e9 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -27,7 +27,7 @@ class Templates extends Component {
     };
   }
 
-  setBreadCrumbConfig = template => {
+  setBreadCrumbConfig = (template, nestedResource) => {
     const { i18n } = this.props;
     if (!template) {
       return;
@@ -53,6 +53,13 @@ class Templates extends Component {
         t`Completed Jobs`
       ),
       [`/templates/${template.type}/${template.id}/survey`]: i18n._(t`Survey`),
+      [`/templates/${template.type}/${template.id}/schedules`]: i18n._(
+        t`Schedules`
+      ),
+      [`/templates/${template.type}/${template.id}/schedules/${nestedResource &&
+        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
+      [`/templates/${template.type}/${template.id}/schedules/${nestedResource &&
+        nestedResource.id}/details`]: i18n._(t`Schedule Details`),
     };
     this.setState({ breadcrumbConfig });
   };
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 22d1dcd187..6407ec4e96 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -10,7 +10,7 @@ import ContentError from '@components/ContentError';
 import FullPage from '@components/FullPage';
 import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
-import ScheduleList from '@components/ScheduleList';
+import { ScheduleList } from '@components/Schedule';
 import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js
index b4270c707d..c1b592cb5a 100644
--- a/awx/ui_next/src/types.js
+++ b/awx/ui_next/src/types.js
@@ -291,7 +291,7 @@ export const Schedule = shape({
   skip_tags: string,
   limit: string,
   diff_mode: bool,
-  verbosity: string,
+  verbosity: number,
   unified_job_template: number,
   enabled: bool,
   dtstart: string,
diff --git a/awx/ui_next/src/util/dates.jsx b/awx/ui_next/src/util/dates.jsx
index 87c362414a..ca897142e4 100644
--- a/awx/ui_next/src/util/dates.jsx
+++ b/awx/ui_next/src/util/dates.jsx
@@ -5,6 +5,10 @@ export function formatDateString(dateString, lang = getLanguage(navigator)) {
   return new Date(dateString).toLocaleString(lang);
 }
 
+export function formatDateStringUTC(dateString, lang = getLanguage(navigator)) {
+  return new Date(dateString).toLocaleString(lang, { timeZone: 'UTC' });
+}
+
 export function secondsToHHMMSS(seconds) {
   return new Date(seconds * 1000).toISOString().substr(11, 8);
 }

From 01fe89e43c57f78134b2a940e140b04c28f0600f Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 4 Mar 2020 17:09:30 -0500
Subject: [PATCH 44/48] Moves request to generate preview down into the
 ScheduleDetail component

---
 .../components/Schedule/ScheduleDetail.jsx    | 27 +++++++++----------
 .../Schedule/ScheduleDetail.test.jsx          | 22 +++++++--------
 .../JobTemplateSchedule.jsx                   | 13 +--------
 3 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
index a8aad4daf1..c6ae0b97c4 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { rrulestr } from 'rrule';
 import styled from 'styled-components';
-import { shape } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Schedule } from '@types';
@@ -21,7 +20,7 @@ const PromptTitle = styled(Title)`
   --pf-c-title--m-md--FontWeight: 700;
 `;
 
-function ScheduleDetail({ preview, schedule, i18n }) {
+function ScheduleDetail({ schedule, i18n }) {
   const {
     id,
     created,
@@ -44,21 +43,26 @@ function ScheduleDetail({ preview, schedule, i18n }) {
   } = schedule;
 
   const {
-    result: credentials,
+    result: [credentials, preview],
     isLoading,
     error,
-    request: fetchCredentials,
+    request: fetchCredentialsAndPreview,
   } = useRequest(
     useCallback(async () => {
-      const { data } = await SchedulesAPI.readCredentials(id);
-      return data.results;
-    }, [id]),
+      const [{ data }, { data: schedulePreview }] = await Promise.all([
+        SchedulesAPI.readCredentials(id),
+        SchedulesAPI.createPreview({
+          rrule,
+        }),
+      ]);
+      return [data.results, schedulePreview];
+    }, [id, rrule]),
     []
   );
 
   useEffect(() => {
-    fetchCredentials();
-  }, [fetchCredentials]);
+    fetchCredentialsAndPreview();
+  }, [fetchCredentialsAndPreview]);
 
   const rule = rrulestr(rrule);
   const repeatFrequency =
@@ -192,12 +196,7 @@ function ScheduleDetail({ preview, schedule, i18n }) {
 }
 
 ScheduleDetail.propTypes = {
-  preview: shape(),
   schedule: Schedule.isRequired,
 };
 
-ScheduleDetail.defaultProps = {
-  preview: { local: [], utc: [] },
-};
-
 export default withI18n()(ScheduleDetail);
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
index 0dbe6ff6bb..d67ff21fc2 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
@@ -52,10 +52,12 @@ const schedule = {
   next_run: '2020-03-16T04:00:00Z',
 };
 
-const preview = {
-  local: [],
-  utc: [],
-};
+SchedulesAPI.createPreview.mockResolvedValue({
+  data: {
+    local: [],
+    utc: [],
+  },
+});
 
 describe('<ScheduleDetail />', () => {
   let wrapper;
@@ -76,9 +78,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={schedule} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={schedule} />}
         />,
         {
           context: {
@@ -159,9 +159,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={scheduleWithPrompts} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={scheduleWithPrompts} />}
         />,
         {
           context: {
@@ -243,9 +241,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={schedule} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={schedule} />}
         />,
         {
           context: {
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
index 134ee37ffb..9a70207bc8 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
@@ -22,7 +22,6 @@ import { SchedulesAPI } from '@api';
 
 function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
   const [jobTemplateSchedule, setJobTemplateSchedule] = useState(null);
-  const [schedulePreview, setSchedulePreview] = useState(null);
   const [contentLoading, setContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
   const { id: jobTemplateId, scheduleId } = useParams();
@@ -32,12 +31,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
     const loadData = async () => {
       try {
         const { data } = await SchedulesAPI.readDetail(scheduleId);
-        const { data: preview } = await SchedulesAPI.createPreview({
-          rrule: data.rrule,
-        });
-
         setJobTemplateSchedule(data);
-        setSchedulePreview(preview);
         setBreadcrumb(jobTemplate, data);
       } catch (err) {
         setContentError(err);
@@ -122,12 +116,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
             key="details"
             path="/templates/job_template/:id/schedules/:scheduleId/details"
             render={() => {
-              return (
-                <ScheduleDetail
-                  schedule={jobTemplateSchedule}
-                  preview={schedulePreview}
-                />
-              );
+              return <ScheduleDetail schedule={jobTemplateSchedule} />;
             }}
           />,
         ]}

From 90e047821d52c8e321bc206e9b93b12f85e0ab1a Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 5 Mar 2020 17:46:23 -0500
Subject: [PATCH 45/48] Makes entire hierarchy of schedule components generic

---
 .../Schedule/Schedule.jsx}                    | 56 +++++++++----------
 .../Schedule/Schedule.test.jsx}               | 11 ++--
 .../{ => ScheduleDetail}/ScheduleDetail.jsx   |  0
 .../ScheduleDetail.test.jsx                   |  0
 .../Schedule/ScheduleDetail/index.js          |  1 +
 .../{ => ScheduleList}/ScheduleList.jsx       |  2 +-
 .../{ => ScheduleList}/ScheduleList.test.jsx  |  4 +-
 .../{ => ScheduleList}/ScheduleListItem.jsx   |  0
 .../ScheduleListItem.test.jsx                 |  2 +-
 .../components/Schedule/ScheduleList/index.js |  1 +
 .../ScheduleOccurrences.jsx                   |  0
 .../ScheduleOccurrences.test.jsx              |  0
 .../Schedule/ScheduleOccurrences/index.js     |  1 +
 .../{ => ScheduleToggle}/ScheduleToggle.jsx   |  0
 .../ScheduleToggle.test.jsx                   |  0
 .../Schedule/ScheduleToggle/index.js          |  1 +
 .../src/components/Schedule/Schedules.jsx     | 33 +++++++++++
 .../Schedule/Schedules.test.jsx}              |  9 +--
 awx/ui_next/src/components/Schedule/index.js  |  3 +-
 awx/ui_next/src/screens/Project/Project.jsx   | 13 +++--
 .../{Schedules.jsx => AllSchedules.jsx}       |  4 +-
 ...hedules.test.jsx => AllSchedules.test.jsx} |  8 +--
 awx/ui_next/src/screens/Schedule/index.js     |  2 +-
 .../Template/JobTemplateSchedule/index.js     |  1 -
 .../JobTemplateSchedules.jsx                  | 26 ---------
 .../Template/JobTemplateSchedules/index.js    |  1 -
 awx/ui_next/src/screens/Template/Template.jsx | 22 ++------
 .../src/screens/Template/Template.test.jsx    |  3 +-
 .../screens/Template/WorkflowJobTemplate.jsx  | 15 +++--
 29 files changed, 110 insertions(+), 109 deletions(-)
 rename awx/ui_next/src/{screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx => components/Schedule/Schedule.jsx} (60%)
 rename awx/ui_next/src/{screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx => components/Schedule/Schedule.test.jsx} (91%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleDetail}/ScheduleDetail.jsx (100%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleDetail}/ScheduleDetail.test.jsx (100%)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleDetail/index.js
 rename awx/ui_next/src/components/Schedule/{ => ScheduleList}/ScheduleList.jsx (98%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleList}/ScheduleList.test.jsx (98%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleList}/ScheduleListItem.jsx (100%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleList}/ScheduleListItem.test.jsx (98%)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleList/index.js
 rename awx/ui_next/src/components/Schedule/{ => ScheduleOccurrences}/ScheduleOccurrences.jsx (100%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleOccurrences}/ScheduleOccurrences.test.jsx (100%)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleOccurrences/index.js
 rename awx/ui_next/src/components/Schedule/{ => ScheduleToggle}/ScheduleToggle.jsx (100%)
 rename awx/ui_next/src/components/Schedule/{ => ScheduleToggle}/ScheduleToggle.test.jsx (100%)
 create mode 100644 awx/ui_next/src/components/Schedule/ScheduleToggle/index.js
 create mode 100644 awx/ui_next/src/components/Schedule/Schedules.jsx
 rename awx/ui_next/src/{screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx => components/Schedule/Schedules.test.jsx} (75%)
 rename awx/ui_next/src/screens/Schedule/{Schedules.jsx => AllSchedules.jsx} (93%)
 rename awx/ui_next/src/screens/Schedule/{Schedules.test.jsx => AllSchedules.test.jsx} (79%)
 delete mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
 delete mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
 delete mode 100644 awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js

diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx b/awx/ui_next/src/components/Schedule/Schedule.jsx
similarity index 60%
rename from awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
rename to awx/ui_next/src/components/Schedule/Schedule.jsx
index 9a70207bc8..852f811b40 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx
+++ b/awx/ui_next/src/components/Schedule/Schedule.jsx
@@ -20,19 +20,21 @@ import { TabbedCardHeader } from '@components/Card';
 import { ScheduleDetail } from '@components/Schedule';
 import { SchedulesAPI } from '@api';
 
-function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
-  const [jobTemplateSchedule, setJobTemplateSchedule] = useState(null);
+function Schedule({ i18n, setBreadcrumb, unifiedJobTemplate }) {
+  const [schedule, setSchedule] = useState(null);
   const [contentLoading, setContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
-  const { id: jobTemplateId, scheduleId } = useParams();
+  const { scheduleId } = useParams();
   const location = useLocation();
+  const { pathname } = location;
+  const pathRoot = pathname.substr(0, pathname.indexOf('schedules'));
 
   useEffect(() => {
     const loadData = async () => {
       try {
         const { data } = await SchedulesAPI.readDetail(scheduleId);
-        setJobTemplateSchedule(data);
-        setBreadcrumb(jobTemplate, data);
+        setSchedule(data);
+        setBreadcrumb(unifiedJobTemplate, data);
       } catch (err) {
         setContentError(err);
       } finally {
@@ -41,7 +43,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
     };
 
     loadData();
-  }, [location.pathname, scheduleId, jobTemplate, setBreadcrumb]);
+  }, [location.pathname, scheduleId, unifiedJobTemplate, setBreadcrumb]);
 
   const tabsArray = [
     {
@@ -51,14 +53,12 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
           {i18n._(t`Back to Schedules`)}
         </>
       ),
-      link: `/templates/job_template/${jobTemplate.id}/schedules`,
+      link: `${pathRoot}schedules`,
       id: 99,
     },
     {
       name: i18n._(t`Details`),
-      link: `/templates/job_template/${
-        jobTemplate.id
-      }/schedules/${jobTemplateSchedule && jobTemplateSchedule.id}/details`,
+      link: `${pathRoot}schedules/${schedule && schedule.id}/details`,
       id: 0,
     },
   ];
@@ -68,15 +68,13 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
   }
 
   if (
-    jobTemplateSchedule.summary_fields.unified_job_template.id !==
-    parseInt(jobTemplateId, 10)
+    schedule.summary_fields.unified_job_template.id !==
+    parseInt(unifiedJobTemplate.id, 10)
   ) {
     return (
       <ContentError>
-        {jobTemplateSchedule && (
-          <Link to={`/templates/job_template/${jobTemplate.id}/schedules`}>
-            {i18n._(t`View Template Schedules`)}
-          </Link>
+        {schedule && (
+          <Link to={`${pathRoot}schedules`}>{i18n._(t`View Schedules`)}</Link>
         )}
       </ContentError>
     );
@@ -95,9 +93,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
         <CardActions>
-          <CardCloseButton
-            linkTo={`/templates/job_template/${jobTemplate.id}/schedules`}
-          />
+          <CardCloseButton linkTo={`${pathRoot}schedules`} />
         </CardActions>
       </TabbedCardHeader>
     );
@@ -107,16 +103,16 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
       {cardHeader}
       <Switch>
         <Redirect
-          from="/templates/job_template/:id/schedules/:scheduleId"
-          to="/templates/job_template/:id/schedules/:scheduleId/details"
+          from={`${pathRoot}schedules/:scheduleId`}
+          to={`${pathRoot}schedules/:scheduleId/details`}
           exact
         />
-        {jobTemplateSchedule && [
+        {schedule && [
           <Route
             key="details"
-            path="/templates/job_template/:id/schedules/:scheduleId/details"
+            path={`${pathRoot}schedules/:scheduleId/details`}
             render={() => {
-              return <ScheduleDetail schedule={jobTemplateSchedule} />;
+              return <ScheduleDetail schedule={schedule} />;
             }}
           />,
         ]}
@@ -126,11 +122,9 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
           render={() => {
             return (
               <ContentError>
-                {jobTemplate && (
-                  <Link
-                    to={`/templates/job_template/${jobTemplate.id}/details`}
-                  >
-                    {i18n._(t`View Template Details`)}
+                {unifiedJobTemplate && (
+                  <Link to={`${pathRoot}details`}>
+                    {i18n._(t`View Details`)}
                   </Link>
                 )}
               </ContentError>
@@ -142,5 +136,5 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
   );
 }
 
-export { JobTemplateSchedule as _JobTemplateSchedule };
-export default withI18n()(JobTemplateSchedule);
+export { Schedule as _Schedule };
+export default withI18n()(Schedule);
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx b/awx/ui_next/src/components/Schedule/Schedule.test.jsx
similarity index 91%
rename from awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx
rename to awx/ui_next/src/components/Schedule/Schedule.test.jsx
index edbf0ead28..3ed3c5b025 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.test.jsx
+++ b/awx/ui_next/src/components/Schedule/Schedule.test.jsx
@@ -4,8 +4,7 @@ import { Route } from 'react-router-dom';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-
-import JobTemplateSchedule from './JobTemplateSchedule';
+import Schedule from './Schedule';
 
 jest.mock('@api/models/Schedules');
 
@@ -60,10 +59,10 @@ SchedulesAPI.readCredentials.mockResolvedValue({
   },
 });
 
-describe('<JobTemplateSchedule />', () => {
+describe('<Schedule />', () => {
   let wrapper;
   let history;
-  const jobTemplate = { id: 1, name: 'Mock JT' };
+  const unifiedJobTemplate = { id: 1, name: 'Mock JT' };
   beforeAll(async () => {
     history = createMemoryHistory({
       initialEntries: ['/templates/job_template/1/schedules/1/details'],
@@ -73,9 +72,9 @@ describe('<JobTemplateSchedule />', () => {
         <Route
           path="/templates/job_template/:id/schedules"
           component={() => (
-            <JobTemplateSchedule
+            <Schedule
               setBreadcrumb={() => {}}
-              jobTemplate={jobTemplate}
+              unifiedJobTemplate={unifiedJobTemplate}
             />
           )}
         />,
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleDetail.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.test.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleDetail.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.test.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail/index.js b/awx/ui_next/src/components/Schedule/ScheduleDetail/index.js
new file mode 100644
index 0000000000..dc7a5b7477
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail/index.js
@@ -0,0 +1 @@
+export { default } from './ScheduleDetail';
diff --git a/awx/ui_next/src/components/Schedule/ScheduleList.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx
similarity index 98%
rename from awx/ui_next/src/components/Schedule/ScheduleList.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx
index 71f1e2d3f4..999f28a6b9 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleList.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx
@@ -7,13 +7,13 @@ import { SchedulesAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import DataListToolbar from '@components/DataListToolbar';
-import { ScheduleListItem } from '@components/Schedule';
 import PaginatedDataList, {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
 import useRequest, { useDeleteItems } from '@util/useRequest';
 import { getQSConfig, parseQueryString } from '@util/qs';
+import ScheduleListItem from './ScheduleListItem';
 
 const QS_CONFIG = getQSConfig('schedule', {
   page: 1,
diff --git a/awx/ui_next/src/components/Schedule/ScheduleList.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.test.jsx
similarity index 98%
rename from awx/ui_next/src/components/Schedule/ScheduleList.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.test.jsx
index c210837aea..85ceffb759 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleList.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.test.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { SchedulesAPI } from '@api';
-import { ScheduleList } from '@components/Schedule';
-import mockSchedules from './data.schedules.json';
+import ScheduleList from './ScheduleList';
+import mockSchedules from '../data.schedules.json';
 
 jest.mock('@api/models/Schedules');
 
diff --git a/awx/ui_next/src/components/Schedule/ScheduleListItem.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleListItem.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx
similarity index 98%
rename from awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx
index 2fe7bd4b53..8e64b651a2 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleListItem.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import { ScheduleListItem } from '@components/Schedule';
+import ScheduleListItem from './ScheduleListItem';
 
 const mockSchedule = {
   rrule:
diff --git a/awx/ui_next/src/components/Schedule/ScheduleList/index.js b/awx/ui_next/src/components/Schedule/ScheduleList/index.js
new file mode 100644
index 0000000000..35e4093cba
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleList/index.js
@@ -0,0 +1 @@
+export { default } from './ScheduleList';
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleOccurrences.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.test.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleOccurrences.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.test.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/index.js b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/index.js
new file mode 100644
index 0000000000..2b21bebcce
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/index.js
@@ -0,0 +1 @@
+export { default } from './ScheduleOccurrences';
diff --git a/awx/ui_next/src/components/Schedule/ScheduleToggle.jsx b/awx/ui_next/src/components/Schedule/ScheduleToggle/ScheduleToggle.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleToggle.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleToggle/ScheduleToggle.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleToggle.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleToggle/ScheduleToggle.test.jsx
similarity index 100%
rename from awx/ui_next/src/components/Schedule/ScheduleToggle.test.jsx
rename to awx/ui_next/src/components/Schedule/ScheduleToggle/ScheduleToggle.test.jsx
diff --git a/awx/ui_next/src/components/Schedule/ScheduleToggle/index.js b/awx/ui_next/src/components/Schedule/ScheduleToggle/index.js
new file mode 100644
index 0000000000..65573a4fde
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/ScheduleToggle/index.js
@@ -0,0 +1 @@
+export { default } from './ScheduleToggle';
diff --git a/awx/ui_next/src/components/Schedule/Schedules.jsx b/awx/ui_next/src/components/Schedule/Schedules.jsx
new file mode 100644
index 0000000000..6330debbe8
--- /dev/null
+++ b/awx/ui_next/src/components/Schedule/Schedules.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { withI18n } from '@lingui/react';
+import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Schedule, ScheduleList } from '@components/Schedule';
+
+function Schedules({ setBreadcrumb, unifiedJobTemplate, loadSchedules }) {
+  const match = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route
+        key="details"
+        path={`${match.path}/:scheduleId`}
+        render={() => (
+          <Schedule
+            unifiedJobTemplate={unifiedJobTemplate}
+            setBreadcrumb={setBreadcrumb}
+          />
+        )}
+      />
+      <Route
+        key="list"
+        path={`${match.path}`}
+        render={() => {
+          return <ScheduleList loadSchedules={loadSchedules} />;
+        }}
+      />
+    </Switch>
+  );
+}
+
+export { Schedules as _Schedules };
+export default withI18n()(Schedules);
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx b/awx/ui_next/src/components/Schedule/Schedules.test.jsx
similarity index 75%
rename from awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx
rename to awx/ui_next/src/components/Schedule/Schedules.test.jsx
index 3a577e5557..5273c040e6 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.test.jsx
+++ b/awx/ui_next/src/components/Schedule/Schedules.test.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-import JobTemplateSchedules from './JobTemplateSchedules';
+import Schedules from './Schedules';
 
-describe('<JobTemplateSchedules />', () => {
+describe('<Schedules />', () => {
   test('initially renders successfully', async () => {
     let wrapper;
     const history = createMemoryHistory({
@@ -14,10 +14,7 @@ describe('<JobTemplateSchedules />', () => {
 
     await act(async () => {
       wrapper = mountWithContexts(
-        <JobTemplateSchedules
-          setBreadcrumb={() => {}}
-          jobTemplate={jobTemplate}
-        />,
+        <Schedules setBreadcrumb={() => {}} jobTemplate={jobTemplate} />,
 
         {
           context: {
diff --git a/awx/ui_next/src/components/Schedule/index.js b/awx/ui_next/src/components/Schedule/index.js
index bc17abadfc..f734f868d2 100644
--- a/awx/ui_next/src/components/Schedule/index.js
+++ b/awx/ui_next/src/components/Schedule/index.js
@@ -1,5 +1,6 @@
+export { default as Schedule } from './Schedule';
+export { default as Schedules } from './Schedules';
 export { default as ScheduleList } from './ScheduleList';
-export { default as ScheduleListItem } from './ScheduleListItem';
 export { default as ScheduleOccurrences } from './ScheduleOccurrences';
 export { default as ScheduleToggle } from './ScheduleToggle';
 export { default as ScheduleDetail } from './ScheduleDetail';
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index 4a758d79a2..0016acdc39 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -9,7 +9,7 @@ import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList';
 import { ResourceAccessList } from '@components/ResourceAccessList';
-import { ScheduleList } from '@components/Schedule';
+import { Schedules } from '@components/Schedule';
 import ProjectDetail from './ProjectDetail';
 import ProjectEdit from './ProjectEdit';
 import ProjectJobTemplatesList from './ProjectJobTemplatesList';
@@ -116,7 +116,7 @@ class Project extends Component {
   }
 
   render() {
-    const { location, match, me, i18n } = this.props;
+    const { location, match, me, i18n, setBreadcrumb } = this.props;
 
     const {
       project,
@@ -175,7 +175,10 @@ class Project extends Component {
       cardHeader = null;
     }
 
-    if (location.pathname.endsWith('edit')) {
+    if (
+      location.pathname.endsWith('edit') ||
+      location.pathname.includes('schedules/')
+    ) {
       cardHeader = null;
     }
 
@@ -247,7 +250,9 @@ class Project extends Component {
               <Route
                 path="/projects/:id/schedules"
                 render={() => (
-                  <ScheduleList
+                  <Schedules
+                    setBreadcrumb={setBreadcrumb}
+                    unifiedJobTemplate={project}
                     loadSchedules={this.loadSchedules}
                     loadScheduleOptions={this.loadScheduleOptions}
                   />
diff --git a/awx/ui_next/src/screens/Schedule/Schedules.jsx b/awx/ui_next/src/screens/Schedule/AllSchedules.jsx
similarity index 93%
rename from awx/ui_next/src/screens/Schedule/Schedules.jsx
rename to awx/ui_next/src/screens/Schedule/AllSchedules.jsx
index 3322e10d1b..1f7ffa3188 100644
--- a/awx/ui_next/src/screens/Schedule/Schedules.jsx
+++ b/awx/ui_next/src/screens/Schedule/AllSchedules.jsx
@@ -8,7 +8,7 @@ import { ScheduleList } from '@components/Schedule';
 import { SchedulesAPI } from '@api';
 import { PageSection, Card } from '@patternfly/react-core';
 
-function Schedules({ i18n }) {
+function AllSchedules({ i18n }) {
   const loadScheduleOptions = () => {
     return SchedulesAPI.readOptions();
   };
@@ -41,4 +41,4 @@ function Schedules({ i18n }) {
   );
 }
 
-export default withI18n()(Schedules);
+export default withI18n()(AllSchedules);
diff --git a/awx/ui_next/src/screens/Schedule/Schedules.test.jsx b/awx/ui_next/src/screens/Schedule/AllSchedules.test.jsx
similarity index 79%
rename from awx/ui_next/src/screens/Schedule/Schedules.test.jsx
rename to awx/ui_next/src/screens/Schedule/AllSchedules.test.jsx
index ebdc67a046..50e4b76f66 100644
--- a/awx/ui_next/src/screens/Schedule/Schedules.test.jsx
+++ b/awx/ui_next/src/screens/Schedule/AllSchedules.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { createMemoryHistory } from 'history';
-import Schedules from './Schedules';
+import AllSchedules from './AllSchedules';
 
-describe('<Schedules />', () => {
+describe('<AllSchedules />', () => {
   let wrapper;
 
   afterEach(() => {
@@ -11,7 +11,7 @@ describe('<Schedules />', () => {
   });
 
   test('initially renders succesfully', () => {
-    wrapper = mountWithContexts(<Schedules />);
+    wrapper = mountWithContexts(<AllSchedules />);
   });
 
   test('should display schedule list breadcrumb heading', () => {
@@ -19,7 +19,7 @@ describe('<Schedules />', () => {
       initialEntries: ['/schedules'],
     });
 
-    wrapper = mountWithContexts(<Schedules />, {
+    wrapper = mountWithContexts(<AllSchedules />, {
       context: {
         router: {
           history,
diff --git a/awx/ui_next/src/screens/Schedule/index.js b/awx/ui_next/src/screens/Schedule/index.js
index 64f2dedc84..3e38a47a40 100644
--- a/awx/ui_next/src/screens/Schedule/index.js
+++ b/awx/ui_next/src/screens/Schedule/index.js
@@ -1 +1 @@
-export { default } from './Schedules';
+export { default } from './AllSchedules';
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js b/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
deleted file mode 100644
index 553eeb129d..0000000000
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedule/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './JobTemplateSchedule';
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx b/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
deleted file mode 100644
index e16f9629a1..0000000000
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedules/JobTemplateSchedules.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { withI18n } from '@lingui/react';
-
-import { Switch, Route, withRouter } from 'react-router-dom';
-
-import JobTemplateSchedule from '../JobTemplateSchedule/JobTemplateSchedule';
-
-function JobTemplateSchedules({ setBreadcrumb, jobTemplate }) {
-  return (
-    <Switch>
-      <Route
-        key="details"
-        path="/templates/job_template/:id/schedules/:scheduleId/"
-        render={() => (
-          <JobTemplateSchedule
-            jobTemplate={jobTemplate}
-            setBreadcrumb={setBreadcrumb}
-          />
-        )}
-      />
-    </Switch>
-  );
-}
-
-export { JobTemplateSchedules as _JobTemplateSchedules };
-export default withI18n()(withRouter(JobTemplateSchedules));
diff --git a/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js b/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js
deleted file mode 100644
index 25b0df327b..0000000000
--- a/awx/ui_next/src/screens/Template/JobTemplateSchedules/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './JobTemplateSchedules';
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index b867c41bee..7cdd8ce032 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -10,11 +10,10 @@ import ContentError from '@components/ContentError';
 import JobList from '@components/JobList';
 import NotificationList from '@components/NotificationList';
 import RoutedTabs from '@components/RoutedTabs';
-import { ScheduleList } from '@components/Schedule';
+import { Schedules } from '@components/Schedule';
 import { ResourceAccessList } from '@components/ResourceAccessList';
 import JobTemplateDetail from './JobTemplateDetail';
 import JobTemplateEdit from './JobTemplateEdit';
-import JobTemplateSchedules from './JobTemplateSchedules';
 import { JobTemplatesAPI, OrganizationsAPI } from '@api';
 import SurveyList from './shared/SurveyList';
 
@@ -221,12 +220,14 @@ class Template extends Component {
             )}
             {template && (
               <Route
-                key="groups"
+                key="schedules"
                 path="/templates/:templateType/:id/schedules"
                 render={() => (
-                  <JobTemplateSchedules
+                  <Schedules
                     setBreadcrumb={setBreadcrumb}
-                    jobTemplate={template}
+                    unifiedJobTemplate={template}
+                    loadSchedules={this.loadSchedules}
+                    loadScheduleOptions={this.loadScheduleOptions}
                   />
                 )}
               />
@@ -248,17 +249,6 @@ class Template extends Component {
                 <JobList defaultParams={{ job__job_template: template.id }} />
               </Route>
             )}
-            {template && (
-              <Route
-                path="/templates/:templateType/:id/schedules"
-                render={() => (
-                  <ScheduleList
-                    loadSchedules={this.loadSchedules}
-                    loadScheduleOptions={this.loadScheduleOptions}
-                  />
-                )}
-              />
-            )}
             {template && (
               <Route
                 path="/templates/:templateType/:id/survey"
diff --git a/awx/ui_next/src/screens/Template/Template.test.jsx b/awx/ui_next/src/screens/Template/Template.test.jsx
index 3e72dcd987..26583f5f0b 100644
--- a/awx/ui_next/src/screens/Template/Template.test.jsx
+++ b/awx/ui_next/src/screens/Template/Template.test.jsx
@@ -58,10 +58,11 @@ describe('<Template />', () => {
     const wrapper = mountWithContexts(
       <Template setBreadcrumb={() => {}} me={mockMe} />
     );
+
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
-      el => el.length === 7
+      el => el.length === 6
     );
     expect(tabs.at(2).text()).toEqual('Notifications');
     done();
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 6407ec4e96..a1a29752b0 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -10,7 +10,7 @@ import ContentError from '@components/ContentError';
 import FullPage from '@components/FullPage';
 import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
-import { ScheduleList } from '@components/Schedule';
+import { Schedules } from '@components/Schedule';
 import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
@@ -88,7 +88,7 @@ class WorkflowJobTemplate extends Component {
   }
 
   render() {
-    const { i18n, location, match } = this.props;
+    const { i18n, location, match, setBreadcrumb } = this.props;
     const {
       contentError,
       hasContentLoading,
@@ -152,7 +152,10 @@ class WorkflowJobTemplate extends Component {
     return (
       <PageSection>
         <Card>
-          {location.pathname.endsWith('edit') ? null : cardHeader}
+          {location.pathname.endsWith('edit') ||
+          location.pathname.includes('schedules/')
+            ? null
+            : cardHeader}
           <Switch>
             <Redirect
               from="/templates/workflow_job_template/:id"
@@ -207,9 +210,11 @@ class WorkflowJobTemplate extends Component {
             )}
             {template?.id && (
               <Route
-                path="/templates/:templateType/:id/schedules"
+                path="/templates/workflow_job_template/:id/schedules"
                 render={() => (
-                  <ScheduleList
+                  <Schedules
+                    setBreadcrumb={setBreadcrumb}
+                    unifiedJobTemplate={template}
                     loadSchedules={this.loadSchedules}
                     loadScheduleOptions={this.loadScheduleOptions}
                   />

From 314e3458253bda609b528f305cb14f78a870c8ea Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 6 Mar 2020 09:37:51 -0500
Subject: [PATCH 46/48] Tweak Schedules props to include the options request
 callback needed to load the list after rebasing.

---
 awx/ui_next/src/components/Schedule/Schedules.jsx  | 14 ++++++++++++--
 .../src/components/Schedule/Schedules.test.jsx     |  7 ++++++-
 awx/ui_next/src/screens/Template/Template.test.jsx |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/Schedule/Schedules.jsx b/awx/ui_next/src/components/Schedule/Schedules.jsx
index 6330debbe8..4866aba404 100644
--- a/awx/ui_next/src/components/Schedule/Schedules.jsx
+++ b/awx/ui_next/src/components/Schedule/Schedules.jsx
@@ -3,7 +3,12 @@ import { withI18n } from '@lingui/react';
 import { Switch, Route, useRouteMatch } from 'react-router-dom';
 import { Schedule, ScheduleList } from '@components/Schedule';
 
-function Schedules({ setBreadcrumb, unifiedJobTemplate, loadSchedules }) {
+function Schedules({
+  setBreadcrumb,
+  unifiedJobTemplate,
+  loadSchedules,
+  loadScheduleOptions,
+}) {
   const match = useRouteMatch();
 
   return (
@@ -22,7 +27,12 @@ function Schedules({ setBreadcrumb, unifiedJobTemplate, loadSchedules }) {
         key="list"
         path={`${match.path}`}
         render={() => {
-          return <ScheduleList loadSchedules={loadSchedules} />;
+          return (
+            <ScheduleList
+              loadSchedules={loadSchedules}
+              loadScheduleOptions={loadScheduleOptions}
+            />
+          );
         }}
       />
     </Switch>
diff --git a/awx/ui_next/src/components/Schedule/Schedules.test.jsx b/awx/ui_next/src/components/Schedule/Schedules.test.jsx
index 5273c040e6..4589403c01 100644
--- a/awx/ui_next/src/components/Schedule/Schedules.test.jsx
+++ b/awx/ui_next/src/components/Schedule/Schedules.test.jsx
@@ -14,7 +14,12 @@ describe('<Schedules />', () => {
 
     await act(async () => {
       wrapper = mountWithContexts(
-        <Schedules setBreadcrumb={() => {}} jobTemplate={jobTemplate} />,
+        <Schedules
+          setBreadcrumb={() => {}}
+          jobTemplate={jobTemplate}
+          loadSchedules={() => {}}
+          loadScheduleOptions={() => {}}
+        />,
 
         {
           context: {
diff --git a/awx/ui_next/src/screens/Template/Template.test.jsx b/awx/ui_next/src/screens/Template/Template.test.jsx
index 26583f5f0b..2f3c56cc58 100644
--- a/awx/ui_next/src/screens/Template/Template.test.jsx
+++ b/awx/ui_next/src/screens/Template/Template.test.jsx
@@ -62,7 +62,7 @@ describe('<Template />', () => {
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
-      el => el.length === 6
+      el => el.length === 7
     );
     expect(tabs.at(2).text()).toEqual('Notifications');
     done();

From 21b4455ee68aae77e84b74d90639ed864730c0d5 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 6 Mar 2020 14:20:46 -0500
Subject: [PATCH 47/48] Change nestedResource to schedule in
 setBreadcrumbConfig.  As it currently stands the only nested resource that
 could be passed here is a schedule.

---
 awx/ui_next/src/screens/Template/Templates.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index 760ef2d1e9..b8c5252aca 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -27,7 +27,7 @@ class Templates extends Component {
     };
   }
 
-  setBreadCrumbConfig = (template, nestedResource) => {
+  setBreadCrumbConfig = (template, schedule) => {
     const { i18n } = this.props;
     if (!template) {
       return;
@@ -56,10 +56,10 @@ class Templates extends Component {
       [`/templates/${template.type}/${template.id}/schedules`]: i18n._(
         t`Schedules`
       ),
-      [`/templates/${template.type}/${template.id}/schedules/${nestedResource &&
-        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
-      [`/templates/${template.type}/${template.id}/schedules/${nestedResource &&
-        nestedResource.id}/details`]: i18n._(t`Schedule Details`),
+      [`/templates/${template.type}/${template.id}/schedules/${schedule &&
+        schedule.id}`]: `${schedule && schedule.name}`,
+      [`/templates/${template.type}/${template.id}/schedules/${schedule &&
+        schedule.id}/details`]: i18n._(t`Schedule Details`),
     };
     this.setState({ breadcrumbConfig });
   };

From 6dd4d04bf5da9b0db50fc1d5e23f8968f3ab4962 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 6 Mar 2020 14:56:17 -0500
Subject: [PATCH 48/48] Move label out to styled component.  Removes dependency
 on internal pf classes.

---
 .../ScheduleOccurrences.jsx                   | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
index fd200a4195..13e7835eec 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { shape } from 'prop-types';
+import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { formatDateString, formatDateStringUTC } from '@util/dates';
@@ -7,6 +8,19 @@ import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
 import { DetailName, DetailValue } from '@components/DetailList';
 import MultiButtonToggle from '@components/MultiButtonToggle';
 
+const OccurrencesLabel = styled.div`
+  display: inline-block;
+  font-size: var(--pf-c-form__label--FontSize);
+  font-weight: var(--pf-c-form__label--FontWeight);
+  line-height: var(--pf-c-form__label--LineHeight);
+  color: var(--pf-c-form__label--Color);
+
+  span:first-of-type {
+    font-weight: var(--pf-global--FontWeight--bold);
+    margin-right: 10px;
+  }
+`;
+
 function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
   const [mode, setMode] = useState('local');
 
@@ -23,17 +37,10 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
       >
         <Split gutter="sm">
           <SplitItem>
-            <div className="pf-c-form__label">
-              <span
-                className="pf-c-form__label-text"
-                css="font-weight: var(--pf-global--FontWeight--bold)"
-              >
-                {i18n._(t`Occurrences`)}
-              </span>
-              <span css="margin-left: 10px">
-                {i18n._(t`(Limited to first 10)`)}
-              </span>
-            </div>
+            <OccurrencesLabel>
+              <span>{i18n._(t`Occurrences`)}</span>
+              <span>{i18n._(t`(Limited to first 10)`)}</span>
+            </OccurrencesLabel>
           </SplitItem>
           <SplitItem>
             <MultiButtonToggle