connect from connection tab

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -11,6 +11,22 @@
     const databases = getLocalStorage(`database_list_${_id}`) || [];
     return filterName(filter, ...databases.map(x => x.name));
   };
+  export function openConnection(connection) {
+    if (connection.singleDatabase) {
+      currentDatabase.set({ connection, name: connection.defaultDatabase });
+      apiCall('database-connections/refresh', {
+        conid: connection._id,
+        database: connection.defaultDatabase,
+        keepOpen: true,
+      });
+    } else {
+      openedConnections.update(x => _.uniq([...x, connection._id]));
+      apiCall('server-connections/refresh', {
+        conid: connection._id,
+        keepOpen: true,
+      });
+    }
+  }
 </script>
 
 <script lang="ts">
@@ -43,20 +59,18 @@
   const electron = getElectron();
 
   const handleConnect = () => {
-    if (data.singleDatabase) {
-      $currentDatabase = { connection: data, name: data.defaultDatabase };
-      apiCall('database-connections/refresh', {
+    openConnection(data);
+  };
+
+  const handleOpenConnectionTab = () => {
+    openNewTab({
+      title: getConnectionLabel(data),
+      icon: 'img connection',
+      tabComponent: 'ConnectionTab',
+      props: {
         conid: data._id,
-        database: data.defaultDatabase,
-        keepOpen: true,
-      });
-    } else {
-      $openedConnections = _.uniq([...$openedConnections, data._id]);
-      apiCall('server-connections/refresh', {
-        conid: data._id,
-        keepOpen: true,
-      });
-    }
+      },
+    });
   };
 
   const handleSqlRestore = () => {
@@ -83,9 +97,9 @@
         currentDatabase.set(null);
       }
     };
