External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-20 18:37:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Refactor HostListItem into functional component and add test for host toggle

Browse Source
This commit is contained in:
Marliana Lara
2020-02-26 15:27:19 -05:00
parent 033848a605
commit deced917cf
2 changed files with 88 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
View File

@@ -27,97 +27,78 @@ const DataListAction = styled(_DataListAction)`
grid-template-columns: min-content 40px; grid-template-columns: min-content 40px;
`; `;
class HostListItem extends React.Component { function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
static propTypes = { const labelId = `check-action-${host.id}`;
host: Host.isRequired, const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
detailUrl: string.isRequired, ...job,
isSelected: bool.isRequired, type: 'job',
onSelect: func.isRequired, }));
};
render() { return (
const { host, isSelected, onSelect, detailUrl, i18n } = this.props; <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
<DataListItemRow>
const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({ <DataListCheck
...job, id={`select-host-${host.id}`}
type: 'job', checked={isSelected}
})); onChange={onSelect}
aria-labelledby={labelId}
const labelId = `check-action-${host.id}`; />
return ( <DataListItemCells
<DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}> dataListCells={[
<DataListItemRow> <DataListCell key="name">
<DataListCheck <Link to={`${detailUrl}`}>
id={`select-host-${host.id}`} <b>{host.name}</b>
checked={isSelected} </Link>
onChange={onSelect} </DataListCell>,
aria-labelledby={labelId} <DataListCell key="recentJobs">
/> <Sparkline jobs={recentPlaybookJobs} />
<DataListItemCells </DataListCell>,
dataListCells={[ <DataListCell key="inventory">
<DataListCell key="name"> {host.summary_fields.inventory && (
<Link to={`${detailUrl}`}> <Fragment>
<b>{host.name}</b> <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
</Link> <Link
</DataListCell>, to={`/inventories/${
<DataListCell key="recentJobs"> host.summary_fields.inventory.kind === 'smart'
<Sparkline jobs={recentPlaybookJobs} /> ? 'smart_inventory'
</DataListCell>, : 'inventory'
<DataListCell key="inventory"> }/${host.summary_fields.inventory.id}/details`}
{host.summary_fields.inventory && ( >
<Fragment> {host.summary_fields.inventory.name}
<b css="margin-right: 24px">{i18n._(t`Inventory`)}</b> </Link>
<Link </Fragment>
to={`/inventories/${ )}
host.summary_fields.inventory.kind === 'smart' </DataListCell>,
? 'smart_inventory' ]}
: 'inventory' />
}/${host.summary_fields.inventory.id}/details`} <DataListAction
> aria-label="actions"
{host.summary_fields.inventory.name} aria-labelledby={labelId}
</Link> id={labelId}
</Fragment> >
)} <HostToggle host={host} />
</DataListCell>, {host.summary_fields.user_capabilities.edit && (
<DataListCell key="enable" alignRight isFilled={false}> <Tooltip content={i18n._(t`Edit Host`)} position="top">
<HostToggle host={host} /> <Button
</DataListCell>, variant="plain"
<DataListCell key="edit" alignRight isFilled={false}> component={Link}
{host.summary_fields.user_capabilities.edit && ( to={`/hosts/${host.id}/edit`}
<Tooltip content={i18n._(t`Edit Host`)} position="top"> >
<Button <PencilAltIcon />
variant="plain" </Button>
component={Link} </Tooltip>
to={`/hosts/${host.id}/edit`} )}
> </DataListAction>
<PencilAltIcon /> </DataListItemRow>
</Button> </DataListItem>
</Tooltip> );
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
<HostToggle host={host} />
{host.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
variant="plain"
component={Link}
to={`/hosts/${host.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);
}
} }
HostListItem.propTypes = {
host: Host.isRequired,
detailUrl: string.isRequired,
isSelected: bool.isRequired,
onSelect: func.isRequired,
};
export default withI18n()(HostListItem); export default withI18n()(HostListItem);

27
awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
View File

@@ -3,7 +3,7 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
import HostsListItem from './HostListItem'; import HostsListItem from './HostListItem';
let onToggleHost; const onToggleHost = jest.fn();
const mockHost = { const mockHost = {
id: 1, id: 1,
@@ -23,16 +23,10 @@ const mockHost = {
}; };
describe('<HostsListItem />', () => { describe('<HostsListItem />', () => {
let wrapper;
beforeEach(() => { beforeEach(() => {
onToggleHost = jest.fn(); wrapper = mountWithContexts(
});
afterEach(() => {
jest.clearAllMocks();
});
test('edit button shown to users with edit capabilities', () => {
const wrapper = mountWithContexts(
<HostsListItem <HostsListItem
isSelected={false} isSelected={false}
detailUrl="/host/1" detailUrl="/host/1"
@@ -41,13 +35,20 @@ describe('<HostsListItem />', () => {
onToggleHost={onToggleHost} onToggleHost={onToggleHost}
/> />
); );
});
afterEach(() => {
jest.clearAllMocks();
});
test('edit button shown to users with edit capabilities', () => {
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy(); expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
}); });
test('edit button hidden from users without edit capabilities', () => { test('edit button hidden from users without edit capabilities', () => {
const copyMockHost = Object.assign({}, mockHost); const copyMockHost = Object.assign({}, mockHost);
copyMockHost.summary_fields.user_capabilities.edit = false; copyMockHost.summary_fields.user_capabilities.edit = false;
const wrapper = mountWithContexts( wrapper = mountWithContexts(
<HostsListItem <HostsListItem
isSelected={false} isSelected={false}
detailUrl="/host/1" detailUrl="/host/1"
@@ -58,4 +59,8 @@ describe('<HostsListItem />', () => {
); );
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy(); expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
}); });
test('should display host toggle', () => {
expect(wrapper.find('HostToggle').length).toBe(1);
});
}); });