refactor: apply relation optimistic effects on record update (#3556)

* refactor: apply relation optimistic effects on record update

Related to #3509

* refactor: remove need to pass relation id field to create and update mutations

* fix: fix tests

* fix: fix SingleEntitySelect glitch

* fix: fix usePersistField tests

* fix: fix wrong import after rebase

* fix: fix several tests

* fix: fix test types

packages/twenty-front/src/modules/companies/components/NewOpportunityButton.tsx

@@ -5,9 +5,7 @@ import { NewButton } from '@/object-record/record-board-deprecated/components/Ne
 import { BoardColumnContext } from '@/object-record/record-board-deprecated/contexts/BoardColumnContext';
 import { useCreateOpportunity } from '@/object-record/record-board-deprecated/hooks/internal/useCreateOpportunity';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
-import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
@@ -52,30 +50,16 @@ export const NewOpportunityButton = () => {
     setIsCreatingCard(false);
   };
 
-  const { relationPickerSearchFilter, searchQuery } = useRelationPicker();
-
-  const filteredSearchEntityResults = useFilteredSearchEntityQuery({
-    filters: [
-      {
-        fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
-        filter: relationPickerSearchFilter,
-      },
-    ],
-    orderByField: 'createdAt',
-    selectedIds: [],
-    objectNameSingular: CoreObjectNameSingular.Company,
-  });
-
   return (
     <>
       {isCreatingCard ? (
         <SingleEntitySelect
           disableBackgroundBlur
-          entitiesToSelect={filteredSearchEntityResults.entitiesToSelect}
-          loading={filteredSearchEntityResults.loading}
           onCancel={handleCancel}
           onEntitySelected={handleEntitySelect}
-          selectedEntity={filteredSearchEntityResults.selectedEntities[0]}
+          relationObjectNameSingular={CoreObjectNameSingular.Company}
+          relationPickerScopeId="relation-picker"
+          selectedRelationRecordIds={[]}
         />
       ) : (
         <NewButton onClick={handleNewClick} />

packages/twenty-front/src/modules/companies/components/OpportunityPicker.tsx

@@ -2,20 +2,15 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { SingleEntitySelectMenuItems } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
-import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
-import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
+import { SingleEntitySelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { currentPipelineStepsState } from '@/pipeline/states/currentPipelineStepsState';
-import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconChevronDown } from '@/ui/display/icon';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 export type OpportunityPickerProps = {
   companyId: string | null;
@@ -32,22 +27,6 @@ export const OpportunityPicker = ({
 }: OpportunityPickerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
-
-  const { searchQuery } = useRelationPicker();
-
-  const filteredSearchEntityResults = useFilteredSearchEntityQuery({
-    filters: [
-      {
-        fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
-        filter: searchFilter,
-      },
-    ],
-    orderByField: 'createdAt',
-    selectedIds: [],
-    objectNameSingular: CoreObjectNameSingular.Company,
-  });
-
   const [isProgressSelectionUnfolded, setIsProgressSelectionUnfolded] =
     useState(false);
 
@@ -110,21 +89,12 @@ export const OpportunityPicker = ({
             {selectedPipelineStep?.name}
           </DropdownMenuHeader>
           <DropdownMenuSeparator />
-          <DropdownMenuSearchInput
-            value={searchFilter}
-            onChange={handleSearchFilterChange}
-            autoFocus
+          <SingleEntitySelectMenuItemsWithSearch
+            onCancel={onCancel}
+            onEntitySelected={handleEntitySelected}
+            relationObjectNameSingular={CoreObjectNameSingular.Company}
+            selectedRelationRecordIds={[]}
           />
-          <DropdownMenuSeparator />
-          <RecoilScope>
-            <SingleEntitySelectMenuItems
-              entitiesToSelect={filteredSearchEntityResults.entitiesToSelect}
-              loading={filteredSearchEntityResults.loading}
-              onCancel={onCancel}
-              onEntitySelected={handleEntitySelected}
-              selectedEntity={filteredSearchEntityResults.selectedEntities[0]}
-            />
-          </RecoilScope>
         </>
       )}
     </DropdownMenu>