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
@@ -3,12 +3,13 @@ import { MockedProvider } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react';
 import { type ReactNode } from 'react';
 import { Provider as JotaiProvider } from 'jotai';
-import { RecoilRoot, useSetRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';

 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
 import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
@@ -139,8 +140,9 @@ describe('useActivityTargetObjectRecords', () => {

    const { result } = renderHook(
      () => {
-        const setRecordFromStore = useSetRecoilState(
-          recordStoreFamilyState(task.id),
+        const setRecordFromStore = useSetFamilyRecoilStateV2(
+          recordStoreFamilyState,
+          task.id,
        );

        const { activityTargetObjectRecords } = useActivityTargetObjectRecords(
@@ -1,11 +1,11 @@
 import { type MockedResponse } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react';
-import { useRecoilValue } from 'recoil';

 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import gql from 'graphql-tag';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
@@ -83,7 +83,7 @@ describe('useOpenCreateActivityDrawer', () => {
        const openActivityRightDrawer = useOpenCreateActivityDrawer({
          activityObjectNameSingular: CoreObjectNameSingular.Note,
        });
-        const viewableRecordId = useRecoilValue(viewableRecordIdState);
+        const viewableRecordId = useRecoilValueV2(viewableRecordIdState);
        return {
          openActivityRightDrawer,
          viewableRecordId,
@@ -1,3 +1,6 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
+
 import { useActivityTargetsForTargetableObjects } from '@/activities/hooks/useActivityTargetsForTargetableObjects';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { type Note } from '@/activities/types/Note';
@@ -7,7 +10,6 @@ import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { type CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useRecoilCallback } from 'recoil';
 import { type RecordGqlOperationOrderBy } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';

@@ -24,15 +26,15 @@ export const useActivities = <T extends Task | Note>({
  skip?: boolean;
  limit: number;
 }) => {
-  const updateActivitiesInStore = useRecoilCallback(
-    ({ set }) =>
-      (activityTargets: (TaskTarget | NoteTarget)[]) => {
-        for (const activityTarget of activityTargets) {
-          const activity = activityTarget[objectNameSingular];
-          set(recordStoreFamilyState(activity.id), activity);
-        }
-      },
-    [objectNameSingular],
+  const store = useStore();
+  const updateActivitiesInStore = useCallback(
+    (activityTargets: (TaskTarget | NoteTarget)[]) => {
+      for (const activityTarget of activityTargets) {
+        const activity = activityTarget[objectNameSingular];
+        store.set(recordStoreFamilyState.atomFamily(activity.id), activity);
+      }
+    },
+    [store, objectNameSingular],
  );

  const {
@@ -1,5 +1,3 @@
-import { useRecoilValue } from 'recoil';
-
 import { type Note } from '@/activities/types/Note';
 import { type NoteTarget } from '@/activities/types/NoteTarget';
 import { type Task } from '@/activities/types/Task';
@@ -7,6 +5,7 @@ import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { getActivityTargetObjectRecords } from '@/activities/utils/getActivityTargetObjectRecords';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type Nullable } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@@ -17,8 +16,9 @@ export const useActivityTargetObjectRecords = (
 ) => {
  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);

-  const activity = useRecoilValue(
-    recordStoreFamilyState(activityRecordId ?? ''),
+  const activity = useFamilyRecoilValueV2(
+    recordStoreFamilyState,
+    activityRecordId ?? '',
  ) as Note | Task | null;

  if (!isDefined(activity) && !isDefined(activityTargets)) {
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
 import { isNonEmptyArray } from '@sniptt/guards';

 import { type ActivityForEditor } from '@/activities/types/ActivityForEditor';
@@ -15,7 +17,6 @@ import { createOneActivityOperationSignatureFactory } from '@/activities/graphql
 import { type NoteTarget } from '@/activities/types/NoteTarget';
 import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { getJoinObjectNameSingular } from '@/activities/utils/getJoinObjectNameSingular';
-import { useRecoilCallback } from 'recoil';
 import { capitalize } from 'twenty-shared/utils';

 export const useCreateActivityInDB = ({
@@ -56,53 +57,52 @@ export const useCreateActivityInDB = ({
    });

  const cache = useApolloCoreClient().cache;
+  const store = useStore();

-  const createActivityInDB = useRecoilCallback(
-    ({ set }) =>
-      async (activityToCreate: ActivityForEditor) => {
-        const createdActivity = await createOneActivity?.({
-          ...activityToCreate,
-          updatedAt: new Date().toISOString(),
+  const createActivityInDB = useCallback(
+    async (activityToCreate: ActivityForEditor) => {
+      const createdActivity = await createOneActivity?.({
+        ...activityToCreate,
+        updatedAt: new Date().toISOString(),
+      });
+
+      const activityTargetsToCreate =
+        activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+
+      if (isNonEmptyArray(activityTargetsToCreate)) {
+        await createManyActivityTargets({
+          recordsToCreate: activityTargetsToCreate,
        });
+      }

-        const activityTargetsToCreate =
-          activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+      const activityTargetsConnection = getRecordConnectionFromRecords({
+        objectMetadataItems,
+        objectMetadataItem: objectMetadataItemActivityTarget,
+        records: activityTargetsToCreate.map((activityTarget) => ({
+          ...activityTarget,
+          __typename: capitalize(objectMetadataItemActivityTarget.nameSingular),
+        })),
+        withPageInfo: false,
+        computeReferences: true,
+        isRootLevel: false,
+      });

-        if (isNonEmptyArray(activityTargetsToCreate)) {
-          await createManyActivityTargets({
-            recordsToCreate: activityTargetsToCreate,
-          });
-        }
+      modifyRecordFromCache({
+        recordId: createdActivity.id,
+        cache,
+        fieldModifiers: {
+          activityTargets: () => activityTargetsConnection,
+        },
+        objectMetadataItem: objectMetadataItemActivity,
+      });

-        const activityTargetsConnection = getRecordConnectionFromRecords({
-          objectMetadataItems,
-          objectMetadataItem: objectMetadataItemActivityTarget,
-          records: activityTargetsToCreate.map((activityTarget) => ({
-            ...activityTarget,
-            __typename: capitalize(
-              objectMetadataItemActivityTarget.nameSingular,
-            ),
-          })),
-          withPageInfo: false,
-          computeReferences: true,
-          isRootLevel: false,
-        });
-
-        modifyRecordFromCache({
-          recordId: createdActivity.id,
-          cache,
-          fieldModifiers: {
-            activityTargets: () => activityTargetsConnection,
-          },
-          objectMetadataItem: objectMetadataItemActivity,
-        });
-
-        set(recordStoreFamilyState(createdActivity.id), {
-          ...createdActivity,
-          activityTargets: activityTargetsToCreate,
-        });
-      },
+      store.set(recordStoreFamilyState.atomFamily(createdActivity.id), {
+        ...createdActivity,
+        activityTargets: activityTargetsToCreate,
+      });
+    },
    [
+      store,
      cache,
      createManyActivityTargets,
      createOneActivity,
@@ -1,5 +1,3 @@
-import { useSetRecoilState } from 'recoil';
-
 import { activityTargetableEntityArrayState } from '@/activities/states/activityTargetableEntityArrayState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
@@ -7,6 +5,7 @@ import { viewableRecordNameSingularState } from '@/object-record/record-right-dr
 import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';

 import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { type Note } from '@/activities/types/Note';
 import { type NoteTarget } from '@/activities/types/NoteTarget';
@@ -40,15 +39,15 @@ export const useOpenCreateActivityDrawer = ({
    shouldMatchRootQueryFilter: true,
  });

-  const setActivityTargetableEntityArray = useSetRecoilState(
+  const setActivityTargetableEntityArray = useSetRecoilStateV2(
    activityTargetableEntityArrayState,
  );
-  const setViewableRecordId = useSetRecoilState(viewableRecordIdState);
-  const setViewableRecordNameSingular = useSetRecoilState(
+  const setViewableRecordId = useSetRecoilStateV2(viewableRecordIdState);
+  const setViewableRecordNameSingular = useSetRecoilStateV2(
    viewableRecordNameSingularState,
  );

-  const setIsUpsertingActivityInDB = useSetRecoilState(
+  const setIsUpsertingActivityInDB = useSetRecoilStateV2(
    isUpsertingActivityInDBState,
  );

@@ -1,31 +1,33 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
+
 import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { isNonEmptyString } from '@sniptt/guards';
-import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

 export const useReplaceActivityBlockEditorContent = (
  editor: typeof BLOCK_SCHEMA.BlockNoteEditor,
 ) => {
-  const replaceBlockEditorContent = useRecoilCallback(
-    ({ snapshot }) =>
-      (activityId: string) => {
-        if (isDefined(editor)) {
-          const activityInStore = snapshot
-            .getLoadable(recordStoreFamilyState(activityId))
-            .getValue();
+  const store = useStore();
+  const replaceBlockEditorContent = useCallback(
+    (activityId: string) => {
+      if (isDefined(editor)) {
+        const activityInStore = store.get(
+          recordStoreFamilyState.atomFamily(activityId),
+        );

-          const content = isNonEmptyString(activityInStore?.bodyV2.blocknote)
-            ? JSON.parse(activityInStore?.bodyV2.blocknote)
-            : [{ type: 'paragraph', content: '' }];
+        const content = isNonEmptyString(activityInStore?.bodyV2.blocknote)
+          ? JSON.parse(activityInStore?.bodyV2.blocknote)
+          : [{ type: 'paragraph', content: '' }];

-          if (!isDeeplyEqual(editor.document, content)) {
-            editor.replaceBlocks(editor.document, content);
-          }
+        if (!isDeeplyEqual(editor.document, content)) {
+          editor.replaceBlocks(editor.document, content);
        }
-      },
-    [editor],
+      }
+    },
+    [store, editor],
  );

  return {
@@ -1,5 +1,3 @@
-import { useRecoilState } from 'recoil';
-
 import { useCreateActivityInDB } from '@/activities/hooks/useCreateActivityInDB';
 import { useRefreshShowPageFindManyActivitiesQueries } from '@/activities/hooks/useRefreshShowPageFindManyActivitiesQueries';
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
@@ -30,7 +28,7 @@ export const useUpsertActivity = ({
    activityObjectNameSingular,
  });

-  const [, setIsUpsertingActivityInDB] = useRecoilState(
+  const [, setIsUpsertingActivityInDB] = useRecoilStateV2(
    isUpsertingActivityInDBState,
  );