Fix relation from many notes (#11120)

Fixes https://github.com/twentyhq/twenty/issues/3415
2025-03-24 15:19:05 +01:00
parent e83e7b3b40
commit 6898a40ac3
17 changed files with 269 additions and 279 deletions
--- 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
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldContextProvider.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>
+  );
 };
--- 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
@ -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>
-  );
-};
--- 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>
--- 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>
  );
 };
--- 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>
  );
--- 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>
  );
--- 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>
  );
 };
--- 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>
--- 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>
  );
--- 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>
  );
--- 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%;
--- 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,
--- 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}
              />,
            ]}
          />