Web - LHN - Workspace switcher resets to Expensify when sending invoice for the first time

[IuliiaHerets]

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: 9.0.78-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Go to staging.new.expensify.com
2. Create a new workspace.
3. Go to workspace settings > More features.
4. Enable Invoices.
5. Go back to Inbox.
6. Open workspace switcher,
7. Select the new workspace.
8. Open FAB > Send invoice.
9. Send invoice from the new workspace.
10. Note that workspace switcher resets to Expensify after sending invoice.
11. Repeat Step 8 to 9.
12. Note that workspace switcher does not reset to Expensify when sending invoice for the second time.

Expected Result:

In Step 10, the workspace switcher will not reset to Expensify when sending invoice for the first time (production behavior).

Actual Result:

In Step 10, the workspace switcher resets to Expensify when sending invoice for the first time.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6701610_1735009589993.20241224_105858.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @cristipaval (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

💬 A slack conversation has been started in #expensify-open-source

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

[parasharrajat]

It might be expected behaviour given that you are sending invoice to chat outside the workspace.

OK, so this is a real issue. We are sending invoice on workspace chat.

[parasharrajat]

Looking for issue.

[cristipaval]

It might be expected behaviour given that you are sending invoice to chat outside the workspace.

OK, so this is a real issue. We are sending invoice on workspace chat.

DANG! This is bad!

[cristipaval]

Looking for issue.

Thanks @parasharrajat!

[parasharrajat]

This issue is a regression from #54030.

[jasperhuangg]

I don't think we need to block deploy on this, but @chrispader please look into this when you can. #54030 looks a bit too complicated to revert.

[parasharrajat]

@jasperhuangg you can add External label to draw some attention if needed.

[bernhardoj]

Proposal

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

WS switcher resets to all when sending invoice.

What is the root cause of that problem?

When we send a new invoice, we will switch to the policy that we use to send the invoice. Before #54030, when we navigate to a HOME screen and the home screen already exists on the bottom tab stack, it will simply update the params, but now, it will always push a new screen.

And a new sidebar screen is mounted. In the sidebar screen, we have an effect. that the purpose is to switch to the all workspace view if the active workspace is not exist.

App/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx

Lines 24 to 38 in ad99c20

	const [activeWorkspace] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID ?? CONST.DEFAULT_NUMBER_ID}`);
	useEffect(() => {
	Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
	Timing.start(CONST.TIMING.SIDEBAR_LOADED);
	}, []);
	useEffect(() => {
	if (!!activeWorkspace || activeWorkspaceID === undefined) {
	return;
	}
	Navigation.navigateWithSwitchPolicyID({policyID: undefined});
	updateLastAccessedWorkspace(undefined);
	}, [activeWorkspace, activeWorkspaceID]);

In our case, the activeWorkspaceID is available, but the activeWorkspace object is not, and that is because it's still loading.

App/src/libs/actions/IOU.ts

Lines 1417 to 1431 in ad99c20

	if (companyName && companyWebsite) {
	optimisticData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policy?.id}`,
	value: {
	invoice: {
	companyName,
	companyWebsite,
	pendingFields: {
	companyName: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	companyWebsite: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	},
	},
	},
	});

Why is it loading only when we send an invoice to a new workspace? It's because when we send an invoice to a new workspace, we submit the company name and website. So, the onyx has a pending merge and useOnyx will return it as a loading.
https://github.com/Expensify/react-native-onyx/blob/620fccfc9c3dd7704526f1a453a39f46de6d956d/lib/useOnyx.ts#L245-L248

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

Return early when the onyx is still loading.

const [activeWorkspace, activeWorkspaceResult] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID ?? CONST.DEFAULT_NUMBER_ID}`);
const isLoading = isLoadingOnyxValue(activeWorkspaceResult);

useEffect(() => {
    if (!!activeWorkspace || activeWorkspaceID === undefined || isLoading) {
        return;
    }

    Navigation.navigateWithSwitchPolicyID({policyID: undefined});
    updateLastAccessedWorkspace(undefined);
}, [activeWorkspace, activeWorkspaceID, isLoading]);

(or we can set allowStaleData to true for the useOnyx, but I prefer the above)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[bernhardoj]

In case we want to make it external, I have a proposal above.