breaking (soft) - Migrate viewGroup.fieldMetadataId -> view.mainGroupByFieldMetadataId (2/3) (#16277)

Should be merged once #16206 has
been released + command run to prod

In this PR
- Remove usage of viewGroup.fieldMetadataId, both in BE and FE states. 
- But we still need to properly populate it until we fully remove
viewGroup.fieldMetadataId from db and ORM entity (upcoming 3rd PR out of
3). fieldMetadataId was removed from CoreViewGroup type and
CreateViewGroupInput and is determined BE-side based on the associated
view's mainGroupByFieldMetadataId. **I expect this means a downtime on
viewGroup creation, until both FE and BE are deployed and cache is
flushed.** This seems acceptable to me as it only regards viewGroup
creation.
    - this information is replaced by view.mainGroupByFieldMetadataID
- Handle view group creation, update and deletion in the BE as a
side-effect of a view creation, update or deletion. Optimistic effects
are still used
- Add validation at view creation or update regarding
mainGroupByFieldMetadata

Left to do in 3rd PR
- Remove viewGroup.fieldMetadataId from db and ORM entity
- Restore feature allowing to update an existing grouped view's group by
field (already OK on BE side but need to rebuild FE optimistic)

Author: ijreilly

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -42,7 +42,6 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
               ({
                 id: v4(),
                 __typename: 'ViewGroup',
-                fieldMetadataId: randomFieldForKanban,
                 fieldValue: option.value,
                 isVisible: true,
                 position: index,
@@ -55,14 +54,15 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
         fieldValue: '',
         position: viewGroupsToCreate.length,
         isVisible: true,
-        fieldMetadataId: randomFieldForKanban,
       } satisfies ViewGroup);
 
       await createViewGroups({
-        inputs: viewGroupsToCreate.map(({ __typename, ...viewGroup }) => ({
-          ...viewGroup,
-          viewId: currentViewId,
-        })),
+        createCoreViewGroupInputs: {
+          inputs: viewGroupsToCreate.map(({ __typename, ...viewGroup }) => ({
+            ...viewGroup,
+            viewId: currentViewId,
+          })),
+        },
       });
 
       return viewGroupsToCreate;

packages/twenty-front/src/generated/graphql.ts

@@ -8,12 +8,14 @@ import { originalDragSelectionComponentState } from '@/object-record/record-drag
 import { processGroupDrop } from '@/object-record/record-drag/utils/processGroupDrop';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId';
+import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 
 export const useProcessTableWithGroupRecordDrop = () => {
@@ -47,6 +49,10 @@ export const useProcessTableWithGroupRecordDrop = () => {
     originalDragSelectionComponentState,
   );
 
+  const groupFieldMetadata = useRecoilComponentValue(
+    recordIndexGroupFieldMetadataItemComponentState,
+  );
+
   const processTableWithGroupRecordDrop = useRecoilCallback(
     ({ snapshot }) =>
       (result: DropResult) => {
@@ -63,7 +69,7 @@ export const useProcessTableWithGroupRecordDrop = () => {
         }
 
         const fieldMetadata = objectMetadataItem.fields.find(
-          (field) => field.id === destinationRecordGroup.fieldMetadataId,
+          (field) => field.id === groupFieldMetadata?.id,
         );
 
         if (!isDefined(fieldMetadata)) {
@@ -110,14 +116,15 @@ export const useProcessTableWithGroupRecordDrop = () => {
         });
       },
     [
-      currentRecordSortsCallbackState,
       objectMetadataItem.fields,
-      recordIdsByGroupFamilyState,
-      updateOneRow,
-      openModal,
-      selectedRowIdsSelector,
       originalDragSelectionCallbackState,
       isDraggingRecordCallbackState,
+      selectedRowIdsSelector,
+      currentRecordSortsCallbackState,
+      recordIdsByGroupFamilyState,
+      groupFieldMetadata?.id,
+      openModal,
+      updateOneRow,
     ],
   );
 

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

@@ -1,21 +1,25 @@
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
+import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useMemo } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
   const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
+  const groupFieldMetadata = useRecoilComponentValue(
+    recordIndexGroupFieldMetadataItemComponentState,
+  );
 
   const recordGroupFilter = useMemo(() => {
     if (isDefined(currentRecordGroupDefinition)) {
       const fieldMetadataItem = fields.find(
-        (fieldMetadataItem) =>
-          fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
+        (fieldMetadataItem) => fieldMetadataItem.id === groupFieldMetadata?.id,
       );
 
       if (!fieldMetadataItem) {
         throw new Error(
-          `Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
+          `Field metadata item with id ${groupFieldMetadata?.id} not found`,
         );
       }
 
@@ -31,7 +35,7 @@ export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
     }
 
     return {};
-  }, [currentRecordGroupDefinition, fields]);
+  }, [currentRecordGroupDefinition, fields, groupFieldMetadata?.id]);
 
   return { recordGroupFilter };
 };

packages/twenty-front/src/modules/object-record/record-drag/hooks/useProcessTableWithGroupRecordDrop.ts

@@ -3,7 +3,9 @@ import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRec
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { visibleRecordGroupIdsComponentFamilySelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentFamilySelector';
 import { type RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
+import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
 import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
 import { type ViewType } from '@/views/types/ViewType';
@@ -37,6 +39,10 @@ export const useReorderRecordGroups = ({
 
   const { saveViewGroups } = useSaveCurrentViewGroups();
 
+  const groupFieldMetadata = useRecoilComponentValue(
+    recordIndexGroupFieldMetadataItemComponentState,
+  );
+
   const reorderRecordGroups = useRecoilCallback(
     ({ snapshot }) =>
       ({ fromIndex, toIndex }: ReorderRecordGroupsParams) => {
@@ -80,17 +86,23 @@ export const useReorderRecordGroups = ({
           ];
         }, []);
 
-        setRecordGroups(
-          updatedRecordGroups,
+        if (!isDefined(groupFieldMetadata?.id)) {
+          throw new Error('mainGroupByFieldMetadataId is required');
+        }
+
+        setRecordGroups({
+          mainGroupByFieldMetadataId: groupFieldMetadata?.id,
+          recordGroups: updatedRecordGroups,
           recordIndexId,
-          objectMetadataItem.id,
-        );
+          objectMetadataItemId: objectMetadataItem.id,
+        });
         saveViewGroups(
           mapRecordGroupDefinitionsToViewGroups(updatedRecordGroups),
         );
       },
     [
       objectMetadataItem.id,
+      groupFieldMetadata?.id,
       recordIndexId,
       saveViewGroups,
       setRecordGroups,

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

@@ -16,11 +16,17 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 export const useSetRecordGroups = () => {
   const setRecordGroups = useRecoilCallback(
     ({ snapshot, set }) =>
-      (
-        recordGroups: RecordGroupDefinition[],
-        recordIndexId: string,
-        objectMetadataItemId: string,
-      ) => {
+      ({
+        mainGroupByFieldMetadataId,
+        recordGroups,
+        recordIndexId,
+        objectMetadataItemId,
+      }: {
+        mainGroupByFieldMetadataId: string;
+        recordGroups: RecordGroupDefinition[];
+        recordIndexId: string;
+        objectMetadataItemId: string;
+      }) => {
         const objectMetadataItems = snapshot
           .getLoadable(objectMetadataItemsState)
           .getValue();
@@ -40,7 +46,8 @@ export const useSetRecordGroups = () => {
             instanceId: recordIndexId,
           }),
         );
-        const fieldMetadataId = recordGroups?.[0]?.fieldMetadataId;
+
+        const fieldMetadataId = mainGroupByFieldMetadataId;
         const fieldMetadata = fieldMetadataId
           ? objectMetadataItem.fields.find(
               (field) => field.id === fieldMetadataId,
@@ -105,26 +112,34 @@ export const useSetRecordGroups = () => {
   );
 
   const setRecordGroupsFromViewGroups = useCallback(
-    (
-      viewId: string,
-      viewGroups: ViewGroup[],
-      objectMetadataItem: ObjectMetadataItem,
-    ) => {
+    ({
+      viewId,
+      mainGroupByFieldMetadataId,
+      viewGroups,
+      objectMetadataItem,
+    }: {
+      viewId: string;
+      mainGroupByFieldMetadataId: string;
+      viewGroups: ViewGroup[];
+      objectMetadataItem: ObjectMetadataItem;
+    }) => {
       const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
         objectMetadataItem.namePlural,
         viewId,
       );
 
       const newGroupDefinitions = mapViewGroupsToRecordGroupDefinitions({
+        mainGroupByFieldMetadataId,
         objectMetadataItem,
         viewGroups,
       });
 
-      setRecordGroups(
-        newGroupDefinitions,
+      setRecordGroups({
+        mainGroupByFieldMetadataId,
+        recordGroups: newGroupDefinitions,
         recordIndexId,
-        objectMetadataItem.id,
-      );
+        objectMetadataItemId: objectMetadataItem.id,
+      });
     },
     [setRecordGroups],
   );

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

@@ -6,7 +6,6 @@ export const enum RecordGroupDefinitionType {
 
 export type RecordGroupDefinition = {
   id: string;
-  fieldMetadataId: string;
   type: RecordGroupDefinitionType;
   title: string;
   value: string | null;