[HOLD #55680][$250] Reports - Top bar does not disappear after deleting all the invoices in Outstanding tab

[lanitochka17]

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: 9.0.80-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
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): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Send invoice
3. Send an invoice to any user
4. Go to Reports
5. Go to Outstanding
6. Select all the invoices via checkbox
7. Click on the dropdown > Delete
8. Delete all the invoices

Expected Result:

After deleting all the invoices in Outstanding tab, empty state will show

Actual Result:

After deleting all the invoices in Outstanding tab, the top bar remains and the checkbox is still checked

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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6704835_1735756831542.20250102_023649.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876819538768498068
• Upwork Job ID: 1876819538768498068
• Last Price Increase: 2025-01-08
• Automatic offers:
• Tony-MK | Contributor | 105696860

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

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

[github-actions]

user Your proposal will be dismissed because you did not follow the proposal template.

[github-actions]

mharootian Your proposal will be dismissed because you did not follow the proposal template.

[Shahidullah-Muffakir]

Proposal

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

The Header does not disappear and the Select all checkbox stays checked even after deleting all the outstanding invoices.

What is the root cause of that problem?

The code doesn't check the type of report when creating sections. This means reports of other types (like chat) are included instead of just invoices.

App/src/libs/SearchUIUtils.ts

Lines 367 to 381 in 8b56d93

	if (isReportEntry(key)) {
	const reportItem = {...data[key]};
	const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`;
	const transactions = reportIDToTransactions[reportKey]?.transactions ?? [];
	const isIOUReport = reportItem.type === CONST.REPORT.TYPE.IOU;
	reportIDToTransactions[reportKey] = {
	...reportItem,
	action: getAction(data, key),
	keyForList: reportItem.reportID,
	from: data.personalDetailsList?.[reportItem.accountID ?? CONST.DEFAULT_NUMBER_ID],
	to: reportItem.managerID ? data.personalDetailsList?.[reportItem.managerID] : emptyPersonalDetails,
	transactions,
	reportName: isIOUReport ? getIOUReportName(data, reportItem) : reportItem.reportName,
	};

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

We should check the type of each report. If the type is not the one currently selected (in this case, invoices), we should skip that item:

1. Pass the type here:
   

   App/src/libs/SearchUIUtils.ts

   Line 442 in 8b56d93

   return getReportSections(data, metadata);

2. and then in the
   

   App/src/libs/SearchUIUtils.ts

   Lines 367 to 381 in 8b56d93

   	if (isReportEntry(key)) {
   	const reportItem = {...data[key]};
   	const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`;
   	const transactions = reportIDToTransactions[reportKey]?.transactions ?? [];
   	const isIOUReport = reportItem.type === CONST.REPORT.TYPE.IOU;
   	reportIDToTransactions[reportKey] = {
   	...reportItem,
   	action: getAction(data, key),
   	keyForList: reportItem.reportID,
   	from: data.personalDetailsList?.[reportItem.accountID ?? CONST.DEFAULT_NUMBER_ID],
   	to: reportItem.managerID ? data.personalDetailsList?.[reportItem.managerID] : emptyPersonalDetails,
   	transactions,
   	reportName: isIOUReport ? getIOUReportName(data, reportItem) : reportItem.reportName,
   	};

if (reportItem.type !== type) continue;

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

What alternative solutions did you explore? (Optional)

Screen.Recording.2025-01-02.at.2.19.02.AM.mov

[Tony-MK]

Proposal

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

Reports - Top bar does not disappear after deleting all the invoices in Outstanding tab

What is the root cause of that problem?

We are checking if data.length is 0 to show an empty state as the search results but shouldShowEmptyState becomes false because, in this situation, data.length is greater 0.

App/src/components/Search/index.tsx

Line 353 in 6e78dd4

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

This happens because data retrieved from SearchUIUtils.getSections includes other chats and expenses that are not invoices.

App/src/components/Search/index.tsx

Lines 235 to 240 in 6e78dd4

	const data = useMemo(() => {
	if (searchResults === undefined) {
	return [];
	}
	return SearchUIUtils.getSections(type, status, searchResults.data, searchResults.search);
	}, [searchResults, status, type]);

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

Let's use isSearchResultsEmpty instead of checking if data.length is 0 because isSearchResultsEmpty is determined using SearchUIUtils.isSearchResultsEmpty hence, it will check if any report in the search results matched the exact specified search parameters such as type and status.

App/src/components/Search/index.tsx

Line 353 in 6e78dd4

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

const shouldShowEmptyState = !isDataLoaded || isSearchResultsEmpty;

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

What alternative solutions did you explore? (Optional)

Create a function called SearchUIUtils.getInvoiceSections which gets the sections of invoice reports only and use it inside SearchUIUtils.getSections and serves the function as SearchUIUtils.getReportActionsSections and SearchUIUtils.getTransactionsSections.

...
if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
  return getReportActionsSections(data);
}
if (type === CONST.SEARCH.DATA_TYPES.INVOICE) {
  return getInvoiceSections(data); // Let's create and use this function
}
...

[huult]

Proposal

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

Top bar does not disappear after deleting all the invoices in Outstanding tab

What is the root cause of that problem?

When we create a new invoice, the value will be added to the snapshot, including the keys: personalDetailsList, policy, two report entries (one of type chat and the other of type invoice), and transactions.

• 

After an invoice is deleted from the search, as described in this ticket, one report (of type invoice) and the transactions will be removed from the snapshot, while one report (of type chat) will still exist in the snapshot.

