From 9af71a6e343deda1bf79d8410511cf861af3c304 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 15:06:20 +0200
Subject: [PATCH 1/6] feat(UI): new connection edit panel

---
 src/renderer/components/ModalSettings.vue     |   2 +-
 src/renderer/components/SettingBarContext.vue |  17 -
 src/renderer/components/Workspace.vue         |   9 +-
 .../WorkspaceEditConnectionPanel.vue          | 491 ++++++++++++++++++
 .../components/WorkspaceExploreBarSchema.vue  |   1 -
 .../{ => old}/ModalEditConnection.vue         |   0
 6 files changed, 500 insertions(+), 20 deletions(-)
 create mode 100644 src/renderer/components/WorkspaceEditConnectionPanel.vue
 rename src/renderer/components/{ => old}/ModalEditConnection.vue (100%)

diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 4373d145..e7f57fb4 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -60,7 +60,7 @@
                            {{ $t('word.application') }}
                         </div>
                         <div class="column col-8 col-sm-12 mb-2">
-                           <div class="form-group mb-4">
+                           <div class="form-group">
                               <div class="col-6 col-sm-12">
                                  <label class="form-label">
                                     <i class="mdi mdi-18px mdi-translate mr-1" />
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index 542b1c96..c709beaa 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -3,18 +3,10 @@
       :context-event="contextEvent"
       @close-context="$emit('close-context')"
    >
-      <div class="context-element" @click="showEditModal(contextConnection)">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
-      </div>
       <div class="context-element" @click="showConfirmModal">
          <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
       </div>
 
-      <ModalEditConnection
-         v-if="isEditModal"
-         :connection="contextConnection"
-         @close="hideEditModal"
-      />
       <ConfirmModal
          v-if="isConfirmModal"
          @confirm="confirmDeleteConnection"
@@ -38,13 +30,11 @@
 import { mapActions, mapGetters } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
