[HOLD for payment 2024-01-17] [$500] Request Money - If user reloads the IOU details page and go back, the same IOU page is shown

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.13-0
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):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Pre-requisite: user must be logged in and be a member of a workspace.

1. Go to workspace chat.
2. Initiate an IOU request.
3. On the details page, reload the page.
4. Tap on back button

Expected Result:

Once the back button is pressed, the amount page should be shown

Actual Result:

The IOU details page is shown again

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

Bug6314731_1702651670589.Bzxg0545_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ae972c8a1958f68f
• Upwork Job ID: 1736432777544433664
• Last Price Increase: 2023-12-17
• Automatic offers:
• tienifr | Contributor | 28066305

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[FitseTLT]

Proposal

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

If user reloads the IOU details page and go back, the same IOU page is shown

What is the root cause of that problem?

We push the route when we open deeplink here

App/src/libs/actions/Report.ts

Lines 2031 to 2032 in 8bef4bb

	Navigation.navigate(route as Route, CONST.NAVIGATION.ACTION_TYPE.PUSH);
	});

But we don't push if the route is the active route which is determined in getActiveRoute

App/src/libs/Navigation/Navigation.ts

Lines 118 to 119 in 8bef4bb

	return getActiveRoute().substring(1) === routePath;
	}

But in this case route we navigate to has a trailing /

App/src/libs/actions/Report.ts

