fix: avoid duplicated /SearchForReport calls

docs/_data/_routes.yml

@@ -11,7 +11,7 @@ platforms:
     url: www.expensify.com
     description: "Your account settings look like this:"
     image: /assets/images/settings-old-dot.svg
-  
+
     # Hubs are comprised of subcategories and articles. Subcategories contain multiple related articles, but there can be standalone articles as well
     hubs:
       - href: getting-started
@@ -38,7 +38,7 @@ platforms:
         title: Domains
         icon: /assets/images/domains.svg
         description: Claim and verify your company’s domain to access additional management and security features.
-      
+
       - href: bank-accounts-and-payments
         title: Bank Accounts & Payments
         icon: /assets/images/send-money.svg
@@ -88,16 +88,16 @@ platforms:
         title: Travel
         icon: /assets/images/plane.svg
         description: Manage all your corporate travel needs with Expensify Travel.
-     
-        
+
+
   - href: new-expensify
     title: New Expensify
     hub-title: New Expensify - Help & Resources
     hub-description: Questions? Find the answers by clicking a Category or using the search bar.
     url: new.expensify.com
     description: "Your account settings look like this:"
     image: /assets/images/settings-new-dot.svg
-  
+
     hubs:
       - href: getting-started
         title: Getting Started
@@ -113,7 +113,7 @@ platforms:
         title: Workspaces
         icon: /assets/images/shield.svg
         description: Configure rules, settings, and limits for your company’s spending.
-      
+
       - href: reports-and-expenses
         title: Reports & Expenses
         icon: /assets/images/envelope-receipt.svg
@@ -128,12 +128,12 @@ platforms:
         title: Connect Credit Cards
         icon: /assets/images/bank-card.svg
         description: Track credit card transactions and reconcile company cards.
-        
+
       - href: expensify-card
         title: Expensify Card
         icon: /assets/images/hand-card.svg
         description: Explore the perks and benefits of the Expensify Card.
-      
+
       - href: travel
         title: Travel
         icon: /assets/images/plane.svg
@@ -148,9 +148,13 @@ platforms:
         title: Settings
         icon: /assets/images/gears.svg
         description: Manage profile settings and notifications.
-        
+
       - href: billing-and-subscriptions
         title: Expensify Billing & Subscriptions
         icon: /assets/images/subscription-annual.svg
         description: Review Expensify's subscription options, plan types, and payment methods.
-
+
+      - href: search-overview
+        title: Search Functionality in New Expensify
+        icon: /assets/images/magnifying-glass.svg
+        description: Search feature overview.

docs/articles/new-expensify/search/Search-overview.md

@@ -0,0 +1,54 @@
+---
+title: Search Functionality in New Expensify
+description: Learn how to effectively use the powerful search feature in New Expensify to find and filter your financial data quickly and efficiently.
+---
+<div id="expensify-classic" markdown="1">
+
+The Search functionality in New Expensify provides a powerful way to locate and filter financial data. 
+With advanced autocomplete suggestions and predefined filters, you can quickly find specific expenses, reports, 
+invoices, and more across the platform.
+
+## Main Uses
+
+- **Locate specific transactions** - Quickly find expenses, invoices, or other financial data using keywords or filters.
+- **Filter by status** - Easily view items based on their current state (Drafts, Outstanding, Approved, etc.).
+- **Save frequent searches** - Store commonly used search parameters for quick access in the future.
+
+## Search Components
+The search functionality in Expensify consists of several key components:
+
+- **Search input** - Located at the top of the Reports view for entering search terms.
+- **Left-hand navigation (LHN)** - Allows switching between different data types and saved searches.
+- **Predefined filters** - Quick-access filters at the top of each list view.
+- **Autocomplete modal** - Suggestions that appear as you type in the search input.
+- **Results list** - The formatted list of search results displayed below the filters, showing matching items based on 
+your search criteria and selected filters.
+
+# How Search Works
+## Basic Navigation
+1. When you select a data type from the LHN (Expenses, Expense Reports, Chats, Invoices, or Trips), the system calls the `/Search` endpoint to display results.
+2. Selecting a predefined filter (All, Drafts, Outstanding, etc.) also triggers the `/Search` endpoint with the appropriate parameters.
+
+## Using Predefined Filters
+Each data type offers specific predefined filters for quick access:
+
+1. Navigate to the desired data type view (e.g., Expenses) via the LHN.
+2. At the top of the list, select one of the predefined filters:
+    - **All** - Shows all items (default selection)
+    - **Drafts** - Items not yet submitted
+    - **Outstanding** - Items awaiting action
+    - **Approved** - Items that have received approval
+    - **Done** - Completed items
+    - **Paid** - Items that have been reimbursed or paid
+
+Note: Available filters may vary depending on the data type selected.
+
+## Using the Search Input
+The search input provides powerful functionality:
+1. Click in the search field at the top of the Reports view.
+2. Begin typing your search term.
+3. The autocomplete modal appears with suggestions:
+    - The first option always shows your exact search text with a magnifying glass icon
+    - Additional suggestions based on your input from `/SearchForReports` and Onyx data
+4. Select first suggestion (magnifying glass icon with search text) or press Enter to execute the search (`/Search` endpoint call).
+5. Clicking on any other suggestion (retrieved from either `/SearchForReports` or Onyx data) directly opens the selected report by calling the `/OpenReport` endpoint.