-import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'SettingBarContext',
    components: {
       BaseContextMenu,
-      ModalEditConnection,
       ConfirmModal
    },
    props: {
@@ -73,13 +63,6 @@ export default {
          this.deleteConnection(this.contextConnection);
          this.closeContext();
       },
-      showEditModal () {
-         this.isEditModal = true;
-      },
-      hideEditModal () {
-         this.isEditModal = false;
-         this.closeContext();
-      },
       showConfirmModal () {
          this.isConfirmModal = true;
       },
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index e8e53c93..626ce6d0 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -1,6 +1,10 @@
 <template>
    <div v-show="isSelected" class="workspace column columns col-gapless">
-      <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
+      <WorkspaceExploreBar
+         v-if="workspace.connection_status === 'connected'"
+         :connection="connection"
+         :is-selected="isSelected"
+      />
       <div v-if="workspace.connection_status === 'connected'" class="workspace-tabs column columns col-gapless">
          <ul
             id="tabWrap"
@@ -152,6 +156,7 @@
             :connection="connection"
          />
       </div>
+      <WorkspaceEditConnectionPanel v-else :connection="connection" />
       <ModalProcessesList
          v-if="isProcessesModal"
          :connection="connection"
@@ -164,6 +169,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
+import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
 import WorkspacePropsTab from '@/components/WorkspacePropsTab';
@@ -179,6 +185,7 @@ export default {
    name: 'Workspace',
    components: {
       WorkspaceExploreBar,
+      WorkspaceEditConnectionPanel,
       WorkspaceQueryTab,
       WorkspaceTableTab,
       WorkspacePropsTab,
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
new file mode 100644
index 00000000..99e8bccd
--- /dev/null
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -0,0 +1,491 @@
+<template>
+   <div class="connection-panel">
+      <div class="panel">
+         <div class="panel-nav">
+            <ul class="tab tab-block">
+               <li
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'general'}"
+                  @click="selectTab('general')"
+               >
+                  <a class="tab-link">{{ $t('word.general') }}</a>
+               </li>
+               <li
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssl'}"
+                  @click="selectTab('ssl')"
+               >
+                  <a class="tab-link">{{ $t('word.ssl') }}</a>
+               </li>
+               <li
+                  class="tab-item"
+                  :class="{'active': selectedTab === 'ssh'}"
+                  @click="selectTab('ssh')"
+               >
+                  <a class="c-hand">{{ $t('word.sshTunnel') }}</a>
+               </li>
+            </ul>
+         </div>
+         <div v-if="selectedTab === 'general'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <fieldset class="m-0" :disabled="isBusy">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionName') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="localConnection.name"
+                              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>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <select v-model="localConnection.client" class="form-select">
+                              <option value="mysql">
+                                 MySQL
+                              </option>
+                              <option value="maria">
+                                 MariaDB
+                              </option>
+                              <option value="pg">
+                                 PostgreSQL
+                              </option>
+                              <!-- <option value="mssql">
+                                       Microsoft SQL
+                                    </option>
+                                    <option value="oracledb">
+                                       Oracle DB
+                                    </option> -->
+                           </select>
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.host"
+                              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.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.port"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.database" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.database"
+                              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.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.user"
+                              class="form-input"
+                              type="text"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.password"
+                              class="form-input"
+                              type="password"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsl') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsl">
+                           <input type="checkbox" :checked="localConnection.ssl">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !localConnection.ssl">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.key"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('key')"
+                              @change="pathSelection($event, 'key')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.certificate') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.cert"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('cert')"
+                              @change="pathSelection($event, 'cert')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.ca"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('ca')"
+                              @change="pathSelection($event, 'ca')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.ciphers') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="localConnection.ciphers"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssh'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsh') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsh">
+                           <input type="checkbox" :checked="localConnection.ssh">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !localConnection.ssh">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshHost"
+                              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.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshUser"
+                              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.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshPass"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshPort"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.sshKey"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('sshKey')"
+                              @change="pathSelection($event, 'sshKey')"
+                           />
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="panel-footer">
+            <button
+               class="btn btn-gray mr-2"
+               :class="{'loading': isTesting}"
+               :disabled="isBusy"
+               @click="startTest"
+            >
+               {{ $t('message.testConnection') }}
+            </button>
+            <button
+               class="btn btn-primary mr-2"
+               :disabled="isBusy"
+               @click="saveConnection"
+            >
+               {{ $t('word.save') }}
+            </button>
+            <button
+               class="btn btn-success"
+               :class="{'loading': isConnecting}"
+               :disabled="isBusy"
+               @click="startConnection"
+            >
+               {{ $t('word.connect') }}
+            </button>
+         </div>
+      </div>
+      <ModalAskCredentials
+         v-if="isAsking"
+         @close-asking="closeAsking"
+         @credentials="continueTest"
+      />
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
+import Connection from '@/ipc-api/Connection';
+import ModalAskCredentials from '@/components/ModalAskCredentials';
+import BaseUploadInput from '@/components/BaseUploadInput';
+// TODO: errori attivando ssh/ssl
+export default {
+   name: 'WorkspaceEditConnectionPanel',
+   components: {
+      ModalAskCredentials,
+      BaseUploadInput
+   },
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         isConnecting: false,
+         isTesting: false,
+         isAsking: false,
+         localConnection: null,
+         selectedTab: 'general'
+      };
+   },
+   computed: {
+      customizations () {
+         return customizations[this.connection.client];
+      },
+      isBusy () {
+         return this.isConnecting || this.isTesting;
+      }
+   },
+   created () {
+      this.localConnection = JSON.parse(JSON.stringify(this.connection));
+      window.addEventListener('keydown', this.onKey);
+
+      // setTimeout(() => {
+      //    this.$refs.firstInput.focus();
+      // }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         editConnection: 'connections/editConnection',
+         connectWorkspace: 'workspaces/connectWorkspace',
+         addNotification: 'notifications/addNotification'
+      }),
+      async startConnection () {
+         await this.saveConnection();
+         this.isConnecting = true;
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            await this.connectWorkspace(this.connection);
+            this.isConnecting = false;
+         }
+      },
+      async startTest () {
+         this.isTesting = true;
+
+         if (this.localConnection.ask)
+            this.isAsking = true;
+         else {
+            try {
+               const res = await Connection.makeTest(this.localConnection);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+
+            this.isTesting = false;
+         }
+      },
+      async continueTest (credentials) { // if "Ask for credentials" is true
+         this.isAsking = false;
+         const params = Object.assign({}, this.localConnection, credentials);
+         try {
+            if (this.isConnecting) {
+               const params = Object.assign({}, this.connection, credentials);
+               await this.connectWorkspace(params);
+               this.isConnecting = false;
+            }
+            else {
+               const res = await Connection.makeTest(params);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isTesting = false;
+      },
+      saveConnection () {
+         return this.editConnection(this.localConnection);
+      },
+      closeAsking () {
+         this.isTesting = false;
+         this.isAsking = false;
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.localConnection.ssl = !this.localConnection.ssl;
+      },
+      toggleSsh () {
+         this.localConnection.ssh = !this.localConnection.ssh;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localConnection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.localConnection[name] = '';
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.connection-panel {
+  display: flex;
+  margin-top: 15vh;
+  justify-content: space-between;
+  margin-left: auto;
+  margin-right: auto;
+
+  .panel {
+    width: 450px;
+
+    .panel-body {
+      flex: initial;
+    }
+
+    .panel-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
index a6a2fec5..b470b565 100644
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -23,7 +23,6 @@
                   @contextmenu.prevent="showTableContext($event, table)"
                >
                   <a class="table-name">
-                     <!-- <div class="icon loading" /> -->
                      <i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
                      <span v-html="highlightWord(table.name)" />
                   </a>
diff --git a/src/renderer/components/ModalEditConnection.vue b/src/renderer/components/old/ModalEditConnection.vue
similarity index 100%
rename from src/renderer/components/ModalEditConnection.vue
rename to src/renderer/components/old/ModalEditConnection.vue

From 8cd76e711c9328254d498b4f9afa221311f5a487 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 17:43:33 +0200
Subject: [PATCH 2/6] feat(UI): new connection add panel

---
 src/renderer/App.vue                          |  23 +-
 src/renderer/components/SettingBarContext.vue |   8 +-
 src/renderer/components/TheSettingBar.vue     |   4 +-
 src/renderer/components/TheTitleBar.vue       |   1 +
 .../WorkspaceAddConnectionPanel.vue           | 517 ++++++++++++++++++
 .../WorkspaceEditConnectionPanel.vue          |   6 +-
 .../{ => old}/ModalNewConnection.vue          |   0
 .../components/{ => old}/TheAppWelcome.vue    |   0
 .../store/modules/connections.store.js        |   1 +
 .../store/modules/workspaces.store.js         |   7 +-
 10 files changed, 545 insertions(+), 22 deletions(-)
 create mode 100644 src/renderer/components/WorkspaceAddConnectionPanel.vue
 rename src/renderer/components/{ => old}/ModalNewConnection.vue (100%)
 rename src/renderer/components/{ => old}/TheAppWelcome.vue (100%)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index ee5bb60f..2c57f3da 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,22 +4,21 @@
       <div id="window-content">
          <TheSettingBar />
          <div id="main-content" class="container">
-            <TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
-            <div v-else class="columns col-gapless">
+            <div class="columns col-gapless">
                <Workspace
                   v-for="connection in connections"
                   :key="connection.uid"
                   :connection="connection"
                />
+               <WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
             </div>
+            <TheFooter />
+            <TheNotificationsBoard />
+            <TheScratchpad v-if="isScratchpad" />
+            <ModalSettings v-if="isSettingModal" />
+            <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
+            <BaseTextEditor class="d-none" value="" />
          </div>
-         <TheFooter />
-         <TheNotificationsBoard />
-         <ModalNewConnection v-if="isNewConnModal" />
-         <TheScratchpad v-if="isScratchpad" />
-         <ModalSettings v-if="isSettingModal" />
-         <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
-         <BaseTextEditor class="d-none" value="" />
       </div>
    </div>
 </template>
@@ -36,9 +35,8 @@ export default {
       TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
       TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
       TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
-      TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
       Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
-      ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
+      WorkspaceAddConnectionPanel: () => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel'),
       ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
       TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
       ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
@@ -49,9 +47,8 @@ export default {
    },
    computed: {
       ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
          isLoading: 'application/isLoading',
-         isNewConnModal: 'application/isNewModal',
-         isEditModal: 'application/isEditModal',
          isSettingModal: 'application/isSettingModal',
          isScratchpad: 'application/isScratchpad',
          connections: 'connections/getConnections',
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index c709beaa..a729585f 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -49,7 +49,8 @@ export default {
    },
    computed: {
       ...mapGetters({
-         getConnectionName: 'connections/getConnectionName'
+         getConnectionName: 'connections/getConnectionName',
+         selectedWorkspace: 'workspaces/getSelected'
       }),
       connectionName () {
          return this.getConnectionName(this.contextConnection.uid);
@@ -57,9 +58,12 @@ export default {
    },
    methods: {
       ...mapActions({
-         deleteConnection: 'connections/deleteConnection'
+         deleteConnection: 'connections/deleteConnection',
+         selectWorkspace: 'workspaces/selectWorkspace'
       }),
       confirmDeleteConnection () {
+         if (this.selectedWorkspace === this.contextConnection.uid)
+            this.selectWorkspace();
          this.deleteConnection(this.contextConnection);
          this.closeContext();
       },
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index d10b39d6..1a765f0c 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -25,7 +25,8 @@
             </draggable>
             <li
                class="settingbar-element btn btn-link ex-tooltip"
-               @click="showNewConnModal"
+               :class="{'selected': 'NEW' === selectedWorkspace}"
+               @click="selectWorkspace('NEW')"
                @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
@@ -92,7 +93,6 @@ export default {
    methods: {
       ...mapActions({
          updateConnections: 'connections/updateConnections',
-         showNewConnModal: 'application/showNewConnModal',
          showSettingModal: 'application/showSettingModal',
          showScratchpad: 'application/showScratchpad',
          selectWorkspace: 'workspaces/selectWorkspace'
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index f919a94b..73a29dfd 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -58,6 +58,7 @@ export default {
       }),
       windowTitle () {
          if (!this.selectedWorkspace) return '';
+         if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
 
          const connectionName = this.getConnectionName(this.selectedWorkspace);
          const workspace = this.getWorkspace(this.selectedWorkspace);
diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
new file mode 100644
index 00000000..08dcb2c9
--- /dev/null
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -0,0 +1,517 @@
+<template>
+   <div class="connection-panel">
+      <div class="panel">
+         <div class="panel-nav">
+            <ul class="tab tab-block">
+               <li
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'general'}"
+                  @click="selectTab('general')"
+               >
+                  <a class="tab-link">{{ $t('word.general') }}</a>
+               </li>
+               <li
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssl'}"
+                  @click="selectTab('ssl')"
+               >
+                  <a class="tab-link">{{ $t('word.ssl') }}</a>
+               </li>
+               <li
+                  class="tab-item"
+                  :class="{'active': selectedTab === 'ssh'}"
+                  @click="selectTab('ssh')"
+               >
+                  <a class="c-hand">{{ $t('word.sshTunnel') }}</a>
+               </li>
+            </ul>
+         </div>
+         <div v-if="selectedTab === 'general'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <fieldset class="m-0" :disabled="isBusy">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionName') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="connection.name"
+                              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>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <select v-model="connection.client" class="form-select">
+                              <option value="mysql">
+                                 MySQL
+                              </option>
+                              <option value="maria">
+                                 MariaDB
+                              </option>
+                              <option value="pg">
+                                 PostgreSQL
+                              </option>
+                              <!-- <option value="mssql">
+                                       Microsoft SQL
+                                    </option>
+                                    <option value="oracledb">
+                                       Oracle DB
+                                    </option> -->
+                           </select>
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.host"
+                              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.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.port"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.database" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.database"
+                              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.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.user"
+                              class="form-input"
+                              type="text"
+                              :disabled="connection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.password"
+                              class="form-input"
+                              type="password"
+                              :disabled="connection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsl') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsl">
+                           <input type="checkbox" :checked="connection.ssl">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !connection.ssl">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.key"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('key')"
+                              @change="pathSelection($event, 'key')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.certificate') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.cert"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('cert')"
+                              @change="pathSelection($event, 'cert')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.ca"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('ca')"
+                              @change="pathSelection($event, 'ca')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.ciphers') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="connection.ciphers"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssh'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsh') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsh">
+                           <input type="checkbox" :checked="connection.ssh">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !connection.ssh">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshHost"
+                              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.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshUser"
+                              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.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshPass"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshPort"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.sshKey"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('sshKey')"
+                              @change="pathSelection($event, 'sshKey')"
+                           />
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="panel-footer">
+            <button
+               class="btn btn-gray mr-2"
+               :class="{'loading': isTesting}"
+               :disabled="isBusy"
+               @click="startTest"
+            >
+               {{ $t('message.testConnection') }}
+            </button>
+            <button
+               class="btn btn-primary mr-2"
+               :disabled="isBusy"
+               @click="saveConnection"
+            >
+               {{ $t('word.save') }}
+            </button>
+            <!-- <button
+               class="btn btn-success"
+               :class="{'loading': isConnecting}"
+               :disabled="isBusy"
+               @click="startConnection"
+            >
+               {{ $t('word.connect') }}
+            </button> -->
+         </div>
+      </div>
+      <ModalAskCredentials
+         v-if="isAsking"
+         @close-asking="closeAsking"
+         @credentials="continueTest"
+      />
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
+import Connection from '@/ipc-api/Connection';
+import { uidGen } from 'common/libs/uidGen';
+import ModalAskCredentials from '@/components/ModalAskCredentials';
+import BaseUploadInput from '@/components/BaseUploadInput';
+
+export default {
+   name: 'WorkspaceAddConnectionPanel',
+   components: {
+      ModalAskCredentials,
+      BaseUploadInput
+   },
+   data () {
+      return {
+         connection: {
+            name: '',
+            client: 'mysql',
+            host: '127.0.0.1',
+            database: null,
+            port: null,
+            user: null,
+            password: '',
+            ask: false,
+            uid: uidGen('C'),
+            ssl: false,
+            cert: '',
+            key: '',
+            ca: '',
+            ciphers: '',
+            ssh: false,
+            sshHost: '',
+            sshUser: '',
+            sshPass: '',
+            sshKey: '',
+            sshPort: 22
+         },
+         isConnecting: false,
+         isTesting: false,
+         isAsking: false,
+         selectedTab: 'general'
+      };
+   },
+   computed: {
+      customizations () {
+         return customizations[this.connection.client];
+      },
+      isBusy () {
+         return this.isConnecting || this.isTesting;
+      }
+   },
+   created () {
+      this.setDefaults();
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addConnection: 'connections/addConnection',
+         connectWorkspace: 'workspaces/connectWorkspace',
+         addNotification: 'notifications/addNotification',
+         selectWorkspace: 'workspaces/selectWorkspace'
+      }),
+      setDefaults () {
+         this.connection.user = this.customizations.defaultUser;
+         this.connection.port = this.customizations.defaultPort;
+         this.connection.database = this.customizations.defaultDatabase;
+      },
+      async startConnection () {
+         await this.saveConnection();
+         this.isConnecting = true;
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            await this.connectWorkspace(this.connection);
+            this.isConnecting = false;
+         }
+      },
+      async startTest () {
+         this.isTesting = true;
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            try {
+               const res = await Connection.makeTest(this.connection);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+
+            this.isTesting = false;
+         }
+      },
+      async continueTest (credentials) { // if "Ask for credentials" is true
+         this.isAsking = false;
+         const params = Object.assign({}, this.connection, credentials);
+         try {
+            if (this.isConnecting) {
+               const params = Object.assign({}, this.connection, credentials);
+               await this.connectWorkspace(params);
+               this.isConnecting = false;
+            }
+            else {
+               const res = await Connection.makeTest(params);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isTesting = false;
+      },
+      saveConnection () {
+         this.selectWorkspace(this.connection.uid);
+         return this.addConnection(this.connection);
+      },
+      closeAsking () {
+         this.isTesting = false;
+         this.isAsking = false;
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.connection.ssl = !this.connection.ssl;
+      },
+      toggleSsh () {
+         this.connection.ssh = !this.connection.ssh;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.connection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.connection[name] = '';
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.connection-panel {
+  display: flex;
+  margin-top: 15vh;
+  justify-content: space-between;
+  margin-left: auto;
+  margin-right: auto;
+
+  .panel {
+    width: 450px;
+
+    .panel-body {
+      flex: initial;
+    }
+
+    .panel-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index 99e8bccd..632ce8fb 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -340,7 +340,7 @@ import customizations from 'common/customizations';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseUploadInput from '@/components/BaseUploadInput';
-// TODO: errori attivando ssh/ssl
+
 export default {
    name: 'WorkspaceEditConnectionPanel',
    components: {
@@ -388,10 +388,10 @@ export default {
          await this.saveConnection();
          this.isConnecting = true;
 
-         if (this.connection.ask)
+         if (this.localConnection.ask)
             this.isAsking = true;
          else {
-            await this.connectWorkspace(this.connection);
+            await this.connectWorkspace(this.localConnection);
             this.isConnecting = false;
          }
       },
diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/old/ModalNewConnection.vue
similarity index 100%
rename from src/renderer/components/ModalNewConnection.vue
rename to src/renderer/components/old/ModalNewConnection.vue
diff --git a/src/renderer/components/TheAppWelcome.vue b/src/renderer/components/old/TheAppWelcome.vue
similarity index 100%
rename from src/renderer/components/TheAppWelcome.vue
rename to src/renderer/components/old/TheAppWelcome.vue
diff --git a/src/renderer/store/modules/connections.store.js b/src/renderer/store/modules/connections.store.js
index 7fe14ce7..a7c331d3 100644
--- a/src/renderer/store/modules/connections.store.js
+++ b/src/renderer/store/modules/connections.store.js
@@ -23,6 +23,7 @@ export default {
       getConnections: state => state.connections,
       getConnectionName: state => uid => {
          const connection = state.connections.filter(connection => connection.uid === uid)[0];
+         if (!connection) return '';
          return connection.name
             ? connection.name
             : connection.ask
diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js
index 87170119..b4affcd6 100644
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/src/renderer/store/modules/workspaces.store.js
@@ -20,7 +20,7 @@ export default {
       getSelected: state => {
          if (state.selected_workspace) return state.selected_workspace;
          if (state.workspaces.length) return state.workspaces[0].uid;
-         return null;
+         return 'NEW';
       },
       getWorkspace: state => uid => {
          return state.workspaces.find(workspace => workspace.uid === uid);
@@ -52,7 +52,10 @@ export default {
    },
    mutations: {
       SELECT_WORKSPACE (state, uid) {
-         state.selected_workspace = uid;
+         if (!uid)
+            state.selected_workspace = state.workspaces.length ? state.workspaces[0].uid : 'NEW';
+         else
+            state.selected_workspace = uid;
       },
       SET_CONNECTED (state, payload) {
          const { uid, client, dataTypes, indexTypes, customizations, structure, version } = payload;

From a0ab63bdb533aac9b2bdc2ee07a3b1f2b70ea227 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 17:58:43 +0200
Subject: [PATCH 3/6] fix(UI): connection tab indicator when scrolling

---
 src/renderer/components/TheSettingBar.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index 1a765f0c..e890ad80 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -167,14 +167,13 @@ export default {
         height: $settingbar-width;
         width: 100%;
         margin: 0;
-        border-left: 3px solid transparent;
         opacity: 0.5;
         transition: opacity 0.2s;
         display: flex;
-        align-content: center;
-        justify-content: center;
-        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
         border-radius: 0;
+        padding: 0;
 
         &:hover {
           opacity: 1;
@@ -194,12 +193,12 @@ export default {
           width: 3px;
           transition: height 0.2s;
           background-color: $primary-color;
-          position: absolute;
-          left: 0;
           border-radius: $border-radius;
         }
 
         .settingbar-element-icon {
+          margin: 0 auto;
+
           &.badge::after {
             bottom: -10px;
             right: 0;

From 9622dbec6ba579c40a69bb985d51cbf6cf6ba974 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 18:41:17 +0200
Subject: [PATCH 4/6] chore: update rules

---
 .stylelintrc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.stylelintrc b/.stylelintrc
index bb2cf82e..079be0a0 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -9,7 +9,8 @@
   ],
   "rules": {
     "at-rule-no-unknown": null,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "declaration-colon-newline-after": "always-multi-line"
   },
   "syntax": "scss"
 }
\ No newline at end of file

From 56fcc2650b93ece398118f39f027dc9520dd8a6a Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 18:42:19 +0200
Subject: [PATCH 5/6] fix: clear corrupted configurations to avoid exceptions

---
 src/renderer/store/modules/connections.store.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/store/modules/connections.store.js b/src/renderer/store/modules/connections.store.js
index a7c331d3..5f352fff 100644
--- a/src/renderer/store/modules/connections.store.js
+++ b/src/renderer/store/modules/connections.store.js
@@ -10,7 +10,8 @@ else
 
 const persistentStore = new Store({
    name: 'connections',
-   encryptionKey: key
+   encryptionKey: key,
+   clearInvalidConfig: true
 });
 
 export default {

From 27a153ef436f2f343d7c8c4f57ca3631e04924f9 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 8 Jul 2021 18:43:31 +0200
Subject: [PATCH 6/6] refactor(UI): improved new connection panels appearence

---
 .../components/WorkspaceAddConnectionPanel.vue       |  3 +--
 .../components/WorkspaceEditConnectionPanel.vue      | 12 +++++-------
 src/renderer/scss/themes/dark-theme.scss             |  6 ++++++
 src/renderer/scss/themes/light-theme.scss            |  6 ++++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
index 08dcb2c9..b1a784da 100644
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -495,14 +495,13 @@ export default {
 
 <style lang="scss" scoped>
 .connection-panel {
-  display: flex;
   margin-top: 15vh;
-  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
 
   .panel {
     width: 450px;
+    border-radius: $border-radius;
 
     .panel-body {
       flex: initial;
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index 632ce8fb..8a592743 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -311,7 +311,7 @@
             </button>
             <button
                class="btn btn-primary mr-2"
-               :disabled="isBusy"
+               :disabled="isBusy || !hasChanges"
                @click="saveConnection"
             >
                {{ $t('word.save') }}
@@ -365,15 +365,14 @@ export default {
       },
       isBusy () {
          return this.isConnecting || this.isTesting;
+      },
+      hasChanges () {
+         return JSON.stringify(this.connection) !== JSON.stringify(this.localConnection);
       }
    },
    created () {
       this.localConnection = JSON.parse(JSON.stringify(this.connection));
       window.addEventListener('keydown', this.onKey);
-
-      // setTimeout(() => {
-      //    this.$refs.firstInput.focus();
-      // }, 20);
    },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
@@ -469,14 +468,13 @@ export default {
 
 <style lang="scss" scoped>
 .connection-panel {
-  display: flex;
   margin-top: 15vh;
-  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
 
   .panel {
     width: 450px;
+    border-radius: $border-radius;
 
     .panel-body {
       flex: initial;
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index 3b7035f8..839ef854 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -214,6 +214,12 @@
     }
   }
 
+  .connection-panel {
+    .panel {
+      background: rgba($bg-color-light-dark, 50%);
+    }
+  }
+
   .bg-checkered {
     background-image:
       linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 855e1537..8131a12a 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -205,6 +205,12 @@
     }
   }
 
+  .connection-panel {
+    .panel {
+      background: rgba($bg-color-light-gray, 100%);
+    }
+  }
+
   .context {
     color: $body-font-color-dark;