convert credentials list to table

awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx

@@ -1,3 +1,4 @@
+import 'styled-components/macro';
 import React from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 import { Thead, Tr, Th as PFTh } from '@patternfly/react-table';
@@ -72,6 +73,7 @@ export function HeaderCell({
   columnIndex,
   idPrefix,
   className,
+  alignRight,
   children,
 }) {
   const sort = sortKey
@@ -86,6 +88,7 @@ export function HeaderCell({
       id={sortKey ? `${idPrefix}-${sortKey}` : null}
       className={className}
       sort={sort}
+      css={alignRight ? 'text-align: right' : null}
     >
       {children}
     </Th>

awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx

@@ -7,10 +7,14 @@ import { CredentialsAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
 import DataListToolbar from '../../../components/DataListToolbar';
-import PaginatedDataList, {
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import CredentialListItem from './CredentialListItem';
@@ -114,7 +118,7 @@ function CredentialList({ i18n }) {
   return (
     <PageSection>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading || isDeleteLoading}
           items={credentials}
@@ -142,7 +146,14 @@ function CredentialList({ i18n }) {
               key: 'modified_by__username__icontains',
             },
           ]}
-          renderItem={item => (
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG}>
+              <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+              <HeaderCell>{i18n._(t`Type`)}</HeaderCell>
+              <HeaderCell alignRight>{i18n._(t`Actions`)}</HeaderCell>
+            </HeaderRow>
+          }
+          renderRow={(item, index) => (
             <CredentialListItem
               key={item.id}
               credential={item}
@@ -150,6 +161,7 @@ function CredentialList({ i18n }) {
               detailUrl={`/credentials/${item.id}/details`}
               isSelected={selected.some(row => row.id === item.id)}
               onSelect={() => handleSelect(item)}
+              rowIndex={index}
             />
           )}
           renderToolbar={props => (

awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx

@@ -57,25 +57,41 @@ describe('<CredentialList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
     await act(async () => {
       wrapper
-        .find('DataListCheck[id="select-credential-1"]')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(true);
     await act(async () => {
       wrapper
-        .find('DataListCheck[id="select-credential-1"]')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
   });
 
@@ -105,7 +121,9 @@ describe('<CredentialList />', () => {
 
     await act(async () => {
       wrapper
-        .find('DataListCheck[id="select-credential-3"]')
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
         .invoke('onChange')();
     });
     wrapper.update();
@@ -122,7 +140,9 @@ describe('<CredentialList />', () => {
     );
     await act(async () => {
       wrapper
-        .find('DataListCheck[id="select-credential-2"]')
+        .find('.pf-c-table__check')
+        .at(1)
+        .find('input')
         .invoke('onChange')();
     });
     wrapper.update();

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx

@@ -3,31 +3,16 @@ 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 { timeOfDay } from '../../../util/dates';
 
 import { Credential } from '../../../types';
 import { CredentialsAPI } from '../../../api';
 import CopyButton from '../../../components/CopyButton';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(2, 40px);
-`;
-
 function CredentialListItem({
   credential,
   detailUrl,
@@ -35,6 +20,7 @@ function CredentialListItem({
   onSelect,
   i18n,
   fetchCredentials,
+  rowIndex,
 }) {
   const [isDisabled, setIsDisabled] = useState(false);
 
@@ -57,64 +43,49 @@ function CredentialListItem({
   }, []);
 
   return (
-    <DataListItem
+    <Tr id={`${credential.id}`}>
-      key={credential.id}
+      <Td
-      aria-labelledby={labelId}
+        select={{
-      id={`${credential.id}`}
+          rowIndex,
-    >
+          isSelected,
-      <DataListItemRow>
+          onSelect,
-        <DataListCheck
+        }}
-          isDisabled={isDisabled}
+        dataLabel={i18n._(t`Selected`)}
-          id={`select-credential-${credential.id}`}
+      />
-          checked={isSelected}
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          onChange={onSelect}
+        <Link to={`${detailUrl}`}>
-          aria-labelledby={labelId}
+          <b>{credential.name}</b>
-        />
+        </Link>
-        <DataListItemCells
+      </Td>
-          dataListCells={[
+      <Td dataLabel={i18n._(t`Type`)}>
-            <DataListCell key="name">
+        {credential.summary_fields.credential_type.name}
-              <Link to={`${detailUrl}`}>
+      </Td>
-                <b>{credential.name}</b>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-              </Link>
+        <ActionItem visible={canEdit} tooltip={i18n._(t`Edit Credential`)}>
-            </DataListCell>,
+          <Button
-            <DataListCell key="type">
+            isDisabled={isDisabled}
-              {credential.summary_fields.credential_type.name}
+            aria-label={i18n._(t`Edit Credential`)}
-            </DataListCell>,
+            variant="plain"
-          ]}
+            component={Link}
-        />
+            to={`/credentials/${credential.id}/edit`}
-        <DataListAction
+          >
-          aria-label={i18n._(t`actions`)}
+            <PencilAltIcon />
-          aria-labelledby={labelId}
+          </Button>
-          id={labelId}
+        </ActionItem>
-        >
+        <ActionItem visible={credential.summary_fields.user_capabilities.copy}>
-          {canEdit && (
+          <CopyButton
-            <Tooltip content={i18n._(t`Edit Credential`)} position="top">
+            isDisabled={isDisabled}
-              <Button
+            onCopyStart={handleCopyStart}
-                isDisabled={isDisabled}
+            onCopyFinish={handleCopyFinish}
-                aria-label={i18n._(t`Edit Credential`)}
+            copyItem={copyCredential}
-                variant="plain"
+            helperText={{
-                component={Link}
+              tooltip: i18n._(t`Copy Credential`),
-                to={`/credentials/${credential.id}/edit`}
+              errorMessage: i18n._(t`Failed to copy credential.`),
-              >
+            }}
-                <PencilAltIcon />
+          />
-              </Button>
+        </ActionItem>
-            </Tooltip>
+      </ActionsTd>
-          )}
+    </Tr>
-          {credential.summary_fields.user_capabilities.copy && (
-            <CopyButton
-              isDisabled={isDisabled}
-              onCopyStart={handleCopyStart}
-              onCopyFinish={handleCopyFinish}
-              copyItem={copyCredential}
-              helperText={{
-                tooltip: i18n._(t`Copy Credential`),
-                errorMessage: i18n._(t`Failed to copy credential.`),
-              }}
-            />
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.test.jsx

@@ -16,24 +16,32 @@ describe('<CredentialListItem />', () => {
 
   test('edit button shown to users with edit capabilities', () => {
     wrapper = mountWithContexts(
-      <CredentialListItem
+      <table>
-        credential={mockCredentials.results[0]}
+        <tbody>
-        detailUrl="/foo/bar"
+          <CredentialListItem
-        isSelected={false}
+            credential={mockCredentials.results[0]}
-        onSelect={() => {}}
+            detailUrl="/foo/bar"
-      />
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
 
   test('edit button hidden from users without edit capabilities', () => {
     wrapper = mountWithContexts(
-      <CredentialListItem
+      <table>
-        credential={mockCredentials.results[1]}
+        <tbody>
-        detailUrl="/foo/bar"
+          <CredentialListItem
-        isSelected={false}
+            credential={mockCredentials.results[1]}
-        onSelect={() => {}}
+            detailUrl="/foo/bar"
-      />
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
@@ -41,12 +49,16 @@ describe('<CredentialListItem />', () => {
     CredentialsAPI.copy.mockResolvedValue();
 
     wrapper = mountWithContexts(
-      <CredentialListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/foo/bar"
+          <CredentialListItem
-        credential={mockCredentials.results[0]}
+            isSelected={false}
-        onSelect={() => {}}
+            detailUrl="/foo/bar"
-      />
+            credential={mockCredentials.results[0]}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
     );
 
     await act(async () =>
@@ -60,12 +72,16 @@ describe('<CredentialListItem />', () => {
     CredentialsAPI.copy.mockRejectedValue(new Error());
 
     wrapper = mountWithContexts(
-      <CredentialListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/foo/bar"
+          <CredentialListItem
-        onSelect={() => {}}
+            isSelected={false}
-        credential={mockCredentials.results[0]}
+            detailUrl="/foo/bar"
-      />
+            onSelect={() => {}}
+            credential={mockCredentials.results[0]}
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -77,12 +93,16 @@ describe('<CredentialListItem />', () => {
 
   test('should not render copy button', async () => {
     wrapper = mountWithContexts(
-      <CredentialListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/foo/bar"
+          <CredentialListItem
-        onSelect={() => {}}
+            isSelected={false}
-        credential={mockCredentials.results[1]}
+            detailUrl="/foo/bar"
-      />
+            onSelect={() => {}}
+            credential={mockCredentials.results[1]}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });