better UI feedback

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

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

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

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}