[HOLD for Payment 2024-10-07][$250][Search v2.1] Web - App navigates from search page to inbox when refreshing

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.0.16
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): Yokabdk+new37@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Click on account setting
Click on FAB
Click Submit Expense
Input any amount & account and submit the expense
Go to search
Select the expense on the checkbox and click on the drop down on the top right corner and click on hold
Open the expense by clicking on it
Refresh the page
The background of the app navigates to the inbox

Expected Result:

App stays on inbox page when refreshing

Actual Result:

App navigates from search page to inbox when refreshing while its showing Hold banner page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6554941_1722111871260.2024-07-27_23_01_54.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~015e208924e7bade60
Upwork Job ID: 1820124885802480794
Last Price Increase: 2024-08-18
Automatic offers:

rayane-djouah | Reviewer | 103652362

@lschurr

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

@lschurr

@lschurr FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

We think that this bug might be related to #vip-vsp

Proposal

Please re-state the problem that we are trying to solve in this issue.

Inbox page is shown after refresh while hold educational page is showing in search page.

What is the root cause of that problem?

The hold educational page can be accessed from the report screen (central pane) and report RHP, so we don't have the central pane mapping for the hold educational page.

If a RHP page doesn't have the matching route from the mapping, then a report (of inbox) is shown by default when we refresh the web.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 188 to 196 in 4bce838

    
           let matchingRootRoute = getMatchingRootRouteForRHPRoute(focusedRHPRoute); 
        
           const isRHPScreenOpenedFromLHN = focusedRHPRoute?.name && RHP_SCREENS_OPENED_FROM_LHN.includes(focusedRHPRoute?.name as RHPScreenOpenedFromLHN); 
        
           // This may happen if this RHP doens't have a route that should be under the overlay defined. 
        
           if (!matchingRootRoute || isRHPScreenOpenedFromLHN) { 
        
               metainfo.isCentralPaneAndBottomTabMandatory = false; 
        
               metainfo.isFullScreenNavigatorMandatory = false; 
        
               // If matchingRootRoute is undefined and it's a narrow layout, don't add a report screen under the RHP. 
        
               matchingRootRoute = matchingRootRoute ?? (!isNarrowLayout ? {name: SCREENS.REPORT} : undefined); 
        
           }

But we actually have another way to show the correct central pane screen, that is by using backTo params which we don't use for hold educational page.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 106 to 131 in 4bce838

    
           if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') { 
        
               const stateForBackTo = getStateFromPath(route.params.backTo, config); 
        
               if (stateForBackTo) { 
        
                   // eslint-disable-next-line @typescript-eslint/no-shadow 
        
                   const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); 
        
                   const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find( 
        
                       // eslint-disable-next-line @typescript-eslint/no-shadow 
        
                       (route) => isCentralPaneName(route.name) || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR, 
        
                   ); 
        
                   // If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen. 
        
                   if (rhpNavigator && rhpNavigator.state) { 
        
                       const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR; 
        
                       if (isRHPinState) { 
        
                           return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute); 
        
                       } 
        
                   } 
        
                   // If we know that backTo targets the root route (central pane or full screen) we want to use it. 
        
                   if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) { 
        
                       return centralPaneOrFullScreenNavigator as NavigationPartialRoute<CentralPaneName | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR>; 
        
                   } 
        
               } 
        
           }

What changes do you think we should make in order to solve the problem?

First, we need to add the backTo param to the hold educational page route.

// in ROUTES.ts
PROCESS_MONEY_REQUEST_HOLD: {
    route: 'hold-expense-educational',
    getRoute: (backTo?: string) => getUrlWithBackToParam('hold-expense-educational', backTo),
},

Then, we need to update all the usages of ROUTES.PROCESS_MONEY_REQUEST_HOLD and make sure to pass the current active route, for example

App/src/components/MoneyRequestHeader.tsx

Lines 111 to 117 in 4bce838

    
           if (isSmallScreenWidth) { 
        
               if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD) { 
        
                   Navigation.goBack(); 
        
               } 
        
           } else { 
        
               Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD); 
        
           }

if (isSmallScreenWidth) {
    if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
        Navigation.goBack();
    }
} else {
    Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getActiveRoute()));
}

This way, the backTo logic of getMatchingRootRouteForRHPRoute will be used, but there is currently another issue. When we open the hold educational page from the report RHP, the backTo will be the report RHP. If the backTo is an RHP, it will check if stateForBackTo.routes[0].name equals to NAVIGATORS.RIGHT_MODAL_NAVIGATOR.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 118 to 124 in 4bce838

    
           if (rhpNavigator && rhpNavigator.state) { 
        
               const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR; 
        
               if (isRHPinState) { 
        
                   return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute); 
        
               } 
        
           }

However, the stateForBackTo of report RHP is

{
...,
routes: [{name: 'BottomTabNavigator'}, {name: 'RightModalNavigator', ...}],

so, isRHPinState is always false. I think we don't need to check for isRHPinState anymore because we already found the RHP navigator which means RHP is in the state, so I propose to remove isRHPinState.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 109 to 110 in 4bce838

    
           // eslint-disable-next-line @typescript-eslint/no-shadow 
        
           const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);

