Provide autocomplete suggestions in SearchRouterList

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -3,19 +3,24 @@ import debounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import type {SearchQueryJSON} from '@components/Search/types';
 import type {SelectionListHandle} from '@components/SelectionList/types';
+import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
+import {getAutocompleteCategoriesList, getAutoCompleteTagsList, getAutocompleteTaxList, parseForAutocomplete} from '@libs/SearchAutocompleteUtils';
 import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
@@ -26,9 +31,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SearchRouterInput from './SearchRouterInput';
 import SearchRouterList from './SearchRouterList';
+import type {ItemWithQuery} from './SearchRouterList';
 
 const SEARCH_DEBOUNCE_DELAY = 150;
-
 type SearchRouterProps = {
     onRouterClose: () => void;
 };
@@ -39,18 +44,40 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
+    const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<ItemWithQuery[] | undefined>([]);
 
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListHandle>(null);
 
     const taxRates = getAllTaxRates();
-    const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
 
     const [textInputValue, debouncedInputValue, setTextInputValue] = useDebouncedState('', 500);
     const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(undefined);
     const contextualReportID = useNavigationState<Record<string, {reportID: string}>, string | undefined>((state) => {
         return state?.routes.at(-1)?.params?.reportID;
     });
+
+    const activeWorkspaceID = useActiveWorkspaceFromNavigationState();
+    const policy = usePolicy(activeWorkspaceID);
+    const typesAutocompleteList = Object.values(CONST.SEARCH.DATA_TYPES);
+    const statusesAutocompleteList = Object.values({...CONST.SEARCH.STATUS.TRIP, ...CONST.SEARCH.STATUS.INVOICE, ...CONST.SEARCH.STATUS.CHAT, ...CONST.SEARCH.STATUS.TRIP});
+    const expenseTypes = Object.values(CONST.SEARCH.TRANSACTION_TYPE);
+    const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
+    const categoryAutocompleteList = useMemo(() => getAutocompleteCategoriesList(allPolicyCategories, activeWorkspaceID), [allPolicyCategories, activeWorkspaceID]);
+    const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
+    const currencyAutocompleteList = Object.keys(currencyList ?? {});
+    const [allPoliciesTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
+    const tagAutocompleteList = useMemo(() => getAutoCompleteTagsList(allPoliciesTagsLists, activeWorkspaceID), [allPoliciesTagsLists, activeWorkspaceID]);
+    const allTaxRates = getAllTaxRates();
+    const taxAutocompleteList = useMemo(() => getAutocompleteTaxList(allTaxRates, policy), [policy, allTaxRates]);
+    const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
+    const cardsAutocompleteList = Object.values(cardList ?? {}).map((card) => card.bank);
+    const personalDetails = usePersonalDetails();
+    const participantsAutocompleteList = Object.values(personalDetails)
+        .filter((details) => details && details?.login)
+        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+        .map((details) => details?.login as string);
+
     const sortedRecentSearches = useMemo(() => {
         return Object.values(recentSearches ?? {}).sort((a, b) => b.timestamp.localeCompare(a.timestamp));
     }, [recentSearches]);
@@ -106,6 +133,101 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
         setUserSearchQuery(undefined);
     };
 
