moves the datasources store to it's separate store

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

@@ -20,9 +20,8 @@ export const getBackendUiStore = () => {
     reset: () => store.set({ ...INITIAL_BACKEND_UI_STATE }),
     database: {
       select: async db => {
-        const [tables, datasources, queries, integrations] = await Promise.all([
+        const [tables, queries, integrations] = await Promise.all([
           api.get(`/api/tables`).then(r => r.json()),
-          api.get(`/api/datasources`).then(r => r.json()),
           api.get(`/api/queries`).then(r => r.json()),
           api.get("/api/integrations").then(r => r.json()),
         ])
@@ -30,7 +29,6 @@ export const getBackendUiStore = () => {
         store.update(state => {
           state.selectedDatabase = db
           state.tables = tables
-          state.datasources = datasources
           state.queries = queries
           state.integrations = integrations
           return state
@@ -49,56 +47,6 @@ export const getBackendUiStore = () => {
           return state
         }),
     },
-    datasources: {
-      fetch: async () => {
-        const response = await api.get(`/api/datasources`)
-        const json = await response.json()
-        store.update(state => {
-          state.datasources = json
-          return state
-        })
-        return json
-      },
-      select: async datasourceId => {
-        store.update(state => {
-          state.selectedDatasourceId = datasourceId
-          state.selectedQueryId = null
-          return state
-        })
-      },
-      save: async datasource => {
-        const response = await api.post("/api/datasources", datasource)
-        const json = await response.json()
-        store.update(state => {
-          const currentIdx = state.datasources.findIndex(
-            ds => ds._id === json._id
-          )
-
-          if (currentIdx >= 0) {
-            state.datasources.splice(currentIdx, 1, json)
-          } else {
-            state.datasources.push(json)
-          }
-
-          state.datasources = state.datasources
-          state.selectedDatasourceId = json._id
-          return state
-        })
-        return json
-      },
-      delete: async datasource => {
-        await api.delete(
-          `/api/datasources/${datasource._id}/${datasource._rev}`
-        )
-        store.update(state => {
-          state.datasources = state.datasources.filter(
-            existing => existing._id !== datasource._id
-          )
-          state.selectedDatasourceId = null
-          return state
-        })
-      },
-    },
     queries: {
       fetch: async () => {
         const response = await api.get(`/api/queries`)

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

@@ -0,0 +1,54 @@
+import { writable } from "svelte/store"
+import api from "../../api"
+
+function createDatasourcesStore() {
+  const { subscribe, update, set } = writable({
+    sources: [],
+    selected: null,
+  })
+
+  return {
+    subscribe,
+    set,
+    update,
+    fetch: async () => {
+      const response = await api.get(`/api/datasources`)
+      const json = await response.json()
+      update(state => ({ ...state, sources: json }))
+      return json
+    },
+    select: async datasourceId => {
+      update(state => ({ ...state, selected: datasourceId }))
+    },
+    save: async datasource => {
+      const response = await api.post("/api/datasources", datasource)
+      const json = await response.json()
+
+      update(state => {
+        const currentIdx = state.sources.findIndex(ds => ds._id === json._id)
+
+        const sources = state.sources
+
+        if (currentIdx >= 0) {
+          sources.splice(currentIdx, 1, json)
+        } else {
+          sources.push(json)
+        }
+
+        return { sources, selected: json._id }
+      })
+      return json
+    },
+    delete: async datasource => {
+      await api.delete(`/api/datasources/${datasource._id}/${datasource._rev}`)
+      update(state => {
+        const sources = state.sources.filter(
+          existing => existing._id !== datasource._id
+        )
+        return { sources, selected: null }
+      })
+    },
+  }
+}
+
+export const datasources = createDatasourcesStore()

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

@@ -1 +1,3 @@
 export { permissions } from "./permissions"
+export { roles } from "./roles"
+export { datasources } from "./datasources"

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

@@ -9,6 +9,9 @@ import {
   selectedComponent,
   selectedAccessRole,
 } from "builderStore"
+// Backendstores
+import {datasources} from 'builderStore/store/backend/'
+
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
@@ -57,6 +60,13 @@ export const getFrontendStore = () => {
         appInstance: application.instance,
       }))
       await hostingStore.actions.fetch()
+
+      // Initialise backend stores
+      const [sources] = await Promise.all([
+        api.get(`/api/datasources`).then(r => r.json()),
+      ])
+      datasources.set({sources, selected: null})
+
       await backendUiStore.actions.database.select(application.instance)
     },
     routing: {

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

@@ -2,13 +2,14 @@
   import { onMount } from "svelte"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ICONS from "./icons"
 
   function selectDatasource(datasource) {
-    backendUiStore.actions.datasources.select(datasource._id)
+    datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
 
@@ -21,18 +22,18 @@
   }
 
   onMount(() => {
-    backendUiStore.actions.datasources.fetch()
+    datasources.fetch()
     backendUiStore.actions.queries.fetch()
   })
 </script>
 
 {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
   <div class="hierarchy-items-container">
-    {#each $backendUiStore.datasources as datasource, idx}
+    {#each $datasources.sources as datasource, idx}
       <NavItem
         border={idx > 0}
         text={datasource.name}
-        selected={$backendUiStore.selectedDatasourceId === datasource._id}
+        selected={$datasources.selected === datasource._id}
         on:click={() => selectDatasource(datasource)}>
         <div class="datasource-icon" slot="icon">
           <svelte:component

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

@@ -1,8 +1,8 @@
 <script>
   import { goto, params } from "@sveltech/routify"
-  import { backendUiStore, store } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Button, Spacer } from "@budibase/bbui"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
   import analytics from "analytics"
 
@@ -14,7 +14,7 @@
   function checkValid(evt) {
     const datasourceName = evt.target.value
     if (
-      $backendUiStore.datasources?.some(
+      $datasources?.sources.some(
         datasource => datasource.name === datasourceName
       )
     ) {
@@ -28,7 +28,7 @@
     const { type, ...config } = integration
 
     // Create datasource
-    const response = await backendUiStore.actions.datasources.save({
+    const response = await datasources.save({
       name,
       source: type,
       config,

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

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -22,7 +22,7 @@
   }
 
   async function deleteDatasource() {
-    await backendUiStore.actions.datasources.delete(datasource)
+    await datasources.delete(datasource)
     notifier.success("Datasource deleted")
     $goto('./datasource')
     hideEditor()

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

@@ -10,6 +10,7 @@
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
@@ -81,7 +82,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $backendUiStore.datasources.find(
+    const source = $datasources.sources.find(
       ds => ds._id === query.datasourceId
     ).source
     return $backendUiStore.integrations[source].query[query.queryVerb]
@@ -123,7 +124,7 @@
           height={200}
           query={value}
           schema={fetchQueryDefinition(value)}
-          datasource={$backendUiStore.datasources.find(ds => ds._id === value.datasourceId)}
+          datasource={$datasources.sources.find(ds => ds._id === value.datasourceId)}
           editable={false} />
         <Spacer large />
       </div>

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

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

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

@@ -16,6 +16,7 @@
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import { backendUiStore } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
 
   const PREVIEW_HEADINGS = [
     {
@@ -35,13 +36,11 @@
   export let query
   export let fields = []
 
-  let config
   let tab = "JSON"
   let parameters
   let data = []
-  let popover
 
-  $: datasource = $backendUiStore.datasources.find(
+  $: datasource = $datasources.sources.find(
     ds => ds._id === query.datasourceId
   )
 

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

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

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

@@ -2,20 +2,21 @@
   import { goto, beforeUrlChange } from "@sveltech/routify"
   import { Button, Heading, Body, Spacer } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
+  import { datasources } 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 = $backendUiStore.datasources.find(
-    ds => ds._id === $backendUiStore.selectedDatasourceId
+  $: datasource = $datasources.sources.find(
+    ds => ds._id === $datasources.selected
   )
   $: integration = datasource && $backendUiStore.integrations[datasource.source]
 
   async function saveDatasource() {
     // Create datasource
-    await backendUiStore.actions.datasources.save(datasource)
+    await datasources.save(datasource)
     notifier.success(`Datasource ${name} saved successfully.`)
     unsaved = false
   }

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

@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { datasources } from 'builderStore/store/backend/'
   import { goto, leftover } from "@sveltech/routify"
   import { onMount } from "svelte"
 
@@ -7,10 +7,10 @@
     // navigate to first datasource in list, if not already selected
     if (
       !$leftover &&
-      $backendUiStore.datasources.length > 0 &&
-      !$backendUiStore.selectedDatasourceId
+      $datasources.sources.length > 0 &&
+      !$datasources.selected
     ) {
-      $goto(`./${$backendUiStore.datasources[0]._id}`)
+      $goto(`./${$datasources.sources[0]._id}`)
     }
   })
 </script>

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

@@ -1,11 +1,12 @@
 <script>
     import { backendUiStore } from "builderStore"
+    import { datasources } from 'builderStore/store/backend/'
     import { goto } from "@sveltech/routify"
     import { onMount } from "svelte"
 
     onMount(async () => {
       // navigate to first table in list, if not already selected
-      $backendUiStore.datasources.length > 0 && $goto(`../${$backendUiStore.datasources[0]._id}`)
+      $datasources.sources.length > 0 && $goto(`../${$datasources.sources[0]._id}`)
     })
   </script>