From 6331299b7bf8e239dbe99d76eb9d01a7dfda46d3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 3 May 2023 17:26:58 +0100
Subject: [PATCH 1/6] Working commit

---
 .../components/integration/QueryViewer.svelte | 109 ++++++++++++++----
 .../data/query/[queryId]/index.svelte         |   4 +-
 2 files changed, 91 insertions(+), 22 deletions(-)
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 7a76970ecb..124531b35b 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, beforeUrlChange } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -12,6 +12,8 @@
     Heading,
     Tabs,
     Tab,
+    Modal,
+    ModalContent,
   } from "@budibase/bbui"
   import { notifications, Divider } from "@budibase/bbui"
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
@@ -36,6 +38,22 @@
   let data = []
   let saveId
   let currentTab = "JSON"
+  let saveModal
+  let queryStr = JSON.stringify(query)
+  let discard = false
+
+  let navigateTo = null
+  $: console.log("GO ", navigateTo)
+  $: console.log("DISCARD ", discard)
+
+  $beforeUrlChange(event => {
+    const updated = JSON.stringify(query)
+    if (updated !== queryStr && !discard) {
+      navigateTo = event.url
+      saveModal.show()
+      return false
+    } else return true
+  })
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
   $: query.schema = fieldsToSchema(fields)
@@ -101,22 +119,54 @@
     }
   }
 
+  // return the query.
   async function saveQuery() {
     try {
-      const { _id } = await queries.save(query.datasourceId, query)
-      saveId = _id
-      notifications.success(`Query saved successfully`)
+      // const { _id } = await queries.save(query.datasourceId, query)
+      const response = await queries.save(query.datasourceId, query)
+      saveId = response._id
 
-      // Go to the correct URL if we just created a new query
-      if (!query._rev) {
-        $goto(`../../${_id}`)
-      }
+      // notifications.success(`Query saved successfully`)
+
+      // // Go to the correct URL if we just created a new query
+      // if (!query._rev) {
+      //   $goto(`../../${_id}`)
+      // }
+      return response
     } catch (error) {
       notifications.error("Error saving query")
     }
   }
 </script>
 
+<Modal
+  bind:this={saveModal}
+  on:hide={() => {
+    console.log("running")
+    //navigateTo = null
+  }}
+>
+  <ModalContent
+    title="You have unsaved changes"
+    confirmText="Save and Continue"
+    cancelText="Discard Changes"
+    size="L"
+    onConfirm={async () => {
+      console.log("CONFIRM")
+      saveQuery() //needs ascertain success?
+      discard = true
+      $goto(`${navigateTo}`)
+    }}
+    onCancel={() => {
+      console.log("CANCEL")
+      discard = true
+      $goto(`${navigateTo}`)
+    }}
+  >
+    <Body>Leaving this section will mean losing and changes to your query</Body>
+  </ModalContent>
+</Modal>
+
 <div class="wrapper">
   <Layout gap="S" noPadding>
     <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
@@ -149,18 +199,20 @@
           />
         {/if}
         {#key query.parameters}
-          <BindingBuilder
-            queryBindings={query.parameters}
-            bindable={false}
-            on:change={e => {
-              query.parameters = e.detail.map(binding => {
-                return {
-                  name: binding.name,
-                  default: binding.value,
-                }
-              })
-            }}
-          />
+          <div class="binding-wrap">
+            <BindingBuilder
+              queryBindings={query.parameters}
+              bindable={false}
+              on:change={e => {
+                query.parameters = e.detail.map(binding => {
+                  return {
+                    name: binding.name,
+                    default: binding.value,
+                  }
+                })
+              }}
+            />
+          </div>
         {/key}
       {/if}
     </div>
@@ -203,7 +255,17 @@
       <div class="viewer-controls">
         <Heading size="S">Results</Heading>
         <ButtonGroup gap="XS">
-          <Button cta disabled={queryInvalid} on:click={saveQuery}>
+          <Button
+            cta
+            disabled={queryInvalid}
+            on:click={async () => {
+              const saveResponse = await saveQuery()
+              // Go to the correct URL if we just created a new query
+              if (saveResponse && !saveResponse._rev) {
+                $goto(`../../${saveResponse._id}`)
+              }
+            }}
+          >
             Save Query
           </Button>
           <Button secondary on:click={previewQuery}>Run Query</Button>
@@ -274,4 +336,9 @@
     min-width: 150px;
     align-items: center;
   }
+
+  .binding-wrap :global(div.container) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
index 7f665c3394..fadd32ac75 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
@@ -3,8 +3,10 @@
   import QueryViewer from "components/integration/QueryViewer.svelte"
   import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
+  import { cloneDeep } from "lodash/fp"
 
   $: query = $queries.selected
+  $: editableQuery = cloneDeep(query)
   $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
   $: isRestQuery = datasource?.source === IntegrationTypes.REST
 </script>
