Fix routes

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>

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,
     });
   },
 });

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 <FlatRoutes>
-<Route path="/create" element={<TemplateIndexPage />} />
-<Route path="/create/templates/:templateName" element={<TemplatePage />} />
-<Route path="/create/tasks/:taskId" element={<TaskPage />} />
+<Route path="/create" element={<ScaffolderPage />} />;
 ```
 
 You may also want to add a link to the template index page to your sidebar:

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 = (
     </Route>
     <Route path="/catalog-import" element={<CatalogImportPage />} />
     <Route path="/docs" element={<DocsRouter />} />
-    <Route path="/create" element={<TemplateIndexPage />} />
-    <Route path="/create/templates/:templateName" element={<TemplatePage />} />
-    <Route path="/create/tasks/:taskId" element={<TaskPage />} />
+    <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/explore" element={<ExplorePage />} />
     <Route
       path="/tech-radar"

plugins/scaffolder/src/components/Router.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Routes, Route } from 'react-router';
+import { ScaffolderPage } from './ScaffolderPage';
+import { TemplatePage } from './TemplatePage';
+import { TaskPage } from './TaskPage';
+
+export const Router = () => (
+  <Routes>
+    <Route path="/" element={<ScaffolderPage />} />
+    <Route path="/templates/:templateName" element={<TemplatePage />} />
+    <Route path="/tasks/:taskId" element={<TaskPage />} />
+  </Routes>
+);

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<BackstageTheme>();
+  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 (
     <Card>
@@ -79,7 +83,7 @@ export const TemplateCard = ({
         </Typography>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={templateLink({ templateName: name })}>
+        <Button color="primary" to={href}>
           Choose
         </Button>
       </CardActions>

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}</>;
   }
 

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';

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,
   }),
 );

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'],
-});