convent UsersList to tables

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

@@ -7,7 +7,11 @@ import { UsersAPI } from '../../../api';
 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';
@@ -101,7 +105,7 @@ function UserList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={hasContentLoading}
             items={users}
@@ -124,20 +128,6 @@ function UserList({ i18n }) {
                 key: 'last_name__icontains',
               },
             ]}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Username`),
-                key: 'username',
-              },
-              {
-                name: i18n._(t`First Name`),
-                key: 'first_name',
-              },
-              {
-                name: i18n._(t`Last Name`),
-                key: 'last_name',
-              },
-            ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             renderToolbar={props => (
@@ -167,13 +157,28 @@ function UserList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={o => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="username">
+                  {i18n._(t`Username`)}
+                </HeaderCell>
+                <HeaderCell sortKey="first_name">
+                  {i18n._(t`First Name`)}
+                </HeaderCell>
+                <HeaderCell sortKey="last_name">
+                  {i18n._(t`Last Name`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Role`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(user, index) => (
               <UserListItem
-                key={o.id}
-                user={o}
-                detailUrl={`${match.url}/${o.id}/details`}
-                isSelected={selected.some(row => row.id === o.id)}
-                onSelect={() => handleSelect(o)}
+                key={user.id}
+                user={user}
+                detailUrl={`${match.url}/${user.id}/details`}
+                isSelected={selected.some(row => row.id === user.id)}
+                onSelect={() => handleSelect(user)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/User/UserList/UserList.test.jsx

@@ -129,51 +129,66 @@ describe('UsersList with full permissions', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('DataListCheck[id="select-user-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .props().checked
     ).toBe(false);
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')(
-        true
-      );
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-user-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .props().checked
     ).toBe(true);
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')(
-        false
-      );
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-user-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('DataListCheck').forEach(el => {
+    expect(wrapper.find('.pf-c-table__check input')).toHaveLength(2);
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
 
   test('should call api delete users for each selected user', async () => {
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -185,10 +200,12 @@ describe('UsersList with full permissions', () => {
 
   test('should show error modal when user is not successfully deleted from api', async () => {
     UsersAPI.destroy.mockImplementationOnce(() => Promise.reject(new Error()));
-    // expect(wrapper.debug()).toBe(false);
     expect(wrapper.find('Modal').length).toBe(0);
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check input')
+        .first()
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {

awx/ui_next/src/screens/User/UserList/UserListItem.jsx

@@ -3,24 +3,22 @@ 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,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Label,
-  Tooltip,
-} from '@patternfly/react-core';
-
+import { Button, Label } 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 { User } from '../../../types';
 
-function UserListItem({ user, isSelected, onSelect, detailUrl, i18n }) {
+function UserListItem({
+  user,
+  isSelected,
+  onSelect,
+  detailUrl,
+  rowIndex,
+  i18n,
+}) {
   const labelId = `check-action-${user.id}`;
 
   let user_type;
@@ -36,84 +34,64 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, i18n }) {
   const socialAuthUser = user.auth.length > 0;
 
   return (
-    <DataListItem key={user.id} aria-labelledby={labelId} id={`${user.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-user-${user.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="username" aria-label={i18n._(t`username`)}>
-              <span id={labelId}>
-                <Link to={`${detailUrl}`} id={labelId}>
-                  <b>{user.username}</b>
-                </Link>
-              </span>
-              {ldapUser && (
-                <span css="margin-left: 12px">
-                  <Label aria-label={i18n._(t`ldap user`)}>
-                    {i18n._(t`LDAP`)}
-                  </Label>
-                </span>
-              )}
-              {socialAuthUser && (
-                <span css="margin-left: 12px">
-                  <Label aria-label={i18n._(t`social login`)}>
-                    {i18n._(t`SOCIAL`)}
-                  </Label>
-                </span>
-              )}
-            </DataListCell>,
-            <DataListCell
-              key="first-name"
-              aria-label={i18n._(t`user first name`)}
-            >
-              {user.first_name && (
-                <Fragment>
-                  <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
-                  {user.first_name}
-                </Fragment>
-              )}
-            </DataListCell>,
-            <DataListCell
-              key="last-name"
-              aria-label={i18n._(t`user last name`)}
-            >
-              {user.last_name && (
-                <Fragment>
-                  <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
-                  {user.last_name}
-                </Fragment>
-              )}
-            </DataListCell>,
-            <DataListCell key="user-type" aria-label={i18n._(t`user type`)}>
-              {user_type}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`user-row-${user.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Username`)}>
+        <Link to={`${detailUrl}`} id={labelId}>
+          <b>{user.username}</b>
+        </Link>
+        {ldapUser && (
+          <span css="margin-left: 12px">
+            <Label aria-label={i18n._(t`ldap user`)}>{i18n._(t`LDAP`)}</Label>
+          </span>
+        )}
+        {socialAuthUser && (
+          <span css="margin-left: 12px">
+            <Label aria-label={i18n._(t`social login`)}>
+              {i18n._(t`SOCIAL`)}
+            </Label>
+          </span>
+        )}
+      </Td>
+      <Td dataLabel={i18n._(t`First Name`)}>
+        {user.first_name && (
+          <Fragment>
+            <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
+            {user.first_name}
+          </Fragment>
+        )}
+      </Td>
+      <Td dataLabel={i18n._(t`Last Name`)}>
+        {user.last_name && (
+          <Fragment>
+            <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
+            {user.last_name}
+          </Fragment>
+        )}
+      </Td>
+      <Td dataLabel={i18n._(t`Role`)}>{user_type}</Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={user.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit User`)}
         >
-          {user.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit User`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit User`)}
-                variant="plain"
-                component={Link}
-                to={`/users/${user.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit User`)}
+            variant="plain"
+            component={Link}
+            to={`/users/${user.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/User/UserList/UserListItem.test.jsx

@@ -18,12 +18,16 @@ describe('UserListItem with full permissions', () => {
     wrapper = mountWithContexts(
       <I18nProvider>
         <MemoryRouter initialEntries={['/users']} initialIndex={0}>
-          <UserListItem
-            user={mockDetails}
-            detailUrl="/user/1"
-            isSelected
-            onSelect={() => {}}
-          />
+          <table>
+            <tbody>
+              <UserListItem
+                user={mockDetails}
+                detailUrl="/user/1"
+                isSelected
+                onSelect={() => {}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </I18nProvider>
     );
@@ -36,9 +40,9 @@ describe('UserListItem with full permissions', () => {
   });
 
   test('should display user data', () => {
-    expect(
-      wrapper.find('DataListCell[aria-label="user type"]').prop('children')
-    ).toEqual('System Administrator');
+    expect(wrapper.find('td[data-label="Role"]').prop('children')).toEqual(
+      'System Administrator'
+    );
     expect(
       wrapper.find('Label[aria-label="social login"]').prop('children')
     ).toEqual('SOCIAL');
@@ -50,19 +54,23 @@ describe('UserListItem without full permissions', () => {
     wrapper = mountWithContexts(
       <I18nProvider>
         <MemoryRouter initialEntries={['/users']} initialIndex={0}>
-          <UserListItem
-            user={{
-              ...mockDetails,
-              summary_fields: {
-                user_capabilities: {
-                  edit: false,
-                },
-              },
-            }}
-            detailUrl="/user/1"
-            isSelected
-            onSelect={() => {}}
-          />
+          <table>
+            <tbody>
+              <UserListItem
+                user={{
+                  ...mockDetails,
+                  summary_fields: {
+                    user_capabilities: {
+                      edit: false,
+                    },
+                  },
+                }}
+                detailUrl="/user/1"
+                isSelected
+                onSelect={() => {}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </I18nProvider>
     );