Merge pull request #6124 from backstage/rugvip/noroutes

plugins,dev-utils: remove usage of deprecated route registrations

plugins/api-docs/dev/index.tsx

@@ -30,6 +30,13 @@ import graphqlApiEntity from './graphql-example-api.yaml';
 import openapiApiEntity from './openapi-example-api.yaml';
 import otherApiEntity from './other-example-api.yaml';
 
+const mockEntities = ([
+  openapiApiEntity,
+  asyncapiApiEntity,
+  graphqlApiEntity,
+  otherApiEntity,
+] as unknown) as Entity[];
+
 createDevApp()
   .registerApi({
     api: catalogApiRef,
@@ -38,14 +45,12 @@ createDevApp()
       (({
         async getEntities() {
           return {
-            items: [
-              openapiApiEntity,
-              asyncapiApiEntity,
-              graphqlApiEntity,
-              otherApiEntity,
-            ],
+            items: mockEntities.slice(),
           };
         },
+        async getEntityByName(name: string) {
+          return mockEntities.find(e => e.metadata.name === name);
+        },
       } as unknown) as typeof catalogApiRef.T),
   })
   .registerApi({

plugins/api-docs/src/plugin.ts

@@ -22,7 +22,6 @@ import {
   createRoutableExtension,
 } from '@backstage/core';
 import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
-import { ApiExplorerPage as Page } from './components/ApiExplorerPage/ApiExplorerPage';
 import { apiDocsConfigRef } from './config';
 import { createComponentRouteRef, rootRoute } from './routes';
 
@@ -48,9 +47,6 @@ export const apiDocsPlugin = createPlugin({
   externalRoutes: {
     createComponent: createComponentRouteRef,
   },
-  register({ router }) {
-    router.addRoute(rootRoute, Page);
-  },
 });
 
 export const ApiExplorerPage = apiDocsPlugin.provide(

plugins/cost-insights/dev/index.tsx

@@ -13,10 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { ExampleCostInsightsClient } from '../src/example';
 import { costInsightsApiRef } from '../src/api';
-import { costInsightsPlugin } from '../src/plugin';
+import {
+  costInsightsPlugin,
+  CostInsightsPage,
+  CostInsightsProjectGrowthInstructionsPage,
+  CostInsightsLabelDataflowInstructionsPage,
+} from '../src/plugin';
 
 createDevApp()
   .registerPlugin(costInsightsPlugin)
@@ -25,4 +32,16 @@ createDevApp()
     deps: {},
     factory: () => new ExampleCostInsightsClient(),
   })
+  .addPage({
+    title: 'Cost Insights',
+    element: <CostInsightsPage />,
+  })
+  .addPage({
+    title: 'Growth',
+    element: <CostInsightsProjectGrowthInstructionsPage />,
+  })
+  .addPage({
+    title: 'Labelling',
+    element: <CostInsightsLabelDataflowInstructionsPage />,
+  })
   .render();

plugins/cost-insights/src/plugin.ts

@@ -19,9 +19,6 @@ import {
   createRouteRef,
   createRoutableExtension,
 } from '@backstage/core';
-import { CostInsightsPage as CostInsightsPageComponent } from './components/CostInsightsPage';
-import { ProjectGrowthInstructionsPage as ProjectGrowthInstructionsPageComponent } from './components/ProjectGrowthInstructionsPage';
-import { LabelDataflowInstructionsPage as LabelDataflowInstructionsPageComponent } from './components/LabelDataflowInstructionsPage';
 
 export const rootRouteRef = createRouteRef({
   path: '/cost-insights',
@@ -40,16 +37,7 @@ export const unlabeledDataflowAlertRef = createRouteRef({
 
 export const costInsightsPlugin = createPlugin({
   id: 'cost-insights',
-  register({ router, featureFlags }) {
-    router.addRoute(rootRouteRef, CostInsightsPageComponent);
-    router.addRoute(
-      projectGrowthAlertRef,
-      ProjectGrowthInstructionsPageComponent,
-    );
-    router.addRoute(
-      unlabeledDataflowAlertRef,
-      LabelDataflowInstructionsPageComponent,
-    );
+  register({ featureFlags }) {
     featureFlags.register('cost-insights-currencies');
   },
   routes: {

plugins/gcp-projects/dev/index.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { gcpProjectsPlugin } from '../src/plugin';
+import { gcpProjectsPlugin, GcpProjectsPage } from '../src/plugin';
 
-createDevApp().registerPlugin(gcpProjectsPlugin).render();
+createDevApp()
+  .registerPlugin(gcpProjectsPlugin)
+  .addPage({
+    title: 'GCP Projects',
+    element: <GcpProjectsPage />,
+  })
+  .render();

plugins/gcp-projects/src/plugin.ts

@@ -21,10 +21,7 @@ import {
   googleAuthApiRef,
 } from '@backstage/core';
 import { gcpApiRef, GcpClient } from './api';
-import { NewProjectPage } from './components/NewProjectPage';
-import { ProjectDetailsPage } from './components/ProjectDetailsPage';
-import { ProjectListPage } from './components/ProjectListPage';
-import { rootRouteRef, projectRouteRef, newProjectRouteRef } from './routes';
+import { rootRouteRef } from './routes';
 
 export const gcpProjectsPlugin = createPlugin({
   id: 'gcp-projects',
@@ -40,11 +37,6 @@ export const gcpProjectsPlugin = createPlugin({
       },
     }),
   ],
-  register({ router }) {
-    router.addRoute(rootRouteRef, ProjectListPage);
-    router.addRoute(projectRouteRef, ProjectDetailsPage);
-    router.addRoute(newProjectRouteRef, NewProjectPage);
-  },
 });
 
 export const GcpProjectsPage = gcpProjectsPlugin.provide(

plugins/gitops-profiles/src/plugin.ts

@@ -19,9 +19,6 @@ import {
   createApiFactory,
   createRoutableExtension,
 } from '@backstage/core';
-import ProfileCatalog from './components/ProfileCatalog';
-import ClusterPage from './components/ClusterPage';
-import ClusterList from './components/ClusterList';
 import {
   gitOpsClusterListRoute,
   gitOpsClusterDetailsRoute,
@@ -34,11 +31,6 @@ export const gitopsProfilesPlugin = createPlugin({
   apis: [
     createApiFactory(gitOpsApiRef, new GitOpsRestApi('http://localhost:3008')),
   ],
-  register({ router }) {
-    router.addRoute(gitOpsClusterListRoute, ClusterList);
-    router.addRoute(gitOpsClusterDetailsRoute, ClusterPage);
-    router.addRoute(gitOpsClusterCreateRoute, ProfileCatalog);
-  },
   routes: {
     listPage: gitOpsClusterListRoute,
     detailsPage: gitOpsClusterDetailsRoute,

plugins/newrelic/dev/index.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { newRelicPlugin } from '../src/plugin';
+import { newRelicPlugin, NewRelicPage } from '../src/plugin';
 
-createDevApp().registerPlugin(newRelicPlugin).render();
+createDevApp()
+  .registerPlugin(newRelicPlugin)
+  .addPage({
+    title: 'New Relic',
+    element: <NewRelicPage />,
+  })
+  .render();

plugins/newrelic/src/plugin.ts

@@ -22,7 +22,6 @@ import {
   createRoutableExtension,
 } from '@backstage/core';
 import { NewRelicClient, newRelicApiRef } from './api';
-import NewRelicComponent from './components/NewRelicComponent';
 
 export const rootRouteRef = createRouteRef({
   path: '/newrelic',
@@ -38,9 +37,6 @@ export const newRelicPlugin = createPlugin({
       factory: ({ discoveryApi }) => new NewRelicClient({ discoveryApi }),
     }),
   ],
-  register({ router }) {
-    router.addRoute(rootRouteRef, NewRelicComponent);
-  },
   routes: {
     root: rootRouteRef,
   },

plugins/welcome/dev/index.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { welcomePlugin } from '../src/plugin';
+import { welcomePlugin, WelcomePage } from '../src/plugin';
 
-createDevApp().registerPlugin(welcomePlugin).render();
+createDevApp()
+  .registerPlugin(welcomePlugin)
+  .addPage({
+    title: 'Welcome',
+    element: <WelcomePage />,
+  })
+  .render();

plugins/welcome/src/plugin.ts

@@ -19,7 +19,6 @@ import {
   createRoutableExtension,
   createRouteRef,
 } from '@backstage/core';
-import WelcomePageComponent from './components/WelcomePage';
 
 export const rootRouteRef = createRouteRef({
   title: 'Welcome',
@@ -27,8 +26,7 @@ export const rootRouteRef = createRouteRef({
 
 export const welcomePlugin = createPlugin({
   id: 'welcome',
-  register({ router, featureFlags }) {
-    router.addRoute(rootRouteRef, WelcomePageComponent);
+  register({ featureFlags }) {
     featureFlags.register('enable-welcome-box');
   },
 });