mirror of
https://github.com/ansible/awx.git
synced 2026-01-16 04:10:44 -03:30
Merge pull request #10040 from keithjgrant/6189-misc-tables
Convert Inventory sub-lists to tables SUMMARY Converts Inventory Access, Hosts, Groups, and Sources lists to tables Addresses #6189 ISSUE TYPE Feature Pull Request COMPONENT NAME UI Reviewed-by: Kersom <None> Reviewed-by: Marliana Lara <marliana.lara@gmail.com> Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
commit
25137b40d3
@ -30,9 +30,11 @@ export default function ActionsTd({ children, gridColumns, ...props }) {
|
||||
>
|
||||
<ActionsGrid numActions={numActions} gridColumns={gridColumns}>
|
||||
{React.Children.map(children, (child, i) =>
|
||||
React.cloneElement(child, {
|
||||
column: i + 1,
|
||||
})
|
||||
child
|
||||
? React.cloneElement(child, {
|
||||
column: i + 1,
|
||||
})
|
||||
: null
|
||||
)}
|
||||
</ActionsGrid>
|
||||
</Td>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { RolesAPI, TeamsAPI, UsersAPI } from '../../api';
|
||||
import AddResourceRole from '../AddRole/AddResourceRole';
|
||||
import AlertModal from '../AlertModal';
|
||||
import DataListToolbar from '../DataListToolbar';
|
||||
import PaginatedDataList, { ToolbarAddButton } from '../PaginatedDataList';
|
||||
import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
|
||||
import { ToolbarAddButton } from '../PaginatedDataList';
|
||||
import { getQSConfig, parseQueryString } from '../../util/qs';
|
||||
import useRequest, { useDeleteItems } from '../../util/useRequest';
|
||||
import DeleteRoleConfirmationModal from './DeleteRoleConfirmationModal';
|
||||
@ -148,7 +148,7 @@ function ResourceAccessList({ apiModel, resource }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
error={contentError}
|
||||
hasContentLoading={isLoading || isDeleteLoading}
|
||||
items={accessRecords}
|
||||
@ -156,20 +156,6 @@ function ResourceAccessList({ apiModel, resource }) {
|
||||
pluralizedItemName={t`Roles`}
|
||||
qsConfig={QS_CONFIG}
|
||||
toolbarSearchColumns={toolbarSearchColumns}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: t`Username`,
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
name: t`First Name`,
|
||||
key: 'first_name',
|
||||
},
|
||||
{
|
||||
name: t`Last Name`,
|
||||
key: 'last_name',
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
renderToolbar={props => (
|
||||
@ -188,7 +174,15 @@ function ResourceAccessList({ apiModel, resource }) {
|
||||
}
|
||||
/>
|
||||
)}
|
||||
renderItem={accessRecord => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
|
||||
<HeaderCell sortKey="username">{t`Username`}</HeaderCell>
|
||||
<HeaderCell sortKey="first_name">{t`First name`}</HeaderCell>
|
||||
<HeaderCell sortKey="last_name">{t`Last name`}</HeaderCell>
|
||||
<HeaderCell>{t`Roles`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(accessRecord, index) => (
|
||||
<ResourceAccessListItem
|
||||
key={accessRecord.id}
|
||||
accessRecord={accessRecord}
|
||||
@ -197,6 +191,7 @@ function ResourceAccessList({ apiModel, resource }) {
|
||||
setDeletionRole(role);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -137,10 +137,6 @@ describe('<ResourceAccessList />', () => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('should fetch and display access records on mount', async () => {
|
||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||
expect(OrganizationsAPI.readAccessList).toHaveBeenCalled();
|
||||
@ -203,7 +199,7 @@ describe('<ResourceAccessList />', () => {
|
||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||
|
||||
expect(
|
||||
wrapper.find('PaginatedDataList').prop('toolbarSearchColumns')
|
||||
wrapper.find('PaginatedTable').prop('toolbarSearchColumns')
|
||||
).toStrictEqual([
|
||||
{ isDefault: true, key: 'username__icontains', name: 'Username' },
|
||||
{ key: 'first_name__icontains', name: 'First Name' },
|
||||
|
||||
@ -1,29 +1,15 @@
|
||||
import 'styled-components/macro';
|
||||
import React from 'react';
|
||||
import { func } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Chip,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells as PFDataListItemCells,
|
||||
Text,
|
||||
TextContent,
|
||||
TextVariants,
|
||||
} from '@patternfly/react-core';
|
||||
import { Chip } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import DataListCell from '../DataListCell';
|
||||
|
||||
import ChipGroup from '../ChipGroup';
|
||||
import { DetailList, Detail } from '../DetailList';
|
||||
import { AccessRecord } from '../../types';
|
||||
|
||||
const DataListItemCells = styled(PFDataListItemCells)`
|
||||
align-items: start;
|
||||
`;
|
||||
|
||||
function ResourceAccessListItem({ accessRecord, onRoleDelete }) {
|
||||
ResourceAccessListItem.propTypes = {
|
||||
accessRecord: AccessRecord.isRequired,
|
||||
@ -67,70 +53,43 @@ function ResourceAccessListItem({ accessRecord, onRoleDelete }) {
|
||||
const [teamRoles, userRoles] = getRoleLists();
|
||||
|
||||
return (
|
||||
<DataListItem
|
||||
aria-labelledby="access-list-item"
|
||||
key={accessRecord.id}
|
||||
id={`${accessRecord.id}`}
|
||||
>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="name">
|
||||
{accessRecord.username && (
|
||||
<TextContent>
|
||||
{accessRecord.id ? (
|
||||
<Text component={TextVariants.h6}>
|
||||
<Link
|
||||
to={{ pathname: `/users/${accessRecord.id}/details` }}
|
||||
css="font-weight: bold"
|
||||
>
|
||||
{accessRecord.username}
|
||||
</Link>
|
||||
</Text>
|
||||
) : (
|
||||
<Text component={TextVariants.h6} css="font-weight: bold">
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
)}
|
||||
</TextContent>
|
||||
)}
|
||||
{accessRecord.first_name || accessRecord.last_name ? (
|
||||
<DetailList stacked>
|
||||
<Detail
|
||||
label={t`Name`}
|
||||
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
|
||||
/>
|
||||
</DetailList>
|
||||
) : null}
|
||||
</DataListCell>,
|
||||
<DataListCell key="roles">
|
||||
<DetailList stacked>
|
||||
{userRoles.length > 0 && (
|
||||
<Detail
|
||||
label={t`User Roles`}
|
||||
value={
|
||||
<ChipGroup numChips={5} totalChips={userRoles.length}>
|
||||
{userRoles.map(renderChip)}
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<Detail
|
||||
label={t`Team Roles`}
|
||||
value={
|
||||
<ChipGroup numChips={5} totalChips={teamRoles.length}>
|
||||
{teamRoles.map(renderChip)}
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<Tr id={`access-item-row-${accessRecord.id}`}>
|
||||
<Td id={`access-record-${accessRecord.id}`} dataLabel={t`Name`}>
|
||||
{accessRecord.id ? (
|
||||
<Link to={{ pathname: `/users/${accessRecord.id}/details` }}>
|
||||
{accessRecord.username}
|
||||
</Link>
|
||||
) : (
|
||||
accessRecord.username
|
||||
)}
|
||||
</Td>
|
||||
<Td dataLabel={t`First name`}>{accessRecord.first_name}</Td>
|
||||
<Td dataLabel={t`Last name`}>{accessRecord.first_name}</Td>
|
||||
<Td dataLabel={t`Roles`}>
|
||||
<DetailList stacked>
|
||||
{userRoles.length > 0 && (
|
||||
<Detail
|
||||
label={t`User Roles`}
|
||||
value={
|
||||
<ChipGroup numChips={5} totalChips={userRoles.length}>
|
||||
{userRoles.map(renderChip)}
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<Detail
|
||||
label={t`Team Roles`}
|
||||
value={
|
||||
<ChipGroup numChips={5} totalChips={teamRoles.length}>
|
||||
{teamRoles.map(renderChip)}
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -38,10 +38,14 @@ describe('<ResourceAccessListItem />', () => {
|
||||
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<ResourceAccessListItem
|
||||
accessRecord={accessRecord}
|
||||
onRoleDelete={() => {}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ResourceAccessListItem
|
||||
accessRecord={accessRecord}
|
||||
onRoleDelete={() => {}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ function HostListItem({ host, isSelected, onSelect, detailUrl, rowIndex }) {
|
||||
return (
|
||||
<Tr id={`host-row-${host.id}`}>
|
||||
<Td
|
||||
data-cy={labelId}
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
|
||||
@ -1,67 +1,58 @@
|
||||
import React from 'react';
|
||||
import { bool, func, number, oneOfType, string } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
|
||||
import {
|
||||
Button,
|
||||
DataListAction,
|
||||
DataListCheck,
|
||||
DataListItem,
|
||||
DataListItemCells,
|
||||
DataListItemRow,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Button } 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 { Group } from '../../../types';
|
||||
|
||||
function InventoryGroupItem({ group, inventoryId, isSelected, onSelect }) {
|
||||
function InventoryGroupItem({
|
||||
group,
|
||||
inventoryId,
|
||||
isSelected,
|
||||
onSelect,
|
||||
rowIndex,
|
||||
}) {
|
||||
const labelId = `check-action-${group.id}`;
|
||||
const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
|
||||
const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
|
||||
|
||||
return (
|
||||
<DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
aria-labelledby={labelId}
|
||||
id={`select-group-${group.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="name">
|
||||
<Link to={`${detailUrl}`} id={labelId}>
|
||||
<b>{group.name}</b>
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label={t`actions`}
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
<Tr id={`group-row-${group.id}`}>
|
||||
<Td
|
||||
data-cy={labelId}
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`} id={labelId}>
|
||||
<b>{group.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
|
||||
<ActionItem
|
||||
visible={group.summary_fields.user_capabilities.edit}
|
||||
tooltip={t`Edit group`}
|
||||
>
|
||||
{group.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={t`Edit Group`} position="top">
|
||||
<Button
|
||||
ouiaId={`${group.id}-edit-button`}
|
||||
aria-label={t`Edit Group`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={editUrl}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<Button
|
||||
ouiaId={`${group.id}-edit-button`}
|
||||
aria-label={t`Edit Group`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={editUrl}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -18,12 +18,16 @@ describe('<InventoryGroupItem />', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryGroupItem
|
||||
group={mockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryGroupItem
|
||||
group={mockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
|
||||
@ -40,12 +44,16 @@ describe('<InventoryGroupItem />', () => {
|
||||
copyMockGroup.summary_fields.user_capabilities.edit = false;
|
||||
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryGroupItem
|
||||
group={copyMockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryGroupItem
|
||||
group={copyMockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { Tooltip } from '@patternfly/react-core';
|
||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||
@ -8,9 +7,11 @@ import useSelected from '../../../util/useSelected';
|
||||
import useRequest from '../../../util/useRequest';
|
||||
import { InventoriesAPI } from '../../../api';
|
||||
import DataListToolbar from '../../../components/DataListToolbar';
|
||||
import PaginatedDataList, {
|
||||
ToolbarAddButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
import PaginatedTable, {
|
||||
HeaderRow,
|
||||
HeaderCell,
|
||||
} from '../../../components/PaginatedTable';
|
||||
import { ToolbarAddButton } from '../../../components/PaginatedDataList';
|
||||
|
||||
import InventoryGroupItem from './InventoryGroupItem';
|
||||
import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
|
||||
@ -104,7 +105,7 @@ function InventoryGroupsList() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading || isAdHocLaunchLoading}
|
||||
items={groups}
|
||||
@ -135,21 +136,22 @@ function InventoryGroupsList() {
|
||||
key: 'modified_by__username__icontains',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: t`Name`,
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
renderItem={item => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell>{t`Actions`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(item, index) => (
|
||||
<InventoryGroupItem
|
||||
key={item.id}
|
||||
group={item}
|
||||
inventoryId={inventoryId}
|
||||
isSelected={selected.some(row => row.id === item.id)}
|
||||
onSelect={() => handleSelect(item)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
renderToolbar={props => (
|
||||
|
||||
@ -93,15 +93,12 @@ describe('<InventoryGroupsList />', () => {
|
||||
});
|
||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
expect(wrapper.find('InventoryGroupsList').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should fetch groups from api and render them in the list', async () => {
|
||||
expect(InventoriesAPI.readGroups).toHaveBeenCalled();
|
||||
expect(wrapper.find('InventoryGroupItem').length).toBe(3);
|
||||
@ -109,52 +106,71 @@ describe('<InventoryGroupsList />', () => {
|
||||
|
||||
test('should check and uncheck the row item', async () => {
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||
true
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||
false
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(false);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
test('should check all row items when select all is checked', async () => {
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(false);
|
||||
expect.assertions(9);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(false);
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(true);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(true);
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(false);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('<InventoryGroupsList/> error handling', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
InventoriesAPI.readGroups.mockResolvedValue({
|
||||
data: {
|
||||
@ -182,10 +198,12 @@ describe('<InventoryGroupsList/> error handling', () => {
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('should show content error when api throws error on initial render', async () => {
|
||||
InventoriesAPI.readGroupsOptions.mockImplementationOnce(() =>
|
||||
Promise.reject(new Error())
|
||||
@ -213,7 +231,11 @@ describe('<InventoryGroupsList/> error handling', () => {
|
||||
waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
|
||||
@ -1,66 +1,56 @@
|
||||
import React from 'react';
|
||||
import { bool, func, number, oneOfType, string } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
|
||||
import {
|
||||
Button,
|
||||
DataListAction,
|
||||
DataListCheck,
|
||||
DataListItem,
|
||||
DataListItemCells,
|
||||
DataListItemRow,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Button } 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 { Group } from '../../../types';
|
||||
|
||||
function InventoryHostGroupItem({ group, inventoryId, isSelected, onSelect }) {
|
||||
function InventoryHostGroupItem({
|
||||
group,
|
||||
inventoryId,
|
||||
isSelected,
|
||||
onSelect,
|
||||
rowIndex,
|
||||
}) {
|
||||
const labelId = `check-action-${group.id}`;
|
||||
const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
|
||||
const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
|
||||
|
||||
return (
|
||||
<DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
aria-labelledby={labelId}
|
||||
id={`select-group-${group.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="name">
|
||||
<Link to={`${detailUrl}`} id={labelId}>
|
||||
<b>{group.name}</b>
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label={t`actions`}
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
<Tr id={`inventory-host-group-row-${group.id}`}>
|
||||
<Td
|
||||
data-cy={labelId}
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`} id={labelId}>
|
||||
{group.name}
|
||||
</Link>
|
||||
</Td>
|
||||
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
|
||||
<ActionItem
|
||||
visible={group.summary_fields.user_capabilities.edit}
|
||||
tooltip={t`Edit group`}
|
||||
>
|
||||
{group.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={t`Edit Group`} position="top">
|
||||
<Button
|
||||
ouiaId={`${group.id}-edit-button`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={editUrl}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<Button
|
||||
ouiaId={`${group.id}-edit-button`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={editUrl}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -18,12 +18,16 @@ describe('<InventoryHostGroupItem />', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostGroupItem
|
||||
group={mockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryHostGroupItem
|
||||
group={mockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
|
||||
@ -40,12 +44,16 @@ describe('<InventoryHostGroupItem />', () => {
|
||||
copyMockGroup.summary_fields.user_capabilities.edit = false;
|
||||
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostGroupItem
|
||||
group={copyMockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryHostGroupItem
|
||||
group={copyMockGroup}
|
||||
inventoryId={1}
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -12,9 +12,11 @@ import { HostsAPI, InventoriesAPI } from '../../../api';
|
||||
import DataListToolbar from '../../../components/DataListToolbar';
|
||||
import AlertModal from '../../../components/AlertModal';
|
||||
import ErrorDetail from '../../../components/ErrorDetail';
|
||||
import PaginatedDataList, {
|
||||
ToolbarAddButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
import PaginatedTable, {
|
||||
HeaderRow,
|
||||
HeaderCell,
|
||||
} from '../../../components/PaginatedTable';
|
||||
import { ToolbarAddButton } from '../../../components/PaginatedDataList';
|
||||
import AssociateModal from '../../../components/AssociateModal';
|
||||
import DisassociateButton from '../../../components/DisassociateButton';
|
||||
import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
|
||||
@ -146,7 +148,7 @@ function InventoryHostGroupsList() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={contentError}
|
||||
hasContentLoading={
|
||||
isLoading || isDisassociateLoading || isAdHocLaunchLoading
|
||||
@ -170,21 +172,22 @@ function InventoryHostGroupsList() {
|
||||
key: 'modified_by__username__icontains',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: t`Name`,
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
renderItem={item => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell>{t`Actions`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(item, index) => (
|
||||
<InventoryHostGroupItem
|
||||
key={item.id}
|
||||
group={item}
|
||||
inventoryId={item.summary_fields.inventory.id}
|
||||
isSelected={selected.some(row => row.id === item.id)}
|
||||
onSelect={() => handleSelect(item)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
renderToolbar={props => (
|
||||
|
||||
@ -114,46 +114,63 @@ describe('<InventoryHostGroupsList />', () => {
|
||||
|
||||
test('should check and uncheck the row item', async () => {
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||
true
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||
false
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(false);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
@ -230,15 +247,15 @@ describe('<InventoryHostGroupsList />', () => {
|
||||
test('expected api calls are made for multi-disassociation', async () => {
|
||||
expect(HostsAPI.disassociateGroup).toHaveBeenCalledTimes(0);
|
||||
expect(HostsAPI.readAllGroups).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.find('DataListCheck').length).toBe(3);
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(wrapper.find('.pf-c-table__check').length).toBe(3);
|
||||
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);
|
||||
});
|
||||
wrapper.find('button[aria-label="Disassociate"]').simulate('click');
|
||||
|
||||
@ -1,84 +1,57 @@
|
||||
import React from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Button,
|
||||
DataListAction as _DataListAction,
|
||||
DataListCheck,
|
||||
DataListItem,
|
||||
DataListItemCells,
|
||||
DataListItemRow,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
import DataListCell from '../../../components/DataListCell';
|
||||
import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
|
||||
|
||||
import HostToggle from '../../../components/HostToggle';
|
||||
import Sparkline from '../../../components/Sparkline';
|
||||
import { Host } from '../../../types';
|
||||
|
||||
const DataListAction = styled(_DataListAction)`
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: min-content 40px;
|
||||
`;
|
||||
|
||||
function InventoryHostItem(props) {
|
||||
const { detailUrl, editUrl, host, isSelected, onSelect } = props;
|
||||
|
||||
const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
|
||||
...job,
|
||||
type: 'job',
|
||||
}));
|
||||
|
||||
function InventoryHostItem({
|
||||
detailUrl,
|
||||
editUrl,
|
||||
host,
|
||||
isSelected,
|
||||
onSelect,
|
||||
rowIndex,
|
||||
}) {
|
||||
const labelId = `check-action-${host.id}`;
|
||||
|
||||
return (
|
||||
<DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-host-${host.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="divider">
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{host.name}</b>
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
<DataListCell key="recentJobs">
|
||||
<Sparkline jobs={recentPlaybookJobs} />
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label={t`actions`}
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
<Tr id={`host-row-${host.id}`}>
|
||||
<Td
|
||||
data-cy={labelId}
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{host.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
|
||||
<HostToggle host={host} />
|
||||
<ActionItem
|
||||
visible={host.summary_fields.user_capabilities?.edit}
|
||||
tooltip={t`Edit host`}
|
||||
>
|
||||
<HostToggle host={host} />
|
||||
{host.summary_fields.user_capabilities?.edit && (
|
||||
<Tooltip content={t`Edit Host`} position="top">
|
||||
<Button
|
||||
ouiaId={`${host.id}-edit-button`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`${editUrl}`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<Button
|
||||
ouiaId={`${host.id}-edit-button`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`${editUrl}`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -31,12 +31,16 @@ describe('<InventoryHostItem />', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostItem
|
||||
isSelected={false}
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={mockHost}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryHostItem
|
||||
isSelected={false}
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={mockHost}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
|
||||
@ -52,12 +56,16 @@ describe('<InventoryHostItem />', () => {
|
||||
const copyMockHost = Object.assign({}, mockHost);
|
||||
copyMockHost.summary_fields.user_capabilities.edit = false;
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostItem
|
||||
isSelected={false}
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={copyMockHost}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventoryHostItem
|
||||
isSelected={false}
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={copyMockHost}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||
import { InventoriesAPI, HostsAPI } from '../../../api';
|
||||
@ -8,7 +7,11 @@ import useRequest, { useDeleteItems } from '../../../util/useRequest';
|
||||
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';
|
||||
@ -105,35 +108,21 @@ function InventoryHostList() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading || isDeleteLoading || isAdHocLaunchLoading}
|
||||
items={hosts}
|
||||
itemCount={hostCount}
|
||||
pluralizedItemName={t`Hosts`}
|
||||
qsConfig={QS_CONFIG}
|
||||
toolbarColumns={[
|
||||
{
|
||||
name: t`Name`,
|
||||
key: 'name',
|
||||
isSortable: true,
|
||||
isSearchable: true,
|
||||
},
|
||||
{
|
||||
name: t`Modified`,
|
||||
key: 'modified',
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
name: t`Created`,
|
||||
key: 'created',
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell>{t`Actions`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
@ -164,14 +153,15 @@ function InventoryHostList() {
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
renderRow={(host, index) => (
|
||||
<InventoryHostItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`/inventories/inventory/${id}/hosts/${o.id}/details`}
|
||||
editUrl={`/inventories/inventory/${id}/hosts/${o.id}/edit`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => handleSelect(o)}
|
||||
key={host.id}
|
||||
host={host}
|
||||
detailUrl={`/inventories/inventory/${id}/hosts/${host.id}/details`}
|
||||
editUrl={`/inventories/inventory/${id}/hosts/${host.id}/edit`}
|
||||
isSelected={selected.some(row => row.id === host.id)}
|
||||
onSelect={() => handleSelect(host)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
|
||||
@ -103,10 +103,6 @@ describe('<InventoryHostList />', () => {
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
expect(wrapper.find('InventoryHostList').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should fetch hosts from api and render them in the list', async () => {
|
||||
expect(InventoriesAPI.readHosts).toHaveBeenCalled();
|
||||
expect(wrapper.find('InventoryHostItem').length).toBe(3);
|
||||
@ -114,49 +110,66 @@ describe('<InventoryHostList />', () => {
|
||||
|
||||
test('should check and uncheck the row item', async () => {
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
|
||||
true
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(true);
|
||||
});
|
||||
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
|
||||
false
|
||||
);
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')(false);
|
||||
});
|
||||
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.props().checked
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
test('should check all row items when select all is checked', async () => {
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(false);
|
||||
expect.assertions(9);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(false);
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(true);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(true);
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.find('DataListCheck').forEach(el => {
|
||||
expect(el.props().checked).toBe(false);
|
||||
wrapper.find('.pf-c-table__check').forEach(el => {
|
||||
expect(el.find('input').props().checked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@ -196,7 +209,11 @@ describe('<InventoryHostList />', () => {
|
||||
|
||||
test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.at(2)
|
||||
.find('input')
|
||||
.invoke('onChange')();
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
|
||||
@ -207,7 +224,11 @@ describe('<InventoryHostList />', () => {
|
||||
test('should call api delete hosts for each selected host', async () => {
|
||||
HostsAPI.destroy = jest.fn();
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
@ -230,7 +251,11 @@ describe('<InventoryHostList />', () => {
|
||||
})
|
||||
);
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
@ -252,7 +277,11 @@ describe('<InventoryHostList />', () => {
|
||||
Promise.reject(new Error())
|
||||
);
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.invoke('onChange')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
|
||||
@ -9,7 +9,11 @@ import useRequest, {
|
||||
} from '../../../util/useRequest';
|
||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||
import { InventoriesAPI, InventorySourcesAPI } from '../../../api';
|
||||
import PaginatedDataList, {
|
||||
import PaginatedTable, {
|
||||
HeaderRow,
|
||||
HeaderCell,
|
||||
} from '../../../components/PaginatedTable';
|
||||
import {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
@ -148,7 +152,7 @@ function InventorySourceList() {
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={fetchError}
|
||||
hasContentLoading={
|
||||
isLoading ||
|
||||
@ -208,21 +212,27 @@ function InventorySourceList() {
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={inventorySource => {
|
||||
let label;
|
||||
sourceChoices.forEach(([scMatch, scLabel]) => {
|
||||
if (inventorySource.source === scMatch) {
|
||||
label = scLabel;
|
||||
}
|
||||
});
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell>{t`Status`}</HeaderCell>
|
||||
<HeaderCell>{t`Type`}</HeaderCell>
|
||||
<HeaderCell>{t`Actions`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(inventorySource, index) => {
|
||||
const label = sourceChoices.find(
|
||||
([scMatch]) => inventorySource.source === scMatch
|
||||
);
|
||||
return (
|
||||
<InventorySourceListItem
|
||||
key={inventorySource.id}
|
||||
source={inventorySource}
|
||||
onSelect={() => handleSelect(inventorySource)}
|
||||
label={label}
|
||||
label={label[1]}
|
||||
detailUrl={`${listUrl}${inventorySource.id}`}
|
||||
isSelected={selected.some(row => row.id === inventorySource.id)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -7,10 +7,7 @@ import {
|
||||
InventorySourcesAPI,
|
||||
WorkflowJobTemplateNodesAPI,
|
||||
} from '../../../api';
|
||||
import {
|
||||
mountWithContexts,
|
||||
waitForElement,
|
||||
} from '../../../../testUtils/enzymeHelpers';
|
||||
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
|
||||
|
||||
import InventorySourceList from './InventorySourceList';
|
||||
|
||||
@ -108,18 +105,15 @@ describe('<InventorySourceList />', () => {
|
||||
}
|
||||
);
|
||||
});
|
||||
wrapper.update();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
global.console.debug = debug;
|
||||
});
|
||||
|
||||
test('should mount properly', async () => {
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
});
|
||||
|
||||
test('api calls should be made on mount', async () => {
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
expect(InventoriesAPI.readSources).toHaveBeenCalledWith('1', {
|
||||
not__source: '',
|
||||
order_by: 'name',
|
||||
@ -136,23 +130,16 @@ describe('<InventorySourceList />', () => {
|
||||
});
|
||||
|
||||
test('source data should render properly', async () => {
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
expect(wrapper.find('InventorySourceListItem')).toHaveLength(2);
|
||||
expect(
|
||||
wrapper
|
||||
.find("DataListItem[aria-labelledby='check-action-1']")
|
||||
.find('PFDataListCell[aria-label="name"]')
|
||||
.text()
|
||||
).toBe('Source Foo');
|
||||
expect(
|
||||
wrapper
|
||||
.find("DataListItem[aria-labelledby='check-action-1']")
|
||||
.find('PFDataListCell[aria-label="type"]')
|
||||
.text()
|
||||
).toBe('EC2');
|
||||
.find('InventorySourceListItem')
|
||||
.first()
|
||||
.prop('source')
|
||||
).toEqual(sources.data.results[0]);
|
||||
});
|
||||
|
||||
test('add button is not disabled and delete button is disabled', async () => {
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
const addButton = wrapper.find('ToolbarAddButton').find('Link');
|
||||
const deleteButton = wrapper.find('ToolbarDeleteButton').find('Button');
|
||||
expect(addButton.prop('aria-disabled')).toBe(false);
|
||||
@ -162,14 +149,23 @@ describe('<InventorySourceList />', () => {
|
||||
test('delete button becomes enabled and properly calls api to delete', async () => {
|
||||
const deleteButton = wrapper.find('ToolbarDeleteButton').find('Button');
|
||||
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
expect(deleteButton.prop('isDisabled')).toBe(true);
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('DataListCheck#select-source-1').prop('onChange')({ id: 1 })
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.prop('onChange')({ id: 1 })
|
||||
);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('input#select-source-1').prop('checked')).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.prop('checked')
|
||||
).toBe(true);
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
|
||||
@ -199,10 +195,12 @@ describe('<InventorySourceList />', () => {
|
||||
})
|
||||
);
|
||||
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('DataListCheck#select-source-1').prop('onChange')({ id: 1 })
|
||||
wrapper
|
||||
.find('.pf-c-table__check')
|
||||
.first()
|
||||
.find('input')
|
||||
.prop('onChange')({ id: 1 })
|
||||
);
|
||||
wrapper.update();
|
||||
|
||||
@ -249,8 +247,7 @@ describe('<InventorySourceList />', () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventorySourceList />);
|
||||
});
|
||||
|
||||
await waitForElement(wrapper, 'ContentError', el => el.length > 0);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ContentError').length).toBe(1);
|
||||
});
|
||||
@ -272,8 +269,7 @@ describe('<InventorySourceList />', () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventorySourceList />);
|
||||
});
|
||||
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ContentError').length).toBe(1);
|
||||
});
|
||||
@ -291,7 +287,6 @@ describe('<InventorySourceList />', () => {
|
||||
},
|
||||
})
|
||||
);
|
||||
await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
|
||||
await act(async () =>
|
||||
wrapper.find('Button[aria-label="Sync all"]').prop('onClick')()
|
||||
);
|
||||
@ -301,11 +296,6 @@ describe('<InventorySourceList />', () => {
|
||||
});
|
||||
|
||||
test('should render sync all button and make api call to start sync for all', async () => {
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventorySourceListItem',
|
||||
el => el.length > 0
|
||||
);
|
||||
const syncAllButton = wrapper.find('Button[aria-label="Sync all"]');
|
||||
expect(syncAllButton.length).toBe(1);
|
||||
await act(async () => syncAllButton.prop('onClick')());
|
||||
@ -359,11 +349,7 @@ describe('<InventorySourceList /> RBAC testing', () => {
|
||||
}
|
||||
);
|
||||
});
|
||||
await waitForElement(
|
||||
newWrapper,
|
||||
'InventorySourceList',
|
||||
el => el.length > 0
|
||||
);
|
||||
newWrapper.update();
|
||||
expect(newWrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
@ -398,11 +384,7 @@ describe('<InventorySourceList /> RBAC testing', () => {
|
||||
}
|
||||
);
|
||||
});
|
||||
await waitForElement(
|
||||
newWrapper,
|
||||
'InventorySourceList',
|
||||
el => el.length > 0
|
||||
);
|
||||
newWrapper.update();
|
||||
expect(newWrapper.find('Button[aria-label="Sync All"]').length).toBe(0);
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
@ -1,23 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Button,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListCheck,
|
||||
DataListItemCells,
|
||||
DataListCell,
|
||||
DataListAction,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Button, Tooltip } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import {
|
||||
ExclamationTriangleIcon as PFExclamationTriangleIcon,
|
||||
PencilAltIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
|
||||
import StatusIcon from '../../../components/StatusIcon';
|
||||
import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
|
||||
|
||||
@ -30,9 +22,9 @@ function InventorySourceListItem({
|
||||
source,
|
||||
isSelected,
|
||||
onSelect,
|
||||
|
||||
detailUrl,
|
||||
label,
|
||||
rowIndex,
|
||||
}) {
|
||||
const generateLastJobTooltip = job => {
|
||||
return (
|
||||
@ -58,80 +50,68 @@ function InventorySourceListItem({
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataListItem aria-labelledby={`check-action-${source.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-source-${source.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={`check-action-${source.id}`}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="status" isFilled={false}>
|
||||
{source.summary_fields.last_job && (
|
||||
<Tooltip
|
||||
position="top"
|
||||
content={generateLastJobTooltip(
|
||||
source.summary_fields.last_job
|
||||
)}
|
||||
key={source.summary_fields.last_job.id}
|
||||
>
|
||||
<Link
|
||||
to={`/jobs/inventory/${source.summary_fields.last_job.id}`}
|
||||
>
|
||||
<StatusIcon
|
||||
status={source.summary_fields.last_job.status}
|
||||
/>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell aria-label={t`name`} key="name">
|
||||
<span>
|
||||
<Link to={`${detailUrl}/details`}>
|
||||
<b>{source.name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
{missingExecutionEnvironment && (
|
||||
<span>
|
||||
<Tooltip
|
||||
className="missing-execution-environment"
|
||||
content={t`Custom virtual environment ${source.custom_virtualenv} must be replaced by an execution environment.`}
|
||||
position="right"
|
||||
>
|
||||
<ExclamationTriangleIcon />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell aria-label={t`type`} key="type">
|
||||
{label}
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
id="actions"
|
||||
aria-labelledby="actions"
|
||||
aria-label={t`actions`}
|
||||
>
|
||||
{source.summary_fields.user_capabilities.start && (
|
||||
<InventorySourceSyncButton source={source} />
|
||||
)}
|
||||
{source.summary_fields.user_capabilities.edit && (
|
||||
<Button
|
||||
ouiaId={`${source.id}-edit-button`}
|
||||
aria-label={t`Edit Source`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`${detailUrl}/edit`}
|
||||
<Tr id={`source-row-${source.id}`}>
|
||||
<Td
|
||||
data-cy={`check-action-${source.id}`}
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}/details`}>
|
||||
<b>{source.name}</b>
|
||||
</Link>
|
||||
{missingExecutionEnvironment && (
|
||||
<span>
|
||||
<Tooltip
|
||||
className="missing-execution-environment"
|
||||
content={t`Custom virtual environment ${source.custom_virtualenv} must be replaced by an execution environment.`}
|
||||
position="right"
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<ExclamationTriangleIcon />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{source.summary_fields.last_job && (
|
||||
<Tooltip
|
||||
position="top"
|
||||
content={generateLastJobTooltip(source.summary_fields.last_job)}
|
||||
key={source.summary_fields.last_job.id}
|
||||
>
|
||||
<Link to={`/jobs/inventory/${source.summary_fields.last_job.id}`}>
|
||||
<StatusIcon status={source.summary_fields.last_job.status} />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Td>
|
||||
<Td dataLabel={t`Type`}>{label}</Td>
|
||||
<ActionsTd dataLabel={t`Actions`}>
|
||||
<ActionItem
|
||||
visible={source.summary_fields.user_capabilities.start}
|
||||
tooltip={t`Sync`}
|
||||
>
|
||||
<InventorySourceSyncButton source={source} />
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
visible={source.summary_fields.user_capabilities.edit}
|
||||
tooltip={t`Edit`}
|
||||
>
|
||||
<Button
|
||||
ouiaId={`${source.id}-edit-button`}
|
||||
aria-label={t`Edit Source`}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`${detailUrl}/edit`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -26,15 +26,20 @@ describe('<InventorySourceListItem />', () => {
|
||||
wrapper.unmount();
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('should mount properly', () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('InventorySourceListItem').length).toBe(1);
|
||||
});
|
||||
@ -42,32 +47,35 @@ describe('<InventorySourceListItem />', () => {
|
||||
test('all buttons and text fields should render properly', () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('StatusIcon').length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('Link')
|
||||
.at(0)
|
||||
.at(1)
|
||||
.prop('to')
|
||||
).toBe('/jobs/inventory/664');
|
||||
expect(wrapper.find('DataListCheck').length).toBe(1);
|
||||
expect();
|
||||
expect(wrapper.find('.pf-c-table__check').length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListCell')
|
||||
.find('Td')
|
||||
.at(1)
|
||||
.text()
|
||||
).toBe('Foo');
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListCell')
|
||||
.at(2)
|
||||
.find('Td')
|
||||
.at(3)
|
||||
.text()
|
||||
).toBe('Source Bar');
|
||||
expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
|
||||
@ -77,32 +85,46 @@ describe('<InventorySourceListItem />', () => {
|
||||
test('item should be checked', () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={source}
|
||||
isSelected
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('DataListCheck').length).toBe(1);
|
||||
expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.pf-c-table__check').length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.first()
|
||||
.prop('select').isSelected
|
||||
).toEqual(true);
|
||||
});
|
||||
|
||||
test('should not render status icon', () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: {
|
||||
user_capabilities: { start: true, edit: true },
|
||||
last_job: null,
|
||||
},
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: {
|
||||
user_capabilities: { start: true, edit: true },
|
||||
last_job: null,
|
||||
},
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('StatusIcon').length).toBe(0);
|
||||
});
|
||||
@ -110,14 +132,20 @@ describe('<InventorySourceListItem />', () => {
|
||||
test('should not render sync buttons', async () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: { user_capabilities: { start: false, edit: true } },
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: {
|
||||
user_capabilities: { start: false, edit: true },
|
||||
},
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('InventorySourceSyncButton').length).toBe(0);
|
||||
expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(1);
|
||||
@ -126,15 +154,21 @@ describe('<InventorySourceListItem />', () => {
|
||||
test('should not render edit buttons', async () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: { user_capabilities: { start: true, edit: false } },
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
summary_fields: {
|
||||
user_capabilities: { start: true, edit: false },
|
||||
},
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(0);
|
||||
expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
|
||||
@ -143,16 +177,20 @@ describe('<InventorySourceListItem />', () => {
|
||||
test('should render warning about missing execution environment', () => {
|
||||
const onSelect = jest.fn();
|
||||
wrapper = mountWithContexts(
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
custom_virtualenv: '/var/lib/awx/env',
|
||||
execution_environment: null,
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<InventorySourceListItem
|
||||
source={{
|
||||
...source,
|
||||
custom_virtualenv: '/var/lib/awx/env',
|
||||
execution_environment: null,
|
||||
}}
|
||||
isSelected={false}
|
||||
onSelect={onSelect}
|
||||
label="Source Bar"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(
|
||||
wrapper.find('.missing-execution-environment').prop('content')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user