From d125e82723049c27cc5c55f0effa735e2ec94fb5 Mon Sep 17 00:00:00 2001
From: Jonathan Ash <jonathan-ash@users.noreply.github.com>
Date: Wed, 16 Feb 2022 11:36:16 +0000
Subject: [PATCH] Changed TechdocsReaderPage to use NotFoundErrorPage from
 createApp

Signed-off-by: Jonathan Ash <jonathan-ash@users.noreply.github.com>
---
 .../reader/components/TechDocsPage.test.tsx   | 58 -------------------
 .../src/reader/components/TechDocsPage.tsx    | 16 ++---
 2 files changed, 5 insertions(+), 69 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
index 5dfa104a25..b297466a62 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
@@ -173,62 +173,4 @@ 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();
-    });
-  });
 });
diff --git a/plugins/techdocs/src/reader/components/TechDocsPage.tsx b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
index 1fb75f8d76..c351f88f6e 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
@@ -14,16 +14,15 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState, ComponentType } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useOutlet } from 'react-router';
 import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { techdocsApiRef } from '../../api';
-import { TechDocsNotFound } from './TechDocsNotFound';
 import { LegacyTechDocsPage } from './LegacyTechDocsPage';
 import { TechDocsEntityMetadata, TechDocsMetadata } from '../../types';
 import { EntityName } from '@backstage/catalog-model';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, useApp } from '@backstage/core-plugin-api';
 import { Page } from '@backstage/core-components';
 
 export type TechDocsPageRenderFunction = ({
@@ -39,13 +38,10 @@ export type TechDocsPageRenderFunction = ({
 
 export type TechDocsPageProps = {
   children?: TechDocsPageRenderFunction | React.ReactNode;
-  NotFoundPage?: ComponentType<{errorMessage: string}>
 };
 
-export const TechDocsPage = ({
-  children,
-  NotFoundPage = TechDocsNotFound,
-}: TechDocsPageProps) => {
+export const TechDocsPage = ({ children }: TechDocsPageProps) => {
+  const NotFoundErrorPage = useApp().getComponents().NotFoundErrorPage;
   const outlet = useOutlet();
 
   const [documentReady, setDocumentReady] = useState<boolean>(false);
@@ -70,9 +66,7 @@ export const TechDocsPage = ({
     setDocumentReady(true);
   }, [setDocumentReady]);
 
-  if (entityMetadataError) {
-    return <NotFoundPage errorMessage={entityMetadataError.message} />;
-  }
+  if (entityMetadataError) return <NotFoundErrorPage />;
 
   if (!children) return outlet || <LegacyTechDocsPage />;