Improve Jotai work (#18205)

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx

@@ -1,24 +1,40 @@
 import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
+import { objectOptionsDropdownSearchInputComponentState } from '@/object-record/object-options-dropdown/states/objectOptionsDropdownSearchInputComponentState';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { renderHook } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
 import { act } from 'react';
 import { RecoilRoot } from 'recoil';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+const INSTANCE_ID = 'myViewInstanceId';
+
 describe('useSearchRecordGroupField', () => {
+  beforeEach(() => {
+    jotaiStore.set(
+      objectOptionsDropdownSearchInputComponentState.atomFamily({
+        instanceId: INSTANCE_ID,
+      }),
+      '',
+    );
+  });
+
   const renderWithContext = (contextValue: any) =>
     renderHook(() => useSearchRecordGroupField(), {
       wrapper: ({ children }) => (
-        <RecoilRoot>
-          <RecordIndexContextProvider value={contextValue}>
-            <ViewComponentInstanceContext.Provider
-              value={{ instanceId: 'myViewInstanceId' }}
-            >
-              {children}
-            </ViewComponentInstanceContext.Provider>
-          </RecordIndexContextProvider>
-        </RecoilRoot>
+        <JotaiProvider store={jotaiStore}>
+          <RecoilRoot>
+            <RecordIndexContextProvider value={contextValue}>
+              <ViewComponentInstanceContext.Provider
+                value={{ instanceId: INSTANCE_ID }}
+              >
+                {children}
+              </ViewComponentInstanceContext.Provider>
+            </RecordIndexContextProvider>
+          </RecoilRoot>
+        </JotaiProvider>
       ),
     });
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu.ts

@@ -4,7 +4,6 @@ import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates';
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
-import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { type GraphQLView } from '@/views/types/GraphQLView';
@@ -40,7 +39,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
         }),
       );
 
-      const existingCoreViews = jotaiStore.get(coreViewsState.atom);
+      const existingCoreViews = store.get(coreViewsState.atom);
 
       if (!isDefined(currentViewId)) {
         throw new Error('No view id found');
@@ -75,7 +74,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
           }
 
           setRecordIndexViewType(viewType);
-          jotaiStore.set(coreViewsState.atom, [
+          store.set(coreViewsState.atom, [
             ...existingCoreViews.filter(
               (coreView) => coreView.id !== currentView.id,
             ),
@@ -96,7 +95,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
           updateCurrentViewParams.mainGroupByFieldMetadataId = null;
           await updateCurrentView(updateCurrentViewParams);
           setRecordIndexViewType(viewType);
-          jotaiStore.set(coreViewsState.atom, [
+          store.set(coreViewsState.atom, [
             ...existingCoreViews.filter(
               (coreView) => coreView.id !== currentView.id,
             ),
@@ -116,7 +115,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
           const calendarFieldMetadataId = availableFieldsForCalendar[0].id;
 
           setRecordIndexViewType(viewType);
-          jotaiStore.set(coreViewsState.atom, [
+          store.set(coreViewsState.atom, [
             ...existingCoreViews.filter(
               (coreView) => coreView.id !== currentView.id,
             ),