[HOLD for payment 2022-11-24] [$500] mWeb- Blank page is displayed when tapped on Concierge or Send a message options

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #11857

Action Performed:

1. Open the site https://help.expensify.com/main
2. Click on Concierge button and verify it opens the Concierge chat in NewDot if the user is logged in.
3. Click on the Send message button and verify it opens the Concierge chat in NewDot too.

Expected Result:

By clicking on the Send message button and verify it opens the Concierge chat in NewDot too.

Actual Result:

Blank page is displayed when tapped on Concierge or Send a message options

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.2.16.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

11857.mWeb1.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @flodnv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[flodnv]

@kbecciv can you confirm this only happens on Mobile Web? I have tested on Desktop and also on Android with the native app and it works.

cc @marcochavezf as you are the author of #11857. Can this be external? 🤔

[kbecciv]

@flodnv
Correct, it happens only on mobile Web. Windows/Chrome is Pass for QA team.

11857.Web.mp4

[marcochavezf]

Oh interesting it only happens in mWeb (no native app installed). Yeah it can be external. FWIW this issue is not related to the help.expensify.com site, the problem is that for some reason https://new.expensify.com/concierge is not opening the Concierge report correctly only on mWeb (only if the user is logged in).

[melvin-bot]

Triggered auto assignment to @lschurr (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

Current assignee @flodnv is eligible for the External assigner, not assigning anyone new.

[lschurr]

Posted job.

https://www.upwork.com/ab/applicants/1582465027628163072/job-details
https://www.upwork.com/jobs/~0175ba72296e865638

[rushatgabhane]

@lschurr time to double? We don't have any proposals yet

[lschurr]

Yep! Doubled - https://www.upwork.com/jobs/~0175ba72296e865638

[Ollyws]

Proposal

The root cause of this bug is due to the recent addition of react-freeze, specifically in SidebarLinks.
This causes the LHN to freeze on small screens if the drawer is closed, which (when navigating directly to a chat) means App.setSidebarLoaded in the onLayout is never called and ONYXKEYS.IS_SIDEBAR_LOADED is never set to true.

This causes a problem when navigating directly to a chat on mobile because ReportScreen will not render unless ONYXKEYS.IS_SIDEBAR_LOADED is true, leaving the user with a blank screen.

One solution to this is to subscribe to ONYXKEYS.IS_SIDEBAR_LOADED in SidebarLinks and only enable Freeze after it has been set to true, however this causes an unnecessary re-render.

A better solution is to assign a variable in onLayout after App.setSideBarLoaded and only enable Freeze when it is true:

App/src/pages/home/sidebar/SidebarLinks.js

Lines 140 to 158 in 8a6bc17

	<Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}>
	<LHNOptionsList
	contentContainerStyles={[
	styles.sidebarListContainer,
	{paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
	]}
	data={optionListItems}
	focusedIndex={_.findIndex(optionListItems, (
	option => option.toString() === this.props.reportIDFromRoute
	))}
	onSelectRow={(option) => {
	Navigation.navigate(ROUTES.getReportRoute(option.reportID));
	this.props.onLinkClick();
	}}
	shouldDisableFocusOptions={this.props.isSmallScreenWidth}
	optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
	onLayout={App.setSidebarLoaded}
	/>
	</Freeze>

-               <Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}>
+               <Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded}>
                    <LHNOptionsList
                        contentContainerStyles={[
                            styles.sidebarListContainer,
                            {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
                        ]}
                        data={optionListItems}
                        focusedIndex={_.findIndex(optionListItems, (
                            option => option.toString() === this.props.reportIDFromRoute
                        ))}
                        onSelectRow={(option) => {
                            Navigation.navigate(ROUTES.getReportRoute(option.reportID));
                            this.props.onLinkClick();
                        }}
                        shouldDisableFocusOptions={this.props.isSmallScreenWidth}
                        optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
-                       onLayout={App.setSidebarLoaded}
+                       onLayout={() => {
+                           App.setSidebarLoaded();
+                           this.isSidebarLoaded = true;
+                       }}
                    />
                </Freeze>

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[lschurr]

Hi @rushatgabhane - could you review the added proposal?

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[Ollyws]

@lschurr Offer accepted.

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[Ollyws]

@lschurr @rushatgabhane Can I submit the PR now or do I need to wait until I'm assigned to this?

[melvin-bot]

📣 @Ollyws You have been assigned to this job by @flodnv!
Please apply to this job in Upwork 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 📖

[flodnv]

Go for it @Ollyws !

[Ollyws]

All yours @rushatgabhane

[flodnv]

@rushatgabhane can you review the PR please?

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

• @lschurr 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: https://github.com/Expensify/Expensify/issues/242924
• @rushatgabhane @flodnv The PR that introduced the bug has been identified. Link to the PR: Enable Modern Drawer in react-navigation #11550
• @lschurr 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:
• @lschurr A discussion in #contributor-plus 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:
• @lschurr Payment has been made to the issue reporter (if applicable)
• @lschurr Payment has been made to the contributor that fixed the issue (if applicable)
• @lschurr Payment has been made to the contributor+ that helped on the issue (if applicable)

[melvin-bot]

@flodnv, @Ollyws, @rushatgabhane, @lschurr Whoops! This issue is 2 days overdue. Let's get this updated quick!

[flodnv]

@lschurr next steps are on you^

[lschurr]

Asked for help here since I'm unsure about which test should be added. https://expensify.slack.com/archives/C01SKUP7QR0/p1668439426176659

[flodnv]

We should add these, from mWeb :

[lschurr]

Ok, I made this GH to request the test be added. @flodnv would you look at that and confirm I've done it correctly? (sorry first time doing all of this)

[flodnv]

LGTM, thanks 👍

[lschurr]

@rushatgabhane - I've invited you to apply for the job in Upwork. Can you accept the offer?

[mvtglobally]

Issue not reproducible during KI retests. (Third week)

[rushatgabhane]

@lschurr accepted, thanks!

[lschurr]

@Ollyws and @rushatgabhane have been paid! Closing.

[melvin-bot]

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

• Fix for: mWeb- Blank page is displayed when tapped on Concierge or Send a message options #12588

If no regressions arise, payment will be issued on 2022-11-24. 🎊