Lines 2018 to 2019 in 990815f

	const route = ReportUtils.getRouteFromLink(url);
	if (route === ROUTES.CONCIERGE) {

but what we get from getActiveRoute() has no slash so getActiveRoute is returning false incorrectly thus we are pushing the route here

App/src/libs/Navigation/linkTo.ts

Lines 103 to 104 in 8bef4bb

	if (!isActiveRoute && type === CONST.NAVIGATION.ACTION_TYPE.PUSH) {
	minimalAction.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;

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

We should compare them after changing them to same form in here (remove the trailing slashes) to avoid future bugs

App/src/libs/Navigation/Navigation.ts

Lines 118 to 119 in 8bef4bb

	return getActiveRoute().substring(1) === routePath;
	}

    return getActiveRoute().substring(1) === routePath.replace(/\/$/, '');

What alternative solutions did you explore? (Optional)

We can also use more robust url comparing logic; may be use compare-urls to prevent future bugs. (We can use it also in other places where we compare urls 👍 )

[Charan-hs]

@FitseTLT I think You can use this Regex

routePath.replace(/\/$/, '')

[FitseTLT]

@Charan-hs Thx Replaced. 👍

[tienifr]

Proposal

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

The IOU details page is shown again

What is the root cause of that problem?

The URL structure that we have here have a redundant / at the end, which is inconsistent with other routes in the App.

This leads to the isActiveRoute logic here behaves incorrectly because 1 route has / and the end and the other doesn't.

So when the the current route is not the active route, it will push the current route into itself based on this logic, causing the issue.

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

1. We should make the URL structure consistent across the App by removing the ending / here. This also fixes a flicker where if you reload on the confirmation page, the ending / will disappear after the site is fully loaded.

2. That should be enough to fix the issue, but we can enhance the comparison logic here by normalize the routePath before comparing, we can do this by replacing all duplicate / like // or /// with / and removing the ending / sequence. Because sometimes duplicate / or ending / will still make the site behave correctly but the routePath will still contain those irregular slashes, causing this issue.

What alternative solutions did you explore? (Optional)

In 1, there're a few other routes that have the same problem, we need to fix it similarly.

[rushatgabhane]

I like @FitseTLT's proposal because they explained the root cause first

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @tgolen, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

We can also use more robust url comparing logic; may be use compare-urls to prevent future bugs. (We can use it also in other places where we compare urls 👍 )

That should be enough to fix the issue, but we can enhance the comparison logic here by normalize the routePath before comparing, we can do this by replacing all duplicate / like // or /// with / and removing the ending / sequence. Because sometimes duplicate / or ending / will still make the site behave correctly but the routePath will still contain those irregular slashes, causing this issue

@FitseTLT i think that using a library to normalize urls before comparing is an overkill. The app could only have small issues related to trailing slashes. Nothing more complex.

I like that you gave a detailed solution and also a way to prevent such bugs in future tho

[tienifr]

@rushatgabhane would you mind giving some feedback on my proposal?

I think the inconsistency of the routes (some having ending /, some don't) is what we should fix here, because the issue doesn't happen for other routes. The comparison logic enhancement is an add-on to that.

The app could only have small issues related to trailing slashes. Nothing more complex.

@rushatgabhane also not just trailing slashes, you can modify the URL to have double / in the middle or end and the same issue also will happen, replacing the trailing slash as in the selected proposal won't fix these issues. I agree we don't need a library though, just need correct regex as mentioned in my proposal.

[tgolen]

I agree with @tienifr that the proper solution would also cleanup and make the routes consistently defined. I favor the proposal from @tienifr.

[FitseTLT]

@tgolen The reason I stated to avoid future bugs in my proposal is because I prefered ensuring the comparison to not be affected by trailing slashes as they are irrelevant. In case another route is created in the future with trailing slashes we would be facing the same issue again and again. I think we should be favoring more robust comparison on the isActiveRoute function to solve the problem from the root as we are having several related problems. Look at these related issue this.

[tienifr]

I think we should be favoring more robust comparison on the isActiveRoute function to solve the problem from the root as we are having several related problems

@FitseTLT the isActiveRoute comparison is not the root cause of this issue because we wouldn't have this issue if the routes are properly defined.

So making the routes consistently defined fixes the root cause, and the isActiveRoute comparison enhancement is an add-on to make it more robust, but it's not required for the issue (I agree that it should be added though and will do it in the PR).

I agree with @tienifr that the proper solution would also cleanup and make the routes consistently defined. I favor the proposal from @tienifr.

@tgolen would you mind assigning me to this GH to get this fixed, thanks!

[FitseTLT]

@tienifr As I have stated clearly in my proposal (to avoid future bugs) it is clear that I chose the more inclusive solution instead of only fixing this specific issue not like I missed the root cause. @tgolen The reason I preferred making the comparison non-dependent on irrelevant trailing slashes is (as I clearly stated in my proposal to avoid future bugs) to avoid future bugs that could occur by adding a route with trailing slashes as the one in these case; as much as possible we should prefer solutions that prevent future bugs not only focus on the issue posted that was my principle on choosing my proposal.

[tgolen]

@FitseTLT I understand that and you've repeated that several times, so you don't need to say it further. IMO a custom lint rule to catch that would be better than your proposal.

[melvin-bot]

📣 @tienifr 🎉 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 📖

[tienifr]

PR ready for review #33444.

[tgolen]

Looks like this has a PR and is actively being reviewed.

[tgolen]

PR is still ongoing.

[melvin-bot]

@tgolen @rushatgabhane @laurenreidexpensify @tienifr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@tgolen, @rushatgabhane, @laurenreidexpensify, @tienifr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[thienlnam]

Could you also take a look at this issue which appears to be caused from this? #34184

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.23-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Remove redundant and trailing slashes in route path #33444

If no regressions arise, payment will be issued on 2024-01-17. 🎊

For reference, here are some details about the assignees on this issue:

• @rushatgabhane requires payment through NewDot Manual Requests
• @tienifr requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rushatgabhane] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@rushatgabhane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rushatgabhane] Determine if we should create a regression test for this bug.
• [@rushatgabhane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Refactor the money request creation flow #28618

2. The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/28618/files#r1454533414

3. A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N.A. We've handled trailing slashes. So this bug shouldn't happen in future.

4. Determine if we should create a regression test for this bug. No

5. If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again - N.A.

[rushatgabhane]

@laurenreidexpensify could you please add payment summary for this issue. Thank you 🙇

[laurenreidexpensify]

Payment Summary

Contributor - @tienifr paid in Upwork $500
C+ Review - @rushatgabhane pls request in newdot $500

[JmillsExpensify]

$500 approved fror @rushatgabhane based on comment above.