From d11bfe1b44648142987117fda3e219a42b58d3d9 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Thu, 19 Sep 2024 16:59:33 +0200
Subject: [PATCH] Cleanup display SearchButton component on all Pages

---
 src/components/HeaderWithBackButton/index.tsx |   3 +
 src/components/HeaderWithBackButton/types.ts  |   3 +
 src/components/MoneyReportHeader.tsx          |   1 +
 src/components/MoneyRequestHeader.tsx         |   1 +
 src/components/Search/SearchPageHeader.tsx    |  44 +++--
 .../Search/SearchRouter/SearchButton.tsx      |   6 +-
 .../Search/SearchRouter/SearchRouter.tsx      |  21 +--
 .../Search/SearchRouter/SearchRouterInput.tsx |   5 +-
 .../createCustomBottomTabNavigator/TopBar.tsx |   7 +-
 src/libs/SearchUtils.ts                       | 166 +++++++-----------
 src/pages/AddressPage.tsx                     |   1 +
 src/pages/Search/AdvancedSearchFilters.tsx    |   2 +-
 src/pages/Search/SearchPageBottomTab.tsx      |   1 +
 src/pages/Search/SearchTypeMenuNarrow.tsx     |   2 +-
 src/pages/TeachersUnite/SaveTheWorldPage.tsx  |   1 +
 src/pages/home/HeaderView.tsx                 |   2 +
 src/pages/settings/AboutPage/AboutPage.tsx    |   1 +
 .../settings/Preferences/PreferencesPage.tsx  |   1 +
 src/pages/settings/Profile/ProfilePage.tsx    |   1 +
 .../Security/SecuritySettingsPage.tsx         |   1 +
 .../Subscription/CardSection/CardSection.tsx  |   2 +-
 .../Troubleshoot/TroubleshootPage.tsx         |   1 +
 .../settings/Wallet/WalletPage/WalletPage.tsx |   1 +
 src/pages/workspace/WorkspacesListPage.tsx    |   2 +
 24 files changed, 126 insertions(+), 150 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index f1e715bface8..eb04ad5540eb 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -7,6 +7,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PinButton from '@components/PinButton';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
