From f4d2efdaa16da3fa0f627b39ea1d624b9ea74c35 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 8 Dec 2023 16:40:50 +0000
Subject: [PATCH] Cleanup

---
 .../controls/FormStepConfiguration.svelte     | 34 +++++++------------
 .../settings/controls/FormStepControls.svelte | 24 +++++++------
 .../Component/ComponentSettingsSection.svelte |  2 +-
 packages/client/manifest.json                 |  1 +
 4 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
index 098c6277fb..8e37d1b058 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
+++ b/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.slice(0, nextStep),
-      {},
-      ...value.slice(nextStep),
-    ])
+    dispatch("change", value.toSpliced(currentStep + 1, 0, {}))
     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()
-    newValue[currentStep] = newStep
-    dispatch("change", newValue)
+    dispatch("change", value.toSpliced(currentStep, 1, newStep))
   }
 
   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">
diff --git a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
index 603b2631f5..054f9c0ed1 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
@@ -15,15 +15,17 @@
 </script>
 
 {#if stepCount === 1}
-  <ActionButton
-    icon="MultipleAdd"
-    secondary
-    on:click={() => {
-      stepAction("addStep")
-    }}
-  >
-    Add Step
-  </ActionButton>
+  <div class="stretch">
+    <ActionButton
+      icon="MultipleAdd"
+      secondary
+      on:click={() => {
+        stepAction("addStep")
+      }}
+    >
+      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;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index f6f4cf9c90..d96729d3d2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/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>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1676958cf4..bc774b0598 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6038,6 +6038,7 @@
     "icon": "AssetsAdded",
     "block": true,
     "hasChildren": false,
+    "ejectable": false,
     "size": {
       "width": 400,
       "height": 400