connection tab

packages/api/src/controllers/plugins.js

@@ -162,6 +162,7 @@ module.exports = {
   authTypes_meta: true,
   async authTypes({ engine }) {
     const packageName = extractPackageName(engine);
+    if (!packageName) return null;
     const content = requirePlugin(packageName);
     const driver = content.drivers.find(x => x.engine == engine);
     if (!driver || !driver.getAuthTypes) return null;

packages/tools/src/driverBase.ts

@@ -111,4 +111,6 @@ export const driverBase = {
     dumpSqlSelect(dmp, select);
     return this.readQuery(pool, dmp.s, structure);
   },
+  showConnectionField: (field, values) => false,
+  showConnectionTab: (field) => true,
 };

packages/web/src/commands/stdCommands.ts

@@ -87,7 +87,13 @@ registerCommand({
   toolbarOrder: 1,
   name: 'Connection',
   testEnabled: () => !getCurrentConfig()?.runAsPortal,
-  onClick: () => showModal(ConnectionModal),
+  onClick: () => {
+    openNewTab({
+      title: 'New Connection',
+      icon: 'img connection',
+      tabComponent: 'ConnectionTab',
+    });
+  },
 });
 
 registerCommand({

packages/web/src/elements/TabControl.svelte

@@ -13,6 +13,8 @@
   export let value = 0;
   export let menu = null;
   export let isInline = false;
+  export let containerMaxWidth = undefined;
+  export let flex1 = true;
 
   export function setValue(index) {
     value = index;
@@ -22,7 +24,7 @@
   }
 </script>
 
-<div class="main">
+<div class="main" class:flex1>
   <div class="tabs">
     {#each _.compact(tabs) as tab, index}
       <div class="tab-item" class:selected={value == index} on:click={() => (value = index)}>
@@ -38,7 +40,7 @@
 
   <div class="content-container">
     {#each _.compact(tabs) as tab, index}
-      <div class="container" class:isInline class:tabVisible={index == value}>
+      <div class="container" class:isInline class:tabVisible={index == value} style:max-width={containerMaxWidth}>
         <svelte:component this={tab.component} {...tab.props} tabControlHiddenTab={index != value} />
         {#if tab.slot != null}
           {#if tab.slot == 0}<slot name="0" />
@@ -59,10 +61,13 @@
 <style>
   .main {
     display: flex;
-    flex: 1;
     flex-direction: column;
   }
 
+  .main.flex1 {
+    flex: 1;
+  }
+
   .tabs {
     display: flex;
     height: var(--dim-tabs-height);

packages/web/src/icons/FontIcon.svelte

@@ -141,6 +141,7 @@
     'img app': 'mdi mdi-layers-triple color-icon-magenta',
     'img app-command': 'mdi mdi-flash color-icon-green',
     'img app-query': 'mdi mdi-view-comfy color-icon-magenta',
+    'img connection': 'mdi mdi-connection color-icon-blue',
 
     'img add': 'mdi mdi-plus-circle color-icon-green',
     'img minus': 'mdi mdi-minus-circle color-icon-red',

packages/web/src/modals/ConnectionModal.svelte

@@ -30,7 +30,7 @@
   const values = writable(
     connection || {
       server: getCurrentConfig().isDocker ? 'dockerhost' : 'localhost',
-      engine: 'mssql@dbgate-plugin-mssql',
+      engine: '',
     }
   );
 
@@ -68,7 +68,7 @@
       'defaultDatabase',
       'singleDatabase',
     ];
-    const visibleProps = allProps.filter(x => !driver?.showConnectionField || driver.showConnectionField(x, $values));
+    const visibleProps = allProps.filter(x => driver?.showConnectionField(x, $values));
     const omitProps = _.difference(allProps, visibleProps);
     if (!$values.defaultDatabase) omitProps.push('singleDatabase');
 

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -28,8 +28,8 @@
   $: driver = $extensions.drivers.find(x => x.engine == engine);
   $: defaultDatabase = $values.defaultDatabase;
 
-  $: showUser = !driver?.showConnectionField || driver.showConnectionField('user', $values);
-  $: showPassword = !driver?.showConnectionField || driver.showConnectionField('password', $values);
+  $: showUser = driver?.showConnectionField('user', $values);
+  $: showPassword = driver?.showConnectionField('password', $values);
 </script>
 
 <FormSelectField
@@ -47,11 +47,11 @@
   ]}
 />
 
-{#if !driver?.showConnectionField || driver.showConnectionField('databaseFile', $values)}
+{#if driver?.showConnectionField('databaseFile', $values)}
   <FormElectronFileSelector label="Database file" name="databaseFile" disabled={!electron} />
 {/if}
 
-{#if !driver?.showConnectionField || driver.showConnectionField('useDatabaseUrl', $values)}
+{#if driver?.showConnectionField('useDatabaseUrl', $values)}
   <div class="radio">
     <FormRadioGroupField
       name="useDatabaseUrl"
@@ -63,11 +63,11 @@
   </div>
 {/if}
 
-{#if !driver?.showConnectionField || driver.showConnectionField('databaseUrl', $values)}
+{#if driver?.showConnectionField('databaseUrl', $values)}
   <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
 {/if}
 
-{#if $authTypes && (!driver?.showConnectionField || driver.showConnectionField('authType', $values))}
+{#if $authTypes && driver?.showConnectionField('authType', $values)}
   <FormSelectField
     label="Authentication"
     name="authType"
@@ -80,7 +80,7 @@
   />
 {/if}
 
-{#if !driver?.showConnectionField || driver.showConnectionField('server', $values)}
+{#if driver?.showConnectionField('server', $values)}
   <div class="row">
     <div class="col-9 mr-1">
       <FormTextField
@@ -90,7 +90,7 @@
         templateProps={{ noMargin: true }}
       />
     </div>
-    {#if !driver?.showConnectionField || driver.showConnectionField('port', $values)}
+    {#if driver?.showConnectionField('port', $values)}
       <div class="col-3 mr-1">
         <FormTextField
           label="Port"
@@ -154,32 +154,34 @@
   />
 {/if}
 
-{#if driver.showConnectionField('isReadOnly', $values)}
+{#if driver?.showConnectionField('isReadOnly', $values)}
   <FormCheckboxField label="Is read only" name="isReadOnly" />
 {/if}
 
-{#if !driver?.showConnectionField || driver.showConnectionField('defaultDatabase', $values)}
+{#if driver?.showConnectionField('defaultDatabase', $values)}
   <FormTextField label="Default database" name="defaultDatabase" />
 {/if}
 
-{#if defaultDatabase && (!driver?.showConnectionField || driver.showConnectionField('singleDatabase', $values))}
+{#if defaultDatabase && driver?.showConnectionField('singleDatabase', $values)}
   <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
 {/if}
 
-<div class="row">
-  <div class="col-6 mr-1">
-    <FormTextField label="Display name" name="displayName" templateProps={{ noMargin: true }} />
+{#if driver}
+  <div class="row">
+    <div class="col-6 mr-1">
+      <FormTextField label="Display name" name="displayName" templateProps={{ noMargin: true }} />
+    </div>
+    <div class="col-6 mr-1">
+      <FormColorField
+        useSelector
+        label="Color"
+        name="connectionColor"
+        emptyLabel="(not selected)"
+        templateProps={{ noMargin: true }}
+      />
+    </div>
   </div>
-  <div class="col-6 mr-1">
-    <FormColorField
-      useSelector
-      label="Color"
-      name="connectionColor"
-      emptyLabel="(not selected)"
-      templateProps={{ noMargin: true }}
-    />
-  </div>
-</div>
+{/if}
 
 <style>
   .row {

packages/web/src/tabs/ConnectionTab.svelte

@@ -0,0 +1,175 @@
+<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';
+  import ConnectionModalSshTunnelFields from '../modals/ConnectionModalSshTunnelFields.svelte';
+  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 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 { apiCall } from '../utility/api';
+
+  export let connection;
+
+  let isTesting;
+  let sqlConnectResult;
+
+  const values = writable(
+    connection || {
+      server: getCurrentConfig().isDocker ? 'dockerhost' : 'localhost',
+      engine: '',
+    }
+  );
+
+  $: engine = $values.engine;
+  $: driver = $extensions.drivers.find(x => x.engine == engine);
+
+  const testIdRef = createRef(0);
+
+  async function handleTest(e) {
+    isTesting = true;
+    testIdRef.update(x => x + 1);
+    const testid = testIdRef.get();
+    const resp = await apiCall('connections/test', e.detail);
+    if (testIdRef.get() != testid) return;
+
+    isTesting = false;
+    sqlConnectResult = resp;
+  }
+
+  function handleCancelTest() {
+    testIdRef.update(x => x + 1); // invalidate current test
+    isTesting = false;
+  }
+
+  async function handleSave(e) {
+    const allProps = [
+      'databaseFile',
+      'useDatabaseUrl',
+      'databaseUrl',
+      'authType',
+      'server',
+      'port',
+      'user',
+      'password',
+      'defaultDatabase',
+      'singleDatabase',
+    ];
+    const visibleProps = allProps.filter(x => driver?.showConnectionField(x, $values));
+    const omitProps = _.difference(allProps, visibleProps);
+    if (!$values.defaultDatabase) omitProps.push('singleDatabase');
+
+    let connection = _.omit(e.detail, omitProps);
+    if (driver?.beforeConnectionSave) connection = driver?.beforeConnectionSave(connection);
+
+    apiCall('connections/save', connection);
+    closeCurrentModal();
+  }
+
+  async function handleConnect() {}
+</script>
+
+<FormProviderCore template={FormFieldTemplateLarge} {values}>
+  <div class="wrapper">
+    <TabControl
+      isInline
+      containerMaxWidth="800px"
+      flex1={false}
+      tabs={[
+        {
+          label: 'General',
+          component: ConnectionModalDriverFields,
+        },
+        (driver?.showConnectionTab('sshTunnel', $values)) && {
+          label: 'SSH Tunnel',
+          component: ConnectionModalSshTunnelFields,
+        },
+        (driver?.showConnectionTab('ssl', $values)) && {
+          label: 'SSL',
+          component: ConnectionModalSslFields,
+        },
+      ]}
+    />
+
+    {#if driver}
+      <div class="flex">
+        <div class="buttons">
+          <FormButton value="Connect" on:click={handleConnect} />
+          {#if isTesting}
+            <FormButton value="Cancel test" on:click={handleCancelTest} />
+          {:else}
+          <FormButton value="Test" on:click={handleTest} />
+          {/if}
+          <FormButton value="Save" on:click={handleSave} />
+        </div>
+        <div class="test-result">
+          {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected'}
+            <div>
+              Connected: <FontIcon icon="img ok" />
+              {sqlConnectResult.version}
+            </div>
+          {/if}
+          {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
+            <div class="error-result">
+              Connect failed: <FontIcon icon="img error" />
+              {sqlConnectResult.error}
+              <Link
+                onClick={() =>
+                  showModal(ErrorMessageModal, {
+                    message: sqlConnectResult.detail,
+                    showAsCode: true,
+                    title: 'Database connection error',
+                  })}
+              >
+                Show detail
+              </Link>
+            </div>
+          {/if}
+          {#if isTesting}
+            <div>
+              <FontIcon icon="icon loading" /> Testing connection
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+</FormProviderCore>
+
+<style>
+  .wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .buttons {
+    flex-shrink: 0;
+    margin: var(--dim-large-form-margin);
+  }
+
+  .test-result {
+    margin-left: 10px;
+    align-self: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .error-result {
+    white-space: normal;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -23,6 +23,7 @@ import * as ChangelogTab from './ChangelogTab.svelte';
 import * as DiagramTab from './DiagramTab.svelte';
 import * as DbKeyDetailTab from './DbKeyDetailTab.svelte';
 import * as QueryDataTab from './QueryDataTab.svelte';
+import * as ConnectionTab from './ConnectionTab.svelte';
 
 export default {
   TableDataTab,
@@ -50,4 +51,5 @@ export default {
   DiagramTab,
   DbKeyDetailTab,
   QueryDataTab,
+  ConnectionTab,
 };