@@ -60,6 +61,7 @@ function HeaderWithBackButton({
     shouldOverlayDots = false,
     shouldOverlay = false,
     shouldNavigateToTopMostReport = false,
+    shouldDisplaySearchRouter = false,
     progressBarPercentage,
     style,
 }: HeaderWithBackButtonProps) {
@@ -261,6 +263,7 @@ function HeaderWithBackButton({
                             </PressableWithoutFeedback>
                         </Tooltip>
                     )}
+                    {shouldDisplaySearchRouter && <SearchButton />}
                 </View>
             </View>
         </View>
diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts
index c55a7bddc80c..7423abcfe3b0 100644
--- a/src/components/HeaderWithBackButton/types.ts
+++ b/src/components/HeaderWithBackButton/types.ts
@@ -128,6 +128,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Whether we should overlay the 3 dots menu */
     shouldOverlayDots?: boolean;
 
+    /** Whether we should display button that opens new SearchRouter */
+    shouldDisplaySearchRouter?: boolean;
+
     /** 0 - 100 number indicating current progress of the progress bar */
     progressBarPercentage?: number;
 
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 4fc92d619e68..f5e2703b1a47 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -285,6 +285,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 report={moneyRequestReport}
                 policy={policy}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 onBackButtonPress={onBackButtonPress}
                 // Shows border if no buttons or banners are showing below the header
                 shouldShowBorderBottom={!isMoreContentShown}
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 0e0633042a7d..34d3c2d54a70 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -134,6 +134,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                     policy={policy}
                     shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={onBackButtonPress}
+                    shouldDisplaySearchRouter
                 >
                     {hasAllPendingRTERViolations && !shouldUseNarrowLayout && (
                         <Button
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 73829989409c..704f72055410 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -33,6 +33,7 @@ import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults'
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
+import SearchButton from './SearchRouter/SearchButton';
 import type {SearchQueryJSON} from './types';
 
 type HeaderWrapperProps = Pick<HeaderWithBackButtonProps, 'title' | 'subtitle' | 'icon' | 'children'> & {
@@ -295,11 +296,13 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
     }
 
     const onPress = () => {
-        const values = SearchUtils.getFiltersFormValues(queryJSON);
+        const values = SearchUtils.buildFilterFormValuesFromQuery(queryJSON);
         SearchActions.updateAdvancedFilters(values);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
     };
 
+    const displaySearchRouter = SearchUtils.isCannedSearchQuery(queryJSON);
+
     return (
         <HeaderWrapper
             title={headerTitle}
@@ -307,24 +310,27 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
             icon={headerIcon}
             subtitleStyles={subtitleStyles}
         >
-            {headerButtonsOptions.length > 0 ? (
-                <ButtonWithDropdownMenu
-                    onPress={() => null}
-                    shouldAlwaysShowDropdownMenu
-                    pressOnEnter
-                    buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
-                    customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
-                    options={headerButtonsOptions}
-                    isSplitButton={false}
-                    shouldUseStyleUtilityForAnchorPosition
-                />
-            ) : (
-                <Button
-                    text={translate('search.filtersHeader')}
-                    icon={Expensicons.Filters}
-                    onPress={onPress}
-                />
-            )}
+            <>
+                {headerButtonsOptions.length > 0 ? (
+                    <ButtonWithDropdownMenu
+                        onPress={() => null}
+                        shouldAlwaysShowDropdownMenu
+                        pressOnEnter
+                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                        customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
+                        options={headerButtonsOptions}
+                        isSplitButton={false}
+                        shouldUseStyleUtilityForAnchorPosition
+                    />
+                ) : (
+                    <Button
+                        text={translate('search.filtersHeader')}
+                        icon={Expensicons.Filters}
+                        onPress={onPress}
+                    />
+                )}
+                {displaySearchRouter && <SearchButton />}
+            </>
         </HeaderWrapper>
     );
 }
diff --git a/src/components/Search/SearchRouter/SearchButton.tsx b/src/components/Search/SearchRouter/SearchButton.tsx
index 4948c90ce3d1..05693ad5ea22 100644
--- a/src/components/Search/SearchRouter/SearchButton.tsx
+++ b/src/components/Search/SearchRouter/SearchButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Permissions from '@libs/Permissions';
@@ -10,6 +11,7 @@ import {useSearchRouterContext} from './SearchRouterContext';
 function SearchButton() {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {translate} = useLocalize();
     const {openSearchRouter} = useSearchRouterContext();
 
     if (!Permissions.canUseNewSearchRouter()) {
@@ -18,8 +20,8 @@ function SearchButton() {
 
     return (
         <PressableWithoutFeedback
-            accessibilityLabel=""
-            style={[styles.flexRow, styles.mr2, styles.touchableButtonImage]}
+            accessibilityLabel={translate('common.search')}
+            style={[styles.flexRow, styles.touchableButtonImage]}
             onPress={() => {
                 openSearchRouter();
             }}
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index ea08f49500b3..016f61dbce0e 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -1,4 +1,3 @@
-import {useNavigationState} from '@react-navigation/native';
 import debounce from 'lodash/debounce';
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
@@ -10,37 +9,20 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
-import type {AuthScreensParamList, NavigationStateRoute} from '@navigation/types';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import {useSearchRouterContext} from './SearchRouterContext';
 import SearchRouterInput from './SearchRouterInput';
 
 const SEARCH_DEBOUNCE_DELAY = 200;
 
-function getCurrentSearchQuery(route?: NavigationStateRoute) {
-    if (route?.name !== SCREENS.SEARCH.CENTRAL_PANE) {
-        return;
-    }
-
-    const query = (route?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE]).q;
-    return SearchUtils.buildSearchQueryJSON(query);
-}
-
 function SearchRouter() {
     const styles = useThemeStyles();
 
     const {isSmallScreenWidth} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
-    const lastRoute = useNavigationState((state) => state.routes.at(-1));
-
-    // If we open SearchRouter on a `/search` page, then we prefill input with the existing Search query
-    const existingSearchQuery = getCurrentSearchQuery(lastRoute);
-    const initialQuery = existingSearchQuery ? SearchUtils.getSearchRouterInputText(existingSearchQuery) : undefined;
-    const initialQueryJSON = initialQuery ? SearchUtils.buildSearchQueryJSON(initialQuery) : undefined;
 
-    const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(initialQueryJSON);
+    const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(undefined);
 
     const clearUserQuery = () => {
         setUserSearchQuery(undefined);
@@ -96,7 +78,6 @@ function SearchRouter() {
             <FocusTrapForModal active={isSearchRouterDisplayed}>
                 <View style={[styles.flex1, styles.p3]}>
                     <SearchRouterInput
-                        initialValue={initialQuery}
                         isFullWidth={isFullWidth}
                         onChange={onSearchChange}
                         onSubmit={onSearchSubmit}
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index 527ed807fb2a..860a46239d21 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -5,16 +5,15 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type SearchRouterInputProps = {
-    initialValue?: string;
     isFullWidth: boolean;
     onChange: (searchTerm: string) => void;
     onSubmit: () => void;
 };
 
-function SearchRouterInput({initialValue = '', isFullWidth, onChange, onSubmit}: SearchRouterInputProps) {
+function SearchRouterInput({isFullWidth, onChange, onSubmit}: SearchRouterInputProps) {
     const styles = useThemeStyles();
 
-    const [value, setValue] = useState(initialValue);
+    const [value, setValue] = useState('');
 
     const onChangeText = (text: string) => {
         setValue(text);
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index 985c16d50c22..4684eb9637be 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -23,9 +23,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
-type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; isCustomSearchQuery?: boolean};
+type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; isCustomSearchQuery?: boolean; shouldDisplaySearchRouter?: boolean};
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, isCustomSearchQuery = false}: TopBarProps) {
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, isCustomSearchQuery = false, shouldDisplaySearchRouter = false}: TopBarProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -74,8 +74,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                         <Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>
                     </PressableWithoutFeedback>
                 )}
-                {/* This is only temporary for development and will be cleaned up in: https://github.com/Expensify/App/issues/49122 */}
-                <SearchButton />
+                {shouldDisplaySearchRouter && <SearchButton />}
                 {displaySearch && (
                     <Tooltip text={translate('common.find')}>
                         <PressableWithoutFeedback
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 0afd816a0193..e178c7dcb77b 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -397,6 +397,18 @@ function getQueryHashFromString(query: SearchQueryString): number {
     return UserUtils.hashText(query, 2 ** 32);
 }
 
+function getExpenseTypeTranslationKey(expenseType: ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>): TranslationPaths {
+    // eslint-disable-next-line default-case
+    switch (expenseType) {
+        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
+            return 'common.distance';
+        case CONST.SEARCH.TRANSACTION_TYPE.CARD:
+            return 'common.card';
+        case CONST.SEARCH.TRANSACTION_TYPE.CASH:
+            return 'iou.cash';
+    }
+}
+
 /* Search query related */
 
 /**
@@ -459,16 +471,58 @@ function sanitizeString(str: string) {
     return str;
 }
 
-function getExpenseTypeTranslationKey(expenseType: ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>): TranslationPaths {
-    // eslint-disable-next-line default-case
-    switch (expenseType) {
-        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
-            return 'common.distance';
-        case CONST.SEARCH.TRANSACTION_TYPE.CARD:
-            return 'common.card';
-        case CONST.SEARCH.TRANSACTION_TYPE.CASH:
-            return 'iou.cash';
+/**
+ * @private
+ * traverses the AST and returns filters as a QueryFilters object
+ */
+function getFilters(queryJSON: SearchQueryJSON) {
+    const filters = {} as QueryFilters;
+    const filterKeys = Object.values(CONST.SEARCH.SYNTAX_FILTER_KEYS);
+
+    function traverse(node: ASTNode) {
+        if (!node.operator) {
+            return;
+        }
+
+        if (typeof node?.left === 'object' && node.left) {
+            traverse(node.left);
+        }
+
+        if (typeof node?.right === 'object' && node.right && !Array.isArray(node.right)) {
+            traverse(node.right);
+        }
+
+        const nodeKey = node.left as ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>;
+        if (!filterKeys.includes(nodeKey)) {
+            return;
+        }
+
+        if (!filters[nodeKey]) {
+            filters[nodeKey] = [];
+        }
+
+        // the "?? []" is added only for typescript because otherwise TS throws an error, in newer TS versions this should be fixed
+        const filterArray = filters[nodeKey] ?? [];
+        if (!Array.isArray(node.right)) {
+            filterArray.push({
+                operator: node.operator,
+                value: node.right as string | number,
+            });
+        } else {
+            node.right.forEach((element) => {
+                filterArray.push({
+                    operator: node.operator,
+                    value: element as string | number,
+                });
+            });
+        }
+    }
+
+    if (queryJSON.filters) {
+        traverse(queryJSON.filters);
     }
+
+    return filters;
 }
 
 function buildSearchQueryJSON(query: SearchQueryString) {
@@ -520,7 +574,7 @@ function buildSearchQueryString(queryJSON?: SearchQueryJSON) {
 /**
  * Given object with chosen search filters builds correct query string from them
  */
-function buildQueryStringFromFilterValues(filterValues: Partial<SearchAdvancedFiltersForm>) {
+function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvancedFiltersForm>) {
     // We separate type and status filters from other filters to maintain hashes consistency for saved searches
     const {type, status, ...otherFilters} = filterValues;
     const filtersString: string[] = [];
@@ -584,65 +638,10 @@ function buildQueryStringFromFilterValues(filterValues: Partial<SearchAdvancedFi
     return filtersString.join(' ').trim();
 }
 
-/**
- *
- * @private
- * traverses the AST and returns filters as a QueryFilters object
- */
-function getFilters(queryJSON: SearchQueryJSON) {
-    const filters = {} as QueryFilters;
-    const filterKeys = Object.values(CONST.SEARCH.SYNTAX_FILTER_KEYS);
-
-    function traverse(node: ASTNode) {
-        if (!node.operator) {
-            return;
-        }
-
-        if (typeof node?.left === 'object' && node.left) {
-            traverse(node.left);
-        }
-
-        if (typeof node?.right === 'object' && node.right && !Array.isArray(node.right)) {
-            traverse(node.right);
-        }
-
-        const nodeKey = node.left as ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>;
-        if (!filterKeys.includes(nodeKey)) {
-            return;
-        }
-
-        if (!filters[nodeKey]) {
-            filters[nodeKey] = [];
-        }
-
-        // the "?? []" is added only for typescript because otherwise TS throws an error, in newer TS versions this should be fixed
-        const filterArray = filters[nodeKey] ?? [];
-        if (!Array.isArray(node.right)) {
-            filterArray.push({
-                operator: node.operator,
-                value: node.right as string | number,
-            });
-        } else {
-            node.right.forEach((element) => {
-                filterArray.push({
-                    operator: node.operator,
-                    value: element as string | number,
-                });
-            });
-        }
-    }
-
-    if (queryJSON.filters) {
-        traverse(queryJSON.filters);
-    }
-
-    return filters;
-}
-
 /**
  * returns the values of the filters in a format that can be used in the SearchAdvancedFiltersForm as initial form values
  */
-function getFiltersFormValues(queryJSON: SearchQueryJSON) {
+function buildFilterFormValuesFromQuery(queryJSON: SearchQueryJSON) {
     const filters = getFilters(queryJSON);
     const filterKeys = Object.keys(filters);
     const filtersForm = {} as Partial<SearchAdvancedFiltersForm>;
@@ -773,36 +772,6 @@ function getSearchHeaderTitle(
     return title;
 }
 
-function getSearchRouterInputText(queryJSON: SearchQueryJSON) {
-    const {type, status} = queryJSON;
-    const filters = queryJSON.flatFilters ?? {};
-
-    let title = `type:${type} status:${status}`;
-
-    Object.keys(filters)
-        .filter((filterKey) => {
-            return (
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.AMOUNT ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG ||
-                filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY
-            );
-        })
-        .forEach((key) => {
-            const queryFilter = filters[key as ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>] ?? [];
-            const displayQueryFilters = queryFilter.map((filter) => ({
-                operator: filter.operator,
-                value: filter.value.toString(),
-            }));
-            title += buildFilterString(key, displayQueryFilters, ' ');
-        });
-
-    return title;
-}
-
 function buildCannedSearchQuery(type: SearchDataTypes = CONST.SEARCH.DATA_TYPES.EXPENSE, status: SearchStatus = CONST.SEARCH.STATUS.EXPENSE.ALL): SearchQueryString {
     return normalizeQuery(`type:${type} status:${status}`);
 }
@@ -849,10 +818,10 @@ function isCorrectSearchUserName(displayName?: string) {
 }
 
 export {
-    buildQueryStringFromFilterValues,
+    buildQueryStringFromFilterFormValues,
     buildSearchQueryJSON,
     buildSearchQueryString,
-    getFiltersFormValues,
+    buildFilterFormValuesFromQuery,
     getPolicyIDFromSearchQuery,
     getListItem,
     getSections,
@@ -863,7 +832,6 @@ export {
     isTransactionListItemType,
     isReportActionListItemType,
     getSearchHeaderTitle,
-    getSearchRouterInputText,
     normalizeQuery,
     shouldShowYear,
     buildCannedSearchQuery,
diff --git a/src/pages/AddressPage.tsx b/src/pages/AddressPage.tsx
index 88e52409751b..fc9ae171ccf5 100644
--- a/src/pages/AddressPage.tsx
+++ b/src/pages/AddressPage.tsx
@@ -85,6 +85,7 @@ function AddressPage({title, address, updateAddress, isLoadingApp = true, backTo
                 title={title}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(backTo)}
+                shouldDisplaySearchRouter
             />
             {isLoadingApp ? (
                 <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 8f08b128619a..f2e3173c977a 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -229,7 +229,7 @@ function AdvancedSearchFilters() {
     const personalDetails = usePersonalDetails();
     const currentType = searchAdvancedFilters?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE;
 
-    const queryString = useMemo(() => SearchUtils.buildQueryStringFromFilterValues(searchAdvancedFilters) || '', [searchAdvancedFilters]);
+    const queryString = useMemo(() => SearchUtils.buildQueryStringFromFilterFormValues(searchAdvancedFilters) || '', [searchAdvancedFilters]);
     const queryJSON = useMemo(() => SearchUtils.buildSearchQueryJSON(queryString || SearchUtils.buildCannedSearchQuery()) ?? ({} as SearchQueryJSON), [queryString]);
 
     const applyFiltersAndNavigate = () => {
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 9226093154ae..7095413398b8 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -52,6 +52,7 @@ function SearchPageBottomTab() {
                             activeWorkspaceID={policyID}
                             breadcrumbLabel={translate('common.search')}
                             shouldDisplaySearch={false}
+                            shouldDisplaySearchRouter={shouldUseNarrowLayout}
                             isCustomSearchQuery={shouldUseNarrowLayout && !SearchUtils.isCannedSearchQuery(queryJSON)}
                         />
                         <SearchTypeMenu queryJSON={queryJSON} />
diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
index 0158a15bfc41..b5d390e2fc53 100644
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -57,7 +57,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
     const openMenu = useCallback(() => setIsPopoverVisible(true), []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
     const onPress = () => {
-        const values = SearchUtils.getFiltersFormValues(queryJSON);
+        const values = SearchUtils.buildFilterFormValuesFromQuery(queryJSON);
         SearchActions.updateAdvancedFilters(values);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
     };
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.tsx b/src/pages/TeachersUnite/SaveTheWorldPage.tsx
index b4f850981c92..b30fedab530e 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.tsx
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.tsx
@@ -56,6 +56,7 @@ function SaveTheWorldPage() {
             <HeaderWithBackButton
                 title={translate('sidebarScreen.saveTheWorld')}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 onBackButtonPress={() => Navigation.goBack()}
                 icon={Illustrations.TeachersUnite}
             />
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 14ed4b583baf..446ecd5883af 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -13,6 +13,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
+import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import Text from '@components/Text';
@@ -264,6 +265,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                                     </View>
                                 )}
                             </PressableWithoutFeedback>
+                            <SearchButton />
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
                                 {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrialBadge />}
                                 {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && <TaskHeaderActionButton report={report} />}
diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index 1f3f235a9c3f..4232e08f70f0 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -135,6 +135,7 @@ function AboutPage() {
             <HeaderWithBackButton
                 title={translate('initialSettingsPage.about')}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.PalmTree}
             />
diff --git a/src/pages/settings/Preferences/PreferencesPage.tsx b/src/pages/settings/Preferences/PreferencesPage.tsx
index e51250f3538a..f2c5f0366640 100755
--- a/src/pages/settings/Preferences/PreferencesPage.tsx
+++ b/src/pages/settings/Preferences/PreferencesPage.tsx
@@ -40,6 +40,7 @@ function PreferencesPage() {
                 title={translate('common.preferences')}
                 icon={Illustrations.Gears}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <ScrollView contentContainerStyle={styles.pt3}>
diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx
index ce4f2aec88d0..dfd1f9d84dec 100755
--- a/src/pages/settings/Profile/ProfilePage.tsx
+++ b/src/pages/settings/Profile/ProfilePage.tsx
@@ -117,6 +117,7 @@ function ProfilePage() {
                 title={translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack()}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 icon={Illustrations.Profile}
             />
             <ScrollView style={styles.pt3}>
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index 6403b0ac64e2..e54e7d873096 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -141,6 +141,7 @@ function SecuritySettingsPage() {
                         shouldShowBackButton={shouldUseNarrowLayout}
                         onBackButtonPress={() => Navigation.goBack()}
                         icon={Illustrations.LockClosed}
+                        shouldDisplaySearchRouter
                     />
                     <ScrollView contentContainerStyle={styles.pt3}>
                         <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
index ecc6a6cdc27a..2cb99207f8e0 100644
--- a/src/pages/settings/Subscription/CardSection/CardSection.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -61,7 +61,7 @@ function CardSection() {
     }, []);
 
     const viewPurchases = useCallback(() => {
-        const query = SearchUtils.buildQueryStringFromFilterValues({merchant: CONST.EXPENSIFY_MERCHANT});
+        const query = SearchUtils.buildQueryStringFromFilterFormValues({merchant: CONST.EXPENSIFY_MERCHANT});
         Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query}));
     }, []);
 
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 79f7e45d8cda..e31c6097501e 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -106,6 +106,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
             <HeaderWithBackButton
                 title={translate('initialSettingsPage.aboutPage.troubleshoot')}
                 shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.Lightbulb}
             />
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx
index 316c0b66b95d..c8bdfb5ea8d0 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx
@@ -366,6 +366,7 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
                         onBackButtonPress={() => Navigation.goBack()}
                         icon={Illustrations.MoneyIntoWallet}
                         shouldShowBackButton={shouldUseNarrowLayout}
+                        shouldDisplaySearchRouter
                     />
                     <ScrollView style={styles.pt3}>
                         <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index c2a47e536d43..0f944306ea6a 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -387,6 +387,7 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
                 <HeaderWithBackButton
                     title={translate('common.workspaces')}
                     shouldShowBackButton={shouldUseNarrowLayout}
+                    shouldDisplaySearchRouter
                     onBackButtonPress={() => Navigation.goBack()}
                     icon={Illustrations.BigRocket}
                 >
@@ -423,6 +424,7 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
                 <HeaderWithBackButton
                     title={translate('common.workspaces')}
                     shouldShowBackButton={shouldUseNarrowLayout}
+                    shouldDisplaySearchRouter
                     onBackButtonPress={() => Navigation.goBack()}
                     icon={Illustrations.BigRocket}
                 >