Reports -"Create Expense" button doesn´t appear on empty state screen when deleting expenses

[lanitochka17]

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.1.39-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): ibellicotest+648@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Open any workspace chat
3. Submit a few manual expenses. (At least two)
4. Navigate to "Reports"
5. Long tap on any expense and tap on "Select"
6. Select all the expenses
7. Tap on the dropdown menu and delete them
8. Note that an empty state modal appears
9. Note that "Create Expense" button is not displayed in it

Expected Result:

"Create Expense" button should appear automatically on empty state screen on "Reports" after deleting all the expenses

Actual Result:

When all the expenses are deleted on "Reports" section, "Create Expense" button is not automatically displayed on "You haven´t created any expense yet" modal

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6819792_1746205558853.Empty.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MarioExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[samranahm]

Proposal

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

Create Expense" button doesn't appear on empty state screen when deleting expenses

What is the root cause of that problem?

This happen because currently we did not display button on default case here

App/src/pages/Search/EmptySearchView.tsx

Lines 211 to 217 in b1b95a3

	return {
	headerMedia: LottieAnimations.GenericEmptyState,
	title: translate('search.searchResults.emptyResults.title'),
	subtitle: translate('search.searchResults.emptyResults.subtitle'),
	headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
	lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles},
	};

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

We should add

App/src/pages/Search/EmptySearchView.tsx

Lines 136 to 163 in b1b95a3

	buttons: [
	...(!hasSeenTour
	? [
	{
	buttonText: translate('emptySearchView.takeATestDrive'),
	buttonAction: () => {
	openExternalLink(navatticURL);
	setSelfTourViewed();
	if (viewTourTaskReport && canModifyTheTask && canActionTheTask) {
	completeTask(viewTourTaskReport);
	}
	},
	},
	]
	: []),
	{
	buttonText: translate('iou.createExpense'),
	buttonAction: () =>
	interceptAnonymousUser(() => {
	if (shouldRedirectToExpensifyClassic) {
	setModalVisible(true);
	return;
	}
	startMoneyRequest(CONST.IOU.TYPE.CREATE, generateReportID());
	}),
	success: true,
	},
	],

these buttons on default case too

here

App/src/pages/Search/EmptySearchView.tsx

Line 210 in b1b95a3

default:

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)

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.

[ChavdaSachin]

Is it open of external?

[MarioExpensify]

@ChavdaSachin not yet, trying to find that PR caused the regression.

[MarioExpensify]

Reverting this PR solved the issue. A revert PR is already on its way here.

CC: @martasudol @c3024 @MariaHCD @mountiny

[ChavdaSachin]

Proposal

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

Reports -"Create Expense" button doesn´t appear on empty state screen when deleting expenses

What is the root cause of that problem?

following PR optimizes the search call which caused the regression
https://github.com/Expensify/App/pull/60896/files

Previously when user deletes a transaction - it used to trigger a search call which would return value of hasResults = false if all the transactions are deleted.
But after this PR, it does not trigger a search call and relies on snapshot when user deletes a transaction and hence the old copy of search results has value hasResults = true and hence default case is loaded here instead of case CONST.SEARCH.DATA_TYPES.EXPENSE.

App/src/pages/Search/EmptySearchView.tsx

Line 131 in 7f68056

if (!hasResults) {

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

There are 2 possible solutions to this issue.

1. Trigger a search call when user deletes a transaction.

To archive that - modify following condition to compare only the length of TransactionIDs array and trigger a search call in case it does not match(it ensures both case - new ID and deletion)

App/src/hooks/useSearchPusherUpdates.ts

Lines 63 to 65 in 1a4da39

	const hasNewTransactions = currentTransactionIDs.length > previousTransactionIDs.length && currentTransactionIDs.some((id) => !previousTransactionIDs.includes(id));
	if (hasNewTransactions) {

        const hasChangeInTransactions = currentTransactionIDs.length !== previousTransactionIDs.length ;
        if (hasChangeInTransactions) {
            search({queryJSON, offset: 0});
        }

2. Remove !hasResults check form following places.
   

   App/src/pages/Search/EmptySearchView.tsx

   Line 131 in 11989de

   if (!hasResults) {

   
   

   App/src/pages/Search/EmptySearchView.tsx

   Line 171 in 11989de

   if (!hasResults) {

Explaination: why we don't want that check?
coz we would render emptySearchView only when there are no results to show, so we don't really need an extra condition here

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

NA

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.