Merge pull request Expensify#33406 from Expensify/vit-revert32473

Revert "Merge pull request Expensify#32473 from software-mansion-labs/ideal-na…

src/NAVIGATORS.ts

@@ -4,7 +4,6 @@
  * */
 export default {
     CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator',
-    LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator',
     RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
     FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
 } as const;

src/SCREENS.ts

@@ -81,12 +81,10 @@ const SCREENS = {
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',
     },
-    LEFT_MODAL: {
-        SEARCH: 'Search',
-    },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
         NEW_CHAT: 'NewChat',
+        SEARCH: 'Search',
         DETAILS: 'Details',
         PROFILE: 'Profile',
         REPORT_DETAILS: 'Report_Details',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -36,7 +36,6 @@ import createCustomStackNavigator from './createCustomStackNavigator';
 import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
-import LeftModalNavigator from './Navigators/LeftModalNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
 
 type AuthScreensProps = {
@@ -319,12 +318,6 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
                     component={RightModalNavigator}
                     listeners={modalScreenListeners}
                 />
-                <RootStack.Screen
-                    name={NAVIGATORS.LEFT_MODAL_NAVIGATOR}
-                    options={screenOptions.leftModalNavigator}
-                    component={LeftModalNavigator}
-                    listeners={modalScreenListeners}
-                />
                 <RootStack.Screen
                     name={SCREENS.DESKTOP_SIGN_IN_REDIRECT}
                     options={screenOptions.fullScreen}

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

@@ -9,18 +9,15 @@ import CONST from '@src/CONST';
 type OverlayProps = {
     /* Callback to close the modal */
     onPress: () => void;
-
-    /* Returns whether a modal is displayed on the left side of the screen. By default, the modal is displayed on the right */
-    isModalOnTheLeft?: boolean;
 };
 
-function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) {
+function Overlay({onPress}: OverlayProps) {
     const styles = useThemeStyles();
     const {current} = useCardAnimation();
     const {translate} = useLocalize();
 
     return (
-        <Animated.View style={styles.overlayStyles(current, isModalOnTheLeft)}>
+        <Animated.View style={styles.overlayStyles(current)}>
             <View style={[styles.flex1, styles.flexColumn]}>
                 {/* In the latest Electron version buttons can't be both clickable and draggable.
              That's why we added this workaround. Because of two Pressable components on the desktop app

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

@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
@@ -18,7 +18,7 @@ const Stack = createStackNavigator<RightModalNavigatorParamList>();
 function RightModalNavigator({navigation}: RightModalNavigatorProps) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]);
+    const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]);
 
     return (
         <NoDropZone>
@@ -33,6 +33,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name={SCREENS.RIGHT_MODAL.NEW_CHAT}
                         component={ModalStackNavigators.NewChatModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.SEARCH}
+                        component={ModalStackNavigators.SearchModalStackNavigator}
+                    />
                     <Stack.Screen
                         name={SCREENS.RIGHT_MODAL.DETAILS}
                         component={ModalStackNavigators.DetailsModalStackNavigator}

src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts → src/libs/Navigation/AppNavigator/RHPScreenOptions.ts

@@ -2,16 +2,16 @@ import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/
 import {ThemeStyles} from '@styles/index';
 
 /**
- * Modal stack navigator screen options generator function
+ * RHP stack navigator screen options generator function
  * @param themeStyles - The styles object
  * @returns The screen options object
  */
-const ModalNavigatorScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
+const RHPScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
     headerShown: false,
     animationEnabled: true,
     gestureDirection: 'horizontal',
     cardStyle: themeStyles.navigationScreenCardStyle,
     cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
 });
 
-export default ModalNavigatorScreenOptions;
+export default RHPScreenOptions;

src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts

@@ -15,8 +15,6 @@ const commonScreenOptions: StackNavigationOptions = {
     animationTypeForReplace: 'push',
 };
 
-const SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER = -1;
-
 export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
     rightModalNavigator: {
         ...commonScreenOptions,
@@ -34,23 +32,7 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
             right: 0,
         },
     },
-    leftModalNavigator: {
-        ...commonScreenOptions,
-        cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER),
-        presentation: 'transparentModal',
-
-        // We want pop in LHP since there are some flows that would work weird otherwise
-        animationTypeForReplace: 'pop',
-        cardStyle: {
-            ...getNavigationModalCardStyle(),
-
-            // This is necessary to cover translated sidebar with overlay.
-            width: isSmallScreenWidth ? '100%' : '200%',
 
-            // LHP should be displayed in place of the sidebar
-            left: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
-        },
-    },
     homeScreen: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,

src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts

@@ -3,16 +3,11 @@ import {Animated} from 'react-native';
 import getCardStyles from '@styles/utils/cardStyles';
 import variables from '@styles/variables';
 
