remove NotFoundError and use ContentError instead

This commit is contained in:
Keith Grant
2019-08-09 15:19:47 -07:00
parent db1dddb95e
commit eeb86b3105
8 changed files with 51 additions and 79 deletions

View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import { bool, instanceOf } from 'prop-types';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Title, Title,
@@ -11,7 +12,6 @@ import {
import { ExclamationTriangleIcon } from '@patternfly/react-icons'; import { ExclamationTriangleIcon } from '@patternfly/react-icons';
import { RootAPI } from '@api'; import { RootAPI } from '@api';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';
import NotFoundError from './NotFoundError';
const EmptyState = styled(PFEmptyState)` const EmptyState = styled(PFEmptyState)`
width: var(--pf-c-empty-state--m-lg--MaxWidth); width: var(--pf-c-empty-state--m-lg--MaxWidth);
@@ -22,33 +22,41 @@ async function logout() {
window.location.replace('/#/login'); window.location.replace('/#/login');
} }
class ContentError extends React.Component { function ContentError({ error, children, isNotFound, i18n }) {
render() { if (error && error.response && error.response.status === 401) {
const { error, children, i18n } = this.props; if (!error.response.headers['session-timeout']) {
if (error && error.response && error.response.status === 401) { logout();
if (!error.response.headers['session-timeout']) { return null;
logout();
return null;
}
} }
if (error && error.response && error.response.status === 404) { }
return <NotFoundError error={error}>{children}</NotFoundError>; const is404 =
} isNotFound || (error && error.response && error.response.status === 404);
return ( return (
<EmptyState> <EmptyState>
<EmptyStateIcon icon={ExclamationTriangleIcon} /> <EmptyStateIcon icon={ExclamationTriangleIcon} />
<Title size="lg">{i18n._(t`Something went wrong...`)}</Title> <Title size="lg">
<EmptyStateBody> {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)}
{children || </Title>
i18n._( <EmptyStateBody>
{is404
? i18n._(t`The page you requested could not be found.`)
: i18n._(
t`There was an error loading this content. Please reload the page.` t`There was an error loading this content. Please reload the page.`
)} )}
</EmptyStateBody> {children}
{error && <ErrorDetail error={error} />} </EmptyStateBody>
</EmptyState> {error && <ErrorDetail error={error} />}
); </EmptyState>
} );
} }
ContentError.propTypes = {
error: instanceOf(Error),
isNotFound: bool,
};
ContentError.defaultProps = {
error: null,
isNotFound: false,
};
export { ContentError as _ContentError }; export { ContentError as _ContentError };
export default withI18n()(ContentError); export default withI18n()(ContentError);

View File

@@ -1,32 +0,0 @@
import React from 'react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import {
Title,
EmptyState as PFEmptyState,
EmptyStateIcon,
EmptyStateBody,
} from '@patternfly/react-core';
import { ExclamationTriangleIcon } from '@patternfly/react-icons';
import ErrorDetail from '@components/ErrorDetail';
const EmptyState = styled(PFEmptyState)`
width: var(--pf-c-empty-state--m-lg--MaxWidth);
`;
function NotFoundError({ i18n, error, children }) {
return (
<EmptyState>
<EmptyStateIcon icon={ExclamationTriangleIcon} />
<Title size="lg">{i18n._(t`Not Found`)}</Title>
<EmptyStateBody>
{children || i18n._(`The page you requested could not be found.`)}
</EmptyStateBody>
{error && <ErrorDetail error={error} />}
</EmptyState>
);
}
export { NotFoundError as _NotFoundError };
export default withI18n()(NotFoundError);

View File

@@ -1,2 +1 @@
export { default } from './ContentError'; export { default } from './ContentError';
export { default as NotFoundError } from './NotFoundError';

View File

@@ -9,7 +9,7 @@ import {
PageSection, PageSection,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { JobsAPI } from '@api'; import { JobsAPI } from '@api';
import ContentError, { NotFoundError } from '@components/ContentError'; import ContentError from '@components/ContentError';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
@@ -150,14 +150,13 @@ class Job extends Component {
key="not-found" key="not-found"
path="*" path="*"
render={() => ( render={() => (
<NotFoundError> <ContentError isNotFound>
{i18n._(`The page you requested could not be found.`)}{' '}
<Link <Link
to={`/jobs/${match.params.type}/${match.params.id}/details`} to={`/jobs/${match.params.type}/${match.params.id}/details`}
> >
{i18n._(`View Job Details`)} {i18n._(`View Job Details`)}
</Link> </Link>
</NotFoundError> </ContentError>
)} )}
/>, />,
]} ]}

