houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jotai 13 (#18178)

Browse Source 
## 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
2026-02-24 17:37:01 +01:00
committed by GitHub
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ import { getViewType } from '@/context-store/utils/getViewType';
import { useSetLastVisitedObjectMetadataId } from '@/navigation/hooks/useSetLastVisitedObjectMetadataId';
import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/hooks/useSetLastVisitedViewForObjectMetadataNamePlural';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
import { useEffect } from 'react';
@@ -33,13 +33,13 @@ export const MainContextStoreProviderEffect = ({
useSetLastVisitedObjectMetadataId();
const [contextStoreCurrentViewId, setContextStoreCurrentViewId] =
useRecoilComponentState(
useRecoilComponentStateV2(
contextStoreCurrentViewIdComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
const [contextStoreCurrentViewType, setContextStoreCurrentViewType] =
useRecoilComponentState(
useRecoilComponentStateV2(
contextStoreCurrentViewTypeComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
@@ -47,7 +47,7 @@ export const MainContextStoreProviderEffect = ({
const [
contextStoreCurrentObjectMetadataItemId,
setContextStoreCurrentObjectMetadataItemId,
] = useRecoilComponentState(
] = useRecoilComponentStateV2(
contextStoreCurrentObjectMetadataItemIdComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
packages/twenty-front/src/modules/context-store/hooks/useContextStoreObjectMetadataItem.ts
+2 -2
View File
@@ -1,12 +1,12 @@
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
export const useContextStoreObjectMetadataItem = (
contextStoreInstanceId?: string,
) => {
const objectMetadataItemId = useRecoilComponentValue(
const objectMetadataItemId = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemIdComponentState,
contextStoreInstanceId,
);
packages/twenty-front/src/modules/context-store/hooks/useContextStoreObjectMetadataItemOrThrow.ts
+2 -2
View File
@@ -1,11 +1,11 @@
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
export const useContextStoreObjectMetadataItemOrThrow = (
contextStoreInstanceId?: string,
) => {
const objectMetadataItemId = useRecoilComponentValue(
const objectMetadataItemId = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemIdComponentState,
contextStoreInstanceId,
);
packages/twenty-front/src/modules/context-store/hooks/useFindManyRecordsSelectedInContextStore.ts
+6 -6
View File
@@ -9,7 +9,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
export const useFindManyRecordsSelectedInContextStore = ({
@@ -19,7 +19,7 @@ export const useFindManyRecordsSelectedInContextStore = ({
instanceId?: string;
limit?: number;
}) => {
const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValue(
const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemIdComponentState,
instanceId,
);
@@ -28,22 +28,22 @@ export const useFindManyRecordsSelectedInContextStore = ({
objectId: contextStoreCurrentObjectMetadataItemId ?? '',
});
const contextStoreTargetedRecordsRule = useRecoilComponentValue(
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
contextStoreTargetedRecordsRuleComponentState,
instanceId,
);
const contextStoreFilters = useRecoilComponentValue(
const contextStoreFilters = useRecoilComponentValueV2(
contextStoreFiltersComponentState,
instanceId,
);
const contextStoreFilterGroups = useRecoilComponentValue(
const contextStoreFilterGroups = useRecoilComponentValueV2(
contextStoreFilterGroupsComponentState,
instanceId,
);
const contextStoreAnyFieldFilterValue = useRecoilComponentValue(
const contextStoreAnyFieldFilterValue = useRecoilComponentValueV2(
contextStoreAnyFieldFilterValueComponentState,
instanceId,
);
packages/twenty-front/src/modules/context-store/states/contextStoreAnyFieldFilterValueComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreAnyFieldFilterValueComponentState =
createComponentState<string>({
createComponentStateV2<string>({
key: 'contextStoreAnyFieldFilterValueComponentState',
defaultValue: '',
componentInstanceContext: ContextStoreComponentInstanceContext,
packages/twenty-front/src/modules/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreCurrentObjectMetadataItemIdComponentState =
createComponentState<string | undefined>({
createComponentStateV2<string | undefined>({
key: 'contextStoreCurrentObjectMetadataItemIdComponentState',
defaultValue: undefined,
componentInstanceContext: ContextStoreComponentInstanceContext,
packages/twenty-front/src/modules/context-store/states/contextStoreCurrentViewIdComponentState.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreCurrentViewIdComponentState = createComponentState<
export const contextStoreCurrentViewIdComponentState = createComponentStateV2<
string | undefined
>({
key: 'contextStoreCurrentViewIdComponentState',
packages/twenty-front/src/modules/context-store/states/contextStoreCurrentViewTypeComponentState.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { type ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreCurrentViewTypeComponentState =
createComponentState<ContextStoreViewType | null>({
createComponentStateV2<ContextStoreViewType | null>({
key: 'contextStoreCurrentViewTypeComponentState',
defaultValue: null,
componentInstanceContext: ContextStoreComponentInstanceContext,
packages/twenty-front/src/modules/context-store/states/contextStoreFilterGroupsComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreFilterGroupsComponentState = createComponentState<
export const contextStoreFilterGroupsComponentState = createComponentStateV2<
RecordFilterGroup[]
>({
key: 'contextStoreFilterGroupsComponentState',
packages/twenty-front/src/modules/context-store/states/contextStoreFiltersComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreFiltersComponentState = createComponentState<
export const contextStoreFiltersComponentState = createComponentStateV2<
RecordFilter[]
>({
key: 'contextStoreFiltersComponentState',
packages/twenty-front/src/modules/context-store/states/contextStoreIsPageInEditModeComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreIsPageInEditModeComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'contextStoreIsPageInEditModeComponentState',
defaultValue: false,
componentInstanceContext: ContextStoreComponentInstanceContext,
packages/twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsComponentState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
export const contextStoreNumberOfSelectedRecordsComponentState =
createComponentState<number>({
createComponentStateV2<number>({
key: 'contextStoreNumberOfSelectedRecordsComponentState',
defaultValue: 0,
componentInstanceContext: ContextStoreComponentInstanceContext,
packages/twenty-front/src/modules/context-store/states/contextStoreRecordShowParentViewComponentState.ts
+8 -6
View File
@@ -2,7 +2,7 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { type RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
type RecordShowParentViewComponentState = {
parentViewComponentId: string;
@@ -13,8 +13,10 @@ type RecordShowParentViewComponentState = {
};
export const contextStoreRecordShowParentViewComponentState =
createComponentState<RecordShowParentViewComponentState | undefined | null>({
key: 'contextStoreRecordShowParentViewComponentState',
defaultValue: undefined,
componentInstanceContext: ContextStoreComponentInstanceContext,
});
createComponentStateV2<RecordShowParentViewComponentState | undefined | null>(
{
key: 'contextStoreRecordShowParentViewComponentState',
defaultValue: undefined,
componentInstanceContext: ContextStoreComponentInstanceContext,
},
);
packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsRuleComponentState.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
type ContextStoreTargetedRecordsRuleSelectionMode = {
mode: 'selection';
@@ -16,7 +16,7 @@ export type ContextStoreTargetedRecordsRule =
| ContextStoreTargetedRecordsRuleExclusionMode;
export const contextStoreTargetedRecordsRuleComponentState =
createComponentState<ContextStoreTargetedRecordsRule>({
createComponentStateV2<ContextStoreTargetedRecordsRule>({
key: 'contextStoreTargetedRecordsRuleComponentState',
defaultValue: {
mode: 'selection',