External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-10 19:07:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

convert InventoryHostGroups list to table

Browse Source
This commit is contained in:
Keith J. Grant
2021-05-03 16:00:09 -07:00
parent 7b60733da0
commit e2c8519b77
4 changed files with 104 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.jsx
View File

@@ -1,66 +1,55 @@
import React from 'react'; import React from 'react';
import { bool, func, number, oneOfType, string } from 'prop-types'; import { bool, func, number, oneOfType, string } from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core';
import { import { Tr, Td } from '@patternfly/react-table';
Button,
DataListAction,
DataListCheck,
DataListItem,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '../../../components/DataListCell'; import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import { Group } from '../../../types'; import { Group } from '../../../types';
function InventoryHostGroupItem({ group, inventoryId, isSelected, onSelect }) { function InventoryHostGroupItem({
group,
inventoryId,
isSelected,
onSelect,
rowIndex,
}) {
const labelId = `check-action-${group.id}`; const labelId = `check-action-${group.id}`;
const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`; const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`; const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
return ( return (
<DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}> <Tr id={`inventory-host-group-row-${group.id}`}>
<DataListItemRow> <Td
<DataListCheck select={{
aria-labelledby={labelId} rowIndex,
id={`select-group-${group.id}`} isSelected,
checked={isSelected} onSelect,
onChange={onSelect} }}
/> />
<DataListItemCells <Td id={labelId} dataLabel={t`Name`}>
dataListCells={[ <Link to={`${detailUrl}`} id={labelId}>
<DataListCell key="name"> {group.name}
<Link to={`${detailUrl}`} id={labelId}> </Link>
<b>{group.name}</b> </Td>
</Link> <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
</DataListCell>, <ActionItem
]} visible={group.summary_fields.user_capabilities.edit}
/> tooltip={t`Edit group`}
<DataListAction
aria-label={t`actions`}
aria-labelledby={labelId}
id={labelId}
> >
{group.summary_fields.user_capabilities.edit && ( <Button
<Tooltip content={t`Edit Group`} position="top"> ouiaId={`${group.id}-edit-button`}
<Button variant="plain"
ouiaId={`${group.id}-edit-button`} component={Link}
variant="plain" to={editUrl}
component={Link} >
to={editUrl} <PencilAltIcon />
> </Button>
<PencilAltIcon /> </ActionItem>
</Button> </ActionsTd>
</Tooltip> </Tr>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
); );
} }

32
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.test.jsx
View File

@@ -18,12 +18,16 @@ describe('<InventoryHostGroupItem />', () => {
beforeEach(() => { beforeEach(() => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<InventoryHostGroupItem <table>
group={mockGroup} <tbody>
inventoryId={1} <InventoryHostGroupItem
isSelected={false} group={mockGroup}
onSelect={() => {}} inventoryId={1}
/> isSelected={false}
onSelect={() => {}}
/>
</tbody>
</table>
); );
}); });
@@ -40,12 +44,16 @@ describe('<InventoryHostGroupItem />', () => {
copyMockGroup.summary_fields.user_capabilities.edit = false; copyMockGroup.summary_fields.user_capabilities.edit = false;
wrapper = mountWithContexts( wrapper = mountWithContexts(
<InventoryHostGroupItem <table>
group={copyMockGroup} <tbody>
inventoryId={1} <InventoryHostGroupItem
isSelected={false} group={copyMockGroup}
onSelect={() => {}} inventoryId={1}
/> isSelected={false}
onSelect={() => {}}
/>
</tbody>
</table>
); );
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy(); expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
}); });

25
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
View File

