Simplify multi-object picker logic with search

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -27,6 +27,7 @@ import {
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
+import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
 import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 import { prefillRecord } from '@/object-record/utils/prefillRecord';
@@ -236,6 +237,7 @@ export const ActivityTargetInlineCellEditMode = ({
             (activityTarget) => activityTarget.id !== activityTargetToDeleteId,
           );
 
+
           if (isActivityInCreateMode) {
             upsertActivity({
               activity,
@@ -279,6 +281,7 @@ export const ActivityTargetInlineCellEditMode = ({
         <ActivityTargetInlineCellEditModeMultiRecordsEffect
           selectedObjectRecordIds={selectedTargetObjectIds}
         />
+        <ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect />
         <MultiRecordSelect onSubmit={handleSubmit} onChange={handleChange} />
       </RelationPickerScope>
     </StyledSelectContainer>

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect.tsx

@@ -3,15 +3,23 @@ import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useRelationField } from '@/object-record/record-field/meta-types/hooks/useRelationField';
 import { objectRecordMultiSelectComponentFamilyState } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
-import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
 import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions';
 import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
+export type ObjectRecordForSelect = {
+  objectMetadataItem: ObjectMetadataItem;
+  record: ObjectRecord;
+  recordIdentifier: ObjectRecordIdentifier;
+};
+
 export const RelationFromManyFieldInputMultiRecordsEffect = () => {
   const { fieldValue, fieldDefinition } = useRelationField<EntityForSelect[]>();
   const scopeId = useAvailableScopeIdOrThrow(

packages/twenty-front/src/modules/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState.ts

@@ -1,4 +1,4 @@
-import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { ObjectRecordForSelect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
 import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
 
 export type ObjectRecordAndSelected = ObjectRecordForSelect & {

packages/twenty-front/src/modules/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState.ts

@@ -0,0 +1,8 @@
+import { ObjectRecordForSelect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const objectRecordMultiSelectMatchesFilterRecordsIdsComponentState =
+  createComponentState<ObjectRecordForSelect[]>({
+    key: 'objectRecordMultiSelectMatchesFilterRecordsIdsComponentState',
+    defaultValue: [],
+  });

packages/twenty-front/src/modules/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsEffect.tsx

@@ -7,18 +7,18 @@ import {
 } from 'recoil';
 
 import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { ObjectRecordForSelect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
 import { objectRecordMultiSelectComponentFamilyState } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
-import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
-import {
-  ObjectRecordForSelect,
-  SelectedObjectRecordId,
-  useMultiObjectSearch,
-} from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
 import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
+export type SelectedObjectRecordId = {
+  objectNameSingular: string;
+  id: string;
+};
+
 export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
   selectedObjectRecordIds,
 }: {
@@ -30,43 +30,14 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
   const {
     objectRecordsIdsMultiSelectState,
     objectRecordMultiSelectCheckedRecordsIdsState,
-    recordMultiSelectIsLoadingState,
   } = useObjectRecordMultiSelectScopedStates(scopeId);
   const [objectRecordsIdsMultiSelect, setObjectRecordsIdsMultiSelect] =
     useRecoilState(objectRecordsIdsMultiSelectState);
 
-  const setRecordMultiSelectIsLoading = useSetRecoilState(
-    recordMultiSelectIsLoadingState,
-  );
-
-  const relationPickerScopedId = useAvailableScopeIdOrThrow(
-    RelationPickerScopeInternalContext,
-  );
-
-  const { relationPickerSearchFilterState } = useRelationPickerScopedStates({
-    relationPickerScopedId,
-  });
-  const relationPickerSearchFilter = useRecoilValue(
-    relationPickerSearchFilterState,
+  const setObjectRecordMultiSelectCheckedRecordsIds = useSetRecoilState(
+    objectRecordMultiSelectCheckedRecordsIdsState,
   );
 
-  const { filteredSelectedObjectRecords, loading, objectRecordsToSelect } =
-    useMultiObjectSearch({
-      searchFilterValue: relationPickerSearchFilter,
-      excludedObjects: [
-        CoreObjectNameSingular.Task,
-        CoreObjectNameSingular.Note,
-      ],
-      selectedObjectRecordIds,
-      excludedObjectRecordIds: [],
-      limit: 10,
-    });
-
-  const [
-    objectRecordMultiSelectCheckedRecordsIds,
-    setObjectRecordMultiSelectCheckedRecordsIds,
-  ] = useRecoilState(objectRecordMultiSelectCheckedRecordsIdsState);
-
   const updateRecords = useRecoilCallback(
     ({ snapshot, set }) =>
       (newRecords: ObjectRecordForSelect[]) => {
@@ -80,6 +51,10 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
             )
             .getValue();
 
+          const objectRecordMultiSelectCheckedRecordsIds = snapshot
+            .getLoadable(objectRecordMultiSelectCheckedRecordsIdsState)
+            .getValue();
+
           const newRecordWithSelected = {
             ...newRecord,
             selected: objectRecordMultiSelectCheckedRecordsIds.some(
@@ -103,23 +78,25 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
           }
         }
       },
-    [objectRecordMultiSelectCheckedRecordsIds, scopeId],
+    [objectRecordMultiSelectCheckedRecordsIdsState, scopeId],
+  );
+
+  const matchesSearchFilterObjectRecords = useRecoilValue(
+    objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
+      scopeId,
+    }),
   );
 
   useEffect(() => {
-    const allRecords = [
-      ...(filteredSelectedObjectRecords ?? []),
-      ...(objectRecordsToSelect ?? []),
-    ];
+    const allRecords = matchesSearchFilterObjectRecords ?? [];
     updateRecords(allRecords);
     const allRecordsIds = allRecords.map((record) => record.record.id);
     if (!isDeeplyEqual(allRecordsIds, objectRecordsIdsMultiSelect)) {
       setObjectRecordsIdsMultiSelect(allRecordsIds);
     }
   }, [
-    filteredSelectedObjectRecords,
+    matchesSearchFilterObjectRecords,
     objectRecordsIdsMultiSelect,
-    objectRecordsToSelect,
     setObjectRecordsIdsMultiSelect,
     updateRecords,
   ]);
@@ -130,9 +107,5 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
     );
   }, [selectedObjectRecordIds, setObjectRecordMultiSelectCheckedRecordsIds]);
 
-  useEffect(() => {
-    setRecordMultiSelectIsLoading(loading);
-  }, [loading, setRecordMultiSelectIsLoading]);
-
   return <></>;
 };

packages/twenty-front/src/modules/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
+import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
+import { useMultiObjectSearchMatchesSearchFilterQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterQuery';
+import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+export const ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect =
+  () => {
+    const scopeId = useAvailableScopeIdOrThrow(
+      RelationPickerScopeInternalContext,
+    );
+
+    const setRecordMultiSelectMatchesFilterRecords = useSetRecoilState(
+      objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
+        scopeId,
+      }),
+    );
+
+    const relationPickerScopedId = useAvailableScopeIdOrThrow(
+      RelationPickerScopeInternalContext,
+    );
+
+    const { relationPickerSearchFilterState } = useRelationPickerScopedStates({
+      relationPickerScopedId,
+    });
+    const relationPickerSearchFilter = useRecoilValue(
+      relationPickerSearchFilterState,
+    );
+
+    const { matchesSearchFilterObjectRecords } =
+      useMultiObjectSearchMatchesSearchFilterQuery({
+        excludedObjects: [
+          CoreObjectNameSingular.Task,
+          CoreObjectNameSingular.Note,
+        ],
+        searchFilterValue: relationPickerSearchFilter,
+        limit: 10,
+      });
+
+    useEffect(() => {
+      setRecordMultiSelectMatchesFilterRecords(
+        matchesSearchFilterObjectRecords,
+      );
+    }, [
+      setRecordMultiSelectMatchesFilterRecords,
+      matchesSearchFilterObjectRecords,
+    ]);
+
+    return <></>;
+  };

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts

@@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
 import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
-import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { ObjectRecordForSelect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
 import { isDefined } from '~/utils/isDefined';
 
 export type MultiObjectRecordQueryResult = {