Workspace - User can navigate to deleted workspace editor while offline

[vincdargento]

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.78-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
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): N/A
Issue reported by: Applause Internal Team

Action Performed:

1. Create a workspace
2. Navigate to the workspace and enable workflows
3. Go to connect bank account and copy the URL
4. Go offline
5. Delete the workspace
6. Send the copied URL in any chat
7. Click on it to navigate to the editor
8. Change any value while offline

Expected Result:

User should not be able to navigate to workspace editor after the workspace has been deleted (as in PR #27743)

Actual Result:

User is able to navigate to workspace editor in a deleted workspace while offline

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

[melvin-bot]

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

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-12-26 19:04:03 UTC.

Proposal

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

User is able to navigate to workspace editor in a deleted workspace while offline

What is the root cause of that problem?

The condition to display not found page now doesn't check the policy is pending delete

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 436 to 439 in 56e35ce

	if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
	return (
	<ScreenWrapper testID={ReimbursementAccountPage.displayName}>
	<FullPageNotFoundView

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

1. We should display not found page if the policy is pending delete

if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy))) {

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 436 to 439 in 56e35ce

	if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
	return (
	<ScreenWrapper testID={ReimbursementAccountPage.displayName}>
	<FullPageNotFoundView

2. Optional: If we want to fix other workspace pages, we should implement the shouldShow logic here to return true if the policy is pending delete. We should add this logic back PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy) that will prevent not found page display briefly after we delete the workspace

return (!isEmptyObject(policy) && !PolicyUtils.isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !prevShouldShowPolicy) || (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy));

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 156 to 160 in 58539c5

	const shouldShow = useMemo(() => {
	// If the policy object doesn't exist or contains only error data, we shouldn't display it.
	if (((isEmptyObject(policy) || (Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
	return true;
	}

Or we can pass isOffline param as false here then this function will return false if the policy is pending delete

const shouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(policy, false, currentUserLogin), [policy, currentUserLogin]);
const prevShouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(prevPolicy, false, currentUserLogin), [prevPolicy, currentUserLogin]);

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 154 in 58539c5

const shouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(policy, isOffline, currentUserLogin), [policy, isOffline, currentUserLogin]);

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 155 in 58539c5

const prevShouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(prevPolicy, isOffline, currentUserLogin), [prevPolicy, isOffline, currentUserLogin]);

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

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[twilight2294]

Proposal

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

User can navigate to deleted workspace editor while offline

What is the root cause of that problem?

The actual cause is that we allow user to access the workspace via deep linking even when the policy is pending the delete action:

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 156 to 160 in d649ce2

	const shouldShow = useMemo(() => {
	// If the policy object doesn't exist or contains only error data, we shouldn't display it.
	if (((isEmptyObject(policy) || (Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
	return true;
	}

This causes the pages to show when the pending action is delete

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

We need to add a extra check in shouldShow such that it will block the whole screen of the policy when the action is pending delete too:

    const shouldShow = useMemo(() => {
        // If the policy object doesn't exist or contains only error data, we shouldn't display it.
        if (((isEmptyObject(policy) || PolicyUtils.isPendingDeletePolicy(policy) ||(Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
            return true;
        }

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 156 to 160 in d649ce2

	const shouldShow = useMemo(() => {
	// If the policy object doesn't exist or contains only error data, we shouldn't display it.
	if (((isEmptyObject(policy) || (Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
	return true;
	}

We also need to update shouldShowPolicy because we need to display the not found text, this will be set to false:

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 179 in d649ce2

subtitleKey={shouldShowPolicy ? 'workspace.common.notAuthorized' : undefined}

Note that the whole policy options need to be blocked here and not just the bank option as in delete case, the more features/ categories show a not found page:

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

N/A this is a UI bug

What alternative solutions did you explore? (Optional)

[nkdengineer]

Updated proposal to fix other places if we want to fix this here.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-26 22:40:30 UTC.

Proposal

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

Workspace - User can navigate to deleted workspace editor while offline

What is the root cause of that problem?

We already show not found page for pending delete for both WorkspaceInitialPage

App/src/pages/workspace/WorkspaceInitialPage.tsx

Line 351 in 12e0941

const shouldShowNotFoundPage = isEmptyObject(policy) || (!shouldShowPolicy && !prevShouldShowPolicy);

and WorkspacePageWithSections

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 163 in 12e0941

return (!isEmptyObject(policy) && !PolicyUtils.isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !prevShouldShowPolicy);

but that only happens in online mode b/c shouldShowPolicy returns true for pending delete workspaces for offline case

App/src/libs/PolicyUtils.ts

Lines 218 to 223 in 12e0941

	function shouldShowPolicy(policy: OnyxEntry<Policy>, isOffline: boolean, currentUserLogin: string | undefined): boolean {
	return (
	!!policy?.isJoinRequestPending ||
	(!!policy &&
	policy?.type !== CONST.POLICY.TYPE.PERSONAL &&
	(isOffline || policy?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || Object.keys(policy.errors ?? {}).length > 0) &&

this behaviour is correct for WorkspaceListPage here because we want to show the pending delete workspace in offline mode but not in these places.

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

We should first rename isOffline param of shouldShowPolicy to shouldShowPendingDeleteWorkspace then we pass false for the shouldShowPolicy we are using in

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 154 to 155 in 12e0941

	const shouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(policy, isOffline, currentUserLogin), [policy, isOffline, currentUserLogin]);
	const prevShouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(prevPolicy, isOffline, currentUserLogin), [prevPolicy, isOffline, currentUserLogin]);

and additionally here to display not found for the case of worspace inital setting page

App/src/pages/workspace/WorkspaceInitialPage.tsx

Lines 347 to 348 in 12e0941

	const shouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(policy, isOffline, currentUserLogin), [policy, isOffline, currentUserLogin]);
	const prevShouldShowPolicy = useMemo(() => PolicyUtils.shouldShowPolicy(prevPolicy, isOffline, currentUserLogin), [prevPolicy, isOffline, currentUserLogin]);

And additionally for WorkspacePageWithSections there is a problem of offline indicator showing on the top of the page for small screen (because we shouldForceFullScreen that will make the view fixed position and it distorts the normal display of the offline indicator on the bottom of the screen) so as we don't show the wide screen offline indicator when not found page is displayed here we can make it consistent with it and disable the small screen offline indicator when displaying not found page so add

            shouldShowOfflineIndicator={!shouldShow}

but if we want to show offline indicator when displaying not found page in WorkspacePageWithSections like we do in WorkspaceInitialPage we can make the shouldForceFullScreen here to apply only to large screens (!shouldUseNarrowLayout or !isSmallScreenWidth) because we don't need it for small screen and the offline indicator will display in the bottom correctly.
BTW there are other policy pages that are not currently displayed under WorkspacePageWithSections like PolicyAccountingPage, WorkspaceCategoriesPage, WorkspaceMoreFeaturesPage, WorkspaceTagsPage, WorkspaceTaxesPage, WorkspaceReportFieldsPage, WorkspacePerDiemPage, PolicyDistanceRatesPage and PolicyRulesPage, WorkspaceInvitePage, ReimbursementAccountPage and many others so we should make consistent fixes there too whether via WorkspacePageWithSections or applying a not found component (or AccessOrNotFoundWrapper) independently 👍

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

What alternative solutions did you explore? (Optional)