[$250] Onboarding - Changing the size of the window dismisses the onboarding modal

[IuliiaHerets]

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: v9.0.31-4 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): dave0123seife@gmail.com Issue reported by: Applause Internal Team

Action Performed:

1. Resize the height of the window to be a very small mobile viewport
2. Sign in as a new user 3 When the onboarding modal shows resize to normal window size

Expected Result:

Resizing the of window does not dismisses the onboarding modal

Actual Result:

Resizing the of window dismisses the onboarding modal

Workaround:

Unknown

Platforms:

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/3f521fd2-0dbf-486b-b417-9d2acf48fec9

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834487171313044824
• Upwork Job ID: 1834487171313044824
• Last Price Increase: 2024-09-13
• Automatic offers:
• jjcoffee | Reviewer | 103951138
• c3024 | Contributor | 103951139

Issue Owner

Current Issue Owner: @jjcoffee

[melvin-bot[bot]]

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

[IuliiaHerets]

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

[c3024]

Proposal

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

Logging in on a narrow window and then enlarging it to a non-narrow window dismisses the onboarding modal

What is the root cause of that problem?

When we login in the narrow view, the routes in state only have BottomTabNavigator and OnboardingModalNavigator

and when we enlarge it we find the template state from the path https://github.com/Expensify/App/blob/bbe7d3814151d27b2f0ee7bae5e6e17d0e670d1f/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L59 and here REPORT screen is added to the template state https://github.com/Expensify/App/blob/56033cbee88f70308f7580c1d730e190797f9f41/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts#L240-L242 We extract the central pane from the template state and insert it into state if there is no top most central pane route in it https://github.com/Expensify/App/blob/bbe7d3814151d27b2f0ee7bae5e6e17d0e670d1f/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L74-L88 and we insert it before modalRoutes https://github.com/Expensify/App/blob/bbe7d3814151d27b2f0ee7bae5e6e17d0e670d1f/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L26 but here https://github.com/Expensify/App/blob/bbe7d3814151d27b2f0ee7bae5e6e17d0e670d1f/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L19-L20 only Left and Right Modal Navigators are included in the modal routes and Onboarding Navigator is not so it is moved to an index before the REPORT route.

So, the order of navigators will become BottomTabNavigator > Onboarding Navigator > Report and the Onboarding Modal gets dismissed.

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

Exclude and include the NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR in these two lines respectively. https://github.com/Expensify/App/blob/bbe7d3814151d27b2f0ee7bae5e6e17d0e670d1f/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L19-L20

What alternative solutions did you explore? (Optional)

[VictoriaExpensify]

Recreated the issue and I agree that this seem like a problem we should fix

[VictoriaExpensify]

It doesn't look like this is being resolved elsewhere

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[jjcoffee]

@c3024's proposal LGTM!

:ribbon::eyes::ribbon: C+ reviewed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @jjcoffee 🎉 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[bot]]

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

[c3024]

Deployed to production on 18-Sep. Payment due on 25-Sep.

[jjcoffee]

• The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/pull/37733
• 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/37733#issuecomment-2373876553
• 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 - fairly specific case that was missed
• 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. Reduce the browser window to a narrow size.
2. Login with a new account.
3. Wait till the onboarding modal opens up.
4. Enlarge the screen till the central pane (report screen) shows up.
5. Verify that the onboarding modal is not dismissed.

Do we agree 👍 or 👎

[jjcoffee]

@VictoriaExpensify This one's due payment now as it was deployed last week.