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,76 +88,62 @@ 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
+      />
-          dataListCells={[
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-            <DataListCell key="name" id={labelId}>
+        <Link to={`${detailUrl}`}>
-              <Link to={detailUrl}>
+          <b>{template.name}</b>
-                <b>{template.name}</b>
+        </Link>
-              </Link>
+      </Td>
-            </DataListCell>,
+      <Td dataLabel={i18n._(t`Status`)}>
-            <DataListCell key="status">
+        {status && <StatusLabel status={status} />}
-              {status && <StatusLabel status={status} />}
+      </Td>
-            </DataListCell>,
+      <Td dataLabel={i18n._(t`Type`)}>
-            <DataListCell key="type">
+        {NOTIFICATION_TYPES[template.notification_type] ||
-              <strong>{i18n._(t`Type:`)}</strong>{' '}
+          template.notification_type}
-              {NOTIFICATION_TYPES[template.notification_type] ||
+      </Td>
-                template.notification_type}
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-            </DataListCell>,
+        <ActionItem visible tooltip={i18n._(t`Test notification`)}>
-          ]}
+          <Button
-        />
+            aria-label={i18n._(t`Test Notification`)}
-        <DataListAction
+            variant="plain"
-          aria-label={i18n._(t`actions`)}
+            onClick={sendTestNotification}
-          aria-labelledby={labelId}
+            isDisabled={isLoading || status === 'running'}
+          >
+            <BellIcon />
+          </Button>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit`)}
         >
-          <Tooltip content={i18n._(t`Test Notification`)} position="top">
+          <Button
-            <Button
+            aria-label={i18n._(t`Edit Notification Template`)}
-              aria-label={i18n._(t`Test Notification`)}
+            variant="plain"
-              variant="plain"
+            component={Link}
-              onClick={sendTestNotification}
+            to={`/notification_templates/${template.id}/edit`}
-              isDisabled={isLoading || status === 'running'}
+          >
-            >
+            <PencilAltIcon />
-              <BellIcon />
+          </Button>
-            </Button>
+        </ActionItem>
-          </Tooltip>
+        <ActionItem visible={template.summary_fields.user_capabilities.copy}>
-          {template.summary_fields.user_capabilities.edit ? (
+          <CopyButton
-            <Tooltip
+            copyItem={copyTemplate}
-              content={i18n._(t`Edit Notification Template`)}
+            isCopyDisabled={isCopyDisabled}
-              position="top"
+            onCopyStart={handleCopyStart}
-            >
+            onCopyFinish={handleCopyFinish}
-              <Button
+            errorMessage={i18n._(t`Failed to copy template.`)}
-                aria-label={i18n._(t`Edit Notification Template`)}
+          />
-                variant="plain"
+        </ActionItem>
-                component={Link}
+      </ActionsTd>
-                to={`/notification_templates/${template.id}/edit`}
+    </Tr>
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          ) : (
-            <div />
-          )}
-          {template.summary_fields.user_capabilities.copy && (
-            <Tooltip content={i18n._(t`Copy Notification Template`)}>
-              <CopyButton
-                copyItem={copyTemplate}
-                isCopyDisabled={isCopyDisabled}
-                onCopyStart={handleCopyStart}
-                onCopyFinish={handleCopyFinish}
-                errorMessage={i18n._(t`Failed to copy template.`)}
-              />
-            </Tooltip>
-          )}
-        </DataListAction>
-      </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(
-      <NotificationTemplateListItem
+      <table>
-        template={template}
+        <tbody>
-        detailUrl="/notification_templates/3/detail"
+          <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(
-      <NotificationTemplateListItem
+      <table>
-        template={template}
+        <tbody>
-        detailUrl="/notification_templates/3/detail"
+          <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(
-      <NotificationTemplateListItem
+      <table>
-        template={template}
+        <tbody>
-        detailUrl="/notification_templates/3/detail"
+          <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(
-      <NotificationTemplateListItem
+      <table>
-        template={template}
+        <tbody>
-        detailUrl="/notification_templates/3/detail"
+          <NotificationTemplateListItem
-      />
+            template={template}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -101,18 +117,22 @@ describe('<NotificationTemplateListItem />', () => {
 
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
+      <table>
-        template={{
+        <tbody>
-          ...template,
+          <NotificationTemplateListItem
-          summary_fields: {
+            template={{
-            user_capabilities: {
+              ...template,
-              copy: false,
+              summary_fields: {
-              edit: false,
+                user_capabilities: {
-            },
+                  copy: false,
-          },
+                  edit: false,
-        }}
+                },
-        detailUrl="/notification_templates/3/detail"
+              },
-      />
+            }}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });