fix(techdocs): use object routes on entity docs pages

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app/src/components/catalog/EntityPage.tsx

@@ -140,6 +140,12 @@ import { EntityGoCdContent, isGoCdAvailable } from '@backstage/plugin-gocd';
 
 import React, { ReactNode, useMemo, useState } from 'react';
 
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import {
+  TextSize,
+  ReportIssue,
+} from '@backstage/plugin-techdocs-module-addons-contrib';
+
 const customEntityFilterKind = ['Component', 'API', 'System'];
 
 const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
@@ -398,7 +404,12 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      <EntityTechdocsContent>
+        <TechDocsAddons>
+          <TextSize />
+          <ReportIssue />
+        </TechDocsAddons>
+      </EntityTechdocsContent>
     </EntityLayout.Route>
 
     <EntityLayout.Route
@@ -465,7 +476,12 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      <EntityTechdocsContent>
+        <TechDocsAddons>
+          <TextSize />
+          <ReportIssue />
+        </TechDocsAddons>
+      </EntityTechdocsContent>
     </EntityLayout.Route>
     <EntityLayout.Route
       if={isNewRelicDashboardAvailable}
@@ -512,7 +528,12 @@ const defaultEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      <EntityTechdocsContent>
+        <TechDocsAddons>
+          <TextSize />
+          <ReportIssue />
+        </TechDocsAddons>
+      </EntityTechdocsContent>
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/todos" title="TODOs">

plugins/techdocs/api-report.md

@@ -111,7 +111,9 @@ export type DocsTableRow = {
 };
 
 // @public
-export const EmbeddedDocsRouter: (props: PropsWithChildren<{}>) => JSX.Element;
+export const EmbeddedDocsRouter: (
+  props: PropsWithChildren<{}>,
+) => JSX.Element | null;
 
 // @public
 export const EntityListDocsGrid: () => JSX.Element;
@@ -153,7 +155,7 @@ export type EntityListDocsTableProps = {
 // @public
 export const EntityTechdocsContent: (props: {
   children?: ReactNode;
-}) => JSX.Element;
+}) => JSX.Element | null;
 
 // @public
 export const isTechDocsAvailable: (entity: Entity) => boolean;

plugins/techdocs/src/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useRoutes } from 'react-router-dom';
 
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -61,17 +61,25 @@ export const EmbeddedDocsRouter = (props: PropsWithChildren<{}>) => {
   const { children } = props;
   const { entity } = useEntity();
 
+  // Using objects instead of <Route> elements, otherwise "outlet" will be null on sub-pages and add-ons won't render
+  const element = useRoutes([
+    {
+      path: '/*',
+      element: <EntityPageDocs entity={entity} />,
+      children: [
+        {
+          path: '/*',
+          element: children,
+        },
+      ],
+    },
+  ]);
+
   const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
 
   if (!projectId) {
     return <MissingAnnotationEmptyState annotation={TECHDOCS_ANNOTATION} />;
   }
 
-  return (
-    <Routes>
-      <Route path="/*" element={<EntityPageDocs entity={entity} />}>
-        {children}
-      </Route>
-    </Routes>
-  );
+  return element;
 };