[TechDocs] migrate techdocs to use new routing/catalog api (#2312)

* migrate techdocs to use new routing

* use new techdocs routing in default app

* new EntityPageDocs and Router components

* remove unused code

* remove unused import

packages/app/src/App.tsx

@@ -27,6 +27,7 @@ import { apis } from './apis';
 import { hot } from 'react-hot-loader/root';
 import { providers } from './identityProviders';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
+import { Router as DocsRouter } from '@backstage/plugin-techdocs';
 import { Route, Routes, Navigate } from 'react-router';
 
 import { EntityPage } from './components/catalog/EntityPage';
@@ -58,6 +59,7 @@ const AppRoutes = () => (
       path="/catalog/*"
       element={<CatalogRouter EntityPage={EntityPage} />}
     />
+    <Route path="/docs/*" element={<DocsRouter />} />
     <Navigate key="/" to="/catalog" />
     {...deprecatedAppRoutes}
   </Routes>

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

@@ -16,6 +16,7 @@
 import { Router as ApiDocsRouter } from '@backstage/plugin-api-docs';
 import { Router as GitHubActionsRouter } from '@backstage/plugin-github-actions';
 import { Router as SentryRouter } from '@backstage/plugin-sentry';
+import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
 import React from 'react';
 import {
   AboutCard,
@@ -55,6 +56,11 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
       title="API"
       element={<ApiDocsRouter entity={entity} />}
     />
+    <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 
@@ -75,9 +81,13 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
       title="Sentry"
       element={<SentryRouter entity={entity} />}
     />
+    <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
-
 const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
   <EntityPageLayout>
     <EntityPageLayout.Content
@@ -85,6 +95,11 @@ const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
       title="Overview"
       element={<OverviewContent entity={entity} />}
     />
+    <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -10,6 +10,7 @@ import * as plugins from './plugins';
 import { AppSidebar } from './sidebar';
 import { Route, Routes, Navigate } from 'react-router';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
+import { Router as DocsRouter } from '@backstage/plugin-techdocs';
 import { EntityPage } from './components/catalog/EntityPage';
 
 const app = createApp({
@@ -33,6 +34,7 @@ const App: FC<{}> = () => (
             path="/catalog/*"
             element={<CatalogRouter EntityPage={EntityPage} />}
           />
+          <Route path="/docs/*" element={<DocsRouter />} />
           <Navigate key="/" to="/catalog" />
           {deprecatedAppRoutes}
         </Routes>

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -15,6 +15,8 @@
  */
 import { Router as ApiDocsRouter } from '@backstage/plugin-api-docs';
 import { Router as GitHubActionsRouter } from '@backstage/plugin-github-actions';
+import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
+
 import React from 'react';
 import {
   EntityPageLayout,
@@ -44,6 +46,11 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
       title="API"
       element={<ApiDocsRouter entity={entity} />}
     />
+     <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 
@@ -59,6 +66,11 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
       title="CI/CD"
       element={<GitHubActionsRouter entity={entity} />}
     />
+     <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 
@@ -69,6 +81,11 @@ const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
       title="Overview"
       element={<OverviewContent entity={entity} />}
     />
+     <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 

plugins/techdocs/src/EntityPageDocs.tsx

@@ -16,19 +16,16 @@
 
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
-import { Reader } from '@backstage/plugin-techdocs';
-import { Content } from '@backstage/core';
+import { Reader } from './reader';
 
 export const EntityPageDocs = ({ entity }: { entity: Entity }) => {
   return (
-    <Content>
-      <Reader
-        entityId={{
-          kind: entity.kind,
-          namespace: entity.metadata.namespace,
-          name: entity.metadata.name,
-        }}
-      />
-    </Content>
+    <Reader
+      entityId={{
+        kind: entity.kind,
+        namespace: entity.metadata.namespace,
+        name: entity.metadata.name,
+      }}
+    />
   );
 };

plugins/techdocs/src/Router.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Entity } from '@backstage/catalog-model';
+
+import {
+  rootRouteRef,
+  rootDocsRouteRef,
+  rootCatalogDocsRouteRef,
+} from './plugin';
+import { TechDocsHome } from './reader/components/TechDocsHome';
+import { TechDocsPage } from './reader/components/TechDocsPage';
+import { EntityPageDocs } from './EntityPageDocs';
+
+export const Router = () => {
+  return (
+    <Routes>
+      <Route path={`/${rootRouteRef.path}`} element={<TechDocsHome />} />
+      <Route path={`/${rootDocsRouteRef.path}`} element={<TechDocsPage />} />
+    </Routes>
+  );
+};
+
+export const EmbeddedDocsRouter = ({ entity }: { entity: Entity }) => {
+  return (
+    <Routes>
+      <Route
+        path={`/${rootCatalogDocsRouteRef.path}`}
+        element={<EntityPageDocs entity={entity} />}
+      />
+    </Routes>
+  );
+};

plugins/techdocs/src/index.ts

@@ -15,5 +15,6 @@
  */
 
 export { plugin } from './plugin';
+export { Router, EmbeddedDocsRouter } from './Router';
 export * from './reader';
 export * from './api';

plugins/techdocs/src/plugin.ts

@@ -30,23 +30,22 @@
  */
 
 import { createPlugin, createRouteRef } from '@backstage/core';
-import { TechDocsHome } from './reader/components/TechDocsHome';
-import { TechDocsPage } from './reader/components/TechDocsPage';
 
 export const rootRouteRef = createRouteRef({
-  path: '/docs',
+  path: '',
   title: 'TechDocs Landing Page',
 });
 
 export const rootDocsRouteRef = createRouteRef({
-  path: '/docs/:entityId/*',
+  path: ':entityId/*',
+  title: 'Docs',
+});
+
+export const rootCatalogDocsRouteRef = createRouteRef({
+  path: '*',
   title: 'Docs',
 });
 
 export const plugin = createPlugin({
   id: 'techdocs',
-  register({ router }) {
-    router.addRoute(rootRouteRef, TechDocsHome);
-    router.addRoute(rootDocsRouteRef, TechDocsPage);
-  },
 });

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

@@ -16,11 +16,12 @@
 
 import React from 'react';
 import { useAsync } from 'react-use';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, generatePath } from 'react-router-dom';
 import { Grid } from '@material-ui/core';
 import { ItemCard, Progress, useApi } from '@backstage/core';
 import { TechDocsPageWrapper } from './TechDocsPageWrapper';
 import { catalogApiRef } from '@backstage/plugin-catalog';
+import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
   const catalogApi = useApi(catalogApiRef);
@@ -67,9 +68,11 @@ export const TechDocsHome = () => {
                 <ItemCard
                   onClick={() =>
                     navigate(
-                      `/docs/${entity.kind}:${
-                        entity.metadata.namespace ?? ''
-                      }:${entity.metadata.name}`,
+                      generatePath(rootDocsRouteRef.path, {
+                        entityId: `${entity.kind}:${
+                          entity.metadata.namespace ?? ''
+                        }:${entity.metadata.name}`,
+                      }),
                     )
                   }
                   title={entity.metadata.name}