Update grammar filters

src/CONST.ts

@@ -6102,6 +6102,33 @@ const CONST = {
             AUTOCOMPLETE_SUGGESTION: 'autocompleteSuggestion',
             SEARCH: 'searchItem',
         },
+        SEARCH_USER_FRIENDLY_KEYS: {
+            TYPE: 'type',
+            STATUS: 'status',
+            SORT_BY: 'sort-by',
+            SORT_ORDER: 'sort-order',
+            POLICY_ID: 'workspace',
+            DATE: 'date',
+            AMOUNT: 'amount',
+            EXPENSE_TYPE: 'expense-type',
+            CURRENCY: 'currency',
+            MERCHANT: 'merchant',
+            DESCRIPTION: 'description',
+            FROM: 'from',
+            TO: 'to',
+            CATEGORY: 'category',
+            TAG: 'tag',
+            TAX_RATE: 'tax-rate',
+            CARD_ID: 'card',
+            REPORT_ID: 'reportid',
+            KEYWORD: 'keyword',
+            IN: 'in',
+            SUBMITTED: 'submitted',
+            APPROVED: 'approved',
+            PAID: 'paid',
+            EXPORTED: 'exported',
+            POSTED: 'posted',
+        },
         DATE_MODIFIERS: {
             BEFORE: 'Before',
             AFTER: 'After',

src/components/Search/SearchPageHeaderInput.tsx

@@ -160,8 +160,8 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
                     const trimmedUserSearchQuery = SearchAutocompleteUtils.getQueryWithoutAutocompletedPart(textInputValue);
                     onSearchQueryChange(`${trimmedUserSearchQuery}${SearchQueryUtils.sanitizeSearchValue(item.searchQuery)} `);
 
-                    if (item.text && item.autocompleteID) {
-                        const substitutions = {...autocompleteSubstitutions, [item.text]: item.autocompleteID};
+                    if (item.mapKey && item.autocompleteID) {
+                        const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
 
                         setAutocompleteSubstitutions(substitutions);
                     }
@@ -179,11 +179,11 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
 
     const updateAutocompleteSubstitutions = useCallback(
         (item: SearchQueryItem) => {
-            if (!item.autocompleteID || !item.text) {
+            if (!item.autocompleteID || !item.mapKey) {
                 return;
             }
 
-            const substitutions = {...autocompleteSubstitutions, [item.text]: item.autocompleteID};
+            const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
             setAutocompleteSubstitutions(substitutions);
         },
         [autocompleteSubstitutions],

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -48,20 +48,20 @@ function getContextualSearchAutocompleteKey(item: SearchQueryItem) {
 }
 
 function getContextualSearchQuery(item: SearchQueryItem) {
-    const baseQuery = `${CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE}:${item.roomType}`;
+    const baseQuery = `${CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TYPE}:${item.roomType}`;
     let additionalQuery = '';
 
     switch (item.roomType) {
         case CONST.SEARCH.DATA_TYPES.EXPENSE:
         case CONST.SEARCH.DATA_TYPES.INVOICE:
-            additionalQuery += ` ${CONST.SEARCH.SYNTAX_ROOT_KEYS.POLICY_ID}:${item.policyID}`;
+            additionalQuery += ` ${CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.POLICY_ID}:${item.policyID}`;
             if (item.roomType === CONST.SEARCH.DATA_TYPES.INVOICE && item.autocompleteID) {
-                additionalQuery += ` ${CONST.SEARCH.SYNTAX_FILTER_KEYS.TO}:${SearchQueryUtils.sanitizeSearchValue(item.searchQuery ?? '')}`;
+                additionalQuery += ` ${CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TO}:${SearchQueryUtils.sanitizeSearchValue(item.searchQuery ?? '')}`;
             }
             break;
         case CONST.SEARCH.DATA_TYPES.CHAT:
         default:
-            additionalQuery = ` ${CONST.SEARCH.SYNTAX_FILTER_KEYS.IN}:${SearchQueryUtils.sanitizeSearchValue(item.searchQuery ?? '')}`;
+            additionalQuery = ` ${CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.IN}:${SearchQueryUtils.sanitizeSearchValue(item.searchQuery ?? '')}`;
             break;
     }
     return baseQuery + additionalQuery;
@@ -223,8 +223,8 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
                     const trimmedUserSearchQuery = SearchAutocompleteUtils.getQueryWithoutAutocompletedPart(textInputValue);
                     onSearchQueryChange(`${trimmedUserSearchQuery}${SearchQueryUtils.sanitizeSearchValue(item.searchQuery)} `);
 
-                    if (item.text && item.autocompleteID) {
-                        const substitutions = {...autocompleteSubstitutions, [item.text]: item.autocompleteID};
+                    if (item.mapKey && item.autocompleteID) {
+                        const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
 
                         setAutocompleteSubstitutions(substitutions);
                     }
@@ -248,11 +248,11 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
 
     const updateAutocompleteSubstitutions = useCallback(
         (item: SearchQueryItem) => {
-            if (!item.autocompleteID || !item.text) {
+            if (!item.autocompleteID || !item.mapKey) {
                 return;
             }
 
-            const substitutions = {...autocompleteSubstitutions, [item.text]: item.autocompleteID};
+            const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
             setAutocompleteSubstitutions(substitutions);
         },
         [autocompleteSubstitutions],

src/components/Search/SearchRouter/SearchRouterList.tsx

@@ -5,7 +5,7 @@ import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
-import type {SearchFilterKey} from '@components/Search/types';
+import type {SearchFilterKey, UserFriendlyKey} from '@components/Search/types';
 import SelectionList from '@components/SelectionList';
 import SearchQueryListItem, {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem, SearchQueryListItemProps} from '@components/SelectionList/Search/SearchQueryListItem';
@@ -40,9 +40,10 @@ import type PersonalDetails from '@src/types/onyx/PersonalDetails';
 import {getSubstitutionMapKey} from './getQueryWithSubstitutions';
 
 type AutocompleteItemData = {
-    filterKey: SearchFilterKey;
+    filterKey: UserFriendlyKey;
     text: string;
     autocompleteID?: string;
+    mapKey?: SearchFilterKey;
 };
 
 type SearchRouterListProps = {
@@ -82,6 +83,10 @@ function isSearchQueryListItem(listItem: UserListItemProps<OptionData> | SearchQ
     return isSearchQueryItem(listItem.item);
 }
 
+function getAutocompleteDisplayText(filterKey: UserFriendlyKey, value: string) {
+    return `${filterKey}:${value}`;
+}
+
 function getItemHeight(item: OptionData | SearchQueryItem) {
     if (isSearchQueryItem(item)) {
         return 44;
@@ -223,7 +228,7 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredTags.map((tagName) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TAG,
                     text: tagName,
                 }));
             }
@@ -235,7 +240,7 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredCategories.map((categoryName) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.CATEGORY,
                     text: categoryName,
                 }));
             }
@@ -247,7 +252,7 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredCurrencies.map((currencyName) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.CURRENCY,
                     text: currencyName,
                 }));
             }
@@ -258,9 +263,10 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredTaxRates.map((tax) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TAX_RATE,
                     text: tax.taxRateName,
                     autocompleteID: tax.taxRateIds.join(','),
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM: {
@@ -269,9 +275,10 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredParticipants.map((participant) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.FROM,
                     text: participant.name,
                     autocompleteID: participant.accountID,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.TO: {
@@ -280,9 +287,10 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredParticipants.map((participant) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TO,
                     text: participant.name,
                     autocompleteID: participant.accountID,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.IN: {
@@ -291,33 +299,34 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredChats.map((chat) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.IN,
                     text: chat.text ?? '',
                     autocompleteID: chat.reportID,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
                 }));
             }
             case CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE: {
                 const filteredTypes = typeAutocompleteList
                     .filter((type) => type.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(type.toLowerCase()))
                     .sort();
 
-                return filteredTypes.map((type) => ({filterKey: CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE, text: type}));
+                return filteredTypes.map((type) => ({filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TYPE, text: type}));
             }
             case CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS: {
                 const filteredStatuses = statusAutocompleteList
                     .filter((status) => status.includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(status))
                     .sort()
                     .slice(0, 10);
 
-                return filteredStatuses.map((status) => ({filterKey: CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS, text: status}));
+                return filteredStatuses.map((status) => ({filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.STATUS, text: status}));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE: {
                 const filteredExpenseTypes = expenseTypes
                     .filter((expenseType) => expenseType.includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(expenseType))
                     .sort();
 
                 return filteredExpenseTypes.map((expenseType) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.EXPENSE_TYPE,
                     text: expenseType,
                 }));
             }
@@ -331,9 +340,10 @@ function SearchRouterList(
                     .slice(0, 10);
 
                 return filteredCards.map((card) => ({
-                    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.CARD_ID,
                     text: CardUtils.getCardDescription(card.cardID),
                     autocompleteID: card.cardID.toString(),
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
                 }));
             }
             default: {
@@ -411,9 +421,10 @@ function SearchRouterList(
     sections.push({title: translate('search.recentChats'), data: styledRecentReports});
 
     if (autocompleteSuggestions.length > 0) {
-        const autocompleteData = autocompleteSuggestions.map(({filterKey, text, autocompleteID}) => {
+        const autocompleteData = autocompleteSuggestions.map(({filterKey, text, autocompleteID, mapKey}) => {
             return {
-                text: getSubstitutionMapKey(filterKey, text),
+                text: getAutocompleteDisplayText(filterKey, text),
+                mapKey: mapKey ? getSubstitutionMapKey(mapKey, text) : undefined,
                 singleIcon: Expensicons.MagnifyingGlass,
                 searchQuery: text,
                 autocompleteID,

src/components/Search/types.ts

@@ -97,6 +97,8 @@ type SearchFilterKey =
     | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS
     | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.POLICY_ID;
 
+type UserFriendlyKey = ValueOf<typeof CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS>;
+
 type QueryFilters = Array<{
     key: SearchFilterKey;
     filters: QueryFilter[];
@@ -148,6 +150,7 @@ export type {
     QueryFilter,
     QueryFilters,
     SearchFilterKey,
+    UserFriendlyKey,
     ExpenseSearchStatus,
     InvoiceSearchStatus,
     TripSearchStatus,

src/components/SelectionList/Search/SearchQueryListItem.tsx

@@ -17,6 +17,7 @@ type SearchQueryItem = ListItem & {
     searchQuery?: string;
     autocompleteID?: string;
     roomType?: ValueOf<typeof CONST.SEARCH.DATA_TYPES>;
+    mapKey?: string;
 };
 
 type SearchQueryListItemProps = {