convert notification template list to tables

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx

@@ -4,7 +4,11 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 import { NotificationTemplatesAPI } from '../../../api';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -104,7 +108,7 @@ function NotificationTemplatesList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isTemplatesLoading || isDeleteLoading}
             items={templates}
@@ -149,16 +153,6 @@ function NotificationTemplatesList({ i18n }) {
             ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-              {
-                name: i18n._(t`Type`),
-                key: 'notification_type',
-              },
-            ]}
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -179,7 +173,17 @@ function NotificationTemplatesList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={template => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
+                <HeaderCell sortKey="notification_type">
+                  {i18n._(t`Type`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(template, index) => (
               <NotificationTemplateListItem
                 key={template.id}
                 fetchTemplates={fetchTemplates}
@@ -187,6 +191,7 @@ function NotificationTemplatesList({ i18n }) {
                 detailUrl={`${match.url}/${template.id}`}
                 isSelected={selected.some(row => row.id === template.id)}
                 onSelect={() => handleSelect(template)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx

@@ -89,21 +89,33 @@ describe('<NotificationTemplateList />', () => {
   });
 
   test('should select item', async () => {
-    const itemCheckboxInput = 'input#select-template-1';
     await act(async () => {
       wrapper = mountWithContexts(<NotificationTemplateList />);
     });
     wrapper.update();
-    expect(wrapper.find(itemCheckboxInput).prop('checked')).toEqual(false);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toEqual(false);
     await act(async () => {
       wrapper
-        .find(itemCheckboxInput)
+        .find('.pf-c-table__check')
-        .closest('DataListCheck')
+        .first()
+        .find('input')
         .props()
         .onChange();
     });
     wrapper.update();
-    expect(wrapper.find(itemCheckboxInput).prop('checked')).toEqual(true);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toEqual(true);
   });
 
   test('should delete notifications', async () => {
@@ -135,7 +147,6 @@ describe('<NotificationTemplateList />', () => {
   });
 
   test('should show error dialog shown for failed deletion', async () => {
-    const itemCheckboxInput = 'input#select-template-1';
     OrganizationsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -153,8 +164,9 @@ describe('<NotificationTemplateList />', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find(itemCheckboxInput)
+        .find('.pf-c-table__check')
-        .closest('DataListCheck')
+        .first()
+        .find('input')
         .props()
         .onChange();
     });

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx

@@ -3,32 +3,17 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
-import {
+import { Tr, Td } from '@patternfly/react-table';
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
 import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { timeOfDay } from '../../../util/dates';
 import { NotificationTemplatesAPI, NotificationsAPI } from '../../../api';
-import DataListCell from '../../../components/DataListCell';
 import StatusLabel from '../../../components/StatusLabel';
 import CopyButton from '../../../components/CopyButton';
 import useRequest from '../../../util/useRequest';
 import { NOTIFICATION_TYPES } from '../constants';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(3, 40px);
-`;
-
 const NUM_RETRIES = 25;
 const RETRY_TIMEOUT = 5000;
 
@@ -38,6 +23,7 @@ function NotificationTemplateListItem({
   fetchTemplates,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const recentNotifications = template.summary_fields?.recent_notifications;
@@ -102,36 +88,29 @@ function NotificationTemplateListItem({
   const labelId = `template-name-${template.id}`;
 
   return (
-    <DataListItem key={template.id} aria-labelledby={labelId} id={template.id}>
+    <Tr id={`notification-template-row-${template.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        select={{
-          id={`select-template-${template.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
-          aria-labelledby={labelId}
+        }}
+        dataLabel={i18n._(t`Selected`)}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          dataListCells={[
+        <Link to={`${detailUrl}`}>
-            <DataListCell key="name" id={labelId}>
-              <Link to={detailUrl}>
           <b>{template.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="status">
+      <Td dataLabel={i18n._(t`Status`)}>
         {status && <StatusLabel status={status} />}
-            </DataListCell>,
+      </Td>
-            <DataListCell key="type">
+      <Td dataLabel={i18n._(t`Type`)}>
-              <strong>{i18n._(t`Type:`)}</strong>{' '}
         {NOTIFICATION_TYPES[template.notification_type] ||
           template.notification_type}
-            </DataListCell>,
+      </Td>
-          ]}
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-        />
+        <ActionItem visible tooltip={i18n._(t`Test notification`)}>
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-        >
-          <Tooltip content={i18n._(t`Test Notification`)} position="top">
           <Button
             aria-label={i18n._(t`Test Notification`)}
             variant="plain"
@@ -140,11 +119,10 @@ function NotificationTemplateListItem({
           >
             <BellIcon />
           </Button>
-          </Tooltip>
+        </ActionItem>
-          {template.summary_fields.user_capabilities.edit ? (
+        <ActionItem
-            <Tooltip
+          visible={template.summary_fields.user_capabilities.edit}
-              content={i18n._(t`Edit Notification Template`)}
+          tooltip={i18n._(t`Edit`)}
-              position="top"
         >
           <Button
             aria-label={i18n._(t`Edit Notification Template`)}
@@ -154,12 +132,8 @@ function NotificationTemplateListItem({
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          ) : (
+        <ActionItem visible={template.summary_fields.user_capabilities.copy}>
-            <div />
-          )}
-          {template.summary_fields.user_capabilities.copy && (
-            <Tooltip content={i18n._(t`Copy Notification Template`)}>
           <CopyButton
             copyItem={copyTemplate}
             isCopyDisabled={isCopyDisabled}
@@ -167,11 +141,9 @@ function NotificationTemplateListItem({
             onCopyFinish={handleCopyFinish}
             errorMessage={i18n._(t`Failed to copy template.`)}
           />
-            </Tooltip>
+        </ActionItem>
-          )}
+      </ActionsTd>
-        </DataListAction>
+    </Tr>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.jsx

@@ -26,17 +26,21 @@ const template = {
 describe('<NotificationTemplateListItem />', () => {
   test('should render template row', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationTemplateListItem
             template={template}
             detailUrl="/notification_templates/3/detail"
           />
+        </tbody>
+      </table>
     );
 
-    const cells = wrapper.find('DataListCell');
+    const cells = wrapper.find('Td');
-    expect(cells).toHaveLength(3);
+    expect(cells).toHaveLength(5);
-    expect(cells.at(0).text()).toEqual('Test Notification');
+    expect(cells.at(1).text()).toEqual('Test Notification');
-    expect(cells.at(1).text()).toEqual('Success');
+    expect(cells.at(2).text()).toEqual('Success');
-    expect(cells.at(2).text()).toEqual('Type: Slack');
+    expect(cells.at(3).text()).toEqual('Slack');
   });
 
   test('should send test notification', async () => {
@@ -45,10 +49,14 @@ describe('<NotificationTemplateListItem />', () => {
     });
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationTemplateListItem
             template={template}
             detailUrl="/notification_templates/3/detail"
           />
+        </tbody>
+      </table>
     );
     await act(async () => {
       wrapper
@@ -59,8 +67,8 @@ describe('<NotificationTemplateListItem />', () => {
     expect(NotificationTemplatesAPI.test).toHaveBeenCalledTimes(1);
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Td')
-        .at(1)
+        .at(2)
         .text()
     ).toEqual('Running');
   });
@@ -69,10 +77,14 @@ describe('<NotificationTemplateListItem />', () => {
     NotificationTemplatesAPI.copy.mockResolvedValue();
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationTemplateListItem
             template={template}
             detailUrl="/notification_templates/3/detail"
           />
+        </tbody>
+      </table>
     );
 
     await act(async () =>
@@ -86,10 +98,14 @@ describe('<NotificationTemplateListItem />', () => {
     NotificationTemplatesAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationTemplateListItem
             template={template}
             detailUrl="/notification_templates/3/detail"
           />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -101,6 +117,8 @@ describe('<NotificationTemplateListItem />', () => {
 
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationTemplateListItem
             template={{
               ...template,
@@ -113,6 +131,8 @@ describe('<NotificationTemplateListItem />', () => {
             }}
             detailUrl="/notification_templates/3/detail"
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });