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/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx

@@ -36,7 +36,6 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const {
     viewType,
     currentContentId,
-    recordIndexId,
     objectMetadataItem,
     onContentChange,
     resetContent,
@@ -64,9 +63,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const {
     handleRecordGroupFieldChange: setRecordGroupField,
     resetRecordGroupField,
-  } = useHandleRecordGroupField({
-    viewBarComponentId: recordIndexId,
-  });
+  } = useHandleRecordGroupField();
 
   const newSelectFieldSettingsUrl = getSettingsPath(
     SettingsPath.ObjectNewFieldConfigure,

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent';
 import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
@@ -16,6 +15,7 @@ import { ViewType } from '@/views/types/ViewType';
 import { useEffect } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -45,21 +45,18 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
             value={{ instanceId, onColumnsChange: () => {} }}
           >
             <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-              <ContextStoreComponentInstanceContext.Provider
-                value={{ instanceId }}
+              <MemoryRouter
+                initialEntries={['/one', '/two', { pathname: '/three' }]}
+                initialIndex={1}
               >
-                <MemoryRouter
-                  initialEntries={['/one', '/two', { pathname: '/three' }]}
-                  initialIndex={1}
-                >
-                  <Story />
-                </MemoryRouter>
-              </ContextStoreComponentInstanceContext.Provider>
+                <Story />
+              </MemoryRouter>
             </ViewComponentInstanceContext.Provider>
           </RecordTableComponentInstanceContext.Provider>
         </RecordFiltersComponentInstanceContext.Provider>
       );
     },
+    ContextStoreDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
     ComponentDecorator,

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

@@ -26,13 +26,12 @@ type useObjectOptionsForBoardParams = {
 export const useObjectOptionsForBoard = ({
   objectNameSingular,
   recordBoardId,
-  viewBarId,
 }: useObjectOptionsForBoardParams) => {
   const [recordIndexFieldDefinitions, setRecordIndexFieldDefinitions] =
     useRecoilState(recordIndexFieldDefinitionsState);
 
-  const { saveViewFields } = useSaveCurrentViewFields(viewBarId);
-  const { updateCurrentView } = useUpdateCurrentView(viewBarId);
+  const { saveViewFields } = useSaveCurrentViewFields();
+  const { updateCurrentView } = useUpdateCurrentView();
 
   const [isCompactModeActive, setIsCompactModeActive] =
     useRecoilComponentStateV2(