Persist filters across view in Search

src/CONST/index.ts

@@ -8910,7 +8910,7 @@ const CONST = {
             TYPE_MENU_ITEM: 'Search-TypeMenuItem',
             SAVED_SEARCH_MENU_ITEM: 'Search-SavedSearchMenuItem',
             SAVE_VIEW_BUTTON: 'Search-SaveViewButton',
-            CLEAR_FILTERS_BUTTON: 'Search-ClearFiltersButton',
+            RESET_FILTERS_BUTTON: 'Search-ResetFiltersButton',
             ACTION_CELL_VIEW: 'Search-ActionCellView',
             ACTION_CELL_PAY: 'Search-ActionCellPay',
             ACTION_CELL_ACTION: 'Search-ActionCellAction',
@@ -9755,18 +9755,6 @@ const SUBMIT_FEATURE_IDS: ReadonlySet<string> = new Set([
     CONST.UPGRADE_FEATURE_INTRO_MAPPING.invoicing.id,
 ]);
 
-type SearchFilterKey = ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS> | ValueOf<typeof CONST.SEARCH.SYNTAX_ROOT_KEYS>;
-
-const CONTINUATION_DETECTION_SEARCH_FILTER_KEYS = [
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.PAYER,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTER,
-    CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE,
-] as SearchFilterKey[];
-
 const FRAUD_PROTECTION_EVENT = {
     START_SUPPORT_SESSION: 'StartSupportSession',
     STOP_SUPPORT_SESSION: 'StopSupportSession',
@@ -9835,6 +9823,6 @@ export type {
     EnablePaymentsSubPageType,
 };
 
-export {CONTINUATION_DETECTION_SEARCH_FILTER_KEYS, FRAUD_PROTECTION_EVENT, COUNTRIES_US_BANK_FLOW, SUBMIT_FEATURE_IDS};
+export {FRAUD_PROTECTION_EVENT, COUNTRIES_US_BANK_FLOW, SUBMIT_FEATURE_IDS};
 
 export default CONST;

src/ONYXKEYS.ts

@@ -719,6 +719,9 @@ const ONYXKEYS = {
     /** Stores the information about the recent searches */
     RECENT_SEARCHES: 'nvp_recentSearches',
 
+    /** Stores the last query for each suggested/saved search */
+    SEARCH_FILTERS: 'nvp_searchFilters',
+
     /** Stores the current search page context (e.g., whether to show the search query) */
     SEARCH_CONTEXT: 'searchContext',
 
@@ -1581,6 +1584,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_TRY_NEW_DOT]: OnyxTypes.TryNewDot;
     [ONYXKEYS.RECENT_SEARCHES]: Record<string, OnyxTypes.RecentSearchItem>;
     [ONYXKEYS.SAVED_SEARCHES]: OnyxTypes.SaveSearch;
+    [ONYXKEYS.SEARCH_FILTERS]: OnyxTypes.SearchFilters;
     [ONYXKEYS.NVP_HAS_SEEDED_MY_EXPENSES_SEARCH]: boolean;
     [ONYXKEYS.SEARCH_CONTEXT]: OnyxTypes.SearchContext;
     [ONYXKEYS.SEARCH_FOOTER_CONVERSION]: OnyxTypes.SearchFooterConversion;

src/ROUTES.ts

@@ -1958,8 +1958,8 @@ const ROUTES = {
     },
     SEARCH_SAVE: 'search/save',
     SEARCH_SAVED_SEARCH_RENAME: {
-        route: 'search/saved-search/rename',
-        getRoute: ({name, jsonQuery}: {name: string; jsonQuery: SearchQueryString}) => `search/saved-search/rename?name=${name}&q=${encodeURIComponent(jsonQuery)}` as const,
+        route: 'search/saved-search/rename/:id',
+        getRoute: (id: string) => `search/saved-search/rename/${id}` as const,
     },
     SEARCH_COLUMNS: 'search/columns',
     SEARCH_ADVANCED_FILTERS: 'search/filters',

src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx

@@ -165,7 +165,7 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo
     const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
-    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, true);
 
     const isInvoiceReport = isInvoiceReportUtil(moneyRequestReport);
     const isAnyTransactionOnHold = hasHeldExpensesReportUtils(allTransactions);

src/components/MoneyReportHeaderPrimaryAction/PayPrimaryAction.tsx

@@ -116,7 +116,7 @@ function PayPrimaryAction({reportID, chatReportID}: PayPrimaryActionProps) {
 
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
-    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, true);
 
     const {openHoldMenu} = useMoneyReportHeaderModals();
 

src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx

@@ -130,7 +130,7 @@ function SubmitPrimaryActionContent({reportID}: SubmitPrimaryActionProps) {
 
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
-    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, true);
 
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Send', 'Document']);
 

src/components/Navigation/NavigationTabBar/SearchTabButton.tsx

@@ -15,6 +15,7 @@ import navigationRef from '@navigation/navigationRef';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {lastExpensesSearchQuerySelector} from '@src/selectors/SearchFilters';
 
 import type {ValueOf} from 'type-fest';
 
@@ -34,6 +35,7 @@ function SearchTabButton({selectedTab, isWideLayout}: SearchTabButtonProps) {
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['ReceiptMultiple']);
     const [lastSearchParams] = useOnyx(ONYXKEYS.REPORT_NAVIGATION_LAST_SEARCH_QUERY);
+    const [lastExpensesSearchQuery] = useOnyx(ONYXKEYS.SEARCH_FILTERS, {selector: lastExpensesSearchQuerySelector});
     const searchAccessibilityState = {selected: selectedTab === NAVIGATION_TABS.SEARCH};
 
     const navigateToSearch = () => {
@@ -49,7 +51,7 @@ function SearchTabButton({selectedTab, isWideLayout}: SearchTabButtonProps) {
             });
             startNavigateToReportsSpans();
 
-            Navigation.navigate(getSearchTabRoute(navigationRef.getRootState(), lastSearchParams));
+            Navigation.navigate(getSearchTabRoute(navigationRef.getRootState(), lastSearchParams, lastExpensesSearchQuery));
         });
     };
 

