Reports - Top bar disappears when "type" query is invalid

src/components/Search/index.tsx

@@ -31,6 +31,7 @@ import {
     isReportListItemType,
     isSearchResultsEmpty as isSearchResultsEmptyUtil,
     isTransactionListItemType,
+    shouldShowEmptyState,
     shouldShowYear as shouldShowYearUtil,
 } from '@libs/SearchUIUtils';
 import {isOnHold} from '@libs/TransactionUtils';
@@ -379,9 +380,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
         return mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight);
     });
 
-    const shouldShowEmptyState = !isDataLoaded || data.length === 0;
-
-    if (shouldShowEmptyState) {
+    if (shouldShowEmptyState(isDataLoaded, data.length, searchResults.search.type)) {
         return (
             <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
                 <EmptySearchView

src/components/SelectionList/SearchTableHeader.tsx

@@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as SearchUIUtils from '@libs/SearchUIUtils';
+import {getShouldShowMerchant} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -39,12 +39,12 @@ const expenseHeaders: SearchColumnConfig[] = [
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
         translationKey: 'common.merchant',
-        shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUIUtils.getShouldShowMerchant(data),
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => getShouldShowMerchant(data),
     },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION,
         translationKey: 'common.description',
-        shouldShow: (data: OnyxTypes.SearchResults['data']) => !SearchUIUtils.getShouldShowMerchant(data),
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => !getShouldShowMerchant(data),
     },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.FROM,
@@ -151,3 +151,4 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shou
 SearchTableHeader.displayName = 'SearchTableHeader';
 
 export default SearchTableHeader;
+export {SearchColumns};

src/libs/SearchUIUtils.ts

@@ -7,6 +7,7 @@ import type {SearchColumnType, SearchStatus, SortOrder} from '@components/Search
 import ChatListItem from '@components/SelectionList/ChatListItem';
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
+import {SearchColumns} from '@components/SelectionList/SearchTableHeader';
 import type {ListItem, ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
@@ -784,6 +785,13 @@ function createBaseSavedSearchMenuItem(item: SaveSearchItem, key: string, index:
     };
 }
 
+/**
+ * Whether to show the empty state or not
+ */
+function shouldShowEmptyState(isDataLoaded: boolean, dataLength: number, type: SearchDataTypes) {
+    return !isDataLoaded || dataLength === 0 || !Object.hasOwn(SearchColumns, type);
+}
+
 export {
     getListItem,
     getSections,
@@ -801,5 +809,6 @@ export {
     getAction,
     createTypeMenuItems,
     createBaseSavedSearchMenuItem,
+    shouldShowEmptyState,
 };
 export type {SavedSearchMenuItem, SearchTypeMenuItem};

tests/unit/Search/SearchUIUtilsTest.ts

@@ -9,6 +9,7 @@ import * as SearchUIUtils from '@src/libs/SearchUIUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates';
 
 const adminAccountID = 18439984;
@@ -1388,4 +1389,12 @@ describe('SearchUIUtils', () => {
             expect(action).toEqual(CONST.SEARCH.ACTION_TYPES.VIEW);
         });
     });
+
+    test('Should return true if the search result has valid type', () => {
+        expect(SearchUIUtils.shouldShowEmptyState(false, reportsListItems.length, searchResults.search.type)).toBe(true);
+        expect(SearchUIUtils.shouldShowEmptyState(true, 0, searchResults.search.type)).toBe(true);
+        const inValidSearchType: SearchDataTypes = 'expensse' as SearchDataTypes;
+        expect(SearchUIUtils.shouldShowEmptyState(true, reportsListItems.length, inValidSearchType)).toBe(true);
+        expect(SearchUIUtils.shouldShowEmptyState(true, reportsListItems.length, searchResults.search.type)).toBe(false);
+    });
 });