chore: more deprecations and reworking more routeRefs to subRouteRefs

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

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

@@ -26,7 +26,7 @@ import {
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import LaunchIcon from '@material-ui/icons/Launch';
-import { Link as RouterLink, generatePath } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { durationHumanized, relativeTimeTo } from '../../../../util';
 import { circleCIBuildRouteRef } from '../../../../route-refs';
 import {
@@ -38,6 +38,7 @@ import {
   Table,
   TableColumn,
 } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 export type CITableBuildInfo = {
   id: string;
@@ -144,16 +145,21 @@ const generatedColumns: TableColumn[] = [
     field: 'buildName',
     highlight: true,
     width: '20%',
-    render: (row: Partial<CITableBuildInfo>) => (
-      <Link
-        component={RouterLink}
-        to={`${generatePath(circleCIBuildRouteRef.path, {
-          buildId: row.id!,
-        })}`}
-      >
-        {row.buildName ? row.buildName : row?.workflow?.name}
-      </Link>
-    ),
+    render: (row: Partial<CITableBuildInfo>) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const routeLink = useRouteRef(circleCIBuildRouteRef);
+
+      return (
+        <Link
+          component={RouterLink}
+          to={`${routeLink({
+            buildId: row.id!,
+          })}`}
+        >
+          {row.buildName ? row.buildName : row?.workflow?.name}
+        </Link>
+      );
+    },
   },
   {
     title: 'Job',

plugins/circleci/src/components/Router.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Routes, Route } from 'react-router';
-import { circleCIRouteRef, circleCIBuildRouteRef } from '../route-refs';
+import { circleCIBuildRouteRef } from '../route-refs';
 import { BuildWithStepsPage } from './BuildWithStepsPage/';
 import { BuildsPage } from './BuildsPage';
 import { CIRCLECI_ANNOTATION } from '../constants';
@@ -41,9 +41,9 @@ export const Router = (_props: Props) => {
 
   return (
     <Routes>
-      <Route path={`/${circleCIRouteRef.path}`} element={<BuildsPage />} />
+      <Route path="/" element={<BuildsPage />} />
       <Route
-        path={`/${circleCIBuildRouteRef.path}`}
+        path={`${circleCIBuildRouteRef.path}`}
         element={<BuildWithStepsPage />}
       />
     </Routes>

plugins/circleci/src/route-refs.tsx

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
 
 export const circleCIRouteRef = createRouteRef({
   id: 'circle-ci',
 });
 
-export const circleCIBuildRouteRef = createRouteRef({
+export const circleCIBuildRouteRef = createSubRouteRef({
   id: 'circle-ci/build',
+  parent: circleCIRouteRef,
+  path: '/:buildId',
 });