Move multi step button config into frontend core and fix button config setting layout

packages/builder/src/builderStore/store/frontend.js

@@ -609,12 +609,12 @@ export const getFrontendStore = () => {
           // Use default config if the 'buttons' prop has never been initialised
           if (!("buttons" in enrichedComponent)) {
             enrichedComponent["buttons"] =
-              Utils.buildDynamicButtonConfig(enrichedComponent)
+              Utils.buildFormBlockButtonConfig(enrichedComponent)
             migrated = true
           } else if (enrichedComponent["buttons"] == null) {
             // Ignore legacy config if 'buttons' has been reset by 'resetOn'
             const { _id, actionType, dataSource } = enrichedComponent
-            enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({
+            enrichedComponent["buttons"] = Utils.buildFormBlockButtonConfig({
               _id,
               actionType,
               dataSource,

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

@@ -1,18 +1,16 @@
 <script>
-  // import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+  import { createEventDispatcher, setContext } from "svelte"
-  // import { getComponentForSetting } from "components/design/settings/componentSettings"
-  import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
   import { getDatasourceForProvider } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
   import { Helpers } from "@budibase/bbui"
   import FormStepControls from "./FormStepControls.svelte"
-  import { setContext } from "svelte"
   import { writable } from "svelte/store"
+  import { buildMultiStepFormBlockButtonConfig } from "@budibase/frontend-core/src/utils/utils"
 
   export let componentInstance
   export let componentBindings
-  export let value //steps
+  export let value
   export let bindings
 
   const dispatch = createEventDispatcher()
@@ -27,14 +25,17 @@
   setContext("step-form-block", stepStore)
 
   $: ({ currentStep } = $stepStore)
-  $: lastIdx = stepState?.length - 1
-
   $: if (stepState.length) {
     stepStore.update(state => ({
       ...state,
       stepsCount: stepState.length || 0,
     }))
   }
+  $: defaultButtonConfig = buildMultiStepFormBlockButtonConfig({
+    _id: componentInstance._id,
+    steps: value,
+    currentStep,
+  })
 
   // Step Definition Settings
   let compSettings = [
@@ -171,69 +172,11 @@
     }
   }
 
-  // Multistep button generation
-  // This kind of behaviour should be shifted to frontend-core
-  /*
-    Also, look at this unicorn
-    	\
-			 \_
-			 /.(((
-			(,/"(((__,--.
-			    \  ) _( /{
-			     || "  ||
-			     ||    ||
-			     ''    ''
-   */
-  const generateButtons = () => {
-    const buttons = []
-
-    if (stepState.length > 1) {
-      if (currentStep > 0) {
-        buttons.push({
-          _id: Helpers.uuid(),
-          _component: "@budibase/standard-components/button",
-          _instanceName: Helpers.uuid(),
-          text: "Back",
-          type: "secondary",
-          size: "M",
-          onClick: [
-            {
-              parameters: {
-                type: "prev",
-                componentId: `${componentInstance._id}-form`,
-              },
-              "##eventHandlerType": "Change Form Step",
-            },
-          ],
-        })
-      }
-      buttons.push({
-        _id: Helpers.uuid(),
-        _component: "@budibase/standard-components/button",
-        _instanceName: Helpers.uuid(),
-        text: "Next",
-        type: "cta",
-        size: "M",
-        disabled: lastIdx === currentStep,
-        onClick: [
-          {
-            parameters: {
-              type: "next",
-              componentId: `${componentInstance._id}-form`,
-            },
-            "##eventHandlerType": "Change Form Step",
-          },
-        ],
-      })
-    }
-    return buttons
-  }
-
   const buildPseudoInstance = ({ buttons, fields, title, desc }) => {
     return {
       _id: Helpers.uuid(),
       _component: "@budibase/standard-components/multistepformblock-step",
-      buttons: buttons || generateButtons(),
+      buttons: buttons || defaultButtonConfig,
       fields,
       title,
       desc,

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

@@ -148,6 +148,12 @@
   .control {
     position: relative;
   }
+  .text {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    color: var(--grey-6);
+    grid-column: 2 / 2;
+  }
+
   .property-control.wide .control {
     flex: 1;
   }
@@ -160,12 +166,10 @@
   .property-control.wide > * {
     width: 100%;
   }
-  .text {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
-    grid-column: 2 / 2;
-  }
   .property-control.wide .text {
     grid-column: 1 / -1;
   }
+  .property-control.wide .label {
+    margin-bottom: -8px;
+  }
 </style>

packages/client/manifest.json

@@ -6060,7 +6060,8 @@
             "key": "steps",
             "nested": true,
             "labelHidden": true,
-            "resetOn": ["dataSource", "actionType"]
+            "resetOn": ["dataSource", "actionType"],
+            "defaultValue": [{}]
           }
         ]
       }

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

@@ -265,7 +265,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-edit",
                 showDeleteButton: deleteLabel !== "",
                 showSaveButton: true,
@@ -299,7 +299,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-new",
                 showDeleteButton: false,
                 showSaveButton: true,

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -106,7 +106,7 @@
     notificationOverride,
     buttons:
       buttons ||
-      Utils.buildDynamicButtonConfig({
+      Utils.buildFormBlockButtonConfig({
         _id: $component.id,
         showDeleteButton,
         showSaveButton,

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

@@ -116,7 +116,7 @@ export const domDebounce = callback => {
  *
  * @param {any} props
  * */
-export const buildDynamicButtonConfig = props => {
+export const buildFormBlockButtonConfig = props => {
   const {
     _id,
     actionType,
@@ -130,7 +130,6 @@ export const buildDynamicButtonConfig = props => {
   } = props || {}
 
   if (!_id) {
-    console.log("MISSING ID")
     return
   }
   const formId = `${_id}-form`
@@ -241,3 +240,56 @@ export const buildDynamicButtonConfig = props => {
 
   return defaultButtons
 }
+
+export const buildMultiStepFormBlockButtonConfig = props => {
+  const { _id, steps, currentStep } = props || {}
+
+  // Sanity check
+  if (!_id || !steps?.length) {
+    return
+  }
+
+  let buttons = []
+
+  // Add previous step button if we aren't the first step
+  buttons.push({
+    _id: Helpers.uuid(),
+    _component: "@budibase/standard-components/button",
+    _instanceName: Helpers.uuid(),
+    text: "Back",
+    type: "secondary",
+    size: "M",
+    disabled: currentStep === 0,
+    onClick: [
+      {
+        parameters: {
+          type: "prev",
+          componentId: `${_id}-form`,
+        },
+        "##eventHandlerType": "Change Form Step",
+      },
+    ],
+  })
+
+  // Add a next button if we aren't the last step
+  buttons.push({
+    _id: Helpers.uuid(),
+    _component: "@budibase/standard-components/button",
+    _instanceName: Helpers.uuid(),
+    text: "Next",
+    type: "cta",
+    size: "M",
+    disabled: currentStep === steps.length - 1,
+    onClick: [
+      {
+        parameters: {
+          type: "next",
+          componentId: `${_id}-form`,
+        },
+        "##eventHandlerType": "Change Form Step",
+      },
+    ],
+  })
+
+  return buttons
+}