Incorrect empty state for some Search page filters

[m-natarajan]

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: 9.0.53-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @shawnborton Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1729753553105859

Action Performed:

1. Go to staging.new.expensify.com
2. Click Search > Expenses > Drafts or any other filter/sort options

   Expected Result:

   Show the generic one that says "Nothing to show" if no expenses to showup

   Actual Result:

   Empty state that says "You haven't created any expenses yet" even If user have created expenses

   Workaround:

   Unknown

   Platforms:

   Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

 

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @johncschuster (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.

[FitseTLT]

@shawnborton This is a dupe of https://github.com/Expensify/App/issues/51168#issuecomment-2432535689. In fact, the reviewer is waiting for your suggestions, in terms of design.

[neonbhai]

Looks like this one is about the wrong message on status filters (draft, outstanding, approved), so probably not dupe

[neonbhai]

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

Proposal

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

Incorrect empty state for some Search page filters

What is the root cause of that problem?

Empty Search View shows You haven't created any expenses for all status tabs in Expenses, but not in Chats and Invoices. This is Because of how we implement empty search view, which does not take status into account. https://github.com/Expensify/App/blob/642fd97e9a078495176e01b3ac17d01262bf1fa4/src/pages/Search/EmptySearchView.tsx#L99 We should take in the currently selected status as prop in EmptySearchView and only show You haven't created any expenses if the status is set to All.

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

We will pass in status to EmptySearchView. And show this block of code if type is CONST.SEARCH.DATA_TYPES.EXPENSE and staus is ONST.SEARCH.STATUS.EXPENSE.ALL https://github.com/Expensify/App/blob/642fd97e9a078495176e01b3ac17d01262bf1fa4/src/pages/Search/EmptySearchView.tsx#L117-L131

For all other cases we will show this block of code. https://github.com/Expensify/App/blob/642fd97e9a078495176e01b3ac17d01262bf1fa4/src/pages/Search/EmptySearchView.tsx#L136-L140

We can extend this logic for trips if needed. We will need to pass the status prop for better control in EmptySearchView.

Note: we can convert the switch case to if else, since now the logic will depend on two variables.

Result

https://github.com/user-attachments/assets/e8d30d3c-13c3-460a-a9b2-fd91fce57d9f

[nyomanjyotisa]

Proposal

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

Incorrect empty state for some Search page filters

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 filter and status

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

Pass queryJSON to EmptySearchView https://github.com/Expensify/App/blob/642fd97e9a078495176e01b3ac17d01262bf1fa4/src/components/Search/index.tsx#L301

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"

https://github.com/Expensify/App/blob/642fd97e9a078495176e01b3ac17d01262bf1fa4/src/pages/Search/EmptySearchView.tsx#L116-L131

What alternative solutions did you explore? (Optional)

[shawnborton]

Hmm this does feel quite similar to the linked issue. Perhaps we can combine them and just focus on the issue that was created first.

[FitseTLT]

Hmm this does feel quite similar to the linked issue. Perhaps we can combine them and just focus on the issue that was created first.

Yes we can close this one 👍