diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 22d6cc3ab1..c0edbc6ed0 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/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 = (
-
+
+
+
+
+
+
-
+
+
+
+
+
+
-
+
+
+
+
+
+
diff --git a/plugins/techdocs/api-report.md b/plugins/techdocs/api-report.md
index a8204bc9af..b2090bc879 100644
--- a/plugins/techdocs/api-report.md
+++ b/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;
diff --git a/plugins/techdocs/src/Router.tsx b/plugins/techdocs/src/Router.tsx
index de63838bc8..12b3ddf611 100644
--- a/plugins/techdocs/src/Router.tsx
+++ b/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 elements, otherwise "outlet" will be null on sub-pages and add-ons won't render
+ const element = useRoutes([
+ {
+ path: '/*',
+ element: ,
+ children: [
+ {
+ path: '/*',
+ element: children,
+ },
+ ],
+ },
+ ]);
+
const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
if (!projectId) {
return ;
}
- return (
-
- }>
- {children}
-
-
- );
+ return element;
};