connection workflow

packages/web/src/tabs/ConnectionTab.svelte

@@ -25,6 +25,7 @@
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { onMount } from 'svelte';
   import { openConnection } from '../appobj/ConnectionAppObject.svelte';
+  import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
 
   export let connection;
   export let tabid;
@@ -112,6 +113,7 @@
     $values = {
       ...$values,
       _id: saved._id,
+      unsaved: false,
     };
     changeTab(tabid, tab => ({
       ...tab,
@@ -126,13 +128,15 @@
 
   async function handleConnect() {
     let connection = getCurrentConnection();
-    if (!connection._id)
+    if (!connection._id) {
       connection = {
         ...connection,
-        unsaved: true,
+        unsaved: !connection._id,
       };
+    }
     const saved = await apiCall('connections/save', connection);
     openConnection(saved);
+    closeMultipleTabs(x => x.tabid == tabid, true);
   }
 
   onMount(async () => {

packages/web/src/utility/OpenTabsOnStartup.svelte

@@ -6,7 +6,8 @@
   import { showModal } from '../modals/modalTools';
   import { openedTabs } from '../stores';
 
-  import { getConfig, useFavorites } from './metadataLoaders';
+  import { getConfig, getConnectionList, useFavorites } from './metadataLoaders';
+  import openNewTab from './openNewTab';
   import { showSnackbarInfo } from './snackbar';
 
   $: favorites = useFavorites();
@@ -48,6 +49,14 @@
       }
     }
 
+    if (!$openedTabs.find(x => x.closedTime == null) && !(await getConnectionList()).find(x => !x.unsaved)) {
+      openNewTab({
+        title: 'New Connection',
+        icon: 'img connection',
+        tabComponent: 'ConnectionTab',
+      });
+    }
+
     const config = await getConfig();
     const appVersion = localStorage.getItem('appVersion');
     if (appVersion && appVersion != config.version) {

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, expandedConnections, openedConnections } from '../stores';
+  import { commands, commandsCustomized, expandedConnections, openedConnections, openedTabs } from '../stores';
   import ToolbarButton from '../buttons/ToolbarButton.svelte';
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
@@ -17,6 +17,7 @@
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { apiCall } from '../utility/api';
   import LargeButton from '../buttons/LargeButton.svelte';
+  import { matchingProps } from '../tabs/TableDataTab.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -66,7 +67,7 @@
     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}
+  {#if $connections && !$connections.find(x => !x.unsaved) && $openedConnections.length == 0 && $commandsCustomized['new.connection']?.enabled && !$openedTabs.find(x => !x.closedTime && x.tabComponent == 'ConnectionTab' && !x.props?.conid)}
     <LargeButton icon="icon new-connection" on:click={() => runCommand('new.connection')} fillHorizontal
       >Add new connection</LargeButton
     >