Fix the VPN status in the UI

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html

@@ -96,10 +96,7 @@
         </mat-checkbox>
       </td>
       <td>
-        <i
-          [class]="app.status === 1 ? 'dot-green' : 'dot-red'"
-          [matTooltip]="(app.status === 1 ? 'apps.status-running-tooltip' : 'apps.status-stopped-tooltip') | translate"
-        ></i>
+        <i [class]="getStateClass(app)" [matTooltip]="getStateTooltip(app) | translate"></i>
       </td>
       <td>
         {{ app.name }}

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts

@@ -231,6 +231,32 @@ export class NodeAppsListComponent implements OnDestroy {
     return null;
   }
 
+  /**
+   * Gets the class for the app status dot.
+   */
+  getStateClass(app: Application): string {
+    if (app.status === 1) {
+      return 'dot-green';
+    } else if (app.name === 'vpn-client' && app.status === 3) {
+      return 'dot-yellow';
+    }
+
+    return 'dot-red';
+  }
+
+  /**
+   * Gets the tooltip text for the app status dot.
+   */
+  getStateTooltip(app: Application): string {
+    if (app.status === 1) {
+      return 'apps.status-running-tooltip';
+    } else if (app.name === 'vpn-client' && app.status === 3) {
+      return 'apps.status-connecting-tooltip';
+    }
+
+    return 'apps.status-stopped-tooltip';
+  }
+
   /**
    * Changes the selection state of an entry (modifies the state of its checkbox).
    */

static/skywire-manager-src/src/app/services/vpn-client.service.ts

@@ -680,7 +680,7 @@ export class VpnClientService {
       // Get the required data from the app properties.
       if (appData) {
         vpnClientData = new VpnClientAppData();
-        vpnClientData.running = appData.status === 1;
+        vpnClientData.running = appData.status === 1 || appData.status === 3;
         vpnClientData.connectionDuration = appData.connection_duration;
 
         vpnClientData.appState = AppState.Stopped;

static/skywire-manager-src/src/assets/i18n/en.json

@@ -464,6 +464,7 @@
     "status-stopped": "Stopped",
     "status-failed": "Failed",
     "status-running-tooltip": "App is currently running",
+    "status-connecting-tooltip": "App is currently connecting",
     "status-stopped-tooltip": "App is currently stopped",
     "status-failed-tooltip": "Something went wrong. Check the app's messages for more information"
   },

static/skywire-manager-src/src/assets/i18n/es.json

@@ -468,6 +468,7 @@
     "status-stopped": "Detenida",
     "status-failed": "Fallida",
     "status-running-tooltip": "La aplicación está actualmente corriendo",
+    "status-connecting-tooltip": "La aplicación está actualmente conectando",
     "status-stopped-tooltip": "La aplicación está actualmente detenida",
     "status-failed-tooltip": "Algo salió mal. Revise los mensajes de la aplicación para más información"
   },

static/skywire-manager-src/src/assets/i18n/es_base.json

@@ -468,6 +468,7 @@
     "status-stopped": "Stopped",
     "status-failed": "Failed",
     "status-running-tooltip": "App is currently running",
+    "status-connecting-tooltip": "App is currently connecting",
     "status-stopped-tooltip": "App is currently stopped",
     "status-failed-tooltip": "Something went wrong. Check the app's messages for more information"
   },