add layouts to NextScaffolderPage

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

packages/app/src/App.tsx

@@ -244,6 +244,9 @@ const routes = (
       <ScaffolderFieldExtensions>
         <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
+      <ScaffolderLayouts>
+        <TwoColumnLayout />
+      </ScaffolderLayouts>
     </Route>
     <Route path="/explore" element={<ExplorePage />} />
     <Route

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>
         }

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;
 };

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[];
+};