Merge pull request #7790 from Budibase/fix/user-bindings-datasource-queries

Expose current user bindings in datasource query UI

packages/bbui/src/Drawer/Drawer.svelte

@@ -78,7 +78,7 @@
     bottom: 0;
     background: var(--background);
     border-top: var(--border-light);
-    z-index: 2;
+    z-index: 3;
   }
 
   .fillWidth {

packages/builder/src/builderStore/dataBinding.js

@@ -370,7 +370,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
 /**
  * Gets all bindable properties from the logged in user.
  */
-const getUserBindings = () => {
+export const getUserBindings = () => {
   let bindings = []
   const { schema } = getSchemaForTable(TableNames.USERS)
   const keys = Object.keys(schema).sort()

packages/builder/src/components/integration/QueryBindingBuilder.svelte

@@ -1,31 +1,20 @@
 <script>
-  import { Body, Button, Heading, Icon, Input, Layout } from "@budibase/bbui"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-
+  import { Body, Button, Heading, Layout } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import { getUserBindings } from "builderStore/dataBinding"
   export let bindable = true
   export let queryBindings = []
-  export let bindings = []
-  export let customParams = {}
+
+  const userBindings = getUserBindings()
+
+  let internalBindings = queryBindings.reduce((acc, binding) => {
+    acc[binding.name] = binding.default
+    return acc
+  }, {})
 
   function newQueryBinding() {
     queryBindings = [...queryBindings, {}]
   }
-
-  function deleteQueryBinding(idx) {
-    queryBindings.splice(idx, 1)
-    queryBindings = queryBindings
-  }
-
-  // This is necessary due to the way readable and writable bindings are stored.
-  // The readable binding in the UI gets converted to a UUID value that the client understands
-  // for parsing, then converted back so we can display it the readable form in the UI
-  function onBindingChange(param, valueToParse) {
-    customParams[param] = readableToRuntimeBinding(bindings, valueToParse)
-  }
 </script>
 
 <Layout noPadding={bindable} gap="S">
@@ -46,57 +35,34 @@
     {/if}
   </Body>
   <div class="bindings" class:bindable>
-    {#each queryBindings as binding, idx}
-      <Input
-        placeholder="Binding Name"
-        thin
-        disabled={bindable}
-        bind:value={binding.name}
+    <KeyValueBuilder
+      bind:object={internalBindings}
+      tooltip="Set the name of the binding which can be used in Handlebars statements throughout your query"
+      name="binding"
+      headings
+      keyPlaceholder="Binding name"
+      valuePlaceholder="Default"
+      bindings={[...userBindings]}
+      bindingDrawerLeft="260px"
+      on:change={e => {
+        queryBindings = e.detail.map(binding => {
+          return {
+            name: binding.name,
+            default: binding.value,
+          }
+        })
+      }}
     />
-      <Input
-        placeholder="Default"
-        thin
-        disabled={bindable}
-        on:change={evt => onBindingChange(binding.name, evt.detail)}
-        bind:value={binding.default}
-      />
-      {#if bindable}
-        <DrawerBindableInput
-          title={`Query binding "${binding.name}"`}
-          placeholder="Value"
-          thin
-          on:change={evt => onBindingChange(binding.name, evt.detail)}
-          value={runtimeToReadableBinding(
-            bindings,
-            customParams?.[binding.name]
-          )}
-          {bindings}
-        />
-      {:else}
-        <Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />
-      {/if}
-    {/each}
   </div>
 </Layout>
 
 <style>
-  .bindings.bindable {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
   .controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  .bindings {
-    display: grid;
-    grid-template-columns: 1fr 1fr 5%;
-    grid-gap: 10px;
-    align-items: center;
-  }
-
   .height {
     height: 40px;
   }