move layouts prop out of FormProps

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

plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx

@@ -21,6 +21,7 @@ import { act, fireEvent } from '@testing-library/react';
 import type { RJSFValidationError } from '@rjsf/utils';
 import { JsonValue } from '@backstage/types';
 import { NextFieldExtensionComponentProps } from '../../extensions';
+import { LayoutTemplate } from '../../types';
 
 describe('Stepper', () => {
   it('should render the step titles for each step of the manifest', async () => {
@@ -426,7 +427,7 @@ describe('Stepper', () => {
         <Stepper
           manifest={manifest}
           extensions={[]}
-          onComplete={jest.fn()}
+          onCreate={jest.fn()}
           layouts={[{ name: 'Layout', component: ScaffolderLayout }]}
         />,
       );

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -31,11 +31,8 @@ import { createAsyncValidators } from './createAsyncValidators';
 import type { FormProps, LayoutOptions } from '../../types';
 import { ReviewState, type ReviewStateProps } from '../ReviewState';
 import { useTemplateSchema } from '../../hooks/useTemplateSchema';
-import { useFormDataFromQuery } from '../../hooks/useFormDataFromQuery';
 import validator from '@rjsf/validator-ajv6';
 import { useFormDataFromQuery } from '../../hooks';
-import type { FormProps } from '../../types';
-import { selectedTemplateRouteRef } from '../../../routes';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -179,7 +176,7 @@ export const Stepper = (stepperProps: StepperProps) => {
             fields={extensions}
             showErrorList={false}
             onChange={handleChange}
-            {...(formProps ?? {})}
+            {...(props.FormProps ?? {})}
           >
             <div className={styles.footer}>
               <Button

plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx

@@ -51,7 +51,7 @@ export type WorkflowProps = {
   onError(error: Error | undefined): JSX.Element | null;
 } & Pick<
   StepperProps,
-  'extensions' | 'FormProps' | 'components' | 'onCreate' | 'initialState'
+  'extensions' | 'FormProps' | 'components' | 'onCreate' | 'initialState' | 'layouts'
 >;
 
 /**

plugins/scaffolder/api-report.md

@@ -159,9 +159,7 @@ export interface FieldSchema<TReturn, TUiOptions> {
 export type FormProps = Pick<
   FormProps_3,
   'transformErrors' | 'noHtml5Validate'
-> & {
-  layouts?: NextLayoutOptions[];
-};
+>;
 
 // @public
 export type LayoutComponent<_TInputProps> = () => null;

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

@@ -23,6 +23,7 @@ import {
   ScaffolderFieldExtensions,
 } from '@backstage/plugin-scaffolder-react';
 import { scaffolderPlugin } from '../../plugin';
+import { createScaffolderLayout, ScaffolderLayouts } from '../../layouts';
 
 jest.mock('../TemplateListPage', () => ({
   TemplateListPage: jest.fn(() => null),
@@ -76,7 +77,6 @@ describe('Router', () => {
       expect(FormProps).toEqual({
         transformErrors: transformErrorsMock,
         noHtml5Validate: true,
-        layouts: [],
       });
     });
 
@@ -107,5 +107,36 @@ describe('Router', () => {
         ]),
       );
     });
+
+    it('should extract the layouts and pass them through', async () => {
+      const mockLayoutComponent = () => null;
+      const Layout = scaffolderPlugin.provide(
+        createScaffolderLayout({
+          name: 'layout',
+          component: mockLayoutComponent,
+        }),
+      );
+
+      await renderInTestApp(
+        <Router>
+          <ScaffolderLayouts>
+            <Layout />
+          </ScaffolderLayouts>
+        </Router>,
+        { routeEntries: ['/templates/default/foo'] },
+      );
+
+      const mock = TemplateWizardPage as jest.Mock;
+      const [{ layouts }] = mock.mock.calls[0];
+
+      expect(layouts).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            name: 'layout',
+            component: mockLayoutComponent,
+          }),
+        ]),
+      );
+    });
   });
 });

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

@@ -93,9 +93,9 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
           <SecretsContextProvider>
             <TemplateWizardPage
               customFieldExtensions={fieldExtensions}
+              layouts={customLayouts}
               FormProps={{
                 ...props.FormProps,
-                layouts: customLayouts,
               }}
             />
           </SecretsContextProvider>

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

@@ -25,17 +25,19 @@ import {
 import {
   scaffolderApiRef,
   useTemplateSecrets,
-  NextFieldExtensionOptions,
+  type NextFieldExtensionOptions,
+  Workflow
 } from '@backstage/plugin-scaffolder-react';
 import { JsonValue } from '@backstage/types';
 import { type FormProps } from '../types';
 import { nextRouteRef } from '../routes';
 import { scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes';
 import { Header, Page } from '@backstage/core-components';
-import { Workflow } from '@backstage/plugin-scaffolder-react';
+import type { LayoutOptions } from '../../layouts/types';
 
 export type TemplateWizardPageProps = {
   customFieldExtensions: NextFieldExtensionOptions<any, any>[];
+  layouts?: LayoutOptions[];
   FormProps?: FormProps;
 };
 

plugins/scaffolder/src/next/types.ts

@@ -50,6 +50,4 @@ export interface NextLayoutOptions<P = any> {
 export type FormProps = Pick<
   SchemaFormProps,
   'transformErrors' | 'noHtml5Validate'
-> & {
-  layouts?: NextLayoutOptions[];
-};
+>;