src/components/Search/SearchAutocompleteList.tsx

@@ -17,7 +17,6 @@ import usePermissions from '@hooks/usePermissions';
 import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {searchInServer} from '@libs/actions/Report';
 import {getCardFeedKey, getCardFeedNamesWithType} from '@libs/CardFeedUtils';
 import {getCardDescription, isCard, isCardHiddenFromSearch, mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import memoize from '@libs/memoize';
@@ -57,6 +56,9 @@ type SearchAutocompleteListProps = {
     /** Value of TextInput */
     autocompleteQueryValue: string;
 
+    /** Callback to trigger search action * */
+    handleSearch?: (value: string) => void;
+
     /** An optional item to always display on the top of the router list  */
     searchQueryItem?: SearchQueryItem;
 
@@ -130,6 +132,7 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryList
 function SearchAutocompleteList(
     {
         autocompleteQueryValue,
+        handleSearch,
         searchQueryItem,
         getAdditionalSections,
         onListItemPress,
@@ -501,7 +504,12 @@ function SearchAutocompleteList(
     }, [autocompleteQueryValue, filterOptions, searchOptions]);
 
     useEffect(() => {
-        searchInServer(autocompleteQueryValue.trim());
+        if (!handleSearch) {
+            return;
+        }
+        handleSearch(autocompleteQueryValue);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autocompleteQueryValue]);
 
     /* Sections generation */

src/components/Search/SearchPageHeader/SearchPageHeader.tsx

@@ -28,24 +28,25 @@ type SearchPageHeaderProps = {
     hideSearchRouterList?: () => void;
     onSearchRouterFocus?: () => void;
     headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
+    handleSearch?: (value: string) => void;
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, headerButtonsOptions}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, headerButtonsOptions, handleSearch}: SearchPageHeaderProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {selectedTransactions} = useSearchContext();
-    const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
+    const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
     const personalDetails = usePersonalDetails();
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true});
     const taxRates = getAllTaxRates();
-    const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+    const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
+    const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
-    const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST);
-    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
-    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
+    const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true});
+    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true});
+    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
 
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
@@ -85,6 +86,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
             searchName={searchName}
             hideSearchRouterList={hideSearchRouterList}
             inputRightComponent={InputRightComponent}
+            handleSearch={handleSearch}
         />
     );
 }

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -59,9 +59,10 @@ type SearchPageHeaderInputProps = {
     onSearchRouterFocus?: () => void;
     searchName?: string;
     inputRightComponent: React.ReactNode;
+    handleSearch?: (value: string) => void;
 };
 
