Jotai 13 (#18178)
## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI, Activities, Settings, SSE & Remaining Modules ### Summary This is the 13th PR in the [14-PR migration series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md) to replace Recoil with Jotai as the state management library in `twenty-front`. This PR migrates the remaining consumer code across all modules — updating ~1,076 files with ~10k insertions/deletions. ### What changed **New Jotai infrastructure (13 new files):** - `createComponentSelectorV2` and `createComponentFamilySelectorV2` — instance-scoped derived atoms, replacing Recoil's component selectors - 6 new hooks: `useRecoilComponentSelectorValueV2`, `useRecoilComponentFamilySelectorValueV2`, `useRecoilComponentSelectorCallbackStateV2`, `useRecoilComponentFamilySelectorCallbackStateV2`, `useRecoilComponentStateCallbackStateV2`, `useRecoilComponentFamilyStateCallbackStateV2` - New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`, `SelectorCallbacksV2` - Extended `buildGetHelper` to support the new selector patterns **State definition migrations:** - `createState()` → `createStateV2()` (Jotai `atom()`) - `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with family cache) - Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2 utilities **Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):** - `useRecoilValue` → `useRecoilValueV2` - `useRecoilState` → `useRecoilStateV2` - `useSetRecoilState` → `useSetRecoilStateV2` - `useRecoilCallback` → `useCallback` + `jotaiStore.get/set` - `useRecoilComponentValue` → `useRecoilComponentValueV2` - `useSetRecoilComponentState` → `useSetRecoilComponentStateV2` - `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` / `useFamilySelectorValueV2` - ~397 direct `import from 'recoil'` removed **Deleted files (9 files):** - `dateLocaleState.ts` — consolidated - `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original - `isCommandMenuOpenedState.ts` — removed - `filesFieldUploadState.ts` — replaced by V2 - `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`, `recordStoreRecordsSelector.ts` — replaced by V2 equivalents - `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook - `settingsRoleIdsStateV2.ts` — consolidated **Modules migrated:** - Workflow (diagram, steps, variables, filters) - Page Layout (widgets, fields, graph, tabs) - AI (chat, agents, browsing context) - Activities (rich text editor, targets, timeline) - Action Menu (single/multiple record actions) - Command Menu (navigation, history, pages, workflow) - Context Store - Record Board, Record Table, Record Calendar, Record Index - Record Field, Record Filter, Record Sort, Record Group - Record Drag, Record Picker, Record Store - Views (view bar, view picker, filters, sorts) - Settings (roles, permissions, SSO, security, data model, developers, domains) - SSE (event streams, subscriptions) - Spreadsheet Import - Auth, Favorites, Front Components, Information Banner
This commit is contained in:
Charles Bochet
@@ -1,4 +1,4 @@
|
||||
import { type PropsWithChildren, useEffect, useState } from 'react';
|
||||
import { type PropsWithChildren, useContext, useEffect, useState } from 'react';
|
||||
|
||||
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
|
||||
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
|
||||
@@ -6,6 +6,8 @@ import { contextStoreCurrentViewTypeComponentState } from '@/context-store/state
|
||||
import { contextStoreFilterGroupsComponentState } from '@/context-store/states/contextStoreFilterGroupsComponentState';
|
||||
import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
|
||||
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
|
||||
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
|
||||
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
|
||||
import {
|
||||
type ContextStoreTargetedRecordsRule,
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
@@ -14,7 +16,7 @@ import { type ContextStoreViewType } from '@/context-store/types/ContextStoreVie
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
|
||||
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
|
||||
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
|
||||
|
||||
export type JestContextStoreSetterMocks = {
|
||||
contextStoreTargetedRecordsRule?: ContextStoreTargetedRecordsRule;
|
||||
@@ -41,32 +43,47 @@ export const JestContextStoreSetter = ({
|
||||
contextStoreCurrentViewType,
|
||||
children,
|
||||
}: JestContextStoreSetterProps) => {
|
||||
const setContextStoreTargetedRecordsRule = useSetRecoilComponentState(
|
||||
const contextStoreInstanceContext = useContext(
|
||||
ContextStoreComponentInstanceContext,
|
||||
);
|
||||
const instanceId =
|
||||
contextStoreInstanceContext?.instanceId ?? MAIN_CONTEXT_STORE_INSTANCE_ID;
|
||||
|
||||
const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setContextStoreCurrentObjectMetadataItemId = useSetRecoilComponentState(
|
||||
contextStoreCurrentObjectMetadataItemIdComponentState,
|
||||
);
|
||||
const setContextStoreCurrentObjectMetadataItemId =
|
||||
useSetRecoilComponentStateV2(
|
||||
contextStoreCurrentObjectMetadataItemIdComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentState(
|
||||
const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentStateV2(
|
||||
contextStoreNumberOfSelectedRecordsComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setcontextStoreFiltersComponentState = useSetRecoilComponentState(
|
||||
const setContextStoreFiltersComponentState = useSetRecoilComponentStateV2(
|
||||
contextStoreFiltersComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setContextStoreFilterGroupsComponentState = useSetRecoilComponentState(
|
||||
contextStoreFilterGroupsComponentState,
|
||||
);
|
||||
const setContextStoreFilterGroupsComponentState =
|
||||
useSetRecoilComponentStateV2(
|
||||
contextStoreFilterGroupsComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setContextStoreCurrentViewId = useSetRecoilComponentState(
|
||||
const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
|
||||
contextStoreCurrentViewIdComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const setContextStoreCurrentViewType = useSetRecoilComponentState(
|
||||
const setContextStoreCurrentViewType = useSetRecoilComponentStateV2(
|
||||
contextStoreCurrentViewTypeComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
@@ -81,7 +98,7 @@ export const JestContextStoreSetter = ({
|
||||
setContextStoreTargetedRecordsRule(contextStoreTargetedRecordsRule);
|
||||
setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
|
||||
setContextStoreNumberOfSelectedRecords(contextStoreNumberOfSelectedRecords);
|
||||
setcontextStoreFiltersComponentState(contextStoreFilters);
|
||||
setContextStoreFiltersComponentState(contextStoreFilters);
|
||||
setContextStoreFilterGroupsComponentState(contextStoreFilterGroups);
|
||||
setContextStoreCurrentViewType(contextStoreCurrentViewType ?? null);
|
||||
setIsLoaded(true);
|
||||
@@ -92,7 +109,7 @@ export const JestContextStoreSetter = ({
|
||||
contextStoreCurrentObjectMetadataId,
|
||||
setContextStoreNumberOfSelectedRecords,
|
||||
contextStoreNumberOfSelectedRecords,
|
||||
setcontextStoreFiltersComponentState,
|
||||
setContextStoreFiltersComponentState,
|
||||
contextStoreFilters,
|
||||
objectMetadataItem,
|
||||
setContextStoreCurrentViewId,
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
||||
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
|
||||
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
|
||||
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
|
||||
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
|
||||
import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record-index/hooks/useRecordIndexFieldMetadataDerivedStates';
|
||||
import { type PropsWithChildren } from 'react';
|
||||
|
||||
const RECORD_INDEX_ID = 'recordIndexId';
|
||||
|
||||
type JestRecordIndexContextProviderWrapperProps = {
|
||||
objectMetadataItem: ObjectMetadataItem;
|
||||
} & PropsWithChildren;
|
||||
@@ -19,23 +24,35 @@ export const JestRecordIndexContextProviderWrapper = ({
|
||||
} = useRecordIndexFieldMetadataDerivedStates(objectMetadataItem);
|
||||
|
||||
return (
|
||||
<RecordIndexContextProvider
|
||||
value={{
|
||||
objectPermissionsByObjectMetadataId: {},
|
||||
indexIdentifierUrl: () => 'indexIdentifierUrl',
|
||||
onIndexRecordsLoaded: () => {},
|
||||
objectNamePlural: objectMetadataItem.namePlural,
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
objectMetadataItem: objectMetadataItem,
|
||||
recordIndexId: 'recordIndexId',
|
||||
viewBarInstanceId: 'recordIndexId',
|
||||
labelIdentifierFieldMetadataItem,
|
||||
recordFieldByFieldMetadataItemId,
|
||||
fieldDefinitionByFieldMetadataItemId,
|
||||
fieldMetadataItemByFieldMetadataItemId,
|
||||
}}
|
||||
<RecordFilterGroupsComponentInstanceContext.Provider
|
||||
value={{ instanceId: RECORD_INDEX_ID }}
|
||||
>
|
||||
{children}
|
||||
</RecordIndexContextProvider>
|
||||
<RecordFiltersComponentInstanceContext.Provider
|
||||
value={{ instanceId: RECORD_INDEX_ID }}
|
||||
>
|
||||
<RecordSortsComponentInstanceContext.Provider
|
||||
value={{ instanceId: RECORD_INDEX_ID }}
|
||||
>
|
||||
<RecordIndexContextProvider
|
||||
value={{
|
||||
objectPermissionsByObjectMetadataId: {},
|
||||
indexIdentifierUrl: () => 'indexIdentifierUrl',
|
||||
onIndexRecordsLoaded: () => {},
|
||||
objectNamePlural: objectMetadataItem.namePlural,
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
objectMetadataItem: objectMetadataItem,
|
||||
recordIndexId: RECORD_INDEX_ID,
|
||||
viewBarInstanceId: RECORD_INDEX_ID,
|
||||
labelIdentifierFieldMetadataItem,
|
||||
recordFieldByFieldMetadataItemId,
|
||||
fieldDefinitionByFieldMetadataItemId,
|
||||
fieldMetadataItemByFieldMetadataItemId,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RecordIndexContextProvider>
|
||||
</RecordSortsComponentInstanceContext.Provider>
|
||||
</RecordFiltersComponentInstanceContext.Provider>
|
||||
</RecordFilterGroupsComponentInstanceContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
+4
@@ -2,6 +2,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
|
||||
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
|
||||
import { type MockedResponse } from '@apollo/client/testing';
|
||||
import { type ReactNode } from 'react';
|
||||
import type { Store } from 'jotai/vanilla/store';
|
||||
import { type MutableSnapshot } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import {
|
||||
@@ -17,12 +18,14 @@ export type GetJestMetadataAndApolloMocksAndActionMenuWrapperProps = {
|
||||
| readonly MockedResponse<Record<string, any>, Record<string, any>>[]
|
||||
| undefined;
|
||||
onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
|
||||
onInitializeJotaiStore?: (store: Store) => void;
|
||||
componentInstanceId: string;
|
||||
} & JestContextStoreSetterMocks;
|
||||
|
||||
export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
|
||||
apolloMocks,
|
||||
onInitializeRecoilSnapshot,
|
||||
onInitializeJotaiStore,
|
||||
contextStoreTargetedRecordsRule,
|
||||
contextStoreCurrentViewId,
|
||||
contextStoreCurrentViewType,
|
||||
@@ -34,6 +37,7 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
|
||||
const Wrapper = getJestMetadataAndApolloMocksWrapper({
|
||||
apolloMocks,
|
||||
onInitializeRecoilSnapshot,
|
||||
onInitializeJotaiStore,
|
||||
});
|
||||
|
||||
const mockObjectMetadataItem = getMockObjectMetadataItemOrThrow(
|
||||
|
||||
@@ -18,6 +18,7 @@ export const getJestMetadataAndApolloMocksWrapper = ({
|
||||
apolloMocks,
|
||||
cache,
|
||||
onInitializeRecoilSnapshot,
|
||||
onInitializeJotaiStore,
|
||||
objectMetadataItems,
|
||||
}: {
|
||||
cache?: InMemoryCache;
|
||||
@@ -25,8 +26,11 @@ export const getJestMetadataAndApolloMocksWrapper = ({
|
||||
| readonly MockedResponse<Record<string, any>, Record<string, any>>[]
|
||||
| undefined;
|
||||
onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
|
||||
onInitializeJotaiStore?: (store: typeof jotaiStore) => void;
|
||||
objectMetadataItems?: ObjectMetadataItem[];
|
||||
}) => {
|
||||
onInitializeJotaiStore?.(jotaiStore);
|
||||
|
||||
return ({ children }: { children: ReactNode }) => (
|
||||
<JotaiProvider store={jotaiStore}>
|
||||
<RecoilRoot initializeState={onInitializeRecoilSnapshot}>
|
||||
|
||||
Reference in New Issue
Block a user