mirror of
https://github.com/ansible/awx.git
synced 2026-05-23 08:37:48 -02:30
Remove all inventory route logic from Host screens
This commit is contained in:
@@ -10,7 +10,6 @@ import {
|
|||||||
useLocation,
|
useLocation,
|
||||||
} from 'react-router-dom';
|
} from 'react-router-dom';
|
||||||
import { Card, CardActions } from '@patternfly/react-core';
|
import { Card, CardActions } from '@patternfly/react-core';
|
||||||
import { CaretLeftIcon } from '@patternfly/react-icons';
|
|
||||||
|
|
||||||
import { TabbedCardHeader } from '@components/Card';
|
import { TabbedCardHeader } from '@components/Card';
|
||||||
import CardCloseButton from '@components/CardCloseButton';
|
import CardCloseButton from '@components/CardCloseButton';
|
||||||
@@ -24,20 +23,13 @@ import HostEdit from './HostEdit';
|
|||||||
import HostGroups from './HostGroups';
|
import HostGroups from './HostGroups';
|
||||||
import { HostsAPI } from '@api';
|
import { HostsAPI } from '@api';
|
||||||
|
|
||||||
function Host({ inventory, i18n, setBreadcrumb }) {
|
function Host({ i18n, setBreadcrumb }) {
|
||||||
const [host, setHost] = useState(null);
|
const [host, setHost] = useState(null);
|
||||||
const [contentError, setContentError] = useState(null);
|
const [contentError, setContentError] = useState(null);
|
||||||
const [hasContentLoading, setHasContentLoading] = useState(true);
|
const [hasContentLoading, setHasContentLoading] = useState(true);
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const hostsMatch = useRouteMatch('/hosts/:id');
|
const match = useRouteMatch('/hosts/:id');
|
||||||
const inventoriesMatch = useRouteMatch(
|
|
||||||
'/inventories/inventory/:id/hosts/:hostId'
|
|
||||||
);
|
|
||||||
const baseUrl = hostsMatch ? hostsMatch.url : inventoriesMatch.url;
|
|
||||||
const hostListUrl = hostsMatch
|
|
||||||
? '/hosts'
|
|
||||||
: `/inventories/inventory/${inventoriesMatch.params.id}/hosts`;
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
@@ -45,17 +37,10 @@ function Host({ inventory, i18n, setBreadcrumb }) {
|
|||||||
setHasContentLoading(true);
|
setHasContentLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const hostId = hostsMatch
|
const { data } = await HostsAPI.readDetail(match.params.id);
|
||||||
? hostsMatch.params.id
|
|
||||||
: inventoriesMatch.params.hostId;
|
|
||||||
const { data } = await HostsAPI.readDetail(hostId);
|
|
||||||
setHost(data);
|
|
||||||
|
|
||||||
if (hostsMatch) {
|
setHost(data);
|
||||||
setBreadcrumb(data);
|
setBreadcrumb(data);
|
||||||
} else if (inventoriesMatch) {
|
|
||||||
setBreadcrumb(inventory, data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setContentError(error);
|
setContentError(error);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -67,44 +52,31 @@ function Host({ inventory, i18n, setBreadcrumb }) {
|
|||||||
const tabsArray = [
|
const tabsArray = [
|
||||||
{
|
{
|
||||||
name: i18n._(t`Details`),
|
name: i18n._(t`Details`),
|
||||||
link: `${baseUrl}/details`,
|
link: `${match.url}/details`,
|
||||||
id: 0,
|
id: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Facts`),
|
name: i18n._(t`Facts`),
|
||||||
link: `${baseUrl}/facts`,
|
link: `${match.url}/facts`,
|
||||||
id: 1,
|
id: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Groups`),
|
name: i18n._(t`Groups`),
|
||||||
link: `${baseUrl}/groups`,
|
link: `${match.url}/groups`,
|
||||||
id: 2,
|
id: 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Completed Jobs`),
|
name: i18n._(t`Completed Jobs`),
|
||||||
link: `${baseUrl}/completed_jobs`,
|
link: `${match.url}/completed_jobs`,
|
||||||
id: 3,
|
id: 3,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
if (inventoriesMatch) {
|
|
||||||
tabsArray.unshift({
|
|
||||||
name: (
|
|
||||||
<>
|
|
||||||
<CaretLeftIcon />
|
|
||||||
{i18n._(t`Back to Hosts`)}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
link: hostListUrl,
|
|
||||||
id: 99,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let cardHeader = (
|
let cardHeader = (
|
||||||
<TabbedCardHeader>
|
<TabbedCardHeader>
|
||||||
<RoutedTabs tabsArray={tabsArray} />
|
<RoutedTabs tabsArray={tabsArray} />
|
||||||
<CardActions>
|
<CardActions>
|
||||||
<CardCloseButton linkTo={hostListUrl} />
|
<CardCloseButton linkTo="/hosts" />
|
||||||
</CardActions>
|
</CardActions>
|
||||||
</TabbedCardHeader>
|
</TabbedCardHeader>
|
||||||
);
|
);
|
||||||
@@ -124,7 +96,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
|
|||||||
{contentError.response && contentError.response.status === 404 && (
|
{contentError.response && contentError.response.status === 404 && (
|
||||||
<span>
|
<span>
|
||||||
{i18n._(`Host not found.`)}{' '}
|
{i18n._(`Host not found.`)}{' '}
|
||||||
<Link to={hostListUrl}>{i18n._(`View all Hosts.`)}</Link>
|
<Link to="/hosts">{i18n._(`View all Hosts.`)}</Link>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</ContentError>
|
</ContentError>
|
||||||
@@ -132,72 +104,35 @@ function Host({ inventory, i18n, setBreadcrumb }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const redirect = hostsMatch ? (
|
|
||||||
<Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
|
|
||||||
) : (
|
|
||||||
<Redirect
|
|
||||||
from="/inventories/inventory/:id/hosts/:hostId"
|
|
||||||
to="/inventories/inventory/:id/hosts/:hostId/details"
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
{cardHeader}
|
{cardHeader}
|
||||||
<Switch>
|
<Switch>
|
||||||
{redirect}
|
<Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
|
||||||
{host && (
|
{host && [
|
||||||
<Route
|
<Route path="/hosts/:id/details" key="details">
|
||||||
path={[
|
<HostDetail host={host} />
|
||||||
'/hosts/:id/details',
|
</Route>,
|
||||||
'/inventories/inventory/:id/hosts/:hostId/details',
|
<Route path="/hosts/:id/edit" key="edit">
|
||||||
]}
|
<HostEdit host={host} />
|
||||||
>
|
</Route>,
|
||||||
<HostDetail
|
<Route path="/hosts/:id/facts" key="facts">
|
||||||
host={host}
|
<HostFacts host={host} />
|
||||||
onUpdateHost={newHost => setHost(newHost)}
|
</Route>,
|
||||||
/>
|
<Route path="/hosts/:id/groups" key="groups">
|
||||||
</Route>
|
<HostGroups host={host} />
|
||||||
)}
|
</Route>,
|
||||||
{host && (
|
<Route path="/hosts/:id/completed_jobs" key="completed-jobs">
|
||||||
<Route
|
|
||||||
path={[
|
|
||||||
'/hosts/:id/edit',
|
|
||||||
'/inventories/inventory/:id/hosts/:hostId/edit',
|
|
||||||
]}
|
|
||||||
render={() => <HostEdit host={host} />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{host && (
|
|
||||||
<Route
|
|
||||||
path="/hosts/:id/facts"
|
|
||||||
render={() => <HostFacts host={host} />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{host && (
|
|
||||||
<Route
|
|
||||||
path="/hosts/:id/groups"
|
|
||||||
render={() => <HostGroups host={host} />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{host?.id && (
|
|
||||||
<Route
|
|
||||||
path={[
|
|
||||||
'/hosts/:id/completed_jobs',
|
|
||||||
'/inventories/inventory/:id/hosts/:hostId/completed_jobs',
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<JobList defaultParams={{ job__hosts: host.id }} />
|
<JobList defaultParams={{ job__hosts: host.id }} />
|
||||||
</Route>
|
</Route>,
|
||||||
)}
|
]}
|
||||||
<Route
|
<Route
|
||||||
key="not-found"
|
key="not-found"
|
||||||
path="*"
|
path="*"
|
||||||
render={() =>
|
render={() =>
|
||||||
!hasContentLoading && (
|
!hasContentLoading && (
|
||||||
<ContentError isNotFound>
|
<ContentError isNotFound>
|
||||||
<Link to={`${baseUrl}/details`}>
|
<Link to={`${match.url}/details`}>
|
||||||
{i18n._(`View Host Details`)}
|
{i18n._(`View Host Details`)}
|
||||||
</Link>
|
</Link>
|
||||||
</ContentError>
|
</ContentError>
|
||||||
|
|||||||
@@ -3,53 +3,41 @@ import { act } from 'react-dom/test-utils';
|
|||||||
import { createMemoryHistory } from 'history';
|
import { createMemoryHistory } from 'history';
|
||||||
import { HostsAPI } from '@api';
|
import { HostsAPI } from '@api';
|
||||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||||
import mockDetails from './data.host.json';
|
import mockHost from './data.host.json';
|
||||||
import Host from './Host';
|
import Host from './Host';
|
||||||
|
|
||||||
jest.mock('@api');
|
jest.mock('@api');
|
||||||
|
jest.mock('react-router-dom', () => ({
|
||||||
|
...jest.requireActual('react-router-dom'),
|
||||||
|
useRouteMatch: () => ({
|
||||||
|
url: '/hosts/1',
|
||||||
|
params: { id: 1 },
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
HostsAPI.readDetail.mockResolvedValue({
|
||||||
|
data: { ...mockHost },
|
||||||
|
});
|
||||||
|
|
||||||
describe('<Host />', () => {
|
describe('<Host />', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
let history;
|
let history;
|
||||||
|
|
||||||
HostsAPI.readDetail.mockResolvedValue({
|
beforeEach(async () => {
|
||||||
data: { ...mockDetails },
|
await act(async () => {
|
||||||
|
wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
wrapper.unmount();
|
wrapper.unmount();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('initially renders succesfully', async () => {
|
test('should render expected tabs', async () => {
|
||||||
history = createMemoryHistory({
|
const expectedTabs = ['Details', 'Facts', 'Groups', 'Completed Jobs'];
|
||||||
initialEntries: ['/hosts/1/edit'],
|
wrapper.find('RoutedTabs li').forEach((tab, index) => {
|
||||||
|
expect(tab.text()).toEqual(expectedTabs[index]);
|
||||||
});
|
});
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />, {
|
|
||||||
context: { router: { history } },
|
|
||||||
});
|
|
||||||
});
|
|
||||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
|
||||||
expect(wrapper.find('Host').length).toBe(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render "Back to Hosts" tab when navigating from inventories', async () => {
|
|
||||||
history = createMemoryHistory({
|
|
||||||
initialEntries: ['/inventories/inventory/1/hosts/1'],
|
|
||||||
});
|
|
||||||
await act(async () => {
|
|
||||||
wrapper = mountWithContexts(<Host setBreadcrumb={() => {}} />, {
|
|
||||||
context: { router: { history } },
|
|
||||||
});
|
|
||||||
});
|
|
||||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('RoutedTabs li')
|
|
||||||
.first()
|
|
||||||
.text()
|
|
||||||
).toBe('Back to Hosts');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should show content error when api throws error on initial render', async () => {
|
test('should show content error when api throws error on initial render', async () => {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Link, useHistory, useParams, useLocation } from 'react-router-dom';
|
import { Link, useHistory } from 'react-router-dom';
|
||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import { Host } from '@types';
|
import { Host } from '@types';
|
||||||
@@ -14,42 +14,36 @@ import DeleteButton from '@components/DeleteButton';
|
|||||||
import { HostsAPI } from '@api';
|
import { HostsAPI } from '@api';
|
||||||
import HostToggle from '@components/HostToggle';
|
import HostToggle from '@components/HostToggle';
|
||||||
|
|
||||||
function HostDetail({ host, i18n, onUpdateHost }) {
|
function HostDetail({ i18n, host }) {
|
||||||
const {
|
const {
|
||||||
created,
|
created,
|
||||||
description,
|
description,
|
||||||
id,
|
id,
|
||||||
modified,
|
modified,
|
||||||
name,
|
name,
|
||||||
|
variables,
|
||||||
summary_fields: {
|
summary_fields: {
|
||||||
inventory,
|
inventory,
|
||||||
recent_jobs,
|
recent_jobs,
|
||||||
kind,
|
|
||||||
created_by,
|
created_by,
|
||||||
modified_by,
|
modified_by,
|
||||||
user_capabilities,
|
user_capabilities,
|
||||||
},
|
},
|
||||||
} = host;
|
} = host;
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
const { pathname } = useLocation();
|
|
||||||
const { id: inventoryId, hostId: inventoryHostId } = useParams();
|
|
||||||
const [isLoading, setIsloading] = useState(false);
|
const [isLoading, setIsloading] = useState(false);
|
||||||
const [deletionError, setDeletionError] = useState(false);
|
const [deletionError, setDeletionError] = useState(false);
|
||||||
|
const history = useHistory();
|
||||||
const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
|
|
||||||
|
|
||||||
const handleHostDelete = async () => {
|
const handleHostDelete = async () => {
|
||||||
setIsloading(true);
|
setIsloading(true);
|
||||||
try {
|
try {
|
||||||
await HostsAPI.destroy(id);
|
await HostsAPI.destroy(id);
|
||||||
setIsloading(false);
|
history.push('/hosts');
|
||||||
const url = pathname.startsWith('/inventories')
|
|
||||||
? `/inventories/inventory/${inventoryId}/hosts/`
|
|
||||||
: `/hosts`;
|
|
||||||
history.push(url);
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setDeletionError(err);
|
setDeletionError(err);
|
||||||
|
} finally {
|
||||||
|
setIsloading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -66,77 +60,71 @@ function HostDetail({ host, i18n, onUpdateHost }) {
|
|||||||
</AlertModal>
|
</AlertModal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
|
||||||
return (
|
return (
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<HostToggle
|
<HostToggle host={host} css="padding-bottom: 40px" />
|
||||||
host={host}
|
|
||||||
onToggle={enabled =>
|
|
||||||
onUpdateHost({
|
|
||||||
...host,
|
|
||||||
enabled,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
css="padding-bottom: 40px"
|
|
||||||
/>
|
|
||||||
<DetailList gutter="sm">
|
<DetailList gutter="sm">
|
||||||
<Detail label={i18n._(t`Name`)} value={name} />
|
<Detail label={i18n._(t`Name`)} value={name} />
|
||||||
<Detail
|
<Detail
|
||||||
value={<Sparkline jobs={recentPlaybookJobs} />}
|
|
||||||
label={i18n._(t`Activity`)}
|
label={i18n._(t`Activity`)}
|
||||||
|
value={<Sparkline jobs={recentPlaybookJobs} />}
|
||||||
/>
|
/>
|
||||||
<Detail label={i18n._(t`Description`)} value={description} />
|
<Detail label={i18n._(t`Description`)} value={description} />
|
||||||
{inventory && (
|
|
||||||
<Detail
|
<Detail
|
||||||
label={i18n._(t`Inventory`)}
|
label={i18n._(t`Inventory`)}
|
||||||
value={
|
value={
|
||||||
<Link
|
<Link to={`/inventories/inventory/${inventory.id}/details`}>
|
||||||
to={`/inventories/${
|
|
||||||
kind === 'smart' ? 'smart_inventory' : 'inventory'
|
|
||||||
}/${inventoryId}/details`}
|
|
||||||
>
|
|
||||||
{inventory.name}
|
{inventory.name}
|
||||||
</Link>
|
</Link>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
<UserDateDetail
|
<UserDateDetail
|
||||||
date={created}
|
date={created}
|
||||||
label={i18n._(t`Created`)}
|
label={i18n._(t`Created`)}
|
||||||
user={created_by}
|
user={created_by}
|
||||||
/>
|
/>
|
||||||
<UserDateDetail
|
<UserDateDetail
|
||||||
|
date={modified}
|
||||||
label={i18n._(t`Last Modified`)}
|
label={i18n._(t`Last Modified`)}
|
||||||
user={modified_by}
|
user={modified_by}
|
||||||
date={modified}
|
|
||||||
/>
|
/>
|
||||||
<VariablesDetail
|
<VariablesDetail
|
||||||
value={host.variables}
|
|
||||||
rows={4}
|
|
||||||
label={i18n._(t`Variables`)}
|
label={i18n._(t`Variables`)}
|
||||||
|
rows={4}
|
||||||
|
value={variables}
|
||||||
/>
|
/>
|
||||||
</DetailList>
|
</DetailList>
|
||||||
<CardActionsRow>
|
<CardActionsRow>
|
||||||
{user_capabilities && user_capabilities.edit && (
|
{user_capabilities?.edit && (
|
||||||
<Button
|
<Button
|
||||||
aria-label={i18n._(t`edit`)}
|
aria-label={i18n._(t`edit`)}
|
||||||
component={Link}
|
component={Link}
|
||||||
to={
|
to={`/hosts/${id}/edit`}
|
||||||
pathname.startsWith('/inventories')
|
|
||||||
? `/inventories/inventory/${inventoryId}/hosts/${inventoryHostId}/edit`
|
|
||||||
: `/hosts/${id}/edit`
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{i18n._(t`Edit`)}
|
{i18n._(t`Edit`)}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{user_capabilities && user_capabilities.delete && (
|
{user_capabilities?.delete && (
|
||||||
<DeleteButton
|
<DeleteButton
|
||||||
onConfirm={() => handleHostDelete()}
|
onConfirm={() => handleHostDelete()}
|
||||||
modalTitle={i18n._(t`Delete Host`)}
|
modalTitle={i18n._(t`Delete Host`)}
|
||||||
name={host.name}
|
name={name}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</CardActionsRow>
|
</CardActionsRow>
|
||||||
|
{deletionError && (
|
||||||
|
<AlertModal
|
||||||
|
isOpen={deletionError}
|
||||||
|
variant="error"
|
||||||
|
title={i18n._(t`Error!`)}
|
||||||
|
onClose={() => setDeletionError(null)}
|
||||||
|
>
|
||||||
|
{i18n._(t`Failed to delete host.`)}
|
||||||
|
<ErrorDetail error={deletionError} />
|
||||||
|
</AlertModal>
|
||||||
|
)}
|
||||||
</CardBody>
|
</CardBody>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,66 +1,88 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||||
|
|
||||||
import HostDetail from './HostDetail';
|
import HostDetail from './HostDetail';
|
||||||
|
import { HostsAPI } from '@api';
|
||||||
|
|
||||||
|
import mockHost from '../data.host.json';
|
||||||
|
|
||||||
jest.mock('@api');
|
jest.mock('@api');
|
||||||
|
|
||||||
describe('<HostDetail />', () => {
|
describe('<HostDetail />', () => {
|
||||||
const mockHost = {
|
let wrapper;
|
||||||
id: 1,
|
|
||||||
name: 'Foo',
|
|
||||||
description: 'Bar',
|
|
||||||
inventory: 1,
|
|
||||||
created: '2015-07-07T17:21:26.429745Z',
|
|
||||||
modified: '2019-08-11T19:47:37.980466Z',
|
|
||||||
variables: '---',
|
|
||||||
summary_fields: {
|
|
||||||
inventory: {
|
|
||||||
id: 1,
|
|
||||||
name: 'test inventory',
|
|
||||||
},
|
|
||||||
user_capabilities: {
|
|
||||||
edit: true,
|
|
||||||
},
|
|
||||||
recent_jobs: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
test('initially renders succesfully', () => {
|
describe('User has edit permissions', () => {
|
||||||
mountWithContexts(<HostDetail host={mockHost} />);
|
beforeAll(() => {
|
||||||
|
wrapper = mountWithContexts(<HostDetail host={mockHost} />);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
wrapper.unmount();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should render Details', async () => {
|
test('should render Details', async () => {
|
||||||
const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
|
function assertDetail(label, value) {
|
||||||
const testParams = [
|
expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
|
||||||
{ label: 'Name', value: 'Foo' },
|
expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
|
||||||
{ label: 'Description', value: 'Bar' },
|
|
||||||
{ label: 'Inventory', value: 'test inventory' },
|
|
||||||
{ label: 'Created', value: '7/7/2015, 5:21:26 PM' },
|
|
||||||
{ label: 'Last Modified', value: '8/11/2019, 7:47:37 PM' },
|
|
||||||
];
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const { label, value } of testParams) {
|
|
||||||
// eslint-disable-next-line no-await-in-loop
|
|
||||||
const detail = await waitForElement(wrapper, `Detail[label="${label}"]`);
|
|
||||||
expect(detail.find('dt').text()).toBe(label);
|
|
||||||
expect(detail.find('dd').text()).toBe(value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
assertDetail('Name', 'localhost');
|
||||||
|
assertDetail('Description', 'a good description');
|
||||||
|
assertDetail('Inventory', 'Mikes Inventory');
|
||||||
|
assertDetail('Created', '10/28/2019, 9:26:54 PM');
|
||||||
|
assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should show edit button for users with edit permission', async () => {
|
test('should show edit button for users with edit permission', () => {
|
||||||
const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
|
|
||||||
const editButton = wrapper.find('Button[aria-label="edit"]');
|
const editButton = wrapper.find('Button[aria-label="edit"]');
|
||||||
expect(editButton.text()).toEqual('Edit');
|
expect(editButton.text()).toEqual('Edit');
|
||||||
expect(editButton.prop('to')).toBe('/hosts/1/edit');
|
expect(editButton.prop('to')).toBe('/hosts/2/edit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('expected api call is made for delete', async () => {
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('DeleteButton').invoke('onConfirm')();
|
||||||
|
});
|
||||||
|
expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Error dialog shown for failed deletion', async () => {
|
||||||
|
HostsAPI.destroy.mockImplementationOnce(() =>
|
||||||
|
Promise.reject(new Error())
|
||||||
|
);
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('DeleteButton').invoke('onConfirm')();
|
||||||
|
});
|
||||||
|
await waitForElement(
|
||||||
|
wrapper,
|
||||||
|
'Modal[title="Error!"]',
|
||||||
|
el => el.length === 1
|
||||||
|
);
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('Modal[title="Error!"]').invoke('onClose')();
|
||||||
|
});
|
||||||
|
await waitForElement(
|
||||||
|
wrapper,
|
||||||
|
'Modal[title="Error!"]',
|
||||||
|
el => el.length === 0
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('User has read-only permissions', () => {
|
||||||
|
beforeAll(() => {
|
||||||
|
const readOnlyHost = { ...mockHost };
|
||||||
|
readOnlyHost.summary_fields.user_capabilities.edit = false;
|
||||||
|
|
||||||
|
wrapper = mountWithContexts(<HostDetail host={mockHost} />);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
wrapper.unmount();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should hide edit button for users without edit permission', async () => {
|
test('should hide edit button for users without edit permission', async () => {
|
||||||
const readOnlyHost = { ...mockHost };
|
|
||||||
readOnlyHost.summary_fields.user_capabilities.edit = false;
|
|
||||||
const wrapper = mountWithContexts(<HostDetail host={readOnlyHost} />);
|
|
||||||
await waitForElement(wrapper, 'HostDetail');
|
|
||||||
expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
|
expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,31 +1,14 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useHistory, useRouteMatch } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import { CardBody } from '@components/Card';
|
import { CardBody } from '@components/Card';
|
||||||
import HostForm from '@components/HostForm';
|
import HostForm from '@components/HostForm';
|
||||||
import { HostsAPI } from '@api';
|
import { HostsAPI } from '@api';
|
||||||
import HostForm from '../shared';
|
|
||||||
|
|
||||||
function HostEdit({ host }) {
|
function HostEdit({ host }) {
|
||||||
const [formError, setFormError] = useState(null);
|
const [formError, setFormError] = useState(null);
|
||||||
const hostsMatch = useRouteMatch('/hosts/:id/edit');
|
const detailsUrl = `/hosts/${host.id}/details`;
|
||||||
const inventoriesMatch = useRouteMatch(
|
|
||||||
'/inventories/inventory/:id/hosts/:hostId/edit'
|
|
||||||
);
|
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
let detailsUrl;
|
|
||||||
|
|
||||||
if (hostsMatch) {
|
|
||||||
detailsUrl = `/hosts/${hostsMatch.params.id}/details`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inventoriesMatch) {
|
|
||||||
const kind =
|
|
||||||
host.summary_fields.inventory.kind === 'smart'
|
|
||||||
? 'smart_inventory'
|
|
||||||
: 'inventory';
|
|
||||||
detailsUrl = `/inventories/${kind}/${inventoriesMatch.params.id}/hosts/${inventoriesMatch.params.hostId}/details`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async values => {
|
const handleSubmit = async values => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -1,49 +1,70 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
import { createMemoryHistory } from 'history';
|
import { createMemoryHistory } from 'history';
|
||||||
import { HostsAPI } from '@api';
|
import { HostsAPI } from '@api';
|
||||||
import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
||||||
|
import mockHost from '../data.host.json';
|
||||||
import HostEdit from './HostEdit';
|
import HostEdit from './HostEdit';
|
||||||
|
|
||||||
jest.mock('@api');
|
jest.mock('@api');
|
||||||
|
|
||||||
describe('<HostEdit />', () => {
|
describe('<HostEdit />', () => {
|
||||||
const mockData = {
|
let wrapper;
|
||||||
id: 1,
|
let history;
|
||||||
name: 'Foo',
|
|
||||||
description: 'Bar',
|
|
||||||
inventory: 1,
|
|
||||||
variables: '---',
|
|
||||||
summary_fields: {
|
|
||||||
inventory: {
|
|
||||||
id: 1,
|
|
||||||
name: 'test inventory',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
test('handleSubmit should call api update', () => {
|
|
||||||
const wrapper = mountWithContexts(<HostEdit host={mockData} />);
|
|
||||||
|
|
||||||
const updatedHostData = {
|
const updatedHostData = {
|
||||||
name: 'new name',
|
name: 'new name',
|
||||||
description: 'new description',
|
description: 'new description',
|
||||||
variables: '---\nfoo: bar',
|
variables: '---\nfoo: bar',
|
||||||
};
|
};
|
||||||
wrapper.find('HostForm').prop('handleSubmit')(updatedHostData);
|
|
||||||
|
|
||||||
expect(HostsAPI.update).toHaveBeenCalledWith(1, updatedHostData);
|
beforeAll(async () => {
|
||||||
});
|
history = createMemoryHistory();
|
||||||
|
await act(async () => {
|
||||||
test('should navigate to host detail when cancel is clicked', () => {
|
wrapper = mountWithContexts(<HostEdit host={mockHost} />, {
|
||||||
const history = createMemoryHistory({
|
|
||||||
initialEntries: ['/hosts/1/edit'],
|
|
||||||
});
|
|
||||||
const wrapper = mountWithContexts(<HostEdit host={mockData} />, {
|
|
||||||
context: { router: { history } },
|
context: { router: { history } },
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
jest.clearAllMocks();
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handleSubmit should call api update', async () => {
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('HostForm').prop('handleSubmit')(updatedHostData);
|
||||||
|
});
|
||||||
|
expect(HostsAPI.update).toHaveBeenCalledWith(2, updatedHostData);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should navigate to host detail when cancel is clicked', async () => {
|
||||||
|
await act(async () => {
|
||||||
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
||||||
|
});
|
||||||
|
expect(history.location.pathname).toEqual('/hosts/2/details');
|
||||||
|
});
|
||||||
|
|
||||||
expect(history.location.pathname).toEqual('/hosts/1/details');
|
test('should navigate to host detail after successful submission', async () => {
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('HostForm').invoke('handleSubmit')(updatedHostData);
|
||||||
|
});
|
||||||
|
expect(wrapper.find('FormSubmitError').length).toBe(0);
|
||||||
|
expect(history.location.pathname).toEqual('/hosts/2/details');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('failed form submission should show an error message', async () => {
|
||||||
|
const error = {
|
||||||
|
response: {
|
||||||
|
data: { detail: 'An error occurred' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
HostsAPI.update.mockImplementationOnce(() => Promise.reject(error));
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('HostForm').invoke('handleSubmit')(mockHost);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
expect(wrapper.find('FormSubmitError').length).toBe(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -51,18 +51,6 @@
|
|||||||
"id": 1,
|
"id": 1,
|
||||||
"failed": false
|
"failed": false
|
||||||
},
|
},
|
||||||
"created_by": {
|
|
||||||
"id": 1,
|
|
||||||
"username": "admin",
|
|
||||||
"first_name": "",
|
|
||||||
"last_name": ""
|
|
||||||
},
|
|
||||||
"modified_by": {
|
|
||||||
"id": 1,
|
|
||||||
"username": "admin",
|
|
||||||
"first_name": "",
|
|
||||||
"last_name": ""
|
|
||||||
},
|
|
||||||
"user_capabilities": {
|
"user_capabilities": {
|
||||||
"edit": true,
|
"edit": true,
|
||||||
"delete": true
|
"delete": true
|
||||||
|
|||||||
Reference in New Issue
Block a user