From 6898a40ac30c3d60b503ea00423e49fc68540c79 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 24 Mar 2025 15:19:05 +0100
Subject: [PATCH] Fix relation from many notes (#11120)

Fixes https://github.com/twentyhq/twenty/issues/3415
---
 .../RecordShowRightDrawerOpenRecordButton.tsx |  30 +++--
 .../components/ActivityTargetsInlineCell.tsx  | 113 +++++++++---------
 .../activities/notes/components/NoteCard.tsx  |  30 ++---
 .../activities/tasks/components/TaskRow.tsx   |  22 ++--
 .../components/FieldContextProvider.tsx}      |  62 +++++-----
 .../components/FieldContextProvider.tsx       |  30 -----
 .../__stories__/AddressFieldInput.stories.tsx |  35 +++---
 .../__stories__/BooleanFieldInput.stories.tsx |  30 +++--
 .../DateTimeFieldInput.stories.tsx            |  30 +++--
 .../__stories__/NumberFieldInput.stories.tsx  |  30 +++--
 .../__stories__/RatingFieldInput.stories.tsx  |  32 ++---
 .../RelationFromManyFieldInput.stories.tsx    |  16 ++-
 .../RelationToOneFieldInput.stories.tsx       |  41 ++++---
 .../__stories__/TextFieldInput.stories.tsx    |  32 ++---
 .../components/MultipleRecordPicker.tsx       |   2 +-
 .../hooks/useOpenRecordTableCellV2.ts         |   2 +-
 .../components/ShowPageSubContainer.tsx       |  11 +-
 17 files changed, 269 insertions(+), 279 deletions(-)
 rename packages/twenty-front/src/modules/object-record/{hooks/useFieldContext.tsx => record-field/components/FieldContextProvider.tsx} (61%)
 delete mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/components/FieldContextProvider.tsx

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
index 367872737..f4ff71984 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
@@ -3,6 +3,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { AppPath } from '@/types/AppPath';
 import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
