Merge pull request #4636 from backstage/rugvip/migraine

app,create-app: migrate to using top-level extension pages instead of routers or registered routes

.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
+   <Route path="/create" element={<ScaffolderPage />} />
+-  <Route path="/docs" element={<DocsRouter />} />
++  <Route path="/docs" element={<TechdocsPage />} />
++  <Route path="/api-docs" element={<ApiExplorerPage />} />
+   <Route
+     path="/tech-radar"
+-    element={<TechRadarRouter width={1500} height={800} />}
++    element={<TechRadarPage width={1500} height={800} />}
+   />
+   <Route path="/catalog-import" element={<CatalogImportPage />} />
+-  <Route
+-    path="/search"
+-    element={<SearchRouter/>}
+-  />
+-  <Route path="/settings" element={<SettingsRouter />} />
+-  {deprecatedAppRoutes}
++  <Route path="/search" element={<SearchPage />} />
++  <Route path="/settings" element={<UserSettingsPage />} />
+```
+
+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).

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 = (
   <FlatRoutes>
@@ -92,21 +93,29 @@ const routes = (
       <EntityPage />
     </Route>
     <Route path="/catalog-import" element={<CatalogImportPage />} />
-    <Route path="/docs" element={<DocsRouter />} />
+    <Route path="/docs" element={<TechdocsPage />} />
     <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/explore" element={<ExplorePage />} />
     <Route
       path="/tech-radar"
-      element={<TechRadarRouter width={1500} height={800} />}
+      element={<TechRadarPage width={1500} height={800} />}
     />
-    <Route path="/graphiql" element={<GraphiQLRouter />} />
-    <Route path="/lighthouse" element={<LighthouseRouter />} />
+    <Route path="/graphiql" element={<GraphiQLPage />} />
+    <Route path="/lighthouse" element={<LighthousePage />} />
+    <Route path="/api-docs" element={<ApiExplorerPage />} />
+    <Route path="/gcp-projects" element={<GcpProjectsPage />} />
+    <Route path="/newrelic" element={<NewRelicPage />} />
+    <Route path="/search" element={<SearchPage />} />
+    <Route path="/cost-insights" element={<CostInsightsPage />} />
     <Route
-      path="/register-component"
-      element={<RegisterComponentRouter catalogRouteRef={catalogRouteRef} />}
+      path="/cost-insights/investigating-growth"
+      element={<CostInsightsProjectGrowthInstructionsPage />}
     />
-    <Route path="/settings" element={<SettingsRouter />} />
-    {...deprecatedAppRoutes}
+    <Route
+      path="/cost-insights/labeling-jobs"
+      element={<CostInsightsLabelDataflowInstructionsPage />}
+    />
+    <Route path="/settings" element={<UserSettingsPage />} />
   </FlatRoutes>
 );
 

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 = () => (
   <AppProvider>
@@ -54,19 +54,16 @@ const App = () => (
           >
             <EntityPage />
           </Route>
-          <Route path="/docs" element={<DocsRouter />} />
+          <Route path="/docs" element={<TechdocsPage />} />
           <Route path="/create" element={<ScaffolderPage />} />
+          <Route path="/api-docs" element={<ApiExplorerPage />} />
           <Route
             path="/tech-radar"
-            element={<TechRadarRouter width={1500} height={800} />}
+            element={<TechRadarPage width={1500} height={800} />}
           />
           <Route path="/catalog-import" element={<CatalogImportPage />} />
-          <Route
-            path="/search"
-            element={<SearchRouter/>}
-          />
-          <Route path="/settings" element={<SettingsRouter />} />
-          {deprecatedAppRoutes}
+          <Route path="/search" element={<SearchPage />} />
+          <Route path="/settings" element={<UserSettingsPage />} />
         </FlatRoutes>
       </SidebarPage>
     </AppRouter>