-export default (
-    isSmallScreenWidth: boolean,
-    isFullScreenModal: boolean,
-    {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps,
-    outputRangeMultiplier = 1,
-): StackCardInterpolatedStyle => {
+export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
     const translateX = Animated.multiply(
         progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [outputRangeMultiplier * (isSmallScreenWidth ? screen.width : variables.sideBarWidth), 0],
+            outputRange: [isSmallScreenWidth ? screen.width : variables.sideBarWidth, 0],
             extrapolate: 'clamp',
         }),
         inverted,

src/libs/Navigation/Navigation.ts

@@ -1,17 +1,18 @@
-import {findFocusedRoute} from '@react-navigation/core';
+import {findFocusedRoute, getActionFromState} from '@react-navigation/core';
 import {CommonActions, EventArg, getPathFromState, NavigationContainerEventMap, NavigationState, PartialState, StackActions} from '@react-navigation/native';
+import findLastIndex from 'lodash/findLastIndex';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ROUTES, {Route} from '@src/ROUTES';
-import {PROTECTED_SCREENS} from '@src/SCREENS';
-import originalDismissModal from './dismissModal';
+import SCREENS, {PROTECTED_SCREENS} from '@src/SCREENS';
+import getStateFromPath from './getStateFromPath';
 import originalGetTopmostReportActionId from './getTopmostReportActionID';
 import originalGetTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
 import linkTo from './linkTo';
 import navigationRef from './navigationRef';
-import {StateOrRoute} from './types';
+import {StackNavigationAction, StateOrRoute} from './types';
 
 let resolveNavigationIsReadyPromise: () => void;
 const navigationIsReadyPromise = new Promise<void>((resolve) => {
@@ -43,9 +44,6 @@ const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopm
 // Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state);
 
-// Re-exporting the dismissModal here to fill in default value for navigationRef. The dismissModal isn't defined in this file to avoid cyclic dependencies.
-const dismissModal = (targetReportId = '', ref = navigationRef) => originalDismissModal(targetReportId, ref);
-
 /** Method for finding on which index in stack we are. */
 function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number | undefined {
     if ('routes' in stateOrRoute && stateOrRoute.routes) {
@@ -58,7 +56,7 @@ function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number
         return getActiveRouteIndex(childActiveRoute, stateOrRoute.state.index ?? 0);
     }
 
-    if ('name' in stateOrRoute && (stateOrRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || stateOrRoute.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR)) {
+    if ('name' in stateOrRoute && stateOrRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
         return 0;
     }
 
@@ -162,8 +160,8 @@ function goBack(fallbackRoute: Route, shouldEnforceFallback = false, shouldPopTo
     if (isFirstRouteInNavigator) {
         const rootState = navigationRef.getRootState();
         const lastRoute = rootState.routes.at(-1);
-        // If the user comes from a different flow (there is more than one route in ModalNavigator) we should go back to the previous flow on UP button press instead of using the fallbackRoute.
-        if ((lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || lastRoute?.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR) && (lastRoute.state?.index ?? 0) > 0) {
+        // If the user comes from a different flow (there is more than one route in RHP) we should go back to the previous flow on UP button press instead of using the fallbackRoute.
+        if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && (lastRoute.state?.index ?? 0) > 0) {
             navigationRef.current.goBack();
             return;
         }
@@ -202,6 +200,45 @@ function setParams(params: Record<string, unknown>, routeKey: string) {
     });
 }
 
+/**
+ * Dismisses the last modal stack if there is any
+ *
+ * @param targetReportID - The reportID to navigate to after dismissing the modal
+ */
+function dismissModal(targetReportID?: string) {
+    if (!canNavigate('dismissModal')) {
+        return;
+    }
+    const rootState = navigationRef.getRootState();
+    const lastRoute = rootState.routes.at(-1);
+    switch (lastRoute?.name) {
+        case NAVIGATORS.RIGHT_MODAL_NAVIGATOR:
+        case SCREENS.NOT_FOUND:
+        case SCREENS.REPORT_ATTACHMENTS:
+            // if we are not in the target report, we need to navigate to it after dismissing the modal
+            if (targetReportID && targetReportID !== getTopmostReportId(rootState)) {
+                const state = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID));
+
+                const action: StackNavigationAction = getActionFromState(state, linkingConfig.config);
+                if (action) {
+                    action.type = 'REPLACE';
+                    navigationRef.current?.dispatch(action);
+                }
+                // If not-found page is in the route stack, we need to close it
+            } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) {
+                const lastRouteIndex = rootState.routes.length - 1;
+                const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
+                navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key});
+            } else {
+                navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key});
+            }
+            break;
+        default: {
+            Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss');
+        }
+    }
+}
+
 /**
  * Returns the current active route without the URL params
  */