From a772d50bcda4a2b65e03ef7aec9a5b83f61ccf7e Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Wed, 28 Dec 2022 10:41:37 +0000
Subject: [PATCH] move layouts prop out of FormProps

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 .../next/components/Stepper/Stepper.test.tsx  |  3 +-
 .../src/next/components/Stepper/Stepper.tsx   |  5 +--
 .../src/next/components/Workflow/Workflow.tsx |  2 +-
 plugins/scaffolder/api-report.md              |  4 +--
 .../src/next/Router/Router.test.tsx           | 33 ++++++++++++++++++-
 plugins/scaffolder/src/next/Router/Router.tsx |  2 +-
 .../TemplateWizardPage/TemplateWizardPage.tsx |  6 ++--
 plugins/scaffolder/src/next/types.ts          |  4 +--
 8 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
index 57ff949c62..5995d0e419 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
+++ b/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 }]}
         />,
       );
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index c2c4f06ffd..0ab468db1b 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/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
diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
index cca69ab7b3..9b760661fe 100644
--- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
+++ b/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'
 >;
 
 /**
diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md
index 821dd2131f..c1eb86d186 100644
--- a/plugins/scaffolder/api-report.md
+++ b/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;
diff --git a/plugins/scaffolder/src/next/Router/Router.test.tsx b/plugins/scaffolder/src/next/Router/Router.test.tsx
index cd77761ca7..573b4ac8b8 100644
--- a/plugins/scaffolder/src/next/Router/Router.test.tsx
+++ b/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,
+          }),
+        ]),
+      );
+    });
   });
 });
diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx
index 2cfee1105c..fab64e8677 100644
--- a/plugins/scaffolder/src/next/Router/Router.tsx
+++ b/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>
diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
index 99f2577459..8fdb3d8e66 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
+++ b/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;
 };
 
diff --git a/plugins/scaffolder/src/next/types.ts b/plugins/scaffolder/src/next/types.ts
index e84fade2cd..e9204537f0 100644
--- a/plugins/scaffolder/src/next/types.ts
+++ b/plugins/scaffolder/src/next/types.ts
@@ -50,6 +50,4 @@ export interface NextLayoutOptions<P = any> {
 export type FormProps = Pick<
   SchemaFormProps,
   'transformErrors' | 'noHtml5Validate'
-> & {
-  layouts?: NextLayoutOptions[];
-};
+>;