convert TemplateList to tables

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}

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>
   );
 }