Show blocked reason in GUI

5 files changed, 24 insertions, 22 deletions

diff --git a/gui/packages/desktop/src/renderer/app.js b/gui/packages/desktop/src/renderer/app.js
index e3ed3f78ef..b693a84544 100644
--- a/gui/packages/desktop/src/renderer/app.js
+++ b/gui/packages/desktop/src/renderer/app.js
@@ -404,8 +404,7 @@ export default class AppRenderer {
 
   async _fetchTunnelState() {
     const tunnelState = await this._daemonRpc.getState();
-    const connectionState = this._tunnelStateToConnectionState(tunnelState);
-    this._updateConnectionState(connectionState);
+    this._updateConnectionState(tunnelState);
   }
 
   async _fetchTunnelOptions() {
@@ -502,15 +501,9 @@ export default class AppRenderer {
       }
 
       if (newState) {
-        const connectionState = this._tunnelStateToConnectionState(newState);
-
-        log.debug(
-          `Got new state from daemon '${JSON.stringify(
-            newState,
-          )}', translated to '${connectionState}'`,
-        );
+        log.debug(`Got new state from daemon '${JSON.stringify(newState)}'`);
 
-        this._updateConnectionState(connectionState);
+        this._updateConnectionState(newState);
         this._refreshStateOnChange();
       }
     });
@@ -566,25 +559,28 @@ export default class AppRenderer {
     }
   }
 
-  _updateConnectionState(connectionState: ConnectionState) {
+  _updateConnectionState(tunnelState: TunnelState) {
     const actions = this._reduxActions;
-    switch (connectionState) {
+    switch (tunnelState.state) {
       case 'connecting':
         actions.connection.connecting();
         break;
       case 'connected':
         actions.connection.connected();
         break;
+      case 'disconnecting':
+      // Fall through
       case 'disconnected':
         actions.connection.disconnected();
         break;
       case 'blocked':
-        actions.connection.blocked();
+        actions.connection.blocked(tunnelState.details);
         break;
       default:
-        log.error(`Unexpected ConnectionState: ${(connectionState: empty)}`);
+        log.error(`Unexpected TunnelState: ${(tunnelState: empty)}`);
     }
 
+    const connectionState = this._tunnelStateToConnectionState(tunnelState);
     this._updateTrayIcon(connectionState);
     this._showNotification(connectionState);
   }
diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index dd5c4afa14..bf08000ce5 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -400,7 +400,7 @@ export default class Connect extends Component<Props, State> {
 
     // Tunnel is blocked due to an error?
     if (this.props.connection.status === 'blocked') {
-      return new BlockedError();
+      return new BlockedError(this.props.connection.blockReason);
     }
 
     return null;
diff --git a/gui/packages/desktop/src/renderer/errors.js b/gui/packages/desktop/src/renderer/errors.js
index 185b5920c7..15a7696f18 100644
--- a/gui/packages/desktop/src/renderer/errors.js
+++ b/gui/packages/desktop/src/renderer/errors.js
@@ -1,8 +1,10 @@
 // @flow
 
+import type { BlockReason } from './lib/daemon-rpc';
+
 export class BlockedError extends Error {
-  constructor() {
-    super('Network connections blocked due to an internal error');
+  constructor(reason: BlockReason) {
+    super(reason);
   }
 }
 
diff --git a/gui/packages/desktop/src/renderer/redux/connection/actions.js b/gui/packages/desktop/src/renderer/redux/connection/actions.js
index 37a44e99fc..052d206986 100644
--- a/gui/packages/desktop/src/renderer/redux/connection/actions.js
+++ b/gui/packages/desktop/src/renderer/redux/connection/actions.js
@@ -16,6 +16,7 @@ type DisconnectedAction = {
 
 type BlockedAction = {
   type: 'BLOCKED',
+  reason: string,
 };
 
 type NewLocationAction = {
@@ -65,9 +66,10 @@ function disconnected(): DisconnectedAction {
   };
 }
 
-function blocked(): BlockedAction {
+function blocked(reason: string): BlockedAction {
   return {
     type: 'BLOCKED',
+    reason,
   };
 }
 
diff --git a/gui/packages/desktop/src/renderer/redux/connection/reducers.js b/gui/packages/desktop/src/renderer/redux/connection/reducers.js
index 1bdc48806d..d425dec438 100644
--- a/gui/packages/desktop/src/renderer/redux/connection/reducers.js
+++ b/gui/packages/desktop/src/renderer/redux/connection/reducers.js
@@ -12,6 +12,7 @@ export type ConnectionReduxState = {
   longitude: ?number,
   country: ?string,
   city: ?string,
+  blockReason: ?string,
 };
 
 const initialState: ConnectionReduxState = {
@@ -22,6 +23,7 @@ const initialState: ConnectionReduxState = {
   longitude: null,
   country: null,
   city: null,
+  blockReason: null,
 };
 
 export default function(
@@ -33,16 +35,16 @@ export default function(
       return { ...state, ...action.newLocation };
 
     case 'CONNECTING':
-      return { ...state, ...{ status: 'connecting' } };
+      return { ...state, ...{ status: 'connecting', blockReason: null } };
 
     case 'CONNECTED':
-      return { ...state, ...{ status: 'connected' } };
+      return { ...state, ...{ status: 'connected', blockReason: null } };
 
     case 'DISCONNECTED':
-      return { ...state, ...{ status: 'disconnected' } };
+      return { ...state, ...{ status: 'disconnected', blockReason: null } };
 
     case 'BLOCKED':
-      return { ...state, ...{ status: 'blocked' } };
+      return { ...state, ...{ status: 'blocked', blockReason: action.reason } };
 
     case 'ONLINE':
       return { ...state, ...{ isOnline: true } };