review suggestions

Expensify · Dec 11, 2024 · b4708c7 · b4708c7
1 parent 31f4d33
commit b4708c7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 43 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -43,7 +43,7 @@ type AutocompleteItemData = {
     filterKey: UserFriendlyKey;
     text: string;
     autocompleteID?: string;
-    substitutionMapKey?: SearchFilterKey;
+    mapKey?: SearchFilterKey;
 };
 
 type SearchRouterListProps = {
@@ -262,7 +262,7 @@ function SearchRouterList(
                     filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TAX_RATE,
                     text: tax.taxRateName,
                     autocompleteID: tax.taxRateIds.join(','),
-                    substitutionMapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM: {
@@ -274,7 +274,7 @@ function SearchRouterList(
                     filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.FROM,
                     text: participant.name,
                     autocompleteID: participant.accountID,
-                    substitutionMapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.TO: {
@@ -286,7 +286,7 @@ function SearchRouterList(
                     filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.TO,
                     text: participant.name,
                     autocompleteID: participant.accountID,
-                    substitutionMapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
                 }));
             }
             case CONST.SEARCH.SYNTAX_FILTER_KEYS.IN: {
@@ -298,7 +298,7 @@ function SearchRouterList(
                     filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.IN,
                     text: chat.text ?? '',
                     autocompleteID: chat.reportID,
-                    substitutionMapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
                 }));
             }
             case CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE: {
@@ -339,7 +339,7 @@ function SearchRouterList(
                     filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.CARD_ID,
                     text: CardUtils.getCardDescription(card.cardID),
                     autocompleteID: card.cardID.toString(),
-                    substitutionMapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
                 }));
             }
             default: {
@@ -417,10 +417,10 @@ function SearchRouterList(
     sections.push({title: translate('search.recentChats'), data: styledRecentReports});
 
     if (autocompleteSuggestions.length > 0) {
-        const autocompleteData = autocompleteSuggestions.map(({filterKey, text, autocompleteID, substitutionMapKey}) => {
+        const autocompleteData = autocompleteSuggestions.map(({filterKey, text, autocompleteID, mapKey}) => {
             return {
                 text: getSubstitutionMapKey(filterKey, text),
-                mapKey: substitutionMapKey ? getSubstitutionMapKey(substitutionMapKey, text) : undefined,
+                mapKey: mapKey ? getSubstitutionMapKey(mapKey, text) : undefined,
                 singleIcon: Expensicons.MagnifyingGlass,
                 searchQuery: text,
                 autocompleteID,

diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
@@ -34,6 +34,37 @@ const operatorToCharMap = {
     [CONST.SEARCH.SYNTAX_OPERATORS.OR]: ' ' as const,
 };
 
+/**
+ * A mapping object that maps filter names from the internal codebase format to user-friendly names.
+ */
+const UserFriendlyKeyMap: Record<SearchFilterKey | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER, UserFriendlyKey> = {
+    type: 'type',
+    status: 'status',
+    sortBy: 'sort-by',
+    sortOrder: 'sort-order',
+    policyID: 'workspace',
+    date: 'date',
+    amount: 'amount',
+    expenseType: 'expense-type',
+    currency: 'currency',
+    merchant: 'merchant',
+    description: 'description',
+    from: 'from',
+    to: 'to',
+    category: 'category',
+    tag: 'tag',
+    taxRate: 'tax-rate',
+    cardID: 'card',
+    reportID: 'reportid',
+    keyword: 'keyword',
+    in: 'in',
+    submitted: 'submitted',
+    approved: 'approved',
+    paid: 'paid',
+    exported: 'exported',
+    posted: 'posted',
+};
+
 /**
  * @private
  * Returns string value wrapped in quotes "", if the value contains special characters.
@@ -662,43 +693,15 @@ function getQueryWithUpdatedValues(query: string, policyID?: string) {
 }
 
 /**
- * A mapping object that maps filter names from the internal codebase format to user-friendly names.
- */
-const UserFriendlyKeyMap: Record<SearchFilterKey | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER, UserFriendlyKey> = {
-    type: 'type',
-    status: 'status',
-    sortBy: 'sort-by',
-    sortOrder: 'sort-order',
-    policyID: 'workspace',
-    date: 'date',
-    amount: 'amount',
-    expenseType: 'expense-type',
-    currency: 'currency',
-    merchant: 'merchant',
-    description: 'description',
-    from: 'from',
-    to: 'to',
-    category: 'category',
-    tag: 'tag',
-    taxRate: 'tax-rate',
-    cardID: 'card',
-    reportID: 'reportid',
-    keyword: 'keyword',
-    in: 'in',
-    submitted: 'submitted',
-    approved: 'approved',
-    paid: 'paid',
-    exported: 'exported',
-    posted: 'posted',
-};
-
-/**
- * Converts a filter key from camelCase to user friendly kebab-case.
+ * Converts a filter key from old naming (camelCase) to user friendly naming (kebab-case).
+ *
+ * There are two types of keys used in the context of Search.
+ * The `camelCase` naming (ex: `sortBy`, `taxRate`) is more friendly to developers, but not nice to show to people. This was the default key naming in the past.
+ * The "user friendly" naming (ex: `sort-by`, `tax-rate`) was introduced at a later point, to offer better experience for the users.
+ * Currently search parsers support both versions as an input, but output the `camelCase` form. Whenever we display some query to the user however, we always do it in the newer pretty format.
  *
- * This function is designed to translate filter names used in the codebase (in camelCase)
- * to a user-friendly format (kebab-case).
  * @example
- * getUserFriendlyKey("taxRate") //returns "tax-rate"
+ * getUserFriendlyKey("taxRate") // returns "tax-rate"
  */
 function getUserFriendlyKey(keyName: SearchFilterKey | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER): UserFriendlyKey {
     return UserFriendlyKeyMap[keyName];