[HOLD for payment 2023-11-22] [$500] Workspace - Error page appears for a second after deleting a Workspace

[lanitochka17]

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: 1.3.87-10
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
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. Log in with any account
2. Open the workspace #admins or #announce cha
3. Press the chat header to open the details
4. Press the workspace name below the chat name. You will be navigated to the workspace page
5. Delete the workspace

Expected Result:

You will be navigated back to the chat details

Actual Result:

Error page appears for a second and then navigated back to the chat details

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6244780_1697826660099.Error.mp4

MacOS: Desktop

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Error page appears for a second after deleting a Workspace

What is the root cause of that problem?

When we confirm delete
We call this function

App/src/pages/workspace/WorkspaceInitialPage.js

Lines 77 to 83 in bf8b849

	const confirmDeleteAndHideModal = useCallback(() => {
	const policyReports = _.filter(props.reports, (report) => report && report.policyID === policy.id);
	Policy.deleteWorkspace(policy.id, policyReports, policy.name);
	setIsDeleteModalOpen(false);
	// Pop the deleted workspace page before opening workspace settings.
	Navigation.goBack(ROUTES.SETTINGS_WORKSPACES);
	}, [props.reports, policy]);

As a result PolicyUtils.isPendingDeletePolicy(props.policy) becomes true

App/src/pages/workspace/WorkspaceInitialPage.js

Line 204 in bf8b849

shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}

But at this point the animation is not over yet

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

I think the easiest way to fix this is
Will update the condition
So that FullPageNotFoundView is displayed only then when the screen is in focus

shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy) || PolicyUtils.isPendingDeletePolicy(props.policy)) && navigation.isFocused()}

What alternative solutions did you explore? (Optional)

An alternative might be that we would first navigate and then call Policy.deleteWorkspace

Or in shouldShow condition we can use previous value for props.policy using usePrevious

Since we will no longer be able to reopen the workspace
This could be a simple alternative

[samilabud]

Proposal

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

Error page appears for a second after deleting a Workspace

What is the root cause of that problem?

When the prop shouldShow accepts any change of policy, like PolicyUtils.isPendingDeletePolicy(policy), the component renders each time the policy change, in this case when pressing the delete workspace button the policy value trigger 3 times.

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

The best option should be to use the react hook (useState) when the policy value change to send a true/false to the component below:

App/src/pages/workspace/WorkspaceInitialPage.js

Line 204 in 4a1e2b3

shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}

const [shouldShowErrorPage, setShouldShowErrorPage] = useState(false);

useEffect(()=>{
        return setShouldShowErrorPage(_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy))
    },[policy])

Before changes:

Workspace.when.deleted.before.changes.mp4

After changes:

Workspace.tests.reduced.mp4

[dukenv0307]

Proposal

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

Error page appears for a second and then navigated back to the chat details

What is the root cause of that problem?

In here, we'll show not found page if the workspace is pending delete. So right after we delete the workspace here, it will show not found page briefly.

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

We should not show the not found page in the case of "now the workspace is pending delete, but it's not before", because that means the user just deleted the page and we're pending the navigation.

We can update this line to

shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy))}

And use the const prevPolicy = usePrevious(policy); to get previous policy.

I also notice another issue, when we open the workspace initial page in 2 tabs, then we delete the workspace in 1 tab, it will show Not Found page in the other tab. In both tabs it should return back to the Workspace List page IMO because if not it will cause confusion for the user. If we want to fix this, we should remove this line and rely on the policy state (if the policy was not deleted and now it's deleted) to navigate instead

useEffect(() => {
    if (PolicyUtils.isPendingDeletePolicy(policy) && !PolicyUtils.isPendingDeletePolicy(prevPolicy)) {
        Navigation.goBack(ROUTES.SETTINGS_WORKSPACES);
    }
}, [policy, prevPolicy]);

(for deleting workspace in 1 device, it syncs to another device, it will require a bit more fix, but as far as I know we consider dynamic updates across devices as bugs now)

What alternative solutions did you explore? (Optional)

Using page focus status: will cause Not Found page to not show up when transitioning in "real" Not Found case.
Relying on PolicyUtils.isPendingDeletePolicy(prevPolicy) only: will cause issues when the delete workspace query fails and we fallback to failure data, we need to check both current and prev policy.