Merge pull request #1787 from DavidJSykes/Fix-TechDocs-missing

Fix tech docs missing #1750

packages/core/src/layout/ErrorPage/ErrorPage.tsx

@@ -24,6 +24,7 @@ import { useNavigate } from 'react-router';
 interface IErrorPageProps {
   status: string;
   statusMessage: string;
+  additionalInfo?: string;
 }
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
@@ -38,7 +39,11 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => {
+export const ErrorPage = ({
+  status,
+  statusMessage,
+  additionalInfo,
+}: IErrorPageProps) => {
   const classes = useStyles();
   const navigate = useNavigate();
 
@@ -49,6 +54,9 @@ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => {
         <Typography variant="body1" className={classes.subtitle}>
           ERROR {status}: {statusMessage}
         </Typography>
+        <Typography variant="body1" className={classes.subtitle}>
+          {additionalInfo}
+        </Typography>
         <Typography variant="h2" className={classes.title}>
           Looks like someone dropped the mic!
         </Typography>

packages/core/src/layout/index.ts

@@ -17,13 +17,14 @@
 export * from './Content';
 export * from './ContentHeader';
 export * from './ErrorBoundary';
+export * from './ErrorPage';
 export * from './Header';
 export * from './HeaderLabel';
+export * from './HeaderTabs';
 export * from './HomepageTimer';
 export * from './InfoCard';
+export * from './ItemCard';
 export * from './Page';
 export * from './Sidebar';
 export * from './SignInPage';
 export * from './TabbedCard';
-export * from './HeaderTabs';
-export * from './ItemCard';

plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx

@@ -18,9 +18,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-describe('TechDocs Not Found', () => {
-  it('should render a Documentation not found page', async () => {
-    const { queryByText } = render(wrapInTestApp(<TechDocsNotFound />));
-    expect(queryByText(/error: documentation not found/i)).toBeInTheDocument();
+describe('<TechDocsNotFound />', () => {
+  it('should render with status code, status message and go back link', () => {
+    const rendered = render(wrapInTestApp(<TechDocsNotFound />));
+    rendered.getByText(/Documentation not found/i);
+    rendered.getByText(/404/i);
+    rendered.getByText(/Looks like someone dropped the mic!/i);
+    expect(rendered.getByTestId('go-back-link')).toBeDefined();
   });
 });

plugins/techdocs/src/reader/components/TechDocsNotFound.tsx

@@ -15,20 +15,14 @@
  */
 
 import React from 'react';
-import { Typography, Button } from '@material-ui/core';
-import { TechDocsPageWrapper } from './TechDocsPageWrapper';
+import { ErrorPage } from '@backstage/core';
 
 export const TechDocsNotFound = () => {
   return (
-    <TechDocsPageWrapper
-      title="Documentation"
-      subtitle="Documentation available in Backstage"
-    >
-      <Typography>Error: Documentation not found</Typography>
-      <Typography>Path: {window.location.pathname}</Typography>
-      <Button color="primary" onClick={() => window.history.back()}>
-        Go back
-      </Button>
-    </TechDocsPageWrapper>
+    <ErrorPage
+      status="404"
+      statusMessage="Documentation not found"
+      additionalInfo={window.location.pathname}
+    />
   );
 };