update automation type coercion

2022-02-15 13:03:24 +00:00 · 2022-02-15 13:03:24 +00:00 · 77822bbca3
parent 28ebc65397
commit 77822bbca3
9 changed files with 73 additions and 47 deletions
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/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
    })
  },
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/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}
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/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;
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/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}
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/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}
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@ -59,6 +59,6 @@
    type="string"
    {bindings}
    fillWidth={true}
-    allowJS={false}
+    allowJS={true}
  />
 {/if}
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/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")
--- a/packages/builder/src/stores/portal/apps.js
+++ b/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 => {