Ensure datasource containing the currently selected table is always expanded

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

@@ -1,8 +1,9 @@
 <script>
   import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import { goto } from "@roxi/routify"
   import { BUDIBASE_INTERNAL_DB } from "constants"
-  import { database, datasources, queries } from "stores/backend"
+  import { database, datasources, queries, tables } from "stores/backend"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -10,6 +11,13 @@
   import ICONS from "./icons"
 
   let openDataSources = []
+  $: enrichedDataSources = $datasources.list.map(datasource => ({
+    ...datasource,
+    open:
+      openDataSources.includes(datasource._id) ||
+      containsActiveTable(datasource),
+    selected: $datasources.selected === datasource._id,
+  }))
 
   function selectDatasource(datasource) {
     toggleNode(datasource)
@@ -35,16 +43,28 @@
     datasources.fetch()
     queries.fetch()
   })
+
+  const containsActiveTable = datasource => {
+    const activeTableId = get(tables).selected?._id
+    if (!datasource.entities) {
+      return false
+    }
+    let tableOptions = datasource.entities
+    if (!Array.isArray(tableOptions)) {
+      tableOptions = Object.values(tableOptions)
+    }
+    return tableOptions.find(x => x._id === activeTableId) != null
+  }
 </script>
 
 {#if $database?._id}
   <div class="hierarchy-items-container">
-    {#each $datasources.list as datasource, idx}
+    {#each enrichedDataSources as datasource, idx}
       <NavItem
         border={idx > 0}
         text={datasource.name}
-        opened={openDataSources.includes(datasource._id)}
+        opened={datasource.open}
-        selected={$datasources.selected === datasource._id}
+        selected={datasource.selected}
         withArrow={true}
         on:click={() => selectDatasource(datasource)}
         on:iconClick={() => toggleNode(datasource)}
@@ -61,7 +81,7 @@
         {/if}
       </NavItem>
 
-      {#if openDataSources.includes(datasource._id)}
+      {#if datasource.open}
         <TableNavigator sourceId={datasource._id} />
       {/if}
 

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

@@ -0,0 +1,7 @@
+<script>
+  import { datasources } from "stores/backend"
+
+  datasources.select("bb_internal")
+</script>
+
+<slot />

packages/builder/src/stores/backend/datasources.js

@@ -1,4 +1,4 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { queries, tables, views } from "./"
 import api from "../../builderStore/api"
 
@@ -8,7 +8,8 @@ export const INITIAL_DATASOURCE_VALUES = {
 }
 
 export function createDatasourcesStore() {
-  const { subscribe, update, set } = writable(INITIAL_DATASOURCE_VALUES)
+  const store = writable(INITIAL_DATASOURCE_VALUES)
+  const { subscribe, update, set } = store
 
   return {
     subscribe,
@@ -21,7 +22,15 @@ export function createDatasourcesStore() {
     fetch: async () => {
       const response = await api.get(`/api/datasources`)
       const json = await response.json()
-      update(state => ({ ...state, list: json, selected: null }))
+
+      // Clear selected if it no longer exists, otherwise keep it
+      const selected = get(store).selected
+      let nextSelected = null
+      if (selected && json.find(source => source._id === selected)) {
+        nextSelected = selected
+      }
+
+      update(state => ({ ...state, list: json, selected: nextSelected }))
       return json
     },
     select: async datasourceId => {