Fix multi step settings definition to allow rendering of other sections in the correct order

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -78,7 +78,7 @@
       var(--spacing-xl);
   }
   .property-panel.no-title {
-    padding: var(--spacing-xl);
+    padding-top: 0;
   }
 
   .show {

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

@@ -6,6 +6,7 @@
   import { Helpers } from "@budibase/bbui"
   import { derived, writable } from "svelte/store"
   import { Utils } from "@budibase/frontend-core"
+  import { cloneDeep } from "lodash"
 
   export let componentInstance
   export let componentBindings
@@ -18,6 +19,7 @@
     currentStep: 0,
   })
   const currentStep = derived(multiStepStore, state => state.currentStep)
+  const componentType = "@budibase/standard-components/multistepformblockstep"
 
   setContext("multi-step-form-block", multiStepStore)
 
@@ -30,46 +32,14 @@
   $: updateStore(stepCount)
   $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
   $: emitCurrentStep($currentStep)
-  $: sectionName = getSectionName($multiStepStore)
+  $: stepLabel = getStepLabel($multiStepStore)
+  $: stepDef = getDefinition(stepLabel)
   $: stepInstance = buildPseudoInstance(value, $currentStep, defaultProps)
-  $: stepDef = {
+
-    settings: [
+  const getDefinition = stepLabel => {
-      {
+    let def = cloneDeep(store.actions.components.getDefinition(componentType))
-        section: true,
+    def.settings.find(x => x.key === "steps").label = stepLabel
-        name: sectionName,
+    return def
-        settings: [
-          {
-            type: "formStepControls",
-            label: "Steps",
-            key: "steps",
-          },
-          {
-            type: "text",
-            label: "Title",
-            key: "title",
-            nested: true,
-          },
-          {
-            type: "text",
-            label: "Description",
-            key: "desc",
-            nested: true,
-          },
-          {
-            type: "fieldConfiguration",
-            key: "fields",
-            nested: true,
-          },
-          {
-            type: "buttonConfiguration",
-            label: "Buttons",
-            key: "buttons",
-            wide: true,
-            nested: true,
-          },
-        ],
-      },
-    ],
   }
 
   const updateStore = stepCount => {
@@ -82,7 +52,7 @@
     })
   }
 
-  const getSectionName = ({ stepCount, currentStep }) => {
+  const getStepLabel = ({ stepCount, currentStep }) => {
     if (stepCount <= 1) {
       return "Details"
     }
@@ -165,7 +135,7 @@
     const { buttons, fields, title, desc } = value?.[currentStep] || {}
     return {
       _id: Helpers.uuid(),
-      _component: "@budibase/standard-components/multistepformblockstep",
+      _component: componentType,
       _instanceName: `Step ${currentStep + 1}`,
       title: title ?? defaultProps.title,
       buttons: buttons || defaultProps.buttons,
@@ -184,7 +154,7 @@
     componentInstance={stepInstance}
     componentDefinition={stepDef}
     onUpdateSetting={processUpdate}
-    showInstanceName={false}
+    showSectionTitle={false}
     isScreen={false}
     nested={true}
     {bindings}
@@ -196,6 +166,5 @@
   .nested-section {
     margin: 0 calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl))
       calc(-1 * var(--spacing-xl));
-    border-top: var(--border-light);
   }
 </style>

packages/client/manifest.json

@@ -6058,12 +6058,48 @@
         "defaultValue": "Create"
       },
       {
-        "type": "stepConfiguration",
+        "section": true,
-        "key": "steps",
+        "dependsOn": {
-        "nested": true,
+          "setting": "actionType",
-        "labelHidden": true,
+          "value": "Create",
-        "resetOn": ["dataSource", "actionType"],
+          "invert": true
-        "defaultValue": [{}]
+        },
+        "name": "Row ID",
+        "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
+        "settings": [
+          {
+            "type": "text",
+            "label": "Row ID",
+            "key": "rowId",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "label": "No rows found",
+            "key": "noRowsMessage",
+            "defaultValue": "We couldn't find a row to display",
+            "nested": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Details",
+        "settings": [
+          {
+            "type": "stepConfiguration",
+            "key": "steps",
+            "nested": true,
+            "labelHidden": true,
+            "resetOn": [
+              "dataSource",
+              "actionType"
+            ],
+            "defaultValue": [
+              {}
+            ]
+          }
+        ]
       }
     ],
     "actions": [
@@ -6121,6 +6157,40 @@
       }
     ]
   },
+  "multistepformblockstep": {
+    "name": "Multi-step Form Block Step",
+    "settings": [
+      {
+        "type": "formStepControls",
+        "label": "Steps",
+        "key": "steps"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title",
+        "nested": true
+      },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "desc",
+        "nested": true
+      },
+      {
+        "type": "fieldConfiguration",
+        "key": "fields",
+        "nested": true
+      },
+      {
+        "type": "buttonConfiguration",
+        "label": "Buttons",
+        "key": "buttons",
+        "wide": true,
+        "nested": true
+      }
+    ]
+  },
   "formblock": {
     "name": "Form Block",
     "icon": "Form",