chore: added some more deprecation fixes for the routeRefs

Signed-off-by: blam <ben@blam.sh>

packages/core-plugin-api/src/routing/RouteRef.ts

@@ -78,6 +78,11 @@ export class RouteRefImpl<Params extends AnyParams>
     }
   }
 
+  //  /** @deprecated use `useRouteRef` instead */
+  //   get path() {
+  //     return thuis
+  //   }
+
   get icon() {
     return this.config.icon;
   }

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -17,12 +17,13 @@ import React from 'react';
 import { Box, IconButton, Link, Typography, Tooltip } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
-import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { JenkinsRunStatus } from '../Status';
 import { useBuilds } from '../../../useBuilds';
 import { buildRouteRef } from '../../../../plugin';
 import { Table, TableColumn } from '@backstage/core-components';
 import { Project } from '../../../../api/JenkinsApi';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 const FailCount = ({ count }: { count: number }): JSX.Element | null => {
   if (count !== 0) {
@@ -91,6 +92,8 @@ const generatedColumns: TableColumn[] = [
     field: 'fullName',
     highlight: true,
     render: (row: Partial<Project>) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const routeLink = useRouteRef(buildRouteRef);
       if (!row.fullName || !row.lastBuild?.number) {
         return (
           <>
@@ -105,7 +108,7 @@ const generatedColumns: TableColumn[] = [
       return (
         <Link
           component={RouterLink}
-          to={generatePath(buildRouteRef.path, {
+          to={routeLink({
             jobFullName: encodeURIComponent(row.fullName),
             buildNumber: String(row.lastBuild?.number),
           })}

plugins/jenkins/src/components/Router.tsx

@@ -19,7 +19,7 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { Route, Routes } from 'react-router';
 import { JENKINS_ANNOTATION, LEGACY_JENKINS_ANNOTATION } from '../constants';
-import { buildRouteRef, rootRouteRef } from '../plugin';
+import { buildRouteRef } from '../plugin';
 import { CITable } from './BuildsPage/lib/CITable';
 import { DetailedViewPage } from './BuildWithStepsPage/';
 
@@ -41,7 +41,7 @@ export const Router = (_props: Props) => {
 
   return (
     <Routes>
-      <Route path={`/${rootRouteRef.path}`} element={<CITable />} />
+      <Route path="/" element={<CITable />} />
       <Route path={`/${buildRouteRef.path}`} element={<DetailedViewPage />} />
     </Routes>
   );

plugins/jenkins/src/plugin.ts

@@ -20,6 +20,7 @@ import {
   createPlugin,
   createRoutableExtension,
   createRouteRef,
+  createSubRouteRef,
   discoveryApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
@@ -29,9 +30,10 @@ export const rootRouteRef = createRouteRef({
   id: 'jenkins',
 });
 
-export const buildRouteRef = createRouteRef({
+export const buildRouteRef = createSubRouteRef({
   id: 'jenkins/build',
-  params: ['jobFullName', 'buildNumber'],
+  path: '/builds/:jobFullName/:buildNumber',
+  parent: rootRouteRef,
 });
 
 export const jenkinsPlugin = createPlugin({

plugins/kafka/src/Router.tsx

@@ -18,7 +18,6 @@ import { Entity } from '@backstage/catalog-model';
 import React from 'react';
 import { Route, Routes } from 'react-router';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { rootCatalogKafkaRouteRef } from './plugin';
 import { KAFKA_CONSUMER_GROUP_ANNOTATION } from './constants';
 import { KafkaTopicsForConsumer } from './components/ConsumerGroupOffsets/ConsumerGroupOffsets';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
@@ -44,10 +43,7 @@ export const Router = (_props: Props) => {
 
   return (
     <Routes>
-      <Route
-        path={`${rootCatalogKafkaRouteRef.path}`}
-        element={<KafkaTopicsForConsumer />}
-      />
+      <Route path="/" element={<KafkaTopicsForConsumer />} />
     </Routes>
   );
 };

plugins/kubernetes/src/Router.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Route, Routes } from 'react-router-dom';
-import { rootCatalogKubernetesRouteRef } from './plugin';
 import { KubernetesContent } from './components/KubernetesContent';
 import { Button } from '@material-ui/core';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
@@ -53,10 +52,7 @@ export const Router = (_props: Props) => {
   ) {
     return (
       <Routes>
-        <Route
-          path={`/${rootCatalogKubernetesRouteRef.path}`}
-          element={<KubernetesContent entity={entity} />}
-        />
+        <Route path="/" element={<KubernetesContent entity={entity} />} />
       </Routes>
     );
   }

plugins/rollbar/src/components/Router.tsx

@@ -19,7 +19,6 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { Route, Routes } from 'react-router';
 import { ROLLBAR_ANNOTATION } from '../constants';
-import { rootRouteRef } from '../plugin';
 import { EntityPageRollbar } from './EntityPageRollbar/EntityPageRollbar';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
 
@@ -40,10 +39,7 @@ export const Router = (_props: Props) => {
 
   return (
     <Routes>
-      <Route
-        path={`/${rootRouteRef.path}`}
-        element={<EntityPageRollbar entity={entity} />}
-      />
+      <Route path="/" element={<EntityPageRollbar entity={entity} />} />
     </Routes>
   );
 };

plugins/user-settings/src/components/Settings.tsx

@@ -18,14 +18,14 @@ import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from '../plugin';
 import { SidebarItem } from '@backstage/core-components';
-import { IconComponent } from '@backstage/core-plugin-api';
+import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
 
 type SettingsProps = {
   icon?: IconComponent;
 };
 
 export const Settings = (props: SettingsProps) => {
+  const routePath = useRouteRef(settingsRouteRef);
   const Icon = props.icon ? props.icon : SettingsIcon;
-
-  return <SidebarItem text="Settings" to={settingsRouteRef.path} icon={Icon} />;
+  return <SidebarItem text="Settings" to={routePath()} icon={Icon} />;
 };

plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx

@@ -22,24 +22,23 @@ import {
   TabbedLayout,
 } from '@backstage/core-components';
 import { Overview } from '../Overview';
-import { buildsRouteRef, rootRouteRef } from '../../routes';
-import { RouteRef, SubRouteRef } from '@backstage/core-plugin-api';
+import { buildsRouteRef } from '../../routes';
 import { BuildsPage } from '../BuildsPage';
 
 export interface TabConfig {
-  routeRef: RouteRef | SubRouteRef;
+  path: string;
   title: string;
   component: ReactChild;
 }
 
 const TABS: TabConfig[] = [
   {
-    routeRef: rootRouteRef,
+    path: '/',
     title: 'Overview',
     component: <Overview />,
   },
   {
-    routeRef: buildsRouteRef,
+    path: buildsRouteRef.path,
     title: 'Builds',
     component: <BuildsPage />,
   },
@@ -53,11 +52,7 @@ export const XcmetricsLayout = () => (
     </Header>
     <TabbedLayout>
       {TABS.map(tab => (
-        <TabbedLayout.Route
-          key={tab.routeRef.path}
-          path={tab.routeRef.path}
-          title={tab.title}
-        >
+        <TabbedLayout.Route key={tab.path} path={tab.path} title={tab.title}>
           <Content>{tab.component}</Content>
         </TabbedLayout.Route>
       ))}