From 969cf48858cd34e0dc400dc8039d1492a0fc29ec Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 7 Sep 2020 16:56:03 +0200 Subject: [PATCH] [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 | 2 + .../app/src/components/catalog/EntityPage.tsx | 17 ++++++- .../default-app/packages/app/src/App.tsx | 2 + .../app/src/components/catalog/EntityPage.tsx | 17 +++++++ .../src/EntityPageDocs.tsx} | 19 ++++---- plugins/techdocs/src/Router.tsx | 48 +++++++++++++++++++ plugins/techdocs/src/index.ts | 1 + plugins/techdocs/src/plugin.ts | 15 +++--- .../src/reader/components/TechDocsHome.tsx | 11 +++-- 9 files changed, 108 insertions(+), 24 deletions(-) rename plugins/{catalog/src/components/EntityPageDocs/EntityDocsPage.tsx => techdocs/src/EntityPageDocs.tsx} (72%) create mode 100644 plugins/techdocs/src/Router.tsx diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index cb38726716..8ddf53783d 100644 --- a/packages/app/src/App.tsx +++ b/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={} /> + } /> {...deprecatedAppRoutes} diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 34fc5c470e..8783df9452 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/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={} /> + } + /> ); @@ -75,9 +81,13 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => ( title="Sentry" element={} /> + } + /> ); - const DefaultEntityPage = ({ entity }: { entity: Entity }) => ( ( title="Overview" element={} /> + } + /> ); diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx index f002bbc7c7..3e6a0ef00e 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.tsx +++ b/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={} /> + } /> {deprecatedAppRoutes} diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index be22003f4f..559a838135 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/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={} /> + } + /> ); @@ -59,6 +66,11 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => ( title="CI/CD" element={} /> + } + /> ); @@ -69,6 +81,11 @@ const DefaultEntityPage = ({ entity }: { entity: Entity }) => ( title="Overview" element={} /> + } + /> ); diff --git a/plugins/catalog/src/components/EntityPageDocs/EntityDocsPage.tsx b/plugins/techdocs/src/EntityPageDocs.tsx similarity index 72% rename from plugins/catalog/src/components/EntityPageDocs/EntityDocsPage.tsx rename to plugins/techdocs/src/EntityPageDocs.tsx index ceba7e3200..d10c7a5932 100644 --- a/plugins/catalog/src/components/EntityPageDocs/EntityDocsPage.tsx +++ b/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 ( - - - + ); }; diff --git a/plugins/techdocs/src/Router.tsx b/plugins/techdocs/src/Router.tsx new file mode 100644 index 0000000000..45daa3f3d9 --- /dev/null +++ b/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 ( + + } /> + } /> + + ); +}; + +export const EmbeddedDocsRouter = ({ entity }: { entity: Entity }) => { + return ( + + } + /> + + ); +}; diff --git a/plugins/techdocs/src/index.ts b/plugins/techdocs/src/index.ts index 2a412d1b20..1726e0daf3 100644 --- a/plugins/techdocs/src/index.ts +++ b/plugins/techdocs/src/index.ts @@ -15,5 +15,6 @@ */ export { plugin } from './plugin'; +export { Router, EmbeddedDocsRouter } from './Router'; export * from './reader'; export * from './api'; diff --git a/plugins/techdocs/src/plugin.ts b/plugins/techdocs/src/plugin.ts index 9b09544427..e75d488595 100644 --- a/plugins/techdocs/src/plugin.ts +++ b/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); - }, }); diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx index 17b9fd36f7..e51de8f57f 100644 --- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx +++ b/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 = () => { 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}