Update multi step form block to use core button config generation

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

@@ -33,7 +33,7 @@
   }
   $: defaultButtonConfig = buildMultiStepFormBlockButtonConfig({
     _id: componentInstance._id,
-    steps: value,
+    stepCount: value?.length,
     currentStep,
   })
 

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

@@ -3,6 +3,7 @@
   import Block from "components/Block.svelte"
   import { getContext } from "svelte"
   import { builderStore } from "stores"
+  import { Utils } from "@budibase/frontend-core"
 
   export let componentInstance
   export let steps
@@ -91,13 +92,19 @@
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
 
-  $: stepProps = steps?.map(step => {
+  $: stepProps = steps?.map((step, idx) => {
     const { title, desc, fields, buttons } = step
     return {
       fields: getDefaultFields(fields || [], schema),
       title,
       desc,
-      buttons,
+      buttons:
+        buttons ||
+        Utils.buildMultiStepFormBlockButtonConfig({
+          _id: $component.id,
+          stepCount: steps?.length,
+          currentStep: idx,
+        }),
     }
   })
 </script>
@@ -118,6 +125,13 @@
         <BlockComponent
           type="formstep"
           props={{ step: idx + 1, _instanceName: `Step ${idx + 1}` }}
+          styles={{
+            normal: {
+              width: "600px",
+              "margin-left": "auto",
+              "margin-right": "auto",
+            },
+          }}
         >
           <BlockComponent
             type="container"
@@ -157,6 +171,11 @@
             <BlockComponent
               type="buttongroup"
               props={{ buttons: stepProps?.[idx]?.buttons }}
+              styles={{
+                normal: {
+                  "margin-top": "16px",
+                },
+              }}
             />
           </BlockComponent>
         </BlockComponent>

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

@@ -242,10 +242,10 @@ export const buildFormBlockButtonConfig = props => {
 }
 
 export const buildMultiStepFormBlockButtonConfig = props => {
-  const { _id, steps, currentStep } = props || {}
+  const { _id, stepCount, currentStep } = props || {}
 
   // Sanity check
-  if (!_id || !steps?.length) {
+  if (!_id || !stepCount) {
     return
   }
 
@@ -279,7 +279,7 @@ export const buildMultiStepFormBlockButtonConfig = props => {
     text: "Next",
     type: "cta",
     size: "M",
-    disabled: currentStep === steps.length - 1,
+    disabled: currentStep === stepCount - 1,
     onClick: [
       {
         parameters: {