Implement ViewGroups optimistic rendering (#14388)

# Context

We have recently migrated from workspace.views to core.views. While
doing it, we've lost the optimistic rendering on views in frontend. This
is an issue for viewField and viewGroups that are persisted without
having an intermediate storing layer (viewFilters, viewSorts,
viewFilterGroups are not directly persisted when we do the changes,
therefore we have an underlying layer to keep them and the optimistic
was implemented there already).

ViewFields have been treated in a previous PR, this PR focus on
ViewGroups

## What
Optimistic on ViewGroups

## Other 
+ fix a bug in the sequencing to persist viewFilter + viewFilterGroups

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

@@ -6,10 +6,12 @@ import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/use
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
 import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
 import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
-import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
+import { coreViewsState } from '@/views/states/coreViewState';
 import { type GraphQLView } from '@/views/types/GraphQLView';
 import { type ViewGroup } from '@/views/types/ViewGroup';
 import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
+import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
+import { convertViewTypeToCore } from '@/views/utils/convertViewTypeToCore';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
 import { useCallback } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
@@ -63,7 +65,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
   );
 
   const setAndPersistViewType = useRecoilCallback(
-    ({ snapshot }) =>
+    ({ snapshot, set }) =>
       async (viewType: ViewType) => {
         const currentViewId = snapshot
           .getLoadable(
@@ -73,18 +75,24 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
           )
           .getValue();
 
+        const existingCoreViews = snapshot
+          .getLoadable(coreViewsState)
+          .getValue();
+
         if (!isDefined(currentViewId)) {
           throw new Error('No view id found');
         }
-        const currentView = snapshot
-          .getLoadable(
-            coreViewFromViewIdFamilySelector({ viewId: currentViewId }),
-          )
-          .getValue();
-        if (!isDefined(currentView)) {
+
+        const currentCoreView = existingCoreViews.find(
+          (coreView) => coreView.id === currentViewId,
+        );
+
+        if (!isDefined(currentCoreView)) {
           throw new Error('No current view found');
         }
 
+        const currentView = convertCoreViewToView(currentCoreView);
+
         const updateCurrentViewParams: Partial<GraphQLView> = {};
         updateCurrentViewParams.type = viewType;
 
@@ -105,6 +113,15 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
               );
             }
             setRecordIndexViewType(viewType);
+            set(coreViewsState, [
+              ...existingCoreViews.filter(
+                (coreView) => coreView.id !== currentView.id,
+              ),
+              {
+                ...currentCoreView,
+                type: convertViewTypeToCore(viewType),
+              },
+            ]);
 
             if (shouldChangeIcon(currentView.icon, currentView.type)) {
               updateCurrentViewParams.icon =
@@ -114,6 +131,16 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
           }
           case ViewType.Table:
             setRecordIndexViewType(viewType);
+            set(coreViewsState, [
+              ...existingCoreViews.filter(
+                (coreView) => coreView.id !== currentView.id,
+              ),
+              {
+                ...currentCoreView,
+                type: convertViewTypeToCore(viewType),
+              },
+            ]);
+
             if (shouldChangeIcon(currentView.icon, currentView.type)) {
               updateCurrentViewParams.icon =
                 viewTypeIconMapping(viewType).displayName;

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleRecordGroupField.ts

@@ -110,7 +110,12 @@ export const useHandleRecordGroupField = () => {
         }
 
         if (viewGroupsToDelete.length > 0) {
-          await deleteViewGroupRecords(viewGroupsToDelete);
+          await deleteViewGroupRecords(
+            viewGroupsToDelete.map((group) => ({
+              id: group.id,
+              viewId: view.id,
+            })),
+          );
         }
       },
     [
@@ -144,7 +149,12 @@ export const useHandleRecordGroupField = () => {
           return;
         }
 
-        await deleteViewGroupRecords(view.viewGroups);
+        await deleteViewGroupRecords(
+          view.viewGroups.map((group) => ({
+            id: group.id,
+            viewId: view.id,
+          })),
+        );
 
         setRecordGroupsFromViewGroups(view.id, [], objectMetadataItem);
       },