connection tabs - improved UX

2026-04-19 10:46:00 +00:00 · 2022-06-09 09:16:40 +02:00
parent 6f3076fddb
commit b54026b039
9 changed files with 183 additions and 72 deletions
--- a/packages/web/src/settings/ConnectionDriverFields.svelte
+++ b/packages/web/src/settings/ConnectionDriverFields.svelte
@@ -10,7 +10,7 @@
  import FormSelectField from '../forms/FormSelectField.svelte';

  import FormTextField from '../forms/FormTextField.svelte';
-  import { extensions, getCurrentConfig } from '../stores';
+  import { extensions, getCurrentConfig, openedConnections, openedSingleDatabaseConnections } from '../stores';
  import getElectron from '../utility/getElectron';
  import { useAuthTypes } from '../utility/metadataLoaders';
  import FormColorField from '../forms/FormColorField.svelte';
@@ -30,12 +30,14 @@

  $: showUser = driver?.showConnectionField('user', $values);
  $: showPassword = driver?.showConnectionField('password', $values);
+  $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>

 <FormSelectField
  label="Database engine"
  name="engine"
  isNative
+  disabled={isConnected}
  options={[
    { label: '(select driver)', value: '' },
    ...$extensions.drivers
@@ -48,12 +50,13 @@
 />

 {#if driver?.showConnectionField('databaseFile', $values)}
-  <FormElectronFileSelector label="Database file" name="databaseFile" disabled={!electron} />
+  <FormElectronFileSelector label="Database file" name="databaseFile" disabled={isConnected || !electron} />
 {/if}

 {#if driver?.showConnectionField('useDatabaseUrl', $values)}
  <div class="radio">
    <FormRadioGroupField
+      disabled={isConnected}
      name="useDatabaseUrl"
      options={[
        { label: 'Fill database connection details', value: '', default: true },
@@ -64,7 +67,12 @@
 {/if}

 {#if driver?.showConnectionField('databaseUrl', $values)}
-  <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
+  <FormTextField
+    label="Database URL"
+    name="databaseUrl"
+    placeholder={driver?.databaseUrlPlaceholder}
+    disabled={isConnected}
+  />
 {/if}

 {#if $authTypes && driver?.showConnectionField('authType', $values)}
@@ -72,6 +80,7 @@
    label="Authentication"
    name="authType"
    isNative
+    disabled={isConnected}
    defaultValue={driver?.defaultAuthTypeName}
    options={$authTypes.map(auth => ({
      value: auth.name,
@@ -86,7 +95,7 @@
      <FormTextField
        label="Server"
        name="server"
-        disabled={disabledFields.includes('server')}
+        disabled={isConnected || disabledFields.includes('server')}
        templateProps={{ noMargin: true }}
      />
    </div>
@@ -95,7 +104,7 @@
        <FormTextField
          label="Port"
          name="port"
-          disabled={disabledFields.includes('port')}
+          disabled={isConnected || disabledFields.includes('port')}
          templateProps={{ noMargin: true }}
          placeholder={driver && driver.defaultPort}
        />
@@ -117,7 +126,7 @@
        <FormTextField
          label="User"
          name="user"
-          disabled={disabledFields.includes('user')}
+          disabled={isConnected || disabledFields.includes('user')}
          templateProps={{ noMargin: true }}
        />
      </div>
@@ -127,7 +136,7 @@
        <FormPasswordField
          label="Password"
          name="password"
-          disabled={disabledFields.includes('password')}
+          disabled={isConnected || disabledFields.includes('password')}
          templateProps={{ noMargin: true }}
        />
      </div>
@@ -135,10 +144,10 @@
  </div>
 {/if}
 {#if showUser && !showPassword}
-  <FormTextField label="User" name="user" disabled={disabledFields.includes('user')} />
+  <FormTextField label="User" name="user" disabled={isConnected || disabledFields.includes('user')} />
 {/if}
 {#if !showUser && showPassword}
-  <FormPasswordField label="Password" name="password" disabled={disabledFields.includes('password')} />
+  <FormPasswordField label="Password" name="password" disabled={isConnected || disabledFields.includes('password')} />
 {/if}

 {#if !disabledFields.includes('password') && showPassword}
@@ -147,6 +156,7 @@
    isNative
    name="passwordMode"
    defaultValue="saveEncrypted"
+    disabled={isConnected}
    options={[
      { value: 'saveEncrypted', label: 'Save and encrypt' },
      { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
@@ -155,21 +165,26 @@
 {/if}

 {#if driver?.showConnectionField('isReadOnly', $values)}
-  <FormCheckboxField label="Is read only" name="isReadOnly" />
+  <FormCheckboxField label="Is read only" name="isReadOnly" disabled={isConnected} />
 {/if}

 {#if driver?.showConnectionField('defaultDatabase', $values)}
-  <FormTextField label="Default database" name="defaultDatabase" />
+  <FormTextField label="Default database" name="defaultDatabase" disabled={isConnected} />
 {/if}

 {#if defaultDatabase && driver?.showConnectionField('singleDatabase', $values)}
-  <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
+  <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" disabled={isConnected} />
 {/if}

 {#if driver}
  <div class="row">
    <div class="col-6 mr-1">
-      <FormTextField label="Display name" name="displayName" templateProps={{ noMargin: true }} />
+      <FormTextField
+        label="Display name"
+        name="displayName"
+        templateProps={{ noMargin: true }}
+        disabled={isConnected}
+      />
    </div>
    <div class="col-6 mr-1">
      <FormColorField
@@ -178,6 +193,7 @@
        name="connectionColor"
        emptyLabel="(not selected)"
        templateProps={{ noMargin: true }}
+        disabled={isConnected}
      />
    </div>
  </div>
--- a/packages/web/src/settings/ConnectionSshTunnelFields.svelte
+++ b/packages/web/src/settings/ConnectionSshTunnelFields.svelte
@@ -11,7 +11,7 @@
  import getElectron from '../utility/getElectron';
  import { usePlatformInfo } from '../utility/metadataLoaders';
  import FontIcon from '../icons/FontIcon.svelte';
-  import { extensions } from '../stores';
+  import { extensions, openedConnections, openedSingleDatabaseConnections } from '../stores';

  const { values, setFieldValue } = getFormContext();
  const electron = getElectron();
@@ -24,31 +24,38 @@
    // if (!$values.sshPort) setFieldValue('sshPort', '22');
    if (!$values.sshKeyfile && $platformInfo) setFieldValue('sshKeyfile', $platformInfo.defaultKeyfile);
  }
+
+  $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>

-<FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" />
+<FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" disabled={isConnected} />

 <div class="row">
  <div class="col-9 mr-1">
-    <FormTextField label="Host" name="sshHost" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+    <FormTextField
+      label="Host"
+      name="sshHost"
+      disabled={isConnected || !useSshTunnel}
+      templateProps={{ noMargin: true }}
+    />
  </div>
  <div class="col-3">
    <FormTextField
      label="Port"
      name="sshPort"
-      disabled={!useSshTunnel}
+      disabled={isConnected || !useSshTunnel}
      templateProps={{ noMargin: true }}
      placeholder="22"
    />
  </div>
 </div>
-<FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={!useSshTunnel} />
+<FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={isConnected || !useSshTunnel} />

 <FormSelectField
  label="SSH Authentication"
  name="sshMode"
  isNative
-  disabled={!useSshTunnel}
+  disabled={isConnected || !useSshTunnel}
  options={[
    { value: 'userPassword', label: 'Username & password' },
    { value: 'agent', label: 'SSH agent' },
@@ -57,19 +64,24 @@
 />

 {#if $values.sshMode != 'userPassword'}
-  <FormTextField label="Login" name="sshLogin" disabled={!useSshTunnel} />
+  <FormTextField label="Login" name="sshLogin" disabled={isConnected || !useSshTunnel} />
 {/if}

 {#if $values.sshMode == 'userPassword'}
  <div class="row">
    <div class="col-6 mr-1">
-      <FormTextField label="Login" name="sshLogin" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+      <FormTextField
+        label="Login"
+        name="sshLogin"
+        disabled={isConnected || !useSshTunnel}
+        templateProps={{ noMargin: true }}
+      />
    </div>
    <div class="col-6">
      <FormPasswordField
        label="Password"
        name="sshPassword"
-        disabled={!useSshTunnel}
+        disabled={isConnected || !useSshTunnel}
        templateProps={{ noMargin: true }}
      />
    </div>
@@ -82,7 +94,7 @@
      <FormElectronFileSelector
        label="Private key file"
        name="sshKeyfile"
-        disabled={!useSshTunnel}
+        disabled={isConnected || !useSshTunnel}
        templateProps={{ noMargin: true }}
      />
    </div>
@@ -90,7 +102,7 @@
      <FormPasswordField
        label="Key file passphrase"
        name="sshKeyfilePassword"
-        disabled={!useSshTunnel}
+        disabled={isConnected || !useSshTunnel}
        templateProps={{ noMargin: true }}
      />
    </div>
--- a/packages/web/src/settings/ConnectionSslFields.svelte
+++ b/packages/web/src/settings/ConnectionSslFields.svelte
@@ -6,20 +6,30 @@
  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
  import getElectron from '../utility/getElectron';
  import FormPasswordField from '../forms/FormPasswordField.svelte';
+  import { openedConnections, openedSingleDatabaseConnections } from '../stores';

  const { values, setFieldValue } = getFormContext();
  const electron = getElectron();

  $: useSsl = $values.useSsl;
+  $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>

-<FormCheckboxField label="Use SSL" name="useSsl" />
-<FormElectronFileSelector label="CA Cert (optional)" name="sslCaFile" disabled={!useSsl || !electron} />
-<FormElectronFileSelector label="Certificate (optional)" name="sslCertFile" disabled={!useSsl || !electron} />
+<FormCheckboxField label="Use SSL" name="useSsl" disabled={isConnected} />
+<FormElectronFileSelector label="CA Cert (optional)" name="sslCaFile" disabled={isConnected || !useSsl || !electron} />
+<FormElectronFileSelector
+  label="Certificate (optional)"
+  name="sslCertFile"
+  disabled={isConnected || !useSsl || !electron}
+/>
 <FormPasswordField
  label="Certificate key file password (optional)"
  name="sslCertFilePassword"
-  disabled={!useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron}
 />
-<FormElectronFileSelector label="Key file (optional)" name="sslKeyFile" disabled={!useSsl || !electron} />
-<FormCheckboxField label="Reject unauthorized" name="sslRejectUnauthorized" disabled={!useSsl} />
+<FormElectronFileSelector
+  label="Key file (optional)"
+  name="sslKeyFile"
+  disabled={isConnected || !useSsl || !electron}
+/>
+<FormCheckboxField label="Reject unauthorized" name="sslRejectUnauthorized" disabled={isConnected || !useSsl} />