feat(RHIDP-1317): Add custom 404 page

Author: logonoff

packages/app/src/components/DynamicRoot/defaultAppComponents.tsx

@@ -1,9 +1,11 @@
 import { AppComponents } from '@backstage/core-plugin-api';
 
 import { SignInPage } from '../SignInPage/SignInPage';
+import { NotFoundErrorPage } from '../ErrorPages/NotFoundErrorPage';
 
 const defaultAppComponents: Partial<AppComponents> = {
   SignInPage: props => <SignInPage {...props} />,
+  NotFoundErrorPage: props => <NotFoundErrorPage {...props} />,
 };
 
 export default defaultAppComponents;

packages/app/src/components/ErrorPages/ErrorPage.tsx

@@ -0,0 +1,49 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import ErrorImage from './collaboration.png'
+
+interface ErrorPageProps {
+  /** The title to display. */
+  title: React.ReactNode | string;
+  /** The message to display. */
+  message: React.ReactNode | string;
+  /** Additional actions to display below the message. */
+  actions?: React.ReactNode;
+  /** Additional content to display below the message and above the actions. */
+  children?: React.ReactNode;
+  /** The source URL of the image to display. Defaults to a Red Hat-branded image. */
+  image?: string;
+}
+
+const ErrorPageGutters = {
+  xs: 3,
+  md: 6,
+  lg: 9,
+  xl: 12,
+}
+
+export const ErrorPage = ({ title, message, actions, image = ErrorImage, children }: ErrorPageProps) => (
+  <Grid container sx={{ flexGrow: 1 }} spacing={0}>
+    <Grid item xs={12} md={6} sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+      <Box sx={{ px: ErrorPageGutters, display: 'flex', flexDirection: 'column', gap: 3 }}>
+        <Typography variant="h1" gutterBottom>
+          {title}
+        </Typography>
+
+        <Typography variant="subtitle1" gutterBottom>
+          {message}
+        </Typography>
+
+        {children}
+        <div data-testid="error-page-actions">
+          {actions}
+        </div>
+      </Box>
+    </Grid>
+    <Grid item xs={12} md={6} sx={{ display: 'flex' }}>
+      <Box component="img" src={image} alt="" aria-hidden="true" sx={{ maxWidth: '100%', maxHeight: '100vh',
+        objectFit: 'contain', px: ErrorPageGutters }} />
+    </Grid>
+  </Grid>
+);

packages/app/src/components/ErrorPages/NotFoundErrorPage.tsx

@@ -0,0 +1,15 @@
+import type { AppComponents } from '@backstage/core-plugin-api';
+import { ErrorPage } from './ErrorPage';
+import Button from '@material-ui/core/Button'; // workaround for broken-looking MUI5 button
+
+export const NotFoundErrorPage: AppComponents['NotFoundErrorPage'] = ({ children }) => (
+  <ErrorPage
+    title={<><strong>404</strong> We couldn't find that page</>}
+    message={<>Try adding an <strong>index.md</strong> file in the root of the docs directory of this repository.</>}
+    actions={<Button variant="outlined" color="primary" onClick={() => {
+      window.history.back();
+    }}>Go back</Button>}
+  >
+    {children}
+  </ErrorPage>
+);