feat(PostgreSQL): ✨ Postgress connection string feature for local and server connection string

This feature is based on this [issue](https://github.com/Fabio286/antares/issues/193)  I tested with the following posgress connection strings postgresql://postgres:pgpassword@127.0.0.1:5432/my_local_databse?connection=local postgres://serveruser:serverpass@test.db.elephantsql.com/my_remote_databse?connection=server  postgres://serveruser:serverpass@test.db.elephantsql.com:5432/my_remote_databse postgresql://postgres:pgpassword@127.0.0.1:5432/my_local_databse.

The connection string decoder is loaded before "test-connection", "check-connection", and "connect"

package.json

@@ -109,7 +109,7 @@
     "@turf/helpers": "^6.5.0",
     "@vscode/vscode-languagedetection": "^1.0.21",
     "ace-builds": "^1.4.13",
-    "better-sqlite3": "^7.4.4",
+    "better-sqlite3": "^7.5.0",
     "electron-log": "^4.4.1",
     "electron-store": "^8.0.1",
     "electron-updater": "^4.6.1",
@@ -142,6 +142,7 @@
     "electron": "^17.0.1",
     "electron-builder": "^22.14.11",
     "electron-devtools-installer": "^3.2.0",
+    "electron-rebuild": "^3.2.7",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.24.2",

src/renderer/components/BaseMap.vue

@@ -93,16 +93,16 @@ export default {
 </script>
 
 <style lang="scss">
-.map{
+.map {
-   height: 400px;
+  height: 400px;
 }
 
-.marker-icon{
+.marker-icon {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    background: $primary-color;
+  background: $primary-color;
-    border-radius: 50%;
+  border-radius: 50%;
-    box-shadow: 0 0 5px 1px darken($body-font-color-dark, 40%);
+  box-shadow: 0 0 5px 1px darken($body-font-color-dark, 40%);
 }
 </style>

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -45,6 +45,19 @@
                            >
                         </div>
                      </div>
+                     <div v-if="connection.client === 'pg'" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionString') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="pgString"
+                              v-model="connection.pgConnString"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
                      <div class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.client') }}</label>
@@ -412,7 +425,8 @@ export default {
             sshUser: '',
             sshPass: '',
             sshKey: '',
-            sshPort: 22
+            sshPort: 22,
+            pgConnString: ''
          },
          isConnecting: false,
          isTesting: false,

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -45,6 +45,19 @@
                            >
                         </div>
                      </div>
+                     <div v-if="connection.client === 'pg'" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionString') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="pgString"
+                              v-model="localConnection.pgConnString"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
                      <div class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.client') }}</label>

src/renderer/i18n/en-US.js

@@ -126,7 +126,8 @@ module.exports = {
       enable: 'Enable',
       disable: 'Disable',
       commit: 'Commit',
-      rollback: 'Rollback'
+      rollback: 'Rollback',
+      connectionString: 'Conn String'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',

src/renderer/ipc-api/Connection.js

@@ -1,20 +1,25 @@
 'use strict';
 import { ipcRenderer } from 'electron';
 
+import connStringConstruct from '../libs/connStringDecode';
+
 export default class {
-   static makeTest (params) {
+   static makeTest(params) {
+      params = connStringConstruct(params);
       return ipcRenderer.invoke('test-connection', params);
    }
 
-   static checkConnection (params) {
+   static checkConnection(params) {
+      params = connStringConstruct(params);
       return ipcRenderer.invoke('check-connection', params);
    }
 
-   static connect (params) {
+   static connect(params) {
+      params = connStringConstruct(params);
       return ipcRenderer.invoke('connect', params);
    }
 
-   static disconnect (uid) {
+   static disconnect(uid) {
       return ipcRenderer.invoke('disconnect', uid);
    }
 }

src/renderer/libs/connStringDecode.js

@@ -0,0 +1,112 @@
+
+const getUrlScheme = pgString => {
+   const scheme = pgString ? pgString.split('://')[0] : '';
+
+   return scheme === 'postgresql' ? 'postgres' : scheme;
+};
+
+const passAndHost = part => {
+   const host = part.split('@')[1] === 'localhost' ? '127.0.0.1' : part.split('@')[1];
+   return [part.split('@')[0], host];
+};
+
+const portAndDb = part => {
+   return part.split('/');
+};
+
+const pass = (part) => {
+   return part.split('@');
+};
+
+const hostAndDb = (part) => {
+   return part.split('/');
+};
+
+const localConnectionString = (stringArgs, args) => {
+   let scheme = '';
+   if (getUrlScheme(stringArgs) === 'postgres' || getUrlScheme(stringArgs) === 'postgresql')
+      scheme = 'pg';
+
+   const values = stringArgs.split('://')[1];
+   const parts = values.split(':');
+
+   const userName = parts[0];
+
+   const password = passAndHost(parts[1])[0];
+   const host = passAndHost(parts[1])[1];
+
+   const port = portAndDb(parts[2])[0];
+   const dbName = portAndDb(parts[2])[1];
+
+   const client = args.client ? args.client : scheme;
+
+   args.client = client;
+   args.host = host;
+   args.database = dbName;
+   args.port = port;
+   args.user = userName;
+   args.password = password;
+
+   return args;
+};
+
+const onlineConnectionString = (stringArgs, args) => {
+   let scheme = '';
+   const defaultPort = '5432';
+   if (getUrlScheme(stringArgs) === 'postgres' || getUrlScheme(stringArgs) === 'postgresql')
+      scheme = 'pg';
+
+   const values = stringArgs.split('://')[1];
+   const parts = values.split(':');
+
+   const userName = parts[0];
+
+   const password = pass(parts[1])[0];
+
+   const host = hostAndDb(pass(parts[1])[1])[0];
+   const dbName = hostAndDb(pass(parts[1])[1])[1];
+
+   const port = defaultPort;
+
+   console.log(userName, password, host, dbName, port);
+
+   const client = args.client ? args.client : scheme;
+
+   args.client = client;
+   args.host = host;
+   args.database = dbName;
+   args.port = port;
+   args.user = userName;
+   args.password = password;
+
+   return args;
+};
+
+const connectionType = part => {
+   return part.split('=')[1];
+};
+
+const connStringConstruct = args => {
+   if (!args.pgConnString)
+      return args;
+
+   const pgConnString = args.pgConnString;
+
+   if (!pgConnString.includes('?'))
+      return localConnectionString(pgConnString, args);
+
+   const pgConnStringPrepared = pgConnString.split('?')[0];
+
+   switch (connectionType(pgConnString.split('?')[1])) {
+      case 'local':
+         return localConnectionString(pgConnStringPrepared, args);
+
+      case 'server':
+         return onlineConnectionString(pgConnStringPrepared, args);
+
+      default:
+         return args;
+   };
+};
+
+export default connStringConstruct;