[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>
 );