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),
+  },
 });