convert ApplicationTokenList, HostFilterLookup to tables

awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx

@@ -1,3 +1,4 @@
+import 'styled-components/macro';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@lingui/macro';
@@ -28,6 +29,7 @@ const CheckboxListItem = ({
       ouiaId={`list-item-${itemId}`}
       id={`list-item-${itemId}`}
       onClick={handleRowClick}
+      css="cursor: default"
     >
       <Td
         id={`check-action-item-${itemId}`}

awx/ui_next/src/components/Lookup/HostFilterLookup.jsx

@@ -18,7 +18,7 @@ import ChipGroup from '../ChipGroup';
 import Popover from '../Popover';
 import DataListToolbar from '../DataListToolbar';
 import LookupErrorMessage from './shared/LookupErrorMessage';
-import PaginatedDataList from '../PaginatedDataList';
+import PaginatedTable, { HeaderCell, HeaderRow } from '../PaginatedTable';
 import HostListItem from './HostListItem';
 import { HostsAPI } from '../../api';
 import { getQSConfig, mergeParams, parseQueryString } from '../../util/qs';
@@ -352,20 +352,20 @@ function HostFilterLookup({
         ]}
       >
         <ModalList>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={error}
             hasContentLoading={isLoading}
             itemCount={count}
             items={hosts}
-            onRowClick={() => {}}
             pluralizedItemName={t`hosts`}
             qsConfig={QS_CONFIG}
-            renderItem={item => (
+            headerRow={
-              <HostListItem
+              <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
-                key={item.id}
+                <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-                item={{ ...item, url: `/hosts/${item.id}/details` }}
+                <HeaderCell>{t`Inventory`}</HeaderCell>
-              />
+              </HeaderRow>
-            )}
+            }
+            renderRow={item => <HostListItem key={item.id} item={item} />}
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -375,20 +375,6 @@ function HostFilterLookup({
               />
             )}
             toolbarSearchColumns={searchColumns}
-            toolbarSortColumns={[
-              {
-                name: t`Name`,
-                key: 'name',
-              },
-              {
-                name: t`Created`,
-                key: 'created',
-              },
-              {
-                name: t`Modified`,
-                key: 'modified',
-              },
-            ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
           />

awx/ui_next/src/components/Lookup/HostListItem.jsx

@@ -1,39 +1,13 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
-import {
+import { Td, Tr } from '@patternfly/react-table';
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  TextContent,
-} from '@patternfly/react-core';
-import DataListCell from '../DataListCell';
 
 function HostListItem({ item }) {
   return (
-    <DataListItem
+    <Tr ouiaId={`host-list-item-${item.id}`}>
-      aria-labelledby={`items-list-item-${item.id}`}
+      <Td dataLabel={t`Name`}>{item.name}</Td>
-      key={item.id}
+      <Td dataLabel={t`Inventory`}>{item.summary_fields.inventory.name}</Td>
-      id={`${item.id}`}
+    </Tr>
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" aria-label={t`name`}>
-              <TextContent>
-                <Link to={{ pathname: item.url }}>
-                  <b id={`items-list-item-${item.id}`}>{item.name}</b>
-                </Link>
-              </TextContent>
-            </DataListCell>,
-            <DataListCell key="inventory" aria-label={t`inventory`}>
-              {item.summary_fields.inventory.name}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/components/Lookup/HostListItem.test.jsx

@@ -15,11 +15,25 @@ describe('HostListItem', () => {
     },
   };
   test('initially renders successfully', () => {
-    wrapper = mountWithContexts(<HostListItem item={mockInventory} />);
+    wrapper = mountWithContexts(
-    expect(wrapper.find('HostListItem').length).toBe(1);
+      <table>
-    expect(wrapper.find('DataListCell[aria-label="name"]').text()).toBe('Foo');
+        <tbody>
-    expect(wrapper.find('DataListCell[aria-label="inventory"]').text()).toBe(
+          <HostListItem item={mockInventory} />
-      'Bar'
+        </tbody>
+      </table>
     );
+    expect(wrapper.find('HostListItem').length).toBe(1);
+    expect(
+      wrapper
+        .find('Td')
+        .at(0)
+        .text()
+    ).toBe('Foo');
+    expect(
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
+    ).toBe('Bar');
   });
 });

awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenList.jsx

@@ -2,9 +2,11 @@ import React, { useCallback, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { t } from '@lingui/macro';
 
-import PaginatedDataList, {
+import PaginatedTable, {
-  ToolbarDeleteButton,
+  HeaderCell,
-} from '../../../components/PaginatedDataList';
+  HeaderRow,
+} from '../../../components/PaginatedTable';
+import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import { TokensAPI, ApplicationsAPI } from '../../../api';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -67,9 +69,13 @@ function ApplicationTokenList() {
     fetchTokens();
   }, [fetchTokens]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
+  const {
-    tokens
+    selected,
-  );
+    isAllSelected,
+    handleSelect,
+    selectAll,
+    clearSelected,
+  } = useSelected(tokens);
   const {
     isLoading: deleteLoading,
     deletionError,
@@ -90,19 +96,18 @@ function ApplicationTokenList() {
 
   const handleDelete = async () => {
     await handleDeleteApplications();
-    setSelected([]);
+    clearSelected();
   };
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={error}
         hasContentLoading={isLoading || deleteLoading}
         items={tokens}
         itemCount={itemCount}
         pluralizedItemName={t`Tokens`}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -110,28 +115,7 @@ function ApplicationTokenList() {
             isDefault: true,
           },
         ]}
-        toolbarSortColumns={[
+        clearSelected={clearSelected}
-          {
-            name: t`Name`,
-            key: 'user__username',
-          },
-          {
-            name: t`Scope`,
-            key: 'scope',
-          },
-          {
-            name: t`Expiration`,
-            key: 'expires',
-          },
-          {
-            name: t`Created`,
-            key: 'created',
-          },
-          {
-            name: t`Modified`,
-            key: 'modified',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
         renderToolbar={props => (
@@ -139,9 +123,7 @@ function ApplicationTokenList() {
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
+            onSelectAll={selectAll}
-              setSelected(isSelected ? [...tokens] : [])
-            }
             qsConfig={QS_CONFIG}
             additionalControls={[
               <ToolbarDeleteButton
@@ -153,7 +135,14 @@ function ApplicationTokenList() {
             ]}
           />
         )}
-        renderItem={token => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="user__username">{t`Name`}</HeaderCell>
+            <HeaderCell sortKey="scope">{t`Scope`}</HeaderCell>
+            <HeaderCell sortKey="expires">{t`Expires`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(token, index) => (
           <ApplicationTokenListItem
             key={token.id}
             value={token.name}
@@ -161,6 +150,7 @@ function ApplicationTokenList() {
             detailUrl={`/users/${token.summary_fields.user.id}/details`}
             onSelect={() => handleSelect(token)}
             isSelected={selected.some(row => row.id === token.id)}
+            rowIndex={index}
           />
         )}
       />

awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenList.test.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import {
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-  mountWithContexts,
-  waitForElement,
-} from '../../../../testUtils/enzymeHelpers';
 import { ApplicationsAPI, TokensAPI } from '../../../api';
 import ApplicationTokenList from './ApplicationTokenList';
 
@@ -100,14 +97,16 @@ describe('<ApplicationTokenList/>', () => {
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
-    await waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
+    wrapper.update();
+    expect(wrapper.find('ApplicationTokenList')).toHaveLength(1);
   });
+
   test('should have data fetched and render 2 rows', async () => {
     ApplicationsAPI.readTokens.mockResolvedValue(tokens);
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
-    await waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
+    wrapper.update();
     expect(wrapper.find('ApplicationTokenListItem').length).toBe(2);
     expect(ApplicationsAPI.readTokens).toBeCalled();
   });
@@ -117,15 +116,22 @@ describe('<ApplicationTokenList/>', () => {
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
-    waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
-
-    wrapper
-      .find('input#select-token-2')
-      .simulate('change', tokens.data.results[0]);
-
     wrapper.update();
 
-    expect(wrapper.find('input#select-token-2').prop('checked')).toBe(true);
+    wrapper
+      .find('.pf-c-table__check')
+      .at(0)
+      .find('input')
+      .simulate('change', tokens.data.results[0]);
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .at(0)
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -153,8 +159,8 @@ describe('<ApplicationTokenList/>', () => {
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
+    wrapper.update();
 
-    await waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
     expect(wrapper.find('ContentError').length).toBe(1);
   });
 
@@ -174,13 +180,23 @@ describe('<ApplicationTokenList/>', () => {
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
-    waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
+    wrapper.update();
 
-    wrapper.find('input#select-token-2').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .at(0)
+      .find('input')
+      .simulate('change', 'a');
 
     wrapper.update();
 
-    expect(wrapper.find('input#select-token-2').prop('checked')).toBe(true);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .at(0)
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -191,7 +207,9 @@ describe('<ApplicationTokenList/>', () => {
       wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
     );
     wrapper.update();
-    expect(wrapper.find('ErrorDetail').length).toBe(1);
+
+    expect(!!wrapper.find('AlertModal').prop('isOpen')).toEqual(true);
+    expect(wrapper.find('ErrorDetail')).toHaveLength(1);
   });
 
   test('should not render add button', async () => {
@@ -200,7 +218,7 @@ describe('<ApplicationTokenList/>', () => {
     await act(async () => {
       wrapper = mountWithContexts(<ApplicationTokenList />);
     });
-    waitForElement(wrapper, 'ApplicationTokenList', el => el.length > 0);
+    wrapper.update();
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
   });
 });

awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenListItem.jsx

@@ -1,55 +1,36 @@
 import React from 'react';
-import { string, bool, func } from 'prop-types';
+import { string, bool, func, number } from 'prop-types';
-
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
+import { Tr, Td } from '@patternfly/react-table';
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
 
 import { Token } from '../../../types';
 import { formatDateString } from '../../../util/dates';
 import { toTitleCase } from '../../../util/strings';
-import DataListCell from '../../../components/DataListCell';
 
-const Label = styled.b`
+function ApplicationTokenListItem({
-  margin-right: 20px;
+  token,
-`;
+  isSelected,
-
+  onSelect,
-function ApplicationTokenListItem({ token, isSelected, onSelect, detailUrl }) {
+  detailUrl,
-  const labelId = `check-action-${token.id}`;
+  rowIndex,
+}) {
   return (
-    <DataListItem key={token.id} aria-labelledby={labelId} id={`${token.id}`}>
+    <Tr id={`token-row-${token.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        select={{
-          id={`select-token-${token.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
-          aria-labelledby={labelId}
+        }}
-        />
+        dataLabel={t`Selected`}
-        <DataListItemCells
+      />
-          dataListCells={[
+      <Td dataLabel={t`Name`}>
-            <DataListCell key="divider" aria-label={t`token name`}>
+        <Link to={detailUrl}>{token.summary_fields.user.username}</Link>
-              <Link to={`${detailUrl}`}>
+      </Td>
-                <b>{token.summary_fields.user.username}</b>
+      <Td dataLabel={t`Scope`}>{toTitleCase(token.scope)}</Td>
-              </Link>
+      <Td dataLabel={t`Expires`}>{formatDateString(token.expires)}</Td>
-            </DataListCell>,
+    </Tr>
-            <DataListCell key="scope" aria-label={t`scope`}>
-              <Label>{t`Scope`}</Label>
-              <span>{toTitleCase(token.scope)}</span>
-            </DataListCell>,
-            <DataListCell key="expiration" aria-label={t`expiration`}>
-              <Label>{t`Expiration`}</Label>
-              <span>{formatDateString(token.expires)}</span>
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 
@@ -58,6 +39,7 @@ ApplicationTokenListItem.propTypes = {
   detailUrl: string.isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
+  rowIndex: number.isRequired,
 };
 
 export default ApplicationTokenListItem;

awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenListItem.test.jsx

@@ -42,49 +42,79 @@ describe('<ApplicationTokenListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationTokenListItem
+        <table>
-          token={token}
+          <tbody>
-          detailUrl="/users/2/details"
+            <ApplicationTokenListItem
-          isSelected={false}
+              token={token}
-          onSelect={() => {}}
+              detailUrl="/users/2/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={1}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('ApplicationTokenListItem').length).toBe(1);
   });
+
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationTokenListItem
+        <table>
-          token={token}
+          <tbody>
-          detailUrl="/users/2/details"
+            <ApplicationTokenListItem
-          isSelected={false}
+              token={token}
-          onSelect={() => {}}
+              detailUrl="/users/2/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={1}
+            />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find('DataListCell[aria-label="token name"]').text()).toBe(
+    expect(
-      'admin'
+      wrapper
-    );
+        .find('Td')
-    expect(wrapper.find('DataListCell[aria-label="scope"]').text()).toBe(
+        .at(1)
-      'ScopeRead'
+        .text()
-    );
+    ).toBe('admin');
-    expect(wrapper.find('DataListCell[aria-label="expiration"]').text()).toBe(
+    expect(
-      'Expiration10/25/3019, 7:56:38 PM'
+      wrapper
-    );
+        .find('Td')
-    expect(wrapper.find('input#select-token-2').prop('checked')).toBe(false);
+        .at(2)
+        .text()
+    ).toBe('Read');
+    expect(
+      wrapper
+        .find('Td')
+        .at(3)
+        .text()
+    ).toBe('10/25/3019, 7:56:38 PM');
   });
+
   test('should be checked', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationTokenListItem
+        <table>
-          token={token}
+          <tbody>
-          detailUrl="/users/2/details"
+            <ApplicationTokenListItem
-          isSelected
+              token={token}
-          onSelect={() => {}}
+              detailUrl="/users/2/details"
-        />
+              isSelected
+              onSelect={() => {}}
+              rowIndex={1}
+            />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find('input#select-token-2').prop('checked')).toBe(true);
+    expect(
+      wrapper
+        .find('Td')
+        .at(0)
+        .prop('select').isSelected
+    ).toBe(true);
   });
 });

awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.jsx

@@ -11,14 +11,18 @@ describe('<InventoryGroupHostListItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
-      <InventoryGroupHostListItem
+      <table>
-        detailUrl="/host/1"
+        <tbody>
-        editUrl="/host/1"
+          <InventoryGroupHostListItem
-        host={mockHost}
+            detailUrl="/host/1"
-        isSelected={false}
+            editUrl="/host/1"
-        onSelect={() => {}}
+            host={mockHost}
-        rowIndex={0}
+            isSelected={false}
-      />
+            onSelect={() => {}}
+            rowIndex={0}
+          />
+        </tbody>
+      </table>
     );
   });
 
@@ -42,14 +46,18 @@ describe('<InventoryGroupHostListItem />', () => {
     const copyMockHost = Object.assign({}, mockHost);
     copyMockHost.summary_fields.user_capabilities.edit = false;
     wrapper = mountWithContexts(
-      <InventoryGroupHostListItem
+      <table>
-        detailUrl="/host/1"
+        <tbody>
-        editUrl="/host/1"
+          <InventoryGroupHostListItem
-        host={mockHost}
+            detailUrl="/host/1"
-        isSelected={false}
+            editUrl="/host/1"
-        onSelect={() => {}}
+            host={mockHost}
-        rowIndex={0}
+            isSelected={false}
-      />
+            onSelect={() => {}}
+            rowIndex={0}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });