Navigation updates

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

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, 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 && !override) {
-    // if (updated !== queryStr && !discard) {
+      navigateTo = event.type == "pushstate" ? event.url : null
-    //   navigateTo = event.url
+      saveModal.show()
-    //   saveModal.show()
+      return false
-    //   return false
+    } else return true
-    // } 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")
+      const saveResponse = await saveQuery()
-      saveQuery() //needs ascertain success?
+      override = true
-      discard = true
+      resumeNavigation()
-      $goto(`${navigateTo}`)
     }}
-    onCancel={() => {
+    onCancel={async () => {
-      console.log("CANCEL")
+      override = true
-      discard = true
+      resumeNavigation()
-      $goto(`${navigateTo}`)
     }}
   >
     <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) {
+              if (!query._rev) {
-                $goto(`../../${saveResponse._id}`)
+                $goto(`../../${query._id}`)
               }
             }}
           >