Fix multi step settings rendering and improve multi step form block client rendering when inside builder

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -23,18 +23,32 @@
 
   setContext("multi-step-form-block", multiStepStore)
 
-  $: defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
-    _id: componentInstance._id,
-    stepCount: stepCount,
-    step: $multiStepStore.currentStep,
-  })
   $: stepCount = value?.length || 0
   $: updateStore(stepCount)
   $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
   $: emitCurrentStep($currentStep)
   $: stepLabel = getStepLabel($multiStepStore)
   $: stepDef = getDefinition(stepLabel)
-  $: stepInstance = buildPseudoInstance(value, $currentStep, defaultProps)
+  $: stepSettings = value?.[$currentStep] || {}
+  $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
+    _id: componentInstance._id,
+    stepCount: $multiStepStore.stepCount,
+    currentStep: $multiStepStore.currentStep,
+    actionType: componentInstance.actionType,
+    dataSource: componentInstance.dataSource,
+  })
+  $: stepInstance = {
+    _id: Helpers.uuid(),
+    _component: componentType,
+    _instanceName: `Step ${currentStep + 1}`,
+    title: stepSettings.title ?? defaults.title,
+    buttons: stepSettings.buttons || defaults.buttons,
+    fields: stepSettings.fields,
+    desc: stepSettings.desc,
+
+    // Needed for field configuration
+    dataSource,
+  }
 
   const getDefinition = stepLabel => {
     let def = cloneDeep(store.actions.components.getDefinition(componentType))
@@ -130,22 +144,6 @@
       updateStep(field, val)
     }
   }
-
-  const buildPseudoInstance = (value, currentStep, defaultProps) => {
-    const { buttons, fields, title, desc } = value?.[currentStep] || {}
-    return {
-      _id: Helpers.uuid(),
-      _component: componentType,
-      _instanceName: `Step ${currentStep + 1}`,
-      title: title ?? defaultProps.title,
-      buttons: buttons || defaultProps.buttons,
-      fields,
-      desc,
-
-      // Needed for field configuration
-      dataSource,
-    }
-  }
 </script>
 
 <div class="nested-section">

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -1,20 +1,24 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
+  import { writable } from "svelte/store"
 
   export let actionType
   export let rowId
   export let noRowsMessage
   export let steps
   export let dataSource
-  export let initialFormStep = 1
 
   const { fetchDatasourceSchema } = getContext("sdk")
   const component = getContext("component")
 
+  // Set current step context to force child form to use it
+  const currentStep = writable(1)
+  setContext("current-step", currentStep)
+
   const FieldTypeToComponentMap = {
     string: "stringfield",
     number: "numberfield",
@@ -35,30 +39,29 @@
 
   $: fetchSchema(dataSource)
   $: enrichedSteps = enrichSteps(steps, schema, $component.id)
-  $: currentStep = getCurrentStep(enrichedSteps, $builderStore, $component)
+  $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
-  const getCurrentStep = (steps, builderStore, component) => {
+  const updateCurrentStep = (steps, builderStore, component) => {
     const { componentId, step } = builderStore.metadata || {}
 
-    // If we aren't in the builder or aren't selected then don't return a form
+    // If we aren't in the builder or aren't selected then don't update the step
-    // step at all. This will let the form component take over state for which
+    // context at all, allowing the normal form to take control.
-    // step is active.
     if (
       !component.selected ||
       !builderStore.inBuilder ||
       componentId !== component.id
     ) {
-      return null
+      return
     }
 
     // Ensure we have a valid step selected
-    let currentStep = Math.min(step || 0, steps.length - 1)
+    let newStep = Math.min(step || 0, steps.length - 1)
 
     // Sanity check
-    currentStep = Math.max(currentStep, 0)
+    newStep = Math.max(newStep, 0)
 
     // Add 1 because the form component expects 1 indexed rather than 0 indexed
-    return currentStep + 1
+    currentStep.set(newStep + 1)
   }
 
   const getPropsForField = field => {
@@ -124,8 +127,6 @@
     context="form"
     props={{
       dataSource,
-      initialFormStep,
-      step: currentStep,
       actionType: actionType === "Create" ? "Create" : "Update",
       readonly: actionType === "View",
     }}

packages/client/src/components/app/forms/Form.svelte

@@ -11,7 +11,6 @@
   export let readonly = false
   export let actionType = "Create"
   export let initialFormStep = 1
-  export let step
 
   // Not exposed as a builder setting. Used internally to disable validation
   // for fields rendered in things like search blocks.
@@ -35,16 +34,7 @@
   let loaded = false
   let schema
   let table
-  let currentStep = writable(getInitialFormStep())
+  let currentStep = getContext("current-step") || writable(getInitialFormStep())
-
-  $: if (
-    currentStep &&
-    Number.isInteger($currentStep) &&
-    Number.isInteger(step) &&
-    step !== currentStep
-  ) {
-    currentStep.set(step)
-  }
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)

packages/frontend-core/src/utils/utils.js

@@ -241,7 +241,7 @@ export const buildFormBlockButtonConfig = props => {
   return defaultButtons
 }
 
-export const buildMultiStepFormBlockDefaultProps = props => {
+export const buildMultiStepFormBlockDefaultProps = (props, log = false) => {
   const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
 
   // Sanity check