Added the option to supply a custom error page to TechDocsPage

Signed-off-by: Jonathan Ash <jonathan-ash@users.noreply.github.com>

.changeset/healthy-shoes-flash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Added ability for <TechDocsPage /> to display a custom error page component via prop "NotFoundPage"

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

@@ -173,4 +173,62 @@ describe('<TechDocsPage />', () => {
       expect(rendered.getByText('A custom header')).toBeInTheDocument();
     });
   });
+
+  it('should render a custom error page if supplied', async () => {
+    const CustomErrorPage = ({ errorMessage }: { errorMessage: string }) => (
+      <div>{errorMessage}</div>
+    );
+
+    useParams.mockReturnValue({
+      entityRef: 'Component::backstage',
+    });
+
+    const scmIntegrationsApi: ScmIntegrationsApi =
+      ScmIntegrationsApi.fromConfig(
+        new ConfigReader({
+          integrations: {},
+        }),
+      );
+    const techdocsApi: Partial<TechDocsApi> = {
+      getEntityMetadata: () =>
+        Promise.reject({
+          name: 'error',
+          message: 'error message',
+        }),
+      getTechDocsMetadata: () =>
+        Promise.resolve({
+          site_name: 'string',
+          site_description: 'string',
+        }),
+    };
+
+    const techdocsStorageApi: Partial<TechDocsStorageApi> = {
+      getEntityDocs: (): Promise<string> => Promise.resolve('String'),
+      getBaseUrl: (): Promise<string> => Promise.resolve('String'),
+      getApiOrigin: (): Promise<string> => Promise.resolve('String'),
+    };
+    const searchApi = {
+      query: () =>
+        Promise.resolve({
+          results: [],
+        }),
+    };
+    const apiRegistry = TestApiRegistry.from(
+      [scmIntegrationsApiRef, scmIntegrationsApi],
+      [techdocsApiRef, techdocsApi],
+      [techdocsStorageApiRef, techdocsStorageApi],
+      [searchApiRef, searchApi],
+    );
+
+    await act(async () => {
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apiRegistry}>
+            <TechDocsPage NotFoundPage={CustomErrorPage} />
+          </ApiProvider>,
+        ),
+      );
+      expect(await rendered.findByText('error message')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, ComponentType } from 'react';
 import { useOutlet } from 'react-router';
 import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
@@ -39,9 +39,13 @@ export type TechDocsPageRenderFunction = ({
 
 export type TechDocsPageProps = {
   children?: TechDocsPageRenderFunction | React.ReactNode;
+  NotFoundPage?: ComponentType<{errorMessage: string}>
 };
 
-export const TechDocsPage = ({ children }: TechDocsPageProps) => {
+export const TechDocsPage = ({
+  children,
+  NotFoundPage = TechDocsNotFound,
+}: TechDocsPageProps) => {
   const outlet = useOutlet();
 
   const [documentReady, setDocumentReady] = useState<boolean>(false);
@@ -67,7 +71,7 @@ export const TechDocsPage = ({ children }: TechDocsPageProps) => {
   }, [setDocumentReady]);
 
   if (entityMetadataError) {
-    return <TechDocsNotFound errorMessage={entityMetadataError.message} />;
+    return <NotFoundPage errorMessage={entityMetadataError.message} />;
   }
 
   if (!children) return outlet || <LegacyTechDocsPage />;