Jotai 12 (#18160)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: charlesBochet

packages/twenty-front/jest.config.mjs

@@ -63,7 +63,7 @@ const jestConfig = {
     global: {
       statements: 49.5,
       lines: 48,
-      functions: 40,
+      functions: 39.5,
     },
   },
   collectCoverageFrom: ['<rootDir>/src/**/*.ts'],

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -3,7 +3,7 @@ import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePat
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { useParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 
@@ -63,14 +63,14 @@ const setupMockUseParams = (objectNamePlural?: string) => {
     .mockReturnValueOnce({ objectNamePlural: objectNamePlural ?? '' });
 };
 
-jest.mock('recoil');
+jest.mock('@/ui/utilities/state/jotai/hooks/useRecoilValueV2');
 const setupMockRecoil = (
   objectNamePlural?: string,
   verifyEmailRedirectPath?: string,
   calendarBookingPageId?: string | null,
 ) => {
   jest
-    .mocked(useRecoilValue)
+    .mocked(useRecoilValueV2)
     .mockReturnValueOnce(calendarBookingPageId ?? 'mock-calendar-id')
     .mockReturnValueOnce([{ namePlural: objectNamePlural ?? '' }])
     .mockReturnValueOnce(verifyEmailRedirectPath);

packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts

@@ -5,9 +5,9 @@ import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCu
 import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { useLocation, useParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
@@ -23,7 +23,7 @@ export const usePageChangeEffectNavigateLocation = () => {
   );
   const { defaultHomePagePath } = useDefaultHomePagePath();
   const location = useLocation();
-  const calendarBookingPageId = useRecoilValue(calendarBookingPageIdState);
+  const calendarBookingPageId = useRecoilValueV2(calendarBookingPageIdState);
 
   const someMatchingLocationOf = (appPaths: AppPath[]): boolean =>
     appPaths.some((appPath) => isMatchingLocation(location, appPath));
@@ -45,11 +45,13 @@ export const usePageChangeEffectNavigateLocation = () => {
   ];
 
   const objectNamePlural = useParams().objectNamePlural ?? '';
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
   const objectMetadataItem = objectMetadataItems?.find(
     (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
   );
-  const verifyEmailRedirectPath = useRecoilValue(verifyEmailRedirectPathState);
+  const verifyEmailRedirectPath = useRecoilValueV2(
+    verifyEmailRedirectPathState,
+  );
 
   if (
     (!isLoggedIn || (isLoggedIn && !isOnAWorkspace)) &&

packages/twenty-front/src/modules/action-menu/contexts/ActionMenuContextProvider.tsx

@@ -6,7 +6,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { isDefined } from 'twenty-shared/utils';
 
 export const ActionMenuContextProvider = ({
@@ -23,7 +23,7 @@ export const ActionMenuContextProvider = ({
     contextStoreCurrentObjectMetadataItemIdComponentState,
   );
 
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   const objectMetadataItem =
     objectMetadataItemOverride ??

packages/twenty-front/src/modules/action-menu/hooks/useShouldActionBeRegisteredParams.ts

@@ -16,9 +16,11 @@ import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPe
 import { hasAnySoftDeleteFilterOnViewComponentSelector } from '@/object-record/record-filter/states/hasAnySoftDeleteFilterOnView';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useContext, useMemo } from 'react';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { useCallback, useContext, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
@@ -104,39 +106,33 @@ export const useShouldActionBeRegisteredParams = ({
 
   const isSelectAll = contextStoreTargetedRecordsRule.mode === 'exclusion';
 
-  const getObjectReadPermission = useRecoilCallback(
-    ({ snapshot }) =>
-      (objectMetadataNameSingular: string) => {
-        return snapshot
-          .getLoadable(
-            objectPermissionsFamilySelector({
-              objectNameSingular: objectMetadataNameSingular,
-            }),
-          )
-          .getValue().canRead;
-      },
+  const getObjectReadPermission = useCallback(
+    (objectMetadataNameSingular: string) => {
+      return jotaiStore.get(
+        objectPermissionsFamilySelector.selectorFamily({
+          objectNameSingular: objectMetadataNameSingular,
+        }),
+      ).canRead;
+    },
     [],
   );
 
-  const getObjectWritePermission = useRecoilCallback(
-    ({ snapshot }) =>
-      (objectMetadataNameSingular: string) => {
-        return snapshot
-          .getLoadable(
-            objectPermissionsFamilySelector({
-              objectNameSingular: objectMetadataNameSingular,
-            }),
-          )
-          .getValue().canUpdate;
-      },
+  const getObjectWritePermission = useCallback(
+    (objectMetadataNameSingular: string) => {
+      return jotaiStore.get(
+        objectPermissionsFamilySelector.selectorFamily({
+          objectNameSingular: objectMetadataNameSingular,
+        }),
+      ).canUpdate;
+    },
     [],
   );
 
   const forceRegisteredActionsByKey = useRecoilValue(
     forceRegisteredActionsByKeyState,
   );
 
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
 
   const isFeatureFlagEnabled = (featureFlagKey: FeatureFlagKey) => {
     const featureFlag = currentWorkspace?.featureFlags?.find(

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -2,7 +2,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { format } from 'date-fns';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import {
   CalendarChannelVisibility,
   type TimelineCalendarEvent,
@@ -85,7 +85,7 @@ export const CalendarEventRow = ({
   className,
 }: CalendarEventRowProps) => {
   const theme = useTheme();
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValueV2(currentWorkspaceMemberState);
   const { openCalendarEventInCommandMenu } =
     useOpenCalendarEventInCommandMenu();
 

packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx

@@ -11,7 +11,7 @@ import { type ActivityTargetableObject } from '@/activities/types/ActivityTarget
 import { isAttachmentPreviewEnabledState } from '@/client-config/states/isAttachmentPreviewEnabledState';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 import { ActivityList } from '@/activities/components/ActivityList';
 import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag';
@@ -135,7 +135,7 @@ export const AttachmentList = ({
   const [previewedAttachment, setPreviewedAttachment] =
     useState<Attachment | null>(null);
 
-  const isAttachmentPreviewEnabled = useRecoilValue(
+  const isAttachmentPreviewEnabled = useRecoilValueV2(
     isAttachmentPreviewEnabledState,
   );
 

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetObjectRecords.test.tsx

@@ -2,12 +2,14 @@ import { gql, InMemoryCache } from '@apollo/client';
 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 { 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 { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
 import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
@@ -111,30 +113,32 @@ const task = {
 };
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
-  <RecoilRoot>
-    <MockedProvider cache={cache}>
-      <JestObjectMetadataItemSetter>
-        <SnackBarComponentInstanceContext.Provider
-          value={{ instanceId: 'snack-bar-manager' }}
-        >
-          {children}
-        </SnackBarComponentInstanceContext.Provider>
-      </JestObjectMetadataItemSetter>
-    </MockedProvider>
-  </RecoilRoot>
+  <JotaiProvider store={jotaiStore}>
+    <RecoilRoot>
+      <MockedProvider cache={cache}>
+        <JestObjectMetadataItemSetter>
+          <SnackBarComponentInstanceContext.Provider
+            value={{ instanceId: 'snack-bar-manager' }}
+          >
+            {children}
+          </SnackBarComponentInstanceContext.Provider>
+        </JestObjectMetadataItemSetter>
+      </MockedProvider>
+    </RecoilRoot>
+  </JotaiProvider>
 );
 
 describe('useActivityTargetObjectRecords', () => {
   it('return targetObjects', async () => {
+    jotaiStore.set(currentWorkspaceMemberState.atom, mockWorkspaceMembers[0]);
+
+    jotaiStore.set(
+      objectMetadataItemsState.atom,
+      generatedMockObjectMetadataItems,
+    );
+
     const { result } = renderHook(
       () => {
-        const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState,
-        );
-        const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState,
-        );
-
         const setRecordFromStore = useSetRecoilState(
           recordStoreFamilyState(task.id),
         );
@@ -145,17 +149,13 @@ describe('useActivityTargetObjectRecords', () => {
 
         return {
           activityTargetObjectRecords,
-          setCurrentWorkspaceMember,
-          setObjectMetadataItems,
           setRecordFromStore,
         };
       },
       { wrapper: Wrapper },
     );
 
     act(() => {
-      result.current.setCurrentWorkspaceMember(mockWorkspaceMembers[0]);
-      result.current.setObjectMetadataItems(generatedMockObjectMetadataItems);
       result.current.setRecordFromStore(task);
     });
 

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx

@@ -1,11 +1,12 @@
 import { type MockedResponse } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+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 { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import gql from 'graphql-tag';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
 import { mockedTasks } from '~/testing/mock-data/tasks';
@@ -72,31 +73,27 @@ const Wrapper = getJestMetadataAndApolloMocksWrapper({
 const mockObjectMetadataItems = generatedMockObjectMetadataItems;
 
 describe('useOpenCreateActivityDrawer', () => {
+  beforeEach(() => {
+    jotaiStore.set(objectMetadataItemsState.atom, mockObjectMetadataItems);
+  });
+
   it('works as expected', async () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenCreateActivityDrawer({
           activityObjectNameSingular: CoreObjectNameSingular.Note,
         });
         const viewableRecordId = useRecoilValue(viewableRecordIdState);
-        const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState,
-        );
         return {
           openActivityRightDrawer,
           viewableRecordId,
-          setObjectMetadataItems,
         };
       },
       {
         wrapper: Wrapper,
       },
     );
 
-    act(() => {
-      result.current.setObjectMetadataItems(mockObjectMetadataItems);
-    });
-
     expect(result.current.viewableRecordId).toBeNull();
     await act(async () => {
       result.current.openActivityRightDrawer({

packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts

@@ -7,14 +7,15 @@ 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 { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type Nullable } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useActivityTargetObjectRecords = (
   activityRecordId?: string,
   activityTargets?: Nullable<NoteTarget[] | TaskTarget[]>,
 ) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   const activity = useRecoilValue(
     recordStoreFamilyState(activityRecordId ?? ''),