From 97d34d4765b82f307130b509a40023a0d56435b8 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Sat, 19 Mar 2022 10:16:54 +0100
Subject: [PATCH] chore: reworking some more styles for the stepperf

Signed-off-by: blam <ben@blam.sh>
---
 .../src/next/TemplateWizardPage/Stepper/Stepper.tsx       | 5 +++--
 plugins/scaffolder/src/plugin.ts                          | 8 ++++++--
 plugins/scaffolder/src/routes.ts                          | 6 +++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
index da8da2d00d..ba6fb754c5 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
@@ -48,7 +48,7 @@ export const Stepper = (props: StepperProps) => {
   const handleNext = () => {};
 
   return (
-    <Box>
+    <>
       <MuiStepper activeStep={0} alternativeLabel>
         {steps.map((step, index) => (
           <MuiStep key={index}>
@@ -56,6 +56,7 @@ export const Stepper = (props: StepperProps) => {
           </MuiStep>
         ))}
       </MuiStepper>
+
       <div className={styles.footer}>
         <Button onClick={handleBack} className={styles.backButton}>
           Back
@@ -64,6 +65,6 @@ export const Stepper = (props: StepperProps) => {
           {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
         </Button>
       </div>
-    </Box>
+    </>
   );
 };
diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts
index 5ea4ae49a4..7387232948 100644
--- a/plugins/scaffolder/src/plugin.ts
+++ b/plugins/scaffolder/src/plugin.ts
@@ -23,7 +23,11 @@ import { OwnerPicker } from './components/fields/OwnerPicker/OwnerPicker';
 import { repoPickerValidation } from './components/fields/RepoUrlPicker';
 import { RepoUrlPicker } from './components/fields/RepoUrlPicker/RepoUrlPicker';
 import { createScaffolderFieldExtension } from './extensions';
-import { registerComponentRouteRef, rootRouteRef } from './routes';
+import {
+  nextRouteRef,
+  registerComponentRouteRef,
+  rootRouteRef,
+} from './routes';
 import {
   createApiFactory,
   createPlugin,
@@ -162,6 +166,6 @@ export const NextScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
     name: 'NextScaffolderPage',
     component: () => import('./next/Router').then(m => m.Router),
-    mountPoint: rootRouteRef,
+    mountPoint: nextRouteRef,
   }),
 );
diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts
index 19a959585d..f6ca7ba467 100644
--- a/plugins/scaffolder/src/routes.ts
+++ b/plugins/scaffolder/src/routes.ts
@@ -37,6 +37,10 @@ export const legacySelectedTemplateRouteRef = createSubRouteRef({
   path: '/templates/:templateName',
 });
 
+const nextRouteRef = createRouteRef({
+  id: 'scaffolder/next',
+});
+
 export const selectedTemplateRouteRef = createSubRouteRef({
   id: 'scaffolder/selected-template',
   parent: rootRouteRef,
@@ -45,7 +49,7 @@ export const selectedTemplateRouteRef = createSubRouteRef({
 
 export const nextSelectedTemplateRouteRef = createSubRouteRef({
   id: 'scaffolder/next/selected-template',
-  parent: rootRouteRef,
+  parent: nextRouteRef,
   path: '/templates/:namespace/:templateName',
 });