Revert "Redesign search to always show search input(mobile + desktop)."

Author: mountiny

patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useMemo, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -9,8 +10,6 @@ import DecisionModal from '@components/DecisionModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
-import {useSearchContext} from '@components/Search/SearchContext';
-import type {PaymentData, SearchQueryJSON} from '@components/Search/types';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
@@ -29,20 +28,22 @@ import {
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getAllTaxRates, hasVBBA} from '@libs/PolicyUtils';
-import {buildFilterFormValuesFromQuery} from '@libs/SearchQueryUtils';
+import {buildFilterFormValuesFromQuery, isCannedSearchQuery} from '@libs/SearchQueryUtils';
 import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
+import {useSearchContext} from './SearchContext';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
+import type {PaymentData, SearchQueryJSON} from './types';
 
-type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; searchRouterListVisible?: boolean; onSearchRouterFocus?: () => void};
+type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFocus}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -67,12 +68,24 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
 
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+        isScreenFocused,
     );
 
     const {status, hash} = queryJSON;
 
+    useFocusEffect(
+        useCallback(() => {
+            setIsScreenFocused(true);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
     const handleDeleteExpenses = () => {
@@ -302,106 +315,94 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
         styles.textWrap,
     ]);
 
-    const onFiltersButtonPress = useCallback(() => {
+    if (shouldUseNarrowLayout) {
+        if (selectionMode?.isEnabled) {
+            return (
+                <View>
+                    <SearchSelectedNarrow
+                        options={headerButtonsOptions}
+                        itemsLength={selectedTransactionsKeys.length}
+                    />
+                    <ConfirmModal
+                        isVisible={isDeleteExpensesConfirmModalVisible}
+                        onConfirm={handleDeleteExpenses}
+                        onCancel={() => {
+                            setIsDeleteExpensesConfirmModalVisible(false);
+                        }}
+                        title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                        prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                        confirmText={translate('common.delete')}
+                        cancelText={translate('common.cancel')}
+                        danger
+                    />
+                    <DecisionModal
+                        title={translate('common.youAppearToBeOffline')}
+                        prompt={translate('common.offlinePrompt')}
+                        isSmallScreenWidth={isSmallScreenWidth}
+                        onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
+                        secondOptionText={translate('common.buttonConfirm')}
+                        isVisible={isOfflineModalVisible}
+                        onClose={() => setIsOfflineModalVisible(false)}
+                    />
+                    <DecisionModal
+                        title={translate('common.downloadFailedTitle')}
+                        prompt={translate('common.downloadFailedDescription')}
+                        isSmallScreenWidth={isSmallScreenWidth}
+                        onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
+                        secondOptionText={translate('common.buttonConfirm')}
+                        isVisible={isDownloadErrorModalVisible}
+                        onClose={() => setIsDownloadErrorModalVisible(false)}
+                    />
+                </View>
+            );
+        }
+        return null;
+    }
+
+    const onFiltersButtonPress = () => {
         hideProductTrainingTooltip();
         const filterFormValues = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
         updateAdvancedFilters(filterFormValues);
 
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
-    }, [allCards, currencyList, hideProductTrainingTooltip, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);
-
-    const InputRightComponent = useMemo(() => {
-        return headerButtonsOptions.length > 0 ? (
-            <ButtonWithDropdownMenu
-                onPress={() => null}
-                shouldAlwaysShowDropdownMenu
-                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
-                customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
-                options={headerButtonsOptions}
-                isSplitButton={false}
-                shouldUseStyleUtilityForAnchorPosition
-            />
-        ) : (
-            <EducationalTooltip
-                shouldRender={shouldShowProductTrainingTooltip}
-                anchorAlignment={{
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                }}
-                shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
-                wrapperStyle={styles.productTrainingTooltipWrapper}
-                renderTooltipContent={renderProductTrainingTooltip}
-                onTooltipPress={onFiltersButtonPress}
-            >
-                <Button
-                    innerStyles={[styles.searchRouterInputResults, styles.borderNone, styles.bgTransparent]}
-                    icon={Expensicons.Filters}
-                    onPress={onFiltersButtonPress}
-                />
-            </EducationalTooltip>
-        );
-    }, [
-        headerButtonsOptions,
-        onFiltersButtonPress,
-        renderProductTrainingTooltip,
-        selectedTransactionsKeys.length,
-        shouldShowProductTrainingTooltip,
-        styles.bgTransparent,
-        styles.borderNone,
-        styles.productTrainingTooltipWrapper,
-        styles.searchRouterInputResults,
-        translate,
-    ]);
+    };
 
-    if (shouldUseNarrowLayout && selectionMode?.isEnabled) {
-        return (
-            <View>
-                <SearchSelectedNarrow
-                    options={headerButtonsOptions}
-                    itemsLength={selectedTransactionsKeys.length}
-                />
-                <ConfirmModal
-                    isVisible={isDeleteExpensesConfirmModalVisible}
-                    onConfirm={handleDeleteExpenses}
-                    onCancel={() => {
-                        setIsDeleteExpensesConfirmModalVisible(false);
-                    }}
-                    title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
-                    prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
-                    confirmText={translate('common.delete')}
-                    cancelText={translate('common.cancel')}
-                    danger
-                />
-                <DecisionModal
-                    title={translate('common.youAppearToBeOffline')}
-                    prompt={translate('common.offlinePrompt')}
-                    isSmallScreenWidth={isSmallScreenWidth}
-                    onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
-                    secondOptionText={translate('common.buttonConfirm')}
-                    isVisible={isOfflineModalVisible}
-                    onClose={() => setIsOfflineModalVisible(false)}
-                />
-                <DecisionModal
-                    title={translate('common.downloadFailedTitle')}
-                    prompt={translate('common.downloadFailedDescription')}
-                    isSmallScreenWidth={isSmallScreenWidth}
-                    onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
-                    secondOptionText={translate('common.buttonConfirm')}
-                    isVisible={isDownloadErrorModalVisible}
-                    onClose={() => setIsDownloadErrorModalVisible(false)}
-                />
-            </View>
-        );
-    }
+    const isCannedQuery = isCannedSearchQuery(queryJSON);
 
     return (
         <>
-            <SearchPageHeaderInput
-                searchRouterListVisible={searchRouterListVisible}
-                onSearchRouterFocus={onSearchRouterFocus}
-                queryJSON={queryJSON}
-                inputRightComponent={InputRightComponent}
-            />
+            <SearchPageHeaderInput queryJSON={queryJSON}>
+                {headerButtonsOptions.length > 0 ? (
+                    <ButtonWithDropdownMenu
+                        onPress={() => null}
+                        shouldAlwaysShowDropdownMenu
+                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                        customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
+                        options={headerButtonsOptions}
+                        isSplitButton={false}
+                        shouldUseStyleUtilityForAnchorPosition
+                    />
+                ) : (
+                    <EducationalTooltip
+                        shouldRender={shouldShowProductTrainingTooltip}
+                        anchorAlignment={{
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                        }}
+                        shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
+                        wrapperStyle={styles.productTrainingTooltipWrapper}
+                        renderTooltipContent={renderProductTrainingTooltip}
+                        onTooltipPress={onFiltersButtonPress}
+                    >
+                        <Button
+                            innerStyles={!isCannedQuery && [styles.searchRouterInputResults, styles.borderNone]}
+                            text={translate('search.filtersHeader')}
+                            icon={Expensicons.Filters}
+                            onPress={onFiltersButtonPress}
+                        />
+                    </EducationalTooltip>
+                )}
+            </SearchPageHeaderInput>
             <ConfirmModal
                 isVisible={isDeleteExpensesConfirmModalVisible}
                 onConfirm={handleDeleteExpenses}