custom DB URI support (used by Mongo)

packages/web/src/modals/ConnectionModal.svelte

@@ -86,7 +86,7 @@
           </div>
         {/if}
         {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
-          <div>
+          <div class="error-result">
             Connect failed: <FontIcon icon="img error" />
             {sqlConnectResult.error}
           </div>
@@ -113,4 +113,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .error-result {
+    white-space: normal;
+  }
 </style>

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -2,6 +2,7 @@
   import FormPasswordField from '../forms/FormPasswordField.svelte';
 
   import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import FormRadioGroupField from '../forms/FormRadioGroupField.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
 
   import FormTextField from '../forms/FormTextField.svelte';
@@ -11,6 +12,7 @@
   const { values } = getFormContext();
   $: authType = $values.authType;
   $: engine = $values.engine;
+  $: useDatabaseUrl = $values.useDatabaseUrl;
   $: authTypes = useAuthTypes({ engine });
   $: currentAuthType = $authTypes && $authTypes.find(x => x.name == authType);
   $: disabledFields = (currentAuthType ? currentAuthType.disabledFields : null) || [];
@@ -29,65 +31,85 @@
   ]}
 />
 
-{#if $authTypes}
-  <FormSelectField
-    label="Authentication"
-    name="authType"
-    options={$authTypes.map(auth => ({
-      value: auth.name,
-      label: auth.title,
-    }))}
-  />
+{#if driver?.supportsDatabaseUrl}
+  <div class="radio">
+    <FormRadioGroupField
+      name="useDatabaseUrl"
+      options={[
+        { label: 'Fill database connection details', value: '', default: true },
+        { label: 'Use database URL', value: '1' },
+      ]}
+    />
+  </div>
 {/if}
 
-<div class="row">
-  <div class="col-9 mr-1">
-    <FormTextField
-      label="Server"
-      name="server"
-      disabled={disabledFields.includes('server')}
-      templateProps={{ noMargin: true }}
-    />
-  </div>
-  <div class="col-3 mr-1">
-    <FormTextField
-      label="Port"
-      name="port"
-      disabled={disabledFields.includes('port')}
-      templateProps={{ noMargin: true }}
-      placeholder={driver && driver.defaultPort}
-    />
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-6 mr-1">
-    <FormTextField
-      label="User"
-      name="user"
-      disabled={disabledFields.includes('user')}
-      templateProps={{ noMargin: true }}
-    />
-  </div>
-  <div class="col-6 mr-1">
-    <FormPasswordField
-      label="Password"
-      name="password"
-      disabled={disabledFields.includes('password')}
-      templateProps={{ noMargin: true }}
-    />
-  </div>
-</div>
-
-{#if !disabledFields.includes('password')}
-  <FormSelectField
-    label="Password mode"
-    name="passwordMode"
-    options={[
-      { value: 'saveEncrypted', label: 'Save and encrypt' },
-      { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
-    ]}
+{#if driver?.supportsDatabaseUrl && useDatabaseUrl}
+  <FormTextField
+    label="Database URL"
+    name="databaseUrl"
+    placeholder={driver?.databaseUrlPlaceholder}
   />
+{:else}
+  {#if $authTypes}
+    <FormSelectField
+      label="Authentication"
+      name="authType"
+      options={$authTypes.map(auth => ({
+        value: auth.name,
+        label: auth.title,
+      }))}
+    />
+  {/if}
+
+  <div class="row">
+    <div class="col-9 mr-1">
+      <FormTextField
+        label="Server"
+        name="server"
+        disabled={disabledFields.includes('server')}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+    <div class="col-3 mr-1">
+      <FormTextField
+        label="Port"
+        name="port"
+        disabled={disabledFields.includes('port')}
+        templateProps={{ noMargin: true }}
+        placeholder={driver && driver.defaultPort}
+      />
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-6 mr-1">
+      <FormTextField
+        label="User"
+        name="user"
+        disabled={disabledFields.includes('user')}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+    <div class="col-6 mr-1">
+      <FormPasswordField
+        label="Password"
+        name="password"
+        disabled={disabledFields.includes('password')}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+  </div>
+
+  {#if !disabledFields.includes('password')}
+    <FormSelectField
+      label="Password mode"
+      name="passwordMode"
+      options={[
+        { value: 'saveEncrypted', label: 'Save and encrypt' },
+        { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+      ]}
+    />
+  {/if}
 {/if}
 
 <FormTextField label="Display name" name="displayName" />
@@ -97,4 +119,11 @@
     margin: var(--dim-large-form-margin);
     display: flex;
   }
+  .radio {
+    margin-left: var(--dim-large-form-margin);
+    display: flex;
+  }
+  .radio :global(label) {
+    margin-right: 10px;
+  }
 </style>

packages/web/src/modals/ConnectionModalSslFields.svelte

@@ -5,6 +5,7 @@
 
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import getElectron from '../utility/getElectron';
+  import FormPasswordField from '../forms/FormPasswordField.svelte';
 
   const { values, setFieldValue } = getFormContext();
   const electron = getElectron();
@@ -15,5 +16,10 @@
 <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} />
+<FormPasswordField
+  label="Certificate key file password (optional)"
+  name="sslCertFilePassword"
+  disabled={!useSsl || !electron}
+/>
 <FormElectronFileSelector label="Key file (optional)" name="sslKeyFile" disabled={!useSsl || !electron} />
 <FormCheckboxField label="Reject unauthorized" name="sslRejectUnauthorized" disabled={!useSsl} />