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

packages/web/src/stores.ts

@@ -47,6 +47,7 @@ function subscribeCssVariable(store, transform, cssVariable) {
 
 export const selectedWidget = writableWithStorage('database', 'selectedWidget');
 export const openedConnections = writable([]);
+export const expandedConnections = writable([]);
 export const currentDatabase = writable(null);
 export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
 export const copyRowsFormat = writableWithStorage('textWithoutHeaders', 'copyRowsFormat');

packages/web/src/tabs/ConnectionTab.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export const matchingProps = ['conid'];
+</script>
+
 <script lang="ts">
   import FormButton from '../forms/FormButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
@@ -100,7 +104,11 @@
   }
 
   async function handleSave() {
-    const connection = getCurrentConnection();
+    let connection = getCurrentConnection();
+    connection = {
+      ...connection,
+      unsaved: false,
+    };
     const saved = await apiCall('connections/save', connection);
     $values = {
       ...$values,
@@ -124,9 +132,9 @@
         ...connection,
         unsaved: true,
       };
-    await apiCall('connections/save', connection);
+    const saved = await apiCall('connections/save', connection);
     closeTabWithNoHistory(tabid);
-    openConnection(connection);
+    openConnection(saved);
   }
 
   onMount(async () => {

packages/web/src/utility/getConnectionLabel.ts

@@ -5,7 +5,7 @@ export function getDatabaseFileLabel(databaseFile) {
   return databaseFile;
 }
 
-export default function getConnectionLabel(connection, { allowExplicitDatabase = true } = {}) {
+function getConnectionLabelCore(connection, { allowExplicitDatabase = true } = {}) {
   if (!connection) {
     return null;
   }
@@ -27,3 +27,13 @@ export default function getConnectionLabel(connection, { allowExplicitDatabase =
 
   return '';
 }
+
+export default function getConnectionLabel(connection, { allowExplicitDatabase = true, showUnsaved = false } = {}) {
+  const res = getConnectionLabelCore(connection, { allowExplicitDatabase });
+
+  if (res && showUnsaved && connection?.unsaved) {
+    return `${res} - unsaved`;
+  }
+
+  return res;
+}

packages/web/src/utility/openNewTab.ts

@@ -148,6 +148,9 @@ export async function duplicateTab(tab) {
 }
 
 export function getTabDbKey(tab) {
+  if (tab.tabComponent == 'ConnectionTab') {
+    return 'connections.';
+  }
   if (tab.props && tab.props.conid && tab.props.database) {
     return `database://${tab.props.database}-${tab.props.conid}`;
   }

packages/web/src/widgets/ConnectionList.svelte

@@ -8,7 +8,7 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
-  import { commands, commandsCustomized, openedConnections } from '../stores';
+  import { commands, commandsCustomized, expandedConnections, openedConnections } from '../stores';
   import ToolbarButton from '../buttons/ToolbarButton.svelte';
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
@@ -28,6 +28,10 @@
       ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
       : $connections;
 
+  $: connectionsWithStatusFiltered = connectionsWithStatus?.filter(
+    x => !x.unsaved || $openedConnections.includes(x._id)
+  );
+
   const handleRefreshConnections = () => {
     for (const conid of $openedConnections) {
       apiCall('server-connections/refresh', { conid });
@@ -51,13 +55,16 @@
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <AppObjectList
-    list={_.sortBy(connectionsWithStatus, connection => (getConnectionLabel(connection) || '').toUpperCase())}
+    list={_.sortBy(connectionsWithStatusFiltered, connection => (getConnectionLabel(connection) || '').toUpperCase())}
     module={connectionAppObject}
     subItemsComponent={SubDatabaseList}
     expandOnClick
     isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
     {filter}
     passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
+    getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
+    setIsExpanded={(data, value) =>
+      expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)))}
   />
   {#if $connections && $connections.length == 0 && $commandsCustomized['new.connection']?.enabled}
     <LargeButton icon="icon new-connection" on:click={() => runCommand('new.connection')} fillHorizontal

packages/web/src/widgets/TabsPanel.svelte

@@ -22,7 +22,7 @@
     });
   };
 
-  const closeMultipleTabs = closeCondition => {
+  export const closeMultipleTabs = closeCondition => {
     openedTabs.update(files => {
       const newFiles = files.map(x => ({
         ...x,
@@ -81,6 +81,7 @@
   const closeOthers = closeTabFunc((x, active) => x.tabid != active.tabid);
 
   function getTabDbName(tab, connectionList) {
+    if (tab.tabComponent == 'ConnectionTab') return 'Connections';
     if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
     if (tab.props && tab.props.conid) {
       const connection = connectionList?.find(x => x._id == tab.props.conid);
@@ -96,6 +97,7 @@
       if (key.startsWith('database://')) return 'icon database';
       if (key.startsWith('archive://')) return 'icon archive';
       if (key.startsWith('server://')) return 'icon server';
+      if (key.startsWith('connections.')) return 'icon connection';
     }
     return 'icon file';
   }