store applied filters in onyx

src/ROUTES.ts

@@ -35,7 +35,7 @@ const ROUTES = {
 
     SEARCH_CENTRAL_PANE: {
         route: 'search',
-        getRoute: ({query}: {query: SearchQueryString}) => `search?q=${query}` as const,
+        getRoute: ({query}: {query: SearchQueryString}) => `search?q=${encodeURIComponent(query)}` as const,
     },
     SEARCH_ADVANCED_FILTERS: 'search/filters',
     SEARCH_ADVANCED_FILTERS_DATE: 'search/filters/date',

src/components/Search/SearchPageHeader.tsx

@@ -298,6 +298,12 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
         return null;
     }
 
+    const onPress = () => {
+        const values = SearchUtils.getFiltersFormValues(queryJSON);
+        SearchActions.updateAdvancedFilters(values);
+        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
+
     return (
         <HeaderWrapper
             title={headerTitle}
@@ -319,7 +325,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
             <Button
                 text={translate('search.filtersHeader')}
                 icon={Expensicons.Filters}
-                onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
+                onPress={onPress}
                 medium
             />
         </HeaderWrapper>

src/components/Search/types.ts

@@ -50,7 +50,7 @@ type QueryFilter = {
     value: string | number;
 };
 
-type AdvancedFiltersKeys = ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS> | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS;
+type AdvancedFiltersKeys = ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>;
 
 type QueryFilters = {
     [K in AdvancedFiltersKeys]?: QueryFilter[];

src/libs/SearchUtils.ts

@@ -22,7 +22,7 @@ import * as searchParser from './SearchParser/searchParser';
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
-type KeysOfFilterKeysObject = keyof typeof CONST.SEARCH.SYNTAX_FILTER_KEYS;
+type FilterKeys = keyof typeof CONST.SEARCH.SYNTAX_FILTER_KEYS;
 
 const columnNamesToSortingProperty = {
     [CONST.SEARCH.TABLE_COLUMNS.TO]: 'formattedTo' as const,
@@ -469,11 +469,11 @@ function buildAmountFilterQuery(filterValues: Partial<SearchAdvancedFiltersForm>
 }
 
 function sanitizeString(str: string) {
-    const safeStr = str;
-    if (safeStr.includes(' ') || safeStr.includes(',')) {
-        return `"${safeStr}"`;
+    const regexp = /[<>,:= ]/g;
+    if (regexp.test(str)) {
+        return `"${str}"`;
     }
-    return safeStr;
+    return str;
 }
 
 function getExpenseTypeTranslationKey(expenseType: ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>): TranslationPaths {
@@ -516,18 +516,21 @@ function getChatStatusTranslationKey(chatStatus: ValueOf<typeof CONST.SEARCH.CHA
 function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFiltersForm>) {
     const filtersString = Object.entries(filterValues).map(([filterKey, filterValue]) => {
         if ((filterKey === FILTER_KEYS.MERCHANT || filterKey === FILTER_KEYS.DESCRIPTION || filterKey === FILTER_KEYS.REPORT_ID) && filterValue) {
-            const keyInCorrectForm = (Object.keys(CONST.SEARCH.SYNTAX_FILTER_KEYS) as KeysOfFilterKeysObject[]).find((key) => CONST.SEARCH.SYNTAX_FILTER_KEYS[key] === filterKey);
+            const keyInCorrectForm = (Object.keys(CONST.SEARCH.SYNTAX_FILTER_KEYS) as FilterKeys[]).find((key) => CONST.SEARCH.SYNTAX_FILTER_KEYS[key] === filterKey);
             if (keyInCorrectForm) {
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS[keyInCorrectForm]}:${sanitizeString(filterValue as string)}`;
             }
         }
         if (filterKey === FILTER_KEYS.KEYWORD && filterValue) {
-            const keyInCorrectForm = (Object.keys(CONST.SEARCH.SYNTAX_FILTER_KEYS) as KeysOfFilterKeysObject[]).find((key) => CONST.SEARCH.SYNTAX_FILTER_KEYS[key] === filterKey);
-            if (keyInCorrectForm) {
-                return `${filterValue as string}`;
-            }
+            const value = (filterValue as string).split(' ').map(sanitizeString).join(' ');
+            return `${value}`;
+        }
+        if (filterKey === FILTER_KEYS.TYPE && filterValue) {
+            return `${CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE}:${sanitizeString(filterValue as string)}`;
+        }
+        if (filterKey === FILTER_KEYS.STATUS && filterValue) {
+            return `${CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS}:${sanitizeString(filterValue as string)}`;
         }
-
         if (
             (filterKey === FILTER_KEYS.CATEGORY ||
                 filterKey === FILTER_KEYS.CARD_ID ||
@@ -543,8 +546,8 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
             Array.isArray(filterValue) &&
             filterValue.length > 0
         ) {
-            const filterValueArray = filterValues[filterKey] ?? [];
-            const keyInCorrectForm = (Object.keys(CONST.SEARCH.SYNTAX_FILTER_KEYS) as KeysOfFilterKeysObject[]).find((key) => CONST.SEARCH.SYNTAX_FILTER_KEYS[key] === filterKey);
+            const filterValueArray = [...new Set<string>(filterValues[filterKey] ?? [])];
+            const keyInCorrectForm = (Object.keys(CONST.SEARCH.SYNTAX_FILTER_KEYS) as FilterKeys[]).find((key) => CONST.SEARCH.SYNTAX_FILTER_KEYS[key] === filterKey);
             if (keyInCorrectForm) {
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS[keyInCorrectForm]}:${filterValueArray.map(sanitizeString).join(',')}`;
             }
@@ -612,6 +615,58 @@ function getFilters(queryJSON: SearchQueryJSON) {
     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) {
+    const filters = getFilters(queryJSON);
+    const filterKeys = Object.keys(filters);
+    const filtersForm = {} as Partial<SearchAdvancedFiltersForm>;
+    for (const filterKey of filterKeys) {
+        if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID || filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT || filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION) {
+            filtersForm[filterKey] = filters[filterKey]?.[0]?.value.toString();
+        }
+        if (
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TO ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS
+        ) {
+            filtersForm[filterKey] = filters[filterKey]?.map((filter) => filter.value.toString());
+        }
+        if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD) {
+            filtersForm[filterKey] = filters[filterKey]
+                ?.map((filter) => filter.value.toString())
+                .map((filter) => {
+                    if (filter.includes(' ')) {
+                        return `"${filter}"`;
+                    }
+                    return filter;
+                })
+                .join(' ');
+        }
+        if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE) {
+            filtersForm[FILTER_KEYS.DATE_BEFORE] = filters[filterKey]?.find((filter) => filter.operator === 'lt')?.value.toString();
+            filtersForm[FILTER_KEYS.DATE_AFTER] = filters[filterKey]?.find((filter) => filter.operator === 'gt')?.value.toString();
+        }
+        if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.AMOUNT) {
+            filtersForm[FILTER_KEYS.LESS_THAN] = filters[filterKey]?.find((filter) => filter.operator === 'lt')?.value.toString();
+            filtersForm[FILTER_KEYS.GREATER_THAN] = filters[filterKey]?.find((filter) => filter.operator === 'gt')?.value.toString();
+        }
+    }
+
+    filtersForm[FILTER_KEYS.TYPE] = queryJSON.type;
+    filtersForm[FILTER_KEYS.STATUS] = queryJSON.status;
+
+    return filtersForm;
+}
+
 /**
  * Given a SearchQueryJSON this function will try to find the value of policyID filter saved in query
  * and return just the first policyID value from the filter.
@@ -680,6 +735,7 @@ export {
     buildSearchQueryString,
     getCurrentSearchParams,
     getFilters,
+    getFiltersFormValues,
     getPolicyIDFromSearchQuery,
     getListItem,
     getSearchHeaderTitle,

src/pages/Search/AdvancedSearchFilters.tsx

@@ -1,4 +1,3 @@
-import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
@@ -175,6 +174,8 @@ function getFilterDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, fiel
         if (greaterThan) {
             return translate('search.filters.amount.greaterThan', convertToDisplayStringWithoutCurrency(Number(greaterThan)));
         }
+        // Will never happen
+        return;
     }
 
     if (
@@ -189,11 +190,8 @@ function getFilterDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, fiel
         return filters[fieldName];
     }
 
-    // Todo Once all Advanced filters are implemented this line can be cleaned up. See: https://github.com/Expensify/App/issues/45026
-    // @ts-expect-error this property access is temporarily an error, because not every SYNTAX_FILTER_KEYS is handled by form.
-    // When all filters are updated here: src/types/form/SearchAdvancedFiltersForm.ts this line comment + type cast can be removed.
-    const filterValue = filters[fieldName] as string;
-    return filterValue ? Str.recapitalize(filterValue) : undefined;
+    const filterValue = filters[fieldName];
+    return Array.isArray(filterValue) ? filterValue.join(', ') : filterValue;
 }
 
 function getFilterTaxRateDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, taxRates: Record<string, string[]>) {

src/pages/Search/SearchTypeMenu.tsx

@@ -72,6 +72,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
             <SearchTypeMenuNarrow
                 typeMenuItems={typeMenuItems}
                 activeItemIndex={activeItemIndex}
+                queryJSON={queryJSON}
                 title={title}
             />
         );

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -4,23 +4,27 @@ import Button from '@components/Button';
 import Icon from '@components/Icon';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import type {SearchQueryJSON} from '@components/Search/types';
 import Text from '@components/Text';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as SearchActions from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Expensicons from '@src/components/Icon/Expensicons';
+import * as SearchUtils from '@src/libs/SearchUtils';
 import ROUTES from '@src/ROUTES';
 import type {SearchTypeMenuItem} from './SearchTypeMenu';
 
 type SearchTypeMenuNarrowProps = {
     typeMenuItems: SearchTypeMenuItem[];
     activeItemIndex: number;
+    queryJSON: SearchQueryJSON;
     title?: string;
 };
 
-function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTypeMenuNarrowProps) {
+function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title}: SearchTypeMenuNarrowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {singleExecution} = useSingleExecution();
@@ -31,6 +35,11 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTyp
 
     const openMenu = () => setIsPopoverVisible(true);
     const closeMenu = () => setIsPopoverVisible(false);
+    const onPress = () => {
+        const values = SearchUtils.getFiltersFormValues(queryJSON);
+        SearchActions.updateAdvancedFilters(values);
+        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
 
     const popoverMenuItems = typeMenuItems.map((item, index) => {
         const isSelected = title ? false : index === activeItemIndex;
@@ -96,7 +105,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTyp
             </PressableWithFeedback>
             <Button
                 icon={Expensicons.Filters}
-                onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
+                onPress={onPress}
             />
             <PopoverMenu
                 menuItems={popoverMenuItems}

src/types/form/SearchAdvancedFiltersForm.ts

@@ -3,6 +3,7 @@ import type Form from './Form';
 
 const FILTER_KEYS = {
     TYPE: 'type',
+    STATUS: 'status',
     DATE_AFTER: 'dateAfter',
     DATE_BEFORE: 'dateBefore',
     CURRENCY: 'currency',
@@ -31,6 +32,7 @@ type SearchAdvancedFiltersForm = Form<
     InputID,
     {
         [FILTER_KEYS.TYPE]: string;
+        [FILTER_KEYS.STATUS]: string;
         [FILTER_KEYS.DATE_AFTER]: string;
         [FILTER_KEYS.DATE_BEFORE]: string;
         [FILTER_KEYS.CURRENCY]: string[];