Add a switch on dev and staging to force offline mode

src/Expensify.js

@@ -20,9 +20,14 @@ import Log from './libs/Log';
 import ConfirmModal from './components/ConfirmModal';
 import compose from './libs/compose';
 import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
+import withEnvironment, {environmentPropTypes} from './components/withEnvironment';
+import {withNetwork} from './components/OnyxProvider';
+import networkPropTypes from './components/networkPropTypes';
 import * as User from './libs/actions/User';
 import NetworkConnection from './libs/NetworkConnection';
 import Navigation from './libs/Navigation/Navigation';
+import * as Network from './libs/actions/Network';
+import CONST from './CONST';
 
 Onyx.registerLogger(({level, message}) => {
     if (level === 'alert') {
@@ -62,7 +67,11 @@ const propTypes = {
         roomName: PropTypes.string,
     }),
 
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
     ...withLocalizePropTypes,
+    ...environmentPropTypes,
 };
 
 const defaultProps = {
@@ -109,6 +118,11 @@ class Expensify extends PureComponent {
                     PushNotification.clearNotifications();
                 }
 
+                // Force offline mode on staging or dev if needed
+                if (_.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.DEV], this.props.environment)) {
+                    Network.setIsOffline(this.props.network.shouldForceOffline);
+                }
+
                 this.setState({isOnyxMigrated: true});
             });
 
@@ -218,6 +232,8 @@ Expensify.propTypes = propTypes;
 Expensify.defaultProps = defaultProps;
 export default compose(
     withLocalize,
+    withEnvironment,
+    withNetwork(),
     withOnyx({
         session: {
             key: ONYXKEYS.SESSION,

src/components/TestToolMenu.js

@@ -47,6 +47,14 @@ const TestToolMenu = props => (
             />
         </TestToolRow>
 
+        {/* When toggled the app will be forced offline. */}
+        <TestToolRow title="Force offline">
+            <Switch
+                isOn={props.network.shouldForceOffline || false}
+                onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
+            />
+        </TestToolRow>
+
         {/* When toggled all network requests will fail. */}
         <TestToolRow title="Simulate failing network requests">
             <Switch

src/components/networkPropTypes.js

@@ -4,6 +4,9 @@ export default PropTypes.shape({
     /** Is the network currently offline or not */
     isOffline: PropTypes.bool,
 
+    /** Should the network be forced offline */
+    shouldForceOffline: PropTypes.bool,
+
     /** Whether we should fail all network requests */
     shouldFailAllRequests: PropTypes.bool,
 });

src/libs/HttpUtils.js

@@ -13,9 +13,16 @@ Onyx.connect({
 });
 
 let shouldFailAllRequests = false;
+let shouldForceOffline = false;
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
-    callback: val => shouldFailAllRequests = (val && _.isBoolean(val.shouldFailAllRequests)) ? val.shouldFailAllRequests : false,
+    callback: (network) => {
+        if (!network) {
+            return;
+        }
+        shouldFailAllRequests = _.isBoolean(network.shouldFailAllRequests) ? network.shouldFailAllRequests : false;
+        shouldForceOffline = Boolean(network.shouldForceOffline);
+    },
 });
 
 // We use the AbortController API to terminate pending request in `cancelPendingRequests`
@@ -40,7 +47,7 @@ function processHTTPRequest(url, method = 'get', body = null, canCancel = true)
     })
         .then((response) => {
             // Test mode where all requests will succeed in the server, but fail to return a response
-            if (shouldFailAllRequests) {
+            if (shouldFailAllRequests || shouldForceOffline) {
                 throw new HttpsError({
                     message: CONST.ERROR.FAILED_TO_FETCH,
                 });

src/libs/Network/NetworkStore.js

@@ -80,7 +80,7 @@ Onyx.connect({
             triggerReconnectCallback();
         }
 
-        offline = network.isOffline;
+        offline = network.isOffline || Boolean(network.shouldForceOffline);
     },
 });
 

src/libs/NetworkConnection.js

@@ -1,10 +1,19 @@
 import _ from 'underscore';
+import Onyx from 'react-native-onyx';
 import NetInfo from '@react-native-community/netinfo';
 import AppStateMonitor from './AppStateMonitor';
 import Log from './Log';
 import * as NetworkActions from './actions/Network';
 import CONFIG from '../CONFIG';
 import CONST from '../CONST';
+import ONYXKEYS from '../ONYXKEYS';
+
+let shouldForceOffline;
+Onyx.connect({
+    key: ONYXKEYS.NETWORK,
+    waitForCollectionCallback: true,
+    callback: val => shouldForceOffline = val.shouldForceOffline || false,
+});
 
 let isOffline = false;
 let hasPendingNetworkCheck = false;
@@ -65,6 +74,10 @@ function subscribeToNetInfo() {
     // whether a user has internet connectivity or not.
     NetInfo.addEventListener((state) => {
         Log.info('[NetworkConnection] NetInfo state change', false, state);
+        if (shouldForceOffline) {
+            Log.info('[NetworkConnection] Not setting offline status because shouldForceOffline = true');
+            return;
+        }
         setOfflineStatus(state.isInternetReachable === false);
     });
 }

src/libs/actions/Network.js

@@ -8,6 +8,14 @@ function setIsOffline(isOffline) {
     Onyx.merge(ONYXKEYS.NETWORK, {isOffline});
 }
 
+/**
+ *
+ * @param {Boolean} shouldForceOffline
+ */
+function setShouldForceOffline(shouldForceOffline) {
+    Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline, isOffline: shouldForceOffline});
+}
+
 /**
  * Test tool that will fail all network requests when enabled
  * @param {Boolean} shouldFailAllRequests
@@ -18,5 +26,6 @@ function setShouldFailAllRequests(shouldFailAllRequests) {
 
 export {
     setIsOffline,
+    setShouldForceOffline,
     setShouldFailAllRequests,
 };

src/libs/actions/SignInRedirect.js

@@ -19,9 +19,13 @@ Onyx.connect({
 });
 
 let currentIsOffline;
+let currentShouldForceOffline;
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
-    callback: val => currentIsOffline = val.isOffline,
+    callback: (val) => {
+        currentIsOffline = val.isOffline;
+        currentShouldForceOffline = val.shouldForceOffline || false;
+    },
 });
 
 /**
@@ -31,6 +35,7 @@ function clearStorageAndRedirect(errorMessage) {
     const activeClients = currentActiveClients;
     const preferredLocale = currentPreferredLocale;
     const isOffline = currentIsOffline;
+    const shouldForceOffline = currentShouldForceOffline;
 
     // Clearing storage discards the authToken. This causes a redirect to the SignIn screen
     Onyx.clear()
@@ -41,7 +46,10 @@ function clearStorageAndRedirect(errorMessage) {
             if (activeClients && activeClients.length > 0) {
                 Onyx.set(ONYXKEYS.ACTIVE_CLIENTS, activeClients);
             }
-            if (isOffline) {
+
+            // After signing out, set ourselves as offline if we were offline before logging out and we are not forcing it.
+            // If we are forcing offline, ignore it while signed out, otherwise it would require a refresh because there's no way to toggle the switch to go back online while signed out.
+            if (isOffline && !shouldForceOffline) {
                 Onyx.set(ONYXKEYS.NETWORK, {isOffline});
             }