Merge pull request #91850 from Expensify/jsenyitko-filter-through-ecard-rules

Add the ability to filter spend rules

Author: luacmartins

src/components/SpendRules/SpendRulesSection.tsx

@@ -1,10 +1,12 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import type {TupleToUnion} from 'type-fest';
 import ActivityIndicator from '@components/ActivityIndicator';
 import Badge from '@components/Badge';
 import Icon from '@components/Icon';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import SearchBar from '@components/SearchBar';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useConfirmModal from '@hooks/useConfirmModal';
@@ -16,11 +18,13 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSearchResults from '@hooks/useSearchResults';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {openPolicyExpensifyCardsPage} from '@libs/actions/Policy/Policy';
 import Navigation from '@libs/Navigation/Navigation';
+import tokenizedSearch from '@libs/tokenizedSearch';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -45,6 +49,13 @@ function SpendRulesSection({policyID}: SpendRulesSectionProps) {
     const [expensifyCardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${defaultFundID}`);
     const {cardRules, isLoadingCardRules} = useExpensifyCardRules(policyID);
 
+    const filterCardRules = (cardRule: TupleToUnion<typeof cardRules>, searchInput: string) => {
+        const results = tokenizedSearch([cardRule], searchInput, (option) => option.searchTokens);
+        return results.length > 0;
+    };
+
+    const [inputValue, setInputValue, filteredCardRules] = useSearchResults(cardRules, filterCardRules);
+
     useEffect(() => {
         if (!defaultFundID || defaultFundID === CONST.DEFAULT_NUMBER_ID) {
             return;
@@ -132,8 +143,17 @@ function SpendRulesSection({policyID}: SpendRulesSectionProps) {
             isCentralPane
             subtitleMuted
         >
+            {cardRules.length >= CONST.STANDARD_LIST_ITEM_LIMIT && (
+                <SearchBar
+                    label={translate('workspace.card.searchRules')}
+                    inputValue={inputValue}
+                    onChangeText={setInputValue}
+                    shouldShowEmptyState={!isLoadingCardRules && filteredCardRules.length === 0}
+                    style={[styles.mb0, styles.mt5, styles.mh0]}
+                />
+            )}
             <MenuItem
-                wrapperStyle={[styles.borderedContentCard, styles.mt6, styles.ph4, styles.pv4]}
+                wrapperStyle={[styles.borderedContentCard, styles.mt5, styles.ph4, styles.pv4]}
                 titleComponent={menuItemBody}
                 accessibilityLabel={`${descriptionLabel}. ${blockLabel} ${defaultRuleTitle}`}
                 sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_ITEM}
@@ -152,7 +172,7 @@ function SpendRulesSection({policyID}: SpendRulesSectionProps) {
                     />
                 </View>
             ) : (
-                cardRules.map((rule) => (
+                filteredCardRules.map((rule) => (
                     <OfflineWithFeedback
                         key={rule.ruleID}
                         pendingAction={rule.pendingAction}