plugins: updates to convert legacy route refs to new system

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/graphiql/src/alpha.tsx

@@ -32,19 +32,15 @@ import {
   GraphQLEndpoint,
   GraphiQLIcon,
 } from '@backstage/plugin-graphiql';
-import {
-  createApiFactory,
-  createRouteRef,
-  IconComponent,
-} from '@backstage/core-plugin-api';
-
-const graphiqlRouteRef = createRouteRef({ id: 'plugin.graphiql.page' });
+import { createApiFactory, IconComponent } from '@backstage/core-plugin-api';
+import { graphiQLRouteRef } from './route-refs';
+import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
 
 /** @alpha */
 export const GraphiqlPage = createPageExtension({
   id: 'plugin.graphiql.page',
   defaultPath: '/graphiql',
-  routeRef: graphiqlRouteRef,
+  routeRef: convertLegacyRouteRef(graphiQLRouteRef),
   loader: () => import('./components').then(m => <m.GraphiQLPage />),
 });
 
@@ -53,7 +49,7 @@ export const graphiqlPageSidebarItem = createNavItemExtension({
   id: 'plugin.graphiql.nav.index',
   title: 'GraphiQL',
   icon: GraphiQLIcon as IconComponent,
-  routeRef: graphiqlRouteRef,
+  routeRef: convertLegacyRouteRef(graphiQLRouteRef),
 });
 
 /** @internal */
@@ -125,4 +121,7 @@ export default createPlugin({
     gitlabGraphiQLBrowseExtension,
     graphiqlPageSidebarItem,
   ],
+  routes: {
+    root: convertLegacyRouteRef(graphiQLRouteRef),
+  },
 });

plugins/search/src/alpha.tsx

@@ -28,7 +28,6 @@ import {
   useSidebarPinState,
 } from '@backstage/core-components';
 import {
-  createRouteRef,
   useApi,
   DiscoveryApi,
   IdentityApi,
@@ -64,9 +63,11 @@ import { SearchResult } from '@backstage/plugin-search-common';
 import { searchApiRef } from '@backstage/plugin-search-react';
 import { searchResultItemExtensionData } from '@backstage/plugin-search-react/alpha';
 
+import { rootRouteRef } from './plugin';
 import { SearchClient } from './apis';
 import { SearchType } from './components/SearchType';
 import { UrlUpdater } from './components/SearchPage/SearchPage';
+import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
 
 /** @alpha */
 export const SearchApi = createApiExtension({
@@ -95,12 +96,10 @@ const useSearchPageStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const searchRouteRef = createRouteRef({ id: 'plugin.search.page' });
-
 /** @alpha */
 export const SearchPage = createPageExtension({
   id: 'plugin.search.page',
-  routeRef: searchRouteRef,
+  routeRef: convertLegacyRouteRef(rootRouteRef),
   configSchema: createSchemaFromZod(z =>
     z.object({
       path: z.string().default('/search'),
@@ -237,7 +236,7 @@ export const SearchPage = createPageExtension({
 /** @alpha */
 export const SearchNavItem = createNavItemExtension({
   id: 'plugin.search.nav.index',
-  routeRef: searchRouteRef,
+  routeRef: convertLegacyRouteRef(rootRouteRef),
   title: 'Search',
   icon: SearchIcon,
 });
@@ -246,4 +245,7 @@ export const SearchNavItem = createNavItemExtension({
 export default createPlugin({
   id: 'plugin.search',
   extensions: [SearchApi, SearchPage, SearchNavItem],
+  routes: {
+    root: convertLegacyRouteRef(rootRouteRef),
+  },
 });

plugins/tech-radar/src/alpha.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createApiFactory, createRouteRef } from '@backstage/core-plugin-api';
+import { createApiFactory } from '@backstage/core-plugin-api';
 import {
   createApiExtension,
   createPageExtension,
@@ -24,14 +24,14 @@ import {
 import React from 'react';
 import { techRadarApiRef } from './api';
 import { SampleTechRadarApi } from './sample';
-
-const techRadarRouteRef = createRouteRef({ id: 'plugin.techradar.page' });
+import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
+import { rootRouteRef } from './plugin';
 
 /** @alpha */
 export const TechRadarPage = createPageExtension({
   id: 'plugin.techradar.page',
   defaultPath: '/tech-radar',
-  routeRef: techRadarRouteRef,
+  routeRef: convertLegacyRouteRef(rootRouteRef),
   configSchema: createSchemaFromZod(z =>
     z.object({
       title: z.string().default('Tech Radar'),
@@ -59,4 +59,7 @@ const sampleTechRadarApi = createApiExtension({
 export default createPlugin({
   id: 'tech-radar',
   extensions: [TechRadarPage, sampleTechRadarApi],
+  routes: {
+    root: convertLegacyRouteRef(rootRouteRef),
+  },
 });

plugins/tech-radar/src/plugin.ts

@@ -23,7 +23,7 @@ import {
   createApiFactory,
 } from '@backstage/core-plugin-api';
 
-const rootRouteRef = createRouteRef({
+export const rootRouteRef = createRouteRef({
   id: 'tech-radar',
 });
 

plugins/user-settings/src/alpha.tsx

@@ -13,29 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createRouteRef } from '@backstage/core-plugin-api';
 import {
   coreExtensionData,
   createExtensionInput,
   createPageExtension,
   createPlugin,
 } from '@backstage/frontend-plugin-api';
+import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
+import { settingsRouteRef } from './plugin';
 
 import React from 'react';
 
 export * from './translation';
 
-/**
- * @alpha
- */
-export const userSettingsRouteRef = createRouteRef({
-  id: 'plugin.user-settings.page',
-});
-
 const UserSettingsPage = createPageExtension({
   id: 'plugin.user-settings.page',
   defaultPath: '/settings',
-  routeRef: userSettingsRouteRef,
+  routeRef: convertLegacyRouteRef(settingsRouteRef),
   inputs: {
     providerSettings: createExtensionInput(
       {
@@ -56,4 +50,7 @@ const UserSettingsPage = createPageExtension({
 export default createPlugin({
   id: 'user-settings',
   extensions: [UserSettingsPage],
+  routes: {
+    root: convertLegacyRouteRef(settingsRouteRef),
+  },
 });