Fix view groups update after field metadata update

packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneFieldMetadataItem.ts

@@ -13,6 +13,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { useSetRecoilState } from 'recoil';
+
+import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
+import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
+import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
+import { isDefined } from 'twenty-shared';
 import { useApolloMetadataClient } from './useApolloMetadataClient';
 
 export const useUpdateOneFieldMetadataItem = () => {
@@ -21,6 +26,8 @@ export const useUpdateOneFieldMetadataItem = () => {
   const { refreshObjectMetadataItems } =
     useRefreshObjectMetadataItems('network-only');
 
+  const { setRecordGroupsFromViewGroups } = useSetRecordGroups();
+
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
 
   const { findManyRecordsQuery: findManyViewsQuery } = useFindManyRecordsQuery({
@@ -70,12 +77,14 @@ export const useUpdateOneFieldMetadataItem = () => {
       },
     });
 
-    await refreshObjectMetadataItems();
+    const objectMetadataItemsRefreshed = await refreshObjectMetadataItems();
 
     const { data } = await apolloClient.query({ query: GET_CURRENT_USER });
     setCurrentWorkspace(data?.currentUser?.currentWorkspace);
 
-    await apolloClient.query({
+    const { data: viewConnection } = await apolloClient.query<{
+      views: RecordGqlConnection;
+    }>({
       query: findManyViewsQuery,
       variables: {
         filter: {
@@ -87,6 +96,25 @@ export const useUpdateOneFieldMetadataItem = () => {
       fetchPolicy: 'network-only',
     });
 
+    const viewRecords = getRecordsFromRecordConnection({
+      recordConnection: viewConnection?.views,
+    });
+
+    for (const view of viewRecords) {
+      const correspondingObjectMetadataItemRefreshed =
+        objectMetadataItemsRefreshed?.find(
+          (item) => item.id === objectMetadataId,
+        );
+
+      if (isDefined(correspondingObjectMetadataItemRefreshed)) {
+        setRecordGroupsFromViewGroups(
+          view.id,
+          view.viewGroups,
+          correspondingObjectMetadataItemRefreshed,
+        );
+      }
+    }
+
     return result;
   };
 

packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorder.ts

@@ -1,5 +1,6 @@
 import { OnDragEndResponder } from '@hello-pangea/dnd';
 
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { visibleRecordGroupIdsComponentFamilySelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentFamilySelector';
@@ -24,6 +25,7 @@ export const useRecordGroupReorder = ({
   viewType,
 }: UseRecordGroupHandlersParams) => {
   const { setRecordGroups } = useSetRecordGroups();
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
 
   const visibleRecordGroupIdsFamilySelector = useRecoilComponentCallbackStateV2(
     visibleRecordGroupIdsComponentFamilySelector,
@@ -78,12 +80,13 @@ export const useRecordGroupReorder = ({
           ];
         }, []);
 
-        setRecordGroups(updatedRecordGroups, viewBarId);
+        setRecordGroups(updatedRecordGroups, viewBarId, objectMetadataItem.id);
         saveViewGroups(
           mapRecordGroupDefinitionsToViewGroups(updatedRecordGroups),
         );
       },
     [
+      objectMetadataItem,
       saveViewGroups,
       setRecordGroups,
       viewBarId,

packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroups.ts

@@ -1,7 +1,5 @@
-import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
-import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
-import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
@@ -16,19 +14,13 @@ import { isDefined } from 'twenty-shared';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useSetRecordGroups = () => {
-  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
-
   const setRecordGroups = useRecoilCallback(
     ({ snapshot, set }) =>
-      (recordGroups: RecordGroupDefinition[], recordIndexId: string) => {
-        const objectMetadataItemId = snapshot
-          .getLoadable(
-            contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
-              instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
-            }),
-          )
-          .getValue();
-
+      (
+        recordGroups: RecordGroupDefinition[],
+        recordIndexId: string,
+        objectMetadataItemId: string,
+      ) => {
         const objectMetadataItems = snapshot
           .getLoadable(objectMetadataItemsState)
           .getValue();
@@ -113,7 +105,11 @@ export const useSetRecordGroups = () => {
   );
 
   const setRecordGroupsFromViewGroups = useCallback(
-    (viewId: string, viewGroups: ViewGroup[]) => {
+    (
+      viewId: string,
+      viewGroups: ViewGroup[],
+      objectMetadataItem: ObjectMetadataItem,
+    ) => {
       const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
         objectMetadataItem.namePlural,
         viewId,
@@ -124,9 +120,13 @@ export const useSetRecordGroups = () => {
         viewGroups,
       });
 
-      setRecordGroups(newGroupDefinitions, recordIndexId);
+      setRecordGroups(
+        newGroupDefinitions,
+        recordIndexId,
+        objectMetadataItem.id,
+      );
     },
-    [objectMetadataItem, setRecordGroups],
+    [setRecordGroups],
   );
 
   return {

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

@@ -1,3 +1,4 @@
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
@@ -17,6 +18,8 @@ export const useHandleRecordGroupField = () => {
     contextStoreCurrentViewIdComponentState,
   );
 
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
   const { getViewFromPrefetchState } = useGetViewFromPrefetchState();
 
   const { setRecordGroupsFromViewGroups } = useSetRecordGroups();
@@ -96,7 +99,11 @@ export const useHandleRecordGroupField = () => {
           ...viewGroupsToCreate,
         ];
 
-        setRecordGroupsFromViewGroups(view.id, newViewGroupsList);
+        setRecordGroupsFromViewGroups(
+          view.id,
+          newViewGroupsList,
+          objectMetadataItem,
+        );
 
         if (viewGroupsToCreate.length > 0) {
           await createViewGroupRecords({ viewGroupsToCreate, viewId: view.id });
@@ -107,6 +114,7 @@ export const useHandleRecordGroupField = () => {
         }
       },
     [
+      objectMetadataItem,
       currentViewIdCallbackState,
       getViewFromPrefetchState,
       setRecordGroupsFromViewGroups,

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

@@ -176,7 +176,12 @@ export const useLoadRecordIndexStates = () => {
           .getValue();
 
         onViewFieldsChange(view.viewFields, objectMetadataItem, recordIndexId);
-        setRecordGroupsFromViewGroups(view.id, view.viewGroups);
+
+        setRecordGroupsFromViewGroups(
+          view.id,
+          view.viewGroups,
+          objectMetadataItem,
+        );
 
         setContextStoreTargetedRecordsRuleComponentState((prev) => ({
           ...prev,