From 6aa2b965ebce0fa000b891d8dea67fb72a0a7e80 Mon Sep 17 00:00:00 2001
From: Morgan <mbentell@spotify.com>
Date: Mon, 19 Dec 2022 12:27:41 +0100
Subject: [PATCH] when looking for the page within the outlet, reject addons
 wrapper as well as addons, because different versions of react router use
 different numbers of wrappers. Should be compatible with all 6.* versions now

Signed-off-by: Morgan <mbentell@spotify.com>
---
 plugins/techdocs-react/src/addons.tsx         |  4 ++
 plugins/techdocs-react/src/index.ts           |  1 +
 plugins/techdocs/package.json                 |  1 +
 .../TechDocsReaderPage.test.tsx               | 47 +++++++++++++++++++
 .../TechDocsReaderPage/TechDocsReaderPage.tsx |  8 +++-
 5 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/plugins/techdocs-react/src/addons.tsx b/plugins/techdocs-react/src/addons.tsx
index a562007260..d77f53a426 100644
--- a/plugins/techdocs-react/src/addons.tsx
+++ b/plugins/techdocs-react/src/addons.tsx
@@ -27,6 +27,10 @@ import {
 
 import { TechDocsAddonLocations, TechDocsAddonOptions } from './types';
 
+/**
+ * Key for each addon.
+ * @public
+ */
 export const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1';
 
 /**
diff --git a/plugins/techdocs-react/src/index.ts b/plugins/techdocs-react/src/index.ts
index 00ba620651..5cbab1a326 100644
--- a/plugins/techdocs-react/src/index.ts
+++ b/plugins/techdocs-react/src/index.ts
@@ -25,6 +25,7 @@ export {
   createTechDocsAddonExtension,
   TechDocsAddons,
   TECHDOCS_ADDONS_WRAPPER_KEY,
+  TECHDOCS_ADDONS_KEY,
 } from './addons';
 export { techdocsApiRef, techdocsStorageApiRef } from './api';
 export type { SyncResult, TechDocsApi, TechDocsStorageApi } from './api';
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
index c3e8fdca9b..0add511f41 100644
--- a/plugins/techdocs/package.json
+++ b/plugins/techdocs/package.json
@@ -67,6 +67,7 @@
     "@backstage/cli": "workspace:^",
     "@backstage/core-app-api": "workspace:^",
     "@backstage/dev-utils": "workspace:^",
+    "@backstage/plugin-techdocs-module-addons-contrib": "workspace:^",
     "@backstage/test-utils": "workspace:^",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
index 4b23075908..3d75b7defe 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
@@ -27,6 +27,11 @@ import { techdocsApiRef, techdocsStorageApiRef } from '../../../api';
 import { rootRouteRef, rootDocsRouteRef } from '../../../routes';
 
 import { TechDocsReaderPage } from './TechDocsReaderPage';
+import { Route, useParams } from 'react-router-dom';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { Page } from '@backstage/core-components';
+import { FlatRoutes } from '@backstage/core-app-api';
 
 const mockEntityMetadata = {
   locationMetadata: {
@@ -66,6 +71,16 @@ const techdocsStorageApiMock: jest.Mocked<typeof techdocsStorageApiRef.T> = {
   syncEntityDocs: jest.fn(),
 };
 
+const PageMock = () => {
+  const { namespace, kind, name } = useParams();
+  return <>{`LayoutMock: ${namespace}#${kind}#${name}`}</>;
+};
+
+jest.mock('@backstage/core-components', () => ({
+  ...jest.requireActual('@backstage/core-components'),
+  Page: jest.fn(),
+}));
+
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <ThemeProvider theme={lightTheme}>
@@ -146,4 +161,36 @@ describe('<TechDocsReaderPage />', () => {
       expect(rendered.getByText('techdocs reader page')).toBeInTheDocument();
     });
   });
+
+  it('should render techdocs reader page with addons', async () => {
+    (Page as jest.Mock).mockImplementation(PageMock);
+    const name = 'test-name';
+    const namespace = 'test-namespace';
+    const kind = 'test';
+
+    await act(async () => {
+      const rendered = await renderInTestApp(
+        <Wrapper>
+          <FlatRoutes>
+            <Route
+              path="/docs/:namespace/:kind/:name/*"
+              element={<TechDocsReaderPage />}
+            >
+              <TechDocsAddons>
+                <ReportIssue />
+              </TechDocsAddons>
+            </Route>
+          </FlatRoutes>
+        </Wrapper>,
+        {
+          mountedRoutes,
+          routeEntries: ['/docs/test-namespace/test/test-name'],
+        },
+      );
+
+      expect(
+        rendered.getByText(`LayoutMock: ${namespace}#${kind}#${name}`),
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
index 0e9b244d74..ffe95e0b7e 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
@@ -21,6 +21,7 @@ import { Page } from '@backstage/core-components';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import {
   TECHDOCS_ADDONS_WRAPPER_KEY,
+  TECHDOCS_ADDONS_KEY,
   TechDocsReaderPageProvider,
 } from '@backstage/plugin-techdocs-react';
 
@@ -165,11 +166,14 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
   if (!children) {
     const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
 
-    const grandChildren = childrenList.flatMap(
+    const grandChildren = childrenList.flatMap<ReactElement>(
       child => (child as ReactElement)?.props?.children ?? [],
     );
+
     const page: React.ReactNode = grandChildren.find(
-      grandChild => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY),
+      grandChild =>
+        !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&
+        !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),
     );
 
     // As explained above, "page" is configuration 4 and <TechDocsReaderLayout> is 1