convert user sub-lists to tables

2026-01-23 15:38:06 -03:30 · 2021-04-29 10:24:45 -07:00 · 2021-04-29 10:24:45 -07:00 · 7c86edd825
commit 7c86edd825
parent 3addbeab4c
6 changed files with 107 additions and 147 deletions
--- 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>
  );
 }
--- 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}
        />
      )}
    />
--- 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}
            />
          );
        }}
--- 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>
  );
 }

--- 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 => (
--- 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>
  );
 }