techdocs: migrate to new composability API

.changeset/ninety-houses-shout.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Migrated to new composability API, exporting the plugin instance as `techdocsPlugin`, the top-level page as `TechdocsPage`, and the entity content as `EntityTechdocsContent`.

plugins/techdocs/dev/index.tsx

@@ -16,7 +16,7 @@
 
 import { configApiRef, discoveryApiRef } from '@backstage/core';
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { techdocsPlugin } from '../src/plugin';
 import { TechDocsDevStorageApi } from './api';
 import { techdocsStorageApiRef } from '../src';
 
@@ -30,5 +30,5 @@ createDevApp()
         discoveryApi,
       }),
   })
-  .registerPlugin(plugin)
+  .registerPlugin(techdocsPlugin)
   .render();

plugins/techdocs/src/Router.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { Route, Routes } from 'react-router-dom';
 import { MissingAnnotationEmptyState } from '@backstage/core';
 import {
@@ -38,7 +39,14 @@ export const Router = () => {
   );
 };
 
-export const EmbeddedDocsRouter = ({ entity }: { entity: Entity }) => {
+type Props = {
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
+};
+
+export const EmbeddedDocsRouter = (_props: Props) => {
+  const { entity } = useEntity();
+
   const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
 
   if (!projectId) {

plugins/techdocs/src/index.ts

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  techdocsPlugin,
+  techdocsPlugin as plugin,
+  TechdocsPage,
+  EntityTechdocsContent,
+} from './plugin';
 export { Router, EmbeddedDocsRouter } from './Router';
 export * from './reader';
 export * from './api';

plugins/techdocs/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { techdocsPlugin } from './plugin';
 
 describe('techdocs', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(techdocsPlugin).toBeDefined();
   });
 });

plugins/techdocs/src/plugin.ts

@@ -35,6 +35,7 @@ import {
   createApiFactory,
   configApiRef,
   discoveryApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
 import {
   techdocsStorageApiRef,
@@ -58,7 +59,7 @@ export const rootCatalogDocsRouteRef = createRouteRef({
   title: 'Docs',
 });
 
-export const plugin = createPlugin({
+export const techdocsPlugin = createPlugin({
   id: 'techdocs',
   apis: [
     createApiFactory({
@@ -80,4 +81,22 @@ export const plugin = createPlugin({
         }),
     }),
   ],
+  routes: {
+    root: rootRouteRef,
+    entityContent: rootCatalogDocsRouteRef,
+  },
 });
+
+export const TechdocsPage = techdocsPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+export const EntityTechdocsContent = techdocsPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.EmbeddedDocsRouter),
+    mountPoint: rootCatalogDocsRouteRef,
+  }),
+);