Testbed to help iterate on addons + correct dependency graph

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

packages/app/package.json

@@ -52,6 +52,7 @@
     "@backstage/plugin-shortcuts": "^0.2.5-next.0",
     "@backstage/plugin-tech-radar": "^0.5.11-next.1",
     "@backstage/plugin-techdocs": "^1.0.1-next.1",
+    "@backstage/plugin-techdocs-addons": "^0.0.0",
     "@backstage/plugin-todo": "^0.2.6-next.0",
     "@backstage/plugin-user-settings": "^0.4.3-next.0",
     "@backstage/plugin-tech-insights": "^0.1.14-next.0",

packages/app/src/App.tsx

@@ -66,14 +66,15 @@ import { SearchPage } from '@backstage/plugin-search';
 import { TechRadarPage } from '@backstage/plugin-tech-radar';
 import {
   TechDocsIndexPage,
-  techdocsPlugin,
   TechDocsReaderPage,
+  techdocsPlugin,
 } from '@backstage/plugin-techdocs';
 import {
   UserSettingsPage,
   UserSettingsTab,
 } from '@backstage/plugin-user-settings';
 import { AdvancedSettings } from './components/advancedSettings';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-addons';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
@@ -87,10 +88,18 @@ import { defaultPreviewTemplate } from './components/scaffolder/defaultPreviewTe
 import { searchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
-import { techDocsPage } from './components/techdocs/TechDocsPage';
+
+// import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
+import {
+  ExampleContent,
+  ExampleHeader,
+  ExamplePrimarySidebar,
+  ExampleSecondarySidebar,
+  ExampleSubHeader,
+} from './components/techdocs/ExampleAddons';
 
 const app = createApp({
   apis,
@@ -177,7 +186,13 @@ const routes = (
       path="/docs/:namespace/:kind/:name/*"
       element={<TechDocsReaderPage />}
     >
-      {techDocsPage}
+      <TechDocsAddons>
+        <ExampleHeader />
+        <ExampleSubHeader />
+        <ExamplePrimarySidebar />
+        <ExampleSecondarySidebar />
+        <ExampleContent />
+      </TechDocsAddons>
     </Route>
     <Route
       path="/create"

packages/app/src/components/techdocs/ExampleAddons.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HeaderLabel } from '@backstage/core-components';
+import { techdocsPlugin } from '@backstage/plugin-techdocs';
+import {
+  createTechDocsAddon,
+  TechDocsAddonLocations,
+  useShadowRootElements,
+} from '@backstage/plugin-techdocs-addons';
+import { Card, CardContent } from '@material-ui/core';
+import React, { useEffect } from 'react';
+
+/**
+ * Note: this is not typically how or where one might define such things. It
+ * would more typically be exported/provided by a plugin!
+ *
+ * In fact, this whole file and usage should be deleted before we merge things
+ * in. This is just a convenient way to test the addon framework in a nice
+ * end-to-end way before releasing anything.
+ */
+
+export const ExampleHeader = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ExampleHeader',
+    location: TechDocsAddonLocations.HEADER,
+    component: () => {
+      return <HeaderLabel label="Label" value="Value" />;
+    },
+  }),
+);
+
+export const ExampleSubHeader = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ExampleSubHeader',
+    location: TechDocsAddonLocations.SUBHEADER,
+    component: () => {
+      return (
+        <Card>
+          <CardContent>Subheader.</CardContent>
+        </Card>
+      );
+    },
+  }),
+);
+
+export const ExamplePrimarySidebar = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ExamplePrimarySidebar',
+    location: TechDocsAddonLocations.PRIMARY_SIDEBAR,
+    component: () => {
+      return (
+        <Card>
+          <CardContent>Primary Sidebar.</CardContent>
+        </Card>
+      );
+    },
+  }),
+);
+
+export const ExampleSecondarySidebar = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ExampleSecondarySidebar',
+    location: TechDocsAddonLocations.SECONDARY_SIDEBAR,
+    component: () => {
+      return (
+        <Card>
+          <CardContent>Secondary Sidebar.</CardContent>
+        </Card>
+      );
+    },
+  }),
+);
+
+const ExampleContentComponent = () => {
+  const h1 = useShadowRootElements(['h1'])[0];
+  useEffect(() => {
+    if (h1 && !h1.innerText.startsWith('Modified: ')) {
+      h1.innerText = `Modified: ${h1.innerText}`;
+    }
+  }, [h1]);
+  return null;
+};
+
+export const ExampleContent = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ExampleContent',
+    location: TechDocsAddonLocations.CONTENT,
+    component: ExampleContentComponent,
+  }),
+);