[$250] Expense - Not here page shows up briefly when deleting the expense

[izarutskaya]

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.8-1
Reproducible in staging?: Y
Reproducible in production?: N
Found when executing PR : #44537
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to DM.
3. Submit two expenses to the user.
4. Open any of the transaction thread.
5. Tap on the report header.
6. Tap Delete expense..
7. Delete the expense.

Expected Result:

Not here page will not show up when deleting the expense.

Actual Result:

Not here page shows up briefly when deleting the expense.

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

Bug6544678_1721193497553.ScreenRecording_07-17-2024_13-15-33_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c66dfe570a289fac
• Upwork Job ID: 1813534350182069816
• Last Price Increase: 2024-08-20
• Automatic offers:
• alitoshmatov | Reviewer | 103693223
• wildan-m | Contributor | 104145017

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @iwiznia (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

Screen_Recording_20240717_113000_Chrome.mp4

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01c66dfe570a289fac

[melvin-bot]

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

[allgandalf]

We pass isFromRHP to true without checking the screen size (whether we are on larger screen or smaller):

App/src/pages/ReportDetailsPage.tsx

Line 778 in fc9b7ac

ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current, true);

This will trigger us to dismiss the modal first and then navigate back:

App/src/libs/ReportUtils.ts

Lines 3594 to 3600 in fc9b7ac

	if (isFromRHP) {
	Navigation.dismissModal();
	}
	Navigation.isNavigationReady().then(() => {
	Navigation.goBack(backRoute);
	});
	}

Simplest fix would be to use the check the screen size from the hook useResponsiveLayout and only pass true if we are on bigger screen

const {isSmallScreenWidth} = useResponsiveLayout();

ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current, !isSmallScreenWidth ? true: false); 

I assume there is a check for large screen too, both can be used either ways

[allgandalf]

I assume that is what was intended with the PR #44537

[allgandalf]

does that make sense to you @iwiznia ?

[iwiznia]

Oh right, seems that PR did not fix the issue it was intended to fix, going to close in favor of that issue

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[daledah]

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

Proposal

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

Not here page shows up briefly when deleting the expense.

What is the root cause of that problem?

After deleting the transaction, we delete the data first here, then navigate later

App/src/pages/ReportDetailsPage.tsx

Line 778 in 3710936

ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current, true);

So the data will be updated even before the user finishes the navigation back, this causes the brief deleted-transaction data (not found page/[Deleted expense] text) to show in the screen (which is still navigating back).

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

We should navigate the user back first, then delete the transaction data in the background after the user has successfully navigated. This will make sure through out the navigation back, the user still sees the correct transaction data.

• Update this to

const { urlToNavigateBack } = IOU.prepareToCleanUpMoneyRequest(iouTransactionID, requestParentReportAction, true);
navigateBackToAfterDelete.current = urlToNavigateBack;

So at this step we just set the navigateBackToAfterDelete.current and not deleting the data yet (we'll delete in a step later). This logic is the same as the values returned when calling IOU.deleteMoneyRequest here so there'll be no problem

• In

  App/src/pages/ReportDetailsPage.tsx

  Line 806 in bdeab94

  ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current, true);

  (after triggering navigation back), wait for the navigate back to complete (using the animated transition as we did at useAutoFocusInput) and only delete the transaction data then (this part)

ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current, true);

setTimeout(() => {
    IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, isSingleTransactionView);
}, CONST.ANIMATED_TRANSITION);

In summary, we only change the order in which optimistic data update and navigation back happens, we don't make any logic change. That's for submit expense case, we should check track expense case and handle in similar manner.

What alternative solutions did you explore? (Optional)

We could additionally add the change suggested above here, but this does not fully fix the issue, [Deleted expense] still shows and also buttons disappearing, before the user is navigated back. So it's an incremental thing we can add.

Alternative to waitForNavigate approach, we can use setTimeout with the navigation timeout (similar to in here). Or we can delete the data in InteractionManager.runAfterInteractions, but it might not work as reliably.

[wildan-m]

@alitoshmatov Would you be able to take another look at my proposal? #45576 (comment) The branch link has been updated with the latest main, and my quick test doesn't show any regressions. (#45576 (comment))

[melvin-bot]

@iwiznia, @sonialiap, @luacmartins, @alitoshmatov, @daledah Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[alitoshmatov]

@alitoshmatov Would you be able to take another look at my proposal? #45576 (comment) The branch link has been updated with the latest main, and my quick test doesn't show any regressions. (#45576 (comment))

Looks promising, let me do some more testing

[melvin-bot]

@iwiznia, @sonialiap, @luacmartins, @alitoshmatov, @daledah Huh... This is 4 days overdue. Who can take care of this?

[sonialiap]

@alitoshmatov how's the testing going?

[iwiznia]

Is there any progress here? It's been a week without update, should we re-assign?

[allgandalf]

Commenting on #45576 (comment),

@alitoshmatov then i think on small screens we can navigate first and then delete, would you please consider my proposal again here, thanks

[melvin-bot]

@iwiznia, @sonialiap, @luacmartins, @alitoshmatov, @daledah Still overdue 6 days?! Let's take care of this!

[alitoshmatov]

I think we can go with @wildan-m's proposal which soft deletes transaction

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Current assignees @iwiznia and @luacmartins are eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @wildan-m 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[wildan-m]

working on the PR, perform more tests

[wildan-m]

@alitoshmatov @iwiznia there is an open issue that will block the result of the test of this issue in iOS, I can experience it after implement the solution, should we keep creating the PR or hold this one?

[iwiznia]

If you think that your code will work once that other issue is done, then let's send the PR but keep this issue on hold till we can actually test the results in all platforms.

[melvin-bot]

@iwiznia, @wildan-m, @sonialiap, @luacmartins, @alitoshmatov, @daledah Eep! 4 days overdue now. Issues have feelings too...

[wildan-m]

@alitoshmatov @iwiznia after further testing, my solution doesn't solve all cases, the briefly [deleted] text also shown in the report header.

Kapture.2024-10-03.at.14.31.38.mp4

While I search for another solution, you should consider reapplying the "help wanted" label to attract better proposals.

[allgandalf]

If so, then i guess we can work on my proposal to improve it and apply further

[alitoshmatov]

Thank you @wildan-m . Then we are back on choosing proposals

[alitoshmatov]

FYI: Looks like we have the same issue when deleting tasks

Screen.Recording.2024-10-06.at.2.54.54.PM.mov

[wildan-m]

Proposal Updated

• Move prev main solution to alternative
• Add new main solution using decoupled navigation url generation