update automation type coercion

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

@@ -122,7 +122,7 @@ const automationActions = store => ({
   },
   toggleFieldControl: value => {
     store.update(state => {
-      state.selectedAutomation.automation.rowControl = value
+      state.selectedBlock.rowControl = value
       return state
     })
   },

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

@@ -3,14 +3,8 @@
   import Flowchart from "./FlowChart/FlowChart.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
-  function onSelect(block) {
-    automationStore.update(state => {
-      state.selectedBlock = block
-      return state
-    })
-  }
 </script>
 
 {#if automation}
-  <Flowchart {automation} {onSelect} />
+  <Flowchart {automation} />
 {/if}

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

@@ -16,13 +16,11 @@
   } from "@budibase/bbui"
 
   export let automation
-  export let onSelect
 
   let testDataModal
   let blocks
   let confirmDeleteDialog
 
-  $: rowControl = $automationStore.selectedAutomation.automation.rowControl
   $: {
     blocks = []
     if (automation) {
@@ -33,13 +31,6 @@
     }
   }
 
-  function toggleFieldControl(evt) {
-    automationStore.actions.toggleFieldControl(evt.detail)
-    automationStore.actions.save(
-      $automationStore.selectedAutomation?.automation
-    )
-  }
-
   async function deleteAutomation() {
     await automationStore.actions.delete(
       $automationStore.selectedAutomation?.automation
@@ -70,11 +61,6 @@
       <div class="subtitle">
         <Heading size="S">{automation.name}</Heading>
         <div style="display:flex; align-items: center;">
-          <div class="iconPadding">
-            <Tooltip direction="left" text="Allow binding to all inputs">
-              <Toggle bind:value={rowControl} on:change={toggleFieldControl} />
-            </Tooltip>
-          </div>
           <div class="iconPadding">
             <div class="icon">
               <Icon
@@ -101,7 +87,7 @@
         animate:flip={{ duration: 500 }}
         in:fly|local={{ x: 500, duration: 1500 }}
       >
-        <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
+        <FlowItem {testDataModal} {testAutomation} {block} />
       </div>
     {/each}
   </div>

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

@@ -10,6 +10,7 @@
     Button,
     StatusLight,
     ActionButton,
+    Select,
   } from "@budibase/bbui"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
@@ -17,7 +18,6 @@
   import ActionModal from "./ActionModal.svelte"
   import { externalActions } from "./ExternalActions"
 
-  export let onSelect
   export let block
   export let testDataModal
   let selected
@@ -26,6 +26,9 @@
   let resultsModal
   let setupToggled
   let blockComplete
+
+  $: rowControl = $automationStore.selectedAutomation.automation.rowControl
+
   $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
     step => (block.id ? step.id === block.id : step.stepId === block.stepId)
   )
@@ -42,12 +45,6 @@
     $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
-    ? $automationStore.selectedAutomation?.automation?.definition?.steps
-        .length > 0
-    : !isTrigger && steps.length - blockIdx > 1
   $: hasCompletedInputs = Object.keys(
     block.schema?.inputs?.properties || {}
   ).every(x => block?.inputs[x])
@@ -58,6 +55,26 @@
       $automationStore.selectedAutomation?.automation
     )
   }
+  function toggleFieldControl(evt) {
+    onSelect(block)
+    let rowControl
+    if (evt.detail === "Use values") {
+      rowControl = false
+    } else {
+      rowControl = true
+    }
+    automationStore.actions.toggleFieldControl(rowControl)
+    automationStore.actions.save(
+      $automationStore.selectedAutomation?.automation
+    )
+  }
+
+  async function onSelect(block) {
+    await automationStore.update(state => {
+      state.selectedBlock = block
+      return state
+    })
+  }
 </script>
 
 <div
@@ -120,15 +137,31 @@
       <Layout noPadding gap="S">
         <div class="splitHeader">
           <ActionButton