src/components/Navigation/NavigationTabBar/getLastRoute.ts

@@ -17,13 +17,13 @@ function getLastRoute(rootState: NavigationState, navigator: ValueOf<typeof NAVI
                 return false;
             }
             const tabState = getTabState(route);
-            return tabState?.routes?.[tabState.index ?? 0]?.name === navigator;
+            return tabState?.routes?.findLast((tabRoute) => tabRoute.state && tabRoute.name === navigator);
         });
         if (!rootTabRoute) {
             rootTabRoute = rootState.routes.findLast((route) => route.name === NAVIGATORS.TAB_NAVIGATOR);
         }
         const tabState = getTabState(rootTabRoute);
-        lastNavigatorKey = tabState?.routes?.findLast((route) => route.name === navigator)?.key;
+        lastNavigatorKey = tabState?.routes?.findLast((route) => route.state && route.name === navigator)?.key;
     }
 
     const lastNavigatorState = lastNavigatorKey ? getPreservedNavigatorState(lastNavigatorKey) : undefined;

src/components/Navigation/NavigationTabBar/getSearchTabRoute.ts

@@ -1,7 +1,7 @@
 /**
  * Resolves the route used to restore the latest Spend search.
  */
-import {buildCannedSearchQuery, buildSearchQueryJSON, buildSearchQueryString, isSearchRootParams} from '@libs/SearchQueryUtils';
+import {buildCannedSearchQuery, buildSearchQueryJSON, buildSearchQueryString, getValidLastQuery, isSearchRootParams} from '@libs/SearchQueryUtils';
 
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -14,7 +14,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 
 import getLastRoute from './getLastRoute';
 
