Merge pull request #10584 from Budibase/feature/db-query-save-prompt

Database query save prompt

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 {

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -22,8 +22,8 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
-  export let allowClickRows
   export let allowEditing = true
+  export let allowClickRows
 
   const dispatch = createEventDispatcher()
 

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}>

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"
@@ -29,6 +31,12 @@
 
   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) : []
@@ -36,6 +44,31 @@
   let data = []
   let saveId
   let currentTab = "JSON"
+  let saveModal
+  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 => {
+    const updated = JSON.stringify(query)
+
+    if (updated !== queryStr && !override) {
+      navigateTo = event.type == "pushstate" ? event.url : null
+      saveModal.show()
+      return false
+    } else return true
+  })
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
   $: query.schema = fieldsToSchema(fields)
@@ -60,11 +93,6 @@
     }
   }
 
-  // seed the transformer
-  if (query && !query.transformer) {
-    query.transformer = "return data"
-  }
-
   function resetDependentFields() {
     if (query.fields.extra) {
       query.fields.extra = {}
@@ -101,22 +129,48 @@
     }
   }
 
+  // return the query.
   async function saveQuery() {
     try {
-      const { _id } = await queries.save(query.datasourceId, query)
-      saveId = _id
-      notifications.success(`Query saved successfully`)
+      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}`)
+      if (response?._rev) {
+        queryStr = JSON.stringify(query)
       }
+
+      return response
     } catch (error) {
       notifications.error("Error saving query")
     }
   }
 </script>
 
+<Modal
+  bind:this={saveModal}
+  on:hide={() => {
+    navigateTo = null
+  }}
+>
+  <ModalContent
+    title="You have unsaved changes"
+    confirmText="Save and Continue"
+    cancelText="Discard Changes"
+    size="L"
+    onConfirm={async () => {
+      await saveQuery()
+      override = true
+      resumeNavigation()
+    }}
+    onCancel={async () => {
+      override = true
+      resumeNavigation()
+    }}
+  >
+    <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>
@@ -125,7 +179,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">
@@ -149,6 +209,7 @@
           />
         {/if}
         {#key query.parameters}
+          <div class="binding-wrap">
             <BindingBuilder
               queryBindings={query.parameters}
               bindable={false}
@@ -161,6 +222,7 @@
                 })
               }}
             />
+          </div>
         {/key}
       {/if}
     </div>
@@ -203,7 +265,18 @@
       <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 () => {
+              await saveQuery()
+              notifications.success(`Query saved successfully`)
+              // Go to the correct URL if we just created a new query
+              if (!query._rev) {
+                $goto(`../../${query._id}`)
+              }
+            }}
+          >
             Save Query
           </Button>
           <Button secondary on:click={previewQuery}>Run Query</Button>
@@ -274,4 +347,9 @@
     min-width: 150px;
     align-items: center;
   }
+
+  .binding-wrap :global(div.container) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 </style>

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}