Cleanup

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

@@ -31,6 +31,7 @@
   $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
   $: emitCurrentStep(currentStep)
   $: sectionName = getSectionName($multiStepStore)
+  $: stepConfigInstance = buildPseudoInstance(value[currentStep] || {})
   $: stepDef = {
     settings: [
       {
@@ -39,7 +40,7 @@
         settings: [
           {
             type: "formStepControls",
-            label: "Multi-steps",
+            label: "Steps",
             key: "steps",
           },
           {
@@ -88,40 +89,32 @@
   }
 
   const addStep = () => {
-    const nextStep = currentStep + 1
+    dispatch("change", value.toSpliced(currentStep + 1, 0, {}))
-    dispatch("change", [
-      ...value.slice(0, nextStep),
-      {},
-      ...value.slice(nextStep),
-    ])
     multiStepStore.update(state => ({
       ...state,
-      currentStep: nextStep,
+      currentStep: currentStep + 1,
     }))
   }
 
   const removeStep = () => {
     dispatch("change", value.toSpliced(currentStep, 1))
-    const newStep = Math.min(currentStep, stepCount - 2)
     multiStepStore.update(state => ({
       ...state,
-      currentStep: newStep,
+      currentStep: Math.min(currentStep, stepCount - 2),
     }))
   }
 
   const previousStep = () => {
-    const prevStepIdx = Math.max(currentStep - 1, 0)
     multiStepStore.update(state => ({
       ...state,
-      currentStep: prevStepIdx,
+      currentStep: Math.max(currentStep - 1, 0),
     }))
   }
 
   const nextStep = () => {
-    const nextStepIdx = currentStep + 1
     multiStepStore.update(state => ({
       ...state,
-      currentStep: Math.min(nextStepIdx, value.length - 1),
+      currentStep: Math.min(currentStep + 1, value.length - 1),
     }))
   }
 
@@ -130,9 +123,7 @@
       ...value[currentStep],
       [field.key]: val,
     }
-    let newValue = value.slice()
+    dispatch("change", value.toSpliced(currentStep, 1, newStep))
-    newValue[currentStep] = newStep
-    dispatch("change", newValue)
   }
 
   const handleStepAction = action => {
@@ -162,18 +153,17 @@
   const buildPseudoInstance = ({ buttons, fields, title, desc }) => {
     return {
       _id: Helpers.uuid(),
-      _component: "@budibase/standard-components/multistepformblock-step",
+      _component: "@budibase/standard-components/multistepformblockstep",
+      _instanceName: `Step ${currentStep + 1}`,
       buttons: buttons || defaultButtonConfig,
       fields,
       title,
       desc,
+
+      // Needed for field configuration
       dataSource,
-      step: currentStep + 1,
-      _instanceName: `Step ${currentStep + 1}`,
     }
   }
-
-  $: stepConfigInstance = buildPseudoInstance(value[currentStep] || {})
 </script>
 
 <div class="nested-section">

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

@@ -15,15 +15,17 @@
 </script>
 
 {#if stepCount === 1}
-  <ActionButton
+  <div class="stretch">
-    icon="MultipleAdd"
+    <ActionButton
-    secondary
+      icon="MultipleAdd"
-    on:click={() => {
+      secondary
-      stepAction("addStep")
+      on:click={() => {
-    }}
+        stepAction("addStep")
-  >
+      }}
-    Add Step
+    >
-  </ActionButton>
+      Add Step
+    </ActionButton>
+  </div>
 {:else}
   <div class="step-actions">
     <ActionButton
@@ -65,11 +67,13 @@
 {/if}
 
 <style>
+  .stretch :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
   .step-actions {
     display: flex;
     gap: var(--spacing-s);
   }
-
   .step-actions :global(.spectrum-ActionButton) {
     height: 32px;
   }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -210,7 +210,7 @@
     </DetailSummary>
   {/if}
 {/each}
-{#if componentDefinition?.block && !tag}
+{#if componentDefinition?.block && !tag && componentDefinition.ejectable !== false}
   <DetailSummary name="Eject" collapsible={false}>
     <EjectBlockButton />
   </DetailSummary>

packages/client/manifest.json

@@ -6038,6 +6038,7 @@
     "icon": "AssetsAdded",
     "block": true,
     "hasChildren": false,
+    "ejectable": false,
     "size": {
       "width": 400,
       "height": 400