Merge pull request #89607 from software-mansion-labs/jakubstec/domains/security-groups-add-search

mountiny · web-flow · commit 927ad1cde666 · 2026-05-07T11:42:58.000+02:00
[Domain Control] Add search bar to security groups page
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -9236,6 +9236,7 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
             restrictDefaultLoginSelection: 'Standard-Login-Auswahl einschränken',
             restrictDefaultLoginSelectionDescription:
                 'Verhindert, dass Mitglieder ihre Login-E-Mail-Adresse außerhalb der Unternehmensdomäne ändern, um Richtlinienbeschränkungen zu umgehen.',
+            findGroup: 'Gruppe suchen',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -9241,6 +9241,7 @@ const translations = {
             noWorkspacesMessage: 'There are no workspaces on this domain. A workspace is required to enable this restriction.',
             restrictDefaultLoginSelection: 'Restrict default login selection',
             restrictDefaultLoginSelectionDescription: 'Prevent members from changing their login email away from their company domain to avoid policy restrictions.',
+            findGroup: 'Find group',
         },
     },
 };
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -9476,6 +9476,7 @@ ${amount} para ${merchant} - ${date}`,
             noWorkspacesMessage: 'No hay espacios de trabajo en este dominio. Se requiere un espacio de trabajo para habilitar esta restricción.',
             restrictDefaultLoginSelection: 'Restringir el inicio de sesión predeterminado',
             restrictDefaultLoginSelectionDescription: 'Evita que los miembros cambien su correo de inicio de sesión fuera del dominio de la empresa para eludir restricciones de políticas.',
+            findGroup: 'Encontrar grupo',
         },
     },
     gps: {
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -9261,6 +9261,7 @@ Voici un *reçu test* pour vous montrer comment ça fonctionne :`,
             restrictDefaultLoginSelection: 'Restreindre la sélection de connexion par défaut',
             restrictDefaultLoginSelectionDescription:
                 'Empêche les membres de modifier leur e-mail de connexion en dehors du domaine de leur entreprise afin d’éviter les restrictions de politique.',
+            findGroup: 'Trouver un groupe',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -9228,6 +9228,7 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
             noWorkspacesMessage: 'Non ci sono spazi di lavoro su questo dominio. È necessario uno spazio di lavoro per abilitare questa restrizione.',
             restrictDefaultLoginSelection: 'Limita la selezione di accesso predefinita',
             restrictDefaultLoginSelectionDescription: 'Impedisce ai membri di modificare l’email di accesso al di fuori del dominio aziendale per eludere le restrizioni delle policy.',
+            findGroup: 'Trova gruppo',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -9112,6 +9112,7 @@ ${reportName}
             noWorkspacesMessage: 'このドメインにワークスペースがありません。この制限を有効にするにはワークスペースが必要です。',
             restrictDefaultLoginSelection: 'デフォルトのログイン選択を制限する',
             restrictDefaultLoginSelectionDescription: 'メンバーがポリシー制限を回避するために、ログイン用のメールアドレスを会社のドメイン以外に変更することを防ぎます。',
+            findGroup: 'グループを検索',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -9199,6 +9199,7 @@ Hier is een *proefbon* om je te laten zien hoe het werkt:`,
             noWorkspacesMessage: 'Er zijn geen werkruimtes op dit domein. Een werkruimte is vereist om deze beperking in te schakelen.',
             restrictDefaultLoginSelection: 'Standaard login-selectie beperken',
             restrictDefaultLoginSelectionDescription: 'Voorkomt dat leden hun login-e-mail wijzigen naar een adres buiten het bedrijfsdomein om beleidsbeperkingen te omzeilen.',
+            findGroup: 'Groep zoeken',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -9180,6 +9180,7 @@ Oto *paragon testowy*, żeby pokazać Ci, jak to działa:`,
             noWorkspacesMessage: 'W tej domenie nie ma żadnych obszarów roboczych. Obszar roboczy jest wymagany, aby włączyć to ograniczenie.',
             restrictDefaultLoginSelection: 'Ogranicz wybór domyślnego logowania',
             restrictDefaultLoginSelectionDescription: 'Zapobiega zmianie adresu e-mail do logowania przez członków na adres spoza domeny firmowej, aby obejść ograniczenia zasad.',
+            findGroup: 'Znajdź grupę',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -9190,6 +9190,7 @@ Aqui está um *comprovante de teste* para mostrar como funciona:`,
             restrictDefaultLoginSelection: 'Restringir seleção de login padrão',
             restrictDefaultLoginSelectionDescription:
                 'Impede que os membros alterem o e-mail de login para um endereço fora do domínio da empresa, evitando que burlem restrições de políticas.',
+            findGroup: 'Encontrar grupo',
         },
     },
     proactiveAppReview: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -8958,6 +8958,7 @@ ${reportName}
             noWorkspacesMessage: '此域上没有工作区。启用此限制需要一个工作区。',
             restrictDefaultLoginSelection: '限制默认登录选择',
             restrictDefaultLoginSelectionDescription: '防止成员将登录邮箱更改为公司域名以外的地址，以规避政策限制。',
+            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,36 @@ 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, shouldUseNarrowLayout ? styles.flexColumn : styles.flexRow]}>
+                <View style={[shouldUseNarrowLayout && styles.w100]}>
+                    <SearchBar
+                        inputValue={inputValue}
+                        onChangeText={setInputValue}
+                        label={translate('domain.groups.findGroup')}
+                        shouldShowEmptyState={false}
+                        style={[styles.flex1, styles.mh0, styles.mb0]}
+                    />
+                </View>
+            </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 +131,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>
