extract ObjectFieldTemplate from uiSchema

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

package.json

@@ -93,5 +93,8 @@
       "node ./scripts/check-docs-quality"
     ]
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@3.2.3",
+  "volta": {
+    "node": "14.19.3"
+  }
 }

packages/app/src/App.tsx

@@ -105,7 +105,10 @@ import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { PlaylistIndexPage } from '@backstage/plugin-playlist';
-import { Customlayout } from './components/scaffolder/customScaffolderLayouts';
+import {
+  AnotherCustomlayout,
+  CustomLayout,
+} from './components/scaffolder/customScaffolderLayouts';
 
 const app = createApp({
   apis,
@@ -222,7 +225,8 @@ const routes = (
           <LowerCaseValuePickerFieldExtension />
         </ScaffolderFieldExtensions>
         <ScaffolderLayouts>
-          <Customlayout />
+          <CustomLayout />
+          <AnotherCustomlayout />
         </ScaffolderLayouts>
       </>
     </Route>

packages/app/src/components/scaffolder/customScaffolderLayouts.tsx

@@ -35,9 +35,34 @@ const ALayout: ObjectFieldTemplate = ({ properties, description }) => {
   );
 };
 
-export const Customlayout = scaffolderPlugin.provide(
+const AnotherCustomLayout: ObjectFieldTemplate = ({
+  properties,
+  description,
+}) => {
+  // eslint-disable-next-line no-console
+  return (
+    <div>
+      <h1>ANOTHER CUSTOM LAYOUT!!!!!</h1>
+      <div>
+        {properties.map(prop => (
+          <div key={prop.content.key}>{prop.content}</div>
+        ))}
+      </div>
+      {description}
+    </div>
+  );
+};
+
+export const CustomLayout = scaffolderPlugin.provide(
   createScaffolderLayout({
     name: 'CustomLayout',
     component: ALayout,
   }),
 );
+
+export const AnotherCustomlayout = scaffolderPlugin.provide(
+  createScaffolderLayout({
+    name: 'AnotherCustomLayout',
+    component: AnotherCustomLayout,
+  }),
+);

packages/app/src/components/scaffolder/defaultPreviewTemplate.ts

@@ -34,6 +34,7 @@ parameters:
           allowedKinds:
             - Group
   - title: Choose a location
+    ui:ObjectFieldTemplate: 'AnotherCustomLayout'
     required:
       - repoUrl
     properties:

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -155,20 +155,6 @@ export const MultistepJsonForm = (props: Props) => {
         : filteredStep.schema.required;
     }
 
-    const layoutName =
-      filteredStep.schema['ui:ObjectFieldTemplate'] ??
-      DEFAULT_SCAFFOLDER_LAYOUT.name;
-
-    const LayoutComponent = layouts.find(
-      layout => layout.name === layoutName,
-    )?.component;
-
-    if (!LayoutComponent) {
-      throw new Error(`no step layout found for ${layoutName}`);
-    }
-
-    filteredStep.schema['ui:ObjectFieldTemplate'] = LayoutComponent as any;
-
     return filteredStep;
   };
 
@@ -208,6 +194,22 @@ export const MultistepJsonForm = (props: Props) => {
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map(({ title, schema, ...formProps }, index) => {
+          const schemaProps = transformSchemaToProps(schema);
+
+          const layoutName =
+            schemaProps.uiSchema?.['ui:ObjectFieldTemplate'] ??
+            DEFAULT_SCAFFOLDER_LAYOUT.name;
+
+          delete schemaProps.uiSchema?.['ui:ObjectFieldTemplate'];
+
+          const LayoutComponent = layouts.find(
+            layout => layout.name === layoutName,
+          )?.component;
+
+          if (!LayoutComponent) {
+            throw new Error(`no step layout found for ${layoutName}`);
+          }
+
           return (
             <StepUI key={title}>
               <StepLabel
@@ -221,6 +223,7 @@ export const MultistepJsonForm = (props: Props) => {
               </StepLabel>
               <StepContent key={title}>
                 <Form
+                  ObjectFieldTemplate={LayoutComponent}
                   showErrorList={false}
                   fields={{ ...fieldOverrides, ...fields }}
                   widgets={widgets}
@@ -232,7 +235,7 @@ export const MultistepJsonForm = (props: Props) => {
                     if (e.errors.length === 0) handleNext();
                   }}
                   {...formProps}
-                  {...transformSchemaToProps(schema)}
+                  {...schemaProps}
                 >
                   <Button disabled={activeStep === 0} onClick={handleBack}>
                     Back