+    const updateAutocomplete = useCallback(
+        (autocompleteValue: string, autocompleteType?: ValueOf<typeof CONST.SEARCH.SYNTAX_ROOT_KEYS & typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>) => {
+            switch (autocompleteType) {
+                case 'tag': {
+                    const filteredTags = tagAutocompleteList.filter((tag) => tag?.includes(autocompleteValue));
+                    setAutocompleteSuggestions(
+                        filteredTags.map((tagName) => ({
+                            text: `tag:${tagName}`,
+                            query: `${tagName}`,
+                        })),
+                    );
+                    return;
+                }
+                case 'category': {
+                    const filteredCategories = categoryAutocompleteList.filter((category) => category?.includes(autocompleteValue));
+                    setAutocompleteSuggestions(
+                        filteredCategories.map((categoryName) => ({
+                            text: `category:${categoryName}`,
+                            query: `${categoryName}`,
+                        })),
+                    );
+                    return;
+                }
+                case 'currency': {
+                    const filteredCurrencies = currencyAutocompleteList.filter((currency) => currency?.includes(autocompleteValue));
+                    setAutocompleteSuggestions(
+                        filteredCurrencies.map((currencyName) => ({
+                            text: `currency:${currencyName}`,
+                            query: `${currencyName}`,
+                        })),
+                    );
+                    return;
+                }
+                case 'taxRate': {
+                    const filteredTaxRates = taxAutocompleteList.filter((tax) => tax.includes(autocompleteValue));
+                    setAutocompleteSuggestions(filteredTaxRates.map((tax) => ({text: `type:${tax}`, query: `${tax}`})));
+                    return;
+                }
+                case 'from': {
+                    const filteredParticipants = participantsAutocompleteList.filter((participant) => participant.includes(autocompleteValue));
+                    setAutocompleteSuggestions(filteredParticipants.map((participant) => ({text: `from:${participant}`, query: `${participant}`})));
+                    return;
+                }
+                case 'to': {
+                    const filteredParticipants = participantsAutocompleteList.filter((participant) => participant.includes(autocompleteValue));
+                    setAutocompleteSuggestions(filteredParticipants.map((participant) => ({text: `to:${participant}`, query: `${participant}`})));
+                    return;
+                }
+                case 'type': {
+                    const filteredTypes = typesAutocompleteList.filter((type) => type.includes(autocompleteValue));
+                    setAutocompleteSuggestions(filteredTypes.map((type) => ({text: `type:${type}`, query: `${type}`})));
+                    return;
+                }
+                case 'status': {
+                    const filteredStatuses = statusesAutocompleteList.filter((status) => status.includes(autocompleteValue));
+                    setAutocompleteSuggestions(filteredStatuses.map((status) => ({text: `status:${status}`, query: `${status}`})));
+                    return;
+                }
+                case 'expenseType': {
+                    const filteredExpenseTypes = expenseTypes.filter((expenseType) => expenseType.includes(autocompleteValue));
+                    setAutocompleteSuggestions(
+                        filteredExpenseTypes.map((expenseType) => ({
+                            text: `expenseType:${expenseType}`,
+                            query: `${expenseType}`,
+                        })),
+                    );
+                    return;
+                }
+                case 'cardID': {
+                    const filteredCards = cardsAutocompleteList.filter((card) => card.includes(autocompleteValue));
+                    setAutocompleteSuggestions(
+                        filteredCards.map((card) => ({
+                            text: `expenseType:${card}`,
+                            query: `${card}`,
+                        })),
+                    );
+                    return;
+                }
+                default:
+                    setAutocompleteSuggestions(undefined);
+            }
+        },
+        [
+            tagAutocompleteList,
+            categoryAutocompleteList,
+            currencyAutocompleteList,
+            taxAutocompleteList,
+            participantsAutocompleteList,
+            typesAutocompleteList,
+            statusesAutocompleteList,
+            expenseTypes,
+            cardsAutocompleteList,
+        ],
+    );
+
     const onSearchChange = useMemo(
         // eslint-disable-next-line react-compiler/react-compiler
         () =>
@@ -115,6 +237,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                     listRef.current?.updateAndScrollToFocusedIndex(-1);
                     return;
                 }
+                const autocompleteParsedQuery = parseForAutocomplete(userQuery);
+                updateAutocomplete(autocompleteParsedQuery?.autocomplete?.value ?? '', autocompleteParsedQuery?.autocomplete?.key);
+
                 listRef.current?.updateAndScrollToFocusedIndex(0);
                 const queryJSON = SearchQueryUtils.buildSearchQueryJSON(userQuery);
 
