Cleanup display SearchButton component on all Pages

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>

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;
 

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}

src/components/MoneyRequestHeader.tsx

@@ -134,6 +134,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                     policy={policy}
                     shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={onBackButtonPress}
+                    shouldDisplaySearchRouter
                 >
                     {hasAllPendingRTERViolations && !shouldUseNarrowLayout && (
                         <Button

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,36 +296,41 @@ 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}
             subtitle={headerSubtitle}
             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>
     );
 }

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();
             }}

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}

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);

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