Merge pull request #61955 from Expensify/francois-revert-58608

Revert "Merge pull request #58608 from nyomanjyotisa/issue-58383"

(cherry picked from commit 6569995)

(cherry-picked to staging by francoisl)

Author: luacmartins

src/Expensify.tsx

@@ -11,6 +11,7 @@ import FocusModeNotification from './components/FocusModeNotification';
 import GrowlNotification from './components/GrowlNotification';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import SplashScreenHider from './components/SplashScreenHider';
+import TestToolsModal from './components/TestToolsModal';
 import UpdateAppModal from './components/UpdateAppModal';
 import CONFIG from './CONFIG';
 import CONST from './CONST';
@@ -305,6 +306,7 @@ function Expensify() {
                 />
             )}
             {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
+            <TestToolsModal />
         </DeeplinkWrapper>
     );
 }

src/NAVIGATORS.ts

@@ -19,5 +19,4 @@ export default {
     SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
     SHARE_MODAL_NAVIGATOR: 'ShareModalNavigator',
     PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator',
-    TEST_TOOLS_MODAL_NAVIGATOR: 'TestToolsModalNavigator',
 } as const;

src/ROUTES.ts

@@ -1985,8 +1985,6 @@ const ROUTES = {
     },
     MIGRATED_USER_WELCOME_MODAL: 'onboarding/migrated-user-welcome',
 
