feat(techdocs): compose app addons

Co-authored-by: Emma Indal <emma.indahl@gmail.com>
Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app/package.json

@@ -52,7 +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/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

@@ -74,7 +74,7 @@ import {
   UserSettingsTab,
 } from '@backstage/plugin-user-settings';
 import { AdvancedSettings } from './components/advancedSettings';
-import { TechDocsAddons } from '@backstage/plugin-techdocs-addons';
+import { TechDocsAddons } from '@backstage/techdocs-addons';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import React from 'react';
 import { hot } from 'react-hot-loader/root';

packages/app/src/components/catalog/EntityPage.tsx

@@ -138,7 +138,7 @@ import {
 import { EntityGoCdContent, isGoCdAvailable } from '@backstage/plugin-gocd';
 
 import React, { ReactNode, useMemo, useState } from 'react';
-import { TechDocsAddons } from '@backstage/plugin-techdocs-addons';
+import { TechDocsAddons } from '@backstage/techdocs-addons';
 import {
   ExampleContent,
   ExampleHeader,

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

@@ -14,15 +14,19 @@
  * limitations under the License.
  */
 
-import { HeaderLabel } from '@backstage/core-components';
-import { techdocsPlugin } from '@backstage/plugin-techdocs';
+import React, { useEffect } from 'react';
+
+import { Card, CardContent } from '@material-ui/core';
+
+import {
+  techdocsPlugin,
+  useShadowRootElements,
+} 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';
+} from '@backstage/techdocs-addons';
+import { HeaderLabel } from '@backstage/core-components';
 
 /**
  * Note: this is not typically how or where one might define such things. It

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

@@ -14,29 +14,18 @@
  * limitations under the License.
  */
 
-import { Content } from '@backstage/core-components';
 import {
   TechDocsReaderPageHeader,
+  TechDocsReaderPageContent,
   TechDocsReaderPage,
-  Reader,
 } from '@backstage/plugin-techdocs';
 import React from 'react';
 
 const DefaultTechDocsPage = () => {
   return (
     <TechDocsReaderPage>
-      {({ techdocsMetadataValue, entityMetadataValue, entityRef, onReady }) => (
-        <>
-          <TechDocsReaderPageHeader
-            techDocsMetadata={techdocsMetadataValue}
-            entityMetadata={entityMetadataValue}
-            entityRef={entityRef}
-          />
-          <Content data-testid="techdocs-content">
-            <Reader onReady={onReady} entityRef={entityRef} />
-          </Content>
-        </>
-      )}
+      <TechDocsReaderPageHeader />
+      <TechDocsReaderPageContent />
     </TechDocsReaderPage>
   );
 };