[$250] Remove the redundant + New workspace button from the Workspaces page when no workspaces exist

[jamesdeanexpensify]

Slack thread
https://expensify.slack.com/archives/C07HPDRELLD/p1729808604309359

Problem
When no workspaces exist and you go to the Workspaces screen, we offer two buttons that do the same thing (New workspace). Not only is this redundant, it unnecessarily takes up screen real estate on mobile and distracts the user with two CTAs (though they're the same, one CTA is still best practice).

Solution
When no workspaces exist and you go to the Workspaces screen, remove the top + New workspace button so only the bottom/card New workspace button shows.

Where I'm talking about

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850943776036588977
• Upwork Job ID: 1850943776036588977
• Last Price Increase: 2024-10-28

Issue Owner

Current Issue Owner: @thesahindia

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-10-25 21:37:43 UTC.

Proposal


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

Remove the redundant + New workspace button from the Workspaces page when no workspaces exist

What is the root cause of that problem?

Design improvement

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


• We can remove the {!shouldUseNarrowLayout && getHeaderButton()} & {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButton()}</View>}.
  

  App/src/pages/workspace/WorkspacesListPage.tsx

  Lines 381 to 390 in 44c9260

  	<HeaderWithBackButton
  	title={translate('common.workspaces')}
  	shouldShowBackButton={shouldUseNarrowLayout}
  	shouldDisplaySearchRouter
  	onBackButtonPress={() => Navigation.goBack()}
  	icon={Illustrations.BigRocket}
  	>
  	{!shouldUseNarrowLayout && getHeaderButton()}
  	</HeaderWithBackButton>
  	{shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButton()}</View>}

• We can just update above lines to:

                <HeaderWithBackButton
                    title={translate('common.workspaces')}
                    shouldShowBackButton={shouldUseNarrowLayout}
                    shouldDisplaySearchRouter
                    onBackButtonPress={() => Navigation.goBack()}
                    icon={Illustrations.BigRocket}
                />

• We can alsoe remove shouldDisplaySearchRouter from here.

What alternative solutions did you explore? (Optional)

• We should return null when isEmptyObject(workspaces) is true.
  

  App/src/pages/workspace/WorkspacesListPage.tsx

  Lines 361 to 370 in 44c9260

  	const getHeaderButton = () => (
  	<Button
  	accessibilityLabel={translate('workspace.new.newWorkspace')}
  	success
  	text={translate('workspace.new.newWorkspace')}
  	onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
  	icon={Expensicons.Plus}
  	style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
  	/>
  	);

• We can also hide the "+" icon on the workspace switcher page when !policies || isEmptyObject(policies) is true in WorkspaceSwitcherPage, for this we need to introduce a new prop to hide the "+" in WorkspacesSectionHeader.
  

  App/src/pages/WorkspaceSwitcherPage/WorkspacesSectionHeader.tsx

  Lines 31 to 50 in 44c9260

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

Result

[zfurtak]

Hello, I'm Zuza from Software Mansion agency and I could take care of the issue 😊

[Krishna2323]

@jamesdeanexpensify, I think you forgot to add the external label 😅

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Throwing a LOT of 🎯🎯🎯 over here, ha
@thesahindia can you please review @Krishna2323 's proposal at the top here? If it doesn't work out we can assign @zfurtak .