View File

@@ -1,8 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Redirect, Link } from 'react-router-dom'; import { Redirect, Link } from 'react-router-dom';
import { PageSection, Card } from '@patternfly/react-core'; import { PageSection, Card } from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
import { UnifiedJobsAPI } from '@api'; import { UnifiedJobsAPI } from '@api';
import ContentError, { NotFoundError } from '@components/ContentError'; import ContentError from '@components/ContentError';
import { JOB_TYPE_URL_SEGMENTS } from '../../constants'; import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
const NOT_FOUND = 'not found'; const NOT_FOUND = 'not found';
@@ -47,7 +48,7 @@ class JobTypeRedirect extends Component {
} }
render() { render() {
const { path, view } = this.props; const { path, view, i18n } = this.props;
const { error, job, isLoading } = this.state; const { error, job, isLoading } = this.state;
if (error) { if (error) {
@@ -55,10 +56,9 @@ class JobTypeRedirect extends Component {
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card className="awx-c-card">
{error === NOT_FOUND ? ( {error === NOT_FOUND ? (
<NotFoundError> <ContentError isNotFound>
The requested job could not be found.{' '} <Link to="/jobs">{i18n._(`View all Jobs`)}</Link>
<Link to="/jobs">View all Jobs.</Link> </ContentError>
</NotFoundError>
) : ( ) : (
<ContentError error={error} /> <ContentError error={error} />
)} )}
@@ -75,4 +75,4 @@ class JobTypeRedirect extends Component {
} }
} }
export default JobTypeRedirect; export default withI18n()(JobTypeRedirect);

View File

@@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { PageSection, Card } from '@patternfly/react-core'; import { PageSection, Card } from '@patternfly/react-core';
import { NotFoundError } from '@components/ContentError'; import ContentError from '@components/ContentError';
function NotFound() { function NotFound() {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card className="awx-c-card">
<NotFoundError /> <ContentError isNotFound />
</Card> </Card>
</PageSection> </PageSection>
); );

View File

@@ -10,7 +10,7 @@ import {
import styled from 'styled-components'; import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError, { NotFoundError } from '@components/ContentError'; import ContentError from '@components/ContentError';
import { OrganizationAccess } from './OrganizationAccess'; import { OrganizationAccess } from './OrganizationAccess';
import OrganizationDetail from './OrganizationDetail'; import OrganizationDetail from './OrganizationDetail';
import OrganizationEdit from './OrganizationEdit'; import OrganizationEdit from './OrganizationEdit';
@@ -239,14 +239,13 @@ class Organization extends Component {
key="not-found" key="not-found"
path="*" path="*"
render={() => ( render={() => (
<NotFoundError> <ContentError isNotFound>
{i18n._(`The page you requested could not be found.`)}{' '}
{match.params.id && ( {match.params.id && (
<Link to={`/organizations/${match.params.id}/details`}> <Link to={`/organizations/${match.params.id}/details`}>
{i18n._(`View Organization Details`)} {i18n._(`View Organization Details`)}
</Link> </Link>
)} )}
</NotFoundError> </ContentError>
)} )}
/> />
, ,

View File

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
import { Card, CardHeader, PageSection } from '@patternfly/react-core'; import { Card, CardHeader, PageSection } from '@patternfly/react-core';
import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom'; import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import ContentError, { NotFoundError } from '@components/ContentError'; import ContentError from '@components/ContentError';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import JobTemplateDetail from './JobTemplateDetail'; import JobTemplateDetail from './JobTemplateDetail';
import { JobTemplatesAPI } from '@api'; import { JobTemplatesAPI } from '@api';
@@ -120,8 +120,7 @@ class Template extends Component {
key="not-found" key="not-found"
path="*" path="*"
render={() => ( render={() => (
<NotFoundError> <ContentError isNotFound>
{i18n._(`The page you requested could not be found.`)}{' '}
{match.params.id && ( {match.params.id && (
<Link <Link
to={`/templates/${match.params.templateType}/${match.params.id}/details`} to={`/templates/${match.params.templateType}/${match.params.id}/details`}
@@ -129,7 +128,7 @@ class Template extends Component {
{i18n._(`View Template Details`)} {i18n._(`View Template Details`)}
</Link> </Link>
)} )}
</NotFoundError> </ContentError>
)} )}
/>, />,
]} ]}