Merge pull request #28625 from stephenglass/fix-custom-error-page-1

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

@@ -126,20 +126,19 @@ describe('<TechDocsReaderPageContent />', () => {
     useTechDocsReaderDom.mockReturnValue(document.createElement('html'));
     useReaderState.mockReturnValue({ state: 'cached' });
 
-    const rendered = await renderInTestApp(
-      <Wrapper>
-        <TechDocsReaderPageContent withSearch={false} />
-      </Wrapper>,
-    );
+    await expect(
+      renderInTestApp(
+        <Wrapper>
+          <TechDocsReaderPageContent withSearch={false} />
+        </Wrapper>,
+      ),
+    ).rejects.toThrow('Reached NotFound Page');
 
-    await waitFor(() => {
-      expect(
-        rendered.queryByTestId('techdocs-native-shadowroot'),
-      ).not.toBeInTheDocument();
-      expect(
-        rendered.getByText('ERROR 404: PAGE NOT FOUND'),
-      ).toBeInTheDocument();
-    });
+    // Check the global document for the absence of the shadow root
+    const shadowRoot = document.querySelector(
+      '[data-testid="techdocs-native-shadowroot"]',
+    );
+    expect(shadowRoot).not.toBeInTheDocument();
   });
 
   it('should render 404 if there is no dom and reader state is not found', async () => {

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

@@ -26,7 +26,7 @@ import {
   useTechDocsReaderPage,
 } from '@backstage/plugin-techdocs-react';
 import { CompoundEntityRef } from '@backstage/catalog-model';
-import { Content, ErrorPage, Progress } from '@backstage/core-components';
+import { Content, Progress } from '@backstage/core-components';
 
 import { TechDocsSearch } from '../../../search';
 import { TechDocsStateIndicator } from '../TechDocsStateIndicator';
@@ -37,6 +37,7 @@ import {
   withTechDocsReaderProvider,
 } from '../TechDocsReaderProvider';
 import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons';
+import { useApp } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles({
   search: {
@@ -97,6 +98,8 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider(
     const hash = window.location.hash;
     const isStyleLoading = useShadowDomStylesLoading(dom);
     const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
+    const app = useApp();
+    const { NotFoundErrorPage } = app.getComponents();
 
     useEffect(() => {
       if (isStyleLoading) return;
@@ -122,7 +125,7 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider(
 
     // No entity metadata = 404. Don't render content at all.
     if (entityMetadataLoading === false && !entityMetadata)
-      return <ErrorPage status="404" statusMessage="PAGE NOT FOUND" />;
+      return <NotFoundErrorPage />;
 
     // Do not return content until dom is ready; instead, render a state
     // indicator, which handles progress and content errors on our behalf.