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/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,