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

Fix tech docs missing #1750

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}
+    />
   );
 };