From 24581a2fd3f10065deee0fe27fd42ce227f86454 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Tue, 29 Mar 2022 20:07:54 +0200
Subject: [PATCH] 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                       |  2 +-
 packages/app/src/App.tsx                        |  2 +-
 .../app/src/components/catalog/EntityPage.tsx   |  2 +-
 .../src/components/techdocs/ExampleAddons.tsx   | 16 ++++++++++------
 .../src/components/techdocs/TechDocsPage.tsx    | 17 +++--------------
 5 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index 69afcc11e0..0d94417ddc 100644
--- a/packages/app/package.json
+++ b/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",
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 9073af7d2e..ec03e0e5dd 100644
--- a/packages/app/src/App.tsx
+++ b/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';
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 534b7eacda..b3291ffa91 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/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,
diff --git a/packages/app/src/components/techdocs/ExampleAddons.tsx b/packages/app/src/components/techdocs/ExampleAddons.tsx
index 690ef5a36d..7b5fdba80c 100644
--- a/packages/app/src/components/techdocs/ExampleAddons.tsx
+++ b/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
diff --git a/packages/app/src/components/techdocs/TechDocsPage.tsx b/packages/app/src/components/techdocs/TechDocsPage.tsx
index 4f49cf38e8..e5142472f0 100644
--- a/packages/app/src/components/techdocs/TechDocsPage.tsx
+++ b/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>
   );
 };