Merge pull request #5806 from AlexSCorey/5777-JTTabOnProjectsAndTemplateListRefactor

5777 Projects JobTemplateList and template list refactor

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
             https://github.com/AlexSCorey

awx/ui_next/src/screens/Project/ProjectJobTemplates/ProjectJobTemplates.jsx

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
-import { CardBody } from '@components/Card';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import TemplateList from '../../Template/TemplateList/TemplateList';
 
-class ProjectJobTemplates extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
+function ProjectJobTemplates() {
+  return <TemplateList />;
 }
 
-export default ProjectJobTemplates;
+export default withRouter(ProjectJobTemplates);

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, PageSection } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
@@ -61,17 +61,15 @@ function JobTemplateAdd() {
   }
 
   return (
-    <PageSection>
-      <Card>
-        <CardBody>
-          <JobTemplateForm
-            handleCancel={handleCancel}
-            handleSubmit={handleSubmit}
-          />
-        </CardBody>
-        {formSubmitError ? <div>formSubmitError</div> : ''}
-      </Card>
-    </PageSection>
+    <Card>
+      <CardBody>
+        <JobTemplateForm
+          handleCancel={handleCancel}
+          handleSubmit={handleSubmit}
+        />
+      </CardBody>
+      {formSubmitError ? <div>formSubmitError</div> : ''}
+    </Card>
   );
 }
 

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

@@ -150,78 +150,76 @@ class Template extends Component {
     }
 
     return (
-      <PageSection>
-        <Card className="awx-c-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}
-                  />
-                )}
-              />
-            )}
-            {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}
-                  />
-                )}
-              />
-            )}
+      <Card className="awx-c-card">
+        {cardHeader}
+        <Switch>
+          <Redirect
+            from="/templates/:templateType/:id"
+            to="/templates/:templateType/:id/details"
+            exact
+          />
+          {template && (
             <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>
-                )
-              }
+              key="details"
+              path="/templates/:templateType/:id/details"
+              render={() => (
+                <JobTemplateDetail
+                  hasTemplateLoading={hasContentLoading}
+                  template={template}
+                />
+              )}
             />
-          </Switch>
-        </Card>
-      </PageSection>
+          )}
+          {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}
+                />
+              )}
+            />
+          )}
+          <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>
     );
   }
 }

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

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core';
 
 import {
   JobTemplatesAPI,
@@ -29,65 +29,96 @@ const QS_CONFIG = getQSConfig('template', {
   type: 'job_template,workflow_job_template',
 });
 
-class TemplatesList extends Component {
-  constructor(props) {
-    super(props);
+function TemplatesList({ i18n }) {
+  const { id: projectId } = useParams();
+  const { pathname, search } = useLocation();
 
-    this.state = {
-      hasContentLoading: true,
-      contentError: null,
-      deletionError: null,
-      selected: [],
-      templates: [],
-      itemCount: 0,
-    };
+  const [deletionError, setDeletionError] = useState(null);
+  const [contentError, setContentError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(true);
+  const [jtActions, setJTActions] = useState(null);
+  const [wfjtActions, setWFJTActions] = useState(null);
+  const [count, setCount] = useState(0);
+  const [templates, setTemplates] = useState([]);
+  const [selected, setSelected] = useState([]);
 
-    this.loadTemplates = this.loadTemplates.bind(this);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleTemplateDelete = this.handleTemplateDelete.bind(this);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-  }
+  useEffect(
+    () => {
+      const loadTemplates = async () => {
+        const params = {
+          ...parseQueryString(QS_CONFIG, search),
+        };
 
-  componentDidMount() {
-    this.loadTemplates();
-  }
+        let jtOptionsPromise;
+        if (jtActions) {
+          jtOptionsPromise = Promise.resolve({
+            data: { actions: jtActions },
+          });
+        } else {
+          jtOptionsPromise = JobTemplatesAPI.readOptions();
+        }
 
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
+        let wfjtOptionsPromise;
+        if (wfjtActions) {
+          wfjtOptionsPromise = Promise.resolve({
+            data: { actions: wfjtActions },
+          });
+        } else {
+          wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
+        }
+        if (pathname.startsWith('/projects') && projectId) {
+          params.jobtemplate__project = projectId;
+        }
 
-    if (location !== prevProps.location) {
-      this.loadTemplates();
-    }
-  }
+        const promises = Promise.all([
+          UnifiedJobTemplatesAPI.read(params),
+          jtOptionsPromise,
+          wfjtOptionsPromise,
+        ]);
+        setDeletionError(null);
 
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleAddToggle, false);
-  }
+        try {
+          const [
+            {
+              data: { count: itemCount, results },
+            },
+            {
+              data: { actions: jobTemplateActions },
+            },
+            {
+              data: { actions: workFlowJobTemplateActions },
+            },
+          ] = await promises;
+          setJTActions(jobTemplateActions);
+          setWFJTActions(workFlowJobTemplateActions);
+          setCount(itemCount);
+          setTemplates(results);
+          setHasContentLoading(false);
+        } catch (err) {
+          setContentError(err);
+        }
+      };
+      loadTemplates();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname, search, count, projectId]
+  );
 
-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
-  }
+  const handleSelectAll = isSelected => {
+    const selectedItems = isSelected ? [...templates] : [];
+    setSelected(selectedItems);
+  };
 
