External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-07 11:41:08 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix lint errors and pull in new content error and loading handler

Browse Source
This commit is contained in:
Marliana Lara
2019-06-13 16:48:12 -04:00
parent 416d30a189
commit 096f5fb324
9 changed files with 85 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
__tests__/pages/Jobs/screens/Job/Job.test.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { mountWithContexts } from '../../../../enzymeHelpers'; import { mountWithContexts } from '../../../../enzymeHelpers';
import Job from '../../../../../src/pages/Jobs/Job'; import { Job } from '../../../../../src/pages/Jobs';
describe('<Job />', () => { describe('<Job />', () => {
test('initially renders succesfully', () => { test('initially renders succesfully', () => {

6
__tests__/pages/Jobs/screens/Job/JobDetail.test.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { mountWithContexts } from '../../../../enzymeHelpers'; import { mountWithContexts } from '../../../../enzymeHelpers';
import JobDetail from '../../../../../src/pages/Jobs/JobDetail/'; import JobDetail from '../../../../../src/pages/Jobs/JobDetail';
describe('<JobDetail />', () => { describe('<JobDetail />', () => {
const mockDetails = { const mockDetails = {
@@ -9,13 +9,13 @@ describe('<JobDetail />', () => {
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
mountWithContexts( mountWithContexts(
<JobDetail job={ mockDetails } /> <JobDetail job={mockDetails} />
); );
}); });
test('should display a Close button', () => { test('should display a Close button', () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<JobDetail job={ mockDetails } /> <JobDetail job={mockDetails} />
); );
expect(wrapper.find('Button[aria-label="close"]').length).toBe(1); expect(wrapper.find('Button[aria-label="close"]').length).toBe(1);

4
__tests__/pages/Jobs/screens/Job/JobOutput.test.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { mountWithContexts } from '../../../../enzymeHelpers'; import { mountWithContexts } from '../../../../enzymeHelpers';
import JobOutput from '../../../../../src/pages/Jobs/JobOutput/'; import JobOutput from '../../../../../src/pages/Jobs/JobOutput';
describe('<JobOutput />', () => { describe('<JobOutput />', () => {
const mockDetails = { const mockDetails = {
@@ -9,7 +9,7 @@ describe('<JobOutput />', () => {
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
mountWithContexts( mountWithContexts(
<JobOutput job={ mockDetails } /> <JobOutput job={mockDetails} />
); );
}); });
}); });

89
src/pages/Jobs/Job.jsx
View File

@@ -1,12 +1,11 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom'; import { Route, withRouter, Switch, Redirect } 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 styled from 'styled-components'; import styled from 'styled-components';
import { withNetwork } from '../../contexts/Network';
import { JobsAPI } from '../../api';
import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core'; import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core';
import { JobsAPI } from '../../api';
import ContentError from '../../components/ContentError';
import CardCloseButton from '../../components/CardCloseButton'; import CardCloseButton from '../../components/CardCloseButton';
import RoutedTabs from '../../components/Tabs/RoutedTabs'; import RoutedTabs from '../../components/Tabs/RoutedTabs';
import JobDetail from './JobDetail'; import JobDetail from './JobDetail';
@@ -18,15 +17,17 @@ export class Job extends Component {
this.state = { this.state = {
job: null, job: null,
error: false, contentError: false,
loading: true contentLoading: true,
} isInitialized: false
};
this.fetchJob = this.fetchJob.bind(this); this.fetchJob = this.fetchJob.bind(this);
} }
componentDidMount () { async componentDidMount () {
this.fetchJob(); await this.fetchJob();
this.setState({ isInitialized: true });
} }
async componentDidUpdate (prevProps) { async componentDidUpdate (prevProps) {
@@ -35,28 +36,28 @@ export class Job extends Component {
await this.fetchJob(); await this.fetchJob();
} }
} }
async fetchJob () { async fetchJob () {
const { const {
match, match,
setBreadcrumb, setBreadcrumb,
handleHttpError
} = this.props; } = this.props;
const id = parseInt(match.params.id, 10);
this.setState({ contentError: false, contentLoading: true });
try { try {
const { data } = await JobsAPI.readDetail(match.params.id); const { data } = await JobsAPI.readDetail(id);
setBreadcrumb(data); setBreadcrumb(data);
this.setState({ this.setState({ job: data });
job: data,
loading: false
})
} catch (error) { } catch (error) {
handleHttpError(error) || this.setState({ error: true, loading: false }); this.setState({ contentError: true });
} finally {
this.setState({ contentLoading: false });
} }
} }
render() { render () {
const { const {
location,
history, history,
match, match,
i18n i18n
@@ -64,13 +65,15 @@ export class Job extends Component {
const { const {
job, job,
loading contentError,
contentLoading,
isInitialized
} = this.state; } = this.state;
const tabsArray = [ const tabsArray = [
{ name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 }, { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
{ name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 } { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 }
] ];
const CardHeader = styled(PFCardHeader)` const CardHeader = styled(PFCardHeader)`
--pf-c-card--first-child--PaddingTop: 0; --pf-c-card--first-child--PaddingTop: 0;
@@ -79,19 +82,35 @@ export class Job extends Component {
position: relative; position: relative;
`; `;
const cardHeader = ( let cardHeader = (
loading ? '' : ( <CardHeader>
<CardHeader> <RoutedTabs
<RoutedTabs match={match}
match={match} history={history}
history={history} tabsArray={tabsArray}
tabsArray={tabsArray} />
/> <CardCloseButton linkTo="/jobs" />
<CardCloseButton linkTo="/jobs" /> </CardHeader>
</CardHeader>
)
); );
if (!isInitialized) {
cardHeader = null;
}
if (!match) {
cardHeader = null;
}
if (!contentLoading && contentError) {
return (
<PageSection>
<Card className="awx-c-card">
<ContentError />
</Card>
</PageSection>
);
}
return ( return (
<PageSection> <PageSection>
<Card> <Card>
@@ -108,8 +127,6 @@ export class Job extends Component {
render={() => ( render={() => (
<JobDetail <JobDetail
match={match} match={match}
history={history}
location={location}
job={job} job={job}
/> />
)} )}
@@ -121,8 +138,6 @@ export class Job extends Component {
render={() => ( render={() => (
<JobOutput <JobOutput
match={match} match={match}
history={history}
location={location}
job={job} job={job}
/> />
)} )}
@@ -131,8 +146,8 @@ export class Job extends Component {
</Switch> </Switch>
</Card> </Card>
</PageSection> </PageSection>
) );
} }
} }
export default withI18n()(withNetwork(withRouter(Job))); export default withI18n()(withRouter(Job));

9
src/pages/Jobs/JobDetail/JobDetail.jsx
View File

@@ -10,27 +10,22 @@ const ActionButtonWrapper = styled.div`
justify-content: flex-end; justify-content: flex-end;
`; `;
class JobDetail extends Component { class JobDetail extends Component {
constructor (props) {
super(props);
}
render () { render () {
const { const {
job, job,
i18n i18n
} = this.props; } = this.props;
return ( return (
<CardBody> <CardBody>
<b>{job.name}</b> <b>{job.name}</b>
<ActionButtonWrapper> <ActionButtonWrapper>
<Button <Button
variant='secondary' variant="secondary"
aria-label="close" aria-label="close"
component={Link} component={Link}
to={`/jobs`} to="/jobs"
> >
{i18n._(t`Close`)} {i18n._(t`Close`)}
</Button> </Button>

7
src/pages/Jobs/JobOutput/JobOutput.jsx
View File

@@ -1,12 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { CardBody } from '@patternfly/react-core'; import { CardBody } from '@patternfly/react-core';
class JobOutput extends Component { class JobOutput extends Component {
constructor (props) {
super(props);
}
render () { render () {
const { const {
job job

47
src/pages/Jobs/Jobs.jsx
View File

@@ -2,12 +2,8 @@ import React, { Component, Fragment } from 'react';
import { Route, withRouter, Switch } from 'react-router-dom'; import { Route, withRouter, Switch } 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 { NetworkProvider } from '../../contexts/Network';
import { withRootDialog } from '../../contexts/RootDialog';
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs'; import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
import Job from './Job'; import { Job } from '.';
class Jobs extends Component { class Jobs extends Component {
constructor (props) { constructor (props) {
@@ -19,7 +15,7 @@ class Jobs extends Component {
breadcrumbConfig: { breadcrumbConfig: {
'/jobs': i18n._(t`Jobs`) '/jobs': i18n._(t`Jobs`)
} }
} };
} }
setBreadcrumbConfig = (job) => { setBreadcrumbConfig = (job) => {
@@ -30,17 +26,17 @@ class Jobs extends Component {
} }
const breadcrumbConfig = { const breadcrumbConfig = {
'/jobs': i18n._(`Jobs`), '/jobs': i18n._(t`Jobs`),
[`/jobs/${job.id}`]: `${job.name}`, [`/jobs/${job.id}`]: `${job.name}`,
[`/jobs/${job.id}/details`]: i18n._(`Details`), [`/jobs/${job.id}/details`]: i18n._(t`Details`),
[`/jobs/${job.id}/output`]: i18n._(`Output`) [`/jobs/${job.id}/output`]: i18n._(t`Output`)
}; };
this.setState({ breadcrumbConfig }); this.setState({ breadcrumbConfig });
} }
render () { render () {
const { match, history, location, setRootDialogMessage, i18n } = this.props; const { match, history, location } = this.props;
const { breadcrumbConfig } = this.state; const { breadcrumbConfig } = this.state;
return ( return (
@@ -51,29 +47,12 @@ class Jobs extends Component {
<Switch> <Switch>
<Route <Route
path={`${match.path}/:id`} path={`${match.path}/:id`}
render={({ match: newRouteMatch }) => ( render={() => (
<NetworkProvider <Job
handle404={() => { history={history}
history.replace('/jobs'); location={location}
setRootDialogMessage({ setBreadcrumb={this.setBreadcrumbConfig}
title: '404', />
bodyText: (
<Fragment>
{i18n._(t`Cannot find job with ID`)}
<strong>{` ${newRouteMatch.params.id}`}</strong>
.
</Fragment>
),
variant: 'warning'
});
}}
>
<Job
history={history}
location={location}
setBreadcrumb={this.setBreadcrumbConfig}
/>
</NetworkProvider>
)} )}
/> />
</Switch> </Switch>
@@ -82,4 +61,4 @@ class Jobs extends Component {
} }
} }
export default withI18n()(withRootDialog(withRouter(Jobs))); export default withI18n()(withRouter(Jobs));

5
src/pages/Jobs/index.js
View File

@@ -1,3 +1,2 @@
import Jobs from "./Jobs"; export { default as Job } from './Job';
export { default } from './Jobs';
export default Jobs;

20
src/pages/Organizations/screens/Organization/Organization.jsx
View File

@@ -3,6 +3,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core'; import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '../../../../components/CardCloseButton'; import CardCloseButton from '../../../../components/CardCloseButton';
import ContentError from '../../../../components/ContentError'; import ContentError from '../../../../components/ContentError';
import OrganizationAccess from './OrganizationAccess'; import OrganizationAccess from './OrganizationAccess';
@@ -12,7 +13,6 @@ import OrganizationNotifications from './OrganizationNotifications';
import OrganizationTeams from './OrganizationTeams'; import OrganizationTeams from './OrganizationTeams';
import RoutedTabs from '../../../../components/Tabs/RoutedTabs'; import RoutedTabs from '../../../../components/Tabs/RoutedTabs';
import { OrganizationsAPI } from '../../../../api'; import { OrganizationsAPI } from '../../../../api';
import styled from 'styled-components';
class Organization extends Component { class Organization extends Component {
constructor (props) { constructor (props) {
@@ -139,16 +139,14 @@ class Organization extends Component {
`; `;
let cardHeader = ( let cardHeader = (
loading ? '' : ( <CardHeader>
<CardHeader> <RoutedTabs
<RoutedTabs match={match}
match={match} history={history}
history={history} tabsArray={tabsArray}
tabsArray={tabsArray} />
/> <CardCloseButton linkTo="/organizations" />
<CardCloseButton linkTo="/organizations" /> </CardHeader>
</CardHeader>
)
); );
if (!isInitialized) { if (!isInitialized) {