Various fixes (#11108)

Fixes many bug regarding TableCell and InlineCells

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx

@@ -17,6 +17,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
+import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
@@ -102,7 +103,6 @@ export const CalendarEventDetails = ({
         value={{
           recordId: calendarEvent.id,
           hotkeyScope: 'calendar-event-details',
-          recoilScopeId: `${calendarEvent.id}-${fieldName}`,
           isLabelIdentifier: false,
           fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
             field: fieldsByName[fieldName],
@@ -116,7 +116,7 @@ export const CalendarEventDetails = ({
       >
         <RecordFieldComponentInstanceContext.Provider
           value={{
-            instanceId: `${calendarEvent.id}-${fieldName}`,
+            instanceId: getRecordFieldInputId(calendarEvent.id, fieldName),
           }}
         >
           <RecordInlineCell readonly />

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx

@@ -14,7 +14,7 @@ import {
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { isDefined } from 'twenty-shared';
 import {
   IconCalendar,
@@ -94,11 +94,6 @@ export const AttachmentRow = ({
   const [attachmentFileName, setAttachmentFileName] =
     useState(originalFileName);
 
-  const fieldContext = useMemo(
-    () => ({ recoilScopeId: attachment?.id ?? '' }),
-    [attachment?.id],
-  );
-
   const { destroyOneRecord: destroyOneAttachment } = useDestroyOneRecord({
     objectNameSingular: CoreObjectNameSingular.Attachment,
   });
@@ -161,7 +156,13 @@ export const AttachmentRow = ({
   };
 
   return (
-    <FieldContext.Provider value={fieldContext as GenericFieldContextType}>
+    <FieldContext.Provider
+      value={
+        {
+          recordId: attachment.id,
+        } as GenericFieldContextType
+      }
+    >
       <ActivityRow disabled>
         <StyledLeftContent>
           <AttachmentIcon attachmentType={attachment.type} />

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

@@ -1,23 +1,21 @@
 import { useContext } from 'react';
-import { Key } from 'ts-key-enum';
 import { IconArrowUpRight, IconPencil } from 'twenty-ui';
 
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { useOpenActivityTargetInlineCellEditMode } from '@/activities/inline-cell/hooks/useOpenActivityTargetInlineCellEditMode';
 import { useUpdateActivityTargetFromInlineCell } from '@/activities/inline-cell/hooks/useUpdateActivityTargetFromInlineCell';
-import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFieldContext } from '@/object-record/hooks/useFieldContext';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
-import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
 import { RecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
 
 type ActivityTargetsInlineCellProps = {
   activityRecordId: string;
@@ -26,6 +24,7 @@ type ActivityTargetsInlineCellProps = {
   activityObjectNameSingular:
     | CoreObjectNameSingular.Note
     | CoreObjectNameSingular.Task;
+  componentInstanceId: string;
 };
 
 export const ActivityTargetsInlineCell = ({
@@ -33,26 +32,17 @@ export const ActivityTargetsInlineCell = ({
   showLabel = true,
   maxWidth,
   activityObjectNameSingular,
+  componentInstanceId,
 }: ActivityTargetsInlineCellProps) => {
   const { activityTargetObjectRecords } =
     useActivityTargetObjectRecords(activityRecordId);
 
-  const multipleRecordPickerInstanceId = `multiple-record-picker-target-${activityRecordId}`;
-
-  const { closeInlineCell } = useInlineCell();
+  const { closeInlineCell } = useInlineCell(componentInstanceId);
 
   const { fieldDefinition } = useContext(FieldContext);
 
   const isFieldReadOnly = useIsFieldValueReadOnly();
 
-  useScopedHotkeys(
-    Key.Escape,
-    () => {
-      closeInlineCell();
-    },
-    ActivityEditorHotkeyScope.ActivityTargets,
-  );
-
   const { FieldContextProvider: ActivityTargetsContextProvider } =
     useFieldContext({
       objectNameSingular: activityObjectNameSingular,
@@ -72,7 +62,11 @@ export const ActivityTargetsInlineCell = ({
     });
 
   return (
-    <RecordFieldInputScope recordFieldInputScopeId={activityRecordId}>
+    <RecordFieldComponentInstanceContext.Provider
+      value={{
+        instanceId: componentInstanceId,
+      }}
+    >
       <FieldFocusContextProvider>
         {ActivityTargetsContextProvider && (
           <ActivityTargetsContextProvider>
@@ -80,20 +74,20 @@ export const ActivityTargetsInlineCell = ({
               value={{
                 buttonIcon: IconPencil,
                 customEditHotkeyScope:
-                  ActivityEditorHotkeyScope.ActivityTargets,
+                  MultipleRecordPickerHotkeyScope.MultipleRecordPicker,
                 IconLabel: showLabel ? IconArrowUpRight : undefined,
                 showLabel: showLabel,
                 readonly: isFieldReadOnly,
                 labelWidth: fieldDefinition?.labelWidth,
                 editModeContent: (
                   <MultipleRecordPicker
-                    componentInstanceId={multipleRecordPickerInstanceId}
+                    componentInstanceId={componentInstanceId}
                     onClickOutside={() => {
                       closeInlineCell();
                     }}
                     onChange={(morphItem) => {
                       updateActivityTargetFromInlineCell({
-                        recordPickerInstanceId: multipleRecordPickerInstanceId,
+                        recordPickerInstanceId: componentInstanceId,
                         morphItem,
                         activityTargetWithTargetRecords:
                           activityTargetObjectRecords,
@@ -113,7 +107,7 @@ export const ActivityTargetsInlineCell = ({
                 ),
                 onOpenEditMode: () => {
                   openActivityTargetInlineCellEditMode({
-                    recordPickerInstanceId: multipleRecordPickerInstanceId,
+                    recordPickerInstanceId: componentInstanceId,
                     activityTargetObjectRecords,
                   });
                 },
@@ -124,6 +118,6 @@ export const ActivityTargetsInlineCell = ({
           </ActivityTargetsContextProvider>
         )}
       </FieldFocusContextProvider>
-    </RecordFieldInputScope>
+    </RecordFieldComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx

@@ -96,6 +96,7 @@ export const NoteCard = ({
         {NoteTargetsContextProvider && (
           <NoteTargetsContextProvider>
             <ActivityTargetsInlineCell
+              componentInstanceId={`note-card-${note.id}-targets`}
               activityRecordId={note.id}
               activityObjectNameSingular={CoreObjectNameSingular.Note}
             />

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -135,6 +135,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
               activityRecordId={task.id}
               showLabel={false}
               maxWidth={200}
+              componentInstanceId={`task-row-targets-${task.id}`}
             />
           </TaskTargetsContextProvider>
         )}

packages/twenty-front/src/modules/activities/types/ActivityEditorHotkeyScope.ts

@@ -1,5 +1,4 @@
 export enum ActivityEditorHotkeyScope {
   ActivityTitle = 'activity-title',
   ActivityBody = 'activity-body',
-  ActivityTargets = 'activity-targets',
 }