custom DB URI support (used by Mongo)

packages/api/src/utility/connectUtility.js

@@ -38,6 +38,10 @@ async function connectUtility(driver, storedConnection) {
       connection.ssl.key = await fs.readFile(connection.sslKeyFile);
     }
 
+    if (connection.sslCertFilePassword) {
+      connection.ssl.password = connection.sslCertFilePassword;
+    }
+
     if (!connection.ssl.key && !connection.ssl.ca && !connection.ssl.cert) {
       // TODO: provide this as an option in settings
       // or per-connection as 'reject self-signed certs'

packages/types/engines.d.ts

@@ -37,6 +37,8 @@ export interface EngineDriver {
   engine: string;
   title: string;
   defaultPort?: number;
+  supportsDatabaseUrl?: boolean;
+  databaseUrlPlaceholder?: string;
   connect({ server, port, user, password, database }): any;
   query(pool: any, sql: string): Promise<QueryResult>;
   stream(pool: any, sql: string, options: StreamOptions);

packages/web/src/forms/FormRadioGroupField.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import uuidv1 from 'uuid/v1';
+
+  export let options = [];
+  export let name;
+
+  const { values, setFieldValue } = getFormContext();
+
+  let group = $values[name] ?? options.find(x => x.default)?.value;
+
+  $: setFieldValue(name, group);
+
+  $: optionsWithId = options.map(x => ({ ...x, id: uuidv1() }));
+</script>
+
+{#each optionsWithId as option}
+  <div>
+    <input type="radio" bind:group value={option.value} id={option.id} />
+    <label for={option.id}>{option.label}</label>
+  </div>
+{/each}

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,7 +31,26 @@
   ]}
 />
 
-{#if $authTypes}
+{#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}
+
+{#if driver?.supportsDatabaseUrl && useDatabaseUrl}
+  <FormTextField
+    label="Database URL"
+    name="databaseUrl"
+    placeholder={driver?.databaseUrlPlaceholder}
+  />
+{:else}
+  {#if $authTypes}
     <FormSelectField
       label="Authentication"
       name="authType"
@@ -38,9 +59,9 @@
         label: auth.title,
       }))}
     />
-{/if}
+  {/if}
 
-<div class="row">
+  <div class="row">
     <div class="col-9 mr-1">
       <FormTextField
         label="Server"
@@ -58,9 +79,9 @@
         placeholder={driver && driver.defaultPort}
       />
     </div>
-</div>
+  </div>
 
-<div class="row">
+  <div class="row">
     <div class="col-6 mr-1">
       <FormTextField
         label="User"
@@ -77,9 +98,9 @@
         templateProps={{ noMargin: true }}
       />
     </div>
-</div>
+  </div>
 
-{#if !disabledFields.includes('password')}
+  {#if !disabledFields.includes('password')}
     <FormSelectField
       label="Password mode"
       name="passwordMode"
@@ -88,6 +109,7 @@
         { 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} />