From cd63a3d39fdee990db895dc1595e7c2ce93a4f1b Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Mon, 19 Dec 2022 10:01:55 +0000
Subject: [PATCH] add layouts to NextScaffolderPage

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 packages/app/src/App.tsx                       |  3 +++
 plugins/scaffolder/src/next/Router/Router.tsx  | 18 ++++++++++++++++--
 .../TemplateWizardPage/TemplateWizardPage.tsx  |  2 +-
 plugins/scaffolder/src/next/types.ts           |  5 ++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index c5410c4f80..8984a69259 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -244,6 +244,9 @@ const routes = (
       <ScaffolderFieldExtensions>
         <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
+      <ScaffolderLayouts>
+        <TwoColumnLayout />
+      </ScaffolderLayouts>
     </Route>
     <Route path="/explore" element={<ExplorePage />} />
     <Route
diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx
index f91e56bba7..5435c1a210 100644
--- a/plugins/scaffolder/src/next/Router/Router.tsx
+++ b/plugins/scaffolder/src/next/Router/Router.tsx
@@ -26,8 +26,9 @@ import {
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups';
 import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';
-import { type FormProps } from '../types';
 import { nextSelectedTemplateRouteRef } from '../routes';
+import { type LayoutOptions, LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../../layouts';
+import type { FormProps } from '../types';
 
 /**
  * The Props for the Scaffolder Router
@@ -65,6 +66,16 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
     ),
   ] as NextFieldExtensionOptions[];
 
+  const customLayouts = useElementFilter(outlet, elements =>
+    elements
+      .selectByComponentData({
+        key: LAYOUTS_WRAPPER_KEY,
+      })
+      .findComponentData<LayoutOptions>({
+        key: LAYOUTS_KEY,
+      }),
+  );
+
   return (
     <Routes>
       <Route
@@ -82,7 +93,10 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
           <SecretsContextProvider>
             <TemplateWizardPage
               customFieldExtensions={fieldExtensions}
-              FormProps={props.FormProps}
+              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 24c529b094..99f2577459 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
@@ -34,7 +34,7 @@ import { scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes';
 import { Header, Page } from '@backstage/core-components';
 import { Workflow } from '@backstage/plugin-scaffolder-react';
 
-type TemplateWizardPageProps = {
+export type TemplateWizardPageProps = {
   customFieldExtensions: NextFieldExtensionOptions<any, any>[];
   FormProps?: FormProps;
 };
diff --git a/plugins/scaffolder/src/next/types.ts b/plugins/scaffolder/src/next/types.ts
index e9c77aa00e..2700137724 100644
--- a/plugins/scaffolder/src/next/types.ts
+++ b/plugins/scaffolder/src/next/types.ts
@@ -21,6 +21,7 @@
  */
 
 import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import { LayoutOptions } from '../layouts/types';
 
 /**
  * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage`
@@ -31,4 +32,6 @@ import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
 export type FormProps = Pick<
   SchemaFormProps,
   'transformErrors' | 'noHtml5Validate'
->;
+> & {
+  layouts?: LayoutOptions[];
+};