Make Troubleshoot menu available in Sign In page

src/Expensify.tsx

@@ -12,9 +12,12 @@ import GrowlNotification from './components/GrowlNotification';
 import RequireTwoFactorAuthenticationModal from './components/RequireTwoFactorAuthenticationModal';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import SplashScreenHider from './components/SplashScreenHider';
+import TestToolsModal from './components/TestToolsModal';
 import UpdateAppModal from './components/UpdateAppModal';
 import * as CONFIG from './CONFIG';
 import CONST from './CONST';
+import useDebugShortcut from './hooks/useDebugShortcut';
+import useIsAuthenticated from './hooks/useIsAuthenticated';
 import useLocalize from './hooks/useLocalize';
 import {updateLastRoute} from './libs/actions/App';
 import {disconnect} from './libs/actions/Delegate';
@@ -97,6 +100,8 @@ function Expensify() {
     const [focusModeNotification] = useOnyx(ONYXKEYS.FOCUS_MODE_NOTIFICATION, {initWithStoredValues: false});
     const [lastVisitedPath] = useOnyx(ONYXKEYS.LAST_VISITED_PATH);
 
+    useDebugShortcut();
+
     useEffect(() => {
         if (!account?.needsTwoFactorAuthSetup || account.requiresTwoFactorAuth) {
             return;
@@ -113,7 +118,7 @@ function Expensify() {
         setAttemptedToOpenPublicRoom(true);
     }, [isCheckingPublicRoom]);
 
-    const isAuthenticated = useMemo(() => !!(session?.authToken ?? null), [session]);
+    const isAuthenticated = useIsAuthenticated();
     const autoAuthState = useMemo(() => session?.autoAuthState ?? '', [session]);
 
     const shouldInit = isNavigationReady && hasAttemptedToOpenPublicRoom;
@@ -306,6 +311,7 @@ function Expensify() {
                 />
             )}
             {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
+            <TestToolsModal />
         </DeeplinkWrapper>
     );
 }

src/NAVIGATORS.ts

@@ -15,4 +15,5 @@ export default {
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',
     WORKSPACE_SPLIT_NAVIGATOR: 'WorkspaceSplitNavigator',
     SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
+    PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator',
 } as const;

src/ROUTES.ts

@@ -133,6 +133,10 @@ const ROUTES = {
         },
     },
     WORKSPACE_SWITCHER: 'workspace-switcher',
+    PUBLIC_CONSOLE_DEBUG: {
+        route: 'troubleshoot/console',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`troubleshoot/console`, backTo),
+    },
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_CHANGE_CURRENCY: 'settings/add-payment-card/change-currency',

src/SCREENS.ts

@@ -200,6 +200,7 @@ const SCREENS = {
         MISSING_PERSONAL_DETAILS: 'MissingPersonalDetails',
         DEBUG: 'Debug',
     },
+    PUBLIC_CONSOLE_DEBUG: 'Console_Debug',
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',
     },

