feat: add search bar to security groups page

jakubstec · jakubstec · commit 1f4f725f85a2 · 2026-05-05T16:29:53.000+02:00
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -9203,6 +9203,7 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Bist du sicher? Dadurch werden alle Mitglieder der Standardgruppe (${defaultGroupName}) neu zugewiesen und dies kann nicht rückgängig gemacht werden.`,
             deleteGroupError: 'Diese Gruppe konnte nicht gelöscht werden. Bitte versuche es erneut.',
+            findGroup: 'Gruppe suchen',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -9197,6 +9197,7 @@ const translations = {
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Are you sure? This will reassign all members to the default group (${defaultGroupName}) and can't be undone.`,
             deleteGroupError: 'Unable to delete this group. Please try again.',
+            findGroup: 'Find group',
         },
     },
 };
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -9428,6 +9428,7 @@ ${amount} para ${merchant} - ${date}`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `¿Estás seguro? Esto reasignará a todos los miembros al grupo predeterminado (${defaultGroupName}) y no se puede deshacer.`,
             deleteGroupError: 'No se pudo eliminar este grupo. Por favor, inténtalo de nuevo.',
+            findGroup: 'Encontrar grupo',
         },
     },
     gps: {
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -9227,6 +9227,7 @@ Voici un *reçu test* pour vous montrer comment ça fonctionne :`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Êtes-vous sûr ? Cela réaffectera tous les membres au groupe par défaut (${defaultGroupName}) et ne pourra pas être annulé.`,
             deleteGroupError: 'Impossible de supprimer ce groupe. Veuillez réessayer.',
+            findGroup: 'Trouver un groupe',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -9194,6 +9194,7 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Sei sicuro? Questo riassegnerà tutti i membri al gruppo predefinito (${defaultGroupName}) e non potrà essere annullato.`,
             deleteGroupError: 'Impossibile eliminare questo gruppo. Riprova.',
+            findGroup: 'Trova gruppo',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -9079,6 +9079,7 @@ ${reportName}
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `本当によろしいですか？これにより、すべてのメンバーがデフォルトグループ（${defaultGroupName}）に再割り当てされ、元に戻すことはできません。`,
             deleteGroupError: 'このグループを削除できませんでした。もう一度お試しください。',
+            findGroup: 'グループを検索',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -9167,6 +9167,7 @@ Hier is een *proefbon* om je te laten zien hoe het werkt:`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Weet je het zeker? Dit wijst alle leden opnieuw toe aan de standaardgroep (${defaultGroupName}) en kan niet ongedaan worden gemaakt.`,
             deleteGroupError: 'Kan deze groep niet verwijderen. Probeer het opnieuw.',
+            findGroup: 'Groep zoeken',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -9147,6 +9147,7 @@ Oto *paragon testowy*, żeby pokazać Ci, jak to działa:`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Czy na pewno? Spowoduje to ponowne przypisanie wszystkich członków do domyślnej grupy (${defaultGroupName}) i nie można tego cofnąć.`,
             deleteGroupError: 'Nie udało się usunąć tej grupy. Spróbuj ponownie.',
+            findGroup: 'Znajdź grupę',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -9155,6 +9155,7 @@ Aqui está um *comprovante de teste* para mostrar como funciona:`,
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) =>
                 `Tem certeza? Isso reatribuirá todos os membros ao grupo padrão (${defaultGroupName}) e não poderá ser desfeito.`,
             deleteGroupError: 'Não foi possível excluir este grupo. Tente novamente.',
+            findGroup: 'Encontrar grupo',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -8919,6 +8919,7 @@ ${reportName}
             deleteGroupDangerConfirmationModal: '删除群组',
             deleteGroupDangerConfirmationModalDescription: (defaultGroupName: string) => `您确定吗？这将把所有成员重新分配到默认群组（${defaultGroupName}），并且无法撤销。`,
             deleteGroupError: '无法删除此群组。请重试。',
+            findGroup: '查找群组',
         },
     },
     proactiveAppReview: {title: '喜欢全新的 Expensify 吗？', description: '请告诉我们，这样我们就能帮助您让报销体验变得更好。', positiveButton: '太棒了！', negativeButton: '不太是'},
diff --git a/src/pages/domain/Groups/DomainGroupsPage.tsx b/src/pages/domain/Groups/DomainGroupsPage.tsx
@@ -5,6 +5,7 @@ import {View} from 'react-native';
 import Badge from '@components/Badge';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SearchBar from '@components/SearchBar';
 import SelectionList from '@components/SelectionList';
 import TableListItem from '@components/SelectionList/ListItem/TableListItem';
 import type {ListItem} from '@components/SelectionList/ListItem/types';
@@ -15,8 +16,10 @@ import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSearchResults from '@hooks/useSearchResults';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLatestError} from '@libs/ErrorUtils';
+import tokenizedSearch from '@libs/tokenizedSearch';
 import Navigation from '@navigation/Navigation';
 import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types';
 import type {DomainSplitNavigatorParamList} from '@navigation/types';
@@ -68,8 +71,34 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
         };
     });
 
+    const filterGroup = (item: GroupOption, searchQuery: string) => tokenizedSearch([item], searchQuery, (o) => [o.text ?? '']).length > 0;
+
+    const [inputValue, setInputValue, filteredData] = useSearchResults(data, filterGroup);
+
+    const shouldShowSearchBar = data.length > CONST.SEARCH_ITEM_LIMIT;
+    const shouldShowEmptySearchMessage = shouldShowSearchBar && inputValue.length > 0 && filteredData.length === 0;
+
+    const listHeaderContent = shouldShowSearchBar ? (
+        <View style={styles.flexColumn}>
+            <View style={[styles.mh5, styles.gap3, styles.mb5, styles.flexRow, styles.alignItemsCenter]}>
+                <SearchBar
+                    inputValue={inputValue}
+                    onChangeText={setInputValue}
+                    label={translate('domain.groups.findGroup')}
+                    shouldShowEmptyState={false}
+                    style={[styles.flex1, styles.mh0, styles.mb0]}
+                />
+            </View>
+            {shouldShowEmptySearchMessage && (
+                <View style={[styles.ph5, styles.pb5]}>
+                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('common.noResultsFoundMatching', inputValue)}</Text>
+                </View>
+            )}
+        </View>
+    ) : null;
+
     const getCustomListHeader = () => {
-        if (!data || data?.length === 0) {
+        if (filteredData.length === 0) {
             return null;
         }
 
@@ -100,12 +129,16 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
                     shouldUseHeadlineHeader
                 />
                 <SelectionList
-                    data={data}
+                    data={filteredData}
                     ListItem={TableListItem}
                     onSelectRow={(item: GroupOption) => Navigation.navigate(ROUTES.DOMAIN_GROUP_DETAILS.getRoute(domainAccountID, item.groupID))}
                     onDismissError={(item: GroupOption) => clearGroupDeleteError(domainAccountID, item.groupID)}
                     customListHeader={getCustomListHeader()}
+                    shouldHeaderBeInsideList
+                    customListHeaderContent={listHeaderContent}
+                    shouldShowListEmptyContent={false}
                     shouldShowRightCaret
+                    disableMaintainingScrollPosition
                     addBottomSafeAreaPadding
                 />
             </ScreenWrapper>
