[$250] Search - When plenty of expenses are created already, haven't created expenses message shown

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: V9. 0.51-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Log in account which has more expenses
3. Tap search at bottom
4. Note in expenses section, lots of expenses created are displayed
5. Tap on search icon on top
6. Search any random text "yin"
7. Tap on the search term shown in dropdown
8. Note user navigated to page showing haven't created any expenses

Expected Result:

When plenty of expenses are created already, haven't created expenses message must not be displayed.

Actual Result:

When plenty of expenses are created already, haven't created expenses message is displayed.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6640858_1729506326799.screenrecorder-2024-10-20-14-42-36-244_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848389047150206359
• Upwork Job ID: 1848389047150206359
• Last Price Increase: 2024-10-21

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

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

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-10-21 10:54:45 UTC.

Proposal

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

When plenty of expenses are created already, haven't created expenses message shown

What is the root cause of that problem?

App/src/components/Search/index.tsx

Line 280 in 4575341

const shouldShowEmptyState = !isDataLoaded || data.length === 0;

We only check if data.length===0 here.

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

We should add an additional check, show EmptySearchView only id queryJSON is non empty.

Optionally we could create a new component to show user for noMatchingResults instead of EmptySearchView when query is not empty and search data is empty.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

Proposal

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

Search - When plenty of expenses are created already, haven't created expenses message shown

What is the root cause of that problem?

We show "You haven't created any expenses yet" text on empty expense result

App/src/languages/en.ts

Lines 4292 to 4293 in b2fc5c9

	emptyExpenseResults: {
	title: "You haven't created any expenses yet",

This copy is not correct and not align the real situation

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

Change the copy to cover both conditions, either there is no expense created yet or no expense match the search term/filter

We can change to something like "No expenses to display", change both on en.ts and es.ts

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

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

Search - When plenty of expenses are created already, haven't created expenses message shown

What is the root cause of that problem?

We currently display haven't created message along with buttons as empty search view for expenses

App/src/pages/Search/EmptySearchView.tsx

Lines 116 to 129 in b2fc5c9

	case CONST.SEARCH.DATA_TYPES.EXPENSE:
	return {
	headerMedia: LottieAnimations.GenericEmptyState,
	headerStyles: [StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
	title: translate('search.searchResults.emptyExpenseResults.title'),
	subtitle: translate('search.searchResults.emptyExpenseResults.subtitle'),
	buttons: [
	{buttonText: translate('emptySearchView.takeATour'), buttonAction: () => Link.openExternalLink(navatticLink)},
	{
	buttonText: translate('iou.createExpense'),
	buttonAction: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID())),
	success: true,
	},
	],

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

We should check for no data created yet by additionally checking if queryJSON.filters are empty (we can also optionally determine by the emptiness of transaction)

App/src/components/Search/index.tsx

Line 280 in b2fc5c9

const shouldShowEmptyState = !isDataLoaded || data.length === 0;

  const shouldShowEmptyState = !isDataLoaded || data.length === 0;
    const noDataCreated = shouldShowEmptyState && isEmptyObject(queryJSON.filters);

pass default_empty(we will create a const for it) type to EmptySearchView for the non noDataCreated case

App/src/components/Search/index.tsx

Line 287 in b2fc5c9

);

                <EmptySearchView type={!noDataCreated && type === CONST.SEARCH.DATA_TYPES.EXPENSE ? `default_empty` : type} />

so that the common Nothing to show message can be displayed but if we want a more specific message for the case of empty search results for expenses we can have new copies and display them for the case of type expenses here

App/src/pages/Search/EmptySearchView.tsx

Lines 139 to 140 in b2fc5c9

	subtitle: translate('search.searchResults.emptyResults.subtitle'),
	headerContentStyles: styles.emptyStateFolderWebStyles,

We can solve similar problem for TRIP too

What alternative solutions did you explore? (Optional)

We can also optionally make the noDataCreated prop to EmptySearchView and display different copies (title and subtitle) for non noDataCreated case for expenses (and also for trip case if needed)

[melvin-bot]

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

[melvin-bot]

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