[HOLD for payment 2024-07-22][$125] mWeb - IOU - Clicking back from expense title edit page after a refresh takes to LHN

[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: 1.4.66-0
Reproducible in staging?: Y
Reproducible in production?: N
**If this was caught during regression testing, add the test name, ID and link from TestRail:**N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #40704

Action Performed:

1. Navigate to staging.new.expensify.com
2. Sign in with an expensifail account
3. Create a workspace
4. Open workspace chat page
5. Create 2 IOUs
6. Open expense report page
7. Click on "Title"
8. Refresh the page
9. Click on the back icon at the top left corner

Expected Result:

App takes user back to the expense report page

Actual Result:

App takes user to the LHN

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

Bug6461799_1714061912067.Screen_Recording_20240425_191539_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011da57b8f26d630ba
• Upwork Job ID: 1783627161453916160
• Last Price Increase: 2024-06-13
• Automatic offers:
• ishpaul777 | Reviewer | 102842730
• dominictb | Contributor | 102842731

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[lanitochka17]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011da57b8f26d630ba

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[allgandalf]

Proposal

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

Refreshing the page on expense title exit page and pressing back leads to LHN

What is the root cause of that problem?

We do not have onBackButtonPress defined for the RHP modal:

App/src/pages/EditReportFieldPage.tsx

Lines 110 to 115 in 6acc903

	<HeaderWithBackButton
	title={fieldName}
	threeDotsMenuItems={menuItems}
	shouldShowThreeDotsButton={!!menuItems?.length}
	threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
	/>

The default fallback is Navigation.goBack()

App/src/components/HeaderWithBackButton/index.tsx

Line 29 in 6acc903

onBackButtonPress = () => Navigation.goBack(),

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

We need to define onBackButtonPress, which will dismiss the modal:

<HeaderWithBackButton
        title={fieldName}
       threeDotsMenuItems={menuItems}
      shouldShowThreeDotsButton={!!menuItems?.length}
      threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
     onBackButtonPress={() => Navigation.dismissModalWithReport(report)}
/>

Or we can simply use `dismissModal` instead we need to pass reportID there

What alternative solutions did you explore? (Optional)

[CK-codemax]

Refreshing the page on expense title exit page and pressing back leads to LHN

The Navigation.dismissModalWithReport solution seems really good as it goes indepth .
The report parameter suggests that it might be expecting an object that contains information about the modal or the report that the modal is associated with. This could include details about the modal's state, the data it's displaying, or any other relevant information that might be needed to properly dismiss the modal.

The Navigation.dismissModal dismisses the modal by identifying the modal to be dismissed using a reportID. This suggests a simpler approach where the modal's identity is determined solely by its ID, without the need for additional context or information.

The choice between Navigation.dismissModalWithReport(report) and Navigation.dismissModal(reportID) depends on the specific requirements of this application. If you need to perform additional actions or checks before dismissing the modal, dismissModalWithReport(report) might be the better choice. If your dismissal logic is straightforward and only requires the modal's ID, dismissModal(reportID) could be more suitable.

I also explored other options like using a Global Modal State Management to manage the visibility of modals globally. This approach allows you to control the modal's visibility from anywhere in your application, making it easier to dismiss the modal in response to various events, not just the back button press.

[melvin-bot]

📣 @CK-codemax! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[CK-codemax]

Contributor details
Your Expensify account email: whoroochuko@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01598dca7cc455581b

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

@roryabraham, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ishpaul777]

Hey i was OOO past few days and have a few pending issues will get to this one real soon, sorry for delay

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ishpaul777]

on my list! will priortixe ASAP

[ishpaul777]

we can base on the following assumption: We should navigate to the ReportScreen if the current RHP route contains the reportID params. Hence the solution is to check for reportID and navigate back to the report screen accordingly

I feel this would be a safe assumption 👍 Lets roll with @dominictb Proposal

🎀 👀 🎀

[melvin-bot]

Current assignee @roryabraham is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @ishpaul777 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

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

[roryabraham]

Great, @dominictb we look forward to reviewing your PR!

[dominictb]

Seems like the PR is on production already @roryabraham? Shall we have the Awaiting payment label here?

[melvin-bot]

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

[roryabraham]

Yep, sorry about that.

[ishpaul777]

not overdue

[melvin-bot]

@roryabraham, @dylanexpensify, @ishpaul777, @dominictb Whoops! This issue is 2 days overdue. Let's get this updated quick!

[dylanexpensify]

Payment summary:

• Contributor: @dominictb $125
• Contributor+: @ishpaul777 $125

Please apply/request!

[dylanexpensify]

Done!