@@ -15,6 +16,8 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 const StyledLink = styled(Link)`
@@ -23,13 +26,16 @@ const StyledLink = styled(Link)`
 
 type RecordShowRightDrawerOpenRecordButtonProps = {
   objectNameSingular: string;
-  record: ObjectRecord;
+  recordId: string;
 };
 
 export const RecordShowRightDrawerOpenRecordButton = ({
   objectNameSingular,
-  record,
+  recordId,
 }: RecordShowRightDrawerOpenRecordButtonProps) => {
+  const record = useRecoilValue<ObjectRecord | null>(
+    recordStoreFamilyState(recordId),
+  );
   const { closeCommandMenu } = useCommandMenu();
 
   const commandMenuPageComponentInstance = useComponentInstanceStateContext(
@@ -38,7 +44,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({
 
   const tabListComponentId = getShowPageTabListComponentId({
     pageId: commandMenuPageComponentInstance?.instanceId,
-    targetObjectId: record.id,
+    targetObjectId: recordId,
   });
 
   const activeTabIdInRightDrawer = useRecoilComponentValueV2(
@@ -47,7 +53,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({
   );
 
   const tabListComponentIdInRecordPage = getShowPageTabListComponentId({
-    targetObjectId: record.id,
+    targetObjectId: recordId,
   });
 
   const setActiveTabIdInRecordPage = useSetRecoilComponentStateV2(
@@ -55,8 +61,6 @@ export const RecordShowRightDrawerOpenRecordButton = ({
     tabListComponentIdInRecordPage,
   );
 
-  const to = getLinkToShowPage(objectNameSingular, record);
-
   const navigate = useNavigateApp();
 
   const handleOpenRecord = useCallback(() => {
@@ -72,7 +76,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({
 
     navigate(AppPath.RecordShowPage, {
       objectNameSingular,
-      objectRecordId: record.id,
+      objectRecordId: recordId,
     });
 
     closeCommandMenu();
@@ -81,7 +85,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({
     closeCommandMenu,
     navigate,
     objectNameSingular,
-    record.id,
+    recordId,
     setActiveTabIdInRecordPage,
   ]);
 
@@ -89,16 +93,22 @@ export const RecordShowRightDrawerOpenRecordButton = ({
     ['ctrl+Enter,meta+Enter'],
     handleOpenRecord,
     AppHotkeyScope.CommandMenuOpen,
-    [closeCommandMenu, navigate, objectNameSingular, record.id],
+    [closeCommandMenu, navigate, objectNameSingular, recordId],
   );
 
   useScopedHotkeys(
     ['ctrl+Enter,meta+Enter'],
     handleOpenRecord,
     CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown,
-    [closeCommandMenu, navigate, objectNameSingular, record.id],
+    [closeCommandMenu, navigate, objectNameSingular, recordId],
   );
 
+  if (!isDefined(record)) {
+    return null;
+  }
+
+  const to = getLinkToShowPage(objectNameSingular, record);
+
   return (
     <StyledLink to={to} onClick={closeCommandMenu}>
       <Button
diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
index 28568bb64..5e4439e19 100644
--- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
+++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
@@ -6,7 +6,7 @@ import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTa
 import { useOpenActivityTargetInlineCellEditMode } from '@/activities/inline-cell/hooks/useOpenActivityTargetInlineCellEditMode';
 import { useUpdateActivityTargetFromInlineCell } from '@/activities/inline-cell/hooks/useUpdateActivityTargetFromInlineCell';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFieldContext } from '@/object-record/hooks/useFieldContext';
+import { FieldContextProvider } from '@/object-record/record-field/components/FieldContextProvider';
 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';
@@ -43,15 +43,6 @@ export const ActivityTargetsInlineCell = ({
 
   const isFieldReadOnly = useIsFieldValueReadOnly();
 
-  const { FieldContextProvider: ActivityTargetsContextProvider } =
-    useFieldContext({
-      objectNameSingular: activityObjectNameSingular,
-      objectRecordId: activityRecordId,
-      fieldMetadataName: fieldDefinition.metadata.fieldName,
-      fieldPosition: 3,
-      overridenIsFieldEmpty: activityTargetObjectRecords.length === 0,
-    });
-
   const { openActivityTargetInlineCellEditMode } =
     useOpenActivityTargetInlineCellEditMode();
 
@@ -68,55 +59,59 @@ export const ActivityTargetsInlineCell = ({
       }}
     >
       <FieldFocusContextProvider>
-        {ActivityTargetsContextProvider && (
-          <ActivityTargetsContextProvider>
-            <RecordInlineCellContext.Provider
-              value={{
-                buttonIcon: IconPencil,
-                customEditHotkeyScope:
-                  MultipleRecordPickerHotkeyScope.MultipleRecordPicker,
-                IconLabel: showLabel ? IconArrowUpRight : undefined,
-                showLabel: showLabel,
-                readonly: isFieldReadOnly,
-                labelWidth: fieldDefinition?.labelWidth,
-                editModeContent: (
-                  <MultipleRecordPicker
-                    componentInstanceId={componentInstanceId}
-                    onClickOutside={() => {
-                      closeInlineCell();
-                    }}
-                    onChange={(morphItem) => {
-                      updateActivityTargetFromInlineCell({
-                        recordPickerInstanceId: componentInstanceId,
-                        morphItem,
-                        activityTargetWithTargetRecords:
-                          activityTargetObjectRecords,
-                      });
-                    }}
-                    onSubmit={() => {
-                      closeInlineCell();
-                    }}
-                  />
-                ),
-                label: 'Relations',
-                displayModeContent: (
-                  <ActivityTargetChips
-                    activityTargetObjectRecords={activityTargetObjectRecords}
-                    maxWidth={maxWidth}
-                  />
-                ),
-                onOpenEditMode: () => {
-                  openActivityTargetInlineCellEditMode({
-                    recordPickerInstanceId: componentInstanceId,
-                    activityTargetObjectRecords,
-                  });
-                },
-              }}
-            >
-              <RecordInlineCellContainer />
-            </RecordInlineCellContext.Provider>
-          </ActivityTargetsContextProvider>
-        )}
+        <FieldContextProvider
+          objectNameSingular={activityObjectNameSingular}
+          objectRecordId={activityRecordId}
+          fieldMetadataName={fieldDefinition.metadata.fieldName}
+          fieldPosition={3}
+          overridenIsFieldEmpty={activityTargetObjectRecords.length === 0}
+        >
+          <RecordInlineCellContext.Provider
+            value={{
+              buttonIcon: IconPencil,
+              customEditHotkeyScope:
+                MultipleRecordPickerHotkeyScope.MultipleRecordPicker,
+              IconLabel: showLabel ? IconArrowUpRight : undefined,
+              showLabel: showLabel,
+              readonly: isFieldReadOnly,
+              labelWidth: fieldDefinition?.labelWidth,
+              editModeContent: (
+                <MultipleRecordPicker
+                  componentInstanceId={componentInstanceId}
+                  onClickOutside={() => {
+                    closeInlineCell();
+                  }}
+                  onChange={(morphItem) => {
+                    updateActivityTargetFromInlineCell({
+                      recordPickerInstanceId: componentInstanceId,
+                      morphItem,
+                      activityTargetWithTargetRecords:
+                        activityTargetObjectRecords,
+                    });
+                  }}
+                  onSubmit={() => {
+                    closeInlineCell();
+                  }}
+                />
+              ),
+              label: 'Relations',
+              displayModeContent: (
+                <ActivityTargetChips
+                  activityTargetObjectRecords={activityTargetObjectRecords}
+                  maxWidth={maxWidth}
+                />
+              ),
+              onOpenEditMode: () => {
+                openActivityTargetInlineCellEditMode({
+                  recordPickerInstanceId: componentInstanceId,
+                  activityTargetObjectRecords,
+                });
+              },
+            }}
+          >
+            <RecordInlineCellContainer />
+          </RecordInlineCellContext.Provider>
+        </FieldContextProvider>
       </FieldFocusContextProvider>
     </RecordFieldComponentInstanceContext.Provider>
   );
diff --git a/packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx b/packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx
index 9689a8a11..7dc5dee5c 100644
--- a/packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx
+++ b/packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx
@@ -5,7 +5,7 @@ import { Note } from '@/activities/types/Note';
 import { getActivityPreview } from '@/activities/utils/getActivityPreview';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFieldContext } from '@/object-record/hooks/useFieldContext';
+import { FieldContextProvider } from '@/object-record/record-field/components/FieldContextProvider';
 
 const StyledCard = styled.div<{ isSingleNote: boolean }>`
   align-items: flex-start;
@@ -72,13 +72,6 @@ export const NoteCard = ({
 
   const body = getActivityPreview(note?.bodyV2?.blocknote ?? null);
 
-  const { FieldContextProvider: NoteTargetsContextProvider } = useFieldContext({
-    objectNameSingular: CoreObjectNameSingular.Note,
-    objectRecordId: note.id,
-    fieldMetadataName: 'noteTargets',
-    fieldPosition: 0,
-  });
-
   return (
     <StyledCard isSingleNote={isSingleNote}>
       <StyledCardDetailsContainer
@@ -93,15 +86,18 @@ export const NoteCard = ({
         <StyledCardContent>{body}</StyledCardContent>
       </StyledCardDetailsContainer>
       <StyledFooter>
-        {NoteTargetsContextProvider && (
-          <NoteTargetsContextProvider>
-            <ActivityTargetsInlineCell
-              componentInstanceId={`note-card-${note.id}-targets`}
-              activityRecordId={note.id}
-              activityObjectNameSingular={CoreObjectNameSingular.Note}
-            />
-          </NoteTargetsContextProvider>
-        )}
+        <FieldContextProvider
+          objectNameSingular={CoreObjectNameSingular.Note}
+          objectRecordId={note.id}
+          fieldMetadataName={'noteTargets'}
+          fieldPosition={0}
+        >
+          <ActivityTargetsInlineCell
+            componentInstanceId={`note-card-${note.id}-targets`}
+            activityRecordId={note.id}
+            activityObjectNameSingular={CoreObjectNameSingular.Note}
+          />
+        </FieldContextProvider>
       </StyledFooter>
     </StyledCard>
   );
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
index a4967862c..594369e6e 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -15,7 +15,7 @@ import { ActivityRow } from '@/activities/components/ActivityRow';
 import { Task } from '@/activities/types/Task';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFieldContext } from '@/object-record/hooks/useFieldContext';
+import { FieldContextProvider } from '@/object-record/record-field/components/FieldContextProvider';
 import { useCompleteTask } from '../hooks/useCompleteTask';
 
 const StyledTaskBody = styled.div`
@@ -84,13 +84,6 @@ export const TaskRow = ({ task }: { task: Task }) => {
 
   const { completeTask } = useCompleteTask(task);
 
-  const { FieldContextProvider: TaskTargetsContextProvider } = useFieldContext({
-    objectNameSingular: CoreObjectNameSingular.Task,
-    objectRecordId: task.id,
-    fieldMetadataName: 'taskTargets',
-    fieldPosition: 0,
-  });
-
   return (
     <ActivityRow
       onClick={() => {
@@ -128,8 +121,13 @@ export const TaskRow = ({ task }: { task: Task }) => {
             {beautifyExactDate(task.dueAt)}
           </StyledDueDate>
         )}
-        {TaskTargetsContextProvider && (
-          <TaskTargetsContextProvider>
+        {
+          <FieldContextProvider
+            objectNameSingular={CoreObjectNameSingular.Task}
+            objectRecordId={task.id}
+            fieldMetadataName={'taskTargets'}
+            fieldPosition={0}
+          >
             <ActivityTargetsInlineCell
               activityObjectNameSingular={CoreObjectNameSingular.Task}
               activityRecordId={task.id}
@@ -137,8 +135,8 @@ export const TaskRow = ({ task }: { task: Task }) => {
               maxWidth={200}
               componentInstanceId={`task-row-targets-${task.id}`}
             />
-          </TaskTargetsContextProvider>
-        )}
+          </FieldContextProvider>
+        }
       </StyledRightSideContainer>
     </ActivityRow>
   );
diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldContextProvider.tsx
similarity index 61%
rename from packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
rename to packages/twenty-front/src/modules/object-record/record-field/components/FieldContextProvider.tsx
index 57a863a02..874d70a96 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FieldContextProvider.tsx
@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
@@ -9,8 +7,9 @@ import {
   RecordUpdateHookParams,
 } from '@/object-record/record-field/contexts/FieldContext';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
+import { ReactNode } from 'react';
 
-export const useFieldContext = ({
+export const FieldContextProvider = ({
   clearable,
   fieldMetadataName,
   fieldPosition,
@@ -19,6 +18,7 @@ export const useFieldContext = ({
   objectRecordId,
   customUseUpdateOneObjectHook,
   overridenIsFieldEmpty,
+  children,
 }: {
   clearable?: boolean;
   fieldMetadataName: string;
@@ -28,6 +28,7 @@ export const useFieldContext = ({
   objectRecordId: string;
   customUseUpdateOneObjectHook?: RecordUpdateHook;
   overridenIsFieldEmpty?: boolean;
+  children: ReactNode;
 }) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -52,34 +53,31 @@ export const useFieldContext = ({
     return [updateEntity, { loading: false }];
   };
 
-  const FieldContextProvider =
-    fieldMetadataItem && objectMetadataItem
-      ? ({ children }: { children: ReactNode }) => (
-          <FieldContext.Provider
-            key={objectRecordId + fieldMetadataItem.id}
-            value={{
-              recordId: objectRecordId,
-              isLabelIdentifier,
-              fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
-                field: fieldMetadataItem,
-                showLabel: true,
-                position: fieldPosition,
-                objectMetadataItem,
-                labelWidth: 90,
-              }),
-              useUpdateRecord:
-                customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation,
-              hotkeyScope: InlineCellHotkeyScope.InlineCell,
-              clearable,
-              overridenIsFieldEmpty,
-            }}
-          >
-            {children}
-          </FieldContext.Provider>
-        )
-      : undefined;
+  if (!fieldMetadataItem) {
+    return null;
+  }
 
-  return {
-    FieldContextProvider,
-  };
+  return (
+    <FieldContext.Provider
+      key={objectRecordId + fieldMetadataItem.id}
+      value={{
+        recordId: objectRecordId,
+        isLabelIdentifier,
+        fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
+          field: fieldMetadataItem,
+          showLabel: true,
+          position: fieldPosition,
+          objectMetadataItem,
+          labelWidth: 90,
+        }),
+        useUpdateRecord:
+          customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation,
+        hotkeyScope: InlineCellHotkeyScope.InlineCell,
+        clearable,
+        overridenIsFieldEmpty,
+      }}
+    >
+      {children}
+    </FieldContext.Provider>
+  );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/components/FieldContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/components/FieldContextProvider.tsx
deleted file mode 100644
index 17166372c..000000000
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/components/FieldContextProvider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  FieldContext,
-  GenericFieldContextType,
-} from '@/object-record/record-field/contexts/FieldContext';
-
-type FieldContextProviderProps = {
-  children: React.ReactNode;
-  fieldDefinition: GenericFieldContextType['fieldDefinition'];
-  recordId?: string;
-};
-
-export const FieldContextProvider = ({
-  children,
-  fieldDefinition,
-  recordId,
-}: FieldContextProviderProps) => {
-  return (
-    <FieldContext.Provider
-      value={{
-        recordId: recordId ?? '1',
-        isLabelIdentifier: false,
-        hotkeyScope: 'hotkey-scope',
-        fieldDefinition,
-        useUpdateRecord: () => [() => undefined, {}],
-      }}
-    >
-      {children}
-    </FieldContext.Provider>
-  );
-};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
index 553e7439e..27110bbb3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
@@ -2,8 +2,11 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import { useEffect } from 'react';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useAddressField } from '@/object-record/record-field/meta-types/hooks/useAddressField';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
+import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import {
   AddressInput,
   AddressInputProps,
@@ -11,10 +14,6 @@ import {
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
-import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-
 const AddressValueSetterEffect = ({
   value,
 }: {
@@ -60,19 +59,23 @@ const AddressInputWithContext = ({
           ),
         }}
       >
-        <FieldContextProvider
-          fieldDefinition={{
-            fieldMetadataId: 'text',
-            label: 'Address',
-            type: FieldMetadataType.ADDRESS,
-            iconName: 'IconTag',
-            metadata: {
-              fieldName: 'Address',
-              placeHolder: 'Enter text',
-              objectMetadataNameSingular: 'person',
+        <FieldContext.Provider
+          value={{
+            fieldDefinition: {
+              fieldMetadataId: 'text',
+              label: 'Address',
+              type: FieldMetadataType.ADDRESS,
+              iconName: 'IconTag',
+              metadata: {
+                fieldName: 'Address',
+                placeHolder: 'Enter text',
+                objectMetadataNameSingular: 'person',
+              },
             },
+            recordId: recordId ?? '123',
+            hotkeyScope: 'hotkey-scope',
+            isLabelIdentifier: false,
           }}
-          recordId={recordId}
         >
           <AddressValueSetterEffect value={value} />
           <AddressInput
@@ -84,7 +87,7 @@ const AddressInputWithContext = ({
             onTab={onTab}
             onShiftTab={onShiftTab}
           />
-        </FieldContextProvider>
+        </FieldContext.Provider>
         <div data-testid="data-field-input-click-outside-div" />
       </RecordFieldComponentInstanceContext.Provider>
     </div>
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
index 18d6430b0..b7379db65 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
@@ -6,7 +6,7 @@ import { useSetRecoilState } from 'recoil';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { FieldMetadataType } from '~/generated/graphql';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import {
@@ -50,26 +50,30 @@ const BooleanFieldInputWithContext = ({
         ),
       }}
     >
-      <FieldContextProvider
-        fieldDefinition={{
-          defaultValue: false,
-          fieldMetadataId: 'boolean',
-          label: 'Boolean',
-          iconName: 'Icon123',
-          type: FieldMetadataType.BOOLEAN,
-          metadata: {
-            fieldName: 'Boolean',
-            objectMetadataNameSingular: 'person',
+      <FieldContext.Provider
+        value={{
+          fieldDefinition: {
+            defaultValue: false,
+            fieldMetadataId: 'boolean',
+            label: 'Boolean',
+            iconName: 'Icon123',
+            type: FieldMetadataType.BOOLEAN,
+            metadata: {
+              fieldName: 'Boolean',
+              objectMetadataNameSingular: 'person',
+            },
           },
+          recordId: recordId ?? '123',
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <BooleanFieldValueSetterEffect
           value={value}
           recordId={recordId ?? ''}
         />
         <BooleanFieldInput onSubmit={onSubmit} testId="boolean-field-input" />
-      </FieldContextProvider>
+      </FieldContext.Provider>
     </RecordFieldComponentInstanceContext.Provider>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
index 2eddc4e4e..39bd30a2e 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { FieldMetadataType } from '~/generated/graphql';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
@@ -77,19 +77,23 @@ const DateFieldInputWithContext = ({
         ),
       }}
     >
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'date',
-          defaultValue: null,
-          label: 'Date',
-          type: FieldMetadataType.DATE_TIME,
-          iconName: 'IconCalendarEvent',
-          metadata: {
-            fieldName: 'Date',
-            objectMetadataNameSingular: 'person',
+      <FieldContext.Provider
+        value={{
+          fieldDefinition: {
+            fieldMetadataId: 'date',
+            defaultValue: null,
+            label: 'Date',
+            type: FieldMetadataType.DATE_TIME,
+            iconName: 'IconCalendarEvent',
+            metadata: {
+              fieldName: 'Date',
+              objectMetadataNameSingular: 'person',
+            },
           },
+          recordId: '123',
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <StorybookFieldInputDropdownFocusIdSetterEffect />
         <DateFieldValueSetterEffect value={value} />
@@ -98,7 +102,7 @@ const DateFieldInputWithContext = ({
           onEnter={onEnter}
           onClickOutside={onClickOutside}
         />
-      </FieldContextProvider>
+      </FieldContext.Provider>
       <div data-testid="data-field-input-click-outside-div"></div>
     </RecordFieldComponentInstanceContext.Provider>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
index 3b546f6f5..034ffb678 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
@@ -6,7 +6,7 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 import { FieldMetadataType } from '~/generated/graphql';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
@@ -54,19 +54,23 @@ const NumberFieldInputWithContext = ({
         ),
       }}
     >
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'number',
-          label: 'Number',
-          iconName: 'Icon123',
-          type: FieldMetadataType.NUMBER,
-          metadata: {
-            fieldName: 'number',
-            placeHolder: 'Enter number',
-            objectMetadataNameSingular: 'person',
+      <FieldContext.Provider
+        value={{
+          fieldDefinition: {
+            fieldMetadataId: 'number',
+            label: 'Number',
+            iconName: 'Icon123',
+            type: FieldMetadataType.NUMBER,
+            metadata: {
+              fieldName: 'number',
+              placeHolder: 'Enter number',
+              objectMetadataNameSingular: 'person',
+            },
           },
+          recordId: '123',
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <StorybookFieldInputDropdownFocusIdSetterEffect />
         <NumberFieldValueSetterEffect value={value} />
@@ -77,7 +81,7 @@ const NumberFieldInputWithContext = ({
           onTab={onTab}
           onShiftTab={onShiftTab}
         />
-      </FieldContextProvider>
+      </FieldContext.Provider>
       <div data-testid="data-field-input-click-outside-div" />
     </RecordFieldComponentInstanceContext.Provider>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
index 8dece8cab..4816ce221 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
@@ -3,15 +3,15 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { useEffect } from 'react';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { FieldMetadataType } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
 import { FieldRatingValue } from '../../../../types/FieldMetadata';
 import { useRatingField } from '../../../hooks/useRatingField';
 import { RatingFieldInput, RatingFieldInputProps } from '../RatingFieldInput';
-import { isDefined } from 'twenty-shared/utils';
 
 const RatingFieldValueSetterEffect = ({
   value,
@@ -53,22 +53,26 @@ const RatingFieldInputWithContext = ({
         ),
       }}
     >
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'rating',
-          label: 'Rating',
-          type: FieldMetadataType.RATING,
-          iconName: 'Icon123',
-          metadata: {
-            fieldName: 'Rating',
-            objectMetadataNameSingular: 'person',
+      <FieldContext.Provider
+        value={{
+          fieldDefinition: {
+            fieldMetadataId: 'rating',
+            label: 'Rating',
+            iconName: 'IconStar',
+            type: FieldMetadataType.RATING,
+            metadata: {
+              fieldName: 'rating',
+              objectMetadataNameSingular: 'person',
+            },
           },
+          recordId: recordId ?? '123',
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <RatingFieldValueSetterEffect value={value} />
         <RatingFieldInput onSubmit={onSubmit} />
-      </FieldContextProvider>
+      </FieldContext.Provider>
     </RecordFieldComponentInstanceContext.Provider>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
index d6bacbf11..54f280c9a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
@@ -16,12 +16,12 @@ import {
 } from '~/testing/mock-data/users';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode';
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { RelationDefinitionType } from '~/generated-metadata/graphql';
 import { FieldMetadataType } from 'twenty-shared/types';
+import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 const RelationWorkspaceSetterEffect = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
@@ -89,13 +89,17 @@ const RelationManyFieldInputWithContext = () => {
           instanceId: 'relation-from-many-field-record-id-people',
         }}
       >
-        <FieldContextProvider
-          fieldDefinition={fieldDefinition}
-          recordId={'recordId'}
+        <FieldContext.Provider
+          value={{
+            fieldDefinition,
+            recordId: 'recordId',
+            hotkeyScope: 'hotkey-scope',
+            isLabelIdentifier: false,
+          }}
         >
           <RelationWorkspaceSetterEffect />
           <RelationFromManyFieldInput />
-        </FieldContextProvider>
+        </FieldContext.Provider>
       </RecordFieldComponentInstanceContext.Provider>
       <div data-testid="data-field-input-click-outside-div" />
     </div>
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
index ab3083ec7..4a7a985ee 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
@@ -5,9 +5,7 @@ import { useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { FieldMetadataType } from '~/generated/graphql';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -17,10 +15,12 @@ import {
   mockedWorkspaceMemberData,
 } from '~/testing/mock-data/users';
 
-import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { FieldMetadataType } from 'twenty-shared/types';
 import { getCanvasElementForDropdownTesting } from 'twenty-ui';
 import {
   RelationToOneFieldInput,
@@ -53,7 +53,7 @@ const RelationWorkspaceSetterEffect = () => {
 
 type RelationToOneFieldInputWithContextProps = RelationToOneFieldInputProps & {
   value: number;
-  recordId?: string;
+  recordId: string;
 };
 
 const RelationToOneFieldInputWithContext = ({
@@ -69,21 +69,26 @@ const RelationToOneFieldInputWithContext = ({
 
   return (
     <div>
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'relation',
-          label: 'Relation',
-          type: FieldMetadataType.RELATION,
-          iconName: 'IconLink',
-          metadata: {
-            fieldName: 'Relation',
-            relationObjectMetadataNamePlural: 'companies',
-            relationObjectMetadataNameSingular: CoreObjectNameSingular.Company,
-            objectMetadataNameSingular: 'person',
-            relationFieldMetadataId: '20202020-8c37-4163-ba06-1dada334ce3e',
+      <FieldContext.Provider
+        value={{
+          fieldDefinition: {
+            fieldMetadataId: 'relation',
+            label: 'Relation',
+            type: FieldMetadataType.RELATION,
+            iconName: 'IconLink',
+            metadata: {
+              fieldName: 'Relation',
+              relationObjectMetadataNamePlural: 'companies',
+              relationObjectMetadataNameSingular:
+                CoreObjectNameSingular.Company,
+              objectMetadataNameSingular: 'person',
+              relationFieldMetadataId: '20202020-8c37-4163-ba06-1dada334ce3e',
+            },
           },
+          recordId: recordId,
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <RecordFieldComponentInstanceContext.Provider
           value={{
@@ -93,7 +98,7 @@ const RelationToOneFieldInputWithContext = ({
           <RelationWorkspaceSetterEffect />
           <RelationToOneFieldInput onSubmit={onSubmit} onCancel={onCancel} />
         </RecordFieldComponentInstanceContext.Provider>
-      </FieldContextProvider>
+      </FieldContext.Provider>
       <div data-testid="data-field-input-click-outside-div" />
     </div>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
index ad1a19fe7..5f1444976 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
@@ -2,17 +2,16 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { useEffect } from 'react';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { FieldMetadataType } from '~/generated/graphql';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
+import { FieldMetadataType } from '~/generated/graphql';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { FieldContextProvider } from '../../../components/FieldContextProvider';
 import { useTextField } from '../../../hooks/useTextField';
 import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
-
 const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
   const { setFieldValue } = useTextField();
 
@@ -49,19 +48,22 @@ const TextFieldInputWithContext = ({
         instanceId: 'record-field-component-instance-id',
       }}
     >
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'text',
-          label: 'Text',
-          type: FieldMetadataType.TEXT,
-          iconName: 'IconTag',
-          metadata: {
-            fieldName: 'Text',
-            placeHolder: 'Enter text',
-            objectMetadataNameSingular: 'person',
+      <FieldContext.Provider
+        value={{
+          recordId: recordId ?? '123',
+          fieldDefinition: {
+            fieldMetadataId: 'text',
+            label: 'Text',
+            type: FieldMetadataType.TEXT,
+            iconName: 'IconText',
+            metadata: {
+              fieldName: 'text',
+              objectMetadataNameSingular: 'person',
+            },
           },
+          hotkeyScope: 'hotkey-scope',
+          isLabelIdentifier: false,
         }}
-        recordId={recordId}
       >
         <StorybookFieldInputDropdownFocusIdSetterEffect />
         <TextFieldValueSetterEffect value={value} />
@@ -72,7 +74,7 @@ const TextFieldInputWithContext = ({
           onTab={onTab}
           onShiftTab={onShiftTab}
         />
-      </FieldContextProvider>
+      </FieldContext.Provider>
       <div data-testid="data-field-input-click-outside-div" />
     </RecordFieldComponentInstanceContext.Provider>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
index ea246c820..47ff8ba3c 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
@@ -25,8 +25,8 @@ import styled from '@emotion/styled';
 import { useRef } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconPlus } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { IconPlus } from 'twenty-ui';
 
 export const StyledSelectableItem = styled(SelectableItem)`
   height: 100%;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
index 623462743..4f3b59703 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
@@ -28,8 +28,8 @@ import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/drop
 import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { useNavigate } from 'react-router-dom';
-import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { isDefined } from 'twenty-shared/utils';
+import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 export const DEFAULT_CELL_SCOPE: HotkeyScope = {
   scope: TableHotkeyScope.CellEditMode,
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
index f51ec738a..661bc491c 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
@@ -6,8 +6,6 @@ import { CardComponents } from '@/object-record/record-show/components/CardCompo
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
 import { RecordLayout } from '@/object-record/record-show/types/RecordLayout';
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
@@ -18,7 +16,6 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
 const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
@@ -110,10 +107,6 @@ export const ShowPageSubContainer = ({
     });
   };
 
-  const [recordFromStore] = useRecoilState<ObjectRecord | null>(
-    recordStoreFamilyState(targetableObject.id),
-  );
-
   const visibleTabs = tabs.filter((tab) => !tab.hide);
 
   const displaySummaryAndFields =
@@ -143,13 +136,13 @@ export const ShowPageSubContainer = ({
         <StyledContentContainer isInRightDrawer={isInRightDrawer}>
           {renderActiveTabContent()}
         </StyledContentContainer>
-        {isInRightDrawer && recordFromStore && (
+        {isInRightDrawer && (
           <RightDrawerFooter
             actions={[
               <RecordShowRightDrawerActionMenu />,
               <RecordShowRightDrawerOpenRecordButton
                 objectNameSingular={targetableObject.targetObjectNameSingular}
-                record={recordFromStore}
+                recordId={targetableObject.id}
               />,
             ]}
           />