convert CredentialTypeList to tables

awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx

@@ -8,10 +8,14 @@ import { CredentialTypesAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
-import PaginatedDataList, {
+import {
   ToolbarDeleteButton,
   ToolbarAddButton,
 } from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
@@ -106,7 +110,7 @@ function CredentialTypeList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isLoading || deleteLoading}
             items={credentialTypes}
@@ -162,7 +166,13 @@ function CredentialTypeList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={credentialType => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(credentialType, index) => (
               <CredentialTypeListItem
                 key={credentialType.id}
                 value={credentialType.name}
@@ -170,6 +180,7 @@ function CredentialTypeList({ i18n }) {
                 detailUrl={`${match.url}/${credentialType.id}/details`}
                 onSelect={() => handleSelect(credentialType)}
                 isSelected={selected.some(row => row.id === credentialType.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.test.jsx

@@ -72,12 +72,18 @@ describe('<CredentialTypeList', () => {
     await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
 
     wrapper
-      .find('input#select-credential-types-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', credentialTypes.data.results[0]);
     wrapper.update();
 
     expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
     ).toBe(true);
 
     await act(async () => {
@@ -133,10 +139,18 @@ describe('<CredentialTypeList', () => {
     });
     waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
 
-    wrapper.find('input#select-credential-types-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
     wrapper.update();
     expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
     ).toBe(true);
 
     await act(async () =>

awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.jsx

@@ -3,82 +3,53 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
+import { Button } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
-
-import DataListCell from '../../../components/DataListCell';
 import { CredentialType } from '../../../types';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
 function CredentialTypeListItem({
   credentialType,
   detailUrl,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${credentialType.id}`;
 
   return (
-    <DataListItem
+    <Tr id={`credential-type-row-${credentialType.id}`}>
-      key={credentialType.id}
+      <Td
-      aria-labelledby={labelId}
+        select={{
-      id={`${credentialType.id} `}
+          rowIndex,
-    >
+          isSelected,
-      <DataListItemRow>
+          onSelect,
-        <DataListCheck
+        }}
-          id={`select-credential-types-${credentialType.id}`}
+        dataLabel={i18n._(t`Selected`)}
-          checked={isSelected}
+      />
-          onChange={onSelect}
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          aria-labelledby={labelId}
+        <Link to={`${detailUrl}`}>
-        />
+          <b>{credentialType.name}</b>
-        <DataListItemCells
+        </Link>
-          dataListCells={[
+      </Td>
-            <DataListCell
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-              key="name"
+        <ActionItem
-              aria-label={i18n._(t`credential type name`)}
+          visible={credentialType.summary_fields.user_capabilities.edit}
-            >
+          tooltip={i18n._(t`Edit credential type`)}
-              <Link to={`${detailUrl}`}>
-                <b>{credentialType.name}</b>
-              </Link>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {credentialType.summary_fields.user_capabilities.edit && (
+          <Button
-            <Tooltip content={i18n._(t`Edit credential type`)} position="top">
+            aria-label={i18n._(t`Edit credential type`)}
-              <Button
+            variant="plain"
-                aria-label={i18n._(t`Edit credential type`)}
+            component={Link}
-                variant="plain"
+            to={`/credential_types/${credentialType.id}/edit`}
-                component={Link}
+          >
-                to={`/credential_types/${credentialType.id}/edit`}
+            <PencilAltIcon />
-              >
+          </Button>
-                <PencilAltIcon />
+        </ActionItem>
-              </Button>
+      </ActionsTd>
-            </Tooltip>
+    </Tr>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.test.jsx

@@ -17,12 +17,16 @@ describe('<CredentialTypeListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
+        <table>
-          credentialType={credential_type}
+          <tbody>
-          detailUrl="credential_types/1/details"
+            <CredentialTypeListItem
-          isSelected={false}
+              credentialType={credential_type}
-          onSelect={() => {}}
+              detailUrl="credential_types/1/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('CredentialTypeListItem').length).toBe(1);
@@ -31,48 +35,38 @@ describe('<CredentialTypeListItem/>', () => {
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
+        <table>
-          credentialType={credential_type}
+          <tbody>
-          detailsUrl="credential_types/1/details"
+            <CredentialTypeListItem
-          isSelected={false}
+              credentialType={credential_type}
-          onSelect={() => {}}
+              detailsUrl="credential_types/1/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
-    expect(
+    expect(wrapper.find('Td[dataLabel="Name"]').text()).toBe('Foo');
-      wrapper.find('DataListCell[aria-label="credential type name"]').text()
-    ).toBe('Foo');
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
-    expect(
+    expect(wrapper.find('.pf-c-table__check input').prop('checked')).toBe(
-      wrapper.find('input#select-credential-types-1').prop('checked')
+      undefined
-    ).toBe(false);
+    );
-  });
-
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={credential_type}
-          detailsUrl="credential_types/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
-    ).toBe(true);
   });
 
   test('edit button shown to users with edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
+        <table>
-          credentialType={credential_type}
+          <tbody>
-          detailsUrl="credential_types/1/details"
+            <CredentialTypeListItem
-          isSelected
+              credentialType={credential_type}
-          onSelect={() => {}}
+              detailsUrl="credential_types/1/details"
-        />
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
@@ -82,15 +76,19 @@ describe('<CredentialTypeListItem/>', () => {
   test('edit button hidden from users without edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
+        <table>
-          credentialType={{
+          <tbody>
-            ...credential_type,
+            <CredentialTypeListItem
-            summary_fields: { user_capabilities: { edit: false } },
+              credentialType={{
-          }}
+                ...credential_type,
-          detailsUrl="credential_types/1/details"
+                summary_fields: { user_capabilities: { edit: false } },
-          isSelected
+              }}
-          onSelect={() => {}}
+              detailsUrl="credential_types/1/details"
-        />
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });