convert TeamsList to tables

awx/ui_next/src/screens/Team/TeamList/TeamList.jsx

@@ -9,7 +9,11 @@ import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import AlertModal from '../../../components/AlertModal';
 import DataListToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -112,7 +116,7 @@ function TeamList({ i18n }) {
     <Fragment>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={hasContentLoading}
             items={teams}
@@ -143,14 +147,14 @@ function TeamList({ i18n }) {
                 key: 'modified_by__username__icontains',
               },
             ]}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-            ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Organization`)}</HeaderCell>
+              </HeaderRow>
+            }
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -176,13 +180,14 @@ function TeamList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={o => (
+            renderRow={(team, index) => (
               <TeamListItem
-                key={o.id}
-                team={o}
-                detailUrl={`${match.url}/${o.id}`}
-                isSelected={selected.some(row => row.id === o.id)}
-                onSelect={() => handleSelect(o)}
+                key={team.id}
+                team={team}
+                detailUrl={`${match.url}/${team.id}`}
+                isSelected={selected.some(row => row.id === team.id)}
+                onSelect={() => handleSelect(team)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx

@@ -3,31 +3,21 @@ import React, { Fragment } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
-
-import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import DataListCell from '../../../components/DataListCell';
-
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { Team } from '../../../types';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
-function TeamListItem({ team, isSelected, onSelect, detailUrl, i18n }) {
+function TeamListItem({
+  team,
+  isSelected,
+  onSelect,
+  detailUrl,
+  rowIndex,
+  i18n,
+}) {
   TeamListItem.propTypes = {
     team: Team.isRequired,
     detailUrl: string.isRequired,
@@ -38,57 +28,45 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, i18n }) {
   const labelId = `check-action-${team.id}`;
 
   return (
-    <DataListItem key={team.id} aria-labelledby={labelId} id={`${team.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-team-${team.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link id={labelId} to={`${detailUrl}`}>
-                <b>{team.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="organization">
-              {team.summary_fields.organization && (
-                <Fragment>
-                  <b>{i18n._(t`Organization`)}</b>{' '}
-                  <Link
-                    to={`/organizations/${team.summary_fields.organization.id}/details`}
-                  >
-                    <b>{team.summary_fields.organization.name}</b>
-                  </Link>
-                </Fragment>
-              )}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`Actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`team-row-${team.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link id={labelId} to={`${detailUrl}`}>
+          <b>{team.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Organization`)}>
+        {team.summary_fields.organization && (
+          <Link
+            to={`/organizations/${team.summary_fields.organization.id}/details`}
+          >
+            <b>{team.summary_fields.organization.name}</b>
+          </Link>
+        )}
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={team.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit Team`)}
         >
-          {team.summary_fields.user_capabilities.edit ? (
-            <Tooltip content={i18n._(t`Edit Team`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit Team`)}
-                variant="plain"
-                component={Link}
-                to={`/teams/${team.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          ) : (
-            ''
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit Team`)}
+            variant="plain"
+            component={Link}
+            to={`/teams/${team.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 export default withI18n()(TeamListItem);

awx/ui_next/src/screens/Team/TeamList/TeamListItem.test.jsx

@@ -11,20 +11,24 @@ describe('<TeamListItem />', () => {
     mountWithContexts(
       <I18nProvider>
         <MemoryRouter initialEntries={['/teams']} initialIndex={0}>
-          <TeamListItem
-            team={{
-              id: 1,
-              name: 'Team 1',
-              summary_fields: {
-                user_capabilities: {
-                  edit: true,
-                },
-              },
-            }}
-            detailUrl="/team/1"
-            isSelected
-            onSelect={() => {}}
-          />
+          <table>
+            <tbody>
+              <TeamListItem
+                team={{
+                  id: 1,
+                  name: 'Team 1',
+                  summary_fields: {
+                    user_capabilities: {
+                      edit: true,
+                    },
+                  },
+                }}
+                detailUrl="/team/1"
+                isSelected
+                onSelect={() => {}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </I18nProvider>
     );
@@ -33,20 +37,24 @@ describe('<TeamListItem />', () => {
     const wrapper = mountWithContexts(
       <I18nProvider>
         <MemoryRouter initialEntries={['/teams']} initialIndex={0}>
-          <TeamListItem
-            team={{
-              id: 1,
-              name: 'Team',
-              summary_fields: {
-                user_capabilities: {
-                  edit: true,
-                },
-              },
-            }}
-            detailUrl="/team/1"
-            isSelected
-            onSelect={() => {}}
-          />
+          <table>
+            <tbody>
+              <TeamListItem
+                team={{
+                  id: 1,
+                  name: 'Team',
+                  summary_fields: {
+                    user_capabilities: {
+                      edit: true,
+                    },
+                  },
+                }}
+                detailUrl="/team/1"
+                isSelected
+                onSelect={() => {}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </I18nProvider>
     );
@@ -56,20 +64,24 @@ describe('<TeamListItem />', () => {
     const wrapper = mountWithContexts(
       <I18nProvider>
         <MemoryRouter initialEntries={['/teams']} initialIndex={0}>
-          <TeamListItem
-            team={{
-              id: 1,
-              name: 'Team',
-              summary_fields: {
-                user_capabilities: {
-                  edit: false,
-                },
-              },
-            }}
-            detailUrl="/team/1"
-            isSelected
-            onSelect={() => {}}
-          />
+          <table>
+            <tbody>
+              <TeamListItem
+                team={{
+                  id: 1,
+                  name: 'Team',
+                  summary_fields: {
+                    user_capabilities: {
+                      edit: false,
+                    },
+                  },
+                }}
+                detailUrl="/team/1"
+                isSelected
+                onSelect={() => {}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </I18nProvider>
     );