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

[twilight2294]

Updated proposal

Updated the proposal to add an extra point and pass the prop to main component

[NJ-2020]

Proposal Updated

[brunovjk]

Thank you, @NJ-2020, for proposal 1, but I don’t think the solution is suitable here.

Between proposals 2 and 3, both suggest a correct solution of passing shouldShowCreateWorkspace as a prop to WorkspacesSectionHeader. @twilight2294 (proposal 2) submitted first and identified the correct overall solution. @nyomanjyotisa (proposal 3) contributed a key detail—setting shouldShowCreateWorkspace to !shouldShowCreateWorkspace when passing it. I’m not sure if one used information from the other, but I think this detail could be noticed later anyway, like other details (e.g., prop type) we must check in PR. IMO the core of the solution was pointed out by proposal 2 first.

I think we can go with @twilight2294's proposal. However, both posted the proposal almost at the same time, difficult decision, I ask for your help with this call hehe

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MariaHCD, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[nyomanjyotisa]

@brunovjk @MariaHCD I believe my proposal is the first with the correct solution

Timestamp:

• 2024-11-05T12:03:30Z - Proposal 2 posted
• 2024-11-05T12:04:58Z - Proposal 3 posted
• 2024-11-05T12:07:55Z - Proposal 2 solution updated

Btw to be honest I started writing my proposal before proposal 2 was posted, and don't use any information from proposal 2

[twilight2294]

I think we can go with @twilight2294's #52030 (comment).

@brunovjk , yes i was the first one to give the correct approach to the bug, so my solution is valid in this case :)

[MariaHCD]

I agree with @brunovjk's decision here 👍🏼 The two proposals were posted at almost the same time and propose the same fix.

Let's proceed with @twilight2294 for this one.

Thank you for the contribution, @nyomanjyotisa!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.60-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

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

If no regressions arise, payment will be issued on 2024-11-20. 🎊

For reference, here are some details about the assignees on this issue:

• @brunovjk requires payment (Needs manual offer from BZ)
• @twilight2294 requires payment (Needs manual offer from BZ)

[melvin-bot]

@brunovjk @JmillsExpensify @brunovjk The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[brunovjk]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment:

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

1. Login with new account
2. Go to workspace switcher
3. Verify that there is no Plus icon when there are no workspaces present.

Do we agree 👍 or 👎

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @brunovjk paid $(AMOUNT) via Upwork (LINK)
• ROLE: @twilight2294 paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@JmillsExpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[JmillsExpensify]

Payment summary:

• Contributor: @twilight2294 $250 via Upwork
• Review: @brunovjk $250 via Upwork

[JmillsExpensify]

Offers sent via Upwork

[brunovjk]

Accepted @JmillsExpensify

[JmillsExpensify]

Thanks everyone!