[HOLD for payment 2024-12-17] [$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 contributors@expensify.com 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-28
• Automatic offers:
• FitseTLT | Contributor | 104700929

Issue Owner

Current Issue Owner: @isabelastisser

[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, and data here represents searchResult so it would trigger following code for and show EmptySearchView for both case -

1. when there are no expenses.(Expected result)
2. when search data returned from server is empty.(Needs Improvement)

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

We should show EmptySearchView only when search query is empty and expanses are empty as well.
When search query is not empty (ie. case 2) but search results returned from server is empty.

• we could create a new component to show user for NoMatchingResults instead of EmptySearchView.
• NoMatchingResults component would have design similar to EmptySearchView

More About The `NoMatchingResults` component...

• Should have an appropriate illustration (chosen by design team)
• Title could be - "No Matching Results" or "No Matching Results To Show" or something similar.
• Description - "There are no matching results to show . Use green button below to edit search search filters." or "Use green button to edit search filters or take a tour of Expensify to learn more" or something similar.
• Add button - Reset Filters or Reset - to reset search query.
• Add button - Search Filters - which will redirect to search filters for editing search query.
• Optionally add - Take a Tour button.

Note

This is general outline, Particular details should be discussed with Design team.

Optionally we should also do the same for other types - Chat, Invoices, Trips.(ie. show variation of NoMatchingResult when query is not empty but search result returned from server 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]

Edited by proposal-police: This proposal was edited at 2024-10-24 15:45:05 UTC.

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?

For Expense, we always show "You haven't created any expenses" on the empty state regardless the search filter and expense status

App/src/pages/Search/EmptySearchView.tsx

Lines 116 to 131 in f806997

	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,
	},
	],
	headerContentStyles: styles.emptyStateFolderWebStyles,
	};

App/src/languages/en.ts

Lines 4292 to 4293 in b2fc5c9

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

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

Pass queryJSON to EmptySearchView

App/src/components/Search/index.tsx

Line 301 in 642fd97

<EmptySearchView type={type} />

Inside case CONST.SEARCH.DATA_TYPES.EXPENSE: create new variable shouldShowNoExpenseCreated and set this value to true if no filter and the status is "all"

const shouldShowNoExpenseCreated = isEmptyObject(queryJSON.filters) && queryJSON.status === CONST.SEARCH.STATUS.EXPENSE.ALL;

and only change the title based on shouldShowNoExpenseCreated, and keep the subtitle and the buttons the same for all conditions on Expense type since I think it is needed

title: shouldShowNoExpenseCreated ? translate('search.searchResults.emptyExpenseResults.title') : translate('search.searchResults.emptyResults.title'),

Additionally, I think we should create new copy for this, like "No expenses to display"

App/src/pages/Search/EmptySearchView.tsx

Lines 116 to 131 in 642fd97

	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,
	},
	],
	headerContentStyles: styles.emptyStateFolderWebStyles,
	};

If we want to change all(the title, subtitle, and remove the buttons) we can change to the following

if (type === CONST.SEARCH.DATA_TYPES.TRIP) {
            return {
                headerMedia: LottieAnimations.TripsEmptyState,
                headerStyles: StyleUtils.getBackgroundColorStyle(theme.travelBG),
                headerContentStyles: StyleUtils.getWidthAndHeightStyle(375, 240),
                title: translate('travel.title'),
                titleStyles: { ...styles.textAlignLeft },
                subtitle: subtitleComponent,
                buttons: [
                    {
                        buttonText: translate('search.searchResults.emptyTripResults.buttonText'),
                        buttonAction: () => TripsResevationUtils.bookATrip(translate, setCtaErrorMessage, ctaErrorMessage),
                        success: true,
                    },
                ],
            };
        } else if (type === CONST.SEARCH.DATA_TYPES.EXPENSE && isEmptyObject(queryJSON.filters) && queryJSON.status === CONST.SEARCH.STATUS.EXPENSE.ALL) {
            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,
                    },
                ],
                headerContentStyles: styles.emptyStateFolderWebStyles,
            };
        } else {
            return {
                headerMedia: LottieAnimations.GenericEmptyState,
                headerStyles: [StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
                title: translate('search.searchResults.emptyResults.title'),
                subtitle: translate('search.searchResults.emptyResults.subtitle'),
                headerContentStyles: styles.emptyStateFolderWebStyles,
            };
        }

What alternative solutions did you explore? (Optional)

Create new function on ReportUtils to check if there is any expense on ONYXKEYS.COLLECTION.REPORT

function hasAnyExpense(): boolean {
    const allReports = ReportConnection.getAllReports();

    if (!allReports) {
        return false;
    }

    return Object.values(allReports).some((report) => isExpenseReport(report));
}

Or use allTransactions instead and create the function on TransactionUtils

Call that function here and only show "You haven't created any expenses yet" if hasAnyExpense is false, show "Nothing to show" if hasAnyExpense true

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-10-29 15:23:08 UTC.
Note for @mollfpr please take a note to the timestamps of the other proposals as when I proposed a complete proposal including the condition to use isEmptyObject(queryJSON.filters) as well as how we are going to update EmptySearchView component, the other proposal were lacking both vital parts of the proposal but were updated later.

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 in EmptySearchView when the search data type is CONST.SEARCH.DATA_TYPES.EXPENSE

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,
	},
	],

so even if there are expenses we display the empty search view whenever the result data is empty

App/src/components/Search/index.tsx

Line 305 in c3dde46

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

without checking there is filter applied or not

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)