-            on:click={() => (setupToggled = !setupToggled)}
+            on:click={() => {
+              onSelect(block)
+              setupToggled = !setupToggled
+            }}
             quiet
             icon={setupToggled ? "ChevronDown" : "ChevronRight"}
           >
             <Detail size="S">Setup</Detail>
           </ActionButton>
           {#if !isTrigger}
-            <div on:click={() => deleteStep()}>
-              <Icon name="DeleteOutline" />
+            <div class="block-options">
+              <div>
+                <Select
+                  on:change={toggleFieldControl}
+                  quiet
+                  defaultValue="Use values"
+                  autoWidth
+                  value={rowControl ? "Use bindings" : "Use values"}
+                  options={["Use values", "Use bindings"]}
+                  placeholder={null}
+                />
+              </div>
+              <div class="delete-padding" on:click={() => deleteStep()}>
+                <Icon name="DeleteOutline" />
+              </div>
             </div>
           {/if}
         </div>
@@ -174,6 +207,13 @@
 {/if}
 
 <style>
+  .delete-padding {
+    padding-left: 30px;
+  }
+  .block-options {
+    display: flex;
+    align-items: center;
+  }
   .center-items {
     display: flex;
     align-items: center;

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

@@ -222,6 +222,7 @@
         />
       {:else if value.customType === "row"}
         <RowSelector
+          {block}
           value={inputData[key]}
           on:change={e => onChange(e, key)}
           {bindings}

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

@@ -11,6 +11,8 @@
 
   export let value
   export let bindings
+  export let block
+
   let table
   let schemaFields
 
@@ -23,7 +25,7 @@
     link: "ro_ta_123_456",
     longform: "long form text",
   }
-
+  $: rowControl = block.rowControl
   $: {
     table = $tables.list.find(table => table._id === value?.tableId)
     schemaFields = Object.entries(table?.schema ?? {})
@@ -97,7 +99,7 @@
       {#if !schema.autocolumn}
         {#if schema.type !== "attachment"}
           {#if $automationStore.selectedAutomation.automation.testData}
-            {#if !$automationStore.selectedAutomation.automation.rowControl}
+            {#if !rowControl}
               <RowSelectorTypes
                 {field}
                 {schema}
@@ -109,28 +111,32 @@
               <DrawerBindableInput
                 placeholder={placeholders[schema.type]}
                 panel={AutomationBindingPanel}
-                value={value[field]}
+                value={Array.isArray(value[field])
+                  ? value[field].join(" ")
+                  : value[field]}
                 on:change={e => onChange(e, field, schema.type)}
                 label={field}
                 type="string"
                 {bindings}
                 fillWidth={true}
-                allowJS={false}
+                allowJS={true}
               />
             {/if}
-          {:else if !$automationStore.selectedAutomation.automation.rowControl}
+          {:else if !rowControl}
             <RowSelectorTypes {field} {schema} {bindings} {value} {onChange} />
           {:else}
             <DrawerBindableInput
               placeholder={placeholders[schema.type]}
               panel={AutomationBindingPanel}
-              value={value[field]}
+              value={Array.isArray(value[field])
+                ? value[field].join(" ")
+                : value[field]}
               on:change={e => onChange(e, field, schema.type)}
               label={field}
               type="string"
               {bindings}
               fillWidth={true}
-              allowJS={false}
+              allowJS={true}
             />
           {/if}
         {/if}

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

@@ -59,6 +59,6 @@
     type="string"
     {bindings}
     fillWidth={true}
-    allowJS={false}
+    allowJS={true}
   />
 {/if}

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

@@ -26,14 +26,14 @@
   export let value = ""
   export let valid
   export let allowJS = false
-  $: console.log(value)
+
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
-  //let initialValueJS = value?.startsWith("{{ js ")
-  let mode = "Handlebars"
-  let jsValue = null
-  let hbsValue = value
+  let initialValueJS = value?.startsWith("{{ js ")
+  let mode = initialValueJS ? "JavaScript" : "Handlebars"
+  let jsValue = initialValueJS ? value : null
+  let hbsValue = initialValueJS ? null : value
 
   $: usingJS = mode === "JavaScript"
   $: searchRgx = new RegExp(search, "ig")

packages/builder/src/stores/portal/apps.js

@@ -66,7 +66,6 @@ export function createAppStore() {
   }
 
   async function update(appId, value) {
-    console.log({ value })
     const response = await api.put(`/api/applications/${appId}`, { ...value })
     if (response.status === 200) {
       store.update(state => {