External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03: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
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
2 changed files with 88 additions and 102 deletions
Show Stats 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;
`;
class HostListItem extends React.Component {
static propTypes = {
host: Host.isRequired,
detailUrl: string.isRequired,
isSelected: bool.isRequired,
onSelect: func.isRequired,
};
function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
const labelId = `check-action-${host.id}`;
const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
...job,
type: 'job',
}));
render() {
const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
...job,
type: 'job',
}));
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="name">
<Link to={`${detailUrl}`}>
<b>{host.name}</b>
</Link>
</DataListCell>,
<DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} />
</DataListCell>,
<DataListCell key="inventory">
{host.summary_fields.inventory && (
<Fragment>
<b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
<Link
to={`/inventories/${
host.summary_fields.inventory.kind === 'smart'
? 'smart_inventory'
: 'inventory'
}/${host.summary_fields.inventory.id}/details`}
>
{host.summary_fields.inventory.name}
</Link>
</Fragment>
)}
</DataListCell>,
<DataListCell key="enable" alignRight isFilled={false}>
<HostToggle host={host} />
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{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>
)}
</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>
);
}
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="name">
<Link to={`${detailUrl}`}>
<b>{host.name}</b>
</Link>
</DataListCell>,
<DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} />
</DataListCell>,
<DataListCell key="inventory">
{host.summary_fields.inventory && (
<Fragment>
<b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
<Link
to={`/inventories/${
host.summary_fields.inventory.kind === 'smart'
? 'smart_inventory'
: 'inventory'
}/${host.summary_fields.inventory.id}/details`}
>
{host.summary_fields.inventory.name}
</Link>
</Fragment>
)}
</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);

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