add NotFound screen/route handling

awx/ui_next/src/components/ContentError/ContentError.jsx

@@ -9,8 +9,8 @@ import {
   EmptyStateBody,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-
 import ErrorDetail from '@components/ErrorDetail';
+import NotFoundError from './NotFoundError';
 
 const EmptyState = styled(PFEmptyState)`
   width: var(--pf-c-empty-state--m-lg--MaxWidth);
@@ -19,6 +19,12 @@ const EmptyState = styled(PFEmptyState)`
 class ContentError extends React.Component {
   render() {
     const { error, i18n } = this.props;
+    if (error && error.response && error.response.status === 401) {
+      // TODO: check for session timeout & redirect to /login
+    }
+    if (error && error.response && error.response.status === 404) {
+      return <NotFoundError error={error} />;
+    }
     return (
       <EmptyState>
         <EmptyStateIcon icon={ExclamationTriangleIcon} />

awx/ui_next/src/components/ContentError/NotFoundError.jsx

@@ -0,0 +1,34 @@
+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 }) {
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={ExclamationTriangleIcon} />
+      <Title size="lg">
+        {i18n._(t`Not Found`)}
+      </Title>
+      <EmptyStateBody>
+        {i18n._(`The page you requested could not be found.`)}
+      </EmptyStateBody>
+      {error && <ErrorDetail error={error} />}
+    </EmptyState>
+  );
+}
+
+export { NotFoundError as _NotFoundError };
+export default withI18n()(NotFoundError);

awx/ui_next/src/components/ContentError/index.js

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

awx/ui_next/src/index.jsx

@@ -32,6 +32,7 @@ import License from '@screens/License';
 import Teams from '@screens/Team';
 import Templates from '@screens/Template';
 import Users from '@screens/User';
+import NotFound from '@screens/NotFound';
 
 import App from './App';
 import RootProvider from './RootProvider';
@@ -224,8 +225,8 @@ export function main(render) {
                           ],
                         },
                       ]}
-                      render={({ routeGroups }) =>
-                        routeGroups
+                      render={({ routeGroups }) => {
+                        const routeList = routeGroups
                           .reduce(
                             (allRoutes, { routes }) => allRoutes.concat(routes),
                             []
@@ -238,8 +239,16 @@ export function main(render) {
                                 <PageComponent match={match} />
                               )}
                             />
-                          ))
-                      }
+                          ));
+                        routeList.push(
+                          <Route
+                            key="not-found"
+                            path="*"
+                            component={NotFound}
+                          />
+                        );
+                        return <Switch>{routeList}</Switch>;
+                      }}
                     />
                   )}
                 />

awx/ui_next/src/screens/NotFound.jsx

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