more flexible connection dialog, improved UX when connecting to redshift

packages/types/engines.d.ts

@@ -38,7 +38,10 @@ export interface EngineDriver {
   title: string;
   defaultPort?: number;
   supportsDatabaseUrl?: boolean;
-  isFileDatabase?: boolean;
+  isElectronOnly?: boolean;
+  showConnectionField?: (field: string, values: any) => boolean;
+  showConnectionTab?: (tab: 'ssl' | 'sshTunnel', values: any) => boolean;
+  beforeConnectionSave?: (values: any) => any;
   databaseUrlPlaceholder?: string;
   connect({ server, port, user, password, database }): any;
   query(pool: any, sql: string): Promise<QueryResult>;

packages/web/src/modals/ConnectionModal.svelte

@@ -51,19 +51,29 @@
   }
 
   async function handleSubmit(e) {
-    const connection = driver?.isFileDatabase
+    const allProps = [
-      ? {
+      'databaseFile',
-          ..._.omit(e.detail, ['server', 'port', 'defaultDatabase']),
+      'useDatabaseUrl',
-          singleDatabase: true,
+      'databaseUrl',
-          defaultDatabase: getDatabaseFileLabel(e.detail.databaseFile),
+      'authType',
-        }
+      'server',
-      : {
+      'port',
-          ..._.omit(e.detail, ['databaseFile']),
+      'user',
-          singleDatabase: e.detail.defaultDatabase ? e.detail.singleDatabase : false,
+      'password',
-        };
+      'defaultDatabase',
+      'singleDatabase',
+    ];
+    const visibleProps = allProps.filter(x => !driver?.showConnectionField || 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);
+
     axiosInstance.post('connections/save', connection);
     closeCurrentModal();
   }
+
 </script>
 
 <FormProviderCore template={FormFieldTemplateLarge} {values}>
@@ -77,11 +87,11 @@
           label: 'Main',
           component: ConnectionModalDriverFields,
         },
