From 06a6001f95b135d70c866b7dcafaabaa6d93d580 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 20 Jan 2022 15:44:39 +0000
Subject: [PATCH 1/2] Fix for #4126 - wrong bindings were being passed to the
 drawer, making sure correct ones are available.

---
 .../src/components/integration/QueryBindingBuilder.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/integration/QueryBindingBuilder.svelte b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
index dd688dceb6..3161e2ae48 100644
--- a/packages/builder/src/components/integration/QueryBindingBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
@@ -72,7 +72,7 @@
             bindableOptions,
             customParams?.[binding.name]
           )}
-          {bindableOptions}
+          bind:bindings={bindableOptions}
         />
       {:else}
         <Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />

From c66b9fb0b4e0a5e2318c4025324279aff5ca46d3 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 20 Jan 2022 16:12:32 +0000
Subject: [PATCH 2/2] Renaming bindableOptions to bindings and replacing the
 query bindings variable with queryBindings.

---
 .../actions/ExecuteQuery.svelte               |  4 ++--
 .../PropertyControls/DataSourceSelect.svelte  |  4 ++--
 .../integration/QueryBindingBuilder.svelte    | 21 +++++++++----------
 .../components/integration/QueryViewer.svelte |  2 +-
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExecuteQuery.svelte
index 88c7e87054..8c438e4b22 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExecuteQuery.svelte
@@ -55,8 +55,8 @@
         <div>
           <BindingBuilder
             bind:customParams={parameters.queryParams}
-            bindings={query.parameters}
-            bind:bindableOptions={bindings}
+            queryBindings={query.parameters}
+            bind:bindings
           />
           <IntegrationQueryEditor
             height={200}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 3b6f122d33..73554b45db 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -169,8 +169,8 @@
           {#if getQueryParams(value).length > 0}
             <BindingBuilder
               bind:customParams={tmpQueryParams}
-              bindings={getQueryParams(value)}
-              bind:bindableOptions={bindings}
+              queryBindings={getQueryParams(value)}
+              bind:bindings
             />
           {/if}
           <IntegrationQueryEditor
diff --git a/packages/builder/src/components/integration/QueryBindingBuilder.svelte b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
index 3161e2ae48..34d4d4219b 100644
--- a/packages/builder/src/components/integration/QueryBindingBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
@@ -7,27 +7,26 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let bindable = true
+  export let queryBindings = []
   export let bindings = []
-  export let bindableOptions = []
   export let customParams = {}
 
   function newQueryBinding() {
-    bindings = [...bindings, {}]
+    queryBindings = [...queryBindings, {}]
   }
 
+  $: console.log(bindings)
+
   function deleteQueryBinding(idx) {
-    bindings.splice(idx, 1)
-    bindings = bindings
+    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(
-      bindableOptions,
-      valueToParse
-    )
+    customParams[param] = readableToRuntimeBinding(bindings, valueToParse)
   }
 </script>
 
@@ -49,7 +48,7 @@
     {/if}
   </Body>
   <div class="bindings" class:bindable>
-    {#each bindings as binding, idx}
+    {#each queryBindings as binding, idx}
       <Input
         placeholder="Binding Name"
         thin
@@ -69,10 +68,10 @@
           thin
           on:change={evt => onBindingChange(binding.name, evt.detail)}
           value={runtimeToReadableBinding(
-            bindableOptions,
+            bindings,
             customParams?.[binding.name]
           )}
-          bind:bindings={bindableOptions}
+          {bindings}
         />
       {:else}
         <Icon hoverable name="Close" on:click={() => deleteQueryBinding(idx)} />
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index f14d1d2b88..c6ae7c4ce8 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -120,7 +120,7 @@
           config={integrationInfo.extra}
         />
       {/if}
-      <BindingBuilder bind:bindings={query.parameters} bindable={false} />
+      <BindingBuilder bind:queryBindings={query.parameters} bindable={false} />
     {/if}
   </div>
   {#if shouldShowQueryConfig}