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