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

@@ -27,6 +27,10 @@ import {
 
 import { TechDocsAddonLocations, TechDocsAddonOptions } from './types';
 
+/**
+ * Key for each addon.
+ * @public
+ */
 export const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1';
 
 /**

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';

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",

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

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