Collapse and expand database connections

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

@@ -9,7 +9,10 @@
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import ICONS from "./icons"
 
+  let openDataSources = []
+
   function selectDatasource(datasource) {
+    toggleNode(datasource)
     datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
@@ -19,6 +22,15 @@
     $goto(`./datasource/${query.datasourceId}/${query._id}`)
   }
 
+  function toggleNode(datasource) {
+    const isOpen = openDataSources.includes(datasource._id)
+    if (isOpen) {
+      openDataSources = openDataSources.filter(id => datasource._id !== id)
+    } else {
+      openDataSources = [...openDataSources, datasource._id]
+    }
+  }
+
   onMount(() => {
     datasources.fetch()
     queries.fetch()
@@ -31,8 +43,11 @@
       <NavItem
         border={idx > 0}
         text={datasource.name}
+        opened={openDataSources.includes(datasource._id)}
         selected={$datasources.selected === datasource._id}
+        withArrow={true}
         on:click={() => selectDatasource(datasource)}
+        on:iconClick={() => toggleNode(datasource)}
       >
         <div class="datasource-icon" slot="icon">
           <svelte:component
@@ -46,13 +61,16 @@
         {/if}
       </NavItem>
 
-      <TableNavigator sourceId={datasource._id} />
+      {#if openDataSources.includes(datasource._id)}
+        <TableNavigator sourceId={datasource._id} />
+      {/if}
 
       {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
           icon="SQLQuery"
           text={query.name}
+          opened={$queries.selected === query._id}
           selected={$queries.selected === query._id}
           on:click={() => onClickQuery(query)}
         >

packages/builder/src/components/common/NavItem.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   export let icon
   export let withArrow = false
@@ -10,6 +11,13 @@
   export let selected = false
   export let opened = false
   export let draggable = false
+
+  const dispatch = createEventDispatcher()
+
+  function onIconClick(event) {
+    event.stopPropagation()
+    dispatch("iconClick")
+  }
 </script>
 
 <div
@@ -28,7 +36,7 @@
 >
   <div class="content">
     {#if withArrow}
-      <div class:opened class="icon arrow">
+      <div class:opened class="icon arrow" on:click={onIconClick}>
         <Icon size="S" name="ChevronRight" />
       </div>
     {/if}