Fix opportunity relation (#3478)

* Fix opportunity relation

* Fix

* Fix

* Fix tests

* Fix

* Fix

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

@@ -1,20 +1,13 @@
-import { useContext, useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useEffect } from 'react';
 
-import { AddPersonToCompany } from '@/companies/components/AddPersonToCompany';
-import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata';
-import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconForbid } from '@/ui/display/icon';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { isDefined } from '~/utils/isDefined';
 
 export type RelationPickerProps = {
   recordId?: string;
@@ -40,26 +33,12 @@ export const RelationPicker = ({
     setRelationPickerSearchFilter,
     identifiersMapper,
     searchQuery,
-  } = useRelationPicker();
-
-  const [showAddNewDropdown, setShowAddNewDropdown] = useState(false);
-
-  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+  } = useRelationPicker({ relationPickerScopeId: 'relation-picker' });
 
   useEffect(() => {
     setRelationPickerSearchFilter(initialSearchFilter ?? '');
   }, [initialSearchFilter, setRelationPickerSearchFilter]);
 
-  const boardCardId = useContext(BoardCardIdContext);
-  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
-
-  const [companyProgress] = useRecoilState(
-    companyProgressesFamilyState(boardCardId ?? ''),
-  );
-
-  const { company } = companyProgress ?? {};
-  const companyId = company?.id;
-
   const { objectNameSingular: relationObjectNameSingular } =
     useObjectNameSingularFromPlural({
       objectNamePlural:
@@ -90,41 +69,18 @@ export const RelationPicker = ({
   const handleEntitySelected = (selectedEntity: any | null | undefined) =>
     onSubmit(selectedEntity ?? null);
 
-  const entitiesToSelect = entities.entitiesToSelect.filter((entity) =>
-    weAreInOpportunitiesPageCard ? entity.record.companyId === companyId : true,
-  );
-
-  const weAreAddingNewPerson =
-    weAreInOpportunitiesPageCard && showAddNewDropdown && companyId;
-
   return (
     <>
-      {!weAreAddingNewPerson ? (
-        <SingleEntitySelect
-          EmptyIcon={IconForbid}
-          emptyLabel={'No ' + fieldDefinition.label}
-          entitiesToSelect={entitiesToSelect}
-          loading={entities.loading}
-          onCancel={onCancel}
-          onEntitySelected={handleEntitySelected}
-          selectedEntity={entities.selectedEntities[0]}
-          width={width}
-          onCreate={() => {
-            if (weAreInOpportunitiesPageCard) {
-              setShowAddNewDropdown(true);
-              setHotkeyScopeAndMemorizePreviousScope(
-                RelationPickerHotkeyScope.AddNew,
-              );
-            }
-          }}
-        />
-      ) : (
-        <AddPersonToCompany
-          companyId={companyId}
-          onEntitySelected={handleEntitySelected}
-          closeDropdown={() => setShowAddNewDropdown(false)}
-        />
-      )}
+      <SingleEntitySelect
+        EmptyIcon={IconForbid}
+        emptyLabel={'No ' + fieldDefinition.label}
+        entitiesToSelect={entities.entitiesToSelect}
+        loading={entities.loading}
+        onCancel={onCancel}
+        onEntitySelected={handleEntitySelected}
+        selectedEntity={entities.selectedEntities[0]}
+        width={width}
+      />
     </>
   );
 };

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

@@ -1,8 +1,7 @@
-import { useContext, useRef } from 'react';
+import { useRef } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Key } from 'ts-key-enum';
 
-import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
 import { IconPlus } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@@ -15,7 +14,6 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { assertNotNull } from '~/utils/assert';
-import { isDefined } from '~/utils/isDefined';
 
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
@@ -71,12 +69,6 @@ export const SingleEntitySelectMenuItems = ({
 
   const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
 
-  const boardCardId = useContext(BoardCardIdContext);
-  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
-
-  const hideSearchResults =
-    weAreInOpportunitiesPageCard && !entitiesInDropdown.length;
-
   return (
     <div ref={containerRef}>
       <SelectableList
@@ -94,51 +86,49 @@ export const SingleEntitySelectMenuItems = ({
           }
         }}
       >
-        {!hideSearchResults && (
-          <>
-            <DropdownMenuItemsContainer hasMaxHeight>
-              {loading ? (
-                <DropdownMenuSkeletonItem />
-              ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
-                <MenuItem text="No result" />
-              ) : (
-                <>
-                  {isAllEntitySelectShown &&
-                    selectAllLabel &&
-                    onAllEntitySelected && (
-                      <MenuItemSelect
-                        key="select-all"
-                        onClick={() => onAllEntitySelected()}
-                        LeftIcon={SelectAllIcon}
-                        text={selectAllLabel}
-                        selected={!!isAllEntitySelected}
-                      />
-                    )}
-                  {emptyLabel && (
+        <>
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {loading ? (
+              <DropdownMenuSkeletonItem />
+            ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
+              <MenuItem text="No result" />
+            ) : (
+              <>
+                {isAllEntitySelectShown &&
+                  selectAllLabel &&
+                  onAllEntitySelected && (
                     <MenuItemSelect
-                      key="select-none"
-                      onClick={() => onEntitySelected()}
-                      LeftIcon={EmptyIcon}
-                      text={emptyLabel}
-                      selected={!selectedEntity}
+                      key="select-all"
+                      onClick={() => onAllEntitySelected()}
+                      LeftIcon={SelectAllIcon}
+                      text={selectAllLabel}
+                      selected={!!isAllEntitySelected}
                     />
                   )}
-                </>
-              )}
-            </DropdownMenuItemsContainer>
-            <DropdownMenuItemsContainer hasMaxHeight>
-              {entitiesInDropdown?.map((entity) => (
-                <SelectableMenuItemSelect
-                  key={entity.id}
-                  entity={entity}
-                  onEntitySelected={onEntitySelected}
-                  selectedEntity={selectedEntity}
-                />
-              ))}
-            </DropdownMenuItemsContainer>
-          </>
-        )}
-        {(hideSearchResults || showCreateButton) && !loading && (
+                {emptyLabel && (
+                  <MenuItemSelect
+                    key="select-none"
+                    onClick={() => onEntitySelected()}
+                    LeftIcon={EmptyIcon}
+                    text={emptyLabel}
+                    selected={!selectedEntity}
+                  />
+                )}
+              </>
+            )}
+          </DropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {entitiesInDropdown?.map((entity) => (
+              <SelectableMenuItemSelect
+                key={entity.id}
+                entity={entity}
+                onEntitySelected={onEntitySelected}
+                selectedEntity={selectedEntity}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        </>
+        {showCreateButton && !loading && (
           <DropdownMenuItemsContainer hasMaxHeight>
             {entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
             <CreateNewButton

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

@@ -1,6 +1,3 @@
-import { useContext } from 'react';
-
-import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import {
   SingleEntitySelectMenuItems,
   SingleEntitySelectMenuItemsProps,
@@ -38,20 +35,13 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
 
   const showCreateButton = isDefined(onCreate) && searchFilter !== '';
 
-  const boardCardId = useContext(BoardCardIdContext);
-  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
-  const hideSearchInput =
-    weAreInOpportunitiesPageCard && !entitiesToSelect.length && !selectedEntity;
-
   return (
     <>
-      {!hideSearchInput && (
-        <DropdownMenuSearchInput
-          value={searchFilter}
-          onChange={handleSearchFilterChange}
-          autoFocus
-        />
-      )}
+      <DropdownMenuSearchInput
+        value={searchFilter}
+        onChange={handleSearchFilterChange}
+        autoFocus
+      />
       <DropdownMenuSeparator />
       <SingleEntitySelectMenuItems
         {...{