[Due for payment 2025-06-19] [$250] Update empty state GBR

[dylanexpensify]

Coming from this thread...

We've updated a few empty states in the workspace editor to have the pop up contain the CTA vs it being in the upper right hand side. However, not all of these have this, so we have an inconsistent experience for users when setting up their workspace which makes it confusing. Let's fix this by having the empty state pop ups contain a CTA. We'll also make sure to remove the upper-right hand button so that we don't have two of these buttons in one screen.

Pages to update:

• Tags
• Report fields
• Categories

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021923270909985166631
• Upwork Job ID: 1923270909985166631
• Last Price Increase: 2025-05-16
• Automatic offers:
• FitseTLT | Contributor | 107367308

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[nabi-ebrahimi]

Proposal

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

Some pages in the workspace editor (like Tags, Report fields, and Categories) show an inconsistent UI pattern for their empty states. While some include the primary call-to-action (CTA) directly within the empty state pop-up, others still rely on a CTA in the upper-right corner. This inconsistency can confuse users and create friction when setting up their workspace.

What is the root cause of that problem?

As part of a recent UI improvement, we updated some empty state screens to move the CTA into the pop-up, but this change was not applied uniformly across all relevant pages. As a result, users now encounter two different interaction patterns within the same experience, depending on which section they're in.

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

We should:

• Move the CTA into the empty state pop-up for the following pages:

  • Tags
  • Report fields
  • Categories

• Remove the CTA from the upper-right-hand corner of these pages to avoid duplication.

• Ensure visual and behavioral consistency with the updated empty states already implemented elsewhere in the workspace editor.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-13 16:46:08 UTC.

Proposal

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

Update empty state GBR

What is the root cause of that problem?

We always display the CTA buttons like Add tag/category, Settings or import spread sheet in top-right for both categories and tags

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 305 to 319 in 074a9fd

	{!hasAccountingConnections(policy) && (
	<Button
	success
	onPress={navigateToCreateCategoryPage}
	icon={Expensicons.Plus}
	text={translate('workspace.categories.addCategory')}
	style={[shouldUseNarrowLayout && styles.flex1]}
	/>
	)}
	<Button
	onPress={navigateToCategoriesSettings}
	icon={Expensicons.Gear}
	text={translate('common.settings')}
	style={[shouldUseNarrowLayout && styles.flex1]}
	/>

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 283 to 300 in 074a9fd

	if (shouldUseNarrowLayout ? !selectionMode?.isEnabled : selectedTags.length === 0) {
	return (
	<View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
	{!hasAccountingConnections && !isMultiLevelTags && (
	<Button
	success
	onPress={navigateToCreateTagPage}
	icon={Expensicons.Plus}
	text={translate('workspace.tags.addTag')}
	style={[shouldUseNarrowLayout && styles.flex1]}
	/>
	)}
	<Button
	onPress={navigateToTagsSettings}
	icon={Expensicons.Gear}
	text={translate('common.settings')}
	style={[shouldUseNarrowLayout && styles.flex1]}
	/>

and also import spread sheet in three menu items

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 379 to 383 in 074a9fd

	if (!hasAccountingConnectionsPolicyUtils(policy)) {
	menuItems.push({
	icon: Expensicons.Table,
	text: translate('spreadsheet.importSpreadsheet'),
	onSelected: () => {

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 338 to 342 in 074a9fd

	if (!hasAccountingConnections(policy)) {
	menuItems.push({
	icon: Expensicons.Table,
	text: translate('spreadsheet.importSpreadsheet'),
	onSelected: () => {

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

We should display the CTA buttons in both WorkspaceCategoriesPage and WorkspaceTagsPage inside the EmptyStateComponent when the list is empty.
Avoid the top right CTA's when the list is empty

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 305 in 074a9fd

{!hasAccountingConnections(policy) && (

                {!hasAccountingConnections(policy) && hasVisibleCategories && (

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Line 286 in 074a9fd

{!hasAccountingConnections && !isMultiLevelTags && (

                    {!hasAccountingConnections && hasVisibleTags && !isMultiLevelTags && (

We can also add the condition || isLoading along side the hasVisible condition so that it will appear in top-right in loading state b/c we don't display the empty state view in loading state.
We can also avoid displaying import spread sheet three menu when the list is empty (to only display it in empty state component) but in WorkspacePerDiemPage we display it in both the three dot menu and empty state component, so this needs to be decided by the design team.

Then we will display this buttons in EmptySearchComponent by passing buttons prop just like we do for WorkspacePerDiemPage

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Lines 478 to 490 in 074a9fd

	buttons={[
	{
	buttonText: translate('spreadsheet.importSpreadsheet'),
	buttonAction: () => {
	if (isOffline) {
	setIsOfflineModalVisible(true);
	return;
	}
	Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_IMPORT.getRoute(policyID));
	},
	success: true,
	},
	]}

passing the buttonAction (from onPress/onSelected), icon, success, buttonText (from text) and style of the corresponding Add Tag/Add Categories and import spreadsheet (if needed) CTAs and tweaking the styles as needed.
Note: We no longer display empty component for report fields, so no change is needed.

If needed we can also move the settings button in top-right too but I think it is no the CTA in this case as it is not directly related to the empty state, we also don't do the same for WorkspacePerDiemPage.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A

What alternative solutions did you explore? (Optional)

[dubielzyk-expensify]

Just a note that the Report fields UI is about to change and move into a Reports nav item so it won't need the same treatment 👍

[FitseTLT]

Yeah it has already moved it is in production 👍

[dylanexpensify]

Mocks updated, let's get this moving