-function getSearchTabRoute(rootState: NavigationState, lastSearchParams: OnyxEntry<LastSearchParams>) {
+function getSearchTabRoute(rootState: NavigationState, lastSearchParams: OnyxEntry<LastSearchParams>, lastExpensesSearchQuery: string | undefined) {
     const lastSearchRoute = getLastRoute(rootState, NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR, SCREENS.SEARCH.ROOT);
 
     if (isSearchRootParams(lastSearchRoute?.params)) {
@@ -31,7 +31,8 @@ function getSearchTabRoute(rootState: NavigationState, lastSearchParams: OnyxEnt
     const lastQueryJSON = lastSearchParams?.queryJSON;
     const lastQueryFromOnyx = lastQueryJSON ? buildSearchQueryString(lastQueryJSON) : undefined;
     const defaultSearchQuery = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.EXPENSE});
-    return ROUTES.SEARCH_ROOT.getRoute({query: lastQueryFromOnyx ?? defaultSearchQuery});
+    const fallbackSearchQuery = getValidLastQuery(lastExpensesSearchQuery, defaultSearchQuery);
+    return ROUTES.SEARCH_ROOT.getRoute({query: lastQueryFromOnyx ?? fallbackSearchQuery});
 }
 
 export default getSearchTabRoute;

src/components/Navigation/SearchSidebar.tsx

@@ -4,7 +4,7 @@ import SidebarRightIcon from '@assets/images/sidebar-right.svg';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
 import {PressableWithoutFeedback} from '@components/Pressable';
-import {useSearchQueryContext, useSearchResultsActions, useSearchResultsContext} from '@components/Search/SearchContext';
+import {useSearchResultsActions, useSearchResultsContext} from '@components/Search/SearchContext';
 import Tooltip from '@components/Tooltip';
 
 import {useLoadingBarVisibility} from '@hooks/useInFlightRequests';
@@ -57,7 +57,6 @@ function SearchSidebar({state}: SearchSidebarProps) {
 
     const route = state.routes.at(-1);
     const {lastSearchType, currentSearchResults} = useSearchResultsContext();
-    const {currentSearchQueryJSON} = useSearchQueryContext();
     const {setLastSearchType} = useSearchResultsActions();
 
     const searchType = currentSearchResults?.search?.type;
@@ -122,7 +121,7 @@ function SearchSidebar({state}: SearchSidebarProps) {
                         </TopBar>
                         <Hoverable onHoverIn={startPeek}>
                             <View style={styles.flex1}>
-                                <SearchTypeMenuWide queryJSON={currentSearchQueryJSON} />
+                                <SearchTypeMenuWide />
                             </View>
                         </Hoverable>
                     </View>

src/components/Search/FilterDropdowns/BasePopup.tsx

@@ -14,6 +14,7 @@ import ActionButtons from './ActionButtons';
 type BasePopupProps = React.PropsWithChildren & {
     label?: string;
     showLabel?: boolean;
+    shouldShowActionButtons?: boolean;
     applySentryLabel: string;
     resetSentryLabel?: string;
     style?: StyleProp<ViewStyle>;
@@ -22,7 +23,7 @@ type BasePopupProps = React.PropsWithChildren & {
     onBackButtonPress?: () => void;
 };
 
-function BasePopup({children, label, applySentryLabel, resetSentryLabel, showLabel, style, onApply, onReset, onBackButtonPress}: BasePopupProps) {
+function BasePopup({children, label, applySentryLabel, resetSentryLabel, showLabel, shouldShowActionButtons = true, style, onApply, onReset, onBackButtonPress}: BasePopupProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
@@ -42,13 +43,15 @@ function BasePopup({children, label, applySentryLabel, resetSentryLabel, showLab
                 shouldDisplayLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1, styles.mb2]}>{label}</Text>
             )}
             {children}
-            <ActionButtons
-                containerStyle={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}
-                onReset={onReset}
-                onApply={onApply}
-                applySentryLabel={applySentryLabel}
-                resetSentryLabel={resetSentryLabel}
-            />
+            {shouldShowActionButtons && (
+                <ActionButtons
+                    containerStyle={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}
+                    onReset={onReset}
+                    onApply={onApply}
+                    applySentryLabel={applySentryLabel}
+                    resetSentryLabel={resetSentryLabel}
+                />
+            )}
         </View>
     );
 }

src/components/Search/FilterDropdowns/ListPopup.tsx

@@ -14,13 +14,14 @@ import type {PopoverComponentProps} from './FilterPopupButton';
 import BasePopup from './BasePopup';
 
 type ListPopupProps = Pick<ListFilterContentProps, 'baseFilterKey'> & {
+    isDefault: boolean;
     values: Partial<SearchAdvancedFiltersForm> | undefined;
     label: string;
     closeOverlay: PopoverComponentProps['closeOverlay'];
     updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
-function ListPopup({baseFilterKey, values, label, updateFilterForm, closeOverlay}: ListPopupProps) {
+function ListPopup({baseFilterKey, isDefault, values, label, updateFilterForm, closeOverlay}: ListPopupProps) {
     const {isNegated: initialIsNegated, value: initialValue} = getFilterNegatableValue(baseFilterKey, values);
     const [value, setValue] = useState(initialValue);
     const [isNegated, setIsNegated] = useState(initialIsNegated);
@@ -34,6 +35,7 @@ function ListPopup({baseFilterKey, values, label, updateFilterForm, closeOverlay
         <BasePopup
             label={label}
             onApply={applyChanges}
+            shouldShowActionButtons={!isDefault || !!value?.length}
             applySentryLabel={`Search-FilterPopupApply-${baseFilterKey}`}
         >
             <ListFilterContent

src/components/Search/SearchContextDefinitions.ts

@@ -5,6 +5,7 @@ import CONST from '@src/CONST';
 import React from 'react';
 
 import type {
+    QueryFilterKey,
     SearchQueryActionsValue,
     SearchQueryContextValue,
     SearchResultsActionsValue,
@@ -23,12 +24,16 @@ const defaultSearchQueryContext: SearchQueryContextValue = {
     currentSimilarSearchHash: -1,
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
+    currentDefaultSearchQueryJSON: undefined,
+    currentDefaultSearchQueryFilterKeys: new Set<QueryFilterKey>(),
     suggestedSearches: {} as Record<SearchKey, SearchTypeMenuItem>,
     shouldResetSearchQuery: false,
 };
 
 const defaultSearchQueryActions: SearchQueryActionsValue = {
     setShouldResetSearchQuery: () => {},
+    setCurrentSearchKey: () => {},
+    resetSearchKey: () => {},
 };
 
 const EMPTY_TRANSACTIONS_BY_REPORT_ID: SearchResultsContextValue['currentSearchTransactionsByReportID'] = new Map();

src/components/Search/SearchPageHeader/SearchFiltersBarNarrow.tsx

@@ -12,7 +12,7 @@ import {FlatList} from 'react-native';
 import type {FilterItem} from './useSearchFiltersBar';
 
 import SearchFilterBar from './SearchFilterBar';
-import SearchFiltersClearButton from './SearchFiltersClearButton';
+import SearchFiltersResetButton from './SearchFiltersResetButton';
 import useSearchFiltersBar from './useSearchFiltersBar';
 
 type SearchFiltersBarNarrowProps = {
@@ -22,7 +22,7 @@ type SearchFiltersBarNarrowProps = {
 function SearchFiltersBarNarrow({queryJSON}: SearchFiltersBarNarrowProps) {
     const styles = useThemeStyles();
     const scrollRef = useRef<FlatList<SearchFilter & FilterItem>>(null);
-    const {filters, hasErrors, shouldShowFiltersBarLoading, clearFilters} = useSearchFiltersBar(queryJSON);
+    const {filters, hasErrors, shouldShowFiltersBarLoading, shouldShowResetFilters, resetFilters} = useSearchFiltersBar(queryJSON);
 
     const adjustScroll = (info: {distanceFromEnd: number}) => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
@@ -59,7 +59,7 @@ function SearchFiltersBarNarrow({queryJSON}: SearchFiltersBarNarrowProps) {
             renderItem={renderFilterItem}
             onEndReached={adjustScroll}
             onEndReachedThreshold={0.75}
-            ListFooterComponent={filters.length > 0 ? <SearchFiltersClearButton onPress={clearFilters} /> : undefined}
+            ListFooterComponent={shouldShowResetFilters ? <SearchFiltersResetButton onPress={resetFilters} /> : undefined}
         />
     );
 }

src/components/Search/SearchPageHeader/SearchFiltersBarWide.tsx

@@ -4,15 +4,15 @@ import SearchFiltersSkeleton from '@components/Skeletons/SearchFiltersSkeleton';
 import React from 'react';
 
 import SearchFilterBar from './SearchFilterBar';
-import SearchFiltersClearButton from './SearchFiltersClearButton';
+import SearchFiltersResetButton from './SearchFiltersResetButton';
 import useSearchFiltersBar from './useSearchFiltersBar';
 
 type SearchFiltersBarWideProps = {
     queryJSON: SearchQueryJSON;
 };
 
 function SearchFiltersBarWide({queryJSON}: SearchFiltersBarWideProps) {
-    const {filters, hasErrors, shouldShowFiltersBarLoading, clearFilters} = useSearchFiltersBar(queryJSON);
+    const {filters, hasErrors, shouldShowFiltersBarLoading, shouldShowResetFilters, resetFilters} = useSearchFiltersBar(queryJSON);
 
     if (hasErrors) {
         return null;
@@ -30,7 +30,7 @@ function SearchFiltersBarWide({queryJSON}: SearchFiltersBarWideProps) {
                     item={item}
                 />
             ))}
-            {filters.length > 0 && <SearchFiltersClearButton onPress={clearFilters} />}
+            {shouldShowResetFilters && <SearchFiltersResetButton onPress={resetFilters} />}
         </>
     );
 }

src/components/Search/SearchPageHeader/SearchFiltersClearButton.tsx → src/components/Search/SearchPageHeader/SearchFiltersResetButton.tsx

@@ -11,32 +11,32 @@ import CONST from '@src/CONST';
 
 import React from 'react';
 
-type SearchFiltersClearButtonProps = {
+type SearchFiltersResetButtonProps = {
     onPress: () => void;
 };
 
-function SearchFiltersClearButton({onPress}: SearchFiltersClearButtonProps) {
+function SearchFiltersResetButton({onPress}: SearchFiltersResetButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Close']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['RotateLeft']);
 
     return (
         <PressableWithFeedback
-            accessibilityLabel={translate('common.clear')}
+            accessibilityLabel={translate('common.reset')}
             onPress={onPress}
-            style={[styles.searchFiltersClearButton]}
+            style={[styles.searchFiltersResetButton]}
             hoverStyle={styles.hoveredComponentBG}
-            sentryLabel={CONST.SENTRY_LABEL.SEARCH.CLEAR_FILTERS_BUTTON}
+            sentryLabel={CONST.SENTRY_LABEL.SEARCH.RESET_FILTERS_BUTTON}
         >
             <Icon
-                src={expensifyIcons.Close}
+                src={expensifyIcons.RotateLeft}
                 fill={theme.icon}
                 size={CONST.ICON_SIZE.EXTRA_SMALL}
             />
-            <Text style={[styles.textMicroBoldSupporting]}>{translate('common.clear')}</Text>
+            <Text style={[styles.textMicroBoldSupporting]}>{translate('common.reset')}</Text>
         </PressableWithFeedback>
     );
 }
 
-export default SearchFiltersClearButton;
+export default SearchFiltersResetButton;