-    const handleEdit = () => {
-      showModal(ConnectionModal, { connection: data });
-    };
+    // const handleEdit = () => {
+    //   showModal(ConnectionModal, { connection: data });
+    // };
     const handleDelete = () => {
       showModal(ConfirmModal, {
         message: `Really delete connection ${getConnectionLabel(data)}?`,
@@ -128,7 +142,7 @@
       config.runAsPortal == false && [
         {
           text: 'Edit',
-          onClick: handleEdit,
+          onClick: handleOpenConnectionTab,
         },
         {
           text: 'Delete',
@@ -216,7 +230,7 @@
   {extInfo}
   colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}
-  on:click={handleConnect}
+  on:click={handleOpenConnectionTab}
   on:click
   on:expand
   on:middleclick={() => {

packages/web/src/tabs/ConnectionTab.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-  import registerCommand from '../commands/registerCommand';
   import FormButton from '../forms/FormButton.svelte';
-  import FormProvider from '../forms/FormProvider.svelte';
-  import FormSubmit from '../forms/FormSubmit.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import TabControl from '../elements/TabControl.svelte';
   import ConnectionModalDriverFields from '../modals/ConnectionModalDriverFields.svelte';
@@ -10,19 +7,25 @@
   import ConnectionModalSslFields from '../modals/ConnectionModalSslFields.svelte';
   import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
 
-  import ModalBase from '../modals/ModalBase.svelte';
-  import { closeCurrentModal, closeModal, showModal } from '../modals/modalTools';
+  import { showModal } from '../modals/modalTools';
   import createRef from '../utility/createRef';
   import Link from '../elements/Link.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { writable } from 'svelte/store';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
-  import { extensions, getCurrentConfig } from '../stores';
-  import _ from 'lodash';
-  import { getDatabaseFileLabel } from '../utility/getConnectionLabel';
+  import { extensions, getCurrentConfig, openedTabs } from '../stores';
+  import _, { Dictionary } from 'lodash';
   import { apiCall } from '../utility/api';
+  import { showSnackbarSuccess } from '../utility/snackbar';
+  import { changeTab } from '../utility/common';
+  import getConnectionLabel from '../utility/getConnectionLabel';
+  import { onMount } from 'svelte';
+  import { closeTabWithNoHistory } from '../utility/openNewTab';
+  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
 
   export let connection;
+  export let tabid;
+  export let conid;
 
   let isTesting;
   let sqlConnectResult;
@@ -55,7 +58,7 @@
     isTesting = false;
   }
 
-  async function handleSave(e) {
+  function getCurrentConnection() {
     const allProps = [
       'databaseFile',
       'useDatabaseUrl',
@@ -72,14 +75,65 @@
     const omitProps = _.difference(allProps, visibleProps);
     if (!$values.defaultDatabase) omitProps.push('singleDatabase');
 
-    let connection = _.omit(e.detail, omitProps);
+    let connection: Dictionary<string | boolean> = _.omit($values, omitProps);
     if (driver?.beforeConnectionSave) connection = driver?.beforeConnectionSave(connection);
 
-    apiCall('connections/save', connection);
-    closeCurrentModal();
+    if (!driver?.showConnectionTab('sshTunnel', $values)) {
+      if (!$values.useSshTunnel) {
+        connection = _.omitBy(connection, (v, k) => k.startsWith('ssh'));
+      }
+    } else {
+      connection = _.omit(connection, ['useSshTunnel']);
+      connection = _.omitBy(connection, (v, k) => k.startsWith('ssh'));
+    }
+
+    if (!driver?.showConnectionTab('ssl', $values)) {
+      if (!$values.useSsl) {
+        connection = _.omitBy(connection, (v, k) => k.startsWith('ssl'));
+      }
+    } else {
+      connection = _.omit(connection, ['useSsl']);
+      connection = _.omitBy(connection, (v, k) => k.startsWith('ssl'));
+    }
+
+    return connection;
   }
 
-  async function handleConnect() {}
+  async function handleSave() {
+    const connection = getCurrentConnection();
+    const saved = await apiCall('connections/save', connection);
+    $values = {
+      ...$values,
+      _id: saved._id,
+    };
+    changeTab(tabid, tab => ({
+      ...tab,
+      title: getConnectionLabel(saved),
+      props: {
+        ...tab.props,
+        conid: saved._id,
+      },
+    }));
+    showSnackbarSuccess('Connection saved');
+  }
+
+  async function handleConnect() {
+    let connection = getCurrentConnection();
+    if (!connection._id)
+      connection = {
+        ...connection,
+        unsaved: true,
+      };
+    await apiCall('connections/save', connection);
+    closeTabWithNoHistory(tabid);
+    openConnection(connection);
+  }
+
+  onMount(async () => {
+    if (conid) {
+      $values = await apiCall('connections/get', { conid });
+    }
+  });
 </script>
 
 <FormProviderCore template={FormFieldTemplateLarge} {values}>
@@ -93,11 +147,11 @@
           label: 'General',
           component: ConnectionModalDriverFields,
         },
-        (driver?.showConnectionTab('sshTunnel', $values)) && {
+        driver?.showConnectionTab('sshTunnel', $values) && {
           label: 'SSH Tunnel',
           component: ConnectionModalSshTunnelFields,
         },
-        (driver?.showConnectionTab('ssl', $values)) && {
+        driver?.showConnectionTab('ssl', $values) && {
           label: 'SSL',
           component: ConnectionModalSslFields,
         },
@@ -111,7 +165,7 @@
           {#if isTesting}
             <FormButton value="Cancel test" on:click={handleCancelTest} />
           {:else}
-          <FormButton value="Test" on:click={handleTest} />
+            <FormButton value="Test" on:click={handleTest} />
           {/if}
           <FormButton value="Save" on:click={handleSave} />
         </div>

packages/web/src/utility/openNewTab.ts

@@ -183,3 +183,14 @@ export function groupTabs(tabs: any[]) {
 
   return res;
 }
+
+export function closeTabWithNoHistory(tabid) {
+  openedTabs.update(tabs => {
+    const res = tabs.filter(x => x.tabid != tabid);
+    const selectedIndex = _.findLastIndex(res, x => x.closedTime == null);
+    return res.map((x, index) => ({
+      ...x,
+      selected: index == selectedIndex,
+    }));
+  });
+}