fix(techdocs): embed cli app reader

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/techdocs-cli-embedded-app/package.json

@@ -17,6 +17,7 @@
     "@backstage/integration-react": "^1.0.1-next.1",
     "@backstage/plugin-catalog": "^1.1.0-next.1",
     "@backstage/plugin-techdocs": "^1.0.1-next.1",
+    "@backstage/techdocs-addons": "^0.0.0",
     "@backstage/test-utils": "^1.0.1-next.1",
     "@backstage/theme": "^0.2.15",
     "@material-ui/core": "^4.11.0",

packages/techdocs-cli-embedded-app/src/App.tsx

@@ -16,20 +16,27 @@
 
 import React from 'react';
 import { Navigate, Route } from 'react-router';
-import { createApp } from '@backstage/app-defaults';
-import { FlatRoutes } from '@backstage/core-app-api';
-import { CatalogEntityPage } from '@backstage/plugin-catalog';
 
 import {
   DefaultTechDocsHome,
   TechDocsIndexPage,
   TechDocsReaderPage,
+  techdocsPlugin,
 } from '@backstage/plugin-techdocs';
+import {
+  createTechDocsAddon,
+  TechDocsAddons,
+  TechDocsAddonLocations,
+} from '@backstage/techdocs-addons';
+import { createApp } from '@backstage/app-defaults';
+import { FlatRoutes } from '@backstage/core-app-api';
+import { CatalogEntityPage } from '@backstage/plugin-catalog';
+
 import { apis } from './apis';
-import { Root } from './components/Root';
-import { techDocsPage } from './components/TechDocsPage';
 import * as plugins from './plugins';
 import { configLoader } from './config';
+import { Root } from './components/Root';
+import { techDocsPage, TechDocsThemeToggle } from './components/TechDocsPage';
 
 const app = createApp({
   apis,
@@ -40,6 +47,14 @@ const app = createApp({
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 
+const ThemeToggleAddon = techdocsPlugin.provide(
+  createTechDocsAddon({
+    name: 'ThemeToggleAddon',
+    component: TechDocsThemeToggle,
+    location: TechDocsAddonLocations.HEADER,
+  }),
+);
+
 const routes = (
   <FlatRoutes>
     <Navigate key="/" to="/docs/default/component/local/" />
@@ -56,6 +71,9 @@ const routes = (
       element={<TechDocsReaderPage />}
     >
       {techDocsPage}
+      <TechDocsAddons>
+        <ThemeToggleAddon />
+      </TechDocsAddons>
     </Route>
   </FlatRoutes>
 );

packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx

@@ -92,7 +92,7 @@ const TechdocsThemeProvider: FC = ({ children }) => {
 
 const useTechDocsTheme = () => useContext(TechDocsThemeContext);
 
-const TechDocsThemeToggle = () => {
+export const TechDocsThemeToggle = () => {
   const classes = useStyles();
   const { theme, toggleTheme } = useTechDocsTheme();
 
@@ -121,12 +121,10 @@ const TechDocsThemeToggle = () => {
 };
 
 export const techDocsPage = (
-  <TechdocsThemeProvider>
-    <TechDocsReaderPage>
-      <TechDocsReaderPageHeader>
-        <TechDocsThemeToggle />
-      </TechDocsReaderPageHeader>
-      <TechDocsReaderPageContent />
-    </TechDocsReaderPage>
-  </TechdocsThemeProvider>
+  <TechDocsReaderPage>
+    <TechdocsThemeProvider>
+      <TechDocsReaderPageHeader />
+      <TechDocsReaderPageContent withSearch={false} />
+    </TechdocsThemeProvider>
+  </TechDocsReaderPage>
 );

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
 
 import { Skeleton } from '@material-ui/lab';