From a7022de9b5ee7633a98daed9bfb01a87d3146d37 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 30 Apr 2021 16:17:57 +0100
Subject: [PATCH] Moving drawers around to be a common component as they are
 utilised in a few places, keep all the binding work together, as well as some
 fixing for readable/runtime binding detection and conversion.

---
 .../builder/src/builderStore/dataBinding.js   | 10 +++++-
 .../SetupPanel/AutomationBlockSetup.svelte    |  4 +--
 .../automation/SetupPanel/RowSelector.svelte  |  4 +--
 .../DataTable/modals/CreateEditColumn.svelte  |  2 +-
 .../bindings}/BindingPanel.svelte             | 31 ++++++++-----------
 .../{ => bindings}/DrawerBindableInput.svelte |  4 +--
 .../{ => bindings}/ModalBindableInput.svelte  |  2 +-
 .../{ => bindings}/ServerBindingPanel.svelte  | 31 +++++++++----------
 .../src/components/common/bindings/utils.js   | 15 +++++++++
 .../EventsEditor/actions/DeleteRow.svelte     |  2 +-
 .../EventsEditor/actions/LogIn.svelte         |  2 +-
 .../EventsEditor/actions/NavigateTo.svelte    |  2 +-
 .../EventsEditor/actions/SaveFields.svelte    |  2 +-
 .../PropertyControls/PropertyControl.svelte   |  2 +-
 .../integration/QueryParameterBuilder.svelte  |  2 +-
 .../string-templates/test/helpers.spec.js     | 13 ++++++++
 16 files changed, 79 insertions(+), 49 deletions(-)
 rename packages/builder/src/components/{design/PropertiesPanel => common/bindings}/BindingPanel.svelte (89%)
 rename packages/builder/src/components/common/{ => bindings}/DrawerBindableInput.svelte (92%)
 rename packages/builder/src/components/common/{ => bindings}/ModalBindableInput.svelte (95%)
 rename packages/builder/src/components/common/{ => bindings}/ServerBindingPanel.svelte (88%)
 create mode 100644 packages/builder/src/components/common/bindings/utils.js

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index b42e58be3f..c2c1a0ff71 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -340,8 +340,16 @@ function shouldReplaceBinding(currentValue, from, convertTo) {
   if (convertTo === "readableBinding") {
     return true
   }
+  // remove all the spaces, if the input is surrounded by spaces e.g. [ Auto ID ] then
+  // this makes sure it is detected
   const noSpaces = currentValue.replace(/\s+/g, "")
-  return !noSpaces.includes(`[${from}]`)
+  const fromNoSpaces = from.replace(/\s+/g, "")
+  const invalids = [
+    `[${fromNoSpaces}]`,
+    `"${fromNoSpaces}"`,
+    `'${fromNoSpaces}'`,
+  ]
+  return !invalids.find(invalid => noSpaces.includes(invalid))
 }
 
 /**
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ecc2a3a83c..8e1cdc6282 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,8 +5,8 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
+  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let block
   export let webhookModal
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 4444a142da..84e5fc823c 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,8 +1,8 @@
 <script>
   import { tables } from "stores/backend"
   import { Select } from "@budibase/bbui"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
+  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let value
   export let bindings
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index f18c82cafb..970ebca101 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -23,7 +23,7 @@
   import DatePicker from "components/common/DatePicker.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { truncate } from "lodash"
-  import ModalBindableInput from "components/common/ModalBindableInput.svelte"
+  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import { getBindings } from "components/backend/DataTable/formula"
 
   const AUTO_TYPE = "auto"
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
similarity index 89%
rename from packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
rename to packages/builder/src/components/common/bindings/BindingPanel.svelte
index 6656d23eac..53feac88da 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -9,6 +9,7 @@
   } from "builderStore/dataBinding"
   import { currentAsset, store } from "../../../builderStore"
   import { handlebarsCompletions } from "constants/completions"
+  import { addToText } from "./utils"
 
   const dispatch = createEventDispatcher()
 
@@ -37,20 +38,6 @@
     valid = isValid(runtimeBinding)
   }
 
-  function addToText(readableBinding) {
-    const position = getCaretPosition()
-    const toAdd = `{{ ${readableBinding} }}`
-
-    if (position.start) {
-      value =
-        value.substring(0, position.start) +
-        toAdd +
-        value.substring(position.end, value.length)
-    } else {
-      value = toAdd
-    }
-  }
-
   export function cancel() {
     dispatch("update", originalValue)
     bindingDrawer.close()
@@ -69,7 +56,10 @@
           {#each context.filter(context =>
             context.readableBinding.match(searchRgx)
           ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
+            <li
+              on:click={() => {
+                value = addToText(value, getCaretPosition(), readableBinding)
+              }}>
               {readableBinding}
             </li>
           {/each}
@@ -83,7 +73,10 @@
           {#each instance.filter(instance =>
             instance.readableBinding.match(searchRgx)
           ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
+            <li
+              on:click={() => {
+                value = addToText(value, getCaretPosition(), readableBinding)
+              }}>
               {readableBinding}
             </li>
           {/each}
@@ -94,7 +87,10 @@
       <Spacer small />
       <ul>
         {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <li on:click={() => addToText(helper.text)}>
+          <li
+            on:click={() => {
+              value = addToText(value, getCaretPosition(), helper.text)
+            }}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>
               <div class="description">
@@ -152,7 +148,6 @@
   }
   ul {
     list-style: none;
-    padding-left: 0;
     margin: 0;
     padding: 0;
   }
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
similarity index 92%
rename from packages/builder/src/components/common/DrawerBindableInput.svelte
rename to packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index c593da4e38..3f011a854e 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -4,8 +4,8 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
-  import ServerBindingPanel from "components/common/ServerBindingPanel.svelte"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/common/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
similarity index 95%
rename from packages/builder/src/components/common/ModalBindableInput.svelte
rename to packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 51a230be98..11c6ddeb41 100644
--- a/packages/builder/src/components/common/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -4,7 +4,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import ServerBindingPanel from "components/common/ServerBindingPanel.svelte"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/common/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
similarity index 88%
rename from packages/builder/src/components/common/ServerBindingPanel.svelte
rename to packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 0632559bce..08250e35f3 100644
--- a/packages/builder/src/components/common/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -4,7 +4,8 @@
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
-  import { readableToRuntimeBinding } from "../../builderStore/dataBinding"
+  import { readableToRuntimeBinding } from "../../../builderStore/dataBinding"
+  import { addToText } from "./utils"
 
   const dispatch = createEventDispatcher()
 
@@ -26,24 +27,14 @@
 
   function checkValid() {
     if (hasReadable) {
-      validity = isValid(readableToRuntimeBinding(bindableProperties, value))
+      const runtime = readableToRuntimeBinding(bindableProperties, value)
+      console.log(runtime)
+      validity = isValid(runtime)
     } else {
       validity = isValid(value)
     }
   }
 
-  function addToText(binding) {
-    const position = getCaretPosition()
-    const toAdd = `{{ ${binding.path} }}`
-    if (position.start) {
-      value =
-        value.substring(0, position.start) +
-        toAdd +
-        value.substring(position.end, value.length)
-    } else {
-      value += toAdd
-    }
-  }
   export function cancel() {
     dispatch("update", originalValue)
     if (bindingContainer && bindingContainer.close) {
@@ -64,7 +55,11 @@
       {#each bindings.filter(binding =>
         binding.label.match(searchRgx)
       ) as binding}
-        <div class="binding" on:click={() => addToText(binding)}>
+        <div
+          class="binding"
+          on:click={() => {
+            value = addToText(value, getCaretPosition(), binding)
+          }}>
           <span class="binding__label">{binding.label}</span>
           <span class="binding__type">{binding.type}</span>
           <br />
@@ -77,7 +72,11 @@
     <Heading extraSmall>Helpers</Heading>
     <Spacer extraSmall />
     {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-      <div class="binding" on:click={() => addToText(helper)}>
+      <div
+        class="binding"
+        on:click={() => {
+          value = addToText(value, getCaretPosition(), helper)
+        }}>
         <span class="binding__label">{helper.label}</span>
         <br />
         <div class="binding__description">
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
new file mode 100644
index 0000000000..354e35b948
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -0,0 +1,15 @@
+export function addToText(value, caretPos, binding) {
+  let toAdd = binding.path
+  if (!value.includes("{{") && !value.includes("}}")) {
+    toAdd = `{{ ${binding.path} }}`
+  }
+  if (caretPos.start) {
+    value =
+      value.substring(0, caretPos.start) +
+      toAdd +
+      value.substring(caretPos.end, value.length)
+  } else {
+    value += toAdd
+  }
+  return value
+}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
index 0895c78331..45151bde04 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@@ -3,7 +3,7 @@
   import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
index eee4dc2bc7..e682b83663 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
@@ -2,7 +2,7 @@
   import { Label } from "@budibase/bbui"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index b9567c6523..5fb75aa63e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -2,7 +2,7 @@
   import { Label } from "@budibase/bbui"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index fb5cb3ef16..a381da1d73 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -4,7 +4,7 @@
   import { getBindableProperties } from "builderStore/dataBinding"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"
   import { createEventDispatcher } from "svelte"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 6b56910eed..75cd56b20a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -6,7 +6,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { capitalise } from "../../../../helpers"
 
   export let label = ""
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 8d5f39e6a7..adf63fcc47 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -4,7 +4,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let bindable = true
   export let parameters = []
diff --git a/packages/string-templates/test/helpers.spec.js b/packages/string-templates/test/helpers.spec.js
index 10ca0a564c..deddf86ad4 100644
--- a/packages/string-templates/test/helpers.spec.js
+++ b/packages/string-templates/test/helpers.spec.js
@@ -273,6 +273,19 @@ describe("test the comparison helpers", () => {
   })
 })
 
+describe("Test the object/array helper", () => {
+  it("should allow plucking from an array of objects", async () => {
+    const context = {
+      items: [
+        { price: 20 },
+        { price: 30 },
+      ]
+    }
+    const output = await processString("{{ sum ( pluck items 'price' ) }}", context)
+    expect(output).toBe(50)
+  })
+})
+
 describe("Test the literal helper", () => {
   it("should allow use of the literal specifier for a number", async () => {
     const output = await processString(`{{literal a}}`, {