make FormProps a prop on next/Router

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

plugins/scaffolder/src/next/Router/Router.test.tsx

@@ -57,13 +57,20 @@ describe('Router', () => {
     it('should pass through the transformErrors property', async () => {
       const transformErrorsMock = jest.fn();
 
-      await renderInTestApp(<Router transformErrors={transformErrorsMock} />, {
-        routeEntries: ['/templates/default/foo'],
-      });
+      await renderInTestApp(
+        <Router FormProps={{ transformErrors: transformErrorsMock }} />,
+        {
+          routeEntries: ['/templates/default/foo'],
+        },
+      );
 
       const mock = TemplateWizardPage as jest.Mock;
 
-      const [{ transformErrors }] = mock.mock.calls[0];
+      const [
+        {
+          FormProps: { transformErrors },
+        },
+      ] = mock.mock.calls[0];
 
       expect(transformErrors).toEqual(transformErrors);
     });

plugins/scaffolder/src/next/Router/Router.tsx

@@ -45,7 +45,8 @@ export type NextRouterProps = {
     TaskPageComponent?: React.ComponentType<{}>;
   };
   groups?: TemplateGroupFilter[];
-} & FormProps;
+  FormProps?: FormProps;
+};
 
 /**
  * The Scaffolder Router
@@ -94,7 +95,7 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
           <SecretsContextProvider>
             <TemplateWizardPage
               customFieldExtensions={fieldExtensions}
-              transformErrors={props.transformErrors}
+              FormProps={props.FormProps}
             />
           </SecretsContextProvider>
         }

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx

@@ -174,7 +174,7 @@ describe('Stepper', () => {
         manifest={manifest}
         extensions={[]}
         onComplete={jest.fn()}
-        transformErrors={transformErrors}
+        FormProps={{ transformErrors }}
       />,
     );
 

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx

@@ -59,7 +59,8 @@ export type StepperProps = {
   manifest: TemplateParameterSchema;
   extensions: NextFieldExtensionOptions<any, any>[];
   onComplete: (values: Record<string, JsonValue>) => Promise<void>;
-} & FormProps;
+  FormProps?: FormProps;
+};
 
 // TODO(blam): We require here, as the types in this package depend on @rjsf/core explicitly
 // which is what we're using here as the default types, it needs to depend on @rjsf/core-v5 because
@@ -164,7 +165,7 @@ export const Stepper = (props: StepperProps) => {
             onSubmit={handleNext}
             fields={extensions}
             showErrorList={false}
-            transformErrors={props.transformErrors}
+            {...(props.FormProps ?? {})}
           >
             <div className={styles.footer}>
               <Button

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -48,7 +48,8 @@ import type { FormProps } from '../types';
 
 export type TemplateWizardPageProps = {
   customFieldExtensions: NextFieldExtensionOptions<any, any>[];
-} & FormProps;
+  FormProps?: FormProps;
+};
 
 const useStyles = makeStyles<BackstageTheme>(() => ({
   markdown: {
@@ -138,7 +139,7 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
                 manifest={manifest}
                 extensions={props.customFieldExtensions}
                 onComplete={onComplete}
-                transformErrors={props.transformErrors}
+                FormProps={props.FormProps}
               />
             </InfoCard>
           )}