diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx index eb50309366..fedd8bdf23 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx @@ -3,7 +3,10 @@ import { useLocation } from 'react-router-dom'; import { t } from '@lingui/macro'; import DataListToolbar from '../../../components/DataListToolbar'; -import PaginatedDataList from '../../../components/PaginatedDataList'; +import PaginatedTable, { + HeaderRow, + HeaderCell, +} from '../../../components/PaginatedTable'; import SmartInventoryHostListItem from './SmartInventoryHostListItem'; import useRequest from '../../../util/useRequest'; import useSelected from '../../../util/useSelected'; @@ -44,9 +47,13 @@ function SmartInventoryHostList({ inventory }) { } ); - const { selected, isAllSelected, handleSelect, setSelected } = useSelected( - hosts - ); + const { + selected, + isAllSelected, + handleSelect, + clearSelected, + selectAll, + } = useSelected(hosts); useEffect(() => { fetchHosts(); @@ -54,14 +61,14 @@ function SmartInventoryHostList({ inventory }) { return ( <> - ( - setSelected(isSelected ? [...hosts] : []) - } + onSelectAll={selectAll} qsConfig={QS_CONFIG} additionalControls={ inventory?.summary_fields?.user_capabilities?.adhoc @@ -105,13 +104,21 @@ function SmartInventoryHostList({ inventory }) { } /> )} - renderItem={host => ( + headerRow={ + + {t`Name`} + {t`Recent jobs`} + {t`Inventory`} + + } + renderRow={(host, index) => ( row.id === host.id)} onSelect={() => handleSelect(host)} + rowIndex={index} /> )} /> diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx index d416529513..fe9dfa022b 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx @@ -50,18 +50,19 @@ describe('', () => { }); test('should select and deselect all items', async () => { + expect.assertions(6); act(() => { wrapper.find('DataListToolbar').invoke('onSelectAll')(true); }); wrapper.update(); - wrapper.find('DataListCheck').forEach(el => { + wrapper.find('.pf-c-table__check input').forEach(el => { expect(el.props().checked).toEqual(true); }); act(() => { wrapper.find('DataListToolbar').invoke('onSelectAll')(false); }); wrapper.update(); - wrapper.find('DataListCheck').forEach(el => { + wrapper.find('.pf-c-table__check input').forEach(el => { expect(el.props().checked).toEqual(false); }); }); diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.jsx index 66ce6aeefd..b8eba26d4f 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.jsx @@ -5,57 +5,45 @@ import { string, bool, func } from 'prop-types'; import { t } from '@lingui/macro'; import 'styled-components/macro'; -import { - DataListCheck, - DataListItem, - DataListItemCells, - DataListItemRow, -} from '@patternfly/react-core'; -import DataListCell from '../../../components/DataListCell'; +import { Tr, Td } from '@patternfly/react-table'; import Sparkline from '../../../components/Sparkline'; import { Host } from '../../../types'; -function SmartInventoryHostListItem({ detailUrl, host, isSelected, onSelect }) { +function SmartInventoryHostListItem({ + detailUrl, + host, + isSelected, + onSelect, + rowIndex, +}) { const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({ ...job, type: 'job', })); - const labelId = `check-action-${host.id}`; - return ( - - - - - - {host.name} - - , - - - , - - <> - {t`Inventory`} - - {host.summary_fields.inventory.name} - - - , - ]} - /> - - + + + + {host.name} + + + + + + + {host.summary_fields.inventory.name} + + + ); } diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.jsx index 9a33460fcb..6c525d13d9 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.jsx @@ -24,12 +24,16 @@ describe('', () => { beforeEach(() => { wrapper = mountWithContexts( - {}} - /> + + + {}} + /> + +
); }); @@ -38,10 +42,10 @@ describe('', () => { }); test('should render expected row cells', () => { - const cells = wrapper.find('DataListCell'); - expect(cells).toHaveLength(3); - expect(cells.at(0).text()).toEqual('Host Two'); - expect(cells.at(1).find('Sparkline').length).toEqual(1); - expect(cells.at(2).text()).toContain('Inv 1'); + const cells = wrapper.find('Td'); + expect(cells).toHaveLength(4); + expect(cells.at(1).text()).toEqual('Host Two'); + expect(cells.at(2).find('Sparkline').length).toEqual(1); + expect(cells.at(3).text()).toEqual('Inv 1'); }); }); diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx index 7ab2a0ef4d..63f1fa241a 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx @@ -7,7 +7,10 @@ import { Card } from '@patternfly/react-core'; import { OrganizationsAPI } from '../../../api'; import { getQSConfig, parseQueryString } from '../../../util/qs'; import useRequest from '../../../util/useRequest'; -import PaginatedDataList from '../../../components/PaginatedDataList'; +import PaginatedTable, { + HeaderRow, + HeaderCell, +} from '../../../components/PaginatedTable'; import DatalistToolbar from '../../../components/DataListToolbar'; import OrganizationExecEnvListItem from './OrganizationExecEnvListItem'; @@ -69,7 +72,7 @@ function OrganizationExecEnvList({ organization }) { return ( <> - ( )} - renderItem={executionEnvironment => ( + headerRow={ + + {t`Name`} + {t`Image`} + + } + renderRow={(executionEnvironment, index) => ( )} /> diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx index 02a630cf83..11f25e6b92 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx @@ -3,42 +3,18 @@ import { string } from 'prop-types'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; -import { - DataListItem, - DataListItemRow, - DataListItemCells, -} from '@patternfly/react-core'; +import { Tr, Td } from '@patternfly/react-table'; -import DataListCell from '../../../components/DataListCell'; import { ExecutionEnvironment } from '../../../types'; function OrganizationExecEnvListItem({ executionEnvironment, detailUrl }) { - const labelId = `check-action-${executionEnvironment.id}`; - return ( - - - - - {executionEnvironment.name} - - , - - {executionEnvironment.image} - , - ]} - /> - - + + + {executionEnvironment.name} + + {executionEnvironment.image} + ); } diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx index 29181f4ec3..da8a548d30 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx @@ -19,10 +19,14 @@ describe('', () => { test('should mount successfully', async () => { await act(async () => { wrapper = mountWithContexts( - + + + + +
); }); expect(wrapper.find('OrganizationExecEnvListItem').length).toBe(1); @@ -31,15 +35,20 @@ describe('', () => { test('should render the proper data', async () => { await act(async () => { wrapper = mountWithContexts( - + + + + +
); }); expect( wrapper - .find('DataListCell[aria-label="Execution environment image"]') + .find('Td') + .at(1) .text() ).toBe(executionEnvironment.image); }); diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.jsx index 22a3f145b6..d323811309 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.jsx @@ -4,7 +4,10 @@ import { useLocation } from 'react-router-dom'; import { t } from '@lingui/macro'; import { OrganizationsAPI } from '../../../api'; -import PaginatedDataList from '../../../components/PaginatedDataList'; +import PaginatedTable, { + HeaderRow, + HeaderCell, +} from '../../../components/PaginatedTable'; import { getQSConfig, parseQueryString } from '../../../util/qs'; import useRequest from '../../../util/useRequest'; import OrganizationTeamListItem from './OrganizationTeamListItem'; @@ -54,7 +57,7 @@ function OrganizationTeamList({ id }) { }, [fetchTeams]); return ( - ( + headerRow={ + + {t`Name`} + {t`Actions`} + + } + renderRow={item => ( ', () => { }); }); - test('should pass fetched teams to PaginatedDatalist', async () => { + test('should pass fetched teams to PaginatedTable', async () => { + // expect.assertions(7); let wrapper; await act(async () => { wrapper = mountWithContexts( @@ -103,10 +104,8 @@ describe('', () => { await sleep(0); wrapper.update(); - const list = wrapper.find('PaginatedDataList'); - list.find('DataListCell').forEach((el, index) => { - expect(el.text()).toBe(listData.data.results[index].name); - }); + const list = wrapper.find('PaginatedTable'); + expect(list.prop('items')).toEqual(listData.data.results); expect(list.prop('itemCount')).toEqual(listData.data.count); expect(list.prop('qsConfig')).toEqual({ namespace: 'team', diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.jsx index 2009e33794..38429c271b 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.jsx @@ -1,58 +1,37 @@ import React from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; -import { - Button, - DataListAction, - DataListItem, - DataListItemRow, - DataListItemCells, - Tooltip, -} from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; +import { Tr, Td } from '@patternfly/react-table'; import { t } from '@lingui/macro'; import { PencilAltIcon } from '@patternfly/react-icons'; -import DataListCell from '../../../components/DataListCell'; +import { ActionsTd, ActionItem } from '../../../components/PaginatedTable'; function OrganizationTeamListItem({ team, detailUrl }) { - const labelId = `check-action-${team.id}`; - return ( - - - - - - {team.name} - - - , - ]} - /> - + + {team.name} + + + - {team.summary_fields.user_capabilities.edit && ( - - - - )} - - - + + + + ); } diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrgnizationTeamListItem.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrgnizationTeamListItem.test.jsx index 8758ebf946..c3f7fdc7ba 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrgnizationTeamListItem.test.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrgnizationTeamListItem.test.jsx @@ -17,7 +17,11 @@ describe('', () => { test('should mount properly', async () => { await act(async () => { wrapper = mountWithContexts( - + + + + +
); }); expect(wrapper.find('OrganizationTeamListItem').length).toBe(1); @@ -26,10 +30,19 @@ describe('', () => { test('should render proper data', async () => { await act(async () => { wrapper = mountWithContexts( - + + + + +
); }); - expect(wrapper.find(`b[aria-label="team name"]`).text()).toBe('one'); + expect( + wrapper + .find(`Td`) + .first() + .text() + ).toBe('one'); expect(wrapper.find('PencilAltIcon').length).toBe(1); }); @@ -37,7 +50,11 @@ describe('', () => { team.summary_fields.user_capabilities.edit = false; await act(async () => { wrapper = mountWithContexts( - + + + + +
); }); expect(wrapper.find('PencilAltIcon').length).toBe(0);