-function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, searchName, inputRightComponent}: SearchPageHeaderInputProps) {
+function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, searchName, inputRightComponent, handleSearch}: SearchPageHeaderInputProps) {
     const {translate} = useLocalize();
     const {canUseLeftHandBar} = usePermissions();
     const [showPopupButton, setShowPopupButton] = useState(true);
@@ -118,7 +119,6 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
 
     useEffect(() => {
         setTextInputValue(isDefaultQuery ? '' : queryText);
-        setAutocompleteQueryValue(isDefaultQuery ? '' : queryText);
     }, [isDefaultQuery, queryText]);
 
     useEffect(() => {
@@ -144,6 +144,16 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const handleSearchAction = useCallback(
+        (value: string) => {
+            if (!isAutocompleteListVisible || !handleSearch) {
+                return;
+            }
+            handleSearch(value);
+        },
+        [handleSearch, isAutocompleteListVisible],
+    );
+
     const onSearchQueryChange = useCallback(
         (userQuery: string) => {
             const singleLineUserQuery = StringUtils.lineBreaksToSpaces(userQuery, true);
@@ -290,6 +300,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
                         <View style={[styles.flex1]}>
                             <SearchAutocompleteList
                                 autocompleteQueryValue={autocompleteQueryValue}
+                                handleSearch={handleSearchAction}
                                 searchQueryItem={searchQueryItem}
                                 onListItemPress={onListItemPress}
                                 setTextQuery={setTextInputValue}
@@ -356,6 +367,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
                     <View style={[styles.mh65vh, !isAutocompleteListVisible && styles.dNone]}>
                         <SearchAutocompleteList
                             autocompleteQueryValue={autocompleteQueryValue}
+                            handleSearch={handleSearchAction}
                             searchQueryItem={searchQueryItem}
                             onListItemPress={onListItemPress}
                             setTextQuery={setTextAndUpdateSelection}

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -31,7 +31,7 @@ import StringUtils from '@libs/StringUtils';
 import Navigation from '@navigation/Navigation';
 import type {ReportsSplitNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
-import {navigateToAndOpenReport} from '@userActions/Report';
+import {navigateToAndOpenReport, searchInServer} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -239,6 +239,10 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
         [setSelection, setTextInputValue],
     );
 
+    const handleSearchAction = (value: string) => {
+        searchInServer(value);
+    };
+
     const onListItemPress = useCallback(
         (item: OptionData | SearchQueryItem) => {
             if (isSearchQueryItem(item)) {
@@ -347,6 +351,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                     />
                     <SearchAutocompleteList
                         autocompleteQueryValue={autocompleteQueryValue || textInputValue}
+                        handleSearch={handleSearchAction}
                         searchQueryItem={searchQueryItem}
                         getAdditionalSections={getAdditionalSections}
                         onListItemPress={onListItemPress}

src/components/Search/index.tsx

@@ -17,7 +17,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSearchHighlightAndScroll from '@hooks/useSearchHighlightAndScroll';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOffMobileSelectionMode, turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
-import {search, updateSearchResultsWithTransactionThreadReportID} from '@libs/actions/Search';
+import {updateSearchResultsWithTransactionThreadReportID} from '@libs/actions/Search';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
@@ -47,14 +47,15 @@ import type SearchResults from '@src/types/onyx/SearchResults';
 import {useSearchContext} from './SearchContext';
 import SearchList from './SearchList';
 import SearchScopeProvider from './SearchScopeProvider';
-import type {SearchColumnType, SearchQueryJSON, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
+import type {SearchColumnType, SearchParams, SearchQueryJSON, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
 
 type SearchProps = {
     queryJSON: SearchQueryJSON;
     onSearchListScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     contentContainerStyle?: StyleProp<ViewStyle>;
     currentSearchResults?: SearchResults;
     lastNonEmptySearchResults?: SearchResults;
+    handleSearch?: (value: SearchParams) => void;
 };
 
 function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [string, SelectedTransactionInfo] {
@@ -124,7 +125,7 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact
     };
 }
 
-function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onSearchListScroll, contentContainerStyle}: SearchProps) {
+function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onSearchListScroll, contentContainerStyle, handleSearch}: SearchProps) {
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
@@ -197,8 +198,12 @@ function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onS
             return;
         }
 
-        search({queryJSON, offset});
-    }, [isOffline, offset, queryJSON]);
+        if (!handleSearch) {
+            return;
+        }
+
+        handleSearch({queryJSON, offset});
+    }, [handleSearch, isOffline, offset, queryJSON]);
 
     const {newSearchResultKey, handleSelectionListScroll} = useSearchHighlightAndScroll({
         searchResults,

src/components/Search/types.ts

@@ -147,6 +147,11 @@ type SearchAutocompleteQueryRange = {
     value: string;
 };
 
+type SearchParams = {
+    queryJSON: SearchQueryJSON;
+    offset: number;
+};
+
 export type {
     SelectedTransactionInfo,
     SelectedTransactions,
@@ -170,6 +175,7 @@ export type {
     SearchAutocompleteResult,
     PaymentData,
     SearchAutocompleteQueryRange,
+    SearchParams,
     TableColumnSize,
     SearchGroupBy,
 };