Merge pull request #10056 from keithjgrant/6189-user-sublist-tables

Convert user sub-lists to tables

SUMMARY
Converts User Organizations, Teams, and Roles lists to tables
Addresses #6189
ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

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

@@ -96,7 +96,10 @@ function PaginatedTable({
     Content = (
       <div css="overflow: auto">
         {hasContentLoading && <LoadingSpinner />}
-        <TableComposable aria-label={dataListLabel} ouiaId={ouiaId}>
+        <TableComposable
+          aria-label={dataListLabel}
+          ouiaId={ouiaId || `paginated-table-${pluralizedItemName}`}
+        >
           {headerRow}
           <Tbody>{items.map(renderRow)}</Tbody>
         </TableComposable>

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.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';
@@ -16,7 +18,7 @@ const QS_CONFIG = getQSConfig('organizations', {
   type: 'organization',
 });
 
-function UserOrganizationsList() {
+function UserOrganizationList() {
   const location = useLocation();
   const { id: userId } = useParams();
 
@@ -47,14 +49,23 @@ function UserOrganizationsList() {
   }, [fetchOrgs]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       items={organizations}
       contentError={contentError}
       hasContentLoading={isLoading}
       itemCount={count}
       pluralizedItemName={t`Organizations`}
       qsConfig={QS_CONFIG}
-      renderItem={organization => (
+      toolbarSearchColumns={[
+        { name: t`Name`, key: 'name__icontains', isDefault: true },
+      ]}
+      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,10 +73,11 @@ function UserOrganizationsList() {
           detailUrl={`/organizations/${organization.id}/details`}
           onSelect={() => {}}
           isSelected={false}
+          rowIndex={index}
         />
       )}
     />
   );
 }
 
-export default UserOrganizationsList;
+export default UserOrganizationList;

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.test.jsx

@@ -7,7 +7,7 @@ import {
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
 
-import UserOrganizationsList from './UserOrganizationsList';
+import UserOrganizationList from './UserOrganizationList';
 import { UsersAPI } from '../../../api';
 
 jest.mock('../../../api/models/Users');
@@ -15,6 +15,7 @@ jest.mock('../../../api/models/Users');
 describe('<UserOrganizationlist />', () => {
   let history;
   let wrapper;
+
   beforeEach(async () => {
     history = createMemoryHistory({
       initialEntries: ['/users/1/organizations'],
@@ -36,7 +37,7 @@ describe('<UserOrganizationlist />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/users/:id/organizations"
-          component={() => <UserOrganizationsList />}
+          component={() => <UserOrganizationList />}
         />,
         {
           context: {
@@ -52,12 +53,15 @@ describe('<UserOrganizationlist />', () => {
       );
     });
   });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
+
   test('successfully mounts', async () => {
     await waitForElement(wrapper, 'UserOrganizationListItem');
   });
+
   test('calls api to get organizations', () => {
     expect(UsersAPI.readOrganizations).toBeCalledWith('1', {
       order_by: 'name',

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

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx

@@ -9,9 +9,13 @@ describe('<UserOrganizationListItem />', () => {
     let wrapper;
     act(() => {
       wrapper = mountWithContexts(
-        <UserOrganizationListItem
-          organization={{ name: 'foo', id: 1, description: 'Bar' }}
-        />
+        <table>
+          <tbody>
+            <UserOrganizationListItem
+              organization={{ name: 'foo', id: 1, description: 'Bar' }}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('UserOrganizationListItem').length).toBe(1);
@@ -20,20 +24,24 @@ describe('<UserOrganizationListItem />', () => {
     let wrapper;
     act(() => {
       wrapper = mountWithContexts(
-        <UserOrganizationListItem
-          organization={{ name: 'foo', id: 1, description: 'Bar' }}
-        />
+        <table>
+          <tbody>
+            <UserOrganizationListItem
+              organization={{ name: 'foo', id: 1, description: 'Bar' }}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Td')
         .at(0)
         .text()
     ).toBe('foo');
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Td')
         .at(1)
         .text()
     ).toBe('Bar');

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import UserOrganizationsList from './UserOrganizationsList';
+import UserOrganizationList from './UserOrganizationList';
 
 function UserOrganizations() {
-  return <UserOrganizationsList />;
+  return <UserOrganizationList />;
 }
 export default UserOrganizations;

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}
@@ -145,15 +147,16 @@ function UserRolesList({ user }) {
             isDefault: true,
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: t`ID`,
-            key: 'id',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={role => {
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell>{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Type`}</HeaderCell>
+            <HeaderCell>{t`Role`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(role, index) => {
           return (
             <UserRolesListItem
               key={role.id}
@@ -164,6 +167,7 @@ function UserRolesList({ user }) {
               onSelect={item => {
                 setRoleToDisassociate(item);
               }}
+              rowIndex={index}
             />
           );
         }}

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

awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.test.jsx

@@ -19,63 +19,84 @@ describe('<UserRolesListItem/>', () => {
   };
   test('should mount properly', () => {
     wrapper = mountWithContexts(
-      <UserRolesListItem
-        role={role}
-        detailUrl="/templates/job_template/15/details"
-      />
+      <table>
+        <tbody>
+          <UserRolesListItem
+            role={role}
+            detailUrl="/templates/job_template/15/details"
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.length).toBe(1);
   });
 
   test('should render proper list item data', () => {
     wrapper = mountWithContexts(
-      <UserRolesListItem
-        role={role}
-        detailUrl="/templates/job_template/15/details"
-      />
+      <table>
+        <tbody>
+          <UserRolesListItem
+            role={role}
+            detailUrl="/templates/job_template/15/details"
+          />
+        </tbody>
+      </table>
     );
-    expect(
-      wrapper.find('PFDataListCell[aria-label="Resource name"]').text()
-    ).toBe('template delete project');
-    expect(
-      wrapper.find('PFDataListCell[aria-label="Resource type"]').text()
-    ).toContain('Job Template');
-    expect(
-      wrapper.find('PFDataListCell[aria-label="Resource role"]').text()
-    ).toContain('Admin');
+    const cells = wrapper.find('Td');
+    expect(cells.at(0).text()).toBe('template delete project');
+    expect(cells.at(1).text()).toContain('Job Template');
+    expect(cells.at(2).text()).toContain('Admin');
   });
+
   test('should render deletable chip', () => {
     wrapper = mountWithContexts(
-      <UserRolesListItem
-        role={role}
-        detailUrl="/templates/job_template/15/details"
-      />
+      <table>
+        <tbody>
+          <UserRolesListItem
+            role={role}
+            detailUrl="/templates/job_template/15/details"
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Chip').prop('isReadOnly')).toBe(false);
   });
+
   test('should render read only chip', () => {
     role.summary_fields.user_capabilities.unattach = false;
     wrapper = mountWithContexts(
-      <UserRolesListItem
-        role={role}
-        detailUrl="/templates/job_template/15/details"
-      />
+      <table>
+        <tbody>
+          <UserRolesListItem
+            role={role}
+            detailUrl="/templates/job_template/15/details"
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Chip').prop('isReadOnly')).toBe(true);
   });
+
   test('should display System as name when no resource_name is present in summary_fields', () => {
     wrapper = mountWithContexts(
-      <UserRolesListItem
-        role={{
-          ...role,
-          summary_fields: {
-            user_capabilities: { unattach: false },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <UserRolesListItem
+            role={{
+              ...role,
+              summary_fields: {
+                user_capabilities: { unattach: false },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(
-      wrapper.find('PFDataListCell[aria-label="Resource name"]').text()
+      wrapper
+        .find('Td')
+        .at(0)
+        .text()
     ).toBe('System');
   });
 });

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 => (

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

awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { I18nProvider } from '@lingui/react';
 import { i18n } from '@lingui/core';
 import { en } from 'make-plural/plurals';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
@@ -14,8 +12,8 @@ i18n.activate('en');
 describe('<UserTeamListItem />', () => {
   test('should render item', () => {
     const wrapper = mountWithContexts(
-      <I18nProvider i18n={i18n}>
-        <MemoryRouter initialEntries={['/teams']} initialIndex={0}>
+      <table>
+        <tbody>
           <UserTeamListItem
             team={{
               id: 1,
@@ -32,14 +30,14 @@ describe('<UserTeamListItem />', () => {
             isSelected={false}
             onSelect={() => {}}
           />
-        </MemoryRouter>
-      </I18nProvider>
+        </tbody>
+      </table>
     );
 
-    const cells = wrapper.find('DataListCell');
-    expect(cells).toHaveLength(3);
-    expect(cells.at(0).text()).toEqual('Team 1');
-    expect(cells.at(1).text()).toEqual('Organization The Org');
-    expect(cells.at(2).text()).toEqual('something something team');
+    const cells = wrapper.find('Td');
+    expect(cells).toHaveLength(4);
+    expect(cells.at(1).text()).toEqual('Team 1');
+    expect(cells.at(2).text()).toEqual('The Org');
+    expect(cells.at(3).text()).toEqual('something something team');
   });
 });