Merge pull request #20019 from backstage/philipph/techdocs-di

Migrate TechDocs to new Frontend System

.changeset/modern-owls-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Added experimental support for declarative integration via the `/alpha` subpath.

packages/app-next/src/App.tsx

@@ -25,6 +25,7 @@ import {
   createPageExtension,
 } from '@backstage/frontend-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
 
 /*
 
@@ -67,6 +68,7 @@ const app = createApp({
     graphiqlPlugin,
     pagesPlugin,
     techRadarPlugin,
+    techdocsPlugin,
     userSettingsPlugin,
     createExtensionOverrides({
       extensions: [entityPageExtension],

plugins/techdocs/src/alpha.tsx

@@ -18,8 +18,32 @@ import React from 'react';
 import {
   createPlugin,
   createSchemaFromZod,
+  createApiExtension,
+  createPageExtension,
 } from '@backstage/frontend-plugin-api';
 import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha';
+import {
+  configApiRef,
+  createApiFactory,
+  createRouteRef,
+  discoveryApiRef,
+  fetchApiRef,
+  identityApiRef,
+} from '@backstage/core-plugin-api';
+import {
+  techdocsApiRef,
+  techdocsStorageApiRef,
+} from '@backstage/plugin-techdocs-react';
+import { TechDocsClient, TechDocsStorageClient } from './client';
+
+const rootRouteRef = createRouteRef({
+  id: 'plugin.techdocs.indexPage',
+});
+
+const rootDocsRouteRef = createRouteRef({
+  id: 'plugin.techdocs.readerPage',
+  params: ['namespace', 'kind', 'name'],
+});
 
 /** @alpha */
 export const TechDocsSearchResultListItemExtension =
@@ -44,8 +68,89 @@ export const TechDocsSearchResultListItemExtension =
     },
   });
 
+/**
+ * Responsible for rendering the provided router element
+ *
+ * @alpha
+ */
+const TechDocsIndexPage = createPageExtension({
+  id: 'plugin.techdocs.indexPage',
+  defaultPath: '/docs',
+  routeRef: rootRouteRef,
+  loader: () =>
+    import('./home/components/TechDocsIndexPage').then(m => (
+      <m.TechDocsIndexPage />
+    )),
+});
+
+/**
+ * Component responsible for composing a TechDocs reader page experience
+ *
+ * @alpha
+ */
+const TechDocsReaderPage = createPageExtension({
+  id: 'plugin.techdocs.readerPage',
+  loader: () =>
+    import('./reader/components/TechDocsReaderPage').then(m => (
+      <m.TechDocsReaderPage />
+    )),
+  routeRef: rootDocsRouteRef,
+  defaultPath: '/docs/:namespace/:kind/:name/*',
+});
+
+/** @alpha */
+const techDocsStorage = createApiExtension({
+  api: techdocsStorageApiRef,
+
+  factory() {
+    return createApiFactory({
+      api: techdocsStorageApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        identityApi: identityApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) =>
+        new TechDocsStorageClient({
+          configApi,
+          discoveryApi,
+          identityApi,
+          fetchApi,
+        }),
+    });
+  },
+});
+
+/** @alpha */
+const techDocsClient = createApiExtension({
+  api: techdocsApiRef,
+  factory() {
+    return createApiFactory({
+      api: techdocsApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) =>
+        new TechDocsClient({
+          configApi,
+          discoveryApi,
+          fetchApi,
+        }),
+    });
+  },
+});
+
 /** @alpha */
 export default createPlugin({
   id: 'techdocs',
-  extensions: [TechDocsSearchResultListItemExtension],
+  extensions: [
+    TechDocsIndexPage,
+    TechDocsReaderPage,
+    techDocsClient,
+    techDocsStorage,
+    TechDocsSearchResultListItemExtension,
+  ],
 });