From 7205927440fd627496c68810f702922bfea4edaa Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Fri, 6 Sep 2024 18:26:01 +0530
Subject: [PATCH] multiselect for onetomany relations (#6892)

Issue #4345
used `useUpdateRelationFromManyFieldInput` hook from `FieldInput` to
`updateRelation`.
Creating a seperate hook didnt made sense when it basically does the
same thing.
However renaming the hook to something generic would make sense so that
its not tied to `FieldInput` according to naming convention

followup issue to tackle - #6890


https://github.com/user-attachments/assets/452372ea-2699-45fd-9edf-ded36abdbca2

---------

Co-authored-by: Weiko <corentin@twenty.com>
---
 .../RecordDetailRelationSection.tsx           | 40 ++++++++++++++-----
 .../MultipleObjectRecordSelectItem.tsx        |  3 +-
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
index 426078f80..c1c80de66 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
@@ -4,10 +4,13 @@ import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconForbid, IconPencil, IconPlus } from 'twenty-ui';
 
+import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
+import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordDetailRelationRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList';
 import { RecordDetailRelationRecordsListEmptyState } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState';
@@ -16,6 +19,7 @@ import { RecordDetailSection } from '@/object-record/record-show/record-detail-s
 import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
 import { SingleEntitySelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch';
 import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
@@ -110,6 +114,10 @@ export const RecordDetailRelationSection = ({
     });
   };
 
+  const { updateRelation } = useUpdateRelationFromManyFieldInput({
+    scopeId: dropdownId,
+  });
+
   const filterQueryParams: FilterQueryParams = {
     filter: {
       [relationFieldMetadataItem?.name || '']: {
@@ -175,16 +183,28 @@ export const RecordDetailRelationSection = ({
               }
               dropdownComponents={
                 <RelationPickerScope relationPickerScopeId={dropdownId}>
-                  <SingleEntitySelectMenuItemsWithSearch
-                    EmptyIcon={IconForbid}
-                    onEntitySelected={handleRelationPickerEntitySelected}
-                    selectedRelationRecordIds={relationRecordIds}
-                    relationObjectNameSingular={
-                      relationObjectMetadataNameSingular
-                    }
-                    relationPickerScopeId={dropdownId}
-                    onCreate={createNewRecordAndOpenRightDrawer}
-                  />
+                  {isToOneObject ? (
+                    <SingleEntitySelectMenuItemsWithSearch
+                      EmptyIcon={IconForbid}
+                      onEntitySelected={handleRelationPickerEntitySelected}
+                      selectedRelationRecordIds={relationRecordIds}
+                      relationObjectNameSingular={
+                        relationObjectMetadataNameSingular
+                      }
+                      relationPickerScopeId={dropdownId}
+                      onCreate={createNewRecordAndOpenRightDrawer}
+                    />
+                  ) : (
+                    <>
+                      <ObjectMetadataItemsRelationPickerEffect />
+                      <RelationFromManyFieldInputMultiRecordsEffect />
+                      <MultiRecordSelect
+                        onCreate={createNewRecordAndOpenRightDrawer}
+                        onChange={updateRelation}
+                        onSubmit={closeDropdown}
+                      />
+                    </>
+                  )}
                 </RelationPickerScope>
               }
               dropdownHotkeyScope={{
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
index ee4885258..0f2356e63 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { Avatar } from 'twenty-ui';
-import { v4 } from 'uuid';
 
 import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
 import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
@@ -69,7 +68,7 @@ export const MultipleObjectRecordSelectItem = ({
     : false;
 
   return (
-    <StyledSelectableItem itemId={objectRecordId} key={objectRecordId + v4()}>
+    <StyledSelectableItem itemId={objectRecordId} key={objectRecordId}>
       <MenuItemMultiSelectAvatar
         onSelectChange={(_isNewlySelectedValue) => handleSelectChange()}
         isKeySelected={isSelectedByKeyboard}