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.

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))
 }
 
 /**

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 DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let block
   export let webhookModal

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 DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let value
   export let bindings

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"

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;
   }

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 BindingPanel from "components/common/bindings/BindingPanel.svelte"
-  import ServerBindingPanel from "components/common/ServerBindingPanel.svelte"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 

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()
 

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">

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
+}

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
 

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
 

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
 

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()
 

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 = ""

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 = []

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}}`, {