Refacto views (#10272)

In this huge (sorry!) PR:
- introducing objectMetadataItem in contextStore instead of
objectMetadataId which is more convenient
- splitting some big hooks into smaller parts to avoid re-renders
- removing Effects to avoid re-renders (especially onViewChange)
- making the view prefetch separate from favorites to avoid re-renders
- making the view prefetch load a state and add selectors on top of it
to avoir re-renders

As a result, the performance is WAY better (I suspect the favorite
implementation to trigger a lot of re-renders unfortunately).
However, we are still facing a random app freeze on view creation. I
could not investigate the root cause. As this seems to be already there
in the precedent release, we can move forward but this seems a urgent
follow up to me ==> EDIT: I've found the root cause after a few ours of
deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect...

prastoin edit: close https://github.com/twentyhq/twenty/issues/10253

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: prastoin <paul@twenty.com>

packages/twenty-front/src/testing/decorators/ContextStoreDecorator.tsx

@@ -0,0 +1,40 @@
+import { Decorator } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { isUndefined } from '@sniptt/guards';
+import { getCompanyObjectMetadataItem } from '~/testing/mock-data/companies';
+
+export const ContextStoreDecorator: Decorator = (Story, context) => {
+  const { contextStore } = context.parameters;
+
+  let componentInstanceId = contextStore?.componentInstanceId;
+
+  if (isUndefined(componentInstanceId)) {
+    componentInstanceId = 'main-context-store';
+  }
+
+  const setCurrentObjectMetadataItem = useSetRecoilComponentStateV2(
+    contextStoreCurrentObjectMetadataItemComponentState,
+    componentInstanceId,
+  );
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const objectMetadataItem = getCompanyObjectMetadataItem();
+
+  useEffect(() => {
+    setCurrentObjectMetadataItem(objectMetadataItem);
+    setIsLoaded(true);
+  }, [setCurrentObjectMetadataItem, objectMetadataItem]);
+
+  return (
+    <ContextStoreComponentInstanceContext.Provider
+      value={{ instanceId: componentInstanceId }}
+    >
+      {isLoaded && <Story />}
+    </ContextStoreComponentInstanceContext.Provider>
+  );
+};

packages/twenty-front/src/testing/decorators/PrefetchLoadedDecorator.tsx

@@ -5,9 +5,6 @@ import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedF
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 
 export const PrefetchLoadedDecorator: Decorator = (Story) => {
-  const setAreViewsPrefetched = useSetRecoilState(
-    prefetchIsLoadedFamilyState(PrefetchKey.AllViews),
-  );
   const setAreFavoritesPrefetched = useSetRecoilState(
     prefetchIsLoadedFamilyState(PrefetchKey.AllFavorites),
   );
@@ -15,7 +12,6 @@ export const PrefetchLoadedDecorator: Decorator = (Story) => {
     prefetchIsLoadedFamilyState(PrefetchKey.AllFavoritesFolders),
   );
 
-  setAreViewsPrefetched(true);
   setAreFavoritesPrefetched(true);
   setAreFavoritesFoldersPrefetched(true);
 

packages/twenty-front/src/testing/decorators/PrefetchLoadingDecorator.tsx

@@ -5,14 +5,10 @@ import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedF
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 
 export const PrefetchLoadingDecorator: Decorator = (Story) => {
-  const setAreViewsPrefetched = useSetRecoilState(
-    prefetchIsLoadedFamilyState(PrefetchKey.AllViews),
-  );
   const setAreFavoritesPrefetched = useSetRecoilState(
-    prefetchIsLoadedFamilyState(PrefetchKey.AllFavorites),
+    prefetchIsLoadedFamilyState(PrefetchKey.AllFavoritesFolders),
   );
 
-  setAreViewsPrefetched(false);
   setAreFavoritesPrefetched(false);
 
   return <Story />;

packages/twenty-front/src/testing/jest/JestContextStoreSetter.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
 
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import {
@@ -34,8 +34,8 @@ export const JestContextStoreSetter = ({
     contextStoreTargetedRecordsRuleComponentState,
   );
 
-  const setContextStoreCurrentObjectMetadataId = useSetRecoilComponentStateV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
+  const setContextStoreCurrentObjectMetadataItem = useSetRecoilComponentStateV2(
+    contextStoreCurrentObjectMetadataItemComponentState,
   );
 
   const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentStateV2(
@@ -55,20 +55,21 @@ export const JestContextStoreSetter = ({
   const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     setContextStoreTargetedRecordsRule(contextStoreTargetedRecordsRule);
-    setContextStoreCurrentObjectMetadataId(contextStoreCurrentObjectMetadataId);
+    setContextStoreCurrentObjectMetadataItem(objectMetadataItem);
     setContextStoreNumberOfSelectedRecords(contextStoreNumberOfSelectedRecords);
     setcontextStoreFiltersComponentState(contextStoreFilters);
 
     setIsLoaded(true);
   }, [
     setContextStoreTargetedRecordsRule,
-    setContextStoreCurrentObjectMetadataId,
+    setContextStoreCurrentObjectMetadataItem,
     contextStoreTargetedRecordsRule,
     contextStoreCurrentObjectMetadataId,
     setContextStoreNumberOfSelectedRecords,
     contextStoreNumberOfSelectedRecords,
     setcontextStoreFiltersComponentState,
     contextStoreFilters,
+    objectMetadataItem,
   ]);
 
   return isLoaded ? <>{children}</> : null;