Handle header color in disconnecting state

2 files changed, 29 insertions, 6 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index ff0722e3c8..0526820309 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -390,17 +390,26 @@ export default class Connect extends Component<Props, State> {
   // Private
 
   headerBarStyle(): HeaderBarStyle {
-    const { state } = this.props.connection.status;
-    switch (state) {
-      case 'disconnecting':
+    const { status } = this.props.connection;
+    switch (status.state) {
       case 'disconnected':
         return 'error';
       case 'connecting':
       case 'connected':
       case 'blocked':
         return 'success';
+      case 'disconnecting':
+        switch (status.details) {
+          case 'block':
+          case 'reconnect':
+            return 'success';
+          case 'nothing':
+            return 'error';
+          default:
+            throw new Error(`Invalid action after disconnection: ${(status.details: empty)}`);
+        }
       default:
-        throw new Error(`Invalid TunnelState: ${(state: empty)}`);
+        throw new Error(`Invalid TunnelState: ${(status.state: empty)}`);
     }
   }
 
diff --git a/gui/packages/desktop/test/components/Connect.spec.js b/gui/packages/desktop/test/components/Connect.spec.js
index 7a700982ae..f144b249ee 100644
--- a/gui/packages/desktop/test/components/Connect.spec.js
+++ b/gui/packages/desktop/test/components/Connect.spec.js
@@ -123,8 +123,8 @@ describe('components/Connect', () => {
     connectButton.prop('onPress')();
   });
 
-  it('hides the blocking internet message when connected, disconnecting or disconnected', () => {
-    for (const state of ['connected', 'disconnecting', 'disconnected']) {
+  it('hides the blocking internet message when connected or disconnected', () => {
+    for (const state of ['connected', 'disconnected']) {
       const component = renderWithProps({
         connection: {
           ...defaultProps.connection,
@@ -137,6 +137,20 @@ describe('components/Connect', () => {
     }
   });
 
+  it('hides the blocking internet message when disconnecting', () => {
+    for (const afterDisconnect of ['nothing', 'block', 'reconnect']) {
+      const component = renderWithProps({
+        connection: {
+          ...defaultProps.connection,
+          status: { state: 'disconnecting', details: afterDisconnect },
+        },
+      });
+      const blockingAccordion = getComponent(component, 'blockingAccordion');
+
+      expect(blockingAccordion.prop('height')).to.equal(0);
+    }
+  });
+
   it('shows the blocking internet message when connecting', () => {
     const component = renderWithProps({
       connection: {