Merge pull request #5569 from Budibase/fix/automation-performance-ux

Some small automation fixes

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

@@ -48,10 +48,6 @@
     $automationStore.selectedAutomation?.automation?.definition?.steps.length +
     1
 
-  $: hasCompletedInputs = Object.keys(
-    block.schema?.inputs?.properties || {}
-  ).every(x => block?.inputs[x])
-
   $: loopingSelected =
     $automationStore.selectedAutomation?.automation.definition.steps.find(
       x => x.blockToLoop === block.id
@@ -290,13 +286,7 @@
   </Modal>
 </div>
 <div class="separator" />
-<Icon
+<Icon on:click={() => actionModal.show()} hoverable name="AddCircle" size="S" />
-  on:click={() => actionModal.show()}
-  disabled={!hasCompletedInputs}
-  hoverable
-  name="AddCircle"
-  size="S"
-/>
 {#if isTrigger ? totalBlocks > 1 : blockIdx !== totalBlocks - 2}
   <div class="separator" />
 {/if}

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -25,11 +25,11 @@
   import QueryParamSelector from "./QueryParamSelector.svelte"
   import CronBuilder from "./CronBuilder.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
-  import { debounce } from "lodash"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
   import { LuceneUtils } from "@budibase/frontend-core"
   import { getSchemaForTable } from "builderStore/dataBinding"
+  import { Utils } from "@budibase/frontend-core"
 
   export let block
   export let testData
@@ -54,7 +54,7 @@
   $: schema = getSchemaForTable(tableId, { searchableSchema: true }).schema
   $: schemaFields = Object.values(schema || {})
 
-  const onChange = debounce(async function (e, key) {
+  const onChange = Utils.sequential(async (e, key) => {
     try {
       if (isTestModal) {
         // Special case for webhook, as it requires a body, but the schema already brings back the body's contents
@@ -82,7 +82,7 @@
     } catch (error) {
       notifications.error("Error saving automation")
     }
-  }, 800)
+  })
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {
@@ -226,6 +226,7 @@
             on:change={e => onChange(e, key)}
             {bindings}
             fillWidth
+            updateOnChange={false}
           />
         {:else}
           <DrawerBindableInput
@@ -237,6 +238,7 @@
             on:change={e => onChange(e, key)}
             {bindings}
             allowJS={false}
+            updateOnChange={false}
           />
         {/if}
       {:else if value.customType === "query"}
@@ -310,6 +312,7 @@
             type={value.customType}
             on:change={e => onChange(e, key)}
             {bindings}
+            updateOnChange={false}
           />
         {:else}
           <div class="test">
@@ -321,6 +324,7 @@
               value={inputData[key]}
               on:change={e => onChange(e, key)}
               {bindings}
+              updateOnChange={false}
             />
           </div>
         {/if}

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -43,6 +43,11 @@
   }
 
   const coerce = (value, type) => {
+    const re = new RegExp(/{{([^{].*?)}}/g)
+    if (re.test(value)) {
+      return value
+    }
+
     if (type === "boolean") {
       if (typeof value === "boolean") {
         return value
@@ -120,6 +125,7 @@
                 {bindings}
                 fillWidth={true}
                 allowJS={true}
+                updateOnChange={false}
               />
             {/if}
           {:else if !rowControl}
@@ -137,6 +143,7 @@
               {bindings}
               fillWidth={true}
               allowJS={true}
+              updateOnChange={false}
             />
           {/if}
         {/if}

packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

@@ -60,5 +60,6 @@
     {bindings}
     fillWidth={true}
     allowJS={true}
+    updateOnChange={false}
   />
 {/if}

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -30,6 +30,10 @@
       label: "DateTime",
       value: "datetime",
     },
+    {
+      label: "Array",
+      value: "array",
+    },
   ]
 
   function addField() {
@@ -70,6 +74,7 @@
         secondary
         placeholder="Enter field name"
         on:change={fieldNameChanged(field.name)}
+        updateOnChange={false}
       />
       <Select
         value={field.type}

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -17,6 +17,7 @@
   export let disabled = false
   export let fillWidth
   export let allowJS = true
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -44,6 +45,7 @@
     value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
+    {updateOnChange}
   />
   {#if !disabled}
     <div class="icon" on:click={bindingDrawer.show}>

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -15,6 +15,7 @@
   export let placeholder
   export let label
   export let allowJS = false
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   let bindingModal
@@ -41,6 +42,7 @@
     value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
+    {updateOnChange}
   />
   <div class="icon" on:click={bindingModal.show}>
     <Icon size="S" name="FlashOn" />