Show block banner when blocking when disconnected

3 files changed, 15 insertions, 1 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index ae83f0a1f0..507171e372 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -22,6 +22,7 @@ type Props = {
   accountExpiry: ?string,
   selectedRelayName: string,
   connectionInfoOpen: boolean,
+  blockWhenDisconnected: boolean,
   onSettings: () => void,
   onSelectLocation: () => void,
   onConnect: () => void,
@@ -199,6 +200,7 @@ export default class Connect extends Component<Props> {
             tunnelState={this.props.connection.status}
             version={this.props.version}
             openExternalLink={this.props.onExternalLink}
+            blockWhenDisconnected={this.props.blockWhenDisconnected}
           />
         </View>
       </View>
diff --git a/gui/packages/desktop/src/renderer/components/NotificationArea.js b/gui/packages/desktop/src/renderer/components/NotificationArea.js
index 1625d63431..dac5b916f6 100644
--- a/gui/packages/desktop/src/renderer/components/NotificationArea.js
+++ b/gui/packages/desktop/src/renderer/components/NotificationArea.js
@@ -20,6 +20,7 @@ type Props = {
   tunnelState: TunnelStateTransition,
   version: VersionReduxState,
   openExternalLink: (string) => void,
+  blockWhenDisconnected: boolean,
 };
 
 type NotificationAreaPresentation =
@@ -62,7 +63,7 @@ export default class NotificationArea extends Component<Props, State> {
   };
 
   static getDerivedStateFromProps(props: Props, state: State) {
-    const { version, tunnelState } = props;
+    const { version, tunnelState, blockWhenDisconnected } = props;
 
     switch (tunnelState.state) {
       case 'connecting':
@@ -89,6 +90,16 @@ export default class NotificationArea extends Component<Props, State> {
         }
       // fallthrough
 
+      case 'disconnected':
+        if (blockWhenDisconnected) {
+          return {
+            visible: true,
+            type: 'blocking',
+            reason: '',
+          };
+        }
+      // fallthrough
+
       default:
         if (!version.consistent) {
           return {
diff --git a/gui/packages/desktop/src/renderer/containers/ConnectPage.js b/gui/packages/desktop/src/renderer/containers/ConnectPage.js
index fbd7b8aa6b..77b8109b4f 100644
--- a/gui/packages/desktop/src/renderer/containers/ConnectPage.js
+++ b/gui/packages/desktop/src/renderer/containers/ConnectPage.js
@@ -63,6 +63,7 @@ const mapStateToProps = (state: ReduxState) => {
     connection: state.connection,
     version: state.version,
     connectionInfoOpen: state.userInterface.connectionInfoOpen,
+    blockWhenDisconnected: state.settings.blockWhenDisconnected,
   };
 };