-    TEST_TOOLS_MODAL: 'test-tools',
-
     TRANSACTION_RECEIPT: {
         route: 'r/:reportID/transaction/:transactionID/receipt/:action?/:iouType?',
         getRoute: (reportID: string | undefined, transactionID: string | undefined, readonly = false, isFromReviewDuplicates = false, action?: IOUAction, iouType?: IOUType) => {

src/SCREENS.ts

@@ -673,10 +673,6 @@ const SCREENS = {
         ROOT: 'TestDrive_Demo_Root',
     },
 
-    TEST_TOOLS_MODAL: {
-        ROOT: 'TestToolsModal_Root',
-    },
-
     I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
     INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
     I_AM_A_TEACHER: 'I_Am_A_Teacher',

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useMemo, useRef, useState} from 'react';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
 import {navigationRef} from '@libs/Navigation/Navigation';
@@ -16,10 +16,6 @@ type SearchRouterContext = {
     unregisterSearchPageInput: () => void;
 };
 
-type HistoryState = {
-    isSearchModalOpen?: boolean;
-};
-
 const defaultSearchContext: SearchRouterContext = {
     isSearchRouterDisplayed: false,
     openSearchRouter: () => {},
@@ -31,43 +27,17 @@ const defaultSearchContext: SearchRouterContext = {
 
 const Context = React.createContext<SearchRouterContext>(defaultSearchContext);
 
-const supportsHistoryAPI = typeof window !== 'undefined' && typeof window.history !== 'undefined';
-const canListenPopState = typeof window !== 'undefined' && typeof window.addEventListener === 'function';
-
 function SearchRouterContextProvider({children}: ChildrenProps) {
     const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
     const searchRouterDisplayedRef = useRef(false);
     const searchPageInputRef = useRef<AnimatedTextInputRef | undefined>(undefined);
 
-    useEffect(() => {
-        if (!canListenPopState) {
-            return;
-        }
-
-        const handlePopState = (event: PopStateEvent) => {
-            const state = event.state as HistoryState | null;
-            if (state?.isSearchModalOpen) {
-                setIsSearchRouterDisplayed(true);
-                searchRouterDisplayedRef.current = true;
-            } else {
-                setIsSearchRouterDisplayed(false);
-                searchRouterDisplayedRef.current = false;
-            }
-        };
-
-        window.addEventListener('popstate', handlePopState);
-        return () => window.removeEventListener('popstate', handlePopState);
-    }, []);
-
     const routerContext = useMemo(() => {
         const openSearchRouter = () => {
             close(
                 () => {
                     setIsSearchRouterDisplayed(true);
                     searchRouterDisplayedRef.current = true;
-                    if (supportsHistoryAPI) {
-                        window.history.pushState({isSearchModalOpen: true} satisfies HistoryState, '');
-                    }
                 },
                 false,
                 true,
@@ -76,12 +46,6 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
         const closeSearchRouter = () => {
             setIsSearchRouterDisplayed(false);
             searchRouterDisplayedRef.current = false;
-            if (supportsHistoryAPI) {
-                const state = window.history.state as HistoryState | null;
-                if (state?.isSearchModalOpen) {
-                    window.history.back();
-                }
-            }
         };
 
         // There are callbacks that live outside of React render-loop and interact with SearchRouter

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -6,7 +6,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import {isMobileIOS} from '@libs/Browser';
+import {isMobileChrome, isMobileIOS} from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
 import {useSearchRouterContext} from './SearchRouterContext';
@@ -34,6 +34,7 @@ function SearchRouterModal() {
             fullscreen
             propagateSwipe
             swipeDirection={shouldUseNarrowLayout ? CONST.SWIPE_DIRECTION.RIGHT : undefined}
+            shouldHandleNavigationBack={isMobileChrome()}
             onClose={closeSearchRouter}
             onModalHide={() => setShouldHideInputCaret(isMobileWebIOS)}
             onModalShow={() => setShouldHideInputCaret(false)}

src/components/TestToolsModal.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import useIsAuthenticated from '@hooks/useIsAuthenticated';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Navigation from '@navigation/Navigation';
+import toggleTestToolsModal, {shouldShowProfileTool} from '@userActions/TestTool';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import Button from './Button';
+import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu';
+import Modal from './Modal';
+import ProfilingToolMenu from './ProfilingToolMenu';
+import ScrollView from './ScrollView';
+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);
+}
+
+const modalContentMaxHeightPercentage = 0.75;
+
+function TestToolsModal() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [isTestToolsModalOpen = false] = useOnyx(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN);
+    const [shouldStoreLogs = false] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
+    const {windowWidth, windowHeight} = useWindowDimensions();
+    const StyleUtils = useStyleUtils();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const activeRoute = Navigation.getActiveRoute();
+    const isAuthenticated = useIsAuthenticated();
+    const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute);
+
+    if (!isTestToolsModalOpen) {
+        return null;
+    }
+
+    return (
+        <Modal
+            isVisible={!!isTestToolsModalOpen}
+            type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
+            onClose={toggleTestToolsModal}
+            innerContainerStyle={styles.overflowHidden}
+        >
+            <ScrollView
+                contentContainerStyle={[StyleUtils.getTestToolsModalStyle(windowWidth), shouldUseNarrowLayout && {...styles.w100, ...styles.pv0}]}
+                style={{maxHeight: windowHeight * modalContentMaxHeightPercentage}}
+            >
+                <Text
+                    style={[styles.textLabelSupporting, styles.mt4, styles.mb3]}
+                    numberOfLines={1}
+                >
+                    {translate('initialSettingsPage.troubleshoot.releaseOptions')}
+                </Text>
+                {shouldShowProfileTool() && <ProfilingToolMenu />}
+                <ClientSideLoggingToolMenu />
+                {!!shouldStoreLogs && (
+                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.debugConsole')}>
+                        <Button
+                            small
+                            text={translate('initialSettingsPage.debugConsole.viewConsole')}
+                            onPress={() => {
+                                toggleTestToolsModal();
+                                Navigation.navigate(route);
+                            }}
+                        />
+                    </TestToolRow>
+                )}
+                <TestToolMenu />
+            </ScrollView>
+        </Modal>
+    );
+}
+
+TestToolsModal.displayName = 'TestToolsModal';
+
+export default TestToolsModal;

src/components/TestToolsModalPage.tsx

@@ -15,7 +15,6 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {SidebarOrderedReportsContextProvider} from '@hooks/useSidebarOrderedReports';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import {connect} from '@libs/actions/Delegate';
 import setFullscreenVisibility from '@libs/actions/setFullscreenVisibility';
@@ -27,7 +26,7 @@ import Log from '@libs/Log';
 import NavBarManager from '@libs/NavBarManager';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
-import Animations, {InternalPlatformAnimations} from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
+import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import Presentation from '@libs/Navigation/PlatformStackNavigation/navigationOptions/presentation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import NetworkConnection from '@libs/NetworkConnection';
@@ -70,7 +69,6 @@ import MigratedUserWelcomeModalNavigator from './Navigators/MigratedUserWelcomeM
 import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
 import TestDriveModalNavigator from './Navigators/TestDriveModalNavigator';
-import TestToolsModalNavigator from './Navigators/TestToolsModalNavigator';
 import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator';
 import TestDriveDemoNavigator from './TestDriveDemoNavigator';
 import useRootNavigatorScreenOptions from './useRootNavigatorScreenOptions';
@@ -220,7 +218,6 @@ const modalScreenListenersWithCancelSearch = {
 
 function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) {
     const theme = useTheme();
-    const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const rootNavigatorScreenOptions = useRootNavigatorScreenOptions();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -713,20 +710,6 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     options={rootNavigatorScreenOptions.fullScreen}
                     component={ConnectionCompletePage}
                 />
-                <RootStack.Screen
-                    name={NAVIGATORS.TEST_TOOLS_MODAL_NAVIGATOR}
-                    options={{
-                        ...rootNavigatorScreenOptions.basicModalNavigator,
-                        native: {
-                            contentStyle: {
-                                ...StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, 0.72),
-                            },
-                            animation: InternalPlatformAnimations.FADE,
-                        },
-                    }}
-                    component={TestToolsModalNavigator}
-                    listeners={modalScreenListeners}
-                />
             </RootStack.Navigator>
             <SearchRouterModal />
         </ComposeProviders>