[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

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}