From cc212d456a7ace0c3f13a9a427dc42191fb78089 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Dec 2021 09:31:39 +0000
Subject: [PATCH] Fix query params directly mutating the stored app definition

---
 .../PropertyControls/DataSourceSelect.svelte  | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index dc1b24077a..4cb080d0c9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -31,6 +31,7 @@
   const arrayTypes = ["attachment", "array"]
   let anchorRight, dropdownRight
   let drawer
+  let tmpQueryParams
 
   $: text = value?.label ?? "Choose an option"
   $: tables = $tablesStore.list.map(m => ({
@@ -105,12 +106,12 @@
       }
     })
 
-  function handleSelected(selected) {
+  const handleSelected = selected => {
     dispatch("change", selected)
     dropdownRight.hide()
   }
 
-  function fetchQueryDefinition(query) {
+  const fetchQueryDefinition = query => {
     const source = $datasources.list.find(
       ds => ds._id === query.datasourceId
     ).source
@@ -124,6 +125,19 @@
   const getQueryDatasource = query => {
     return $datasources.list.find(ds => ds._id === query?.datasourceId)
   }
+
+  const openQueryParamsDrawer = () => {
+    tmpQueryParams = value.queryParams
+    drawer.show()
+  }
+
+  const saveQueryParams = () => {
+    handleSelected({
+      ...value,
+      queryParams: tmpQueryParams,
+    })
+    drawer.hide()
+  }
 </script>
 
 <div class="container" bind:this={anchorRight}>
@@ -134,24 +148,14 @@
     on:click={dropdownRight.show}
   />
   {#if value?.type === "query"}
-    <i class="ri-settings-5-line" on:click={drawer.show} />
+    <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
     <Drawer title={"Query Parameters"} bind:this={drawer}>
-      <Button
-        slot="buttons"
-        cta
-        on:click={() => {
-          notifications.success("Query parameters saved.")
-          handleSelected(value)
-          drawer.hide()
-        }}
-      >
-        Save
-      </Button>
+      <Button slot="buttons" cta on:click={saveQueryParams}>Save</Button>
       <DrawerContent slot="body">
         <Layout noPadding>
           {#if getQueryParams(value).length > 0}
             <ParameterBuilder
-              bind:customParams={value.queryParams}
+              bind:customParams={tmpQueryParams}
               parameters={getQueryParams(value)}
               {bindings}
             />