Merge pull request #2169 from mslourens/collapse_expand_database_connections

Collapse and expand database connections

packages/builder/cypress/support/commands.js

@@ -37,9 +37,8 @@ Cypress.Commands.add("createApp", name => {
       cy.contains("Create app").click()
     })
     .then(() => {
-      cy.get(".selected > .content", {
+      cy.expandBudibaseConnection()
-        timeout: 20000,
+      cy.get(".nav-item.selected > .content").should("be.visible")
-      }).should("be.visible")
     })
 })
 
@@ -83,6 +82,7 @@ Cypress.Commands.add("createTable", tableName => {
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
+  cy.selectTable(tableName)
   cy.contains(".nav-item", tableName).click()
   cy.contains("Create column").click()
 
@@ -161,3 +161,15 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
     cy.get(".spectrum-Button--cta").click()
   })
 })
+
+Cypress.Commands.add("expandBudibaseConnection", () => {
+  if (Cypress.$(".nav-item > .content > .opened").length === 0) {
+    // expand the Budibase DB connection string
+    cy.get(".icon.arrow").eq(0).click()
+  }
+})
+
+Cypress.Commands.add("selectTable", tableName => {
+  cy.expandBudibaseConnection()
+  cy.contains(".nav-item", tableName).click()
+})

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}