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

__tests__/pages/Jobs/screens/Job/Job.test.jsx

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

__tests__/pages/Jobs/screens/Job/JobDetail.test.jsx

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

__tests__/pages/Jobs/screens/Job/JobOutput.test.jsx

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

src/pages/Jobs/Job.jsx

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

src/pages/Jobs/JobDetail/JobDetail.jsx

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

src/pages/Jobs/JobOutput/JobOutput.jsx

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

src/pages/Jobs/Jobs.jsx

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

src/pages/Jobs/index.js

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

src/pages/Organizations/screens/Organization/Organization.jsx

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