src/components/TestToolMenu.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import {useOnyx} from 'react-native-onyx';
+import useIsAuthenticated from '@hooks/useIsAuthenticated';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ApiUtils from '@libs/ApiUtils';
-import * as Network from '@userActions/Network';
-import * as Session from '@userActions/Session';
-import * as User from '@userActions/User';
+import {isUsingStagingApi} from '@libs/ApiUtils';
+import {setShouldFailAllRequests, setShouldForceOffline, setShouldSimulatePoorConnection} from '@userActions/Network';
+import {expireSessionWithDelay, invalidateAuthToken, invalidateCredentials} from '@userActions/Session';
+import {setIsDebugModeEnabled, setShouldUseStagingServer} from '@userActions/User';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {User as UserOnyx} from '@src/types/onyx';
@@ -28,11 +29,14 @@ function TestToolMenu() {
     const [network] = useOnyx(ONYXKEYS.NETWORK);
     const [user = USER_DEFAULT] = useOnyx(ONYXKEYS.USER);
     const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
-    const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
+    const shouldUseStagingServer = user?.shouldUseStagingServer ?? isUsingStagingApi();
     const isDebugModeEnabled = !!user?.isDebugModeEnabled;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    // Check if the user is authenticated to show options that require authentication
+    const isAuthenticated = useIsAuthenticated();
+
     return (
         <>
             <Text
@@ -41,14 +45,45 @@ function TestToolMenu() {
             >
                 {translate('initialSettingsPage.troubleshoot.testingPreferences')}
             </Text>
-            {/* When toggled the app will be put into debug mode. */}
-            <TestToolRow title={translate('initialSettingsPage.troubleshoot.debugMode')}>
-                <Switch
-                    accessibilityLabel={translate('initialSettingsPage.troubleshoot.debugMode')}
-                    isOn={isDebugModeEnabled}
-                    onToggle={() => User.setIsDebugModeEnabled(!isDebugModeEnabled)}
-                />
-            </TestToolRow>
+            {isAuthenticated && (
+                <>
+                    {/* When toggled the app will be put into debug mode. */}
+                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.debugMode')}>
+                        <Switch
+                            accessibilityLabel={translate('initialSettingsPage.troubleshoot.debugMode')}
+                            isOn={isDebugModeEnabled}
+                            onToggle={() => setIsDebugModeEnabled(!isDebugModeEnabled)}
+                        />
+                    </TestToolRow>
+
+                    {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
+                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
+                        <Button
+                            small
+                            text={translate('initialSettingsPage.troubleshoot.invalidate')}
+                            onPress={() => invalidateAuthToken()}
+                        />
+                    </TestToolRow>
+
+                    {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
+                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.deviceCredentials')}>
+                        <Button
+                            small
+                            text={translate('initialSettingsPage.troubleshoot.destroy')}
+                            onPress={() => invalidateCredentials()}
+                        />
+                    </TestToolRow>
+
+                    {/* Sends an expired session to the FE and invalidates the session by the same time in the BE. Action is delayed for 15s */}
+                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
+                        <Button
+                            small
+                            text={translate('initialSettingsPage.troubleshoot.invalidateWithDelay')}
+                            onPress={() => expireSessionWithDelay()}
+                        />
+                    </TestToolRow>
+                </>
+            )}
 
             {/* Option to switch between staging and default api endpoints.
         This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
@@ -58,7 +93,7 @@ function TestToolMenu() {
                     <Switch
                         accessibilityLabel="Use Staging Server"
                         isOn={shouldUseStagingServer}
-                        onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)}
+                        onToggle={() => setShouldUseStagingServer(!shouldUseStagingServer)}
                     />
                 </TestToolRow>
             )}
@@ -68,7 +103,7 @@ function TestToolMenu() {
                 <Switch
                     accessibilityLabel="Force offline"
                     isOn={!!network?.shouldForceOffline}
-                    onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
+                    onToggle={() => setShouldForceOffline(!network?.shouldForceOffline)}
                     disabled={!!isUsingImportedState || !!network?.shouldSimulatePoorConnection || network?.shouldFailAllRequests}
                 />
             </TestToolRow>
@@ -78,7 +113,7 @@ function TestToolMenu() {
                 <Switch
                     accessibilityLabel="Simulate poor internet connection"
                     isOn={!!network?.shouldSimulatePoorConnection}
-                    onToggle={() => Network.setShouldSimulatePoorConnection(!network?.shouldSimulatePoorConnection, network?.poorConnectionTimeoutID)}
+                    onToggle={() => setShouldSimulatePoorConnection(!network?.shouldSimulatePoorConnection, network?.poorConnectionTimeoutID)}
                     disabled={!!isUsingImportedState || !!network?.shouldFailAllRequests || network?.shouldForceOffline}
                 />
             </TestToolRow>
@@ -88,38 +123,10 @@ function TestToolMenu() {
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
                     isOn={!!network?.shouldFailAllRequests}
-                    onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)}
+                    onToggle={() => setShouldFailAllRequests(!network?.shouldFailAllRequests)}
                     disabled={!!network?.shouldForceOffline || network?.shouldSimulatePoorConnection}
                 />
             </TestToolRow>
-
-            {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
-            <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
-                <Button
-                    small
-                    text={translate('initialSettingsPage.troubleshoot.invalidate')}
-                    onPress={() => Session.invalidateAuthToken()}
-                />
-            </TestToolRow>
-
-            {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
-            <TestToolRow title={translate('initialSettingsPage.troubleshoot.deviceCredentials')}>
-                <Button
-                    small
-                    text={translate('initialSettingsPage.troubleshoot.destroy')}
-                    onPress={() => Session.invalidateCredentials()}
-                />
-            </TestToolRow>
-
-            {/* Sends an expired session to the FE and invalidates the session by the same time in the BE. Action is delayed for 15s */}
-            <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
-                <Button
-                    small
-                    text={translate('initialSettingsPage.troubleshoot.invalidateWithDelay')}
-                    onPress={() => Session.expireSessionWithDelay()}
-                />
-            </TestToolRow>
-
             <TestCrash />
         </>
     );

src/components/TestToolsModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import useIsAuthenticated from '@hooks/useIsAuthenticated';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -18,13 +19,20 @@ import TestToolMenu from './TestToolMenu';
 import TestToolRow from './TestToolRow';
 import Text from './Text';
 
+function getRouteBasedOnAuthStatus(isAuthenticated: boolean, activeRoute: string) {
+    return isAuthenticated ? ROUTES.SETTINGS_CONSOLE.getRoute(activeRoute) : ROUTES.PUBLIC_CONSOLE_DEBUG.getRoute(activeRoute);
+}
+
 function TestToolsModal() {
     const [isTestToolsModalOpen = false] = useOnyx(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN);
     const [shouldStoreLogs = false] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
     const {windowWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const activeRoute = Navigation.getActiveRoute();
+    const isAuthenticated = useIsAuthenticated();
+    const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute);
 
     return (
         <Modal
@@ -48,7 +56,7 @@ function TestToolsModal() {
                             text={translate('initialSettingsPage.debugConsole.viewConsole')}
                             onPress={() => {
                                 toggleTestToolsModal();
-                                Navigation.navigate(ROUTES.SETTINGS_CONSOLE.getRoute(Navigation.getActiveRoute()));
+                                Navigation.navigate(route);
                             }}
                         />
                     </TestToolRow>

src/hooks/useDebugShortcut.tsx

@@ -0,0 +1,26 @@
+import {useEffect} from 'react';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import toggleTestToolsModal from '@userActions/TestTool';
+import CONST from '@src/CONST';
+
+function useDebugShortcut() {
+    useEffect(() => {
+        const debugShortcutConfig = CONST.KEYBOARD_SHORTCUTS.DEBUG;
+        const unsubscribeDebugShortcut = KeyboardShortcut.subscribe(
+            debugShortcutConfig.shortcutKey,
+            () => toggleTestToolsModal(),
+            debugShortcutConfig.descriptionKey,
+            debugShortcutConfig.modifiers,
+            true,
+        );
+
+        return () => {
+            unsubscribeDebugShortcut();
+        };
+
+        // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, []);
+}
+
+export default useDebugShortcut;

src/hooks/useIsAuthenticated.tsx

@@ -0,0 +1,11 @@
+import {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function useIsAuthenticated() {
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const isAuthenticated = useMemo(() => !!(session?.authToken ?? null), [session]);
+    return isAuthenticated;
+}
+
+export default useIsAuthenticated;

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {
     AddPersonalBankAccountNavigatorParamList,
+    ConsoleNavigatorParamList,
     DebugParamList,
     EditRequestNavigatorParamList,
     EnablePaymentsNavigatorParamList,
@@ -226,6 +227,10 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
     [SCREENS.I_AM_A_TEACHER]: () => require<ReactComponentModule>('../../../../pages/TeachersUnite/ImTeacherPage').default,
 });
 
+const ConsoleModalStackNavigator = createModalStackNavigator<ConsoleNavigatorParamList>({
+    [SCREENS.PUBLIC_CONSOLE_DEBUG]: () => require<ReactComponentModule>('../../../../pages/settings/AboutPage/ConsolePage').default,
+});
+
 const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
     [SCREENS.SETTINGS.SHARE_CODE]: () => require<ReactComponentModule>('../../../../pages/ShareCodePage').default,
     [SCREENS.SETTINGS.PROFILE.PRONOUNS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PronounsPage').default,
@@ -761,4 +766,5 @@ export {
     MissingPersonalDetailsModalStackNavigator,
     DebugModalStackNavigator,
     WorkspaceConfirmationModalStackNavigator,
+    ConsoleModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/PublicRightModalNavigator.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {View} from 'react-native';
+import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import useCustomScreenOptions from '@libs/Navigation/AppNavigator/useCustomScreenOptions';
+import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {ConsoleNavigatorParamList, PublicScreensParamList} from '@libs/Navigation/types';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+import Overlay from './Overlay';
+
+type PublicRightModalNavigatorComponentProps = PlatformStackScreenProps<PublicScreensParamList, typeof NAVIGATORS.PUBLIC_RIGHT_MODAL_NAVIGATOR>;
+
+const Stack = createPlatformStackNavigator<ConsoleNavigatorParamList>();
+
+function PublicRightModalNavigatorComponent({navigation}: PublicRightModalNavigatorComponentProps) {
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    const screenOptions = useCustomScreenOptions();
+
+    return (
+        <NoDropZone>
+            {!shouldUseNarrowLayout && <Overlay onPress={navigation.goBack} />}
+            <View style={styles.RHPNavigatorContainer(shouldUseNarrowLayout)}>
+                <Stack.Navigator
+                    screenOptions={screenOptions}
+                    id={NAVIGATORS.PUBLIC_RIGHT_MODAL_NAVIGATOR}
+                >
+                    <Stack.Screen
+                        name={SCREENS.PUBLIC_CONSOLE_DEBUG}
+                        component={ModalStackNavigators.ConsoleModalStackNavigator}
+                    />
+                </Stack.Navigator>
+            </View>
+        </NoDropZone>
+    );
+}
+
+export default PublicRightModalNavigatorComponent;