From 2ca17e826c57b3ee0cbfd0410b3d3852f81dcf89 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 28 Nov 2024 17:53:22 +0100
Subject: [PATCH] connection tree UX

---
 packages/web/src/widgets/DatabaseWidget.svelte | 18 ++++++++++++++++--
 packages/web/src/widgets/SqlObjectList.svelte  | 13 ++++++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/widgets/DatabaseWidget.svelte b/packages/web/src/widgets/DatabaseWidget.svelte
index 7009bee08..6550dd5db 100644
--- a/packages/web/src/widgets/DatabaseWidget.svelte
+++ b/packages/web/src/widgets/DatabaseWidget.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
-  import { findEngineDriver } from 'dbgate-tools';
-  import { currentDatabase, extensions, pinnedDatabases, pinnedTables, focusedConnectionOrDatabase } from '../stores';
+  import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
+  import {
+    currentDatabase,
+    extensions,
+    pinnedDatabases,
+    pinnedTables,
+    focusedConnectionOrDatabase,
+    openedConnections,
+  } from '../stores';
   import { useConfig, useConnectionInfo } from '../utility/metadataLoaders';
 
   import ConnectionList from './ConnectionList.svelte';
@@ -16,6 +23,7 @@
   import _ from 'lodash';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import { switchCurrentDatabase } from '../utility/common';
+  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
 
   export let hidden = false;
   let domSqlObjectList = null;
@@ -92,6 +100,12 @@
               name: $focusedConnectionOrDatabase?.database,
             })}
         />
+      {:else if $focusedConnectionOrDatabase?.connection && !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
+        <FormStyledButton
+          value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
+          skipWidth
+          on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+        />
       {/if}
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
diff --git a/packages/web/src/widgets/SqlObjectList.svelte b/packages/web/src/widgets/SqlObjectList.svelte
index 332d52ecf..2ab501e46 100644
--- a/packages/web/src/widgets/SqlObjectList.svelte
+++ b/packages/web/src/widgets/SqlObjectList.svelte
@@ -41,6 +41,7 @@
     extensions,
     focusedConnectionOrDatabase,
     getSelectedDatabaseObjectAppObject,
+    openedConnections,
     selectedDatabaseObjectAppObject,
   } from '../stores';
   import newQuery from '../query/newQuery';
@@ -230,11 +231,13 @@
         <div class="m-1 ml-3 mb-3">
           <b>{getConnectionLabel($connection)}</b>
         </div>
-        <FormStyledButton
-          value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
-          skipWidth
-          on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
-        />
+        {#if !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
+          <FormStyledButton
+            value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
+            skipWidth
+            on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+          />
+        {/if}
         <FormStyledButton
           value={`Show ${getConnectionLabel($connection)}`}
           skipWidth