-        !driver?.isFileDatabase && {
+        (!driver?.showConnectionTab || driver?.showConnectionTab('sshTunnel', $values)) && {
           label: 'SSH Tunnel',
           component: ConnectionModalSshTunnelFields,
         },
-        !driver?.isFileDatabase && {
+        (!driver?.showConnectionTab || driver?.showConnectionTab('ssl', $values)) && {
           label: 'SSL',
           component: ConnectionModalSslFields,
         },
@@ -146,4 +156,5 @@
   .error-result {
     white-space: normal;
   }
+
 </style>

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -24,6 +24,7 @@
   $: disabledFields = (currentAuthType ? currentAuthType.disabledFields : null) || [];
   $: driver = $extensions.drivers.find(x => x.engine == engine);
   $: defaultDatabase = $values.defaultDatabase;
+
 </script>
 
 <FormSelectField
@@ -33,7 +34,7 @@
   options={[
     { label: '(select driver)', value: '' },
     ...$extensions.drivers
-      .filter(driver => !driver.isFileDatabase || electron)
+      .filter(driver => !driver.isElectronOnly || electron)
       .map(driver => ({
         value: driver.engine,
         label: driver.title,
@@ -41,44 +42,48 @@
   ]}
 />
 
-{#if driver?.isFileDatabase}
+{#if !driver?.showConnectionField || driver.showConnectionField('databaseFile', $values)}
   <FormElectronFileSelector label="Database file" name="databaseFile" disabled={!electron} />
-{:else}
+{/if}
-  {#if driver?.supportsDatabaseUrl}
+
-    <div class="radio">
+{#if !driver?.showConnectionField || driver.showConnectionField('useDatabaseUrl', $values)}
-      <FormRadioGroupField
+  <div class="radio">
-        name="useDatabaseUrl"
+    <FormRadioGroupField
-        options={[
+      name="useDatabaseUrl"
-          { label: 'Fill database connection details', value: '', default: true },
+      options={[
-          { label: 'Use database URL', value: '1' },
+        { label: 'Fill database connection details', value: '', default: true },
-        ]}
+        { label: 'Use database URL', value: '1' },
+      ]}
+    />
+  </div>
+{/if}
+
+{#if !driver?.showConnectionField || driver.showConnectionField('databaseUrl', $values)}
+  <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
+{/if}
+
+{#if $authTypes && (!driver?.showConnectionField || driver.showConnectionField('authType', $values))}
+  <FormSelectField
+    label="Authentication"
+    name="authType"
+    options={$authTypes.map(auth => ({
+      value: auth.name,
+      label: auth.title,
+    }))}
+  />
+{/if}
+
+{#if !driver?.showConnectionField || driver.showConnectionField('server', $values)}
+  <div class="row">
+    <div class="col-9 mr-1">
+      <FormTextField
+        label="Server"
+        name="server"
+        disabled={disabledFields.includes('server')}
+        templateProps={{ noMargin: true }}
       />
     </div>
-  {/if}
+    {#if !driver?.showConnectionField || driver.showConnectionField('port', $values)}
-
-  {#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"
@@ -88,17 +93,21 @@
           placeholder={driver && driver.defaultPort}
         />
       </div>
-    </div>
+    {/if}
+  </div>
+{/if}
 
-    <div class="row">
+{#if !driver?.showConnectionField || driver.showConnectionField('user', $values)}
-      <div class="col-6 mr-1">
+  <div class="row">
-        <FormTextField
+    <div class="col-6 mr-1">
-          label="User"
+      <FormTextField
-          name="user"
+        label="User"
-          disabled={disabledFields.includes('user')}
+        name="user"
-          templateProps={{ noMargin: true }}
+        disabled={disabledFields.includes('user')}
-        />
+        templateProps={{ noMargin: true }}
-      </div>
+      />
+    </div>
+    {#if !driver?.showConnectionField || driver.showConnectionField('password', $values)}
       <div class="col-6 mr-1">
         <FormPasswordField
           label="Password"
@@ -107,26 +116,28 @@
           templateProps={{ noMargin: true }}
         />
       </div>
-    </div>
-
-    {#if !disabledFields.includes('password')}
-      <FormSelectField
-        label="Password mode"
-        isNative
-        name="passwordMode"
-        options={[
-          { value: 'saveEncrypted', label: 'Save and encrypt' },
-          { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
-        ]}
-      />
     {/if}
-  {/if}
+  </div>
+{/if}
 
+{#if !disabledFields.includes('password') && (!driver?.showConnectionField || driver.showConnectionField('password', $values))}
+  <FormSelectField
+    label="Password mode"
+    isNative
+    name="passwordMode"
+    options={[
+      { value: 'saveEncrypted', label: 'Save and encrypt' },
+      { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+    ]}
+  />
+{/if}
+
+{#if !driver?.showConnectionField || driver.showConnectionField('defaultDatabase', $values)}
   <FormTextField label="Default database" name="defaultDatabase" />
+{/if}
 
-  {#if defaultDatabase}
+{#if defaultDatabase && (!driver?.showConnectionField || driver.showConnectionField('singleDatabase', $values))}
-    <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
+  <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
-  {/if}
 {/if}
 
 <FormTextField label="Display name" name="displayName" />
@@ -143,4 +154,5 @@
   .radio :global(label) {
     margin-right: 10px;
   }
+
 </style>

packages/web/src/utility/getConnectionLabel.ts

@@ -21,5 +21,9 @@ export default function getConnectionLabel(connection, { allowExplicitDatabase =
   if (connection.server) {
     return connection.server;
   }
+  if (connection.singleDatabase && connection.defaultDatabase) {
+    return `${connection.defaultDatabase}`;
+  }
+
   return '';
 }

plugins/dbgate-plugin-mongo/src/frontend/driver.js

@@ -34,6 +34,14 @@ const driver = {
   supportsDatabaseUrl: true,
   databaseUrlPlaceholder: 'e.g. mongodb://username:password@mongodb.mydomain.net/dbname',
 
+  showConnectionField: (field, values) => {
+    if (field == 'useDatabaseUrl') return true;
+    if (values.useDatabaseUrl) {
+      return ['databaseUrl', 'defaultDatabase', 'singleDatabase'].includes(field);
+    }
+    return ['server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field);
+  },
+
   getCollectionUpdateScript(changeSet) {
     let res = '';
     for (const insert of changeSet.inserts) {

plugins/dbgate-plugin-mssql/src/frontend/driver.js

@@ -32,6 +32,9 @@ const driver = {
     }
     return dialect;
   },
+  showConnectionField: (field, values) =>
+    ['authType', 'server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field),
+
   engine: 'mssql@dbgate-plugin-mssql',
   title: 'Microsoft SQL Server',
   defaultPort: 1433,

plugins/dbgate-plugin-mysql/src/frontend/drivers.js

@@ -14,24 +14,27 @@ const dialect = {
   },
 };
 
-/** @type {import('dbgate-types').EngineDriver} */
+const mysqlDriverBase = {
-const mysqlDriver = {
   ...driverBase,
+  showConnectionField: (field, values) =>
+    ['server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field),
   dumperClass: Dumper,
   dialect,
+  defaultPort: 3306,
+};
+
+/** @type {import('dbgate-types').EngineDriver} */
+const mysqlDriver = {
+  ...mysqlDriverBase,
   engine: 'mysql@dbgate-plugin-mysql',
   title: 'MySQL',
-  defaultPort: 3306,
 };
 
 /** @type {import('dbgate-types').EngineDriver} */
 const mariaDriver = {
-  ...driverBase,
+  ...mysqlDriverBase,
-  dumperClass: Dumper,
-  dialect,
   engine: 'mariadb@dbgate-plugin-mysql',
   title: 'MariaDB',
-  defaultPort: 3306,
 };
 
 module.exports = [mysqlDriver, mariaDriver];

plugins/dbgate-plugin-postgres/src/backend/drivers.js

@@ -97,16 +97,38 @@ const drivers = driverBases.map(driverBase => ({
   ...driverBase,
   analyserClass: Analyser,
 
-  async connect({ server, port, user, password, database, ssl }) {
+  async connect({ engine, server, port, user, password, database, databaseUrl, ssl }) {
-    const client = new pg.Client({
+    let options = null;
-      // connectionString: 'postgres://root@localhost:26257/postgres?sslmode=disabke'
+
-      host: server,
+    if (engine == 'redshift@dbgate-plugin-postgres') {
-      port,
+      let url = databaseUrl;
-      user,
+      if (url && url.startsWith('jdbc:redshift://')) {
-      password,
+        url = url.substring('jdbc:redshift://'.length);
-      database: database || 'postgres',
+      }
-      ssl,
+      if (user && password) {
-    });
+        url = `postgres://${user}:${password}@${url}`;
+      } else if (user) {
+        url = `postgres://${user}@${url}`;
+      } else {
+        url = `postgres://${url}`;
+      }
+
+      options = {
+        connectionString: url,
+      };
+    } else {
+      options = {
+        // connectionString: 'postgres://root@localhost:26257/postgres?sslmode=disabke'
+        host: server,
+        port,
+        user,
+        password,
+        database: database || 'postgres',
+        ssl,
+      };
+    }
+
+    const client = new pg.Client(options);
     await client.connect();
     return client;
   },

plugins/dbgate-plugin-postgres/src/frontend/drivers.js

@@ -15,11 +15,17 @@ const dialect = {
   stringAgg: true,
 };
 
-/** @type {import('dbgate-types').EngineDriver} */
+const postgresDriverBase = {
-const postgresDriver = {
   ...driverBase,
   dumperClass: Dumper,
   dialect,
+  showConnectionField: (field, values) =>
+    ['server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field),
+};
+
+/** @type {import('dbgate-types').EngineDriver} */
+const postgresDriver = {
+  ...postgresDriverBase,
   engine: 'postgres@dbgate-plugin-postgres',
   title: 'Postgre SQL',
   defaultPort: 5432,
@@ -27,9 +33,7 @@ const postgresDriver = {
 
 /** @type {import('dbgate-types').EngineDriver} */
 const cockroachDriver = {
-  ...driverBase,
+  ...postgresDriverBase,
-  dumperClass: Dumper,
-  dialect,
   engine: 'cockroach@dbgate-plugin-postgres',
   title: 'CockroachDB',
   defaultPort: 26257,
@@ -37,15 +41,30 @@ const cockroachDriver = {
 
 /** @type {import('dbgate-types').EngineDriver} */
 const redshiftDriver = {
-  ...driverBase,
+  ...postgresDriverBase,
-  dumperClass: Dumper,
   dialect: {
     ...dialect,
     stringAgg: false,
   },
-  engine: 'red@dbgate-plugin-postgres',
+  engine: 'redshift@dbgate-plugin-postgres',
   title: 'Amazon Redshift',
   defaultPort: 5439,
+  showConnectionField: (field, values) => ['databaseUrl', 'user', 'password'].includes(field),
+  beforeConnectionSave: connection => {
+    const { databaseUrl } = connection;
+    if (databaseUrl) {
+      const m = databaseUrl.match(/\/([^/]+)$/);
+      if (m) {
+        return {
+          ...connection,
+          singleDatabase: true,
+          defaultDatabase: m[1],
+          // displayName: connection.displayName || `${m[1]} on Amazon Redshift`,
+        };
+      }
+    }
+    return connection;
+  },
 };
 
 module.exports = [postgresDriver, cockroachDriver, redshiftDriver];

plugins/dbgate-plugin-sqlite/src/frontend/driver.js

@@ -1,6 +1,13 @@
 const { driverBase } = require('dbgate-tools');
 const Dumper = require('./Dumper');
 
+function getDatabaseFileLabel(databaseFile) {
+  if (!databaseFile) return databaseFile;
+  const m = databaseFile.match(/[\/]([^\/]+)$/);
+  if (m) return m[1];
+  return databaseFile;
+}
+
 /** @type {import('dbgate-types').SqlDialect} */
 const dialect = {
   limitSelect: true,
@@ -13,7 +20,6 @@ const dialect = {
   },
 };
 
-
 /** @type {import('dbgate-types').EngineDriver} */
 const driver = {
   ...driverBase,
@@ -21,7 +27,15 @@ const driver = {
   dialect,
   engine: 'sqlite@dbgate-plugin-sqlite',
   title: 'SQLite',
-  isFileDatabase: true,
+  showConnectionField: (field, values) => field == 'databaseFile',
+  showConnectionTab: (field) => false,
+  beforeConnectionSave: (connection) => ({
+    ...connection,
+    singleDatabase: true,
+    defaultDatabase: getDatabaseFileLabel(connection.databaseFile),
+  }),
+  // isFileDatabase: true,
+  isElectronOnly: true,
 };
 
 module.exports = driver;