We can apply this backTo solution to report details and other pages too.

Job added to Upwork: https://www.upwork.com/jobs/~015e208924e7bade60

@rayane-djouah

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

Reviewing today 👀

@luacmartins

@luacmartins - This bug is reproducible if we open any transaction edit pages or details pages and then refresh. Do you think we should fix it for all pages?

Screen.Recording.2024-08-07.at.2.37.44.PM.mov

BugZero Checklist

Please propose regression test steps to ensure the new feature will work correctly on production in further releases.

Regression Test Proposal

Platforms: MacOS: Chrome / Safari, MacOS: Desktop
Precondition: Account has many expenses and chats.

Navigate to the Search page.
Open a report in the Right-Hand Panel (RHP).
Access a report-related page in the RHP (e.g., report details page).
Refresh the page.
Verify that the Search page remains visible under the report RHP.
Click on the RHP overlay and verify that the app goes back to the search page.

Do we agree 👍 or 👎

@rayane-djouah

Thanks! @rayane-djouah @bernhardoj - was this a regression from the original PR?

@rayane-djouah

@rayane-djouah @bernhardoj - was this a regression from the original PR?

@lschurr, did you mean the deploy blocker comment mentioned above? @bernhardoj and I addressed it in a follow-up PR (#49916), and the issue is now closed. I would argue that no penalty should be applied here because, in addition to tackling the regression in a follow-up (the regression did not reach production), we did extra work on this issue beyond just fixing the original reported bug. We addressed these types of bugs on all screens opened in RHP from the search page (#46773 (comment), #46773 (comment)). Moreover, the original PR (#47990) was substantial, involving 71 changed files, and required extensive work on both implementation and review sides, making the detection of the regression very challenging given that it's an edge case.
cc @luacmartins

@rayane-djouah

Agree with @rayane-djouah. In fact, I'm hoping the price could be increased 😅

@bernhardoj

Payment summary:

Contributor: $250 @bernhardoj (please request in NewDot)
Reviewer: $250 @rayane-djouah (Paid in Upwork)

Requested in ND.

@lschurr

@lschurr - Offer Accepted

All set!

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for Payment 2024-10-07][$250][Search v2.1] Web - App navigates from search page to inbox when refreshing #46773

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

52 remaining items

BugZero Checklist

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	let matchingRootRoute = getMatchingRootRouteForRHPRoute(focusedRHPRoute);
	const isRHPScreenOpenedFromLHN = focusedRHPRoute?.name && RHP_SCREENS_OPENED_FROM_LHN.includes(focusedRHPRoute?.name as RHPScreenOpenedFromLHN);
	// This may happen if this RHP doens't have a route that should be under the overlay defined.
	if (!matchingRootRoute \|\| isRHPScreenOpenedFromLHN) {
	metainfo.isCentralPaneAndBottomTabMandatory = false;
	metainfo.isFullScreenNavigatorMandatory = false;
	// If matchingRootRoute is undefined and it's a narrow layout, don't add a report screen under the RHP.
	matchingRootRoute = matchingRootRoute ?? (!isNarrowLayout ? {name: SCREENS.REPORT} : undefined);
	}

	if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') {
	const stateForBackTo = getStateFromPath(route.params.backTo, config);
	if (stateForBackTo) {
	// eslint-disable-next-line @typescript-eslint/no-shadow
	const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);

	const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find(
	// eslint-disable-next-line @typescript-eslint/no-shadow
	(route) => isCentralPaneName(route.name) \|\| route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR,
	);

	// If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen.
	if (rhpNavigator && rhpNavigator.state) {
	const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;

	if (isRHPinState) {
	return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
	}
	}

	// If we know that backTo targets the root route (central pane or full screen) we want to use it.
	if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) {
	return centralPaneOrFullScreenNavigator as NavigationPartialRoute<CentralPaneName \| typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR>;
	}
	}
	}

	if (isSmallScreenWidth) {
	if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD) {
	Navigation.goBack();
	}
	} else {
	Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD);
	}

[HOLD for Payment 2024-10-07][$250][Search v2.1] Web - App navigates from search page to inbox when refreshing #46773

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Aug 3, 2024

lanitochka17 commented on Aug 3, 2024

lanitochka17 commented on Aug 3, 2024

bernhardoj commented on Aug 4, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

melvin-bot commented on Aug 4, 2024

melvin-bot commented on Aug 4, 2024

rayane-d commented on Aug 6, 2024

rayane-d commented on Aug 7, 2024

52 remaining items

rayane-d commented on Oct 6, 2024

BugZero Checklist

lschurr commented on Oct 7, 2024

rayane-d commented on Oct 7, 2024

bernhardoj commented on Oct 8, 2024

lschurr commented on Oct 9, 2024

bernhardoj commented on Oct 9, 2024

rayane-d commented on Oct 9, 2024

lschurr commented on Oct 9, 2024

JmillsExpensify commented on Oct 15, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions