allow user to add automation block between existing blocks

packages/builder/src/builderStore/store/automation/Automation.js

@@ -17,7 +17,7 @@ export default class Automation {
     this.automation.testData = data
   }
 
-  addBlock(block) {
+  addBlock(block, idx) {
     // Make sure to add trigger if doesn't exist
     if (!this.hasTrigger() && block.type === "TRIGGER") {
       const trigger = { id: generate(), ...block }
@@ -26,10 +26,7 @@ export default class Automation {
     }
 
     const newBlock = { id: generate(), ...block }
-    this.automation.definition.steps = [
-      ...this.automation.definition.steps,
-      newBlock,
-    ]
+    this.automation.definition.steps.splice(idx, 0, newBlock)
     return newBlock
   }
 

packages/builder/src/builderStore/store/automation/index.js

@@ -104,9 +104,12 @@ const automationActions = store => ({
       return state
     })
   },
-  addBlockToAutomation: block => {
+  addBlockToAutomation: (block, blockIdx) => {
     store.update(state => {
-      const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
+      const newBlock = state.selectedAutomation.addBlock(
+        cloneDeep(block),
+        blockIdx
+      )
       state.selectedBlock = newBlock
       return state
     })

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -1,10 +1,9 @@
 <script>
   import { ModalContent, Layout, Detail, Body, Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
-  import { database } from "stores/backend"
   import { externalActions } from "./ExternalActions"
-  $: instanceId = $database._id
 
+  export let blockIdx
   let selectedAction
   let actionVal
   let actions = Object.entries($automationStore.blockDefinitions.ACTION)
@@ -39,7 +38,8 @@
     )
     automationStore.actions.addBlockToAutomation(newBlock)
     await automationStore.actions.save(
-      $automationStore.selectedAutomation?.automation
+      $automationStore.selectedAutomation?.automation,
+      blockIdx
     )
   }
 </script>

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -14,7 +14,6 @@
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import ResultsModal from "./ResultsModal.svelte"
   import ActionModal from "./ActionModal.svelte"
-  import { database } from "stores/backend"
   import { externalActions } from "./ExternalActions"
 
   export let onSelect
@@ -29,7 +28,6 @@
   $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
     step => step.stepId === block.stepId
   )
-  $: instanceId = $database._id
 
   $: isTrigger = block.type === "TRIGGER"
 
@@ -40,6 +38,10 @@
   $: blockIdx = steps.findIndex(step => step.id === block.id)
   $: lastStep = !isTrigger && blockIdx + 1 === steps.length
 
+  $: totalBlocks =
+    $automationStore.selectedAutomation?.automation?.definition?.steps.length +
+    1
+
   // Logic for hiding / showing the add button.first we check if it has a child
   // then we check to see whether its inputs have been commpleted
   $: disableAddButton = isTrigger
@@ -167,13 +169,24 @@
   </Modal>
 
   <Modal bind:this={actionModal} width="30%">
-    <ActionModal bind:blockComplete />
+    <ActionModal {blockIdx} bind:blockComplete />
   </Modal>
 
   <Modal bind:this={webhookModal} width="30%">
     <CreateWebhookModal />
   </Modal>
 </div>
+<div class="separator" />
+<Icon
+  on:click={() => actionModal.show()}
+  disabled={!hasCompletedInputs}
+  hoverable
+  name="AddCircle"
+  size="S"
+/>
+{#if isTrigger ? totalBlocks > 1 : blockIdx !== totalBlocks - 2}
+  <div class="separator" />
+{/if}
 
 <style>
   .center-items {
@@ -191,8 +204,7 @@
   .block {
     width: 360px;
     font-size: 16px;
-    background-color: var(--spectrum-alias-background-color-secondary);
-    color: var(--grey-9);
+    background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px 4px 4px 4px;
   }
@@ -200,4 +212,13 @@
   .blockSection {
     padding: var(--spacing-xl);
   }
+
+  .separator {
+    width: 1px;
+    height: 25px;
+    border-left: 1px dashed var(--grey-4);
+    color: var(--grey-4);
+    /* center horizontally */
+    align-self: center;
+  }
 </style>