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,7 +3,7 @@ import { agentChatSelectedFilesStateV2 } from '@/ai/states/agentChatSelectedFile
 import { agentChatUploadedFilesStateV2 } from '@/ai/states/agentChatUploadedFilesStateV2';
 import { agentChatUsageStateV2 } from '@/ai/states/agentChatUsageStateV2';
 import { currentAIChatThreadStateV2 } from '@/ai/states/currentAIChatThreadStateV2';
-import { currentAIChatThreadTitleStateV2 } from '@/ai/states/currentAIChatThreadTitleStateV2';
+import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';

 import { agentChatInputStateV2 } from '@/ai/states/agentChatInputStateV2';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
@@ -26,7 +26,7 @@ export const useAgentChat = (uiMessages: ExtendedUIMessage[]) => {

  const { getBrowsingContext } = useGetBrowsingContext();
  const setCurrentAIChatThreadTitle = useSetRecoilStateV2(
-    currentAIChatThreadTitleStateV2,
+    currentAIChatThreadTitleState,
  );

  const agentChatSelectedFiles = useRecoilValueV2(
@@ -4,7 +4,7 @@ import {
  type AgentChatUsageState,
 } from '@/ai/states/agentChatUsageStateV2';
 import { currentAIChatThreadStateV2 } from '@/ai/states/currentAIChatThreadStateV2';
-import { currentAIChatThreadTitleStateV2 } from '@/ai/states/currentAIChatThreadTitleStateV2';
+import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
 import { isCreatingChatThreadStateV2 } from '@/ai/states/isCreatingChatThreadStateV2';
 import { mapDBMessagesToUIMessages } from '@/ai/utils/mapDBMessagesToUIMessages';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
@@ -46,7 +46,7 @@ export const useAgentChatData = () => {
  );
  const setAgentChatUsage = useSetRecoilStateV2(agentChatUsageStateV2);
  const setCurrentAIChatThreadTitle = useSetRecoilStateV2(
-    currentAIChatThreadTitleStateV2,
+    currentAIChatThreadTitleState,
  );
  const [isCreatingChatThread, setIsCreatingChatThread] = useRecoilStateV2(
    isCreatingChatThreadStateV2,
@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';

 import { type BrowsingContext } from '@/ai/types/BrowsingContext';
@@ -11,7 +11,7 @@ import { contextStoreFiltersComponentState } from '@/context-store/states/contex
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { recordStoreFamilySelectorV2 } from '@/object-record/record-store/states/selectors/recordStoreFamilySelectorV2';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useStore } from 'jotai';
@@ -20,139 +20,129 @@ import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreV
 export const useGetBrowsingContext = () => {
  const store = useStore();

-  const getBrowsingContext = useRecoilCallback(
-    ({ snapshot }) =>
-      (): BrowsingContext | null => {
-        const instanceId = MAIN_CONTEXT_STORE_INSTANCE_ID;
+  const getBrowsingContext = useCallback((): BrowsingContext | null => {
+    const instanceId = MAIN_CONTEXT_STORE_INSTANCE_ID;

-        const viewType = snapshot
-          .getLoadable(
-            contextStoreCurrentViewTypeComponentState.atomFamily({
-              instanceId,
-            }),
-          )
-          .getValue();
+    const viewType = store.get(
+      contextStoreCurrentViewTypeComponentState.atomFamily({
+        instanceId,
+      }),
+    );

-        const objectMetadataItemId = snapshot
-          .getLoadable(
-            contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
-              instanceId,
-            }),
-          )
-          .getValue();
+    const objectMetadataItemId = store.get(
+      contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
+        instanceId,
+      }),
+    );

-        const objectMetadataItems = store.get(objectMetadataItemsState.atom);
+    const objectMetadataItems = store.get(objectMetadataItemsState.atom);

-        const objectMetadataItem = objectMetadataItems.find(
-          (item) => item.id === objectMetadataItemId,
+    const objectMetadataItem = objectMetadataItems.find(
+      (item) => item.id === objectMetadataItemId,
+    );
+
+    if (!objectMetadataItem) {
+      return null;
+    }
+
+    if (viewType === ContextStoreViewType.ShowPage) {
+      const targetedRecordsRule = store.get(
+        contextStoreTargetedRecordsRuleComponentState.atomFamily({
+          instanceId,
+        }),
+      );
+
+      if (
+        targetedRecordsRule.mode !== 'selection' ||
+        targetedRecordsRule.selectedRecordIds.length !== 1
+      ) {
+        return null;
+      }
+
+      const recordContext: BrowsingContext = {
+        type: 'recordPage',
+        objectNameSingular: objectMetadataItem.nameSingular,
+        recordId: targetedRecordsRule.selectedRecordIds[0],
+      };
+
+      const pageLayoutId = store.get(
+        recordStoreFamilySelectorV2.selectorFamily({
+          recordId: targetedRecordsRule.selectedRecordIds[0],
+          fieldName: 'pageLayoutId',
+        }),
+      ) as string | null | undefined;
+
+      if (isDefined(pageLayoutId)) {
+        const tabListInstanceId =
+          getTabListInstanceIdFromPageLayoutId(pageLayoutId);
+        const activeTabId = store.get(
+          activeTabIdComponentState.atomFamily({
+            instanceId: tabListInstanceId,
+          }),
        );

-        if (!objectMetadataItem) {
-          return null;
-        }
+        return {
+          ...recordContext,
+          pageLayoutId,
+          activeTabId,
+        };
+      }

-        if (viewType === ContextStoreViewType.ShowPage) {
-          const targetedRecordsRule = snapshot
-            .getLoadable(
-              contextStoreTargetedRecordsRuleComponentState.atomFamily({
-                instanceId,
-              }),
-            )
-            .getValue();
+      return recordContext;
+    }

-          if (
-            targetedRecordsRule.mode !== 'selection' ||
-            targetedRecordsRule.selectedRecordIds.length !== 1
-          ) {
-            return null;
-          }
+    if (
+      viewType === ContextStoreViewType.Table ||
+      viewType === ContextStoreViewType.Kanban
+    ) {
+      const currentViewId = store.get(
+        contextStoreCurrentViewIdComponentState.atomFamily({
+          instanceId,
+        }),
+      );

-          const recordContext: BrowsingContext = {
-            type: 'recordPage',
-            objectNameSingular: objectMetadataItem.nameSingular,
-            recordId: targetedRecordsRule.selectedRecordIds[0],
-          };
-
-          const pageLayoutId = snapshot
-            .getLoadable(
-              recordStoreFamilySelector<string | null | undefined>({
-                recordId: targetedRecordsRule.selectedRecordIds[0],
-                fieldName: 'pageLayoutId',
-              }),
-            )
-            .getValue();
-
-          if (isDefined(pageLayoutId)) {
-            const tabListInstanceId =
-              getTabListInstanceIdFromPageLayoutId(pageLayoutId);
-            const activeTabId = store.get(
-              activeTabIdComponentState.atomFamily({
-                instanceId: tabListInstanceId,
-              }),
-            );
-
-            return {
-              ...recordContext,
-              pageLayoutId,
-              activeTabId,
-            };
-          }
-
-          return recordContext;
-        }
-
-        if (
-          viewType === ContextStoreViewType.Table ||
-          viewType === ContextStoreViewType.Kanban
-        ) {
-          const currentViewId = snapshot
-            .getLoadable(
-              contextStoreCurrentViewIdComponentState.atomFamily({
-                instanceId,
-              }),
-            )
-            .getValue();
-
-          const currentView = store.get(
-            coreViewFromViewIdFamilySelector.selectorFamily({
-              viewId: currentViewId ?? '',
-            }),
-          );
-
-          if (!currentView) {
-            return null;
-          }
-
-          const contextStoreFilters = snapshot
-            .getLoadable(
-              contextStoreFiltersComponentState.atomFamily({
-                instanceId,
-              }),
-            )
-            .getValue();
-
-          const filterDescriptions = contextStoreFilters.map((filter) => {
-            const fieldMetadataItem = objectMetadataItem.fields.find(
-              (field) => field.id === filter.fieldMetadataId,
-            );
-            const fieldLabel = fieldMetadataItem?.label ?? t`Unknown field`;
-
-            return `${fieldLabel} ${filter.operand} "${filter.displayValue}"`;
-          });
-
-          return {
-            type: 'listView',
-            objectNameSingular: objectMetadataItem.nameSingular,
-            viewId: currentView.id,
-            viewName: currentView.name,
-            filterDescriptions,
-          };
-        }
+      const currentView = store.get(
+        coreViewFromViewIdFamilySelector.selectorFamily({
+          viewId: currentViewId ?? '',
+        }),
+      );

+      if (!currentView) {
        return null;
-      },
-    [store],
-  );
+      }
+
+      const contextStoreFilters = store.get(
+        contextStoreFiltersComponentState.atomFamily({
+          instanceId,
+        }),
+      );
+
+      const filterDescriptions = contextStoreFilters.map(
+        (filter: {
+          fieldMetadataId: string;
+          operand: string;
+          displayValue: string;
+        }) => {
+          const fieldMetadataItem = objectMetadataItem.fields.find(
+            (field) => field.id === filter.fieldMetadataId,
+          );
+          const fieldLabel = fieldMetadataItem?.label ?? t`Unknown field`;
+
+          return `${fieldLabel} ${filter.operand} "${filter.displayValue}"`;
+        },
+      );
+
+      return {
+        type: 'listView',
+        objectNameSingular: objectMetadataItem.nameSingular,
+        viewId: currentView.id,
+        viewName: currentView.name,
+        filterDescriptions,
+      };
+    }
+
+    return null;
+  }, [store]);

  return { getBrowsingContext };
 };
@@ -1,6 +1,6 @@
 import { agentChatUsageStateV2 } from '@/ai/states/agentChatUsageStateV2';
 import { currentAIChatThreadStateV2 } from '@/ai/states/currentAIChatThreadStateV2';
-import { currentAIChatThreadTitleStateV2 } from '@/ai/states/currentAIChatThreadTitleStateV2';
+import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
 import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
@@ -12,7 +12,7 @@ export const useCreateNewAIChatThread = () => {
  );
  const setAgentChatUsage = useSetRecoilStateV2(agentChatUsageStateV2);
  const setCurrentAIChatThreadTitle = useSetRecoilStateV2(
-    currentAIChatThreadTitleStateV2,
+    currentAIChatThreadTitleState,
  );

  const { openAskAIPage } = useOpenAskAIPageInCommandMenu();