wire BindingPanel correctly to PropertyControl

packages/builder/src/components/userInterface/BindingPanel.svelte

@@ -0,0 +1,113 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import {
+    Button,
+    TextArea,
+    Drawer,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  export let value = ""
+  export let bindingDrawer
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+  let originalValue = value
+
+  $: dispatch("update", value)
+
+  export function cancel() {
+    dispatch("update", originalValue)
+    bindingDrawer.close()
+  }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
+</script>
+
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="list">
+      <Heading extraSmall>Objects</Heading>
+      <Spacer medium />
+      {#if context}
+        <Heading extraSmall>Tables</Heading>
+        <ul>
+          {#each context as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+      {#if instance}
+        <Heading extraSmall>Components</Heading>
+        <ul>
+          {#each instance as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+    <div class="text">
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the
+        textbox." />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+  .list {
+    width: 150px;
+    border-right: 1.5px solid var(--grey-4);
+    padding: var(--spacing-s);
+  }
+  .text {
+    padding: var(--spacing-s);
+    font-family: var(--font-sans);
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--grey-7);
+    padding: var(--spacing-s) 0;
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    color: var(--ink);
+    font-weight: 500;
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+</style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
+  import BindingPanel from "components/userInterface/BindingPanel.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,15 +17,16 @@
   export let value
   export let props = {}
   export let onChange = () => {}
+
+  let bindingDrawer
   
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
-  let showDrawer = false
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
-    showDrawer = false
+    bindingDrawer.hide()
   }
 
   function getBindableProperties() {
@@ -95,17 +96,24 @@
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={() => showDrawer = true}>
+      on:click={bindingDrawer.show}>
       <Icon name="edit" />
     </div>
   {/if}
 </div>
-<BindingDrawer
+
-  {...handlevalueKey(value)}
+<Drawer bind:this={bindingDrawer} title="Bindings">
-  close={handleClose}
+  <div slot="description">This describes the drawer!</div>
-  show={showDrawer}
+  <heading slot="buttons">
-  on:update={e => (temporaryBindableValue = e.detail)}
+    <Button thin blue on:click={handleClose}>Save</Button>
-  {bindableProperties} />
+  </heading>
+  <div slot="body">
+    <BindingPanel {...handlevalueKey(value)}
+    close={handleClose}
+    on:update={e => (temporaryBindableValue = e.detail)}
+    {bindableProperties} />
+  </div>
+</Drawer>
 
 <style>
   .property-control {
@@ -154,8 +162,4 @@
     color: var(--ink);
     cursor: pointer;
   }
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
 </style>