From 0b7cb922587d33667b76edf48ea2e36a73c07ace Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Tue, 16 Feb 2021 11:06:20 +0100 Subject: [PATCH] Fix routes Co-authored-by: Patrik Oldsberg --- .../features/software-catalog/installation.md | 2 +- .../software-templates/installation.md | 10 +++--- packages/app/src/App.tsx | 13 ++------ plugins/scaffolder/src/components/Router.tsx | 29 +++++++++++++++++ .../components/TemplateCard/TemplateCard.tsx | 10 ++++-- .../components/TemplatePage/TemplatePage.tsx | 14 ++++---- plugins/scaffolder/src/index.ts | 4 +-- plugins/scaffolder/src/plugin.ts | 32 +++---------------- plugins/scaffolder/src/routes.ts | 12 +------ 9 files changed, 58 insertions(+), 68 deletions(-) create mode 100644 plugins/scaffolder/src/components/Router.tsx diff --git a/docs/features/software-catalog/installation.md b/docs/features/software-catalog/installation.md index 3b48760c2f..309951d58c 100644 --- a/docs/features/software-catalog/installation.md +++ b/docs/features/software-catalog/installation.md @@ -67,7 +67,7 @@ const app = createApp({ // ... bindRoutes({ bind }) { bind(catalogPlugin.externalRoutes, { - createComponent: scaffolderPlugin.routes.templateIndex, + createComponent: scaffolderPlugin.routes.root, }); }, }); diff --git a/docs/features/software-templates/installation.md b/docs/features/software-templates/installation.md index 4d128d4c20..d5bd805c10 100644 --- a/docs/features/software-templates/installation.md +++ b/docs/features/software-templates/installation.md @@ -36,16 +36,14 @@ Add the following entry to the head of your `packages/app/src/plugins.ts`: export { scaffolderPlugin } from '@backstage/plugin-scaffolder'; ``` -Next we need to install the three pages that the scaffolder plugin provides. You -can choose any name for these routes, but we recommend the following: +Next we need to install the root page that the Scaffolder plugin provides. You +can choose any path for the route, but we recommend the following: ```tsx -import { TemplateIndexPage, TemplatePage, TaskPage } from '@backstage/plugin-scaffolder'; +import { ScaffolderPage } from '@backstage/plugin-scaffolder'; // Add to the top-level routes, directly within -} /> -} /> -} /> +} />; ``` You may also want to add a link to the template index page to your sidebar: diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 1cb83da41c..4a49db02d5 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -32,12 +32,7 @@ import { ExplorePage } from '@backstage/plugin-explore'; import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql'; import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse'; import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component'; -import { - TemplateIndexPage, - TemplatePage, - TaskPage, - scaffolderPlugin, -} from '@backstage/plugin-scaffolder'; +import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; import { Router as DocsRouter } from '@backstage/plugin-techdocs'; import { Router as SettingsRouter } from '@backstage/plugin-user-settings'; @@ -72,7 +67,7 @@ const app = createApp({ }, bindRoutes({ bind }) { bind(catalogPlugin.externalRoutes, { - createComponent: scaffolderPlugin.routes.templateIndex, + createComponent: scaffolderPlugin.routes.root, }); }, }); @@ -98,9 +93,7 @@ const routes = ( } /> } /> - } /> - } /> - } /> + } /> } /> ( + + } /> + } /> + } /> + +); diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 7d65bd1307..c38f4e09a5 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -25,7 +25,8 @@ import { useTheme, } from '@material-ui/core'; import React from 'react'; -import { templateRouteRef } from '../../routes'; +import { generatePath } from 'react-router'; +import { rootRouteRef } from '../../routes'; const useStyles = makeStyles(theme => ({ header: { @@ -58,11 +59,14 @@ export const TemplateCard = ({ name, }: TemplateCardProps) => { const backstageTheme = useTheme(); + const rootLink = useRouteRef(rootRouteRef); const themeId = pageTheme[type] ? type : 'other'; const theme = backstageTheme.getPageTheme({ themeId }); const classes = useStyles({ backgroundImage: theme.backgroundImage }); - const templateLink = useRouteRef(templateRouteRef); + const href = generatePath(`${rootLink()}/templates/:templateName`, { + templateName: name, + }); return ( @@ -79,7 +83,7 @@ export const TemplateCard = ({ - diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index c29f73a629..030cd5dccb 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -29,11 +29,11 @@ import { LinearProgress } from '@material-ui/core'; import { IChangeEvent } from '@rjsf/core'; import parseGitUrl from 'git-url-parse'; import React, { useCallback, useState } from 'react'; -import { useNavigate } from 'react-router'; +import { generatePath, useNavigate } from 'react-router'; import { useParams } from 'react-router-dom'; import { useAsync } from 'react-use'; import { scaffolderApiRef } from '../../api'; -import { taskRouteRef, templateIndexRouteRef } from '../../routes'; +import { rootRouteRef } from '../../routes'; import { MultistepJsonForm } from '../MultistepJsonForm'; const useTemplate = ( @@ -78,8 +78,7 @@ export const TemplatePage = () => { const scaffolderApi = useApi(scaffolderApiRef); const { templateName } = useParams(); const navigate = useNavigate(); - const tasksLink = useRouteRef(taskRouteRef); - const templateIndexLink = useRouteRef(templateIndexRouteRef); + const rootLink = useRouteRef(rootRouteRef); const { template, loading } = useTemplate(templateName, catalogApi); const [formState, setFormState] = useState({}); const handleFormReset = () => setFormState({}); @@ -92,7 +91,8 @@ export const TemplatePage = () => { const handleCreate = async () => { try { const id = await scaffolderApi.scaffold(templateName, formState); - navigate(tasksLink({ taskId: id })); + + navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id })); } catch (e) { errorApi.post(e); } @@ -100,7 +100,7 @@ export const TemplatePage = () => { if (!loading && !template) { errorApi.post(new Error('Template was not found.')); - navigate(templateIndexLink()); + navigate(rootLink()); return <>{null}; } @@ -110,7 +110,7 @@ export const TemplatePage = () => { 'Template schema is corrupted, please check the template.yaml file.', ), ); - navigate(templateIndexLink()); + navigate(rootLink()); return <>{null}; } diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index f731ebde40..e0b574e6c6 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -17,9 +17,7 @@ export { scaffolderPlugin, scaffolderPlugin as plugin, - TemplateIndexPage, - TemplatePage, - TaskPage, + ScaffolderPage, } from './plugin'; export type { ScaffolderApi } from './api'; export { ScaffolderClient, scaffolderApiRef } from './api'; diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts index c62117c996..a6ba1a9899 100644 --- a/plugins/scaffolder/src/plugin.ts +++ b/plugins/scaffolder/src/plugin.ts @@ -21,11 +21,7 @@ import { identityApiRef, createRoutableExtension, } from '@backstage/core'; -import { - templateIndexRouteRef, - templateRouteRef, - taskRouteRef, -} from './routes'; +import { rootRouteRef } from './routes'; import { scaffolderApiRef, ScaffolderClient } from './api'; export const scaffolderPlugin = createPlugin({ @@ -39,31 +35,13 @@ export const scaffolderPlugin = createPlugin({ }), ], routes: { - templateIndex: templateIndexRouteRef, - template: templateRouteRef, - task: taskRouteRef, + root: rootRouteRef, }, }); -export const TemplateIndexPage = scaffolderPlugin.provide( +export const ScaffolderPage = scaffolderPlugin.provide( createRoutableExtension({ - component: () => - import('./components/ScaffolderPage').then(m => m.ScaffolderPage), - mountPoint: templateIndexRouteRef, - }), -); - -export const TemplatePage = scaffolderPlugin.provide( - createRoutableExtension({ - component: () => - import('./components/TemplatePage').then(m => m.TemplatePage), - mountPoint: templateRouteRef, - }), -); - -export const TaskPage = scaffolderPlugin.provide( - createRoutableExtension({ - component: () => import('./components/TaskPage').then(m => m.TaskPage), - mountPoint: taskRouteRef, + component: () => import('./components/Router').then(m => m.Router), + mountPoint: rootRouteRef, }), ); diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts index 4884c1f83d..413e8f4194 100644 --- a/plugins/scaffolder/src/routes.ts +++ b/plugins/scaffolder/src/routes.ts @@ -15,16 +15,6 @@ */ import { createRouteRef } from '@backstage/core'; -export const templateIndexRouteRef = createRouteRef({ +export const rootRouteRef = createRouteRef({ title: 'Create new entity', }); - -export const templateRouteRef = createRouteRef({ - title: 'Entity creation', - params: ['templateName'], -}); - -export const taskRouteRef = createRouteRef({ - title: 'Task information', - params: ['taskId'], -});