From 1e5d66f7018b92554601848fa4ce97980cc911e8 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Thu, 19 May 2022 17:32:23 +0200
Subject: [PATCH] refactor: apply review suggestions

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .changeset/fair-grapes-joke.md                | 43 ++++++++++++++++++-
 .changeset/techdocs-buttons-film.md           |  2 +-
 .../app/src/components/catalog/EntityPage.tsx | 31 ++++++-------
 .../app/src/components/catalog/EntityPage.tsx | 30 ++++++-------
 4 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/.changeset/fair-grapes-joke.md b/.changeset/fair-grapes-joke.md
index 5abfa0bb50..8ab6516833 100644
--- a/.changeset/fair-grapes-joke.md
+++ b/.changeset/fair-grapes-joke.md
@@ -2,4 +2,45 @@
 '@backstage/create-app': patch
 ---
 
-Register the `TechDocs` addons on the catalog page and also test their rendering in `EntityDocs` sub pages.
+Register `TechDocs` addons on catalog entity pages, follow the steps below to add them manually:
+
+```diff
+// packages/app/src/components/catalog/EntityPage.tsx
+
++ import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
++ import {
++   ReportIssue,
++ } from '@backstage/plugin-techdocs-module-addons-contrib';
+
++ const techdocsContent = (
++   <EntityTechdocsContent>
++     <TechDocsAddons>
++       <ReportIssue />
++     </TechDocsAddons>
++   </EntityTechdocsContent>
++ );
+
+const defaultEntityPage = (
+  ...
+  <EntityLayout.Route path="/docs" title="Docs">
++    {techdocsContent}
+  </EntityLayout.Route>
+  ...
+);
+
+const serviceEntityPage = (
+  ...
+  <EntityLayout.Route path="/docs" title="Docs">
++    {techdocsContent}
+  </EntityLayout.Route>
+  ...
+);
+
+const websiteEntityPage = (
+  ...
+  <EntityLayout.Route path="/docs" title="Docs">
++    {techdocsContent}
+  </EntityLayout.Route>
+  ...
+);
+```
diff --git a/.changeset/techdocs-buttons-film.md b/.changeset/techdocs-buttons-film.md
index 46895ff7ce..1af1ead4c7 100644
--- a/.changeset/techdocs-buttons-film.md
+++ b/.changeset/techdocs-buttons-film.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-techdocs': patch
 ---
 
-Fix `EntityDocs` component to use objects instead of `<Route>` elements, otherwise "outlet" will be null on sub-pages and add-ons won't render.
+Fix `EntityTechdocsContent` component to use objects instead of `<Route>` elements, otherwise "outlet" will be null on sub-pages and add-ons won't render.
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index c0edbc6ed0..799fe3e4d9 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -174,6 +174,15 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   );
 };
 
+const techdocsContent = (
+  <EntityTechdocsContent>
+    <TechDocsAddons>
+      <TextSize />
+      <ReportIssue />
+    </TechDocsAddons>
+  </EntityTechdocsContent>
+);
+
 /**
  * NOTE: This page is designed to work on small screens such as mobile devices.
  * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`,
@@ -404,12 +413,7 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <TextSize />
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
 
     <EntityLayout.Route
@@ -476,13 +480,9 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <TextSize />
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
+
     <EntityLayout.Route
       if={isNewRelicDashboardAvailable}
       path="/newrelic-dashboard"
@@ -528,12 +528,7 @@ const defaultEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <TextSize />
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/todos" title="TODOs">
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index 2695f4033e..6ec4da055d 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -69,9 +69,15 @@ import {
 } from '@backstage/catalog-model';
 
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-import {
-  ReportIssue,
-} from '@backstage/plugin-techdocs-module-addons-contrib';
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+
+const techdocsContent = (
+  <EntityTechdocsContent>
+    <TechDocsAddons>
+      <ReportIssue />
+    </TechDocsAddons>
+  </EntityTechdocsContent>
+);
 
 const cicdContent = (
   // This is an example of how you can implement your company's logic in entity page.
@@ -172,11 +178,7 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
 );
@@ -203,11 +205,7 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
 );
@@ -226,11 +224,7 @@ const defaultEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent>
-        <TechDocsAddons>
-          <ReportIssue />
-        </TechDocsAddons>
-      </EntityTechdocsContent>
+      {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
 );