From 0553f58c5236a3ce0d2415a6edc68eaefa2f4b85 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 20 May 2025 13:35:28 +0200 Subject: [PATCH] Removed use-context-selector completely (#12139) This PR removes use-context-selector completely, so that any bug associated with state synchronization between recoil and use-context-selector disappears. There might be a slight performance decrease on the table, but since we have already improved the average performance per line by a lot, and that the performance bottleneck right now is the fetch more logic and the windowing solution we use, it is not relevant. Also the DX has become so hindered by this parallel state logic recently (think [cache invalidation](https://martinfowler.com/bliki/TwoHardThings.html)), that the main benefit we gain from this removal is the DX improvement. Fixes https://github.com/twentyhq/twenty/issues/12123 Fixes https://github.com/twentyhq/twenty/issues/12109 --- package.json | 1 - .../components/CalendarEventDetailsEffect.tsx | 5 +- .../main-object/components/EventFieldDiff.tsx | 47 +++-- .../components/EventFieldDiffValueEffect.tsx | 4 - .../CommandMenuCalendarEventPage.tsx | 10 +- .../components/CommandMenuRecordPage.tsx | 35 ++-- .../record-field/hooks/useClearField.ts | 7 +- .../record-field/hooks/useIsFieldEmpty.ts | 4 +- ...ationFromManyFieldDisplay.perf.stories.tsx | 102 ----------- .../meta-types/hooks/useChipFieldDisplay.ts | 10 +- .../components/RecordIndexContainer.tsx | 79 ++++----- .../hooks/useLoadRecordIndexBoardColumn.ts | 8 +- .../components/RecordShowEffect.tsx | 6 +- ...ordDetailRelationRecordsListItemEffect.tsx | 7 +- .../RecordFieldValueSelectorContext.tsx | 76 +------- .../perf/RecordTableCell.perf.stories.tsx | 154 ++++++++--------- .../hooks/internal/useSetRecordTableData.ts | 6 +- .../RecordTitleCellTextFieldDisplay.tsx | 7 +- .../SettingsDataModelFieldPreview.tsx | 5 +- .../SettingsDataModelSetFieldValueEffect.tsx | 17 +- .../SettingsDataModelSetRecordEffect.tsx | 13 +- .../components/tabs/ObjectSettings.tsx | 68 ++++---- .../components/SignInBackgroundMockPage.tsx | 9 +- .../pages/object-record/RecordShowPage.tsx | 89 +++++----- .../data-model/SettingsObjectFieldEdit.tsx | 5 +- .../SettingsObjectNewFieldConfigure.tsx | 163 +++++++++--------- .../SettingsObjectNewFieldSelect.tsx | 55 +++--- .../decorators/RecordTableDecorator.tsx | 53 +++--- .../testing/decorators/getFieldDecorator.tsx | 49 +++--- yarn.lock | 11 -- 30 files changed, 408 insertions(+), 697 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx diff --git a/package.json b/package.json index fb4070851..5bd43c8db 100644 --- a/package.json +++ b/package.json @@ -191,7 +191,6 @@ "tsup": "^8.2.4", "type-fest": "4.10.1", "typescript": "5.3.3", - "use-context-selector": "^2.0.0", "use-debounce": "^10.0.0", "uuid": "^9.0.0", "vite-tsconfig-paths": "^4.2.1", diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx index 2f8b72a85..970cfc412 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx @@ -1,5 +1,4 @@ import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { useEffect } from 'react'; @@ -11,7 +10,6 @@ export const CalendarEventDetailsEffect = ({ record, }: CalendarEventDetailsEffectProps) => { const { upsertRecords } = useUpsertRecordsInStore(); - const setRecordValueInContextSelector = useSetRecordValue(); useEffect(() => { if (!record) { @@ -19,8 +17,7 @@ export const CalendarEventDetailsEffect = ({ } upsertRecords([record]); - setRecordValueInContextSelector(record.id, record); - }, [record, upsertRecords, setRecordValueInContextSelector]); + }, [record, upsertRecords]); return <>; }; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx index b77cd3a75..c6166b926 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx @@ -5,7 +5,6 @@ import { EventFieldDiffValue } from '@/activities/timeline-activities/rows/main- import { EventFieldDiffValueEffect } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { Trans } from '@lingui/react/macro'; type EventFieldDiffProps = { @@ -54,29 +53,27 @@ export const EventFieldDiff = ({ isObjectEmpty(diffRecord)); return ( - - - → - {isUpdatedToEmpty ? ( - - Empty - - ) : ( - <> - - - - )} - - + + → + {isUpdatedToEmpty ? ( + + Empty + + ) : ( + <> + + + + )} + ); }; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx index 5ce564b53..70ea7484c 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx @@ -3,7 +3,6 @@ import { useSetRecoilState } from 'recoil'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { isDefined } from 'twenty-shared/utils'; @@ -21,7 +20,6 @@ export const EventFieldDiffValueEffect = ({ const setEntity = useSetRecoilState( recordStoreFamilyState(diffArtificialRecordStoreId), ); - const setRecordValue = useSetRecordValue(); useEffect(() => { if (!isDefined(diffRecord)) return; @@ -33,14 +31,12 @@ export const EventFieldDiffValueEffect = ({ }; setEntity(forgedObjectRecord); - setRecordValue(forgedObjectRecord.id, forgedObjectRecord); }, [ diffRecord, diffArtificialRecordStoreId, fieldMetadataItem.name, mainObjectMetadataItem.nameSingular, setEntity, - setRecordValue, ]); return <>; diff --git a/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx index d1208e4bd..2e8e21f84 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx @@ -4,10 +4,6 @@ import { FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE } from '@/activities/calend import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent'; import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; -import { - RecordFieldValueSelectorContextProvider, - useSetRecordValue, -} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -16,7 +12,6 @@ export const CommandMenuCalendarEventPage = () => { const viewableRecordId = useRecoilComponentValueV2( viewableRecordIdComponentState, ); - const setRecordValueInContextSelector = useSetRecordValue(); const { record: calendarEvent } = useFindOneRecord({ objectNameSingular: @@ -26,7 +21,6 @@ export const CommandMenuCalendarEventPage = () => { // TODO: this is not executed on sub-sequent runs, make sure that it is intended onCompleted: (record) => { upsertRecords([record]); - setRecordValueInContextSelector(record.id, record); }, }); @@ -35,9 +29,9 @@ export const CommandMenuCalendarEventPage = () => { } return ( - + <> - + ); }; diff --git a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx index 55b7c2920..2409b0f45 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx @@ -10,7 +10,6 @@ import { RecordShowContainer } from '@/object-record/record-show/components/Reco import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; 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'; @@ -72,24 +71,22 @@ export const CommandMenuRecordPage = () => { value={{ instanceId: commandMenuPageInstanceId }} > - - - - - - + + + + diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useClearField.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useClearField.ts index 5af88f00d..4f08c4cad 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useClearField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useClearField.ts @@ -2,7 +2,6 @@ import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; -import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { generateEmptyFieldValue } from '@/object-record/utils/generateEmptyFieldValue'; @@ -17,8 +16,6 @@ export const useClearField = () => { const [updateRecord] = useUpdateRecord(); - const setRecordFieldValue = useSetRecordFieldValue(); - const clearField = useRecoilCallback( ({ snapshot, set }) => () => { @@ -51,8 +48,6 @@ export const useClearField = () => { emptyFieldValue, ); - setRecordFieldValue(recordId, fieldName, emptyFieldValue); - updateRecord?.({ variables: { where: { id: recordId }, @@ -62,7 +57,7 @@ export const useClearField = () => { }, }); }, - [recordId, fieldDefinition, updateRecord, setRecordFieldValue], + [recordId, fieldDefinition, updateRecord], ); return clearField; diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts index f4213ee3e..c6b5dcce7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts @@ -1,10 +1,10 @@ import { useContext } from 'react'; import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty'; -import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; -import { FieldContext } from '../contexts/FieldContext'; +import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { isDefined } from 'twenty-shared/utils'; +import { FieldContext } from '../contexts/FieldContext'; export const useIsFieldEmpty = () => { const { recordId, fieldDefinition, overridenIsFieldEmpty } = diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx deleted file mode 100644 index f8a1455a1..000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { useEffect } from 'react'; -import { useSetRecoilState } from 'recoil'; - -import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; -import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay'; -import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; -import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { - RecordFieldValueSelectorContextProvider, - useSetRecordFieldValue, -} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; -import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator'; -import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; -import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; - -import { ComponentDecorator } from 'twenty-ui/testing'; -import { - fieldValue, - otherPersonMock, - relationFromManyFieldDisplayMock, -} from './relationFromManyFieldDisplayMock'; - -const RelationFieldValueSetterEffect = () => { - const setEntity = useSetRecoilState( - recordStoreFamilyState(relationFromManyFieldDisplayMock.recordId), - ); - - const setRelationEntity = useSetRecoilState( - recordStoreFamilyState(relationFromManyFieldDisplayMock.relationRecordId), - ); - - const setRecordFieldValue = useSetRecordFieldValue(); - - useEffect(() => { - setEntity(relationFromManyFieldDisplayMock.entityValue); - setRelationEntity(relationFromManyFieldDisplayMock.relationFieldValue); - - setRecordFieldValue( - relationFromManyFieldDisplayMock.entityValue.id, - 'company', - [relationFromManyFieldDisplayMock.entityValue], - ); - setRecordFieldValue(otherPersonMock.entityValue.id, 'company', [ - relationFromManyFieldDisplayMock.entityValue, - ]); - setRecordFieldValue( - relationFromManyFieldDisplayMock.relationFieldValue.id, - 'company', - relationFromManyFieldDisplayMock.relationFieldValue, - ); - }, [setEntity, setRelationEntity, setRecordFieldValue]); - - return null; -}; - -const meta: Meta = { - title: 'UI/Data/Field/Display/RelationFromManyFieldDisplay', - decorators: [ - MemoryRouterDecorator, - ChipGeneratorsDecorator, - (Story) => ( - - , - isReadOnly: false, - }} - > - - - - - ), - ComponentDecorator, - ], - component: RelationFromManyFieldDisplay, - argTypes: { value: { control: 'date' } }, - args: { fieldValue: fieldValue }, - parameters: { - chromatic: { disableSnapshot: true }, - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; - -// TODO: optimize this component once we have morph many -export const Performance = getProfilingStory({ - componentName: 'RelationFromManyFieldDisplay', - averageThresholdInMs: 1, - numberOfRuns: 20, - numberOfTestsPerRun: 100, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts index b001b5322..d6a8df62b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts @@ -1,13 +1,13 @@ -import { isNonEmptyString } from '@sniptt/guards'; -import { useContext } from 'react'; - import { PreComputedChipGeneratorsContext } from '@/object-metadata/contexts/PreComputedChipGeneratorsContext'; import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName'; import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber'; import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText'; -import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; +import { isNonEmptyString } from '@sniptt/guards'; +import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; import { isFieldActor } from '@/object-record/record-field/types/guards/isFieldActor'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { isDefined } from 'twenty-shared/utils'; import { FieldContext } from '../../contexts/FieldContext'; @@ -38,7 +38,7 @@ export const useChipFieldDisplay = () => { ? fieldDefinition.metadata.objectMetadataNameSingular : undefined; - const recordValue = useRecordValue(recordId); + const recordValue = useRecoilValue(recordStoreFamilyState(recordId)); if (!isNonEmptyString(objectNameSingular)) { throw new Error('Object metadata name singular is not a non-empty string'); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 05aad68c6..e5dd2ce69 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -11,7 +11,6 @@ import { recordIndexViewTypeState } from '@/object-record/record-index/states/re import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; import { RecordIndexFiltersToContextStoreEffect } from '@/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect'; @@ -48,48 +47,46 @@ export const RecordIndexContainer = () => { <> - - - - } - /> - + + } + /> + + + + {recordIndexViewType === ViewType.Table && ( + <> + - - - {recordIndexViewType === ViewType.Table && ( - <> - - - - )} - {recordIndexViewType === ViewType.Kanban && ( - - - - - - )} - + + + )} + {recordIndexViewType === ViewType.Kanban && ( + + + + + + )} ); diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts index ae1a89081..659e19ba5 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts @@ -14,7 +14,7 @@ import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hook import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; + import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isDefined } from 'twenty-shared/utils'; @@ -32,7 +32,6 @@ export const useLoadRecordIndexBoardColumn = ({ recordBoardId, columnId, }: UseLoadRecordIndexBoardProps) => { - const setRecordValueInContextSelector = useSetRecordValue(); const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular, }); @@ -102,10 +101,7 @@ export const useLoadRecordIndexBoardColumn = ({ useEffect(() => { upsertRecordsInStore(records); - for (const record of records) { - setRecordValueInContextSelector(record.id, record); - } - }, [records, upsertRecordsInStore, setRecordValueInContextSelector]); + }, [records, upsertRecordsInStore]); return { records, diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowEffect.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowEffect.tsx index 291c375b4..036882db3 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowEffect.tsx @@ -2,7 +2,6 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { buildFindOneRecordForShowPageOperationSignature } from '@/object-record/record-show/graphql/operations/factories/findOneRecordForShowPageOperationSignatureFactory'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useEffect } from 'react'; @@ -19,7 +18,6 @@ export const RecordShowEffect = ({ }: RecordShowEffectProps) => { const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular }); const { objectMetadataItems } = useObjectMetadataItems(); - const setRecordValueInContextSelector = useSetRecordValue(); const FIND_ONE_RECORD_FOR_SHOW_PAGE_OPERATION_SIGNATURE = buildFindOneRecordForShowPageOperationSignature({ @@ -44,10 +42,8 @@ export const RecordShowEffect = ({ if (JSON.stringify(previousRecordValue) !== JSON.stringify(newRecord)) { set(recordStoreFamilyState(recordId), newRecord); } - - setRecordValueInContextSelector(recordId, newRecord); }, - [recordId, setRecordValueInContextSelector], + [recordId], ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItemEffect.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItemEffect.tsx index 01451037b..35d01fda1 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItemEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItemEffect.tsx @@ -3,7 +3,7 @@ import { useContext, useEffect } from 'react'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; + import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { isDefined } from 'twenty-shared/utils'; @@ -14,8 +14,6 @@ type RecordDetailRelationRecordsListItemEffectProps = { export const RecordDetailRelationRecordsListItemEffect = ({ relationRecordId, }: RecordDetailRelationRecordsListItemEffectProps) => { - const setRecordValueInContextSelector = useSetRecordValue(); - const { fieldDefinition } = useContext(FieldContext); const { relationObjectMetadataNameSingular } = @@ -31,9 +29,8 @@ export const RecordDetailRelationRecordsListItemEffect = ({ useEffect(() => { if (isDefined(record)) { upsertRecords([record]); - setRecordValueInContextSelector(record.id, record); } - }, [record, upsertRecords, setRecordValueInContextSelector]); + }, [record, upsertRecords]); return null; }; diff --git a/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx b/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx index 1a6bc529a..5fed46cb3 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx @@ -1,78 +1,16 @@ -import { Dispatch, SetStateAction, useState } from 'react'; -import { createContext, useContextSelector } from 'use-context-selector'; - -import { ObjectRecord } from '@/object-record/types/ObjectRecord'; - -export type RecordFieldValue = { - [recordId: string]: { - [fieldName: string]: any; - }; -}; - -export const RecordFieldValueSelectorContext = createContext< - [RecordFieldValue, Dispatch>] ->([{}, () => {}]); - -export const useSetRecordValue = () => { - const setTableValue = useContextSelector( - RecordFieldValueSelectorContext, - (value) => value[1], - ); - - return (recordId: string, newRecord: any) => { - setTableValue((currentTable) => ({ - ...currentTable, - [recordId]: newRecord, - })); - }; -}; - -export const useRecordValue = (recordId: string) => { - const tableValue = useContextSelector( - RecordFieldValueSelectorContext, - (value) => value[0]?.[recordId], - ); - - return tableValue as ObjectRecord | undefined; -}; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { useRecoilValue } from 'recoil'; export const useRecordFieldValue = ( recordId: string, fieldName: string, ) => { - const recordFieldValue = useContextSelector( - RecordFieldValueSelectorContext, - (value) => value[0]?.[recordId]?.[fieldName], + const recordFieldValue = useRecoilValue( + recordStoreFamilySelector({ + recordId, + fieldName, + }), ); return recordFieldValue as T | undefined; }; - -export const useSetRecordFieldValue = () => { - const setTableValue = useContextSelector( - RecordFieldValueSelectorContext, - (value) => value[1], - ); - - return (recordId: string, fieldName: string, newValue: any) => { - setTableValue((currentTable) => ({ - ...currentTable, - [recordId]: { - ...currentTable[recordId], - [fieldName]: newValue, - }, - })); - }; -}; - -export const RecordFieldValueSelectorContextProvider = ({ - children, -}: { - children: any; -}) => ( - ({})} - > - {children} - -); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx index 5fd5335a7..ab0695314 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx @@ -6,10 +6,6 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; -import { - RecordFieldValueSelectorContextProvider, - useSetRecordValue, -} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; @@ -36,22 +32,14 @@ const RelationFieldValueSetterEffect = () => { recordStoreFamilyState(mockPerformance.relationRecordId), ); - const setRecordValue = useSetRecordValue(); - const [, setObjectMetadataItems] = useRecoilState(objectMetadataItemsState); useEffect(() => { setEntity(mockPerformance.entityValue); setRelationEntity(mockPerformance.relationFieldValue); - setRecordValue(mockPerformance.entityValue.id, mockPerformance.entityValue); - setRecordValue( - mockPerformance.relationFieldValue.id, - mockPerformance.relationFieldValue, - ); - setObjectMetadataItems(generatedMockObjectMetadataItems); - }, [setEntity, setRelationEntity, setRecordValue, setObjectMetadataItems]); + }, [setEntity, setRelationEntity, setObjectMetadataItems]); return null; }; @@ -63,95 +51,93 @@ const meta: Meta = { ChipGeneratorsDecorator, (Story) => { return ( - - '', + onIndexRecordsLoaded: () => {}, + objectNamePlural: 'companies', + objectNameSingular: 'company', + objectMetadataItem: mockPerformance.objectMetadataItem as any, + recordIndexId: 'recordIndexId', + }} + > + '', - onIndexRecordsLoaded: () => {}, - objectNamePlural: 'companies', - objectNameSingular: 'company', + recordTableId: 'recordTableId', + viewBarId: mockPerformance.recordId, objectMetadataItem: mockPerformance.objectMetadataItem as any, - recordIndexId: 'recordIndexId', + visibleTableColumns: mockPerformance.visibleTableColumns as any, + objectNameSingular: + mockPerformance.objectMetadataItem.nameSingular, }} > - {}} > - {}} + {}, + onMoveFocus: () => {}, + onCloseTableCell: () => {}, + onMoveHoverToCurrentCell: () => {}, + onActionMenuDropdownOpened: () => {}, + onCellMouseEnter: () => {}, + }} > - {}, - onMoveFocus: () => {}, - onCloseTableCell: () => {}, - onMoveHoverToCurrentCell: () => {}, - onActionMenuDropdownOpened: () => {}, - onCellMouseEnter: () => {}, + objectNameSingular: + mockPerformance.entityValue.__typename.toLocaleLowerCase(), + recordId: mockPerformance.recordId, + rowIndex: 0, + pathToShowPage: + getBasePathToShowPage({ + objectNameSingular: + mockPerformance.entityValue.__typename.toLocaleLowerCase(), + }) + mockPerformance.recordId, + isSelected: false, + inView: true, }} > - - - - - - - - - - - -
- - - - - - - - - + + + + + + + +
+ + + + + + + + ); }, ComponentDecorator, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index 4c4d80991..bf969533d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; + import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive'; import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; @@ -27,8 +27,6 @@ export const useSetRecordTableData = ({ recordTableId, onEntityCountChange, }: useSetRecordTableDataProps) => { - const setRecordValueInContextSelector = useSetRecordValue(); - const recordIndexRecordIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( recordIndexRecordIdsByGroupComponentFamilyState, @@ -82,7 +80,6 @@ export const useSetRecordTableData = ({ }; set(recordStoreFamilyState(record.id), newRecord); - setRecordValueInContextSelector(record.id, newRecord); } } @@ -130,7 +127,6 @@ export const useSetRecordTableData = ({ setRecordTableHoverPosition, onEntityCountChange, isRowSelectedFamilyState, - setRecordValueInContextSelector, ], ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index 31fd1db04..25a7a0d87 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx @@ -1,12 +1,13 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey'; import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; -import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { Theme, withTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledDiv = styled.div` @@ -33,7 +34,9 @@ const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>` export const RecordTitleCellSingleTextDisplayMode = () => { const { recordId, fieldDefinition } = useContext(FieldContext); - const recordValue = useRecordValue(recordId); + + const recordValue = useRecoilValue(recordStoreFamilyState(recordId)); + const isEmpty = recordValue?.[fieldDefinition.metadata.fieldName]?.trim() === ''; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index 0f08e83ae..45d2b6056 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -112,10 +112,7 @@ export const SettingsDataModelFieldPreview = ({ }} > {isDefined(previewRecord) ? ( - + ) : ( { if ( @@ -37,23 +35,10 @@ export const SettingsDataModelSetFieldValueEffect = ({ !!upsertedPreviewRecord[fieldName] ) { setFieldValue(upsertedPreviewRecord[fieldName]); - setRecordFieldValue( - recordId, - fieldName, - upsertedPreviewRecord[fieldName], - ); } else { setFieldValue(value); - setRecordFieldValue(recordId, fieldName, value); } - }, [ - value, - setFieldValue, - setRecordFieldValue, - recordId, - fieldName, - upsertedPreviewRecord, - ]); + }, [value, setFieldValue, recordId, fieldName, upsertedPreviewRecord]); return null; }; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx index 331f06e19..800c00f45 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx @@ -1,4 +1,3 @@ -import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { settingsPreviewRecordIdState } from '@/settings/data-model/fields/preview/states/settingsPreviewRecordIdState'; @@ -7,15 +6,12 @@ import { useSetRecoilState } from 'recoil'; type SettingsDataModelSetPreviewRecordEffectProps = { record: ObjectRecord; - fieldName: string; }; export const SettingsDataModelSetPreviewRecordEffect = ({ record, - fieldName, }: SettingsDataModelSetPreviewRecordEffectProps) => { const { upsertRecords: upsertRecordsInStore } = useUpsertRecordsInStore(); - const setRecordFieldValue = useSetRecordFieldValue(); const setSettingsPreviewRecordId = useSetRecoilState( settingsPreviewRecordIdState, @@ -23,15 +19,8 @@ export const SettingsDataModelSetPreviewRecordEffect = ({ useEffect(() => { upsertRecordsInStore([record]); - setRecordFieldValue(record.id, fieldName, record[fieldName]); setSettingsPreviewRecordId(record.id); - }, [ - record, - upsertRecordsInStore, - setRecordFieldValue, - fieldName, - setSettingsPreviewRecordId, - ]); + }, [record, upsertRecordsInStore, setSettingsPreviewRecordId]); return null; }; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx index 64f6eae00..69a83af48 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx @@ -1,16 +1,15 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SettingsUpdateDataModelObjectAboutForm } from '@/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm'; import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard'; import { SettingsPath } from '@/types/SettingsPath'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; -import { useNavigateSettings } from '~/hooks/useNavigateSettings'; -import { Button } from 'twenty-ui/input'; import { H2Title, IconArchive } from 'twenty-ui/display'; +import { Button } from 'twenty-ui/input'; import { Section } from 'twenty-ui/layout'; +import { useNavigateSettings } from '~/hooks/useNavigateSettings'; type ObjectSettingsProps = { objectMetadataItem: ObjectMetadataItem; @@ -39,43 +38,38 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => { }; return ( - - - + + + + + + +
- - - -
- - -
- - -
- -
- - - +
+ + +
+ +
+ + ); }; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx index 10cbd744f..8fbdc623d 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SignInBackgroundMockContainer } from '@/sign-in-background-mock/components/SignInBackgroundMockContainer'; import { PageBody } from '@/ui/layout/page/components/PageBody'; import { PageContainer } from '@/ui/layout/page/components/PageContainer'; @@ -18,11 +17,9 @@ export const SignInBackgroundMockPage = () => { - - - - - + + + ); diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx index 8f2402c1e..6f521617a 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx @@ -11,7 +11,6 @@ import { RecordShowContainer } from '@/object-record/record-show/components/Reco import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton'; import { PageBody } from '@/ui/layout/page/components/PageBody'; import { PageContainer } from '@/ui/layout/page/components/PageContainer'; @@ -30,57 +29,55 @@ export const RecordShowPage = () => { ); return ( - - + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + ); }; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index 28b9fbb9e..efd77b068 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -12,7 +12,6 @@ import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMe import { useUpdateOneFieldMetadataItem } from '@/object-metadata/hooks/useUpdateOneFieldMetadataItem'; import { formatFieldMetadataItemInput } from '@/object-metadata/utils/formatFieldMetadataItemInput'; import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength'; @@ -161,7 +160,7 @@ export const SettingsObjectFieldEdit = () => { }; return ( - + <> {/* eslint-disable-next-line react/jsx-props-no-spreading */} { - + ); }; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx index 1b49a9291..0fbcdabeb 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx @@ -3,7 +3,6 @@ import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataIt import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown'; @@ -27,6 +26,8 @@ import pick from 'lodash.pick'; import { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useParams, useSearchParams } from 'react-router-dom'; +import { H2Title } from 'twenty-ui/display'; +import { Section } from 'twenty-ui/layout'; import { z } from 'zod'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { useNavigateApp } from '~/hooks/useNavigateApp'; @@ -35,8 +36,6 @@ import { DEFAULT_ICONS_BY_FIELD_TYPE } from '~/pages/settings/data-model/constan import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; -import { H2Title } from 'twenty-ui/display'; -import { Section } from 'twenty-ui/layout'; type SettingsDataModelNewFieldFormValues = z.infer< ReturnType @@ -200,87 +199,85 @@ export const SettingsObjectNewFieldConfigure = () => { if (!activeObjectMetadataItem) return null; return ( - - - + }, - ]} - actionButton={ - - navigate( - SettingsPath.ObjectNewFieldSelect, - { - objectNamePlural, - }, - { - fieldType, - }, - ) - } - onSave={formConfig.handleSubmit(handleSave)} + { children: }, + ]} + actionButton={ + + navigate( + SettingsPath.ObjectNewFieldSelect, + { + objectNamePlural, + }, + { + fieldType, + }, + ) + } + onSave={formConfig.handleSubmit(handleSave)} + /> + } + > + +
+ - } - > - -
- - -
-
- - -
-
- - -
- - - - + +
+
+ + +
+
+ + +
+ + + ); }; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx index 156795724..884918113 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx @@ -1,5 +1,4 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown'; import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs'; @@ -10,15 +9,15 @@ import { AppPath } from '@/types/AppPath'; import { SettingsPath } from '@/types/SettingsPath'; import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { zodResolver } from '@hookform/resolvers/zod'; +import { t } from '@lingui/core/macro'; import { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useParams } from 'react-router-dom'; +import { isDefined } from 'twenty-shared/utils'; import { z } from 'zod'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { useNavigateApp } from '~/hooks/useNavigateApp'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; -import { t } from '@lingui/core/macro'; -import { isDefined } from 'twenty-shared/utils'; export const settingsDataModelFieldTypeFormSchema = z.object({ type: z.enum( @@ -64,32 +63,30 @@ export const SettingsObjectNewFieldSelect = () => { if (!activeObjectMetadataItem) return null; return ( - - + }, + ]} > - }, - ]} - > - - - - - - + + + + + ); }; diff --git a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx index 0a93ae923..037898ef5 100644 --- a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx @@ -10,7 +10,6 @@ import { RecordFiltersComponentInstanceContext } from '@/object-record/record-fi import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { RecordTableBodyContextProvider } from '@/object-record/record-table/contexts/RecordTableBodyContext'; import { RecordTableContextProvider } from '@/object-record/record-table/contexts/RecordTableContext'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; @@ -126,41 +125,39 @@ export const RecordTableDecorator: Decorator = (Story, context) => { ); return ( - - {} }} + {} }} + > + - - - - - + - - - - - - - - - - - + + + + + + + + ); }; diff --git a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx index 96ec4305b..064210634 100644 --- a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx @@ -6,10 +6,6 @@ import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/uti import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; -import { - RecordFieldValueSelectorContextProvider, - useSetRecordValue, -} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { isDefined } from 'twenty-shared/utils'; @@ -27,15 +23,12 @@ const RecordMockSetterEffect = ({ people: ObjectRecord[]; tasks: ObjectRecord[]; }) => { - const setRecordValue = useSetRecordValue(); - const setRecordInStores = useRecoilCallback( ({ set }) => (record: ObjectRecord) => { set(recordStoreFamilyState(record.id), record); - setRecordValue(record.id, record); }, - [setRecordValue], + [], ); useEffect(() => { @@ -130,27 +123,25 @@ export const getFieldDecorator = instanceId: 'record-field-component-instance-id', }} > - - - - - - + + + + ); }; diff --git a/yarn.lock b/yarn.lock index 3b4ffef3a..739ad78b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -55579,7 +55579,6 @@ __metadata: tsx: "npm:^4.17.0" type-fest: "npm:4.10.1" typescript: "npm:5.3.3" - use-context-selector: "npm:^2.0.0" use-debounce: "npm:^10.0.0" uuid: "npm:^9.0.0" vite: "npm:^5.4.0" @@ -56763,16 +56762,6 @@ __metadata: languageName: node linkType: hard -"use-context-selector@npm:^2.0.0": - version: 2.0.0 - resolution: "use-context-selector@npm:2.0.0" - peerDependencies: - react: ">=18.0.0" - scheduler: ">=0.19.0" - checksum: 10c0/4eb6054ab8996ae8b3f87f9d102e576066e5a8b9db5db2c891128ae920bd64bcdcb4e93a13bc99658ef16280929a8331fc8ac45177f4acd716c425b1bc31135a - languageName: node - linkType: hard - "use-debounce@npm:^10.0.0": version: 10.0.2 resolution: "use-debounce@npm:10.0.2"