From f3410f651775517a80f8b259c2339d4574d0176f Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 18 Jan 2021 10:22:53 -0800
Subject: [PATCH 1/7] convert TemplateList to tables

---
 .../Template/TemplateList/TemplateList.jsx    |  22 +-
 .../TemplateList/TemplateListItem.jsx         | 203 ++++++++----------
 2 files changed, 105 insertions(+), 120 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 68efedd2de..82a2dffcf4 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -11,9 +11,11 @@ import {
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '../../../components/PaginatedDataList';
+import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useWsTemplates from '../../../util/useWsTemplates';
@@ -167,7 +169,7 @@ function TemplateList({ i18n }) {
   return (
     <Fragment>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading || isDeleteLoading}
           items={templates}
@@ -234,6 +236,15 @@ function TemplateList({ i18n }) {
           ]}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG}>
+              <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+              <HeaderCell sortKey="type">{i18n._(t`Type`)}</HeaderCell>
+              <HeaderCell sortKey="last_job_run">
+                {i18n._(t`Recent Jobs`)}
+              </HeaderCell>
+            </HeaderRow>
+          }
           renderToolbar={props => (
             <DatalistToolbar
               {...props}
@@ -252,7 +263,7 @@ function TemplateList({ i18n }) {
               ]}
             />
           )}
