From 5371d1f3b848dc322f7b7aa39674c13f6c71a865 Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Thu, 11 Aug 2022 10:14:56 +0100
Subject: [PATCH] resolveStepLayout function

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 .../MultistepJsonForm/MultistepJsonForm.tsx   | 17 ++-----------
 plugins/scaffolder/src/layouts/index.tsx      | 24 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index c2050fe703..e13b242718 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -36,7 +36,6 @@ import { transformSchemaToProps } from './schema';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
 import cloneDeep from 'lodash/cloneDeep';
 import * as fieldOverrides from './FieldOverrides';
-import { DEFAULT_SCAFFOLDER_LAYOUT, LayoutOptions } from '../../layouts';
 
 const Form = withTheme(MuiTheme);
 type Step = {
@@ -196,19 +195,7 @@ export const MultistepJsonForm = (props: Props) => {
         {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}`);
-          }
+          const Layout = resolveStepLayout(schemaProps.uiSchema, layouts);
 
           return (
             <StepUI key={title}>
@@ -223,7 +210,7 @@ export const MultistepJsonForm = (props: Props) => {
               </StepLabel>
               <StepContent key={title}>
                 <Form
-                  ObjectFieldTemplate={LayoutComponent}
+                  ObjectFieldTemplate={Layout}
                   showErrorList={false}
                   fields={{ ...fieldOverrides, ...fields }}
                   widgets={widgets}
diff --git a/plugins/scaffolder/src/layouts/index.tsx b/plugins/scaffolder/src/layouts/index.tsx
index 12ef5b3c59..1a34d48566 100644
--- a/plugins/scaffolder/src/layouts/index.tsx
+++ b/plugins/scaffolder/src/layouts/index.tsx
@@ -15,7 +15,9 @@
  */
 
 import { attachComponentData, Extension } from '@backstage/core-plugin-api';
-import type { LayoutOptions } from './types';
+import { UiSchema } from '@rjsf/core';
+import { DEFAULT_SCAFFOLDER_LAYOUT } from './default';
+import type { LayoutOptions, ObjectFieldTemplate } from './types';
 
 export const LAYOUTS_KEY = 'scaffolder.layout.v1';
 export const LAYOUTS_WRAPPER_KEY = 'scaffolder.layouts.wrapper.v1';
@@ -47,3 +49,23 @@ attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
 export type { LayoutOptions, ObjectFieldTemplate } from './types';
 
 export { DEFAULT_SCAFFOLDER_LAYOUT } from './default';
+
+export function resolveStepLayout(
+  uiSchema: UiSchema = {},
+  layouts: LayoutOptions[],
+): ObjectFieldTemplate {
+  const layoutName =
+    uiSchema?.['ui:ObjectFieldTemplate'] ?? DEFAULT_SCAFFOLDER_LAYOUT.name;
+
+  delete uiSchema?.['ui:ObjectFieldTemplate'];
+
+  const LayoutComponent = layouts.find(
+    layout => layout.name === layoutName,
+  )?.component;
+
+  if (!LayoutComponent) {
+    throw new Error(`no step layout found for ${layoutName}`);
+  }
+
+  return LayoutComponent;
+}