[hold for payment 2024-08-26] [$250] Submit expense - Not here page displayed in the background after a refresh

[lanitochka17]

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: N/A
Email or phone of affected tester (no customers): bezawitgebremichael+11223344@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on FAB
3. Click on start chat
4. Refresh the page
5. Observe everything works as normal
6. Click on FAB
7. Click on submit expense
8. Refresh the page

Expected Result:

Everything should work as normal just as it is on step 5

Actual Result:

Not here page gets displayed in the background when submit expense page is open on the right and user refreshes the page which is a different behavior that doesn't happen when other right hand pages are open

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6554859_1722100817716.4_5848162808948069362.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a60ec1cb3ed7a96b
• Upwork Job ID: 1820825832663945809
• Last Price Increase: 2024-08-06
• Automatic offers:
• nkdengineer | Contributor | 103466921

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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.

[lanitochka17]

@joekaufmanexpensify 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

[lanitochka17]

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

[tsa321]

Edited by proposal-police: This proposal was edited at 2024-08-05 06:59:14 UTC.

Proposal

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

A "not found" page is displayed in the background after refreshing the page or when creating an IOU request.

What is the root cause of that problem?

When a user clicks on the + Fab button to create an IOU request, the app generates an optimistic report and includes the ID in the route path of the create IOU request.

The report only contains the report name and an error field with a "not found" property.

When a user visits the app by entering a URL in the address bar or refreshing the page, the app adapts the root state by storing the correct navigation state/path to reach that address. This adaptation is handled by getAdaptedStateFromPath. For example, with a URL like /create/submit/start/1/1782162509946918/manual, getAdaptedStateFromPath tries to include the report screen in the navigation state due to the presence of the report ID in the URL, as seen in :

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

Lines 154 to 156 in 8fd61d6

	if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]) {
	return {name: SCREENS.REPORT, params: {reportID}};
	}

This results in the report screen being added to the navigation root state, even though it is not required for IOU request URLs to open the correct report in the background to start the IOU request step.

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

We should modify getMatchingRootRouteForRHPRoute to ensure that the report screen is only added to the root state if the URL path starts with /r/. This will prevent unnecessary addition of the report screen to navigation root state for URLs that do not require it.

We can adjust the condition in :

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

Lines 154 to 156 in 8fd61d6

	if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]) {
	return {name: SCREENS.REPORT, params: {reportID}};
	}

to be:

if (route?.path.indexOf('/r/') === 0 || route?.path.indexOf('r/') === 0) {
        const reportID = (route.params as Record < string, string | undefined > )?.reportID;
        if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]) {
            return {name: SCREENS.REPORT, params: {reportID}};
        }
    }

Additionally, if there are specific routes where the report screen must be included regardless of the URL path, we can add these routes to an exception list (currently I don't find any route).

[nkdengineer]

Proposal

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

Not here page gets displayed in the background when submit expense page is open on the right and user refreshes the page which is a different behavior that doesn't happen when other right hand pages are open

What is the root cause of that problem?

When we submit an expense from FAB, the reportID is random but we call OpenReport API here and then a invalid report is stored in Onyx.

App/src/pages/iou/request/step/withWritableReportOrNotFound.tsx

Line 69 in 2eb65f8

ReportActions.openReport(route.params.reportID);

Then the report screen with invalid reportID is added here when we open a RHP screen

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

Lines 154 to 156 in 2eb65f8

	if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]) {
	return {name: SCREENS.REPORT, params: {reportID}};
	}

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

Line 187 in 2eb65f8

if (focusedRHPRoute) {

App/src/libs/Navigation/linkTo/index.ts

Lines 135 to 141 in 2eb65f8

	const {adaptedState, metainfo} = getAdaptedStateFromPath(path, linkingConfig.config);
	if (adaptedState && (metainfo.isCentralPaneAndBottomTabMandatory || metainfo.isFullScreenNavigatorMandatory)) {
	const diff = getPartialStateDiff(rootState, adaptedState as State<RootStackParamList>, metainfo);
	const diffActions = getActionsFromPartialDiff(diff);
	for (const diffAction of diffActions) {
	root.dispatch(diffAction);
	}

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

1. OPTIONAL: We should prevent calling the OpenReport API in the create flow

App/src/pages/iou/request/step/withWritableReportOrNotFound.tsx

Line 69 in 2eb65f8

ReportActions.openReport(route.params.reportID);

2. We should safely check whether the reportID exists or not here since some not found reports can be stored in Onyx

if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.reportID) {
    return {name: SCREENS.REPORT, params: {reportID}};
}

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

Lines 154 to 156 in 2eb65f8

	if (ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]) {
	return {name: SCREENS.REPORT, params: {reportID}};
	}

3. We can add the money request screen SCREENS.MONEY_REQUEST.CREATE here

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

Line 24 in 2eb65f8

const RHP_SCREENS_OPENED_FROM_LHN = [SCREENS.SETTINGS.SHARE_CODE, SCREENS.SETTINGS.PROFILE.STATUS, SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE] satisfies Screen[];

What alternative solutions did you explore? (Optional)

[joekaufmanexpensify]

@tsa321 did you link this issue with the other one above because these have the same RCA?

[tsa321]

@joekaufmanexpensify this is simlar to #46713 and my proposal can fix it too, but RCA a little bit differerent