[HOLD for payment 2024-07-22] [$250] Web - Chat - Notification preferences RHP does not animate smoothly

[m-natarajan]

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.2-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
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:

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Tap on the chat header.
4. Tap Notification preferences.
5. Tap back button.
6. Repeat Step 4 and 5 a few times.

Expected Result:

Notification preferences RHP will animate smoothly.

Actual Result:

Notification preferences RHP does not animate smoothly.

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

Bug6524534_1719349596350.np.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010b485abb3cf759ae
• Upwork Job ID: 1805831211824781554
• Last Price Increase: 2024-07-03
• Automatic offers:
• Krishna2323 | Contributor | 102995239

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[m-natarajan]

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

[m-natarajan]

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

[mallenexpensify]

@robertjchen confirming this is happening on Staging and not on production
Logs -

logs-2024-06-26 01_30_31.960.txt

Vid -

2024-06-25_18-29-16.mp4

Unsure where to check to find the offending PR

[robertjchen]

Thanks! Yeah- it definitely seems to be stemming for a recent change 🤔 Going to tag External to see if someone can spot the issue here 👍

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010b485abb3cf759ae

[melvin-bot]

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

[Krishna2323]

Proposal

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

Web - Chat - Notification preferences RHP does not animate smoothly

What is the root cause of that problem?

SCREENS.REPORT_SETTINGS.NOTIFICATION_PREFERENCES isn't added SCREENS_WITH_AUTOFOCUS. The animation is interrupted because of the autofocus.

App/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

Lines 4 to 14 in 9862fdb

	const SCREENS_WITH_AUTOFOCUS: string[] = [
	...Object.keys(CENTRAL_PANE_WORKSPACE_SCREENS),
	SCREENS.REPORT,
	SCREENS.REPORT_DESCRIPTION_ROOT,
	SCREENS.PRIVATE_NOTES.EDIT,
	SCREENS.SETTINGS.PROFILE.STATUS,
	SCREENS.SETTINGS.PROFILE.PRONOUNS,
	SCREENS.NEW_TASK.DETAILS,
	SCREENS.MONEY_REQUEST.CREATE,
	];

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 50 to 63 in b021195

	// We don't want to ovverride autofocus on these screens.
	initialFocus: () => {
	if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) {
	return false;
	}
	return undefined;
	},
	setReturnFocus: (element) => {
	if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) {
	return false;
	}
	return element;
	},
	}}

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

Add SCREENS.REPORT_SETTINGS.NOTIFICATION_PREFERENCES in SCREENS_WITH_AUTOFOCUS. We should also check for other similar pages, I found that this bug also appears on hold reasons page.

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2024-06-26.12-15-04.mp4

[Krishna2323]

Proposal Updated

• Minor edits

[Ollyws]

As far as I can see this was caused by #42592 but given that PR was an agency PR I think we can fix this here.
@Krishna2323 Your solution seems to work but I don't really understand how #42592 broke it or why your solution fixes it, could you expand a bit on the RCA please?

[melvin-bot]

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

[Ollyws]

It seems what's happened here is that the initial culprit was the focus-trap PR (#39520), but this issue only became visibly apparent after enabling concurrent mode (#42592).

So @Krishna2323's proposal looks like the right way to go.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[robertjchen]

Great find! Let's go with @Krishna2323 's proposal 👍

[melvin-bot]

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

[Krishna2323]

@Ollyws PR ready for review ^

[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 9.0.6-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Web - Chat - Notification preferences RHP does not animate smoothly. #44934

If no regressions arise, payment will be issued on 2024-07-22. 🎊

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

• @Ollyws requires payment through NewDot Manual Requests
• @Krishna2323 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:

• [@Ollyws] The PR that introduced the bug has been identified. Link to the PR:
• [@Ollyws] 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:
• [@Ollyws] 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:
• [@Ollyws] Determine if we should create a regression test for this bug.
• [@Ollyws] 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.
• [@mallenexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Ollyws]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR:

As I mentioned here this was caused by a combination of two PRs so I don't think we can really pin the blame on either one.

• 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:

N/A

• 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

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

Yes

• 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 any 1:1 chat.
2. Tap on the chat header.
3. Tap Notification preferences.
4. Tap back button.
5. Repeat Step 3 and 4 a few times.
6. Verify animation works correctly
7. Open a room report
8. Tap on the chat header.
9. Select Members
10. Tap back button.
11. Repeat Step 9 and 10 a few times.
12. Verify animation works correctly
13. On room details page select Settings
14. Tap back button.
15. Repeat Step 13 and 14 a few times.
16. Verify animation works correctly

Do we agree 👍 or 👎

[Ollyws]

Requested in ND.

[mallenexpensify]

Contributor: @Krishna2323 paid $ via Upwork
Contributor+: @Ollyws due $250 via NewDot

Test case, thanks @Ollyws

• https://github.com/Expensify/Expensify/issues/414490

[JmillsExpensify]

$250 approved for @Ollyws