@@ -126,7 +251,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
             }, SEARCH_DEBOUNCE_DELAY),
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
+        [updateAutocomplete],
     );
 
     const updateUserSearchQuery = (newSearchQuery: string) => {
@@ -194,6 +319,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 reportForContextualSearch={contextualReportData}
                 recentSearches={sortedRecentSearches?.slice(0, 5)}
                 recentReports={recentReports}
+                autocompleteItems={autocompleteSuggestions}
                 onSearchSubmit={onSearchSubmit}
                 updateUserSearchQuery={updateUserSearchQuery}
                 closeAndClearRouter={closeAndClearRouter}

src/components/Search/SearchRouter/SearchRouterList.tsx

@@ -25,6 +25,7 @@ import ROUTES from '@src/ROUTES';
 
 type ItemWithQuery = {
     query: string;
+    text?: string;
 };
 
 type SearchRouterListProps = {
@@ -37,6 +38,9 @@ type SearchRouterListProps = {
     /** Recent reports */
     recentReports: OptionData[];
 
+    /** Autocomplete items */
+    autocompleteItems: ItemWithQuery[] | undefined;
+
     /** Callback to submit query when selecting a list item */
     onSearchSubmit: (query: SearchQueryJSON | undefined) => void;
 
@@ -91,7 +95,7 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryList
 }
 
 function SearchRouterList(
-    {currentQuery, reportForContextualSearch, recentSearches, recentReports, onSearchSubmit, updateUserSearchQuery, closeAndClearRouter}: SearchRouterListProps,
+    {currentQuery, reportForContextualSearch, recentSearches, autocompleteItems, recentReports, onSearchSubmit, updateUserSearchQuery, closeAndClearRouter}: SearchRouterListProps,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const styles = useThemeStyles();
@@ -133,6 +137,19 @@ function SearchRouterList(
         });
     }
 
+    const autocompleteData = autocompleteItems?.map(({text, query}) => {
+        return {
+            text,
+            singleIcon: Expensicons.MagnifyingGlass,
+            query,
+            keyForList: query,
+        };
+    });
+
+    if (autocompleteData && autocompleteData.length > 0) {
+        sections.push({title: 'Autocomplete', data: autocompleteData});
+    }
+
     const recentSearchesData = recentSearches?.map(({query, timestamp}) => {
         const searchQueryJSON = SearchQueryUtils.buildSearchQueryJSON(query);
         return {

src/components/Search/types.ts

@@ -79,6 +79,15 @@ type SearchQueryJSON = {
     flatFilters: QueryFilters;
 } & SearchQueryAST;
 
+type SearchAutocompleteResult = {
+    autocomplete: {
+        key: ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>;
+        length: number;
+        start: number;
+        value: string;
+    };
+};
+
 export type {
     SelectedTransactionInfo,
     SelectedTransactions,
@@ -97,4 +106,5 @@ export type {
     InvoiceSearchStatus,
     TripSearchStatus,
     ChatSearchStatus,
+    SearchAutocompleteResult,
 };

src/libs/SearchAutocompleteUtils.ts

@@ -0,0 +1,51 @@
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {SearchAutocompleteResult} from '@components/Search/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy, PolicyCategories, PolicyTagLists} from '@src/types/onyx';
+import {getTagNamesFromTagsLists} from './PolicyUtils';
+import * as autocompleteParser from './SearchParser/autocompleteParser';
+
+function parseForAutocomplete(text: string) {
+    try {
+        const parsedAutocomplete = autocompleteParser.parse(text) as SearchAutocompleteResult;
+        return parsedAutocomplete;
+    } catch (e) {
+        console.error(`Error when parsing autocopmlete}"`, e);
+    }
+}
+
+function getAutoCompleteTagsList(allPoliciesTagsLists: OnyxCollection<PolicyTagLists>, policyID?: string) {
+    const singlePolicyTagsList: PolicyTagLists | undefined = allPoliciesTagsLists?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`];
+    if (!singlePolicyTagsList) {
+        const uniqueTagNames = new Set<string>();
+        const tagListsUnpacked = Object.values(allPoliciesTagsLists ?? {}).filter((item) => !!item) as PolicyTagLists[];
+        tagListsUnpacked
+            .map((policyTagLists) => {
+                return getTagNamesFromTagsLists(policyTagLists);
+            })
+            .flat()
+            .forEach((tag) => uniqueTagNames.add(tag));
+        return Array.from(uniqueTagNames);
+    }
+    return getTagNamesFromTagsLists(singlePolicyTagsList);
+}
+
+function getAutocompleteCategoriesList(allPolicyCategories: OnyxCollection<PolicyCategories>, policyID?: string) {
+    const singlePolicyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`];
+    if (!singlePolicyCategories) {
+        const uniqueCategoryNames = new Set<string>();
+        Object.values(allPolicyCategories ?? {}).map((policyCategories) => Object.values(policyCategories ?? {}).forEach((category) => uniqueCategoryNames.add(category.name)));
+        return Array.from(uniqueCategoryNames);
+    }
+    return Object.values(singlePolicyCategories ?? {}).map((category) => category.name);
+}
+
+function getAutocompleteTaxList(allTaxRates: Record<string, string[]>, policy?: OnyxEntry<Policy>) {
+    if (policy) {
+        return Object.keys(policy?.taxRates?.taxes ?? {}).map((taxRateName) => taxRateName);
+    }
+    return Object.keys(allTaxRates).map((taxRateName) => taxRateName);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {parseForAutocomplete, getAutoCompleteTagsList, getAutocompleteCategoriesList, getAutocompleteTaxList};