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