3129 show page relation field add delete menu item (#3975)

* Fix typing error

* Add delete relation button

* Disable delete for workspace members

* Fix lint

packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx

@@ -62,6 +62,7 @@ describe('useFindManyRecords', () => {
         setCurrentWorkspaceMember({
           id: '32219445-f587-4c40-b2b1-6d3205ed96da',
           name: { firstName: 'John', lastName: 'Connor' },
+          locale: 'en',
         });
 
         const mockObjectMetadataItems = getObjectMetadataItemsMock();

packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardContent.tsx

@@ -6,12 +6,13 @@ import { LightIconButton, MenuItem } from 'tsup.ui.index';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord.ts';
 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 { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { IconDotsVertical, IconUnlink } from '@/ui/display/icon';
+import { IconDotsVertical, IconTrash, IconUnlink } from '@/ui/display/icon';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -75,6 +76,10 @@ export const RecordRelationFieldCardContent = ({
     objectNameSingular: relationObjectMetadataNameSingular,
   });
 
+  const { deleteOneRecord: deleteOneRelationRecord } = useDeleteOneRecord({
+    objectNameSingular: relationObjectMetadataNameSingular,
+  });
+
   const dropdownScopeId = `record-field-card-menu-${relationRecord.id}`;
 
   const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId);
@@ -101,6 +106,11 @@ export const RecordRelationFieldCardContent = ({
     });
   };
 
+  const handleDelete = async () => {
+    closeDropdown();
+    await deleteOneRelationRecord(relationRecord.id);
+  };
+
   const isOpportunityCompanyRelation =
     (objectMetadataNameSingular === CoreObjectNameSingular.Opportunity &&
       relationObjectMetadataNameSingular === CoreObjectNameSingular.Company) ||
@@ -108,6 +118,10 @@ export const RecordRelationFieldCardContent = ({
       relationObjectMetadataNameSingular ===
         CoreObjectNameSingular.Opportunity);
 
+  const isAccountOwnerRelation =
+    relationObjectMetadataNameSingular ===
+    CoreObjectNameSingular.WorkspaceMember;
+
   return (
     <StyledCardContent isDropdownOpen={isDropdownOpen} divider={divider}>
       <RecordChip
@@ -134,6 +148,14 @@ export const RecordRelationFieldCardContent = ({
                   text="Detach"
                   onClick={handleDetach}
                 />
+                {!isAccountOwnerRelation && (
+                  <MenuItem
+                    LeftIcon={IconTrash}
+                    text="Delete"
+                    accent="danger"
+                    onClick={handleDelete}
+                  />
+                )}
               </DropdownMenuItemsContainer>
             }
             dropdownHotkeyScope={{