[HOLD for payment 2024-04-09] [$500] Workspace - New Workspace button doesn't create WS and shows no default name

[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.4.53-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: Exploratory around https://expensify.testrail.io/index.php?/tests/view/4428235
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to NewDot and login
2. Click WS dropdown in the top of LHN
3. Click +
4. Change WS name and click Save
5. Click New Workspace button in the top right corner

Expected Result:

New WS created, default name should be displayed

Actual Result:

Default name is not displayed, and WS is not created

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6415317_1710529817272.video_32.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0171b0f044271b7cff
• Upwork Job ID: 1769593725439668224
• Last Price Increase: 2024-03-18
• Automatic offers:
• alitoshmatov | Reviewer | 0

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[lanitochka17]

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

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[HezekielT]

Proposal

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

Workspace - New Workspace button doesn't create WS and shows no default name.

What is root cause of that problem?

When we create a new workspace for the first time by clicking the + icon that is found in workspace switcher(on LHN), we call App.createWorkspaceWithPolicyDraftAndNavigateToIt()

App/src/pages/WorkspaceSwitcherPage.tsx

Line 223 in 4e599b2

interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt());

Inside createWorkspaceWithPolicyDraftAndNavigateToIt(), we generate a policyID, create a draft initial workspace and then navigate to WORKSPACE_INITIAL which renders the WorkspaceInitialPage component.

Now in WorkspaceInitialPage, we have a useEffect that creates the workspace by calling savePolicyDraftByNewWorkspace() if we have a draft policy id as shown below.

App/src/pages/workspace/WorkspaceInitialPage.tsx

Lines 76 to 86 in 4e599b2

	useEffect(() => {
	const policyDraftId = policyDraft?.id;
	if (!policyDraftId) {
	return;
	}
	App.savePolicyDraftByNewWorkspace(policyDraft.id, policyDraft.name, '', policyDraft.makeMeAdmin);
	// We only care when the component renders the first time
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

The problem is that the above useEffect runs only once when the component mounts and the next time we try to create a second workspace by clicking on the create workspace button on the top right corner of the screen after modifying the first workspace's name, the useEffect will not run again since WorkspaceInitialPage component is already rendered and there are no dependencies that would trigger a rerender => preventing savePolicyDraftByNewWorkspace() from being called for the second workspace even if we have a draft one => leading to the workspace not being created and the default name not being shown.

This is the root cause.

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

We need to update the dependency of the useEffect so that App.savePolicyDraftByNewWorkspace() will be called whenever there is a change in draft policy. We can add policyDraft or policyDraft?.id to the dependency here.

App/src/pages/workspace/WorkspaceInitialPage.tsx

Line 86 in 4e599b2

}, []);

Result

result-ws-created.mov

[ShridharGoel]

Proposal

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

Workspace lists page opens up when trying to update workspace name, currency etc after creating a new workspace.

What is the root cause of that problem?

We shouldn't be seeing the workspaces list when editing the newly created workspace name.

This logic is unnecessarily pushing the workspaces list page in the central pane.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 185 to 189 in e40fba1

	// When we open a screen in RHP from FullScreenNavigator, we need to add the appropriate screen in CentralPane.
	// Then, when we close FullScreenNavigator, we will be redirected to the correct page in CentralPane.
	if (matchingRootRoute.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
	routes.push(createCentralPaneNavigator({name: SCREENS.SETTINGS.WORKSPACES}));
	}

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

There's no need of the above logic, we can simply remove it and it will solve the navigation issue. Same issue can be seen at multiple other places which will also get resolved.

This is same as my proposal here: #38436 (comment)

[allgandalf]

Proposal

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

What is the root cause of that problem?

We have a logic added from #37421 Ideal Nav PR which sets the Central Pane to Workspace settings page

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 185 to 189 in e40fba1

	// When we open a screen in RHP from FullScreenNavigator, we need to add the appropriate screen in CentralPane.
	// Then, when we close FullScreenNavigator, we will be redirected to the correct page in CentralPane.
	if (matchingRootRoute.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
	routes.push(createCentralPaneNavigator({name: SCREENS.SETTINGS.WORKSPACES}));
	}

This was done to address the condition where RHP was opened from FullScreenNavigator, to adjust to the correct page of central pane.

But over here we only consider the condition when RHP was opened from LHN and not the condition where RHP is opened from Central Pane.

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

We need to consider an additional Condition to check if the RHP was opened from LHN and then only Set the Central Pane to workspace settings Page:

- if (matchingRootRoute.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
+ if ((matchingRootRoute.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) && isRHPScreenOpenedFromLHN) {
                routes.push(createCentralPaneNavigator({name: SCREENS.SETTINGS.WORKSPACES}));
            }          

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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