From f8adb6429ce14022bd570077e5902cc6498f5488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 23 Feb 2021 13:14:30 +0100
Subject: [PATCH 1/4] adds option to allow dot notation in column names

---
 packages/builder/package.json                             | 2 +-
 .../builder/src/components/backend/DataTable/Table.svelte | 1 +
 packages/builder/yarn.lock                                | 8 ++++----
 packages/standard-components/package.json                 | 2 +-
 packages/standard-components/src/grid/Component.svelte    | 1 +
 packages/standard-components/yarn.lock                    | 8 ++++----
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index fdcb9ae4a1..5555ec52ff 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -67,7 +67,7 @@
     "@budibase/client": "^0.7.8",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.8",
-    "@budibase/svelte-ag-grid": "^0.0.16",
+    "@budibase/svelte-ag-grid": "^1.0.4",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "0.7.0",
     "codemirror": "^5.59.0",
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index fa04829634..27d908eedd 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -37,6 +37,7 @@
     rowSelection: allowEditing ? "multiple" : false,
     rowMultiSelectWithClick: true,
     suppressRowClickSelection: false,
+    suppressFieldDotNotation: true,
     paginationAutoPageSize: true,
     pagination: true,
     enableRangeSelection: true,
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 7bdcd1431e..7930081cdc 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -838,10 +838,10 @@
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
   integrity sha512-+DTHYhU0sTi5RfCyd7AAvMsLFwyF/wgs0owf7KyQU+ZILRW+YsWa7OQMz+hKQfgVAmvzwrNz8ATiBlG3Ac6Asg==
 
-"@budibase/svelte-ag-grid@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.16.tgz#1b91dc1e27dad034b827dc7b258fa16d3d3bf68f"
-  integrity sha512-Yxnfe03Mo7VhuB4wJSGNoc8jaorH9lertptPt2halef9Z93kkYwdwpldnWVzQT07YdX6soPaVLhupxKrI5Hvtw==
+"@budibase/svelte-ag-grid@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-1.0.4.tgz#41cceec4bde2c4aea8b9da8f610fe36055c7709f"
+  integrity sha512-JZm6qujxnZpqw7Twbegr6se4sHhyWzN0Cibrk5bVBH32hBgzD6dd33fxwrjHKkWFxjys9wRT+cqYgYVlSt9E3w==
   dependencies:
     ag-grid-community "^24.0.0"
 
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index a571dc9bb0..38107e1c49 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -41,7 +41,7 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
     "@budibase/bbui": "^1.58.13",
-    "@budibase/svelte-ag-grid": "^0.0.16",
+    "@budibase/svelte-ag-grid": "^1.0.4",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
     "@spectrum-css/checkbox": "^3.0.0-beta.6",
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index 2958282293..49754a86a5 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -52,6 +52,7 @@
       filter: true,
     },
     rowSelection: canEdit ? "multiple" : false,
+    suppressFieldDotNotation: true,
     suppressRowClickSelection: !canEdit,
     paginationAutoPageSize: true,
     pagination,
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index d27a13883e..8a026bd592 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -56,10 +56,10 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
-"@budibase/svelte-ag-grid@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.16.tgz#1b91dc1e27dad034b827dc7b258fa16d3d3bf68f"
-  integrity sha512-Yxnfe03Mo7VhuB4wJSGNoc8jaorH9lertptPt2halef9Z93kkYwdwpldnWVzQT07YdX6soPaVLhupxKrI5Hvtw==
+"@budibase/svelte-ag-grid@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-1.0.4.tgz#41cceec4bde2c4aea8b9da8f610fe36055c7709f"
+  integrity sha512-JZm6qujxnZpqw7Twbegr6se4sHhyWzN0Cibrk5bVBH32hBgzD6dd33fxwrjHKkWFxjys9wRT+cqYgYVlSt9E3w==
   dependencies:
     ag-grid-community "^24.0.0"
 

From 2f749c49d51c622d0185b19f2719c076f7394a92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 23 Feb 2021 15:20:24 +0100
Subject: [PATCH 2/4] remove unused things

---
 .../src/components/automation/SetupPanel/SetupPanel.svelte    | 1 -
 .../src/components/design/PropertiesPanel/BindingPanel.svelte | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 97e536e2ed..b687fea5fe 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -9,7 +9,6 @@
 
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
-  $: name = automation?.name ?? ""
   $: automationLive = automation?.live
 
   function setAutomationLive(live) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 01d7be89e9..00cf25c995 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -54,10 +54,6 @@
     dispatch("update", originalValue)
     bindingDrawer.close()
   }
