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
2026-02-24 17:37:01 +01:00
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { isUndefined } from '@sniptt/guards';
 import { getMockCompanyObjectMetadataItem } from '~/testing/mock-data/companies';

@@ -17,7 +17,7 @@ export const ContextStoreDecorator: Decorator = (Story, context) => {
    componentInstanceId = MAIN_CONTEXT_STORE_INSTANCE_ID;
  }

-  const setCurrentObjectMetadataItemId = useSetRecoilComponentState(
+  const setCurrentObjectMetadataItemId = useSetRecoilComponentStateV2(
    contextStoreCurrentObjectMetadataItemIdComponentState,
    componentInstanceId,
  );
@@ -1,6 +1,6 @@
 import { type Decorator } from '@storybook/react-vite';
-import { useRecoilState } from 'recoil';

+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { ProfilerWrapper } from '~/testing/profiling/components/ProfilerWrapper';
 import { ProfilingQueueEffect } from '~/testing/profiling/components/ProfilingQueueEffect';
 import { ProfilingReporter } from '~/testing/profiling/components/ProfilingReporter';
@@ -14,12 +14,12 @@ export const ProfilerDecorator: Decorator = (Story, { id, parameters }) => {
  const numberOfRuns = parameters.numberOfRuns ?? 2;
  const warmUpRounds = parameters.warmUpRounds ?? 5;

-  const [currentProfilingRunIndex] = useRecoilState(
+  const currentProfilingRunIndex = useRecoilValueV2(
    currentProfilingRunIndexState,
  );

-  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
-  const [profilingSessionRuns] = useRecoilState(profilingSessionRunsState);
+  const profilingSessionStatus = useRecoilValueV2(profilingSessionStatusState);
+  const profilingSessionRuns = useRecoilValueV2(profilingSessionRunsState);

  const skip = profilingSessionRuns.length === 0;

@@ -3,6 +3,7 @@ import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetReco

 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { labelIdentifierFieldMetadataItemSelector } from '@/object-metadata/states/labelIdentifierFieldMetadataItemSelector';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -25,8 +26,9 @@ import { useSetRecordTableData } from '@/object-record/record-table/hooks/intern
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentSelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentSelectorValueV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations';
@@ -45,12 +47,13 @@ const InternalTableStateLoaderEffect = ({
 }) => {
  const { recordTableId } = useRecordTableContextOrThrow();
  const { loadRecordIndexStates } = useLoadRecordIndexStates();
-  const setCurrentRecordFields = useSetRecoilComponentState(
+  const setCurrentRecordFields = useSetRecoilComponentStateV2(
    currentRecordFieldsComponentState,
  );

-  const setContextStoreCurrentViewId = useSetRecoilComponentState(
+  const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
    contextStoreCurrentViewIdComponentState,
+    MAIN_CONTEXT_STORE_INSTANCE_ID,
  );

  const setCoreViews = useSetRecoilStateV2(coreViewsState);
@@ -104,14 +107,12 @@ const InternalTableContextProviders = ({
 }) => {
  const { objectPermissionsByObjectMetadataId } = useObjectPermissions();

-  const currentRecordFields = useRecoilComponentValue(
+  const currentRecordFields = useRecoilComponentValueV2(
    currentRecordFieldsComponentState,
-    'record-index',
  );

-  const visibleRecordFields = useRecoilComponentValue(
+  const visibleRecordFields = useRecoilComponentSelectorValueV2(
    visibleRecordFieldsComponentSelector,
-    'record-index',
  );

  const fieldMetadataItems = objectMetadataItem.fields;
@@ -10,8 +10,8 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { useStepsOutputSchema } from '@/workflow/workflow-variables/hooks/useStepsOutputSchema';
 import { type Decorator } from '@storybook/react-vite';
-import { useEffect, useState } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useStore } from 'jotai';
+import { useCallback, useEffect, useState } from 'react';
 import {
  getWorkflowMock,
  getWorkflowNodeIdMock,
@@ -26,56 +26,59 @@ export const WorkflowStepDecorator: Decorator = (Story) => {
  const { loadMockedObjectMetadataItems } = useLoadMockedObjectMetadataItems();
  const [ready, setReady] = useState(false);

-  const handleMount = useRecoilCallback(
-    ({ set }) =>
-      async () => {
-        await loadMockedObjectMetadataItems();
+  const store = useStore();

-        set(
-          workflowVisualizerWorkflowIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowMock().id,
-        );
-        set(
-          workflowVisualizerWorkflowVersionIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          workflowVersion.id,
-        );
-        set(
-          workflowVisualizerWorkflowRunIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          '123',
-        );
-        set(
-          workflowSelectedNodeComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowNodeIdMock(),
-        );
-        set(
-          flowComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          {
-            workflowVersionId: workflowVersion.id,
-            trigger: workflowVersion.trigger,
-            steps: workflowVersion.steps,
-          },
-        );
-        set(
-          commandMenuWorkflowIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowMock().id,
-        );
-        populateStepsOutputSchema(workflowVersion);
-        setReady(true);
+  const handleMount = useCallback(async () => {
+    await loadMockedObjectMetadataItems();
+
+    store.set(
+      workflowVisualizerWorkflowIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowMock().id,
+    );
+    store.set(
+      workflowVisualizerWorkflowVersionIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      workflowVersion.id,
+    );
+    store.set(
+      workflowVisualizerWorkflowRunIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      '123',
+    );
+    store.set(
+      workflowSelectedNodeComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowNodeIdMock(),
+    );
+    store.set(
+      flowComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      {
+        workflowVersionId: workflowVersion.id,
+        trigger: workflowVersion.trigger,
+        steps: workflowVersion.steps,
      },
-    [loadMockedObjectMetadataItems, populateStepsOutputSchema, workflowVersion],
-  );
+    );
+    store.set(
+      commandMenuWorkflowIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowMock().id,
+    );
+    populateStepsOutputSchema(workflowVersion);
+    setReady(true);
+  }, [
+    loadMockedObjectMetadataItems,
+    populateStepsOutputSchema,
+    workflowVersion,
+    store,
+  ]);

  useEffect(() => {
    handleMount();
@@ -1,6 +1,5 @@
 import { type Decorator } from '@storybook/react-vite';
-import { useEffect } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useCallback, useEffect } from 'react';

 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
@@ -8,6 +7,7 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { CustomError, isDefined } from 'twenty-shared/utils';
 import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { getPeopleRecordConnectionMock } from '~/testing/mock-data/people';
@@ -24,13 +24,9 @@ const RecordMockSetterEffect = ({
  people: ObjectRecord[];
  tasks: ObjectRecord[];
 }) => {
-  const setRecordInStores = useRecoilCallback(
-    ({ set }) =>
-      (record: ObjectRecord) => {
-        set(recordStoreFamilyState(record.id), record);
-      },
-    [],
-  );
+  const setRecordInStores = useCallback((record: ObjectRecord) => {
+    jotaiStore.set(recordStoreFamilyState.atomFamily(record.id), record);
+  }, []);

  useEffect(() => {
    for (const company of companies) {
@@ -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>
  );
 };
@@ -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}>
@@ -1,4 +1,5 @@
 import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import {
  type FieldPermission,
  type ObjectPermission,
@@ -116,15 +117,15 @@ export const BASE_ROLE_MOCK_REVOKES_ALL: Role = {
  rowLevelPermissionPredicates: [],
 };

-export const rolesMockHookWrapper = getJestMetadataAndApolloMocksWrapper({
-  onInitializeRecoilSnapshot: (snapshot) => {
-    snapshot.set(
-      settingsDraftRoleFamilyState(MOCK_ROLE_ID_GRANTS_ALL),
-      BASE_ROLE_MOCK_GRANTS_ALL,
-    );
-    snapshot.set(
-      settingsDraftRoleFamilyState(MOCK_ROLE_ID_REVOKES_ALL),
-      BASE_ROLE_MOCK_REVOKES_ALL,
-    );
-  },
-});
+export const initializeRolesMockJotaiStore = () => {
+  jotaiStore.set(
+    settingsDraftRoleFamilyState.atomFamily(MOCK_ROLE_ID_GRANTS_ALL),
+    BASE_ROLE_MOCK_GRANTS_ALL,
+  );
+  jotaiStore.set(
+    settingsDraftRoleFamilyState.atomFamily(MOCK_ROLE_ID_REVOKES_ALL),
+    BASE_ROLE_MOCK_REVOKES_ALL,
+  );
+};
+
+export const rolesMockHookWrapper = getJestMetadataAndApolloMocksWrapper({});
@@ -1,5 +1,6 @@
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { Profiler, type ProfilerOnRenderCallback, useCallback } from 'react';
+
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
 import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
 import { profilingSessionState } from '~/testing/profiling/states/profilingSessionState';
@@ -20,55 +21,52 @@ export const ProfilerWrapper = ({
  runName: string;
  children: React.ReactNode;
 }) => {
-  const handleRender: ProfilerOnRenderCallback = useRecoilCallback(
-    ({ set, snapshot }) =>
-      (id, phase, actualDurationInMs) => {
-        const dataPointId = getProfilingQueueIdentifier(
-          profilingId,
-          testIndex,
-          runName,
-        );
+  const handleRender: ProfilerOnRenderCallback = useCallback(
+    (id, phase, actualDurationInMs) => {
+      const dataPointId = getProfilingQueueIdentifier(
+        profilingId,
+        testIndex,
+        runName,
+      );

-        const newDataPoint: ProfilingDataPoint = {
-          componentName,
-          runName,
-          id: dataPointId,
-          phase,
-          durationInMs: actualDurationInMs,
-        };
+      const newDataPoint: ProfilingDataPoint = {
+        componentName,
+        runName,
+        id: dataPointId,
+        phase,
+        durationInMs: actualDurationInMs,
+      };

-        set(
-          profilingSessionDataPointsState,
-          (currentProfilingSessionDataPoints) => [
-            ...currentProfilingSessionDataPoints,
-            newDataPoint,
-          ],
-        );
+      jotaiStore.set(
+        profilingSessionDataPointsState.atom,
+        (currentProfilingSessionDataPoints) => [
+          ...currentProfilingSessionDataPoints,
+          newDataPoint,
+        ],
+      );

-        set(profilingSessionState, (currentProfilingSession) => ({
-          ...currentProfilingSession,
-          [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
-        }));
+      jotaiStore.set(profilingSessionState.atom, (currentProfilingSession) => ({
+        ...currentProfilingSession,
+        [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
+      }));

-        const queueIdentifier = dataPointId;
+      const queueIdentifier = dataPointId;

-        const currentProfilingQueue = snapshot
-          .getLoadable(profilingQueueState)
-          .getValue();
+      const currentProfilingQueue = jotaiStore.get(profilingQueueState.atom);

-        const currentQueue = currentProfilingQueue[runName];
+      const currentQueue = currentProfilingQueue[runName];

-        if (!isDefined(currentQueue)) {
-          return;
-        }
+      if (!isDefined(currentQueue)) {
+        return;
+      }

-        const newQueue = currentQueue.filter((id) => id !== queueIdentifier);
+      const newQueue = currentQueue.filter((id) => id !== queueIdentifier);

-        set(profilingQueueState, (currentProfilingQueue) => ({
-          ...currentProfilingQueue,
-          [runName]: newQueue,
-        }));
-      },
+      jotaiStore.set(profilingQueueState.atom, (currentProfilingQueue) => ({
+        ...currentProfilingQueue,
+        [runName]: newQueue,
+      }));
+    },
    [profilingId, testIndex, componentName, runName],
  );

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';

+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { TIME_BETWEEN_TEST_RUNS_IN_MS } from '~/testing/profiling/constants/TimeBetweenTestRunsInMs';
 import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
@@ -21,18 +21,18 @@ export const ProfilingQueueEffect = ({
  warmUpRounds: number;
 }) => {
  const [currentProfilingRunIndex, setCurrentProfilingRunIndex] =
-    useRecoilState(currentProfilingRunIndexState);
+    useRecoilStateV2(currentProfilingRunIndexState);

-  const [profilingSessionStatus, setProfilingSessionStatus] = useRecoilState(
+  const [profilingSessionStatus, setProfilingSessionStatus] = useRecoilStateV2(
    profilingSessionStatusState,
  );

-  const [profilingSessionRuns, setProfilingSessionRuns] = useRecoilState(
+  const [profilingSessionRuns, setProfilingSessionRuns] = useRecoilStateV2(
    profilingSessionRunsState,
  );

  const [profilingQueue, setProfilingQueue] =
-    useRecoilState(profilingQueueState);
+    useRecoilStateV2(profilingQueueState);

  useEffect(() => {
    (async () => {
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
-import { useRecoilState } from 'recoil';

+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId';
 import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
@@ -22,15 +22,15 @@ const StyledTable = styled.table`
 `;

 export const ProfilingReporter = () => {
-  const [profilingSessionDataPoints] = useRecoilState(
+  const profilingSessionDataPoints = useRecoilValueV2(
    profilingSessionDataPointsState,
  );

-  const [currentProfilingRunIndex] = useRecoilState(
+  const currentProfilingRunIndex = useRecoilValueV2(
    currentProfilingRunIndexState,
  );

-  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
+  const profilingSessionStatus = useRecoilValueV2(profilingSessionStatusState);

  const profilingReport = useMemo(
    () => computeProfilingReport(profilingSessionDataPoints),
@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

-export const currentProfilingRunIndexState = atom<number>({
+export const currentProfilingRunIndexState = createStateV2<number>({
  key: 'currentProfilingRunIndexState',
-  default: 0,
+  defaultValue: 0,
 });
@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

-export const currentProfilingRunIndexState = atom<number>({
+export const currentProfilingRunIndexState = createStateV2<number>({
  key: 'currentProfilingRunIndexState',
-  default: 0,
+  defaultValue: 0,
 });
@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

 export type ProfilingQueue = {
  [runName: string]: string[];
 };

-export const profilingQueueState = atom<ProfilingQueue>({
+export const profilingQueueState = createStateV2<ProfilingQueue>({
  key: 'profilingQueueState',
-  default: {},
+  defaultValue: {},
 });
@@ -1,8 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

 import { type ProfilingDataPoint } from '~/testing/profiling/types/ProfilingDataPoint';

-export const profilingSessionDataPointsState = atom<ProfilingDataPoint[]>({
+export const profilingSessionDataPointsState = createStateV2<
+  ProfilingDataPoint[]
+>({
  key: 'profilingSessionDataPointsState',
-  default: [],
+  defaultValue: [],
 });
@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

-export const profilingSessionRunsState = atom<string[]>({
+export const profilingSessionRunsState = createStateV2<string[]>({
  key: 'profilingSessionRunsState',
-  default: [],
+  defaultValue: [],
 });
@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

 import { type ProfilingDataPoint } from '~/testing/profiling/types/ProfilingDataPoint';

-export const profilingSessionState = atom<Record<string, ProfilingDataPoint[]>>(
-  {
-    key: 'profilingSessionState',
-    default: {},
-  },
-);
+export const profilingSessionState = createStateV2<
+  Record<string, ProfilingDataPoint[]>
+>({
+  key: 'profilingSessionState',
+  defaultValue: {},
+});
@@ -1,8 +1,9 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';

 export type ProfilingSessionStatus = 'running' | 'finished' | 'not_started';

-export const profilingSessionStatusState = atom<ProfilingSessionStatus>({
-  key: 'profilingSessionStatusState',
-  default: 'not_started',
-});
+export const profilingSessionStatusState =
+  createStateV2<ProfilingSessionStatus>({
+    key: 'profilingSessionStatusState',
+    defaultValue: 'not_started',
+  });