chore: use subRouteRefs for navigation

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

plugins/scaffolder/src/components/TaskPage/TaskPage.tsx

@@ -46,9 +46,9 @@ import classNames from 'classnames';
 import { DateTime, Interval } from 'luxon';
 import qs from 'qs';
 import React, { memo, useEffect, useMemo, useState } from 'react';
-import { generatePath, useNavigate, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import useInterval from 'react-use/lib/useInterval';
-import { rootRouteRef } from '../../routes';
+import { rootRouteRef, selectedTemplateRouteRef } from '../../routes';
 import { ScaffolderTaskStatus, ScaffolderTaskOutput } from '../../types';
 import { useTaskEventStream } from '../hooks/useEventStream';
 import { TaskPageLinks } from './TaskPageLinks';
@@ -243,7 +243,8 @@ export type TaskPageProps = {
 export const TaskPage = ({ loadingText }: TaskPageProps) => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const rootLink = useRouteRef(rootRouteRef);
+  const rootPath = useRouteRef(rootRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const [userSelectedStepId, setUserSelectedStepId] = useState<
     string | undefined
   >(undefined);
@@ -297,7 +298,7 @@ export const TaskPage = ({ loadingText }: TaskPageProps) => {
 
   const handleStartOver = () => {
     if (!taskStream.task || !taskStream.task?.spec.templateInfo?.entityRef) {
-      navigate(generatePath(rootLink()));
+      navigate(rootPath());
       return;
     }
 
@@ -311,14 +312,9 @@ export const TaskPage = ({ loadingText }: TaskPageProps) => {
     );
 
     navigate(
-      generatePath(
-        `${rootLink()}/templates/:templateName?${qs.stringify({
-          formData: JSON.stringify(formData),
-        })}`,
-        {
-          templateName: name,
-        },
-      ),
+      `${templateRoute({ templateName: name })}?${qs.stringify({
+        formData: JSON.stringify(formData),
+      })}`,
     );
   };
 

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -41,8 +41,7 @@ import {
 } from '@material-ui/core';
 import WarningIcon from '@material-ui/icons/Warning';
 import React from 'react';
-import { generatePath } from 'react-router';
-import { rootRouteRef } from '../../routes';
+import { selectedTemplateRouteRef } from '../../routes';
 import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 import { Button, ItemCardHeader } from '@backstage/core-components';
@@ -141,7 +140,7 @@ const DeprecationWarning = () => {
 
 export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
   const backstageTheme = useTheme<BackstageTheme>();
-  const rootLink = useRouteRef(rootRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const templateProps = getTemplateCardProps(template);
   const ownedByRelations = getEntityRelations(
     template as Entity,
@@ -152,9 +151,7 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
     : 'other';
   const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
-  const href = generatePath(`${rootLink()}/templates/:templateName`, {
-    templateName: templateProps.name,
-  });
+  const href = templateRoute({ templateName: templateProps.name });
 
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -24,7 +24,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { scaffolderApiRef } from '../../api';
 import { CustomFieldValidator, FieldExtensionOptions } from '../../extensions';
 import { SecretsContext } from '../secrets/SecretsContext';
-import { rootRouteRef } from '../../routes';
+import { rootRouteRef, scaffolderTaskRouteRef } from '../../routes';
 import { MultistepJsonForm } from '../MultistepJsonForm';
 
 import {
@@ -117,7 +117,8 @@ export const TemplatePage = ({
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName } = useParams();
   const navigate = useNavigate();
-  const rootLink = useRouteRef(rootRouteRef);
+  const scaffolderTaskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const rootRoute = useRouteRef(rootRouteRef);
   const { schema, loading, error } = useTemplateParameterSchema(templateName);
   const [formState, setFormState] = useState<Record<string, any>>(() => {
     const query = qs.parse(window.location.search, {
@@ -158,16 +159,16 @@ export const TemplatePage = ({
     // extra back/forward slots.
     window.history?.replaceState(null, document.title, newUrl);
 
-    navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId }));
+    navigate(scaffolderTaskRoute({ taskId }));
   };
 
   if (error) {
     errorApi.post(new Error(`Failed to load template, ${error}`));
-    return <Navigate to={rootLink()} />;
+    return <Navigate to={rootRoute()} />;
   }
   if (!loading && !schema) {
     errorApi.post(new Error('Template was not found.'));
-    return <Navigate to={rootLink()} />;
+    return <Navigate to={rootRoute()} />;
   }
 
   const customFieldComponents = Object.fromEntries(

plugins/scaffolder/src/routes.ts

@@ -16,6 +16,7 @@
 import {
   createExternalRouteRef,
   createRouteRef,
+  createSubRouteRef,
 } from '@backstage/core-plugin-api';
 
 export const registerComponentRouteRef = createExternalRouteRef({
@@ -26,3 +27,21 @@ export const registerComponentRouteRef = createExternalRouteRef({
 export const rootRouteRef = createRouteRef({
   id: 'scaffolder',
 });
+
+export const selectedTemplateRouteRef = createSubRouteRef({
+  id: 'scaffolder/selected-template',
+  parent: rootRouteRef,
+  path: '/templates/:templateName',
+});
+
+export const scaffolderTaskRouteRef = createSubRouteRef({
+  id: 'scaffolder/task',
+  parent: rootRouteRef,
+  path: '/tasks/:taskId',
+});
+
+export const actionsRouteRef = createSubRouteRef({
+  id: 'scaffolder/actions',
+  parent: rootRouteRef,
+  path: '/actions',
+});