From 7c86edd825b93622358df12b29521add29d9efe5 Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Thu, 29 Apr 2021 10:24:45 -0700
Subject: [PATCH] convert user sub-lists to tables

---
 .../UserOrganizationListItem.jsx              | 35 +++-----
 .../UserOrganizationsList.jsx                 | 17 +++-
 .../screens/User/UserRoles/UserRolesList.jsx  | 18 +++-
 .../User/UserRoles/UserRolesListItem.jsx      | 88 +++++++------------
 .../screens/User/UserTeams/UserTeamList.jsx   | 21 +++--
 .../User/UserTeams/UserTeamListItem.jsx       | 75 +++++-----------
 6 files changed, 107 insertions(+), 147 deletions(-)

diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
index d31c1c7670..c44b55c75a 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
@@ -1,33 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import {
-  DataListItemCells,
-  DataListItemRow,
-  DataListItem,
-} from '@patternfly/react-core';
-import DataListCell from '../../../components/DataListCell';
+import { t } from '@lingui/macro';
+import { Tr, Td } from '@patternfly/react-table';
 
 export default function UserOrganizationListItem({ organization }) {
   const labelId = `organization-${organization.id}`;
   return (
-    <DataListItem aria-labelledby={labelId}>
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key={organization.id}>
-              <Link
-                to={`/organizations/${organization.id}/details`}
-                id={labelId}
-              >
-                <b>{organization.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key={organization.description}>
-              {organization.description}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`user-org-row-${organization.id}`}>
+      <Td id={labelId} dataLabel={t`Name`}>
+        <Link to={`/organizations/${organization.id}/details`} id={labelId}>
+          {organization.name}
+        </Link>
+      </Td>
+      <Td dataLabel={t`Description`}>{organization.description}</Td>
+    </Tr>
   );
 }
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
index 4b06dbca7b..9402637fc2 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect } from 'react';
-
 import { useLocation, useParams } from 'react-router-dom';
 import { t } from '@lingui/macro';
 
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import useRequest from '../../../util/useRequest';
 import { UsersAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
@@ -47,14 +49,20 @@ function UserOrganizationsList() {
   }, [fetchOrgs]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       items={organizations}
       contentError={contentError}
       hasContentLoading={isLoading}
       itemCount={count}
       pluralizedItemName={t`Organizations`}
       qsConfig={QS_CONFIG}
-      renderItem={organization => (
+      headerRow={
+        <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+          <HeaderCell>{t`Description`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(organization, index) => (
         <UserOrganizationListItem
           key={organization.id}
           value={organization.name}
@@ -62,6 +70,7 @@ function UserOrganizationsList() {
           detailUrl={`/organizations/${organization.id}/details`}
           onSelect={() => {}}
           isSelected={false}
+          rowIndex={index}
         />
       )}
     />
diff --git a/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx b/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
index bd93777f83..dcec93e745 100644
--- a/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
+++ b/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
 import {
   Button,
@@ -13,7 +12,10 @@ import { CubesIcon } from '@patternfly/react-icons';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import { UsersAPI, RolesAPI } from '../../../api';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 
@@ -131,7 +133,7 @@ function UserRolesList({ user }) {
   }
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={error}
         hasContentLoading={isLoading || isDisassociateLoading}
         items={roles}
@@ -153,7 +155,14 @@ function UserRolesList({ user }) {
         ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={role => {
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Type`}</HeaderCell>
+            <HeaderCell>{t`Role`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(role, index) => {
           return (
             <UserRolesListItem
               key={role.id}
@@ -164,6 +173,7 @@ function UserRolesList({ user }) {
               onSelect={item => {
                 setRoleToDisassociate(item);
               }}
+              rowIndex={index}
             />
           );
         }}
diff --git a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
index 1b93de5f6a..6b2a1144f0 100644
--- a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
@@ -1,67 +1,41 @@
 import React from 'react';
-
 import { t } from '@lingui/macro';
-import {
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Chip,
-} from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { DetailList, Detail } from '../../../components/DetailList';
-import DataListCell from '../../../components/DataListCell';
 
 function UserRolesListItem({ role, detailUrl, onSelect }) {
   const labelId = `userRole-${role.id}`;
+
   return (
-    <DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}>
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" aria-label={t`Resource name`}>
-              {role.summary_fields.resource_name ? (
-                <Link to={`${detailUrl}`} id={labelId}>
-                  <b>{role.summary_fields.resource_name}</b>
-                </Link>
-              ) : (
-                <b>{t`System`}</b>
-              )}
-            </DataListCell>,
-            <DataListCell key="type" aria-label={t`Resource type`}>
-              {role.summary_fields && (
-                <DetailList stacked>
-                  <Detail
-                    label={t`Type`}
-                    value={role.summary_fields.resource_type_display_name}
-                  />
-                </DetailList>
-              )}
-            </DataListCell>,
-            <DataListCell key="role" aria-label={t`Resource role`}>
-              {role.name && (
-                <DetailList stacked>
-                  <Detail
-                    label={t`Role`}
-                    value={
-                      <Chip
-                        key={role.name}
-                        aria-label={role.name}
-                        onClick={() => onSelect(role)}
-                        isReadOnly={
-                          !role.summary_fields.user_capabilities.unattach
-                        }
-                      >
-                        {role.name}
-                      </Chip>
-                    }
-                  />
-                </DetailList>
-              )}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`user-role-row-${role.id}`}>
+      <Td id={labelId} dataLabel={t`Name`}>
+        {role.summary_fields.resource_name ? (
+          <Link to={`${detailUrl}`} id={labelId}>
+            {role.summary_fields.resource_name}
+          </Link>
+        ) : (
+          t`System`
+        )}
+      </Td>
+      <Td dataLabel={t`Type`}>
+        {role.summary_fields
+          ? role.summary_fields.resource_type_display_name
+          : null}
+      </Td>
+      <Td dataLabel={t`Role`}>
+        {role.name ? (
+          <Chip
+            key={role.name}
+            aria-label={role.name}
+            onClick={() => onSelect(role)}
+            isReadOnly={!role.summary_fields.user_capabilities.unattach}
+          >
+            {role.name}
+          </Chip>
+        ) : null}
+      </Td>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
index 4b037cc908..8560039bab 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
@@ -1,11 +1,12 @@
 import React, { useState, useCallback, useEffect } from 'react';
-
 import { useLocation, useParams } from 'react-router-dom';
 import { t } from '@lingui/macro';
 
-import PaginatedDataList, {
-  ToolbarAddButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarAddButton } from '../../../components/PaginatedDataList';
 import DataListToolbar from '../../../components/DataListToolbar';
 import DisassociateButton from '../../../components/DisassociateButton';
 import AssociateModal from '../../../components/AssociateModal';
@@ -168,7 +169,7 @@ function UserTeamList() {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         items={teams}
         contentError={contentError}
         hasContentLoading={isLoading || isDisassociateLoading}
@@ -176,7 +177,14 @@ function UserTeamList() {
         pluralizedItemName={t`Teams`}
         qsConfig={QS_CONFIG}
         onRowClick={handleSelect}
-        renderItem={team => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Organization`}</HeaderCell>
+            <HeaderCell>{t`Description`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(team, index) => (
           <UserTeamListItem
             key={team.id}
             value={team.name}
@@ -184,6 +192,7 @@ function UserTeamList() {
             detailUrl={`/teams/${team.id}/details`}
             onSelect={() => handleSelect(team)}
             isSelected={selected.some(row => row.id === team.id)}
+            rowIndex={index}
           />
         )}
         renderToolbar={props => (
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
index 71b7657a6f..aa080f81a3 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
@@ -1,61 +1,34 @@
 import React from 'react';
 import { bool, func } from 'prop-types';
 import { Link } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
-import {
-  DataListItemCells,
-  DataListItemRow,
-  DataListItem,
-  DataListCheck,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
-import DataListCell from '../../../components/DataListCell';
+import { Tr, Td } from '@patternfly/react-table';
 import { Team } from '../../../types';
 
-function UserTeamListItem({ team, isSelected, onSelect }) {
+function UserTeamListItem({ team, isSelected, onSelect, rowIndex }) {
   return (
-    <DataListItem
-      key={team.id}
-      id={`${team.id}`}
-      aria-labelledby={`team-${team.id}`}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          aria-labelledby={`team-${team.id}`}
-          checked={isSelected}
-          id={`team-${team.id}`}
-          onChange={onSelect}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link to={`/teams/${team.id}/details`} id={`team-${team.id}`}>
-                <b>{team.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="organization">
-              {team.summary_fields.organization && (
-                <Split hasGutter>
-                  <SplitItem>
-                    <b>{t`Organization`}</b>{' '}
-                  </SplitItem>
-                  <SplitItem>
-                    <Link
-                      to={`/organizations/${team.summary_fields.organization.id}/details`}
-                    >
-                      <b>{team.summary_fields.organization.name}</b>
-                    </Link>
-                  </SplitItem>
-                </Split>
-              )}
-            </DataListCell>,
-            <DataListCell key="description">{team.description}</DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`user-team-row-${team.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+      />
+      <Td id={`team-${team.id}`} dataLabel={t`Name`}>
+        <Link to={`/teams/${team.id}/details`}>{team.name}</Link>
+      </Td>
+      <Td dataLabel={t`Organization`}>
+        {team.summary_fields.organization ? (
+          <Link
+            to={`/organizations/${team.summary_fields.organization.id}/details`}
+          >
+            {team.summary_fields.organization.name}
+          </Link>
+        ) : null}
+      </Td>
+      <Td dataLabel={t`Description`}>{team.description}</Td>
+    </Tr>
   );
 }