Fix Connect screen state when reconnecting

2 files changed, 20 insertions, 4 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index 070dad20ec..e276f96101 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -170,7 +170,7 @@ export default class Connect extends Component<Props> {
           ) : null}
 
           <TunnelControl
-            tunnelState={this.props.connection.status.state}
+            tunnelState={this.props.connection.status}
             selectedRelayName={this.props.selectedRelayName}
             city={this.props.connection.city}
             country={this.props.connection.country}
diff --git a/gui/packages/desktop/src/renderer/components/TunnelControl.js b/gui/packages/desktop/src/renderer/components/TunnelControl.js
index c2788501fe..6590a17818 100644
--- a/gui/packages/desktop/src/renderer/components/TunnelControl.js
+++ b/gui/packages/desktop/src/renderer/components/TunnelControl.js
@@ -6,7 +6,7 @@ import { ConnectionInfo, SecuredLabel, SecuredDisplayStyle, ImageView } from '@m
 import * as AppButton from './AppButton';
 import { colors } from '../../config';
 
-import type { TunnelState, RelayProtocol } from '../lib/daemon-rpc-proxy';
+import type { TunnelStateTransition, RelayProtocol } from '../lib/daemon-rpc-proxy';
 
 export type RelayInAddress = {
   ip: string,
@@ -20,7 +20,7 @@ export type RelayOutAddress = {
 };
 
 type TunnelControlProps = {
-  tunnelState: TunnelState,
+  tunnelState: TunnelStateTransition,
   selectedRelayName: string,
   city: ?string,
   country: ?string,
@@ -135,7 +135,23 @@ export default class TunnelControl extends Component<TunnelControlProps> {
       />
     );
 
-    switch (this.props.tunnelState) {
+    let state = this.props.tunnelState.state;
+
+    if (state === 'disconnecting') {
+      switch (this.props.tunnelState.details) {
+        case 'block':
+          state = 'blocked';
+          break;
+        case 'reconnect':
+          state = 'connecting';
+          break;
+        default:
+          state = 'disconnecting';
+          break;
+      }
+    }
+
+    switch (state) {
       case 'connecting':
         return (
           <Wrapper>