-  handleSelectAll(isSelected) {
-    const { templates } = this.state;
-    const selected = isSelected ? [...templates] : [];
-    this.setState({ selected });
-  }
-
-  handleSelect(template) {
-    const { selected } = this.state;
+  const handleSelect = template => {
     if (selected.some(s => s.id === template.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== template.id) });
+      setSelected(selected.filter(s => s.id !== template.id));
     } else {
-      this.setState({ selected: selected.concat(template) });
+      setSelected(selected.concat(template));
     }
-  }
+  };
 
-  async handleTemplateDelete() {
-    const { selected, itemCount } = this.state;
-
-    this.setState({ hasContentLoading: true });
+  const handleTemplateDelete = async () => {
+    setHasContentLoading(true);
     try {
       await Promise.all(
         selected.map(({ type, id }) => {
@@ -100,202 +131,126 @@ class TemplatesList extends Component {
           return deletePromise;
         })
       );
-      this.setState({ itemCount: itemCount - selected.length });
+      setCount(count - selected.length);
     } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadTemplates();
+      setDeletionError(err);
     }
+  };
+
+  const canAddJT =
+    jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
+  const canAddWFJT =
+    wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
+  const addButtonOptions = [];
+  if (canAddJT) {
+    addButtonOptions.push({
+      label: i18n._(t`Template`),
+      url: `/templates/job_template/add/`,
+    });
   }
-
-  async loadTemplates() {
-    const { location } = this.props;
-    const {
-      jtActions: cachedJTActions,
-      wfjtActions: cachedWFJTActions,
-    } = this.state;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
-    let jtOptionsPromise;
-    if (cachedJTActions) {
-      jtOptionsPromise = Promise.resolve({
-        data: { actions: cachedJTActions },
-      });
-    } else {
-      jtOptionsPromise = JobTemplatesAPI.readOptions();
-    }
-
-    let wfjtOptionsPromise;
-    if (cachedWFJTActions) {
-      wfjtOptionsPromise = Promise.resolve({
-        data: { actions: cachedWFJTActions },
-      });
-    } else {
-      wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
-    }
-
-    const promises = Promise.all([
-      UnifiedJobTemplatesAPI.read(params),
-      jtOptionsPromise,
-      wfjtOptionsPromise,
-    ]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-
-    try {
-      const [
-        {
-          data: { count, results },
-        },
-        {
-          data: { actions: jtActions },
-        },
-        {
-          data: { actions: wfjtActions },
-        },
-      ] = await promises;
-
-      this.setState({
-        jtActions,
-        wfjtActions,
-        itemCount: count,
-        templates: results,
-        selected: [],
-      });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
-    const {
-      contentError,
-      hasContentLoading,
-      deletionError,
-      templates,
-      itemCount,
-      selected,
-      jtActions,
-      wfjtActions,
-    } = this.state;
-    const { match, i18n } = this.props;
-    const canAddJT =
-      jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
-    const canAddWFJT =
-      wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
-    const addButtonOptions = [];
-    if (canAddJT) {
-      addButtonOptions.push({
-        label: i18n._(t`Template`),
-        url: `${match.url}/job_template/add/`,
-      });
-    }
-    if (canAddWFJT) {
-      addButtonOptions.push({
-        label: i18n._(t`Workflow Template`),
-        url: `${match.url}/workflow_job_template/add/`,
-      });
-    }
-    const isAllSelected =
-      selected.length === templates.length && selected.length > 0;
-    const addButton = (
-      <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
-    );
-    return (
-      <PageSection>
-        <Card>
-          <PaginatedDataList
-            contentError={contentError}
-            hasContentLoading={hasContentLoading}
-            items={templates}
-            itemCount={itemCount}
-            pluralizedItemName={i18n._(t`Templates`)}
-            qsConfig={QS_CONFIG}
-            onRowClick={this.handleSelect}
-            toolbarSearchColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-                isDefault: true,
-              },
-              {
-                name: i18n._(t`Type`),
-                key: 'type',
-                options: [
-                  [`job_template`, i18n._(t`Job Template`)],
-                  [`workflow_job_template`, i18n._(t`Workflow Template`)],
-                ],
-              },
-              {
-                name: i18n._(t`Playbook name`),
-                key: 'job_template__playbook',
-              },
-              {
-                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',
-              },
-              {
-                name: i18n._(t`Type`),
-                key: 'type',
-              },
-            ]}
-            renderToolbar={props => (
-              <DatalistToolbar
-                {...props}
-                showSelectAll
-                showExpandCollapse
-                isAllSelected={isAllSelected}
-                onSelectAll={this.handleSelectAll}
-                qsConfig={QS_CONFIG}
-                additionalControls={[
-                  <ToolbarDeleteButton
-                    key="delete"
-                    onDelete={this.handleTemplateDelete}
-                    itemsToDelete={selected}
-                    pluralizedItemName="Templates"
-                  />,
-                  (canAddJT || canAddWFJT) && addButton,
-                ]}
-              />
-            )}
-            renderItem={template => (
-              <TemplateListItem
-                key={template.id}
-                value={template.name}
-                template={template}
-                detailUrl={`${match.url}/${template.type}/${template.id}`}
-                onSelect={() => this.handleSelect(template)}
-                isSelected={selected.some(row => row.id === template.id)}
-              />
-            )}
-            emptyStateControls={(canAddJT || canAddWFJT) && addButton}
-          />
-        </Card>
-        <AlertModal
-          isOpen={deletionError}
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
-        >
-          {i18n._(t`Failed to delete one or more templates.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      </PageSection>
-    );
+  if (canAddWFJT) {
+    addButtonOptions.push({
+      label: i18n._(t`Workflow Template`),
+      url: `/templates/workflow_job_template/add/`,
+    });
   }
+  const isAllSelected =
+    selected.length === templates.length && selected.length > 0;
+  const addButton = (
+    <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
+  );
+  return (
+    <>
+      <Card>
+        <PaginatedDataList
+          contentError={contentError}
+          hasContentLoading={hasContentLoading}
+          items={templates}
+          itemCount={count}
+          pluralizedItemName={i18n._(t`Templates`)}
+          qsConfig={QS_CONFIG}
+          onRowClick={handleSelect}
+          toolbarSearchColumns={[
+            {
+              name: i18n._(t`Name`),
+              key: 'name',
+              isDefault: true,
+            },
+            {
+              name: i18n._(t`Type`),
+              key: 'type',
+              options: [
+                [`job_template`, i18n._(t`Job Template`)],
+                [`workflow_job_template`, i18n._(t`Workflow Template`)],
+              ],
+            },
+            {
+              name: i18n._(t`Playbook name`),
+              key: 'job_template__playbook',
+            },
+            {
+              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',
+            },
+            {
+              name: i18n._(t`Type`),
+              key: 'type',
+            },
+          ]}
+          renderToolbar={props => (
+            <DatalistToolbar
+              {...props}
+              showSelectAll
+              showExpandCollapse
+              isAllSelected={isAllSelected}
+              onSelectAll={handleSelectAll}
+              qsConfig={QS_CONFIG}
+              additionalControls={[
+                <ToolbarDeleteButton
+                  key="delete"
+                  onDelete={handleTemplateDelete}
+                  itemsToDelete={selected}
+                  pluralizedItemName="Templates"
+                />,
+                (canAddJT || canAddWFJT) && addButton,
+              ]}
+            />
+          )}
+          renderItem={template => (
+            <TemplateListItem
+              key={template.id}
+              value={template.name}
+              template={template}
+              detailUrl={`${pathname}/${template.type}/${template.id}`}
+              onSelect={() => handleSelect(template)}
+              isSelected={selected.some(row => row.id === template.id)}
+            />
+          )}
+          emptyStateControls={(canAddJT || canAddWFJT) && addButton}
+        />
+      </Card>
+      <AlertModal
+        isOpen={deletionError}
+        variant="danger"
+        title={i18n._(t`Error!`)}
+        onClose={() => setDeletionError(null)}
+      >
+        {i18n._(t`Failed to delete one or more templates.`)}
+        <ErrorDetail error={deletionError} />
+      </AlertModal>
+    </>
+  );
 }
 
 export { TemplatesList as _TemplatesList };
-export default withI18n()(withRouter(TemplatesList));
+export default withI18n()(TemplatesList);

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -59,7 +59,7 @@ const RightActionButtonCell = styled(ActionButtonCell)`
   ${rightStyle}
 `;
 
-function TemplateListItem({ i18n, template, isSelected, onSelect }) {
+function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
   const canLaunch = template.summary_fields.user_capabilities.start;
 
   const missingResourceIcon =
@@ -86,7 +86,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect }) {
             <LeftDataListCell key="divider">
               <VerticalSeparator />
               <span>
-                <Link to={`/templates/${template.type}/${template.id}`}>
+                <Link to={`${detailUrl}`}>
                   <b>{template.name}</b>
                 </Link>
               </span>

awx/ui_next/src/screens/Template/TemplateList/TemplatesList.test.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { Route } from 'react-router-dom';
 import {
   JobTemplatesAPI,
   UnifiedJobTemplatesAPI,
@@ -6,7 +9,7 @@ import {
 } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 
-import TemplatesList, { _TemplatesList } from './TemplateList';
+import TemplatesList from './TemplateList';
 
 jest.mock('@api');
 
@@ -88,119 +91,181 @@ describe('<TemplatesList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders successfully', () => {
-    mountWithContexts(
-      <TemplatesList
-        match={{ path: '/templates', url: '/templates' }}
-        location={{ search: '', pathname: '/templates' }}
-      />
-    );
-  });
-
-  test('Templates are retrieved from the api and the components finishes loading', async done => {
-    const loadTemplates = jest.spyOn(_TemplatesList.prototype, 'loadTemplates');
-    const wrapper = mountWithContexts(<TemplatesList />);
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('hasContentLoading') === true
-    );
-    expect(loadTemplates).toHaveBeenCalled();
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('hasContentLoading') === false
-    );
-    done();
-  });
-
-  test('handleSelect is called when a template list item is selected', async done => {
-    const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect');
-    const wrapper = mountWithContexts(<TemplatesList />);
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('hasContentLoading') === false
-    );
-    await wrapper
-      .find('input#select-jobTemplate-1')
-      .closest('DataListCheck')
-      .props()
-      .onChange();
-    expect(handleSelect).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('selected').length === 1
-    );
-    done();
-  });
-
-  test('handleSelectAll is called when a template list item is selected', async done => {
-    const handleSelectAll = jest.spyOn(
-      _TemplatesList.prototype,
-      'handleSelectAll'
-    );
-    const wrapper = mountWithContexts(<TemplatesList />);
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('hasContentLoading') === false
-    );
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(true);
-    expect(handleSelectAll).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'TemplatesList',
-      el => el.state('selected').length === 5
-    );
-    done();
-  });
-
-  test('delete button is disabled if user does not have delete capabilities on a selected template', async done => {
-    const wrapper = mountWithContexts(<TemplatesList />);
-    wrapper.find('TemplatesList').setState({
-      templates: mockTemplates,
-      itemCount: 5,
-      isInitialized: true,
-      selected: mockTemplates.slice(0, 4),
+  test('initially renders successfully', async () => {
+    await act(async () => {
+      mountWithContexts(
+        <TemplatesList
+          match={{ path: '/templates', url: '/templates' }}
+          location={{ search: '', pathname: '/templates' }}
+        />
+      );
     });
-    await waitForElement(
-      wrapper,
-      'ToolbarDeleteButton * button',
-      el => el.getDOMNode().disabled === false
-    );
-    wrapper.find('TemplatesList').setState({
-      selected: mockTemplates,
-    });
-    await waitForElement(
-      wrapper,
-      'ToolbarDeleteButton * button',
-      el => el.getDOMNode().disabled === true
-    );
-    done();
   });
 
-  test('api is called to delete templates for each selected template.', () => {
-    JobTemplatesAPI.destroy = jest.fn();
-    WorkflowJobTemplatesAPI.destroy = jest.fn();
+  test('Templates are retrieved from the api and the components finishes loading', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TemplatesList />);
+    });
+    expect(UnifiedJobTemplatesAPI.read).toBeCalled();
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    expect(wrapper.find('TemplateListItem').length).toEqual(5);
+  });
+
+  test('handleSelect is called when a template list item is selected', async () => {
     const wrapper = mountWithContexts(<TemplatesList />);
-    wrapper.find('TemplatesList').setState({
-      templates: mockTemplates,
-      itemCount: 5,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockTemplates.slice(0, 4),
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
-    expect(JobTemplatesAPI.destroy).toHaveBeenCalledTimes(3);
-    expect(WorkflowJobTemplatesAPI.destroy).toHaveBeenCalledTimes(1);
+    const checkBox = wrapper
+      .find('TemplateListItem')
+      .at(1)
+      .find('input');
+
+    checkBox.simulate('change', {
+      target: {
+        id: 2,
+        name: 'Job Template 2',
+        url: '/templates/job_template/2',
+        type: 'job_template',
+        summary_fields: { user_capabilities: { delete: true } },
+      },
+    });
+
+    expect(
+      wrapper
+        .find('TemplateListItem')
+        .at(1)
+        .prop('isSelected')
+    ).toBe(true);
   });
 
-  test('error is shown when template not successfully deleted from api', async done => {
+  test('handleSelectAll is called when a template list item is selected', async () => {
+    const wrapper = mountWithContexts(<TemplatesList />);
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    expect(wrapper.find('Checkbox#select-all').prop('isChecked')).toBe(false);
+
+    const toolBarCheckBox = wrapper.find('Checkbox#select-all');
+    act(() => {
+      toolBarCheckBox.prop('onChange')(true);
+    });
+    wrapper.update();
+    expect(wrapper.find('Checkbox#select-all').prop('isChecked')).toBe(true);
+  });
+
+  test('delete button is disabled if user does not have delete capabilities on a selected template', async () => {
+    const wrapper = mountWithContexts(<TemplatesList />);
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    const deleteableItem = wrapper
+      .find('TemplateListItem')
+      .at(0)
+      .find('input');
+    const nonDeleteableItem = wrapper
+      .find('TemplateListItem')
+      .at(4)
+      .find('input');
+
+    deleteableItem.simulate('change', {
+      id: 1,
+      name: 'Job Template 1',
+      url: '/templates/job_template/1',
+      type: 'job_template',
+      summary_fields: {
+        user_capabilities: {
+          delete: true,
+        },
+      },
+    });
+
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      false
+    );
+    deleteableItem.simulate('change', {
+      id: 1,
+      name: 'Job Template 1',
+      url: '/templates/job_template/1',
+      type: 'job_template',
+      summary_fields: {
+        user_capabilities: {
+          delete: true,
+        },
+      },
+    });
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+    nonDeleteableItem.simulate('change', {
+      id: 5,
+      name: 'Workflow Job Template 2',
+      url: '/templates/workflow_job_template/5',
+      type: 'workflow_job_template',
+      summary_fields: {
+        user_capabilities: {
+          delete: false,
+        },
+      },
+    });
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+  });
+
+  test('api is called to delete templates for each selected template.', async () => {
+    const wrapper = mountWithContexts(<TemplatesList />);
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    const jobTemplate = wrapper
+      .find('TemplateListItem')
+      .at(1)
+      .find('input');
+    const workflowJobTemplate = wrapper
+      .find('TemplateListItem')
+      .at(3)
+      .find('input');
+
+    jobTemplate.simulate('change', {
+      target: {
+        id: 2,
+        name: 'Job Template 2',
+        url: '/templates/job_template/2',
+        type: 'job_template',
+        summary_fields: { user_capabilities: { delete: true } },
+      },
+    });
+
+    workflowJobTemplate.simulate('change', {
+      target: {
+        id: 4,
+        name: 'Workflow Job Template 1',
+        url: '/templates/workflow_job_template/4',
+        type: 'workflow_job_template',
+        summary_fields: {
+          user_capabilities: {
+            delete: true,
+          },
+        },
+      },
+    });
+
+    wrapper.find('button[aria-label="Delete"]').prop('onClick')();
+    wrapper.update();
+    await act(async () => {
+      await wrapper
+        .find('button[aria-label="confirm delete"]')
+        .prop('onClick')();
+    });
+    expect(JobTemplatesAPI.destroy).toBeCalledWith(2);
+    expect(WorkflowJobTemplatesAPI.destroy).toBeCalledWith(4);
+  });
+
+  test('error is shown when template not successfully deleted from api', async () => {
     JobTemplatesAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -213,20 +278,66 @@ describe('<TemplatesList />', () => {
       })
     );
     const wrapper = mountWithContexts(<TemplatesList />);
-    wrapper.find('TemplatesList').setState({
-      templates: mockTemplates,
-      itemCount: 1,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockTemplates.slice(0, 1),
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    const checkBox = wrapper
+      .find('TemplateListItem')
+      .at(1)
+      .find('input');
+
+    checkBox.simulate('change', {
+      target: {
+        id: 'a',
+        name: 'Job Template 2',
+        url: '/templates/job_template/2',
+        type: 'job_template',
+        summary_fields: { user_capabilities: { delete: true } },
+      },
+    });
+    wrapper.find('button[aria-label="Delete"]').prop('onClick')();
+    wrapper.update();
+    await act(async () => {
+      await wrapper
+        .find('button[aria-label="confirm delete"]')
+        .prop('onClick')();
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
     await waitForElement(
       wrapper,
       'Modal',
       el => el.props().isOpen === true && el.props().title === 'Error!'
     );
-
-    done();
+  });
+  test('Calls API with jobtemplate__project id', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/projects/6/job_templates'],
+    });
+    const wrapper = mountWithContexts(
+      <Route
+        path="/projects/:id/job_templates"
+        component={() => <TemplatesList />}
+      />,
+      {
+        context: {
+          router: {
+            history,
+            route: {
+              location: history.location,
+              match: { params: { id: 6 } },
+            },
+          },
+        },
+      }
+    );
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 1);
+    });
+    expect(UnifiedJobTemplatesAPI.read).toBeCalledWith({
+      jobtemplate__project: '6',
+      order_by: 'name',
+      page: 1,
+      page_size: 20,
+      type: 'job_template,workflow_job_template',
+    });
   });
 });

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

@@ -1,7 +1,8 @@
-import React, { Component, Fragment } from 'react';
+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';
@@ -50,48 +51,50 @@ class Templates extends Component {
     const { match, history, location } = this.props;
     const { breadcrumbConfig } = this.state;
     return (
-      <Fragment>
+      <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <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>
-      </Fragment>
+        <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>
+      </>
     );
   }
 }

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

@@ -94,60 +94,58 @@ class WorkflowJobTemplate extends Component {
     }
 
     return (
-      <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-details"
-                path="/templates/workflow_job_template/:id/details"
-                render={() => (
-                  <WorkflowJobTemplateDetail
-                    hasTemplateLoading={hasContentLoading}
-                    template={template}
-                  />
-                )}
-              />
-            )}
-            {template && (
-              <Route
-                key="wfjt-visualizer"
-                path="/templates/workflow_job_template/:id/visualizer"
-                render={() => (
-                  <AppendBody>
-                    <FullPage>
-                      <Visualizer template={template} />
-                    </FullPage>
-                  </AppendBody>
-                )}
-              />
-            )}
+      <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="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>
-                )
-              }
+              key="wfjt-details"
+              path="/templates/workflow_job_template/:id/details"
+              render={() => (
+                <WorkflowJobTemplateDetail
+                  hasTemplateLoading={hasContentLoading}
+                  template={template}
+                />
+              )}
             />
-          </Switch>
-        </Card>
-      </PageSection>
+          )}
+          {template && (
+            <Route
+              key="wfjt-visualizer"
+              path="/templates/workflow_job_template/:id/visualizer"
+              render={() => (
+                <AppendBody>
+                  <FullPage>
+                    <Visualizer template={template} />
+                  </FullPage>
+                </AppendBody>
+              )}
+            />
+          )}
+          <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>
     );
   }
 }