work on converting popover to drawer

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

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>

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 {

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

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 bindingDrawer
-  $: {
+
-    let { bindings, ...otherProps } = $$props
+  $: tempValue = value
-    inputProps = otherProps
+  $: 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}>
+<div class="control">
-  <Input {...inputProps} bind:value />
+  <Input
-  <div class="icon" on:click={popover.show}>
+    {thin}
-    <Icon name="edit" />
+    {label}
+    value={readableValue}
+    on:change={event => onChange(event.target.value)}
+    {placeholder} />
+  <div class="icon" on:click={bindingDrawer.show}>
+    <Icon name="lightning" />
   </div>
 </div>
-<GenericBindingPopover
+<Drawer bind:this={bindingDrawer} {title}>
-  {anchor}
+  <div slot="description">
-  {bindings}
+    <Body extraSmall grey>
-  bind:value
+      Add the objects on the left to enrich your text.
-  bind:popover
+    </Body>
-  align="right" />
+  </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;

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