@@ -12,9 +12,11 @@ import { HostsAPI, InventoriesAPI } from '../../../api';
import DataListToolbar from '../../../components/DataListToolbar'; import DataListToolbar from '../../../components/DataListToolbar';
import AlertModal from '../../../components/AlertModal'; import AlertModal from '../../../components/AlertModal';
import ErrorDetail from '../../../components/ErrorDetail'; import ErrorDetail from '../../../components/ErrorDetail';
import PaginatedDataList, { import PaginatedTable, {
ToolbarAddButton, HeaderRow,
} from '../../../components/PaginatedDataList'; HeaderCell,
} from '../../../components/PaginatedTable';
import { ToolbarAddButton } from '../../../components/PaginatedDataList';
import AssociateModal from '../../../components/AssociateModal'; import AssociateModal from '../../../components/AssociateModal';
import DisassociateButton from '../../../components/DisassociateButton'; import DisassociateButton from '../../../components/DisassociateButton';
import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands'; import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
@@ -146,7 +148,7 @@ function InventoryHostGroupsList() {
return ( return (
<> <>
<PaginatedDataList <PaginatedTable
contentError={contentError} contentError={contentError}
hasContentLoading={ hasContentLoading={
isLoading || isDisassociateLoading || isAdHocLaunchLoading isLoading || isDisassociateLoading || isAdHocLaunchLoading
@@ -170,21 +172,22 @@ function InventoryHostGroupsList() {
key: 'modified_by__username__icontains', key: 'modified_by__username__icontains',
}, },
]} ]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys} toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys} toolbarRelatedSearchableKeys={relatedSearchableKeys}
renderItem={item => ( headerRow={
<HeaderRow qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
<HeaderCell>{t`Actions`}</HeaderCell>
</HeaderRow>
}
renderRow={(item, index) => (
<InventoryHostGroupItem <InventoryHostGroupItem
key={item.id} key={item.id}
group={item} group={item}
inventoryId={item.summary_fields.inventory.id} inventoryId={item.summary_fields.inventory.id}
isSelected={selected.some(row => row.id === item.id)} isSelected={selected.some(row => row.id === item.id)}
onSelect={() => handleSelect(item)} onSelect={() => handleSelect(item)}
rowIndex={index}
/> />
)} )}
renderToolbar={props => ( renderToolbar={props => (

47
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.test.jsx
View File

@@ -114,46 +114,63 @@ describe('<InventoryHostGroupsList />', () => {
test('should check and uncheck the row item', async () => { test('should check and uncheck the row item', async () => {
expect( expect(
wrapper.find('DataListCheck[id="select-group-1"]').props().checked wrapper
.find('.pf-c-table__check')
.first()
.find('input')
.props().checked
).toBe(false); ).toBe(false);
await act(async () => { await act(async () => {
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')( wrapper
true .find('.pf-c-table__check')
); .first()
.find('input')
.invoke('onChange')(true);
}); });
wrapper.update(); wrapper.update();
expect( expect(
wrapper.find('DataListCheck[id="select-group-1"]').props().checked wrapper
.find('.pf-c-table__check')
.first()
.find('input')
.props().checked
).toBe(true); ).toBe(true);
await act(async () => { await act(async () => {
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')( wrapper
false .find('.pf-c-table__check')
); .first()
.find('input')
.invoke('onChange')(false);
}); });
wrapper.update(); wrapper.update();
expect( expect(
wrapper.find('DataListCheck[id="select-group-1"]').props().checked wrapper
.find('.pf-c-table__check')
.first()
.find('input')
.props().checked
).toBe(false); ).toBe(false);
}); });
test('should check all row items when select all is checked', async () => { test('should check all row items when select all is checked', async () => {
wrapper.find('DataListCheck').forEach(el => { expect.assertions(9);
wrapper.find('.pf-c-table__check input').forEach(el => {
expect(el.props().checked).toBe(false); expect(el.props().checked).toBe(false);
}); });
await act(async () => { await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true); wrapper.find('Checkbox#select-all').invoke('onChange')(true);
}); });
wrapper.update(); wrapper.update();
wrapper.find('DataListCheck').forEach(el => { wrapper.find('.pf-c-table__check input').forEach(el => {
expect(el.props().checked).toBe(true); expect(el.props().checked).toBe(true);
}); });
await act(async () => { await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(false); wrapper.find('Checkbox#select-all').invoke('onChange')(false);
}); });
wrapper.update(); wrapper.update();
wrapper.find('DataListCheck').forEach(el => { wrapper.find('.pf-c-table__check input').forEach(el => {
expect(el.props().checked).toBe(false); expect(el.props().checked).toBe(false);
}); });
}); });
@@ -230,15 +247,15 @@ describe('<InventoryHostGroupsList />', () => {
test('expected api calls are made for multi-disassociation', async () => { test('expected api calls are made for multi-disassociation', async () => {
expect(HostsAPI.disassociateGroup).toHaveBeenCalledTimes(0); expect(HostsAPI.disassociateGroup).toHaveBeenCalledTimes(0);
expect(HostsAPI.readAllGroups).toHaveBeenCalledTimes(1); expect(HostsAPI.readAllGroups).toHaveBeenCalledTimes(1);
expect(wrapper.find('DataListCheck').length).toBe(3); expect(wrapper.find('.pf-c-table__check').length).toBe(3);
wrapper.find('DataListCheck').forEach(el => { wrapper.find('.pf-c-table__check input').forEach(el => {
expect(el.props().checked).toBe(false); expect(el.props().checked).toBe(false);
}); });
await act(async () => { await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true); wrapper.find('Checkbox#select-all').invoke('onChange')(true);
}); });
wrapper.update(); wrapper.update();
wrapper.find('DataListCheck').forEach(el => { wrapper.find('.pf-c-table__check input').forEach(el => {
expect(el.props().checked).toBe(true); expect(el.props().checked).toBe(true);
}); });
wrapper.find('button[aria-label="Disassociate"]').simulate('click'); wrapper.find('button[aria-label="Disassociate"]').simulate('click');