• 

Because the backend only updates the two keys mentioned above to null

• 

So, when we retrieve data from the snapshot, the report with type chat will be returned, and this report will not have a transactions value; transactions will be an empty array.

App/src/components/Search/index.tsx

Line 232 in 4eb86b4

return SearchUIUtils.getSections(type, status, searchResults.data, searchResults.search);

Because this report does not have a transactions value, the UI will not render due to this code.

App/src/components/SelectionList/Search/ReportListItem.tsx

Lines 84 to 86 in 273a4be

	if (reportItem.transactions.length === 0) {
	return;
	}

The reason the empty search view is not displayed is that shouldUseNarrowLayout is false, as the data includes a report of type chat with transactions as an empty array.

App/src/components/Search/index.tsx

Line 343 in 4eb86b4

if (shouldShowEmptyState) {

And when we change tabs or a report loads, the OpenReport updates the data for the snapshot, so this issue only occurs in this specific case.

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

To resolve this issue, we need to check the data. If the search data type is invoice and the report has a type of chat with transactions as an empty array, we should filter it out to remove it from the data.

https://github.com/Expensify/App/blob/eaebfdf474dbcb006c098628d85b2a9ae028c678/src/libs/SearchUIUtils.ts

update to:

function getSections(type: SearchDataTypes, status: SearchStatus, data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']) {
    if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
        return getReportActionsSections(data);
    }
    if (status === CONST.SEARCH.STATUS.EXPENSE.ALL) {
        return getTransactionsSections(data, metadata);
    }
    return getReportSections(data, metadata, type); // update this line
}

App/src/libs/SearchUIUtils.ts

Line 360 in eaebfdf

function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): ReportListItemType[] {

    function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], type): ReportListItemType[] {
      ...
       for (const key in data) {
        if (isReportEntry(key)) {
               const reportItem = {...data[key]};
            const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`;
            const transactions = reportIDToTransactions[reportKey]?.transactions ?? [];
            const isIOUReport = reportItem.type === CONST.REPORT.TYPE.IOU;

            if (type === 'invoice' && reportItem.type === CONST.REPORT.TYPE.CHAT && transactions.length === 0) { // add this line
                continue; // add this line
            } // add this line

            reportIDToTransactions[reportKey] = {
                ...reportItem,
                action: getAction(data, key),
                keyForList: reportItem.reportID,
                from: data.personalDetailsList?.[reportItem.accountID ?? CONST.DEFAULT_NUMBER_ID],
                to: reportItem.managerID ? data.personalDetailsList?.[reportItem.managerID] : emptyPersonalDetails,
                transactions,
                reportName: isIOUReport ? getIOUReportName(data, reportItem) : reportItem.reportName,
            };
        } ...
      }
    }

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

We added a new test for this case: if the type is invoice, the reportType is chat, and transactions is an empty array, it should not be included in the data

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.

[melvin-bot]

@anmurali Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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

[mananjadhav]

Reviewing the proposals.

[melvin-bot]

@mananjadhav, @anmurali Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mananjadhav]

I am almost inclined to go with proposal from @Tony-MK, but I still need to verify it.

I have been trying to test these proposals but I am unable to sign-in.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @dangrous, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[huult]

@mananjadhav Could you review my proposal?

[mananjadhav]

@huult Yes I reviewed, but I still need to verify it.

[mananjadhav]

I verified the proposals on the local account @dangrous. I still feel we should use isSearchResultsEmpty. Feel free to share your opinion. Because isSearchResultsEmpty at the end checks if the transactions are empty.

[dangrous]

That sounds good to me. Seems like exactly what that should be used for!

[mananjadhav]

It seems there's an unrelated bug with the bulk delete option not removing items from the UI. I've reported it in the bugs channel https://expensify.slack.com/archives/C049HHMV9SM/p1737617937376769

[dangrous]

Ah, is that something we have to wait for? Like, can we still test this one, or not? Alternately, can we find and implement a fix here too?

[mananjadhav]

We cannot test until that's fixed.

Alternately, can we find and implement a fix here too?

Yes we can do that. I think @Tony-MK tried to do that, I haven't checked it yet.

[dangrous]

Morning! How are things looking on this one? Do we think we can tackle that other bug as part of this as well? Or should I hold this issue on that one?

[Tony-MK]

I took a look at the bug again and failed to reproduce it now.

It seems that it's fixed so I believe we can proceed.

[dangrous]

Great!

[mananjadhav]

Took a look at the issue, the bug seems to be on the backend. I'll try to review this today.

[mananjadhav]

The PR is reviewed.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[cristipaval]

The fix for this issue was reverted.

[dangrous]

Thanks @cristipaval! Let's look into another solution for this one...

[mananjadhav]

@dangrous Considering the linked issue is related to the API call taking time and then not refreshing the UI, I was wondering if we should put this current issue on hold and check if waiting for the API call fixes this one too?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.92-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Top bar for outstanding tab refuses to disappear when no transactions are found.  #55329

If no regressions arise, payment will be issued on 2025-02-07. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests
• @Tony-MK requires payment automatic offer (Contributor)

[melvin-bot]

@mananjadhav @anmurali @mananjadhav The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[dangrous]

Fix was reverted, so we'll need to give this another pass, and hold payment

[mananjadhav]

@dangrous did you get a chance to look at this comment?

[dangrous]

Hi! Yeah I think that makes sense, I'll update the title and once that is done we can look again