add an abort connection button

src/renderer/components/Icon.vue

@@ -18,6 +18,7 @@ const icons = {
   unavailable: 'M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 18.726563 26.011719 21.207031 24.375 23.125 L 9.03125 7.46875 C 10.925781 5.917969 13.351563 5 16 5 Z M 7.625 8.875 L 22.96875 24.53125 C 21.074219 26.082031 18.648438 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 13.273438 5.988281 10.792969 7.625 8.875 Z ',
   duplicate: 'M 4 4 L 4 24 L 11 24 L 11 22 L 6 22 L 6 6 L 18 6 L 18 7 L 20 7 L 20 4 Z M 12 8 L 12 28 L 28 28 L 28 8 Z M 14 10 L 26 10 L 26 26 L 14 26 Z ',
   info: 'M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 12 L 17 12 L 17 10 Z M 15 14 L 15 22 L 17 22 L 17 14 Z ',
+  cancel: 'M12,2c-5.511,0 -10,4.489 -10,10c0,5.511 4.489,10 10,10c5.511,0 10,-4.489 10,-10c0,-5.511 -4.489,-10 -10,-10zM12,4c4.43012,0 8,3.56988 8,8c0,4.43012 -3.56988,8 -8,8c-4.43012,0 -8,-3.56988 -8,-8c0,-4.43012 3.56988,-8 8,-8zM8.70703,7.29297l-1.41406,1.41406l3.29297,3.29297l-3.29297,3.29297l1.41406,1.41406l3.29297,-3.29297l3.29297,3.29297l1.41406,-1.41406l-3.29297,-3.29297l3.29297,-3.29297l-1.41406,-1.41406l-3.29297,3.29297z ',
   grip: 'M 3 11 L 3 13 L 29 13 L 29 11 L 3 11 z M 3 19 L 3 21 L 29 21 L 29 19 L 3 19 z'
 }
 

src/renderer/components/MainWindow/ConnectionItem.vue

@@ -30,13 +30,17 @@
         <Icon icon="openFolder"/>
       </button>
 
+      <button v-show="isConnectingOrDisconnecting"  @click="$emit('abort', conn)">
+        <Icon icon="cancel"/>
+      </button>
+
       <button v-show="showConnectButton" :class="{ 'success': isConnected, 'connecting-disconnecting': isConnectingOrDisconnecting }" :disabled="isConnectingOrDisconnecting" @click="$emit(isConnected ? 'disconnect' : 'connect', conn)">
         <svg v-show="isConnectingOrDisconnecting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
           <circle cx="50" cy="50" fill="none" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(108.558 50 50)">
             <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
           </circle>
         </svg>
-        
+
         <Icon v-show="!isConnectingOrDisconnecting" :icon="isConnected ? 'plugConnected' : 'plugDisconnected'"/>
       </button>
 

src/renderer/components/MainWindow/index.vue

@@ -9,7 +9,9 @@
           </div>
 
           <draggable :list="connections" @end="updateConnectionList" chosenClass="highlight-item" dragClass="hide-dragging-item" handle=".grip" animation="200">
-            <ConnectionItem v-for="conn in connections" :key="conn.uuid" :conn="conn" :mode="listMode" @connect="connect" @disconnect="disconnect" @open="openLocal" @edit="editConnection" @delete="deleteConnection" @clone="cloneConnection"/>
+            <ConnectionItem v-for="conn in connections" :key="conn.uuid" :conn="conn" :mode="listMode" 
+              @connect="connect" @disconnect="disconnect" @open="openLocal" @edit="editConnection" 
+              @delete="deleteConnection" @clone="cloneConnection" @abort="disconnect"/>
           </draggable>
         </div>
 
@@ -107,14 +109,11 @@ export default {
         ProcessManager.create(c).then(pid => {
           conn.pid = pid
           conn.status = 'connected'
-
-          this.updateConnectionList()
         }).catch(error => {
           conn.status = 'disconnected'
-
-          this.updateConnectionList()
-
           this.notify(`Can't connect to '${conn.name}': ${error}`, 'error-icon')
+        }).finally(() => {
+          this.updateConnectionList()
         })
       }