From 81ca48a331b2a0fa2873602dd1ec8ecd8b3daad1 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 31 Oct 2023 13:05:04 +0000
Subject: [PATCH] tidy up and issues found in testing

---
 .../builder/src/builderStore/store/automation/index.js |  7 +++----
 .../AutomationBuilder/FlowChart/FlowChart.svelte       |  7 +++----
 .../AutomationBuilder/FlowChart/FlowItem.svelte        | 10 ++++++----
 .../automation/SetupPanel/AutomationBlockSetup.svelte  |  5 +----
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 1b94f9b05b..ba2458f414 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -22,9 +22,8 @@ export const getAutomationStore = () => {
   return store
 }
 
-function updateReferencesInObject(obj, modifiedIndex, action) {
+const updateReferencesInObject = (obj, modifiedIndex, action) => {
   const regex = /{{\s*steps\.(\d+)\./g
-
   for (const key in obj) {
     if (typeof obj[key] === "string") {
       let matches
@@ -48,7 +47,7 @@ function updateReferencesInObject(obj, modifiedIndex, action) {
   }
 }
 
-function updateStepReferences(steps, modifiedIndex, action) {
+const updateStepReferences = (steps, modifiedIndex, action) => {
   steps.forEach(step => {
     updateReferencesInObject(step.inputs, modifiedIndex, action)
   })
@@ -296,7 +295,7 @@ const automationActions = store => ({
       newAutomation.definition.steps = newAutomation.definition.steps.filter(
         step => step.id !== block.id
       )
-      delete newAutomation.definition.stepNames[block.id]
+      delete newAutomation.definition.stepNames?.[block.id]
     }
     try {
       updateStepReferences(newAutomation.definition.steps, blockIdx, "delete")
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index d45fe96ad7..a3c6a06690 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -15,8 +15,7 @@
   let testDataModal
   let confirmDeleteDialog
   let scrolling = false
-  $: blocks = getBlocks(automation)
-
+  $: blocks = getBlocks(automation).filter(x => x.stepId !== ActionStepID.LOOP)
   const getBlocks = automation => {
     let blocks = []
     if (automation.definition.trigger) {
@@ -138,9 +137,9 @@
 
   .header.scrolling {
     background: var(--background);
-    z-index: -1;
     border-bottom: var(--border-light);
-    background: var(--background);
+    border-left: var(--border-light);
+    z-index: 1;
   }
 
   .header {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index f494728cb4..9692154e31 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -7,9 +7,9 @@
     Detail,
     Modal,
     Button,
-    ActionButton,
     notifications,
     Label,
+    AbsTooltip,
   } from "@budibase/bbui"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
@@ -125,6 +125,10 @@
         </div>
 
         <div class="blockTitle">
+          <AbsTooltip type="negative" text="Remove looping">
+            <Icon on:click={removeLooping} hoverable name="DeleteOutline" />
+          </AbsTooltip>
+
           <div style="margin-left: 10px;" on:click={() => {}}>
             <Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} />
           </div>
@@ -135,9 +139,6 @@
     <Divider noMargin />
     {#if !showLooping}
       <div class="blockSection">
-        <div class="block-options">
-          <ActionButton on:click={() => removeLooping()} icon="DeleteOutline" />
-        </div>
         <Layout noPadding gap="S">
           <AutomationBlockSetup
             schemaProperties={Object.entries(
@@ -252,5 +253,6 @@
   .blockTitle {
     display: flex;
     align-items: center;
+    gap: var(--spacing-s);
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 9d931af7bb..9260a197c2 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -58,7 +58,6 @@
   let fillWidth = true
   let inputData
   let codeBindingOpen = false
-  $: console.log($selectedAutomation?.definition)
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -136,7 +135,6 @@
         await automationStore.actions.addTestDataToAutomation(newTestData)
       } else {
         const data = { schema, [key]: e.detail }
-        console.log(data)
         await automationStore.actions.updateBlockInputs(block, data)
       }
     } catch (error) {
@@ -156,7 +154,7 @@
     }
     let blockIdx = allSteps.findIndex(step => step.id === block.id)
 
-    // Extract all outputs from all previous steps as available bindins
+    // Extract all outputs from all previous steps as available bindingsx§x
     let bindings = []
     let loopBlockCount = 0
     for (let idx = 0; idx < blockIdx; idx++) {
@@ -197,7 +195,6 @@
       }
       let bindingName =
         automation.stepNames?.[allSteps[idx - loopBlockCount].id]
-      console.log(bindingName)
       bindings = bindings.concat(
         outputs.map(([name, value]) => {
           let runtimeName = isLoopBlock