From 52eeb35d71c538ccb78af742d23c973fe797ad1a Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 25 Feb 2022 10:36:45 +0100 Subject: [PATCH] chore: use subRouteRefs for navigation Signed-off-by: blam --- .../src/components/TaskPage/TaskPage.tsx | 20 ++++++++----------- .../components/TemplateCard/TemplateCard.tsx | 9 +++------ .../components/TemplatePage/TemplatePage.tsx | 11 +++++----- plugins/scaffolder/src/routes.ts | 19 ++++++++++++++++++ 4 files changed, 36 insertions(+), 23 deletions(-) diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 0882d49ff4..e0445ed641 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/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), + })}`, ); }; diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 3495409dd6..f4710427c2 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/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(); - 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); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index 798ce31539..92136d59b8 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/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>(() => { 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 ; + return ; } if (!loading && !schema) { errorApi.post(new Error('Template was not found.')); - return ; + return ; } const customFieldComponents = Object.fromEntries( diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts index df5868c9ea..97f942d8b9 100644 --- a/plugins/scaffolder/src/routes.ts +++ b/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', +});