From 4e418786181e82bdaebe5c1b63011dcca6fcb704 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 4 Jan 2021 10:39:17 +0000
Subject: [PATCH] better UI feedback

---
 packages/builder/src/builderStore/store/backend.js        | 4 ++--
 .../backend/DataTable/buttons/CreateQueryButton.svelte    | 8 ++++++--
 .../DatasourceNavigator/DatasourceNavigator.svelte        | 5 +++--
 .../datasource/[selectedDatasource]/[query]/index.svelte  | 7 +++----
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 4e6767fa70..76888131a0 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -60,9 +60,9 @@ export const getBackendUiStore = () => {
         })
         return json
       },
-      select: async datasource => {
+      select: async datasourceId => {
         store.update(state => {
-          state.selectedDatasourceId = datasource._id
+          state.selectedDatasourceId = datasourceId
           return state
         })
       },
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
index d2f3ed0c57..92ab2922b0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
@@ -9,6 +9,7 @@
     ModalContent,
     TextArea,
   } from "@budibase/bbui"
+  import { notifier } from "builderStore/store/notifications"
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
   import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
@@ -23,17 +24,20 @@
   async function saveQuery() {
     try {
       await backendUiStore.actions.datasources.saveQuery(datasource._id, query)
+      notifier.success(`Query created successfully.`)
     } catch (err) {
       console.error(err)
-      // TODO: notifier
+      notifier.danger(`Error creating query. ${err.message}`)
     }
   }
+
+  $: console.log(query)
 </script>
 
 <div>
   <Button text small on:click={modal.show}>
     <Icon name="filter" />
-    Create Query
+    {query ? 'Edit' : 'Create'} Query
   </Button>
 </div>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 14aafc8561..ee69d643cb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -15,7 +15,7 @@
 
   function selectDatasource(datasource) {
     // You can't actually select a datasource, just edit it
-    backendUiStore.actions.datasources.select(datasource)
+    backendUiStore.actions.datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
 
@@ -23,6 +23,7 @@
     if ($backendUiStore.selectedQueryId === queryId) {
       return
     }
+    backendUiStore.actions.datasources.select(datasourceId)
     backendUiStore.actions.queries.select(queryId)
     $goto(`./datasource/${datasourceId}/${queryId}`)
   }
@@ -54,7 +55,7 @@
           indentLevel={1}
           icon="ri-eye-line"
           text={datasource.queries[queryId].name}
-          selected={selectedView === queryId}
+          selected={$backendUiStore.selectedQueryId === queryId}
           on:click={() => onClickQuery(datasource._id, queryId)}>
           <!-- <EditViewPopover
             view={{ name: viewName, ...table.views[viewName] }} /> -->
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index 0a692cf422..67acdc46f3 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -3,14 +3,13 @@
   import { backendUiStore } from "builderStore"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
 
-  $: datasourceId = $params.selectedDatasource
   // TODO: refactor
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $params.selectedDatasource
   )
-  $: query = datasource.queries[$params.query]
+  $: query = datasource && datasource.queries[$params.query]
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && query}
-  <ExternalDataSourceTable {query} {datasourceId} />
+{#if $backendUiStore.selectedDatabase._id && datasource}
+  <ExternalDataSourceTable {query} datasourceId={datasource._id} />
 {/if}