Initial setup for alpha TechDocs FE DI

Co-authored-by: Johan Haals <johan@haals.se>
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/techdocs/src/alpha.tsx

@@ -18,8 +18,23 @@ 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,
+  discoveryApiRef,
+  fetchApiRef,
+  identityApiRef,
+} from '@backstage/core-plugin-api';
+import {
+  techdocsApiRef,
+  techdocsStorageApiRef,
+} from '@backstage/plugin-techdocs-react';
+import { TechDocsClient, TechDocsStorageClient } from './client';
+import { rootDocsRouteRef, rootRouteRef } from './routes';
 
 /** @alpha */
 export const TechDocsSearchResultListItemExtension =
@@ -44,8 +59,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,
+  ],
 });