-
-  function updateValue({ detail }) {
-    value = detail.value
-  }
 </script>
 
 <div class="drawer-contents">

From 082c238b578ca2cca9843f72c78903bf8ee29ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 23 Feb 2021 16:43:03 +0100
Subject: [PATCH 3/4] work on converting popover to drawer

---
 .../SetupPanel/AutomationBindingPanel.svelte  | 203 ++++++++++++++++++
 .../SetupPanel/AutomationBlockSetup.svelte    |  22 +-
 .../SetupPanel/GenericBindingPopover.svelte   |   5 +-
 .../automation/SetupPanel/RowSelector.svelte  |   9 +-
 .../components/common/BindableInput.svelte    |  76 ++++---
 .../common/DrawerBindableInput.svelte         |   6 +-
 6 files changed, 274 insertions(+), 47 deletions(-)
 create mode 100644 packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
new file mode 100644
index 0000000000..12f4efc110
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -0,0 +1,203 @@
+<script>
+    import groupBy from "lodash/fp/groupBy"
+    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+    import { createEventDispatcher } from "svelte"
+    import { isValid } from "@budibase/string-templates"
+    import {
+      getBindableProperties,
+      readableToRuntimeBinding,
+    } from "builderStore/dataBinding"
+    import { currentAsset, store } from "../../../builderStore"
+    import { handlebarsCompletions } from "constants/completions"
+  
+    const dispatch = createEventDispatcher()
+  
+    export let bindableProperties
+    export let value = ""
+    export let bindingDrawer
+    export let valid = true
+    export let bindings = []
+  
+    let originalValue = value
+    let helpers = handlebarsCompletions()
+    let getCaretPosition
+    let search = ""
+    let validity = true
+  
+    $: categories = Object.entries(groupBy("category", bindings))
+    $: value && checkValid()
+    $: bindableProperties = getBindableProperties(
+      $currentAsset,
+      $store.selectedComponentId
+    )
+    $: console.log(value)
+    $: dispatch("update", value)
+    $: searchRgx = new RegExp(search, "ig")
+  
+    function checkValid() {
+        const runtimeValue = readableToRuntimeBinding(bindings, value)
+        validity = isValid(runtimeValue)
+    }
+  
+    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)
+      bindingDrawer.close()
+    }
+</script>
+
+<div class="container">
+    <div class="list">
+        <Heading small>Available bindings</Heading>
+        <Spacer medium />
+        <Input extraThin placeholder="Search" bind:value={search} />
+        <Spacer medium />
+        {#each categories as [categoryName, bindings]}
+        <Heading extraSmall>{categoryName}</Heading>
+        <Spacer extraSmall />
+        {#each bindings.filter(binding =>
+            binding.label.match(searchRgx)
+        ) as binding}
+            <div class="binding" on:click={() => addToText(binding)}>
+            <span class="binding__label">{binding.label}</span>
+            <span class="binding__type">{binding.type}</span>
+            <br />
+            <div class="binding__description">
+                {binding.description || ''}
+            </div>
+            </div>
+        {/each}
+        {/each}
+        <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)}>
+                <span class="binding__label">{helper.label}</span>
+                <br />
+                <div class="binding__description">
+                {@html helper.description || ''}
+                </div>
+                <pre>{helper.example || ''}</pre>
+            </div>
+        {/each}
+    </div>
+    <div class="text">
+        <TextArea
+        bind:getCaretPosition
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the textbox." />
+        {#if !validity}
+        <p class="syntax-error">
+            Current Handlebars syntax is invalid, please check the guide
+            <a href="https://handlebarsjs.com/guide/">here</a>
+            for more details.
+        </p>
+        {/if}
+    </div>
+</div>
+
+
+<style>
+    .container {
+      height: 40vh;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: 280px 1fr;
+    }
+  
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+
+    .list::-webkit-scrollbar {
+        display: none;
+    }
+
+    .text {
+        padding: var(--spacing-l);
+        font-family: var(--font-sans);
+    }
+    .text :global(textarea) {
+        min-height: 100px;
+    }
+    .text :global(p) {
+        margin: 0;
+    }
+  
+    .binding {
+      font-size: 12px;
+      padding: var(--spacing-s);
+      border-radius: var(--border-radius-m);
+    }
+    .binding:hover {
+      background-color: var(--grey-2);
+      cursor: pointer;
+    }
+    .binding__label {
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+    .binding__description {
+      color: var(--grey-8);
+      margin-top: 2px;
+      white-space: normal;
+    }
+  
+    pre {
+      white-space: normal;
+    }
+  
+    .binding__type {
+      font-family: monospace;
+      background-color: var(--grey-2);
+      border-radius: var(--border-radius-m);
+      padding: 2px;
+      margin-left: 2px;
+      font-weight: 500;
+    }
+  
+    .editor {
+      padding-left: var(--spacing-l);
+    }
+    .editor :global(textarea) {
+      min-height: 60px;
+    }
+  
+    .controls {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-gap: var(--spacing-l);
+      align-items: center;
+      margin-top: var(--spacing-m);
+    }
+  
+    .syntax-error {
+      color: var(--red);
+      font-size: 12px;
+    }
+  
+    .syntax-error a {
+      color: var(--red);
+      text-decoration: underline;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ed89d4316d..f7d945464e 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,7 +5,8 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
 
   export let block
   export let webhookModal
@@ -64,10 +65,12 @@
     {:else if value.customType === 'password'}
       <Input type="password" extraThin bind:value={block.inputs[key]} />
     {:else if value.customType === 'email'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
         type={'email'}
         extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:update={e => block.inputs[key] = e.detail}
         {bindings} />
     {:else if value.customType === 'table'}
       <TableSelector bind:value={block.inputs[key]} />
@@ -78,10 +81,12 @@
     {:else if value.customType === 'triggerSchema'}
       <SchemaSetup bind:value={block.inputs[key]} />
     {:else if value.type === 'string' || value.type === 'number'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
         type={value.customType}
         extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:update={e => block.inputs[key] = e.detail}
         {bindings} />
     {/if}
   </div>
@@ -102,11 +107,4 @@
     font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
-
-  textarea {
-    min-height: 150px;
-    font-family: inherit;
-    padding: 12px;
-    margin-top: 8px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
index e6818518ad..ce57642128 100644
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
@@ -14,8 +14,6 @@
   import { handlebarsCompletions } from "constants/completions"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
 
-  const dispatch = createEventDispatcher()
-
   export let value = ""
   export let bindings = []
   export let anchor
@@ -122,9 +120,10 @@
 
 <style>
   .container {
+    height: 40vh;
+    overflow-y: auto;
     display: grid;
     grid-template-columns: 280px 1fr;
-    width: 800px;
   }
 
   .bindings {
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 7b010f2ecb..668a777e53 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,7 +1,8 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Select } from "@budibase/bbui"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
 
   export let value
   export let bindings
@@ -39,9 +40,11 @@
             {/each}
           </Select>
         {:else if schema.type === 'string' || schema.type === 'number'}
-          <BindableInput
+          <DrawerBindableInput
+            panel={AutomationBindingPanel}
             extraThin
-            bind:value={value[field]}
+            value={value[field]}
+            on:update={e => value[field] = e.detail}
             label={field}
             type="string"
             {bindings} />
diff --git a/packages/builder/src/components/common/BindableInput.svelte b/packages/builder/src/components/common/BindableInput.svelte
index 6234e3e046..6368b97e4c 100644
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@@ -1,44 +1,64 @@
 <script>
+  import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
+  import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
+  import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
+  
   import { createEventDispatcher } from "svelte"
-  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
-  import { Input, Icon } from "@budibase/bbui"
-
   const dispatch = createEventDispatcher()
-
+  
+  export let value = ""
   export let bindings = []
-  export let value
+  export let thin = true
+  export let label = ""
+  export let title = "Bindings"
+  export let placeholder
 
-  let anchor
-  let popover = undefined
-  let enrichedValue
-  let inputProps
 
-  // Extract all other props to pass to input component
-  $: {
-    let { bindings, ...otherProps } = $$props
-    inputProps = otherProps
+  let bindingDrawer
+
+  $: tempValue = value
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+
+  const handleClose = () => {
+    onChange(tempValue)
+    bindingDrawer.hide()
+  }
+
+  const onChange = value => {
+    dispatch("change", readableToRuntimeBinding(bindings, value))
   }
-  $: value && dispatch("change", value)
 </script>
 
-<div class="container" bind:this={anchor}>
-  <Input {...inputProps} bind:value />
-  <div class="icon" on:click={popover.show}>
-    <Icon name="edit" />
+<div class="control">
+  <Input
+    {thin}
+    {label}
+    value={readableValue}
+    on:change={event => onChange(event.target.value)}
+    {placeholder} />
+  <div class="icon" on:click={bindingDrawer.show}>
+    <Icon name="lightning" />
   </div>
 </div>
-<GenericBindingPopover
-  {anchor}
-  {bindings}
-  bind:value
-  bind:popover
-  align="right" />
+<Drawer bind:this={bindingDrawer} {title}>
+  <div slot="description">
+    <Body extraSmall grey>
+      Add the objects on the left to enrich your text.
+    </Body>
+  </div>
+  <heading slot="buttons">
+    <Button thin blue on:click={handleClose}>Save</Button>
+  </heading>
+  <div slot="body">
+    <BindingPanel
+      {value}
+      close={handleClose}
+      on:update={event => (tempValue = event.detail)}
+      {bindings} />
+  </div>
+</Drawer>
 
 <style>
-  .container {
-    position: relative;
-  }
-
   .icon {
     right: 2px;
     top: 5px;
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index b534376a55..f0a6e3ae49 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -10,13 +10,16 @@
 
   export let value = ""
   export let bindings = []
+  export let label
   export let thin = true
   export let title = "Bindings"
   export let placeholder
+  export let panel = BindingPanel
 
   let bindingDrawer
 
   $: tempValue = value
+  $: console.log('Value: ', tempValue)
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
   const handleClose = () => {
@@ -32,6 +35,7 @@
 <div class="control">
   <Input
     {thin}
+    {label}
     value={readableValue}
     on:change={event => onChange(event.target.value)}
     {placeholder} />
@@ -49,7 +53,7 @@
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
-    <BindingPanel
+    <svelte:component this={panel}
       value={readableValue}
       close={handleClose}
       on:update={event => (tempValue = event.detail)}

From 532f29355e7f7585cf95b829d272d7d951d67c7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 24 Feb 2021 10:33:54 +0100
Subject: [PATCH 4/4] Revert "work on converting popover to drawer"

This reverts commit 082c238b578ca2cca9843f72c78903bf8ee29ef2.
---
 .../SetupPanel/AutomationBindingPanel.svelte  | 203 ------------------
 .../SetupPanel/AutomationBlockSetup.svelte    |  22 +-
 .../SetupPanel/GenericBindingPopover.svelte   |   5 +-
 .../automation/SetupPanel/RowSelector.svelte  |   9 +-
 .../components/common/BindableInput.svelte    |  76 +++----
 .../common/DrawerBindableInput.svelte         |   6 +-
 6 files changed, 47 insertions(+), 274 deletions(-)
 delete mode 100644 packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
deleted file mode 100644
index 12f4efc110..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ /dev/null
@@ -1,203 +0,0 @@
-<script>
-    import groupBy from "lodash/fp/groupBy"
-    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
-    import { createEventDispatcher } from "svelte"
-    import { isValid } from "@budibase/string-templates"
-    import {
-      getBindableProperties,
-      readableToRuntimeBinding,
-    } from "builderStore/dataBinding"
-    import { currentAsset, store } from "../../../builderStore"
-    import { handlebarsCompletions } from "constants/completions"
-  
-    const dispatch = createEventDispatcher()
-  
-    export let bindableProperties
-    export let value = ""
-    export let bindingDrawer
-    export let valid = true
-    export let bindings = []
-  
-    let originalValue = value
-    let helpers = handlebarsCompletions()
-    let getCaretPosition
-    let search = ""
-    let validity = true
-  
-    $: categories = Object.entries(groupBy("category", bindings))
-    $: value && checkValid()
-    $: bindableProperties = getBindableProperties(
-      $currentAsset,
-      $store.selectedComponentId
-    )
-    $: console.log(value)
-    $: dispatch("update", value)
-    $: searchRgx = new RegExp(search, "ig")
-  
-    function checkValid() {
-        const runtimeValue = readableToRuntimeBinding(bindings, value)
-        validity = isValid(runtimeValue)
-    }
-  
-    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)
-      bindingDrawer.close()
-    }
-</script>
-
-<div class="container">
-    <div class="list">
-        <Heading small>Available bindings</Heading>
-        <Spacer medium />
-        <Input extraThin placeholder="Search" bind:value={search} />
-        <Spacer medium />
-        {#each categories as [categoryName, bindings]}
-        <Heading extraSmall>{categoryName}</Heading>
-        <Spacer extraSmall />
-        {#each bindings.filter(binding =>
-            binding.label.match(searchRgx)
-        ) as binding}
-            <div class="binding" on:click={() => addToText(binding)}>
-            <span class="binding__label">{binding.label}</span>
-            <span class="binding__type">{binding.type}</span>
-            <br />
-            <div class="binding__description">
-                {binding.description || ''}
-            </div>
-            </div>
-        {/each}
-        {/each}
-        <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)}>
-                <span class="binding__label">{helper.label}</span>
-                <br />
-                <div class="binding__description">
-                {@html helper.description || ''}
-                </div>
-                <pre>{helper.example || ''}</pre>
-            </div>
-        {/each}
-    </div>
-    <div class="text">
-        <TextArea
-        bind:getCaretPosition
-        thin
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
-        {#if !validity}
-        <p class="syntax-error">
-            Current Handlebars syntax is invalid, please check the guide
-            <a href="https://handlebarsjs.com/guide/">here</a>
-            for more details.
-        </p>
-        {/if}
-    </div>
-</div>
-
-
-<style>
-    .container {
-      height: 40vh;
-      overflow-y: auto;
-      display: grid;
-      grid-template-columns: 280px 1fr;
-    }
-  
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
-
-    .list::-webkit-scrollbar {
-        display: none;
-    }
-
-    .text {
-        padding: var(--spacing-l);
-        font-family: var(--font-sans);
-    }
-    .text :global(textarea) {
-        min-height: 100px;
-    }
-    .text :global(p) {
-        margin: 0;
-    }
-  
-    .binding {
-      font-size: 12px;
-      padding: var(--spacing-s);
-      border-radius: var(--border-radius-m);
-    }
-    .binding:hover {
-      background-color: var(--grey-2);
-      cursor: pointer;
-    }
-    .binding__label {
-      font-weight: 500;
-      text-transform: capitalize;
-    }
-    .binding__description {
-      color: var(--grey-8);
-      margin-top: 2px;
-      white-space: normal;
-    }
-  
-    pre {
-      white-space: normal;
-    }
-  
-    .binding__type {
-      font-family: monospace;
-      background-color: var(--grey-2);
-      border-radius: var(--border-radius-m);
-      padding: 2px;
-      margin-left: 2px;
-      font-weight: 500;
-    }
-  
-    .editor {
-      padding-left: var(--spacing-l);
-    }
-    .editor :global(textarea) {
-      min-height: 60px;
-    }
-  
-    .controls {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-gap: var(--spacing-l);
-      align-items: center;
-      margin-top: var(--spacing-m);
-    }
-  
-    .syntax-error {
-      color: var(--red);
-      font-size: 12px;
-    }
-  
-    .syntax-error a {
-      color: var(--red);
-      text-decoration: underline;
-    }
-  </style>
-  
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index f7d945464e..ed89d4316d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,8 +5,7 @@
   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 './AutomationBindingPanel.svelte'
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let block
   export let webhookModal
@@ -65,12 +64,10 @@
     {:else if value.customType === 'password'}
       <Input type="password" extraThin bind:value={block.inputs[key]} />
     {:else if value.customType === 'email'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
+      <BindableInput
         type={'email'}
         extraThin
-        value={block.inputs[key]}
-        on:update={e => block.inputs[key] = e.detail}
+        bind:value={block.inputs[key]}
         {bindings} />
     {:else if value.customType === 'table'}
       <TableSelector bind:value={block.inputs[key]} />
@@ -81,12 +78,10 @@
     {:else if value.customType === 'triggerSchema'}
       <SchemaSetup bind:value={block.inputs[key]} />
     {:else if value.type === 'string' || value.type === 'number'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
+      <BindableInput
         type={value.customType}
         extraThin
-        value={block.inputs[key]}
-        on:update={e => block.inputs[key] = e.detail}
+        bind:value={block.inputs[key]}
         {bindings} />
     {/if}
   </div>
@@ -107,4 +102,11 @@
     font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
+
+  textarea {
+    min-height: 150px;
+    font-family: inherit;
+    padding: 12px;
+    margin-top: 8px;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
index ce57642128..e6818518ad 100644
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
@@ -14,6 +14,8 @@
   import { handlebarsCompletions } from "constants/completions"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
 
+  const dispatch = createEventDispatcher()
+
   export let value = ""
   export let bindings = []
   export let anchor
@@ -120,10 +122,9 @@
 
 <style>
   .container {
-    height: 40vh;
-    overflow-y: auto;
     display: grid;
     grid-template-columns: 280px 1fr;
+    width: 800px;
   }
 
   .bindings {
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 668a777e53..7b010f2ecb 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,8 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Select } from "@budibase/bbui"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let value
   export let bindings
@@ -40,11 +39,9 @@
             {/each}
           </Select>
         {:else if schema.type === 'string' || schema.type === 'number'}
-          <DrawerBindableInput
-            panel={AutomationBindingPanel}
+          <BindableInput
             extraThin
-            value={value[field]}
-            on:update={e => value[field] = e.detail}
+            bind:value={value[field]}
             label={field}
             type="string"
             {bindings} />
diff --git a/packages/builder/src/components/common/BindableInput.svelte b/packages/builder/src/components/common/BindableInput.svelte
index 6368b97e4c..6234e3e046 100644
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@@ -1,64 +1,44 @@
 <script>
-  import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
-  import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
-  import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
-  
   import { createEventDispatcher } from "svelte"
+  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
+  import { Input, Icon } from "@budibase/bbui"
+
   const dispatch = createEventDispatcher()
-  
-  export let value = ""
+
   export let bindings = []
-  export let thin = true
-  export let label = ""
-  export let title = "Bindings"
-  export let placeholder
+  export let value
 
+  let anchor
+  let popover = undefined
+  let enrichedValue
+  let inputProps
 
-  let bindingDrawer
-
-  $: tempValue = value
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-
-  const handleClose = () => {
-    onChange(tempValue)
-    bindingDrawer.hide()
-  }
-
-  const onChange = value => {
-    dispatch("change", readableToRuntimeBinding(bindings, value))
+  // Extract all other props to pass to input component
+  $: {
+    let { bindings, ...otherProps } = $$props
+    inputProps = otherProps
   }
+  $: value && dispatch("change", value)
 </script>
 
-<div class="control">
-  <Input
-    {thin}
-    {label}
-    value={readableValue}
-    on:change={event => onChange(event.target.value)}
-    {placeholder} />
-  <div class="icon" on:click={bindingDrawer.show}>
-    <Icon name="lightning" />
+<div class="container" bind:this={anchor}>
+  <Input {...inputProps} bind:value />
+  <div class="icon" on:click={popover.show}>
+    <Icon name="edit" />
   </div>
 </div>
-<Drawer bind:this={bindingDrawer} {title}>
-  <div slot="description">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-  </div>
-  <heading slot="buttons">
-    <Button thin blue on:click={handleClose}>Save</Button>
-  </heading>
-  <div slot="body">
-    <BindingPanel
-      {value}
-      close={handleClose}
-      on:update={event => (tempValue = event.detail)}
-      {bindings} />
-  </div>
-</Drawer>
+<GenericBindingPopover
+  {anchor}
+  {bindings}
+  bind:value
+  bind:popover
+  align="right" />
 
 <style>
+  .container {
+    position: relative;
+  }
+
   .icon {
     right: 2px;
     top: 5px;
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index f0a6e3ae49..b534376a55 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -10,16 +10,13 @@
 
   export let value = ""
   export let bindings = []
-  export let label
   export let thin = true
   export let title = "Bindings"
   export let placeholder
-  export let panel = BindingPanel
 
   let bindingDrawer
 
   $: tempValue = value
-  $: console.log('Value: ', tempValue)
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
   const handleClose = () => {
@@ -35,7 +32,6 @@
 <div class="control">
   <Input
     {thin}
-    {label}
     value={readableValue}
     on:change={event => onChange(event.target.value)}
     {placeholder} />
@@ -53,7 +49,7 @@
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
-    <svelte:component this={panel}
+    <BindingPanel
       value={readableValue}
       close={handleClose}
       on:update={event => (tempValue = event.detail)}