-          renderItem={template => (
+          renderRow={(template, index) => (
             <TemplateListItem
               key={template.id}
               value={template.name}
@@ -261,6 +272,7 @@ function TemplateList({ i18n }) {
               onSelect={() => handleSelect(template)}
               isSelected={selected.some(row => row.id === template.id)}
               fetchTemplates={fetchTemplates}
+              rowIndex={index}
             />
           )}
           emptyStateControls={(canAddJT || canAddWFJT) && addButton}
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 057178f656..6481f7072d 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -1,15 +1,8 @@
 import 'styled-components/macro';
 import React, { useState, useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import {
@@ -18,9 +11,7 @@ import {
   ProjectDiagramIcon,
   RocketIcon,
 } from '@patternfly/react-icons';
-import styled from 'styled-components';
-import DataListCell from '../../../components/DataListCell';
-
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { timeOfDay } from '../../../util/dates';
 
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
@@ -29,13 +20,6 @@ import Sparkline from '../../../components/Sparkline';
 import { toTitleCase } from '../../../util/strings';
 import CopyButton from '../../../components/CopyButton';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(4, 40px);
-`;
-
 function TemplateListItem({
   i18n,
   template,
@@ -43,6 +27,7 @@ function TemplateListItem({
   onSelect,
   detailUrl,
   fetchTemplates,
+  rowIndex,
 }) {
   const [isDisabled, setIsDisabled] = useState(false);
   const labelId = `check-action-${template.id}`;
@@ -74,108 +59,96 @@ function TemplateListItem({
       (!template.summary_fields.inventory &&
         !template.ask_inventory_on_launch));
   return (
-    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          isDisabled={isDisabled}
-          id={`select-jobTemplate-${template.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" id={labelId}>
-              <span>
-                <Link to={`${detailUrl}`}>
-                  <b>{template.name}</b>
-                </Link>
-              </span>
-              {missingResourceIcon && (
-                <span>
-                  <Tooltip
-                    content={i18n._(
-                      t`Resources are missing from this template.`
-                    )}
-                    position="right"
-                  >
-                    <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
-                  </Tooltip>
-                </span>
-              )}
-            </DataListCell>,
-            <DataListCell key="type">
-              {toTitleCase(template.type)}
-            </DataListCell>,
-            <DataListCell key="sparkline">
-              <Sparkline jobs={template.summary_fields.recent_jobs} />
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
+    <Tr id={`template-row-${template.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{template.name}</b>
+        </Link>
+        {missingResourceIcon && (
+          <span>
+            <Tooltip
+              content={i18n._(t`Resources are missing from this template.`)}
+              position="right"
+            >
+              <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
+            </Tooltip>
+          </span>
+        )}
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
+      <Td dataLabel={i18n._(t`Recent Jobs`)}>
+        <Sparkline jobs={template.summary_fields.recent_jobs} />
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={template.type === 'workflow_job_template'}
+          tooltip={i18n._(t`Visualizer`)}
         >
-          {template.type === 'workflow_job_template' && (
-            <Tooltip content={i18n._(t`Visualizer`)} position="top">
+          <Button
+            isDisabled={isDisabled}
+            aria-label={i18n._(t`Visualizer`)}
+            variant="plain"
+            component={Link}
+            to={`/templates/workflow_job_template/${template.id}/visualizer`}
+          >
+            <ProjectDiagramIcon />
+          </Button>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.start}
+          tooltip={i18n._(t`Launch Template`)}
+        >
+          <LaunchButton resource={template}>
+            {({ handleLaunch }) => (
               <Button
                 isDisabled={isDisabled}
-                aria-label={i18n._(t`Visualizer`)}
-                css="grid-column: 1"
+                aria-label={i18n._(t`Launch template`)}
                 variant="plain"
-                component={Link}
-                to={`/templates/workflow_job_template/${template.id}/visualizer`}
+                onClick={handleLaunch}
               >
-                <ProjectDiagramIcon />
+                <RocketIcon />
               </Button>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.start && (
-            <Tooltip content={i18n._(t`Launch Template`)} position="top">
-              <LaunchButton resource={template}>
-                {({ handleLaunch }) => (
-                  <Button
-                    isDisabled={isDisabled}
-                    aria-label={i18n._(t`Launch template`)}
-                    css="grid-column: 2"
-                    variant="plain"
-                    onClick={handleLaunch}
-                  >
-                    <RocketIcon />
-                  </Button>
-                )}
-              </LaunchButton>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit Template`)} position="top">
-              <Button
-                isDisabled={isDisabled}
-                aria-label={i18n._(t`Edit Template`)}
-                css="grid-column: 3"
-                variant="plain"
-                component={Link}
-                to={`/templates/${template.type}/${template.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.copy && (
-            <CopyButton
-              helperText={{
-                tooltip: i18n._(t`Copy Template`),
-                errorMessage: i18n._(t`Failed to copy template.`),
-              }}
-              isDisabled={isDisabled}
-              onCopyStart={handleCopyStart}
-              onCopyFinish={handleCopyFinish}
-              copyItem={copyTemplate}
-            />
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+            )}
+          </LaunchButton>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit Template`)}
+        >
+          <Button
+            isDisabled={isDisabled}
+            aria-label={i18n._(t`Edit Template`)}
+            variant="plain"
+            component={Link}
+            to={`/templates/${template.type}/${template.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.copy}
+          tooltip={i18n._(t`Copy Template`)}
+        >
+          <CopyButton
+            helperText={{
+              errorMessage: i18n._(t`Failed to copy template.`),
+            }}
+            isDisabled={isDisabled}
+            onCopyStart={handleCopyStart}
+            onCopyFinish={handleCopyFinish}
+            copyItem={copyTemplate}
+          />
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

From ad71dc3e98789c9fea34fd7f5221012ce2323a0e Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 19 Jan 2021 15:00:41 -0800
Subject: [PATCH 2/7] add expandable row details to template list

---
 .../Template/TemplateList/TemplateList.jsx    |  30 +-
 .../TemplateList/TemplateListItem.jsx         | 295 ++++++++++++------
 2 files changed, 204 insertions(+), 121 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 82a2dffcf4..1380291a26 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -208,40 +208,14 @@ function TemplateList({ i18n }) {
               key: 'modified_by__username__icontains',
             },
           ]}
-          toolbarSortColumns={[
-            {
-              name: i18n._(t`Inventory`),
-              key: 'job_template__inventory__id',
-            },
-            {
-              name: i18n._(t`Last Job Run`),
-              key: 'last_job_run',
-            },
-            {
-              name: i18n._(t`Modified`),
-              key: 'modified',
-            },
-            {
-              name: i18n._(t`Name`),
-              key: 'name',
-            },
-            {
-              name: i18n._(t`Project`),
-              key: 'jobtemplate__project__id',
-            },
-            {
-              name: i18n._(t`Type`),
-              key: 'type',
-            },
-          ]}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           headerRow={
-            <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderRow qsConfig={QS_CONFIG} isExpandable>
               <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
               <HeaderCell sortKey="type">{i18n._(t`Type`)}</HeaderCell>
               <HeaderCell sortKey="last_job_run">
-                {i18n._(t`Recent Jobs`)}
+                {i18n._(t`Last Run`)}
               </HeaderCell>
             </HeaderRow>
           }
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 6481f7072d..29f94f78e6 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -1,8 +1,8 @@
 import 'styled-components/macro';
 import React, { useState, useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Tooltip } from '@patternfly/react-core';
-import { Tr, Td } from '@patternfly/react-table';
+import { Button, Tooltip, Chip } from '@patternfly/react-core';
+import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import {
@@ -12,6 +12,13 @@ import {
   RocketIcon,
 } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
+import {
+  DetailList,
+  Detail,
+  DeletedDetail,
+} from '../../../components/DetailList';
+import ChipGroup from '../../../components/ChipGroup';
+import CredentialChip from '../../../components/CredentialChip';
 import { timeOfDay } from '../../../util/dates';
 
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
@@ -29,6 +36,7 @@ function TemplateListItem({
   fetchTemplates,
   rowIndex,
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
   const labelId = `check-action-${template.id}`;
 
@@ -53,102 +61,203 @@ function TemplateListItem({
     setIsDisabled(false);
   }, []);
 
+  const {
+    summary_fields: summaryFields,
+    ask_inventory_on_launch: askInventoryOnLaunch,
+  } = template;
+
   const missingResourceIcon =
     template.type === 'job_template' &&
-    (!template.summary_fields.project ||
-      (!template.summary_fields.inventory &&
-        !template.ask_inventory_on_launch));
-  return (
-    <Tr id={`template-row-${template.id}`}>
-      <Td
-        select={{
-          rowIndex,
-          isSelected,
-          onSelect,
-        }}
-        dataLabel={i18n._(t`Selected`)}
-      />
-      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-        <Link to={`${detailUrl}`}>
-          <b>{template.name}</b>
+    (!summaryFields.project ||
+      (!summaryFields.inventory && !askInventoryOnLaunch));
+
+  const inventoryValue = (kind, id) => {
+    const inventorykind = kind === 'smart' ? 'smart_inventory' : 'inventory';
+
+    return askInventoryOnLaunch ? (
+      <>
+        <Link to={`/inventories/${inventorykind}/${id}/details`}>
+          {summaryFields.inventory.name}
         </Link>
-        {missingResourceIcon && (
-          <span>
-            <Tooltip
-              content={i18n._(t`Resources are missing from this template.`)}
-              position="right"
-            >
-              <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
-            </Tooltip>
-          </span>
-        )}
-      </Td>
-      <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
-      <Td dataLabel={i18n._(t`Recent Jobs`)}>
-        <Sparkline jobs={template.summary_fields.recent_jobs} />
-      </Td>
-      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-        <ActionItem
-          visible={template.type === 'workflow_job_template'}
-          tooltip={i18n._(t`Visualizer`)}
-        >
-          <Button
-            isDisabled={isDisabled}
-            aria-label={i18n._(t`Visualizer`)}
-            variant="plain"
-            component={Link}
-            to={`/templates/workflow_job_template/${template.id}/visualizer`}
-          >
-            <ProjectDiagramIcon />
-          </Button>
-        </ActionItem>
-        <ActionItem
-          visible={template.summary_fields.user_capabilities.start}
-          tooltip={i18n._(t`Launch Template`)}
-        >
-          <LaunchButton resource={template}>
-            {({ handleLaunch }) => (
-              <Button
-                isDisabled={isDisabled}
-                aria-label={i18n._(t`Launch template`)}
-                variant="plain"
-                onClick={handleLaunch}
+        <span> {i18n._(t`(Prompt on launch)`)}</span>
+      </>
+    ) : (
+      <Link to={`/inventories/${inventorykind}/${id}/details`}>
+        {summaryFields.inventory.name}
+      </Link>
+    );
+  };
+
+  return (
+    <>
+      <Tr id={`template-row-${template.id}`}>
+        <Td
+          expand={{
+            rowIndex,
+            isExpanded,
+            onToggle: () => setIsExpanded(!isExpanded),
+          }}
+        />
+        <Td
+          select={{
+            rowIndex,
+            isSelected,
+            onSelect,
+          }}
+          dataLabel={i18n._(t`Selected`)}
+        />
+        <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+          <Link to={`${detailUrl}`}>
+            <b>{template.name}</b>
+          </Link>
+          {missingResourceIcon && (
+            <span>
+              <Tooltip
+                content={i18n._(t`Resources are missing from this template.`)}
+                position="right"
               >
-                <RocketIcon />
-              </Button>
-            )}
-          </LaunchButton>
-        </ActionItem>
-        <ActionItem
-          visible={template.summary_fields.user_capabilities.edit}
-          tooltip={i18n._(t`Edit Template`)}
-        >
-          <Button
-            isDisabled={isDisabled}
-            aria-label={i18n._(t`Edit Template`)}
-            variant="plain"
-            component={Link}
-            to={`/templates/${template.type}/${template.id}/edit`}
+                <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
+              </Tooltip>
+            </span>
+          )}
+        </Td>
+        <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
+        <Td dataLabel={i18n._(t`Recent Jobs`)}>
+          <Sparkline jobs={template.summary_fields.recent_jobs} />
+        </Td>
+        <ActionsTd dataLabel={i18n._(t`Actions`)}>
+          <ActionItem
+            visible={template.type === 'workflow_job_template'}
+            tooltip={i18n._(t`Visualizer`)}
           >
-            <PencilAltIcon />
-          </Button>
-        </ActionItem>
-        <ActionItem
-          visible={template.summary_fields.user_capabilities.copy}
-          tooltip={i18n._(t`Copy Template`)}
-        >
-          <CopyButton
-            helperText={{
-              errorMessage: i18n._(t`Failed to copy template.`),
-            }}
-            isDisabled={isDisabled}
-            onCopyStart={handleCopyStart}
-            onCopyFinish={handleCopyFinish}
-            copyItem={copyTemplate}
-          />
-        </ActionItem>
-      </ActionsTd>
-    </Tr>
+            <Button
+              isDisabled={isDisabled}
+              aria-label={i18n._(t`Visualizer`)}
+              variant="plain"
+              component={Link}
+              to={`/templates/workflow_job_template/${template.id}/visualizer`}
+            >
+              <ProjectDiagramIcon />
+            </Button>
+          </ActionItem>
+          <ActionItem
+            visible={template.summary_fields.user_capabilities.start}
+            tooltip={i18n._(t`Launch Template`)}
+          >
+            <LaunchButton resource={template}>
+              {({ handleLaunch }) => (
+                <Button
+                  isDisabled={isDisabled}
+                  aria-label={i18n._(t`Launch template`)}
+                  variant="plain"
+                  onClick={handleLaunch}
+                >
+                  <RocketIcon />
+                </Button>
+              )}
+            </LaunchButton>
+          </ActionItem>
+          <ActionItem
+            visible={template.summary_fields.user_capabilities.edit}
+            tooltip={i18n._(t`Edit Template`)}
+          >
+            <Button
+              isDisabled={isDisabled}
+              aria-label={i18n._(t`Edit Template`)}
+              variant="plain"
+              component={Link}
+              to={`/templates/${template.type}/${template.id}/edit`}
+            >
+              <PencilAltIcon />
+            </Button>
+          </ActionItem>
+          <ActionItem
+            visible={template.summary_fields.user_capabilities.copy}
+            tooltip={i18n._(t`Copy Template`)}
+          >
+            <CopyButton
+              helperText={{
+                errorMessage: i18n._(t`Failed to copy template.`),
+              }}
+              isDisabled={isDisabled}
+              onCopyStart={handleCopyStart}
+              onCopyFinish={handleCopyFinish}
+              copyItem={copyTemplate}
+            />
+          </ActionItem>
+        </ActionsTd>
+      </Tr>
+      <Tr isExpanded={isExpanded}>
+        <Td colspan={2} />
+        <Td colspan={4}>
+          <ExpandableRowContent>
+            <DetailList>
+              <Detail
+                label={i18n._(t`Activity`)}
+                value={<Sparkline jobs={summaryFields.recent_jobs} />}
+              />
+              {summaryFields.credentials && summaryFields.credentials.length && (
+                <Detail
+                  label={i18n._(t`Credentials`)}
+                  value={
+                    <ChipGroup
+                      numChips={5}
+                      totalChips={summaryFields.credentials.length}
+                    >
+                      {summaryFields.credentials.map(c => (
+                        <CredentialChip key={c.id} credential={c} isReadOnly />
+                      ))}
+                    </ChipGroup>
+                  }
+                />
+              )}
+              {summaryFields.inventory ? (
+                <Detail
+                  label={i18n._(t`Inventory`)}
+                  value={inventoryValue(
+                    summaryFields.inventory.kind,
+                    summaryFields.inventory.id
+                  )}
+                />
+              ) : (
+                !askInventoryOnLaunch && (
+                  <DeletedDetail label={i18n._(t`Inventory`)} />
+                )
+              )}
+              {summaryFields.labels && summaryFields.labels.results.length > 0 && (
+                <Detail
+                  label={i18n._(t`Labels`)}
+                  value={
+                    <ChipGroup
+                      numChips={5}
+                      totalChips={summaryFields.labels.results.length}
+                    >
+                      {summaryFields.labels.results.map(l => (
+                        <Chip key={l.id} isReadOnly>
+                          {l.name}
+                        </Chip>
+                      ))}
+                    </ChipGroup>
+                  }
+                />
+              )}
+              {summaryFields.project ? (
+                <Detail
+                  label={i18n._(t`Project`)}
+                  value={
+                    <Link to={`/projects/${summaryFields.project.id}/details`}>
+                      {summaryFields.project.name}
+                    </Link>
+                  }
+                />
+              ) : (
+                <DeletedDetail label={i18n._(t`Project`)} />
+              )}
+            </DetailList>
+          </ExpandableRowContent>
+        </Td>
+      </Tr>
+    </>
   );
 }
 

From 78ef11d5589b4f2977e4bd471a5bc2b9300c261f Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 19 Jan 2021 15:14:12 -0800
Subject: [PATCH 3/7] update Template list tests

---
 .../TemplateList/TemplateListItem.jsx         |  10 +-
 .../TemplateList/TemplateListItem.test.jsx    | 376 ++++++++++--------
 2 files changed, 220 insertions(+), 166 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 29f94f78e6..b836ffef64 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -171,13 +171,11 @@ function TemplateListItem({
               <PencilAltIcon />
             </Button>
           </ActionItem>
-          <ActionItem
-            visible={template.summary_fields.user_capabilities.copy}
-            tooltip={i18n._(t`Copy Template`)}
-          >
+          <ActionItem visible={template.summary_fields.user_capabilities.copy}>
             <CopyButton
               helperText={{
                 errorMessage: i18n._(t`Failed to copy template.`),
+                tooltip: i18n._(t`Copy Template`),
               }}
               isDisabled={isDisabled}
               onCopyStart={handleCopyStart}
@@ -188,8 +186,8 @@ function TemplateListItem({
         </ActionsTd>
       </Tr>
       <Tr isExpanded={isExpanded}>
-        <Td colspan={2} />
-        <Td colspan={4}>
+        <Td colSpan={2} />
+        <Td colSpan={4}>
           <ExpandableRowContent>
             <DetailList>
               <Detail
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
index 3c02c82672..3a2a1e2df1 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
@@ -12,157 +12,189 @@ jest.mock('../../../api');
 describe('<TemplateListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: true,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  start: true,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
   });
   test('launch button hidden from users without start capabilities', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  start: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
   });
   test('edit button shown to users with edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: true,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: true,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
   test('edit button hidden from users without edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
   test('missing resource icon is shown.', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
   });
   test('missing resource icon is not shown when there is a project and an inventory.', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-            inventory: { name: 'Bar', id: 2 },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+                project: { name: 'Foo', id: 2 },
+                inventory: { name: 'Bar', id: 2 },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
   test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          ask_inventory_on_launch: true,
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              ask_inventory_on_launch: true,
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+                project: { name: 'Foo', id: 2 },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
   test('missing resource icon is not shown type is workflow_job_template', () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'workflow_job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'workflow_job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
@@ -171,19 +203,23 @@ describe('<TemplateListItem />', () => {
       initialEntries: ['/templates'],
     });
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          id: 1,
-          name: 'Template 1',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />,
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={{
+              id: 1,
+              name: 'Template 1',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>,
       { context: { router: { history } } }
     );
     wrapper.find('Link').simulate('click', { button: 0 });
@@ -195,11 +231,15 @@ describe('<TemplateListItem />', () => {
     JobTemplatesAPI.copy.mockResolvedValue();
 
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={mockJobTemplateData}
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -212,11 +252,15 @@ describe('<TemplateListItem />', () => {
     JobTemplatesAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={mockJobTemplateData}
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -228,39 +272,51 @@ describe('<TemplateListItem />', () => {
 
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          ...mockJobTemplateData,
-          summary_fields: { user_capabilities: { copy: false } },
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={{
+              ...mockJobTemplateData,
+              summary_fields: { user_capabilities: { copy: false } },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
 
   test('should render visualizer button for workflow', async () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          ...mockJobTemplateData,
-          type: 'workflow_job_template',
-        }}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={{
+              ...mockJobTemplateData,
+              type: 'workflow_job_template',
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectDiagramIcon').length).toBe(1);
   });
 
   test('should not render visualizer button for job template', async () => {
     const wrapper = mountWithContexts(
-      <TemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={mockJobTemplateData}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectDiagramIcon').length).toBe(0);
   });

From 03eb9bafb7fdc4e51d2dfeff4798912c4407588a Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 28 Jan 2021 14:28:08 -0800
Subject: [PATCH 4/7] add missing template list data; add ids to relevant page
 elements

---
 .../src/components/CopyButton/CopyButton.jsx  |  4 ++-
 .../src/components/DetailList/Detail.jsx      |  3 ++
 .../src/components/JobList/JobList.jsx        |  1 +
 .../ResourceAccessListItem.test.jsx.snap      |  8 +++++
 .../Template/TemplateList/TemplateList.jsx    |  3 +-
 .../TemplateList/TemplateListItem.jsx         | 32 +++++++++++++++----
 6 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/awx/ui_next/src/components/CopyButton/CopyButton.jsx b/awx/ui_next/src/components/CopyButton/CopyButton.jsx
index fe4580f4bf..30927f22c5 100644
--- a/awx/ui_next/src/components/CopyButton/CopyButton.jsx
+++ b/awx/ui_next/src/components/CopyButton/CopyButton.jsx
@@ -10,12 +10,13 @@ import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 
 function CopyButton({
-  i18n,
+  id,
   copyItem,
   isDisabled,
   onCopyStart,
   onCopyFinish,
   helperText,
+  i18n,
 }) {
   const { isLoading, error: copyError, request: copyItemToAPI } = useRequest(
     copyItem
@@ -34,6 +35,7 @@ function CopyButton({
     <>
       <Tooltip content={helperText.tooltip} position="top">
         <Button
+          id={id}
           isDisabled={isLoading || isDisabled}
           aria-label={i18n._(t`Copy`)}
           variant="plain"
diff --git a/awx/ui_next/src/components/DetailList/Detail.jsx b/awx/ui_next/src/components/DetailList/Detail.jsx
index b58f09a8dc..dc434a1fe8 100644
--- a/awx/ui_next/src/components/DetailList/Detail.jsx
+++ b/awx/ui_next/src/components/DetailList/Detail.jsx
@@ -34,6 +34,7 @@ const DetailValue = styled(
 `;
 
 const Detail = ({
+  id,
   label,
   value,
   fullWidth,
@@ -77,6 +78,7 @@ const Detail = ({
   );
 };
 Detail.propTypes = {
+  id: string,
   label: node.isRequired,
   value: node,
   fullWidth: bool,
@@ -84,6 +86,7 @@ Detail.propTypes = {
   helpText: string,
 };
 Detail.defaultProps = {
+  id: null,
   value: null,
   fullWidth: false,
   alwaysVisible: false,
diff --git a/awx/ui_next/src/components/JobList/JobList.jsx b/awx/ui_next/src/components/JobList/JobList.jsx
index f4a39e839a..30804d4b7f 100644
--- a/awx/ui_next/src/components/JobList/JobList.jsx
+++ b/awx/ui_next/src/components/JobList/JobList.jsx
@@ -242,6 +242,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
               <HeaderCell sortKey="finished">
                 {i18n._(t`Finish Time`)}
               </HeaderCell>
+              <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
             </HeaderRow>
           }
           toolbarSearchableKeys={searchableKeys}
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
index 355a9396e9..039bf50bd7 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -77,6 +77,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                       alwaysVisible={false}
                       fullWidth={false}
                       helpText={null}
+                      id={null}
                       label="Name"
                       value="jane brown"
                     />
@@ -90,6 +91,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                       alwaysVisible={false}
                       fullWidth={false}
                       helpText={null}
+                      id={null}
                       label="Team Roles"
                       value={
                         <WithI18n
@@ -143,6 +145,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                         alwaysVisible={false}
                         fullWidth={false}
                         helpText={null}
+                        id={null}
                         label="Name"
                         value="jane brown"
                       />
@@ -156,6 +159,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                         alwaysVisible={false}
                         fullWidth={false}
                         helpText={null}
+                        id={null}
                         label="Team Roles"
                         value={
                           <WithI18n
@@ -232,6 +236,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                           alwaysVisible={false}
                           fullWidth={false}
                           helpText={null}
+                          id={null}
                           label="Name"
                           value="jane brown"
                         />
@@ -245,6 +250,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                           alwaysVisible={false}
                           fullWidth={false}
                           helpText={null}
+                          id={null}
                           label="Team Roles"
                           value={
                             <WithI18n
@@ -456,6 +462,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       alwaysVisible={false}
                                       fullWidth={false}
                                       helpText={null}
+                                      id={null}
                                       label="Name"
                                       value="jane brown"
                                     >
@@ -680,6 +687,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       alwaysVisible={false}
                                       fullWidth={false}
                                       helpText={null}
+                                      id={null}
                                       label="Team Roles"
                                       value={
                                         <WithI18n
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 1380291a26..90d740988a 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -215,8 +215,9 @@ function TemplateList({ i18n }) {
               <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
               <HeaderCell sortKey="type">{i18n._(t`Type`)}</HeaderCell>
               <HeaderCell sortKey="last_job_run">
-                {i18n._(t`Last Run`)}
+                {i18n._(t`Last Ran`)}
               </HeaderCell>
+              <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
             </HeaderRow>
           }
           renderToolbar={props => (
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index b836ffef64..58339275e0 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -25,6 +25,7 @@ import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
 import LaunchButton from '../../../components/LaunchButton';
 import Sparkline from '../../../components/Sparkline';
 import { toTitleCase } from '../../../util/strings';
+import { formatDateString } from '../../../util/dates';
 import CopyButton from '../../../components/CopyButton';
 
 function TemplateListItem({
@@ -87,6 +88,15 @@ function TemplateListItem({
       </Link>
     );
   };
+  let lastRun = '';
+  const mostRecentJob = template.summary_fields.recent_jobs
+    ? template.summary_fields.recent_jobs[0]
+    : null;
+  if (mostRecentJob) {
+    lastRun = mostRecentJob.finished
+      ? formatDateString(mostRecentJob.finished)
+      : i18n._(t`Running`);
+  }
 
   return (
     <>
@@ -122,15 +132,14 @@ function TemplateListItem({
           )}
         </Td>
         <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
-        <Td dataLabel={i18n._(t`Recent Jobs`)}>
-          <Sparkline jobs={template.summary_fields.recent_jobs} />
-        </Td>
+        <Td dataLabel={i18n._(t`Last Ran`)}>{lastRun}</Td>
         <ActionsTd dataLabel={i18n._(t`Actions`)}>
           <ActionItem
             visible={template.type === 'workflow_job_template'}
             tooltip={i18n._(t`Visualizer`)}
           >
             <Button
+              id={`template-action-visualizer-${template.id}`}
               isDisabled={isDisabled}
               aria-label={i18n._(t`Visualizer`)}
               variant="plain"
@@ -147,6 +156,7 @@ function TemplateListItem({
             <LaunchButton resource={template}>
               {({ handleLaunch }) => (
                 <Button
+                  id={`template-action-launch-${template.id}`}
                   isDisabled={isDisabled}
                   aria-label={i18n._(t`Launch template`)}
                   variant="plain"
@@ -162,6 +172,7 @@ function TemplateListItem({
             tooltip={i18n._(t`Edit Template`)}
           >
             <Button
+              id={`template-action-edit-${template.id}`}
               isDisabled={isDisabled}
               aria-label={i18n._(t`Edit Template`)}
               variant="plain"
@@ -173,6 +184,7 @@ function TemplateListItem({
           </ActionItem>
           <ActionItem visible={template.summary_fields.user_capabilities.copy}>
             <CopyButton
+              id={`template-action-copy-${template.id}`}
               helperText={{
                 errorMessage: i18n._(t`Failed to copy template.`),
                 tooltip: i18n._(t`Copy Template`),
@@ -193,6 +205,7 @@ function TemplateListItem({
               <Detail
                 label={i18n._(t`Activity`)}
                 value={<Sparkline jobs={summaryFields.recent_jobs} />}
+                dataCy={`template-${template.id}-activity`}
               />
               {summaryFields.credentials && summaryFields.credentials.length && (
                 <Detail
@@ -207,6 +220,7 @@ function TemplateListItem({
                       ))}
                     </ChipGroup>
                   }
+                  dataCy={`template-${template.id}-credentials`}
                 />
               )}
               {summaryFields.inventory ? (
@@ -216,6 +230,7 @@ function TemplateListItem({
                     summaryFields.inventory.kind,
                     summaryFields.inventory.id
                   )}
+                  dataCy={`template-${template.id}-inventory`}
                 />
               ) : (
                 !askInventoryOnLaunch && (
@@ -237,9 +252,10 @@ function TemplateListItem({
                       ))}
                     </ChipGroup>
                   }
+                  dataCy={`template-${template.id}-labels`}
                 />
               )}
-              {summaryFields.project ? (
+              {summaryFields.project && (
                 <Detail
                   label={i18n._(t`Project`)}
                   value={
@@ -247,10 +263,14 @@ function TemplateListItem({
                       {summaryFields.project.name}
                     </Link>
                   }
+                  dataCy={`template-${template.id}-project`}
                 />
-              ) : (
-                <DeletedDetail label={i18n._(t`Project`)} />
               )}
+              <Detail
+                label={i18n._(t`Last Modified`)}
+                value={formatDateString(template.modified)}
+                dataCy={`template-${template.id}-last-modified`}
+              />
             </DetailList>
           </ExpandableRowContent>
         </Td>

From 669e963e382126b25b42381e923f4869ff5dd307 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 29 Jan 2021 13:45:21 -0800
Subject: [PATCH 5/7] combine TemplateList/DashboardTemplateList into shared
 component

---
 .../TemplateList/TemplateList.jsx             |  58 +--
 .../TemplateList/TemplateList.test.jsx        |   6 +-
 .../TemplateList/TemplateListItem.jsx         |  25 +-
 .../TemplateList/TemplateListItem.test.jsx    |   8 +-
 .../TemplateList/data.job_template.json       | 181 ++++++++++
 .../TemplateList/index.js                     |   2 +-
 .../src/screens/Dashboard/Dashboard.jsx       |   6 +-
 .../src/screens/Dashboard/Dashboard.test.jsx  |   2 +-
 .../shared/DashboardTemplateList.jsx          | 286 ---------------
 .../shared/DashboardTemplateList.test.jsx     | 336 ------------------
 .../shared/DashboardTemplateListItem.jsx      | 182 ----------
 .../shared/DashboardTemplateListItem.test.jsx | 268 --------------
 .../src/screens/Template/Templates.jsx        |   2 +-
 13 files changed, 235 insertions(+), 1127 deletions(-)
 rename awx/ui_next/src/{screens/Template => components}/TemplateList/TemplateList.jsx (85%)
 rename awx/ui_next/src/{screens/Template => components}/TemplateList/TemplateList.test.jsx (98%)
 rename awx/ui_next/src/{screens/Template => components}/TemplateList/TemplateListItem.jsx (93%)
 rename awx/ui_next/src/{screens/Template => components}/TemplateList/TemplateListItem.test.jsx (97%)
 create mode 100644 awx/ui_next/src/components/TemplateList/data.job_template.json
 rename awx/ui_next/src/{screens/Template => components}/TemplateList/index.js (53%)
 delete mode 100644 awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx
 delete mode 100644 awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.test.jsx
 delete mode 100644 awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.jsx
 delete mode 100644 awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.test.jsx

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/components/TemplateList/TemplateList.jsx
similarity index 85%
rename from awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
rename to awx/ui_next/src/components/TemplateList/TemplateList.jsx
index 90d740988a..2ac347a701 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateList.jsx
@@ -7,31 +7,33 @@ import {
   JobTemplatesAPI,
   UnifiedJobTemplatesAPI,
   WorkflowJobTemplatesAPI,
-} from '../../../api';
-import AlertModal from '../../../components/AlertModal';
-import DatalistToolbar from '../../../components/DataListToolbar';
-import ErrorDetail from '../../../components/ErrorDetail';
-import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
-import PaginatedTable, {
-  HeaderRow,
-  HeaderCell,
-} from '../../../components/PaginatedTable';
-import useRequest, { useDeleteItems } from '../../../util/useRequest';
-import { getQSConfig, parseQueryString } from '../../../util/qs';
-import useWsTemplates from '../../../util/useWsTemplates';
-import AddDropDownButton from '../../../components/AddDropDownButton';
+} from '../../api';
+import AlertModal from '../AlertModal';
+import DatalistToolbar from '../DataListToolbar';
+import ErrorDetail from '../ErrorDetail';
+import { ToolbarDeleteButton } from '../PaginatedDataList';
+import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
+import useRequest, { useDeleteItems } from '../../util/useRequest';
+import { getQSConfig, parseQueryString } from '../../util/qs';
+import useWsTemplates from '../../util/useWsTemplates';
+import AddDropDownButton from '../AddDropDownButton';
 import TemplateListItem from './TemplateListItem';
 
-// The type value in const QS_CONFIG below does not have a space between job_template and
-// workflow_job_template so the params sent to the API match what the api expects.
-const QS_CONFIG = getQSConfig('template', {
-  page: 1,
-  page_size: 20,
-  order_by: 'name',
-  type: 'job_template,workflow_job_template',
-});
+function TemplateList({ defaultParams, i18n }) {
+  // The type value in const qsConfig below does not have a space between job_template and
+  // workflow_job_template so the params sent to the API match what the api expects.
+  const qsConfig = getQSConfig(
+    'template',
+    {
+      page: 1,
+      page_size: 20,
+      order_by: 'name',
+      type: 'job_template,workflow_job_template',
+      ...defaultParams,
+    },
+    ['id', 'page', 'page_size']
+  );
 
-function TemplateList({ i18n }) {
   const location = useLocation();
   const [selected, setSelected] = useState([]);
 
@@ -49,7 +51,7 @@ function TemplateList({ i18n }) {
     request: fetchTemplates,
   } = useRequest(
     useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, location.search);
+      const params = parseQueryString(qsConfig, location.search);
       const responses = await Promise.all([
         UnifiedJobTemplatesAPI.read(params),
         JobTemplatesAPI.readOptions(),
@@ -68,7 +70,7 @@ function TemplateList({ i18n }) {
           responses[3].data.actions?.GET || {}
         ).filter(key => responses[3].data.actions?.GET[key].filterable),
       };
-    }, [location]),
+    }, [location]), // eslint-disable-line react-hooks/exhaustive-deps
     {
       results: [],
       count: 0,
@@ -107,7 +109,7 @@ function TemplateList({ i18n }) {
       );
     }, [selected]),
     {
-      qsConfig: QS_CONFIG,
+      qsConfig,
       allItemsSelected: isAllSelected,
       fetchItems: fetchTemplates,
     }
@@ -175,7 +177,7 @@ function TemplateList({ i18n }) {
           items={templates}
           itemCount={count}
           pluralizedItemName={i18n._(t`Templates`)}
-          qsConfig={QS_CONFIG}
+          qsConfig={qsConfig}
           onRowClick={handleSelect}
           toolbarSearchColumns={[
             {
@@ -211,7 +213,7 @@ function TemplateList({ i18n }) {
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           headerRow={
-            <HeaderRow qsConfig={QS_CONFIG} isExpandable>
+            <HeaderRow qsConfig={qsConfig} isExpandable>
               <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
               <HeaderCell sortKey="type">{i18n._(t`Type`)}</HeaderCell>
               <HeaderCell sortKey="last_job_run">
@@ -226,7 +228,7 @@ function TemplateList({ i18n }) {
               showSelectAll
               isAllSelected={isAllSelected}
               onSelectAll={handleSelectAll}
-              qsConfig={QS_CONFIG}
+              qsConfig={qsConfig}
               additionalControls={[
                 ...(canAddJT || canAddWFJT ? [addButton] : []),
                 <ToolbarDeleteButton
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.test.jsx b/awx/ui_next/src/components/TemplateList/TemplateList.test.jsx
similarity index 98%
rename from awx/ui_next/src/screens/Template/TemplateList/TemplateList.test.jsx
rename to awx/ui_next/src/components/TemplateList/TemplateList.test.jsx
index 2486ea5579..6726bd5b13 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.test.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateList.test.jsx
@@ -4,15 +4,15 @@ import {
   JobTemplatesAPI,
   UnifiedJobTemplatesAPI,
   WorkflowJobTemplatesAPI,
-} from '../../../api';
+} from '../../api';
 import {
   mountWithContexts,
   waitForElement,
-} from '../../../../testUtils/enzymeHelpers';
+} from '../../../testUtils/enzymeHelpers';
 
 import TemplateList from './TemplateList';
 
-jest.mock('../../../api');
+jest.mock('../../api');
 
 const mockTemplates = [
   {
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
similarity index 93%
rename from awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
rename to awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
index 58339275e0..dc53622737 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
@@ -11,22 +11,17 @@ import {
   ProjectDiagramIcon,
   RocketIcon,
 } from '@patternfly/react-icons';
-import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
-import {
-  DetailList,
-  Detail,
-  DeletedDetail,
-} from '../../../components/DetailList';
-import ChipGroup from '../../../components/ChipGroup';
-import CredentialChip from '../../../components/CredentialChip';
-import { timeOfDay } from '../../../util/dates';
+import { ActionsTd, ActionItem } from '../PaginatedTable';
+import { DetailList, Detail, DeletedDetail } from '../DetailList';
+import ChipGroup from '../ChipGroup';
+import CredentialChip from '../CredentialChip';
+import { timeOfDay, formatDateString } from '../../util/dates';
 
-import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
-import LaunchButton from '../../../components/LaunchButton';
-import Sparkline from '../../../components/Sparkline';
-import { toTitleCase } from '../../../util/strings';
-import { formatDateString } from '../../../util/dates';
-import CopyButton from '../../../components/CopyButton';
+import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../api';
+import LaunchButton from '../LaunchButton';
+import Sparkline from '../Sparkline';
+import { toTitleCase } from '../../util/strings';
+import CopyButton from '../CopyButton';
 
 function TemplateListItem({
   i18n,
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx b/awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx
similarity index 97%
rename from awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
rename to awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx
index 3a2a1e2df1..d9726196b2 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import { JobTemplatesAPI } from '../../../api';
-import mockJobTemplateData from '../shared/data.job_template.json';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { JobTemplatesAPI } from '../../api';
+import mockJobTemplateData from './data.job_template.json';
 import TemplateListItem from './TemplateListItem';
 
-jest.mock('../../../api');
+jest.mock('../../api');
 
 describe('<TemplateListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
diff --git a/awx/ui_next/src/components/TemplateList/data.job_template.json b/awx/ui_next/src/components/TemplateList/data.job_template.json
new file mode 100644
index 0000000000..804c3b72a2
--- /dev/null
+++ b/awx/ui_next/src/components/TemplateList/data.job_template.json
@@ -0,0 +1,181 @@
+{
+    "id": 7,
+    "type": "job_template",
+    "url": "/api/v2/job_templates/7/",
+    "related": {
+        "named_url": "/api/v2/job_templates/Mike's JT/",
+        "created_by": "/api/v2/users/1/",
+        "modified_by": "/api/v2/users/1/",
+        "labels": "/api/v2/job_templates/7/labels/",
+        "inventory": "/api/v2/inventories/1/",
+        "project": "/api/v2/projects/6/",
+        "credentials": "/api/v2/job_templates/7/credentials/",
+        "last_job": "/api/v2/jobs/12/",
+        "jobs": "/api/v2/job_templates/7/jobs/",
+        "schedules": "/api/v2/job_templates/7/schedules/",
+        "activity_stream": "/api/v2/job_templates/7/activity_stream/",
+        "launch": "/api/v2/job_templates/7/launch/",
+        "notification_templates_started": "/api/v2/job_templates/7/notification_templates_started/",
+        "notification_templates_success": "/api/v2/job_templates/7/notification_templates_success/",
+        "notification_templates_error": "/api/v2/job_templates/7/notification_templates_error/",
+        "access_list": "/api/v2/job_templates/7/access_list/",
+        "survey_spec": "/api/v2/job_templates/7/survey_spec/",
+        "object_roles": "/api/v2/job_templates/7/object_roles/",
+        "instance_groups": "/api/v2/job_templates/7/instance_groups/",
+        "slice_workflow_jobs": "/api/v2/job_templates/7/slice_workflow_jobs/",
+        "copy": "/api/v2/job_templates/7/copy/",
+        "webhook_receiver": "/api/v2/job_templates/7/github/",
+        "webhook_key": "/api/v2/job_templates/7/webhook_key/"
+    },
+    "summary_fields": {
+        "inventory": {
+            "id": 1,
+            "name": "Mike's Inventory",
+            "description": "",
+            "has_active_failures": false,
+            "total_hosts": 1,
+            "hosts_with_active_failures": 0,
+            "total_groups": 0,
+            "groups_with_active_failures": 0,
+            "has_inventory_sources": false,
+            "total_inventory_sources": 0,
+            "inventory_sources_with_failures": 0,
+            "organization_id": 1,
+            "kind": ""
+        },
+        "project": {
+            "id": 6,
+            "name": "Mike's Project",
+            "description": "",
+            "status": "successful",
+            "scm_type": "git"
+        },
+        "last_job": {
+            "id": 12,
+            "name": "Mike's JT",
+            "description": "",
+            "finished": "2019-10-01T14:34:35.142483Z",
+            "status": "successful",
+            "failed": false
+        },
+        "last_update": {
+            "id": 12,
+            "name": "Mike's JT",
+            "description": "",
+            "status": "successful",
+            "failed": false
+        },
+        "created_by": {
+            "id": 1,
+            "username": "admin",
+            "first_name": "",
+            "last_name": ""
+        },
+        "modified_by": {
+            "id": 1,
+            "username": "admin",
+            "first_name": "",
+            "last_name": ""
+        },
+        "object_roles": {
+            "admin_role": {
+                "description": "Can manage all aspects of the job template",
+                "name": "Admin",
+                "id": 24
+            },
+            "execute_role": {
+                "description": "May run the job template",
+                "name": "Execute",
+                "id": 25
+            },
+            "read_role": {
+                "description": "May view settings for the job template",
+                "name": "Read",
+                "id": 26
+            }
+        },
+        "user_capabilities": {
+            "edit": true,
+            "delete": true,
+            "start": true,
+            "schedule": true,
+            "copy": true
+        },
+        "labels": {
+            "count": 1,
+            "results": [{
+                "id": 91,
+                "name": "L_91o2"
+            }]
+        },
+        "survey": {
+            "title": "",
+            "description": ""
+        },
+        "recent_jobs": [{
+            "id": 12,
+            "status": "successful",
+            "finished": "2019-10-01T14:34:35.142483Z",
+            "type": "job"
+        }],
+        "credentials": [{
+                "id": 1,
+                "kind": "ssh",
+                "name": "Credential 1"
+            },
+            {
+                "id": 2,
+                "kind": "awx",
+                "name": "Credential 2"
+            }
+        ],
+        "webhook_credential": {
+            "id": "1",
+            "name": "Webhook Credential"
+
+        }
+    },
+    "created": "2019-09-30T16:18:34.564820Z",
+    "modified": "2019-10-01T14:47:31.818431Z",
+    "name": "Mike's JT",
+    "description": "",
+    "job_type": "run",
+    "inventory": 1,
+    "project": 6,
+    "playbook": "ping.yml",
+    "scm_branch": "Foo branch",
+    "forks": 0,
+    "limit": "",
+    "verbosity": 0,
+    "extra_vars": "",
+    "job_tags": "T_100,T_200",
+    "force_handlers": false,
+    "skip_tags": "S_100,S_200",
+    "start_at_task": "",
+    "timeout": 0,
+    "use_fact_cache": true,
+    "last_job_run": "2019-10-01T14:34:35.142483Z",
+    "last_job_failed": false,
+    "next_job_run": null,
+    "status": "successful",
+    "host_config_key": "",
+    "ask_scm_branch_on_launch": false,
+    "ask_diff_mode_on_launch": false,
+    "ask_variables_on_launch": false,
+    "ask_limit_on_launch": false,
+    "ask_tags_on_launch": false,
+    "ask_skip_tags_on_launch": false,
+    "ask_job_type_on_launch": false,
+    "ask_verbosity_on_launch": false,
+    "ask_inventory_on_launch": false,
+    "ask_credential_on_launch": false,
+    "survey_enabled": true,
+    "become_enabled": false,
+    "diff_mode": false,
+    "allow_simultaneous": false,
+    "custom_virtualenv": null,
+    "job_slice_count": 1,
+    "webhook_credential": 1,
+    "webhook_key": "asertdyuhjkhgfd234567kjgfds",
+    "webhook_service": "github"
+}
diff --git a/awx/ui_next/src/screens/Template/TemplateList/index.js b/awx/ui_next/src/components/TemplateList/index.js
similarity index 53%
rename from awx/ui_next/src/screens/Template/TemplateList/index.js
rename to awx/ui_next/src/components/TemplateList/index.js
index 60759a849a..f5cdbd115c 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/index.js
+++ b/awx/ui_next/src/components/TemplateList/index.js
@@ -1,2 +1,2 @@
-export { default as TemplateList } from './TemplateList';
+export { default } from './TemplateList';
 export { default as TemplateListItem } from './TemplateListItem';
diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
index 714e6cf152..c6d029cb67 100644
--- a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
+++ b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
@@ -23,7 +23,7 @@ import JobList from '../../components/JobList';
 import ContentLoading from '../../components/ContentLoading';
 import LineChart from './shared/LineChart';
 import Count from './shared/Count';
-import DashboardTemplateList from './shared/DashboardTemplateList';
+import TemplateList from '../../components/TemplateList';
 
 const Counts = styled.div`
   display: grid;
@@ -247,7 +247,9 @@ function Dashboard({ i18n }) {
               </Fragment>
             )}
             {activeTabId === 1 && <JobList defaultParams={{ page_size: 5 }} />}
-            {activeTabId === 2 && <DashboardTemplateList />}
+            {activeTabId === 2 && (
+              <TemplateList defaultParams={{ page_size: 5 }} />
+            )}
           </Card>
         </div>
       </MainPageSection>
diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.test.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.test.jsx
index ed9ac7ff22..fbee03febf 100644
--- a/awx/ui_next/src/screens/Dashboard/Dashboard.test.jsx
+++ b/awx/ui_next/src/screens/Dashboard/Dashboard.test.jsx
@@ -44,7 +44,7 @@ describe('<Dashboard />', () => {
         .simulate('click');
     });
     pageWrapper.update();
-    expect(pageWrapper.find('DashboardTemplateList').length).toBe(1);
+    expect(pageWrapper.find('TemplateList').length).toBe(1);
   });
 
   test('renders month-based/all job type chart by default', () => {
diff --git a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx b/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx
deleted file mode 100644
index 7c1761cb4f..0000000000
--- a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import React, { Fragment, useEffect, useState, useCallback } from 'react';
-import { useLocation, Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import { Card, DropdownItem } from '@patternfly/react-core';
-
-import {
-  JobTemplatesAPI,
-  UnifiedJobTemplatesAPI,
-  WorkflowJobTemplatesAPI,
-} from '../../../api';
-import AlertModal from '../../../components/AlertModal';
-import DatalistToolbar from '../../../components/DataListToolbar';
-import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '../../../components/PaginatedDataList';
-import useRequest, { useDeleteItems } from '../../../util/useRequest';
-import { getQSConfig, parseQueryString } from '../../../util/qs';
-import useWsTemplates from '../../../util/useWsTemplates';
-import AddDropDownButton from '../../../components/AddDropDownButton';
-
-import DashboardTemplateListItem from './DashboardTemplateListItem';
-
-const QS_CONFIG = getQSConfig(
-  'template',
-  {
-    page: 1,
-    page_size: 5,
-    order_by: 'name',
-    type: 'job_template,workflow_job_template',
-  },
-  ['id', 'page', 'page_size']
-);
-
-function DashboardTemplateList({ i18n }) {
-  // The type value in const QS_CONFIG below does not have a space between job_template and
-  // workflow_job_template so the params sent to the API match what the api expects.
-
-  const location = useLocation();
-
-  const [selected, setSelected] = useState([]);
-
-  const {
-    result: {
-      results,
-      count,
-      jtActions,
-      wfjtActions,
-      relatedSearchableKeys,
-      searchableKeys,
-    },
-    error: contentError,
-    isLoading,
-    request: fetchTemplates,
-  } = useRequest(
-    useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, location.search);
-      const responses = await Promise.all([
-        UnifiedJobTemplatesAPI.read(params),
-        JobTemplatesAPI.readOptions(),
-        WorkflowJobTemplatesAPI.readOptions(),
-        UnifiedJobTemplatesAPI.readOptions(),
-      ]);
-      return {
-        results: responses[0].data.results,
-        count: responses[0].data.count,
-        jtActions: responses[1].data.actions,
-        wfjtActions: responses[2].data.actions,
-        relatedSearchableKeys: (
-          responses[3]?.data?.related_search_fields || []
-        ).map(val => val.slice(0, -8)),
-        searchableKeys: Object.keys(
-          responses[3].data.actions?.GET || {}
-        ).filter(key => responses[3].data.actions?.GET[key].filterable),
-      };
-    }, [location]),
-    {
-      results: [],
-      count: 0,
-      jtActions: {},
-      wfjtActions: {},
-      relatedSearchableKeys: [],
-      searchableKeys: [],
-    }
-  );
-
-  useEffect(() => {
-    fetchTemplates();
-  }, [fetchTemplates]);
-
-  const templates = useWsTemplates(results);
-
-  const isAllSelected =
-    selected.length === templates.length && selected.length > 0;
-  const {
-    isLoading: isDeleteLoading,
-    deleteItems: deleteTemplates,
-    deletionError,
-    clearDeletionError,
-  } = useDeleteItems(
-    useCallback(() => {
-      return Promise.all(
-        selected.map(({ type, id }) => {
-          if (type === 'job_template') {
-            return JobTemplatesAPI.destroy(id);
-          }
-          if (type === 'workflow_job_template') {
-            return WorkflowJobTemplatesAPI.destroy(id);
-          }
-          return false;
-        })
-      );
-    }, [selected]),
-    {
-      qsConfig: QS_CONFIG,
-      allItemsSelected: isAllSelected,
-      fetchItems: fetchTemplates,
-    }
-  );
-
-  const handleTemplateDelete = async () => {
-    await deleteTemplates();
-    setSelected([]);
-  };
-
-  const handleSelectAll = isSelected => {
-    setSelected(isSelected ? [...templates] : []);
-  };
-
-  const handleSelect = template => {
-    if (selected.some(s => s.id === template.id)) {
-      setSelected(selected.filter(s => s.id !== template.id));
-    } else {
-      setSelected(selected.concat(template));
-    }
-  };
-
-  const canAddJT =
-    jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
-  const canAddWFJT =
-    wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
-
-  const addTemplate = i18n._(t`Add job template`);
-  const addWFTemplate = i18n._(t`Add workflow template`);
-  const addButton = (
-    <AddDropDownButton
-      key="add"
-      dropdownItems={[
-        <DropdownItem
-          key={addTemplate}
-          component={Link}
-          to="/templates/job_template/add/"
-          aria-label={addTemplate}
-        >
-          {addTemplate}
-        </DropdownItem>,
-        <DropdownItem
-          component={Link}
-          to="/templates/workflow_job_template/add/"
-          key={addWFTemplate}
-          aria-label={addWFTemplate}
-        >
-          {addWFTemplate}
-        </DropdownItem>,
-      ]}
-    />
-  );
-
-  return (
-    <Fragment>
-      <Card>
-        <PaginatedDataList
-          contentError={contentError}
-          hasContentLoading={isLoading || isDeleteLoading}
-          items={templates}
-          itemCount={count}
-          pluralizedItemName={i18n._(t`Templates`)}
-          qsConfig={QS_CONFIG}
-          onRowClick={handleSelect}
-          toolbarSearchColumns={[
-            {
-              name: i18n._(t`Name`),
-              key: 'name__icontains',
-              isDefault: true,
-            },
-            {
-              name: i18n._(t`Description`),
-              key: 'description__icontains',
-            },
-            {
-              name: i18n._(t`Type`),
-              key: 'or__type',
-              options: [
-                [`job_template`, i18n._(t`Job Template`)],
-                [`workflow_job_template`, i18n._(t`Workflow Template`)],
-              ],
-            },
-            {
-              name: i18n._(t`Playbook name`),
-              key: 'job_template__playbook__icontains',
-            },
-            {
-              name: i18n._(t`Created By (Username)`),
-              key: 'created_by__username__icontains',
-            },
-            {
-              name: i18n._(t`Modified By (Username)`),
-              key: 'modified_by__username__icontains',
-            },
-          ]}
-          toolbarSortColumns={[
-            {
-              name: i18n._(t`Inventory`),
-              key: 'job_template__inventory__id',
-            },
-            {
-              name: i18n._(t`Last Job Run`),
-              key: 'last_job_run',
-            },
-            {
-              name: i18n._(t`Modified`),
-              key: 'modified',
-            },
-            {
-              name: i18n._(t`Name`),
-              key: 'name',
-            },
-            {
-              name: i18n._(t`Project`),
-              key: 'jobtemplate__project__id',
-            },
-            {
-              name: i18n._(t`Type`),
-              key: 'type',
-            },
-          ]}
-          toolbarSearchableKeys={searchableKeys}
-          toolbarRelatedSearchableKeys={relatedSearchableKeys}
-          renderToolbar={props => (
-            <DatalistToolbar
-              {...props}
-              showSelectAll
-              isAllSelected={isAllSelected}
-              onSelectAll={handleSelectAll}
-              qsConfig={QS_CONFIG}
-              additionalControls={[
-                ...(canAddJT || canAddWFJT ? [addButton] : []),
-                <ToolbarDeleteButton
-                  key="delete"
-                  onDelete={handleTemplateDelete}
-                  itemsToDelete={selected}
-                  pluralizedItemName={i18n._(t`Templates`)}
-                />,
-              ]}
-            />
-          )}
-          renderItem={template => (
-            <DashboardTemplateListItem
-              key={template.id}
-              value={template.name}
-              template={template}
-              detailUrl={`/templates/${template.type}/${template.id}`}
-              onSelect={() => handleSelect(template)}
-              isSelected={selected.some(row => row.id === template.id)}
-              fetchTemplates={fetchTemplates}
-            />
-          )}
-          emptyStateControls={(canAddJT || canAddWFJT) && addButton}
-        />
-      </Card>
-      <AlertModal
-        aria-label={i18n._(t`Deletion Error`)}
-        isOpen={deletionError}
-        variant="error"
-        title={i18n._(t`Error!`)}
-        onClose={clearDeletionError}
-      >
-        {i18n._(t`Failed to delete one or more templates.`)}
-        <ErrorDetail error={deletionError} />
-      </AlertModal>
-    </Fragment>
-  );
-}
-
-export default withI18n()(DashboardTemplateList);
diff --git a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.test.jsx b/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.test.jsx
deleted file mode 100644
index 5b33d3d717..0000000000
--- a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.test.jsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import {
-  JobTemplatesAPI,
-  UnifiedJobTemplatesAPI,
-  WorkflowJobTemplatesAPI,
-} from '../../../api';
-import {
-  mountWithContexts,
-  waitForElement,
-} from '../../../../testUtils/enzymeHelpers';
-
-import DashboardTemplateList from './DashboardTemplateList';
-
-jest.mock('../../../api');
-
-const mockTemplates = [
-  {
-    id: 1,
-    name: 'Job Template 1',
-    url: '/templates/job_template/1',
-    type: 'job_template',
-    summary_fields: {
-      user_capabilities: {
-        delete: true,
-        edit: true,
-        copy: true,
-      },
-    },
-  },
-  {
-    id: 2,
-    name: 'Job Template 2',
-    url: '/templates/job_template/2',
-    type: 'job_template',
-    summary_fields: {
-      user_capabilities: {
-        delete: true,
-      },
-    },
-  },
-  {
-    id: 3,
-    name: 'Job Template 3',
-    url: '/templates/job_template/3',
-    type: 'job_template',
-    summary_fields: {
-      user_capabilities: {
-        delete: true,
-      },
-    },
-  },
-  {
-    id: 4,
-    name: 'Workflow Job Template 1',
-    url: '/templates/workflow_job_template/4',
-    type: 'workflow_job_template',
-    summary_fields: {
-      user_capabilities: {
-        delete: true,
-      },
-    },
-  },
-  {
-    id: 5,
-    name: 'Workflow Job Template 2',
-    url: '/templates/workflow_job_template/5',
-    type: 'workflow_job_template',
-    summary_fields: {
-      user_capabilities: {
-        delete: false,
-      },
-    },
-  },
-];
-
-describe('<DashboardTemplateList />', () => {
-  let debug;
-  beforeEach(() => {
-    UnifiedJobTemplatesAPI.read.mockResolvedValue({
-      data: {
-        count: mockTemplates.length,
-        results: mockTemplates,
-      },
-    });
-
-    UnifiedJobTemplatesAPI.readOptions.mockResolvedValue({
-      data: {
-        actions: [],
-      },
-    });
-    debug = global.console.debug; // eslint-disable-line prefer-destructuring
-    global.console.debug = () => {};
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    global.console.debug = debug;
-  });
-
-  test('initially renders successfully', async () => {
-    await act(async () => {
-      mountWithContexts(
-        <DashboardTemplateList
-          match={{ path: '/templates', url: '/templates' }}
-          location={{ search: '', pathname: '/templates' }}
-        />
-      );
-    });
-  });
-
-  test('Templates are retrieved from the api and the components finishes loading', async () => {
-    let wrapper;
-    await act(async () => {
-      wrapper = mountWithContexts(<DashboardTemplateList />);
-    });
-    expect(UnifiedJobTemplatesAPI.read).toBeCalled();
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    expect(wrapper.find('DashboardTemplateListItem').length).toEqual(5);
-  });
-
-  test('handleSelect is called when a template list item is selected', async () => {
-    const wrapper = mountWithContexts(<DashboardTemplateList />);
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    const checkBox = wrapper
-      .find('DashboardTemplateListItem')
-      .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('DashboardTemplateListItem')
-        .at(1)
-        .prop('isSelected')
-    ).toBe(true);
-  });
-
-  test('handleSelectAll is called when a template list item is selected', async () => {
-    const wrapper = mountWithContexts(<DashboardTemplateList />);
-    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(<DashboardTemplateList />);
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    const deleteableItem = wrapper
-      .find('DashboardTemplateListItem')
-      .at(0)
-      .find('input');
-    const nonDeleteableItem = wrapper
-      .find('DashboardTemplateListItem')
-      .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(<DashboardTemplateList />);
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    const jobTemplate = wrapper
-      .find('DashboardTemplateListItem')
-      .at(1)
-      .find('input');
-    const workflowJobTemplate = wrapper
-      .find('DashboardTemplateListItem')
-      .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,
-          },
-        },
-      },
-    });
-
-    await act(async () => {
-      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: {
-          config: {
-            method: 'delete',
-            url: '/api/v2/job_templates/1',
-          },
-          data: 'An error occurred',
-        },
-      })
-    );
-    const wrapper = mountWithContexts(<DashboardTemplateList />);
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    const checkBox = wrapper
-      .find('DashboardTemplateListItem')
-      .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 } },
-      },
-    });
-    await act(async () => {
-      wrapper.find('button[aria-label="Delete"]').prop('onClick')();
-    });
-    wrapper.update();
-    await act(async () => {
-      await wrapper
-        .find('button[aria-label="confirm delete"]')
-        .prop('onClick')();
-    });
-
-    await waitForElement(
-      wrapper,
-      'Modal[aria-label="Deletion Error"]',
-      el => el.props().isOpen === true && el.props().title === 'Error!'
-    );
-  });
-  test('should properly copy template', async () => {
-    JobTemplatesAPI.copy.mockResolvedValue({});
-    const wrapper = mountWithContexts(<DashboardTemplateList />);
-    await act(async () => {
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    });
-    await act(async () =>
-      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
-    );
-    expect(JobTemplatesAPI.copy).toHaveBeenCalled();
-    expect(UnifiedJobTemplatesAPI.read).toHaveBeenCalled();
-    wrapper.update();
-  });
-});
diff --git a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.jsx b/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.jsx
deleted file mode 100644
index e38af7c982..0000000000
--- a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import 'styled-components/macro';
-import React, { useState, useCallback } from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
-import {
-  ExclamationTriangleIcon,
-  PencilAltIcon,
-  ProjectDiagramIcon,
-  RocketIcon,
-} from '@patternfly/react-icons';
-import styled from 'styled-components';
-
-import DataListCell from '../../../components/DataListCell';
-import { timeOfDay } from '../../../util/dates';
-import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
-import LaunchButton from '../../../components/LaunchButton';
-import Sparkline from '../../../components/Sparkline';
-import { toTitleCase } from '../../../util/strings';
-import CopyButton from '../../../components/CopyButton';
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(4, 40px);
-`;
-
-function DashboardTemplateListItem({
-  i18n,
-  template,
-  isSelected,
-  onSelect,
-  detailUrl,
-  fetchTemplates,
-}) {
-  const [isDisabled, setIsDisabled] = useState(false);
-  const labelId = `check-action-${template.id}`;
-
-  const copyTemplate = useCallback(async () => {
-    if (template.type === 'job_template') {
-      await JobTemplatesAPI.copy(template.id, {
-        name: `${template.name} @ ${timeOfDay()}`,
-      });
-    } else {
-      await WorkflowJobTemplatesAPI.copy(template.id, {
-        name: `${template.name} @ ${timeOfDay()}`,
-      });
-    }
-    await fetchTemplates();
-  }, [fetchTemplates, template.id, template.name, template.type]);
-
-  const handleCopyStart = useCallback(() => {
-    setIsDisabled(true);
-  }, []);
-
-  const handleCopyFinish = useCallback(() => {
-    setIsDisabled(false);
-  }, []);
-
-  const missingResourceIcon =
-    template.type === 'job_template' &&
-    (!template.summary_fields.project ||
-      (!template.summary_fields.inventory &&
-        !template.ask_inventory_on_launch));
-  return (
-    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          isDisabled={isDisabled}
-          id={`select-jobTemplate-${template.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" id={labelId}>
-              <span>
-                <Link to={`${detailUrl}`}>
-                  <b>{template.name}</b>
-                </Link>
-              </span>
-              {missingResourceIcon && (
-                <span>
-                  <Tooltip
-                    content={i18n._(
-                      t`Resources are missing from this template.`
-                    )}
-                    position="right"
-                  >
-                    <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
-                  </Tooltip>
-                </span>
-              )}
-            </DataListCell>,
-            <DataListCell key="type">
-              {toTitleCase(template.type)}
-            </DataListCell>,
-            <DataListCell key="sparkline">
-              <Sparkline jobs={template.summary_fields.recent_jobs} />
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-        >
-          {template.type === 'workflow_job_template' && (
-            <Tooltip content={i18n._(t`Visualizer`)} position="top">
-              <Button
-                isDisabled={isDisabled}
-                aria-label={i18n._(t`Visualizer`)}
-                css="grid-column: 1"
-                variant="plain"
-                component={Link}
-                to={`/templates/workflow_job_template/${template.id}/visualizer`}
-              >
-                <ProjectDiagramIcon />
-              </Button>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.start && (
-            <Tooltip content={i18n._(t`Launch Template`)} position="top">
-              <LaunchButton resource={template}>
-                {({ handleLaunch }) => (
-                  <Button
-                    isDisabled={isDisabled}
-                    aria-label={i18n._(t`Launch template`)}
-                    css="grid-column: 2"
-                    variant="plain"
-                    onClick={handleLaunch}
-                  >
-                    <RocketIcon />
-                  </Button>
-                )}
-              </LaunchButton>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit Template`)} position="top">
-              <Button
-                isDisabled={isDisabled}
-                aria-label={i18n._(t`Edit Template`)}
-                css="grid-column: 3"
-                variant="plain"
-                component={Link}
-                to={`/templates/${template.type}/${template.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.copy && (
-            <CopyButton
-              helperText={{
-                tooltip: i18n._(t`Copy Template`),
-                errorMessage: i18n._(t`Failed to copy template.`),
-              }}
-              isDisabled={isDisabled}
-              onCopyStart={handleCopyStart}
-              onCopyFinish={handleCopyFinish}
-              copyItem={copyTemplate}
-            />
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
-  );
-}
-
-export { DashboardTemplateListItem as _TemplateListItem };
-export default withI18n()(DashboardTemplateListItem);
diff --git a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.test.jsx b/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.test.jsx
deleted file mode 100644
index 571ef260c0..0000000000
--- a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateListItem.test.jsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import React from 'react';
-import { createMemoryHistory } from 'history';
-import { act } from 'react-dom/test-utils';
-
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import { JobTemplatesAPI } from '../../../api';
-
-import mockJobTemplateData from './data.job_template.json';
-import DashboardTemplateListItem from './DashboardTemplateListItem';
-
-jest.mock('../../../api');
-
-describe('<DashboardTemplateListItem />', () => {
-  test('launch button shown to users with start capabilities', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: true,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
-  });
-  test('launch button hidden from users without start capabilities', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: false,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
-  });
-  test('edit button shown to users with edit capabilities', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: true,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
-  });
-  test('edit button hidden from users without edit capabilities', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
-  });
-  test('missing resource icon is shown.', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
-  });
-  test('missing resource icon is not shown when there is a project and an inventory.', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-            inventory: { name: 'Bar', id: 2 },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
-  });
-  test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          ask_inventory_on_launch: true,
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
-  });
-  test('missing resource icon is not shown type is workflow_job_template', () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'workflow_job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
-    );
-    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
-  });
-  test('clicking on template from templates list navigates properly', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['/templates'],
-    });
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          id: 1,
-          name: 'Template 1',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />,
-      { context: { router: { history } } }
-    );
-    wrapper.find('Link').simulate('click', { button: 0 });
-    expect(history.location.pathname).toEqual(
-      '/templates/job_template/1/details'
-    );
-  });
-  test('should call api to copy template', async () => {
-    JobTemplatesAPI.copy.mockResolvedValue();
-
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
-    );
-    await act(async () =>
-      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
-    );
-    expect(JobTemplatesAPI.copy).toHaveBeenCalled();
-    jest.clearAllMocks();
-  });
-
-  test('should render proper alert modal on copy error', async () => {
-    JobTemplatesAPI.copy.mockRejectedValue(new Error());
-
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
-    );
-    await act(async () =>
-      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
-    );
-    wrapper.update();
-    expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
-    jest.clearAllMocks();
-  });
-
-  test('should not render copy button', async () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          ...mockJobTemplateData,
-          summary_fields: { user_capabilities: { copy: false } },
-        }}
-      />
-    );
-    expect(wrapper.find('CopyButton').length).toBe(0);
-  });
-
-  test('should render visualizer button for workflow', async () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={{
-          ...mockJobTemplateData,
-          type: 'workflow_job_template',
-        }}
-      />
-    );
-    expect(wrapper.find('ProjectDiagramIcon').length).toBe(1);
-  });
-
-  test('should not render visualizer button for job template', async () => {
-    const wrapper = mountWithContexts(
-      <DashboardTemplateListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/1/details"
-        template={mockJobTemplateData}
-      />
-    );
-    expect(wrapper.find('ProjectDiagramIcon').length).toBe(0);
-  });
-});
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index f3905608cc..c5c5e1335f 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -5,7 +5,7 @@ import { Route, withRouter, Switch } from 'react-router-dom';
 import { PageSection } from '@patternfly/react-core';
 
 import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
-import { TemplateList } from './TemplateList';
+import TemplateList from '../../components/TemplateList';
 import Template from './Template';
 import WorkflowJobTemplate from './WorkflowJobTemplate';
 import JobTemplateAdd from './JobTemplateAdd';

From 27b0f874cc8795fcfc7117e627b39bd38a00c73b Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 1 Feb 2021 09:31:47 -0800
Subject: [PATCH 6/7] remove unused var

---
 awx/ui_next/src/components/DetailList/Detail.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/awx/ui_next/src/components/DetailList/Detail.jsx b/awx/ui_next/src/components/DetailList/Detail.jsx
index dc434a1fe8..b58f09a8dc 100644
--- a/awx/ui_next/src/components/DetailList/Detail.jsx
+++ b/awx/ui_next/src/components/DetailList/Detail.jsx
@@ -34,7 +34,6 @@ const DetailValue = styled(
 `;
 
 const Detail = ({
-  id,
   label,
   value,
   fullWidth,
@@ -78,7 +77,6 @@ const Detail = ({
   );
 };
 Detail.propTypes = {
-  id: string,
   label: node.isRequired,
   value: node,
   fullWidth: bool,
@@ -86,7 +84,6 @@ Detail.propTypes = {
   helpText: string,
 };
 Detail.defaultProps = {
-  id: null,
   value: null,
   fullWidth: false,
   alwaysVisible: false,

From 186aa6cc996d1a9a6d1ead3ee515d47fdd00fdcc Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 2 Feb 2021 11:59:17 -0800
Subject: [PATCH 7/7] update snapshot

---
 .../__snapshots__/ResourceAccessListItem.test.jsx.snap    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
index 039bf50bd7..355a9396e9 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -77,7 +77,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                       alwaysVisible={false}
                       fullWidth={false}
                       helpText={null}
-                      id={null}
                       label="Name"
                       value="jane brown"
                     />
@@ -91,7 +90,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                       alwaysVisible={false}
                       fullWidth={false}
                       helpText={null}
-                      id={null}
                       label="Team Roles"
                       value={
                         <WithI18n
@@ -145,7 +143,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                         alwaysVisible={false}
                         fullWidth={false}
                         helpText={null}
-                        id={null}
                         label="Name"
                         value="jane brown"
                       />
@@ -159,7 +156,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                         alwaysVisible={false}
                         fullWidth={false}
                         helpText={null}
-                        id={null}
                         label="Team Roles"
                         value={
                           <WithI18n
@@ -236,7 +232,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                           alwaysVisible={false}
                           fullWidth={false}
                           helpText={null}
-                          id={null}
                           label="Name"
                           value="jane brown"
                         />
@@ -250,7 +245,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                           alwaysVisible={false}
                           fullWidth={false}
                           helpText={null}
-                          id={null}
                           label="Team Roles"
                           value={
                             <WithI18n
@@ -462,7 +456,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       alwaysVisible={false}
                                       fullWidth={false}
                                       helpText={null}
-                                      id={null}
                                       label="Name"
                                       value="jane brown"
                                     >
@@ -687,7 +680,6 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       alwaysVisible={false}
                                       fullWidth={false}
                                       helpText={null}
-                                      id={null}
                                       label="Team Roles"
                                       value={
                                         <WithI18n