Fix for #7811 - Fixing an issue with the query binding builder - when executing the query you could no longer enrich the value binding.

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

@@ -1,20 +1,31 @@
 <script>
-  import { Body, Button, Heading, Layout } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { getUserBindings } from "builderStore/dataBinding"
+  import { Body, Button, Heading, Icon, Input, Layout } from "@budibase/bbui"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
   export let bindable = true
   export let queryBindings = []
-
-  const userBindings = getUserBindings()
-
-  let internalBindings = queryBindings.reduce((acc, binding) => {
-    acc[binding.name] = binding.default
-    return acc
-  }, {})
+  export let bindings = []
+  export let customParams = {}
 
   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">
@@ -35,34 +46,57 @@
     {/if}
   </Body>
   <div class="bindings" class:bindable>
-    <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,
-          }
-        })
-      }}
-    />
+    {#each queryBindings as binding, idx}
+      <Input
+        placeholder="Binding Name"
+        thin
+        disabled={bindable}
+        bind:value={binding.name}
+      />
+      <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;
   }

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

@@ -17,7 +17,7 @@
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
-  import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
+  import BindingBuilder from "components/integration/QueryViewerBindingBuilder.svelte"
   import { datasources, integrations, queries } from "stores/backend"
   import { capitalise } from "../../helpers"
   import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"

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

@@ -0,0 +1,69 @@
+<script>
+  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 = []
+
+  const userBindings = getUserBindings()
+
+  let internalBindings = queryBindings.reduce((acc, binding) => {
+    acc[binding.name] = binding.default
+    return acc
+  }, {})
+
+  function newQueryBinding() {
+    queryBindings = [...queryBindings, {}]
+  }
+</script>
+
+<Layout noPadding={bindable} gap="S">
+  <div class="controls" class:height={!bindable}>
+    <Heading size="XS">Bindings</Heading>
+    {#if !bindable}
+      <Button secondary on:click={newQueryBinding}>Add Binding</Button>
+    {/if}
+  </div>
+  <Body size="S">
+    {#if !bindable}
+      Bindings come in two parts: the binding name, and a default/fallback
+      value. These bindings can be used as Handlebars expressions throughout the
+      query.
+    {:else}
+      Enter a value for each binding. The default values will be used for any
+      values left blank.
+    {/if}
+  </Body>
+  <div class="bindings" class:bindable>
+    <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,
+          }
+        })
+      }}
+    />
+  </div>
+</Layout>
+
+<style>
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .height {
+    height: 40px;
+  }
+</style>