diff --git a/.changeset/silver-plums-speak.md b/.changeset/silver-plums-speak.md new file mode 100644 index 0000000000..2277b7bf12 --- /dev/null +++ b/.changeset/silver-plums-speak.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': minor +--- + +Updates reader component used to display techdocs documentation. A previous change made this component not usable out of a page which don't have entityRef in url parameters. Reader component EntityRef parameter is now used instead of url parameters. Techdocs documentation component can now be used in our custom pages. diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 4e12ac18d1..8a39de45d4 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -76,8 +76,12 @@ const TechDocsReaderContext = createContext( {} as TechDocsReaderValue, ); -const TechDocsReaderProvider = ({ children }: PropsWithChildren<{}>) => { - const { namespace = '', kind = '', name = '', '*': path } = useParams(); +const TechDocsReaderProvider = ({ + children, + entityRef, +}: PropsWithChildren<{ entityRef: EntityName }>) => { + const { '*': path } = useParams(); + const { kind, namespace, name } = entityRef; const value = useReaderState(kind, namespace, name, path); return ( @@ -96,10 +100,10 @@ const TechDocsReaderProvider = ({ children }: PropsWithChildren<{}>) => { * @internal */ export const withTechDocsReaderProvider = - (Component: ComponentType) => + (Component: ComponentType, entityRef: EntityName) => (props: T) => ( - + ); @@ -128,12 +132,12 @@ export const useTechDocsReader = () => useContext(TechDocsReaderContext); * todo: Make public or stop exporting (see others: "altReaderExperiments") * @internal */ -export const useTechDocsReaderDom = (): Element | null => { +export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => { const navigate = useNavigate(); const theme = useTheme(); const techdocsStorageApi = useApi(techdocsStorageApiRef); const scmIntegrationsApi = useApi(scmIntegrationsApiRef); - const { namespace = '', kind = '', name = '' } = useParams(); + const { namespace = '', kind = '', name = '' } = entityRef; const { state, path, content: rawPage } = useTechDocsReader(); const [sidebars, setSidebars] = useState(); @@ -400,7 +404,7 @@ const TheReader = ({ withSearch = true, }: Props) => { const classes = useStyles(); - const dom = useTechDocsReaderDom(); + const dom = useTechDocsReaderDom(entityRef); const shadowDomRef = useRef(null); const onReadyRef = useRef<() => void>(onReady); @@ -440,7 +444,7 @@ export const Reader = ({ onReady = () => {}, withSearch = true, }: Props) => ( - +