[$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 contributors@expensify.com 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): applausetester+394034@applause.expensifail.com
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