@@ -13,6 +15,6 @@
   {#if isRestQuery}
     <RestQueryViewer queryId={$queries.selectedQueryId} />
   {:else}
-    <QueryViewer {query} />
+    <QueryViewer query={editableQuery} />
   {/if}
 {/if}

From e3dadaa22c0d4ce367b4b2ab08a38260eaf2330b Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 5 May 2023 09:10:52 +0100
Subject: [PATCH 2/6] Merge commit

---
 .../components/integration/QueryViewer.svelte | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 124531b35b..2542588f30 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, beforeUrlChange } from "@roxi/routify"
+  import { goto, beforeUrlChange, route, getDirection } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -29,6 +29,11 @@
   import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
 
+  // $: lastRoute = $route.last
+  // $: console.log("lastRoute", lastRoute)
+  // $: direction = getDirection($route, lastRoute)
+  // $: console.log("directioon ", direction)
+
   export let query
 
   const transformerDocs = "https://docs.budibase.com/docs/transformers"
@@ -46,13 +51,16 @@
   $: console.log("GO ", navigateTo)
   $: console.log("DISCARD ", discard)
 
-  $beforeUrlChange(event => {
+  $beforeUrlChange((event, route) => {
     const updated = JSON.stringify(query)
-    if (updated !== queryStr && !discard) {
-      navigateTo = event.url
-      saveModal.show()
-      return false
-    } else return true
+    console.log("route ", route)
+    console.log("event ", event)
+    // if (updated !== queryStr && !discard) {
+    //   navigateTo = event.url
+    //   saveModal.show()
+    //   return false
+    // } else return true
+    return true
   })
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)

From ea458639b390fac3a4572186b09ce7c6f53afc7d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 May 2023 09:14:18 +0100
Subject: [PATCH 3/6] Navigation updates

---
 .../DataTable/ExternalDataSourceTable.svelte  | 10 ++-
 .../components/backend/DataTable/Table.svelte |  2 +
 .../src/components/deploy/RevertModal.svelte  |  3 +
 .../components/integration/QueryViewer.svelte | 72 +++++++++----------
 4 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 53a71f2afe..bc18bf1b41 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -3,6 +3,7 @@
 
   export let query = {}
   export let data = []
+  export let editRows = false
 
   let loading = false
   let error = false
@@ -12,7 +13,14 @@
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table schema={query.schema} {data} {loading} {type} rowCount={5} />
+<Table
+  schema={query.schema}
+  {data}
+  {loading}
+  {type}
+  rowCount={5}
+  allowEditing={editRows}
+/>
 
 <style>
   .errors {
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 4df6e9a306..5dc2e6f83a 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -22,6 +22,7 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
+  export let allowEditing = true
 
   const dispatch = createEventDispatcher()
 
@@ -109,6 +110,7 @@
         {rowCount}
         {disableSorting}
         {customPlaceholder}
+        {allowEditing}
         showAutoColumns={!hideAutocolumns}
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 0c3372f8ec..364add9053 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -9,6 +9,8 @@
   import { store } from "builderStore"
   import { API } from "api"
 
+  export let disabled = false
+
   let revertModal
   let appName
 
@@ -34,6 +36,7 @@
   size="M"
   tooltip="Revert changes"
   on:click={revertModal.show}
+  {disabled}
 />
 
 <Modal bind:this={revertModal}>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 2542588f30..c9b5d64952 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, beforeUrlChange, route, getDirection } from "@roxi/routify"
+  import { goto, beforeUrlChange, route } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -29,13 +29,14 @@
   import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
 
-  // $: lastRoute = $route.last
-  // $: console.log("lastRoute", lastRoute)
-  // $: direction = getDirection($route, lastRoute)
-  // $: console.log("directioon ", direction)
-
   export let query
 
+  const resumeNavigation = () => {
+    if (typeof navigateTo == "string") {
+      $goto(typeof navigateTo == "string" ? `${navigateTo}` : navigateTo)
+    }
+  }
+
   const transformerDocs = "https://docs.budibase.com/docs/transformers"
 
   let fields = query?.schema ? schemaToFields(query.schema) : []
@@ -45,21 +46,19 @@
   let currentTab = "JSON"
   let saveModal
   let queryStr = JSON.stringify(query)
-  let discard = false
+  let override = false
 
   let navigateTo = null
-  $: console.log("GO ", navigateTo)
-  $: console.log("DISCARD ", discard)
 
-  $beforeUrlChange((event, route) => {
+  $beforeUrlChange((event, targetRoute) => {
     const updated = JSON.stringify(query)
-    console.log("route ", route)
-    console.log("event ", event)
-    // if (updated !== queryStr && !discard) {
-    //   navigateTo = event.url
-    //   saveModal.show()
-    //   return false
-    // } else return true
+
+    if (updated !== queryStr && !override) {
+      navigateTo = event.type == "pushstate" ? event.url : null
+      saveModal.show()
+      return false
+    } else return true
+
     return true
   })
 
@@ -130,16 +129,13 @@
   // return the query.
   async function saveQuery() {
     try {
-      // const { _id } = await queries.save(query.datasourceId, query)
       const response = await queries.save(query.datasourceId, query)
       saveId = response._id
 
-      // notifications.success(`Query saved successfully`)
+      if (response?._rev) {
+        queryStr = JSON.stringify(query)
+      }
 
-      // // Go to the correct URL if we just created a new query
-      // if (!query._rev) {
-      //   $goto(`../../${_id}`)
-      // }
       return response
     } catch (error) {
       notifications.error("Error saving query")
@@ -150,8 +146,7 @@
 <Modal
   bind:this={saveModal}
   on:hide={() => {
-    console.log("running")
-    //navigateTo = null
+    navigateTo = null
   }}
 >
   <ModalContent
@@ -160,15 +155,13 @@
     cancelText="Discard Changes"
     size="L"
     onConfirm={async () => {
-      console.log("CONFIRM")
-      saveQuery() //needs ascertain success?
-      discard = true
-      $goto(`${navigateTo}`)
+      const saveResponse = await saveQuery()
+      override = true
+      resumeNavigation()
     }}
-    onCancel={() => {
-      console.log("CANCEL")
-      discard = true
-      $goto(`${navigateTo}`)
+    onCancel={async () => {
+      override = true
+      resumeNavigation()
     }}
   >
     <Body>Leaving this section will mean losing and changes to your query</Body>
@@ -183,7 +176,13 @@
     <div class="config">
       <div class="config-field">
         <Label>Query Name</Label>
-        <Input bind:value={query.name} />
+        <Input
+          value={query.name}
+          on:input={e => {
+            let newValue = e.target.value || ""
+            query.name = newValue.trim()
+          }}
+        />
       </div>
       {#if queryConfig}
         <div class="config-field">
@@ -268,9 +267,10 @@
             disabled={queryInvalid}
             on:click={async () => {
               const saveResponse = await saveQuery()
+              notifications.success(`Query saved successfully`)
               // Go to the correct URL if we just created a new query
-              if (saveResponse && !saveResponse._rev) {
-                $goto(`../../${saveResponse._id}`)
+              if (!query._rev) {
+                $goto(`../../${query._id}`)
               }
             }}
           >

From 00d2bc4f6d7d9d50bfcb3c47c0a2ef0011d0c2b8 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 May 2023 09:38:59 +0100
Subject: [PATCH 4/6] Altered initialisation flow to ensure base state is
 correct for checking update status

---
 .../components/integration/QueryViewer.svelte | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index c9b5d64952..10a0951d4d 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, beforeUrlChange, route } from "@roxi/routify"
+  import { goto, beforeUrlChange } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -45,11 +45,21 @@
   let saveId
   let currentTab = "JSON"
   let saveModal
-  let queryStr = JSON.stringify(query)
   let override = false
-
   let navigateTo = null
 
+  // seed the transformer
+  if (query && !query.transformer) {
+    query.transformer = "return data"
+  }
+
+  // initialise a new empty schema
+  if (query && !query.schema) {
+    query.schema = {}
+  }
+
+  let queryStr = JSON.stringify(query)
+
   $beforeUrlChange((event, targetRoute) => {
     const updated = JSON.stringify(query)
 
@@ -85,11 +95,6 @@
     }
   }
 
-  // seed the transformer
-  if (query && !query.transformer) {
-    query.transformer = "return data"
-  }
-
   function resetDependentFields() {
     if (query.fields.extra) {
       query.fields.extra = {}

From 086fb05238362a384d2018ba0de139faff6fdaee Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 May 2023 10:17:55 +0100
Subject: [PATCH 5/6] Lint

---
 .../builder/src/components/integration/QueryViewer.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 10a0951d4d..3377ff3a88 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -60,7 +60,7 @@
 
   let queryStr = JSON.stringify(query)
 
-  $beforeUrlChange((event, targetRoute) => {
+  $beforeUrlChange(event => {
     const updated = JSON.stringify(query)
 
     if (updated !== queryStr && !override) {
@@ -68,8 +68,6 @@
       saveModal.show()
       return false
     } else return true
-
-    return true
   })
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
@@ -160,7 +158,7 @@
     cancelText="Discard Changes"
     size="L"
     onConfirm={async () => {
-      const saveResponse = await saveQuery()
+      await saveQuery()
       override = true
       resumeNavigation()
     }}
@@ -271,7 +269,7 @@
             cta
             disabled={queryInvalid}
             on:click={async () => {
-              const saveResponse = await saveQuery()
+              await saveQuery()
               notifications.success(`Query saved successfully`)
               // Go to the correct URL if we just created a new query
               if (!query._rev) {

From 3e19afd390504bb79b3a759d8825880898a8c717 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 May 2023 12:10:19 +0100
Subject: [PATCH 6/6] Merge fix

---
 packages/builder/src/components/backend/DataTable/Table.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 23e62fb1df..b8492a93fc 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -22,11 +22,8 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
-<<<<<<< HEAD
   export let allowEditing = true
-=======
   export let allowClickRows
->>>>>>> origin/develop
 
   const dispatch = createEventDispatcher()
 
