From abd655e42d4ed416b70848ffdb1c4b99d189f13b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 22 Feb 2021 00:55:01 +0100 Subject: [PATCH 1/2] app: migrate to use top-level page extensions --- packages/app/src/App.tsx | 51 +++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 4a49db02d5..9a7c857167 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -17,7 +17,6 @@ import { AlertDisplay, createApp, - createRouteRef, FlatRoutes, OAuthRequestDialog, SignInPage, @@ -29,13 +28,12 @@ import { } from '@backstage/plugin-catalog'; import { CatalogImportPage } from '@backstage/plugin-catalog-import'; import { ExplorePage } from '@backstage/plugin-explore'; -import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql'; -import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse'; -import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component'; +import { GraphiQLPage } from '@backstage/plugin-graphiql'; +import { LighthousePage } from '@backstage/plugin-lighthouse'; import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; -import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; -import { Router as DocsRouter } from '@backstage/plugin-techdocs'; -import { Router as SettingsRouter } from '@backstage/plugin-user-settings'; +import { TechRadarPage } from '@backstage/plugin-tech-radar'; +import { TechdocsPage } from '@backstage/plugin-techdocs'; +import { UserSettingsPage } from '@backstage/plugin-user-settings'; import React from 'react'; import { hot } from 'react-hot-loader/root'; import { Navigate, Route } from 'react-router'; @@ -45,6 +43,15 @@ import Root from './components/Root'; import { providers } from './identityProviders'; import * as plugins from './plugins'; import AlarmIcon from '@material-ui/icons/Alarm'; +import { ApiExplorerPage } from '@backstage/plugin-api-docs'; +import { GcpProjectsPage } from '@backstage/plugin-gcp-projects'; +import { NewRelicPage } from '@backstage/plugin-newrelic'; +import { SearchPage } from '@backstage/plugin-search'; +import { + CostInsightsLabelDataflowInstructionsPage, + CostInsightsPage, + CostInsightsProjectGrowthInstructionsPage, +} from '@backstage/plugin-cost-insights'; const app = createApp({ apis, @@ -74,12 +81,6 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); -const deprecatedAppRoutes = app.getRoutes(); - -const catalogRouteRef = createRouteRef({ - path: '/catalog', - title: 'Service Catalog', -}); const routes = ( @@ -92,21 +93,29 @@ const routes = ( } /> - } /> + } /> } /> } /> } + element={} /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> } + path="/cost-insights/investigating-growth" + element={} /> - } /> - {...deprecatedAppRoutes} + } + /> + } /> ); From 7a1b2ba0e70819ea5d63d4914eafb6ced21e7d71 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 22 Feb 2021 13:01:59 +0100 Subject: [PATCH 2/2] create-app: migrate top-level routes to use extensions --- .changeset/stale-ducks-sing.md | 56 +++++++++++++++++++ .../default-app/packages/app/src/App.tsx | 23 ++++---- 2 files changed, 66 insertions(+), 13 deletions(-) create mode 100644 .changeset/stale-ducks-sing.md diff --git a/.changeset/stale-ducks-sing.md b/.changeset/stale-ducks-sing.md new file mode 100644 index 0000000000..59eb956fd0 --- /dev/null +++ b/.changeset/stale-ducks-sing.md @@ -0,0 +1,56 @@ +--- +'@backstage/create-app': patch +--- + +Migrated away from using deprecated routes and router components at top-level in the app, and instead use routable extension pages. + +To apply this change to an existing app, make the following changes to `packages/app/src/App.tsx`: + +Update imports and remove the usage of the deprecated `app.getRoutes()`. + +```diff +-import { Router as DocsRouter } from '@backstage/plugin-techdocs'; ++import { TechdocsPage } from '@backstage/plugin-techdocs'; + import { CatalogImportPage } from '@backstage/plugin-catalog-import'; +-import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; +-import { SearchPage as SearchRouter } from '@backstage/plugin-search'; +-import { Router as SettingsRouter } from '@backstage/plugin-user-settings'; ++import { TechRadarPage } from '@backstage/plugin-tech-radar'; ++import { SearchPage } from '@backstage/plugin-search'; ++import { UserSettingsPage } from '@backstage/plugin-user-settings'; ++import { ApiExplorerPage } from '@backstage/plugin-api-docs'; + import { EntityPage } from './components/catalog/EntityPage'; + import { scaffolderPlugin, ScaffolderPage } from '@backstage/plugin-scaffolder'; + + + const AppProvider = app.getProvider(); + const AppRouter = app.getRouter(); +-const deprecatedAppRoutes = app.getRoutes(); +``` + +As well as update or add the following routes: + +```diff + } /> +- } /> ++ } /> ++ } /> + } ++ element={} + /> + } /> +- } +- /> +- } /> +- {deprecatedAppRoutes} ++ } /> ++ } /> +``` + +If you have added additional plugins with registered routes or are using `Router` components from other plugins, these should be migrated to use the `*Page` components as well. See [this commit](https://github.com/backstage/backstage/commit/abd655e42d4ed416b70848ffdb1c4b99d189f13b) for more examples of how to migrate. + +For more information and the background to this change, see the [composability system migration docs](https://backstage.io/docs/plugins/composability). 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 cf31647ce0..d4f1178899 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 @@ -15,11 +15,12 @@ import { CatalogIndexPage, CatalogEntityPage, } from '@backstage/plugin-catalog'; -import { Router as DocsRouter } from '@backstage/plugin-techdocs'; +import { TechdocsPage } from '@backstage/plugin-techdocs'; import { CatalogImportPage } from '@backstage/plugin-catalog-import'; -import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; -import { SearchPage as SearchRouter } from '@backstage/plugin-search'; -import { Router as SettingsRouter } from '@backstage/plugin-user-settings'; +import { TechRadarPage } from '@backstage/plugin-tech-radar'; +import { SearchPage } from '@backstage/plugin-search'; +import { UserSettingsPage } from '@backstage/plugin-user-settings'; +import { ApiExplorerPage } from '@backstage/plugin-api-docs'; import { EntityPage } from './components/catalog/EntityPage'; import { scaffolderPlugin, ScaffolderPage } from '@backstage/plugin-scaffolder'; @@ -36,7 +37,6 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); -const deprecatedAppRoutes = app.getRoutes(); const App = () => ( @@ -54,19 +54,16 @@ const App = () => ( > - } /> + } /> } /> + } /> } + element={} /> } /> - } - /> - } /> - {deprecatedAppRoutes} + } /> + } />