connection workflow

packages/web/src/appobj/AppObjectList.svelte

@@ -15,6 +15,8 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let passProps;
+  export let getIsExpanded = null;
+  export let setIsExpanded = null;
 
   export let groupFunc = undefined;
 
@@ -34,7 +36,6 @@
       })
     : null;
 
-
   // let filtered = [];
 
   // $: {
@@ -77,6 +78,8 @@
       {disableContextMenu}
       {filter}
       {passProps}
+      {getIsExpanded}
+      {setIsExpanded}
     />
   {/each}
 {:else}
@@ -95,6 +98,8 @@
       {filter}
       isExpandedBySearch={childrenMatched.includes(data)}
       {passProps}
+      {getIsExpanded}
+      {setIsExpanded}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -22,23 +22,28 @@
   export let disableContextMenu = false;
   export let isExpandedBySearch = false;
   export let passProps;
+  export let getIsExpanded = null;
+  export let setIsExpanded = null;
 
-  let isExpanded = false;
+  let isExpandedCore = false;
 
   async function handleExpand() {
     if (subItemsComponent && expandOnClick) {
       await tick();
-      isExpanded = !isExpanded;
+      handleExpandButton();
     }
   }
 
   function handleExpandButton() {
-    isExpanded = !isExpanded;
+    if (getIsExpanded && setIsExpanded) {
+      setIsExpanded(data, !isExpanded);
+    } else {
+      isExpandedCore = !isExpandedCore;
+    }
   }
 
   $: expandable = data && isExpandable && isExpandable(data);
-
-  $: if (!expandable && isExpanded) isExpanded = false;
+  $: isExpanded = expandable ? (getIsExpanded && setIsExpanded ? getIsExpanded(data) : isExpandedCore) : false;
 </script>
 
 {#if !isHidden}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -25,6 +25,7 @@
         conid: connection._id,
         keepOpen: true,
       });
+      expandedConnections.update(x => _.uniq([...x, connection._id]));
     }
   }
 </script>
@@ -32,7 +33,14 @@
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
-  import { currentDatabase, extensions, getCurrentConfig, getOpenedConnections, openedConnections } from '../stores';
+  import {
+    currentDatabase,
+    expandedConnections,
+    extensions,
+    getCurrentConfig,
+    getOpenedConnections,
+    openedConnections,
+  } from '../stores';
   import { filterName } from 'dbgate-tools';
   import { showModal } from '../modals/modalTools';
   import ConnectionModal from '../modals/ConnectionModal.svelte';
@@ -46,6 +54,7 @@
   import { getLocalStorage } from '../utility/storageCache';
   import { apiCall } from '../utility/api';
   import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
+  import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
 
   export let data;
   export let passProps;
@@ -63,6 +72,10 @@
   };
 
   const handleOpenConnectionTab = () => {
+    if ($openedConnections.includes(data._id)) {
+      return;
+    }
+
     openNewTab({
       title: getConnectionLabel(data),
       icon: 'img connection',
@@ -96,6 +109,17 @@
         }
         currentDatabase.set(null);
       }
+      closeMultipleTabs(x => x.props.conid == data._id);
+      if (data.unsaved) {
+        openNewTab({
+          title: 'New Connection',
+          icon: 'img connection',
+          tabComponent: 'ConnectionTab',
+          props: {
+            conid: data._id,
+          },
+        });
+      }
     };
     // const handleEdit = () => {
     //   showModal(ConnectionModal, { connection: data });
@@ -140,11 +164,11 @@
 
     return [
       config.runAsPortal == false && [
-        {
+        !$openedConnections.includes(data._id) && {
           text: 'Edit',
           onClick: handleOpenConnectionTab,
         },
-        {
+        !$openedConnections.includes(data._id) && {
           text: 'Delete',
           onClick: handleDelete,
         },
@@ -219,7 +243,7 @@
 <AppObjectCore
   {...$$restProps}
   {data}
-  title={getConnectionLabel(data)}
+  title={getConnectionLabel(data, { showUnsaved: true })}
   icon={data.singleDatabase ? 'img database' : 'img server'}
   isBold={data.singleDatabase
     ? _.get($currentDatabase, 'connection._id') == data._id && _.get($currentDatabase, 'name') == data.defaultDatabase