Refactor useFilteredSearchEntityQuery to accept multiple filters (#1526)

* refactoring useFilteredSearchEntityQuery

* refactor with filter addition

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/activities/components/ActivityAssigneePicker.tsx

@@ -39,8 +39,17 @@ export function ActivityAssigneePicker({
 
   const users = useFilteredSearchEntityQuery({
     queryHook: useSearchUserQuery,
-    selectedIds: activity?.accountOwner?.id ? [activity?.accountOwner?.id] : [],
+    filters: [
-    searchFilter: relationPickerSearchFilter,
+      {
+        fieldName: 'firstName',
+        filter: relationPickerSearchFilter,
+      },
+      {
+        fieldName: 'lastName',
+        filter: relationPickerSearchFilter,
+      },
+    ],
+    orderByField: 'firstName',
     mappingFunction: (user) => ({
       entityType: Entity.User,
       id: user.id,
@@ -50,8 +59,7 @@ export function ActivityAssigneePicker({
       avatarType: 'rounded',
       avatarUrl: user.avatarUrl ?? '',
     }),
-    orderByField: 'firstName',
+    selectedIds: activity?.accountOwner?.id ? [activity?.accountOwner?.id] : [],
-    searchOnFields: ['firstName', 'lastName'],
   });
 
   const client = useApolloClient();

front/src/modules/companies/hooks/useFilteredSearchCompanyQuery.ts

@@ -14,9 +14,13 @@ export function useFilteredSearchCompanyQuery({
 }) {
   return useFilteredSearchEntityQuery({
     queryHook: useSearchCompanyQuery,
-    searchOnFields: ['name'],
+    filters: [
+      {
+        fieldName: 'name',
+        filter: searchFilter,
+      },
+    ],
     orderByField: 'name',
-    selectedIds: selectedIds,
     mappingFunction: (company) => ({
       id: company.id,
       entityType: ActivityTargetableEntityType.Company,
@@ -25,7 +29,7 @@ export function useFilteredSearchCompanyQuery({
       domainName: company.domainName,
       avatarType: 'squared',
     }),
-    searchFilter,
+    selectedIds: selectedIds,
     limit,
   });
 }

front/src/modules/people/components/PeoplePicker.tsx

@@ -34,8 +34,16 @@ export function PeoplePicker({
   const people = useFilteredSearchEntityQuery({
     queryHook: useSearchPeopleQuery,
     selectedIds: [personId ?? ''],
-    searchFilter: relationPickerSearchFilter,
+    filters: [
-    filterByFields: [{ companyId: companyId ?? '' }],
+      {
+        fieldName: 'firstName',
+        filter: relationPickerSearchFilter,
+      },
+      {
+        fieldName: 'lastName',
+        filter: relationPickerSearchFilter,
+      },
+    ],
     mappingFunction: (person) => ({
       entityType: Entity.Person,
       id: person.id,
@@ -44,8 +52,7 @@ export function PeoplePicker({
       avatarUrl: person.avatarUrl ?? '',
     }),
     orderByField: 'firstName',
-    searchOnFields: ['firstName', 'lastName'],
+    excludeEntityIds: excludePersonIds,
-    excludePersonIds,
   });
 
   async function handleEntitySelected(

front/src/modules/people/hooks/useFilteredSearchPeopleQuery.ts

@@ -14,7 +14,16 @@ export function useFilteredSearchPeopleQuery({
 }) {
   return useFilteredSearchEntityQuery({
     queryHook: useSearchPeopleQuery,
-    searchOnFields: ['firstName', 'lastName'],
+    filters: [
+      {
+        fieldName: 'firstName',
+        filter: searchFilter,
+      },
+      {
+        fieldName: 'lastName',
+        filter: searchFilter,
+      },
+    ],
     orderByField: 'lastName',
     selectedIds: selectedIds,
     mappingFunction: (entity) =>
@@ -25,7 +34,6 @@ export function useFilteredSearchPeopleQuery({
         avatarUrl: entity.avatarUrl,
         avatarType: 'rounded',
       } as ActivityTargetableEntityForSelect),
-    searchFilter,
     limit,
   });
 }

front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts

@@ -1,4 +1,4 @@
-import * as Apollo from '@apollo/client';
+import { QueryHookOptions, QueryResult } from '@apollo/client';
 
 import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
@@ -26,6 +26,8 @@ type ExtractEntityTypeFromQueryResponse<T> = T extends {
   ? U
   : never;
 
+type SearchFilter = { fieldName: string; filter: string | number };
+
 const DEFAULT_SEARCH_REQUEST_LIMIT = 10;
 
 // TODO: use this for all search queries, because we need selectedEntities and entitiesToSelect each time we want to search
@@ -36,7 +38,6 @@ export function useFilteredSearchEntityQuery<
   },
   EntityStringField extends SelectStringKeys<EntityType>,
   OrderByField extends EntityStringField,
-  SearchOnField extends EntityStringField,
   QueryResponseForExtract,
   QueryResponse extends {
     searchResults: EntityType[];
@@ -53,31 +54,24 @@ export function useFilteredSearchEntityQuery<
   CustomEntityForSelect extends EntityForSelect,
 >({
   queryHook,
-  searchOnFields,
-  filterByFields,
   orderByField,
+  filters,
   sortOrder = SortOrder.Asc,
   selectedIds,
   mappingFunction,
   limit,
-  searchFilter, // TODO: put in a scoped recoil state
+  excludeEntityIds = [],
-  excludePersonIds = [],
 }: {
   queryHook: (
-    queryOptions?: Apollo.QueryHookOptions<
+    queryOptions?: QueryHookOptions<QueryResponseForExtract, QueryVariables>,
-      QueryResponseForExtract,
+  ) => QueryResult<QueryResponse, QueryVariables>;
-      QueryVariables
-    >,
-  ) => Apollo.QueryResult<QueryResponse, QueryVariables>;
-  searchOnFields: SearchOnField[];
-  filterByFields?: Record<string, any>[];
   orderByField: OrderByField;
+  filters: SearchFilter[];
   sortOrder?: SortOrder;
   selectedIds: string[];
   mappingFunction: (entity: EntityType) => CustomEntityForSelect;
   limit?: number;
-  searchFilter: string;
+  excludeEntityIds?: string[];
-  excludePersonIds?: string[];
 }): EntitiesForMultipleEntitySelect<CustomEntityForSelect> {
   const { loading: selectedEntitiesLoading, data: selectedEntitiesData } =
     queryHook({
@@ -93,9 +87,9 @@ export function useFilteredSearchEntityQuery<
       } as QueryVariables,
     });
 
-  const searchFilterByField = searchOnFields.map((field) => ({
+  const searchFilterByField = filters.map(({ fieldName, filter }) => ({
-    [field]: {
+    [fieldName]: {
-      contains: `%${searchFilter}%`,
+      contains: `%${filter}%`,
       mode: QueryMode.Insensitive,
     },
   }));
@@ -150,7 +144,7 @@ export function useFilteredSearchEntityQuery<
             },
             {
               id: {
-                notIn: [...selectedIds, ...excludePersonIds],
+                notIn: [...selectedIds, ...excludeEntityIds],
               },
             },
           ],

front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx

@@ -26,11 +26,17 @@ export function FilterDropdownUserSearchSelect({
 
   const usersForSelect = useFilteredSearchEntityQuery({
     queryHook: useSearchUserQuery,
-    searchOnFields: ['firstName', 'lastName'],
+    filters: [
+      {
+        fieldName: 'firstName',
+        filter: filterDropdownSearchInput,
+      },
+      {
+        fieldName: 'lastName',
+        filter: filterDropdownSearchInput,
+      },
+    ],
     orderByField: 'lastName',
-    selectedIds: filterDropdownSelectedEntityId
-      ? [filterDropdownSelectedEntityId]
-      : [],
     mappingFunction: (entity) => ({
       id: entity.id,
       entityType: Entity.User,
@@ -38,7 +44,9 @@ export function FilterDropdownUserSearchSelect({
       avatarType: 'rounded',
       avatarUrl: entity.avatarUrl ?? '',
     }),
-    searchFilter: filterDropdownSearchInput,
+    selectedIds: filterDropdownSelectedEntityId
+      ? [filterDropdownSelectedEntityId]
+      : [],
   });
 
   return (

front/src/modules/users/components/UserPicker.tsx

@@ -29,8 +29,17 @@ export function UserPicker({
 
   const users = useFilteredSearchEntityQuery({
     queryHook: useSearchUserQuery,
-    selectedIds: userId ? [userId] : [],
+    filters: [
-    searchFilter: relationPickerSearchFilter,
+      {
+        fieldName: 'firstName',
+        filter: relationPickerSearchFilter,
+      },
+      {
+        fieldName: 'lastName',
+        filter: relationPickerSearchFilter,
+      },
+    ],
+    orderByField: 'firstName',
     mappingFunction: (user) => ({
       entityType: Entity.User,
       id: user.id,
@@ -38,8 +47,7 @@ export function UserPicker({
       avatarType: 'rounded',
       avatarUrl: user.avatarUrl ?? '',
     }),
-    orderByField: 'firstName',
+    selectedIds: userId ? [userId] : [],
-    searchOnFields: ['firstName', 'lastName'],
   });
 
   async function handleEntitySelected(