IOU - Details modal is dismissed after editing title

[izarutskaya]

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: v9.0.5-3
Reproducible in staging?: Y
Reproducible in production?: New feature
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Navigate to a workspace chat
2. Submit a manual expense
3. Click on the IOU preview component
4. Click on report header > Title
5. Edit title & click Save

Expected Result:

User should be returned to Details RHP

Actual Result:

Details RHP modal is dismissed

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

Bug6535803_1720442342286.Screen_Recording_2024-07-08_at_3.14.10_in_the_afternoon.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @adelekennedy (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]

@adelekennedy 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.

[izarutskaya]

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

[etCoderDysto]

Proposal

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

Details modal is dismissed after editing title

What is the root cause of that problem?

We are dismissing the modal and navigating to the previous report here

App/src/pages/EditReportFieldPage.tsx

Line 84 in 51dd814

Navigation.dismissModal(report?.reportID);

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

We should change Navigation.dismissModal(report?.reportID) with Navigation.goBack()

What alternative solutions did you explore? (Optional)

[iwiznia]

That makes sense @etCoderDysto but wouldn't that break the feature for the other places where we call this (that existed before we added the possibility of editing the title like this)?

[etCoderDysto]

I have been trying to check other pages after applying. I found that different component is used other pages as room's details page. But to make things sure. I will check other places that use the same component.

[etCoderDysto]

@iwiznia The component seems to be used only in ModalStackNavigator. I think it is safe to make the change.

[iwiznia]

BTW this comes from this PR #44671 that's solving this issue #44149

[Julesssss]

Solution seems good 👍

[etCoderDysto]

Should I raise a quick PR?

[iwiznia]

Yeah, looks good to me too, but I am kind of surprised though, what was that component/page used for before? It must've been used for something in some flow, but I am not sure where... I'd want us to test that flow to ensure we are not breaking it.

[etCoderDysto]

I am raising a pr asap. And investigating what component was used before.

[etCoderDysto]

@iwiznia I have found a flow where we use EditReportsFieldPage. We use it in MoneyReportView to display editable report fields when the user has enabled 'Report Fields' in more features.

App/src/components/ReportActionItem/MoneyReportView.tsx

Lines 83 to 86 in c5c4ea8

	<MenuItemWithTopDescription
	description={Str.UCFirst(reportField.name)}
	title={fieldValue}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', reportField.fieldID))}

I have changed the logic to address that we don't change exiting behaviour in MoneyReportView as below. We navigate back only when user is changing report title.

 if (isReportFieldTitle) {
            ReportActions.updateReportName(report.reportID, value, report.reportName ?? '');
            Navigation.goBack();
        } else {
            ReportActions.updateReportField(report.reportID, {...reportField, value: value === '' ? null : value}, reportField);
            Navigation.dismissModal(report?.reportID);
        }
        

[etCoderDysto]

The PR is ready for review.

[iwiznia]

Ah nice, I knew that code must've been there for a reason 😄

[Julesssss]

CPd. thanks

[jayeshmangwani]

@adelekennedy Please assign me to the issue for tracking the payment (reviewed PR)

[adelekennedy]

done @jayeshmangwani !

[etCoderDysto]

@adelekennedy the pr was deployed to production 8 days ago.

[adelekennedy]

Thank you @etCoderDysto - the automatic update failed here.

[etCoderDysto]

Yes, mevlin is not adding lables.

[adelekennedy]

@jayeshmangwani 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:

• The PR that introduced the bug has been identified. Link to the PR:
• 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:
• 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:
• A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

[adelekennedy]

Payouts due:

• Contributor: $250 @etCoderDysto (Upwork)
• Contributor+: $250 @jayeshmangwani (NewDot)

[adelekennedy]

@etCoderDysto will you link your upwork profile here?

[jayeshmangwani]

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR: [Details Revamp] Allow Editing Report Title from Details Page #44671
• [@jayeshmangwani] 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: [Details Revamp] Allow Editing Report Title from Details Page #44671 (comment)
• [@jayeshmangwani] 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
• [@jayeshmangwani] Determine if we should create a regression test for this bug. Yes
• [@jayeshmangwani] 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.

Regression Test Proposal

1. Go to a workspace chat.
2. Submit a manual expense.
3. Click on the IOU preview component.
4. Click on the report header -> Title.
5. Edit the title and click Save.
6. Verify that you are navigated back to the Details page.

Do we agree 👍 or 👎

[adelekennedy]

offer sent @etCoderDysto

[etCoderDysto]

offer sent @etCoderDysto

I have accepted the offer. Thank you!

[adelekennedy]

https://github.com/Expensify/Expensify/issues/414450

[jayeshmangwani]

Requested $250

[JmillsExpensify]

$250 approved for @jayeshmangwani