[HOLD for payment 2024-11-20] [$125] Don't show two creation options at the same time in the workspace switcher

[JmillsExpensify]

Problem: When we prompt users to create a new workspace in the workspace switcher, they become confused by two options that do the same thing, which leads to frustration.

Solution: Let's simplify the decisions we're asking users to take when creating a workspace, and in particular, let's not add creation options that do the same thing and compete with our "green brick road" pattern.

All in all, our solution will look like this:

• Don't show the plus button when we show the empty state promoting workspace creation.
  

For clarity, this means that we should show the small plus button only when the empty state doesn't show. (Related, the empty state should only show when someone doesn't have an existing group workspace that they're a member of).

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[JmillsExpensify]

Let me know if you have any questions on this issues, happy to clarify.

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-11-05 11:54:40 UTC.

Proposal

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

Don't show two creation options at the same time in the workspace switcher

What is the root cause of that problem?

We did not hide the option if the user does not have workspaces or member group of a workspace

App/src/pages/WorkspaceSwitcherPage/WorkspacesSectionHeader.tsx

Lines 31 to 33 in 3d0f309

	<Tooltip text={translate('workspace.new.newWorkspace')}>
	<PressableWithFeedback
	accessibilityLabel={translate('workspace.new.newWorkspace')}

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

We should check if the user has a workspace or a member of other group workspaces then we will show the option inside the workspace switcher page

const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);

{Policy.hasActiveChatEnabledPolicies(Object.values(allPolicies ?? {})) && (
    <Tooltip text={translate('workspace.new.newWorkspace')}>
        <PressableWithFeedback
            accessibilityLabel={translate('workspace.new.newWorkspace')}
            role={CONST.ROLE.BUTTON}
            onPress={() => {
                const activeRoute = Navigation.getActiveRouteWithoutParams();
                interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt('', '', false, false, activeRoute));
            }}
        >
            {({hovered}) => (
                <Icon
                    src={Expensicons.Plus}
                    width={12}
                    height={12}
                    additionalStyles={[styles.buttonDefaultBG, styles.borderRadiusNormal, styles.p2, hovered && styles.buttonHoveredBG]}
                    fill={theme.icon}
                />
            )}
        </PressableWithFeedback>
    </Tooltip>
)}

It should similar to promotion create workspace button

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

Lines 456 to 459 in 3d0f309

	...(!isLoading && !Policy.hasActiveChatEnabledPolicies(allPolicies)
	? [
	{
	displayInDefaultIconColor: true,

In this issue we decided to return true for hasActiveChatEnabledPolicies if the user is member of other group workspaces

What alternative solutions did you explore? (Optional)

[JmillsExpensify]

Following on that proposal, please check this related issue as it's important that we stay consistent with it. In short, we shouldn't be showing the empty state as long as someone is a member of other group workspaces (whether or not they are policy expense chats enabled).

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-11-05 12:05:03 UTC.

Proposal

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

Don't show two creation options at the same time in the workspace switcher

What is the root cause of that problem?

We do not hide the Plus icon for empty state view:

App/src/pages/WorkspaceSwitcherPage/WorkspacesSectionHeader.tsx

Lines 31 to 33 in 3d0f309

	<Tooltip text={translate('workspace.new.newWorkspace')}>
	<PressableWithFeedback
	accessibilityLabel={translate('workspace.new.newWorkspace')}

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

We need to pass shouldShowCreateWorkspace:

App/src/pages/WorkspaceSwitcherPage/index.tsx

Line 149 in 3d0f309

const shouldShowCreateWorkspace = usersWorkspaces.length === 0;

to the below component:

App/src/pages/WorkspaceSwitcherPage/index.tsx

Line 186 in 3d0f309

<WorkspacesSectionHeader />

<WorkspacesSectionHeader shouldShowCreateWorkspace={!shouldShowCreateWorkspace} />

And then in WorkspacesSectionHeader:

(shouldShowCreateWorkspace && <Tooltip text={translate('workspace.new.newWorkspace')}>
                <PressableWithFeedback
                    accessibilityLabel={translate('workspace.new.newWorkspace')}

We already pass shouldShowCreateWorkspace to show the empty content screen:

App/src/pages/WorkspaceSwitcherPage/index.tsx

Line 196 in 3d0f309

shouldShowListEmptyContent={shouldShowCreateWorkspace}

What alternative solutions did you explore? (Optional)

[nyomanjyotisa]

Proposal

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

Don't show two creation options at the same time in the workspace switcher

What is the root cause of that problem?

Changes request

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

Accept shouldShowCreateWorkspace on WorkspacesSectionHeader

App/src/pages/WorkspaceSwitcherPage/WorkspacesSectionHeader.tsx

Line 16 in 3d0f309

function WorkspacesSectionHeader() {

And only show the + icon if shouldShowCreateWorkspace is true

App/src/pages/WorkspaceSwitcherPage/WorkspacesSectionHeader.tsx

Line 31 in 3d0f309

<Tooltip text={translate('workspace.new.newWorkspace')}>

            {shouldShowCreateWorkspace && (
                <Tooltip text={translate('workspace.new.newWorkspace')}>
                     ...
                </Tooltip>
            )}

Pass shouldShowCreateWorkspace, but we should use the opposite of the existing shouldShowCreateWorkspace variable, so we should pass !shouldShowCreateWorkspace

App/src/pages/WorkspaceSwitcherPage/index.tsx

Line 186 in 3d0f309

<WorkspacesSectionHeader />

                    <WorkspacesSectionHeader
                        shouldShowCreateWorkspace={!shouldShowCreateWorkspace}
                    />

Result

What alternative solutions did you explore? (Optional)