moves queries part of backendstore to separate store

packages/builder/src/builderStore/store/backend.js

@@ -21,13 +21,11 @@ export const getBackendUiStore = () => {
       select: async db => {
         const [tables, queries] = await Promise.all([
           api.get(`/api/tables`).then(r => r.json()),
-          api.get(`/api/queries`).then(r => r.json()),
         ])
 
         store.update(state => {
           state.selectedDatabase = db
           state.tables = tables
-          state.queries = queries
           return state
         })
       },

packages/builder/src/builderStore/store/backend/datasources.js

@@ -3,7 +3,7 @@ import api from "../../api"
 
 function createDatasourcesStore() {
   const { subscribe, update, set } = writable({
-    sources: [],
+    list: [],
     selected: null,
   })
 
@@ -14,7 +14,7 @@ function createDatasourcesStore() {
     fetch: async () => {
       const response = await api.get(`/api/datasources`)
       const json = await response.json()
-      update(state => ({ ...state, sources: json }))
+      update(state => ({ ...state, list: json }))
       return json
     },
     select: async datasourceId => {
@@ -25,9 +25,9 @@ function createDatasourcesStore() {
       const json = await response.json()
 
       update(state => {
-        const currentIdx = state.sources.findIndex(ds => ds._id === json._id)
+        const currentIdx = state.list.findIndex(ds => ds._id === json._id)
 
-        const sources = state.sources
+        const sources = state.list
 
         if (currentIdx >= 0) {
           sources.splice(currentIdx, 1, json)
@@ -42,7 +42,7 @@ function createDatasourcesStore() {
     delete: async datasource => {
       await api.delete(`/api/datasources/${datasource._id}/${datasource._rev}`)
       update(state => {
-        const sources = state.sources.filter(
+        const sources = state.list.filter(
           existing => existing._id !== datasource._id
         )
         return { sources, selected: null }

packages/builder/src/builderStore/store/backend/index.js

@@ -2,3 +2,4 @@ export { permissions } from "./permissions"
 export { roles } from "./roles"
 export { datasources } from "./datasources"
 export { integrations } from "./integrations"
+export { queries } from "./queries"

packages/builder/src/builderStore/store/backend/queries.js

@@ -0,0 +1,69 @@
+import { writable } from "svelte/store"
+import { datasources, integrations } from "./"
+import api from "../../api"
+
+function createQueriesStore() {
+  const { subscribe, set, update } = writable({list: [], selected: null})
+
+  return {
+    subscribe,
+    set,
+    fetch: async () => {
+      const response = await api.get(`/api/queries`)
+      const json = await response.json()
+      update(state => ({...state, list: json}))
+      return json
+    },
+    save: async (datasourceId, query) => {
+      const _integrations = get(integrations)
+      const dataSource = get(datasources).list.filter(
+        ds => ds._id === datasourceId
+      )
+      // check if readable attribute is found
+      if (dataSource.length !== 0) {
+        const integration = _integrations[dataSource[0].source]
+        const readable = integration.query[query.queryVerb].readable
+        if (readable) {
+          query.readable = readable
+        }
+      }
+      query.datasourceId = datasourceId
+      const response = await api.post(`/api/queries`, query)
+      if (response.status !== 200) {
+        throw new Error("Failed saving query.")
+      }
+      const json = await response.json()
+      update(state => {
+        const currentIdx = state.list.findIndex(query => query._id === json._id)
+
+        const queries = state.list
+
+        if (currentIdx >= 0) {
+          queries.splice(currentIdx, 1, json)
+        } else {
+          queries.push(json)
+        }
+        return { list: queries, selected: json._id}
+      })
+      return json
+    },
+    select: query => {
+      datasources.update(state => ({ ...state, selected: query.datasourceId }))
+    },
+    delete: async query => {
+      await api.delete(`/api/queries/${query._id}/${query._rev}`)
+      update(state => {
+        state.list = state.list.filter(
+          existing => existing._id !== query._id
+        )
+        if (state.selected === query._id) {
+          state.selected = null
+        }
+
+        return state
+      })
+    },
+  }
+}
+
+export const queries = createQueriesStore()

packages/builder/src/builderStore/store/frontend.js

@@ -10,7 +10,7 @@ import {
   selectedAccessRole,
 } from "builderStore"
 // Backendstores
-import { datasources, integrations } from 'builderStore/store/backend/'
+import { datasources, integrations, queries } from 'builderStore/store/backend/'
 
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
@@ -62,12 +62,14 @@ export const getFrontendStore = () => {
       await hostingStore.actions.fetch()
 
       // Initialise backend stores
-      const [_datasources, _integrations] = await Promise.all([
+      const [_datasources, _integrations, _queries] = await Promise.all([
         api.get(`/api/datasources`).then(r => r.json()),
-        api.get("/api/integrations").then(r => r.json())
+        api.get("/api/integrations").then(r => r.json()),
+        api.get(`/api/queries`).then(r => r.json())
       ])
-      datasources.set({sources: _datasources, selected: null})
+      datasources.set({ list: _datasources, selected: null })
       integrations.set(_integrations)
+      queries.set({ list: _queries, selected: null })
 
       await backendUiStore.actions.database.select(application.instance)
     },

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
-  import { datasources } from 'builderStore/store/backend/'
+  import { datasources, queries } from 'builderStore/store/backend/'
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -17,19 +17,19 @@
     if ($backendUiStore.selectedQueryId === query._id) {
       return
     }
-    backendUiStore.actions.queries.select(query)
+    queries.select(query)
     $goto(`./datasource/${query.datasourceId}/${query._id}`)
   }
 
   onMount(() => {
     datasources.fetch()
-    backendUiStore.actions.queries.fetch()
+    queries.fetch()
   })
 </script>
 
 {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
   <div class="hierarchy-items-container">
-    {#each $datasources.sources as datasource, idx}
+    {#each $datasources.list as datasource, idx}
       <NavItem
         border={idx > 0}
         text={datasource.name}
@@ -43,12 +43,12 @@
         </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
-      {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+      {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
           icon="ri-eye-line"
           text={query.name}
-          selected={$backendUiStore.selectedQueryId === query._id}
+          selected={$queries.selected === query._id}
           on:click={() => onClickQuery(query)}>
           <EditQueryPopover {query} />
         </NavItem>

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -23,7 +23,7 @@
   }
 
   async function deleteQuery() {
-    await backendUiStore.actions.queries.delete(query)
+    await queries.delete(query)
     notifier.success("Query deleted")
     hideEditor()
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte

@@ -37,7 +37,7 @@
     }))
     return [...acc, ...viewsArr]
   }, [])
-  $: queries = $backendUiStore.queries
+  $: queries = $queries.list
     .filter(
       query => showAllQueries || query.queryVerb === "read" || query.readable
     )
@@ -82,7 +82,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.sources.find(
+    const source = $datasources.list.find(
       ds => ds._id === query.datasourceId
     ).source
     return $integrations[source].query[query.queryVerb]
@@ -124,7 +124,7 @@
           height={200}
           query={value}
           schema={fetchQueryDefinition(value)}
-          datasource={$datasources.sources.find(ds => ds._id === value.datasourceId)}
+          datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
           editable={false} />
         <Spacer large />
       </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -1,15 +1,15 @@
 <script>
   import { Select, Label, Spacer } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import { datasources, integrations } from 'builderStore/store/backend/'
+  import { store, currentAsset } from "builderStore"
+  import { datasources, integrations, queries } from 'builderStore/store/backend/'
   import { getBindableProperties } from "builderStore/dataBinding"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
 
   export let parameters
 
-  $: query = $backendUiStore.queries.find(q => q._id === parameters.queryId)
-  $: datasource = $datasources.sources.find(
+  $: query = $queries.list.find(q => q._id === parameters.queryId)
+  $: datasource = $datasources.list.find(
     ds => ds._id === parameters.datasourceId
   )
   $: bindableProperties = getBindableProperties(
@@ -18,7 +18,7 @@
   )
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.sources.find(
+    const source = $datasources.list.find(
       ds => ds._id === query.datasourceId
     ).source
     return $integrations[source].query[query.queryVerb]
@@ -28,7 +28,7 @@
 <Label small>Datasource</Label>
 <Select thin secondary bind:value={parameters.datasourceId}>
   <option value="" />
-  {#each $datasources as datasource}
+  {#each $datasources.list as datasource}
     <option value={datasource._id}>{datasource.name}</option>
   {/each}
 </Select>
@@ -39,7 +39,7 @@
   <Label small>Query</Label>
   <Select thin secondary bind:value={parameters.queryId}>
     <option value="" />
-    {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+    {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
       <option value={query._id}>{query.name}</option>
     {/each}
   </Select>

packages/builder/src/components/integration/QueryViewer.svelte

@@ -40,7 +40,7 @@
   let parameters
   let data = []
 
-  $: datasource = $datasources.sources.find(
+  $: datasource = $datasources.list.find(
     ds => ds._id === query.datasourceId
   )
 
@@ -114,7 +114,7 @@
 
   async function saveQuery() {
     try {
-      const { _id } = await backendUiStore.actions.queries.save(
+      const { _id } = await queries.save(
         query.datasourceId,
         query
       )

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte

@@ -1,13 +1,13 @@
 <script>
   import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
+  import { queries } from "builderStore/store/backend/"
 
   if ($params.query) {
-    const query = $backendUiStore.queries.find(
+    const query = $queries.list.find(
       m => m._id === $params.query
     )
     if (query) {
-      backendUiStore.actions.queries.select(query)
+      queries.select(query)
     }
   }
 </script>

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import { params } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
+  import { queries } from 'builderStore/store/backend/'
   import QueryInterface from "components/integration/QueryViewer.svelte"
 
   async function fetchQueryConfig() {
@@ -14,7 +15,7 @@
     }
   }
 
-  $: selectedQuery = $backendUiStore.queries.find(
+  $: selectedQuery = $queries.list.find(
     query => query._id === $backendUiStore.selectedQueryId
   ) || {
     datasourceId: $params.selectedDatasource,

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/_layout.svelte

@@ -3,7 +3,7 @@
   import { datasources } from 'builderStore/store/backend/'
 
   if ($params.selectedDatasource) {
-    const datasource = $datasources.sources.find(
+    const datasource = $datasources.list.find(
       m => m._id === $params.selectedDatasource
     )
     if (datasource) {

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -2,14 +2,14 @@
   import { goto, beforeUrlChange } from "@sveltech/routify"
   import { Button, Heading, Body, Spacer } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
-  import { datasources, integrations } from 'builderStore/store/backend/'
+  import { datasources, integrations, queries } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
 
   let unsaved = false
 
-  $: datasource = $datasources.sources.find(
+  $: datasource = $datasources.list.find(
     ds => ds._id === $datasources.selected
   )
   $: integration = datasource && $integrations[datasource.source]
@@ -25,7 +25,7 @@
     if ($backendUiStore.selectedQueryId === query._id) {
       return
     }
-    backendUiStore.actions.queries.select(query)
+    queries.select(query)
     $goto(`../${query._id}`)
   }
 
@@ -88,7 +88,7 @@
       </div>
       <Spacer extraLarge />
       <div class="query-list">
-        {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
             <p class="query-name">{query.name}</p>
             <p>{query.queryVerb}</p>

packages/builder/src/pages/[application]/data/datasource/_layout.svelte

@@ -7,10 +7,10 @@
     // navigate to first datasource in list, if not already selected
     if (
       !$leftover &&
-      $datasources.sources.length > 0 &&
+      $datasources.list.length > 0 &&
       !$datasources.selected
     ) {
-      $goto(`./${$datasources.sources[0]._id}`)
+      $goto(`./${$datasources.list[0]._id}`)
     }
   })
 </script>

packages/builder/src/pages/[application]/data/datasource/index.svelte

@@ -6,7 +6,7 @@
 
     onMount(async () => {
       // navigate to first table in list, if not already selected
-      $datasources.sources.length > 0 && $goto(`../${$datasources.sources[0]._id}`)
+      $datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
     })
   </script>