Fix 5598 - View field creation (#5732)

- Fix duplicate view field creation
- Fix redirect to proper settings data model page
- Refetch view fields after field creation (temporary solution)

Fixes  https://github.com/twentyhq/twenty/issues/5598

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx

@@ -1,10 +1,11 @@
-import { useCallback } from 'react';
+import { useCallback, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { IconSettings, useIcons } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
@@ -14,6 +15,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 export const RecordTableHeaderPlusButtonContent = () => {
+  const { objectMetadataItem } = useContext(RecordTableContext);
   const { closeDropdown } = useDropdown();
 
   const { hiddenTableColumnsSelector } = useRecordTableStates();
@@ -54,7 +56,9 @@ export const RecordTableHeaderPlusButtonContent = () => {
         </>
       )}
       <DropdownMenuItemsContainer>
-        <StyledMenuItemLink to="/settings/objects">
+        <StyledMenuItemLink
+          to={`/settings/objects/${objectMetadataItem.namePlural}`}
+        >
           <MenuItem LeftIcon={IconSettings} text="Customize fields" />
         </StyledMenuItemLink>
       </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts

@@ -43,21 +43,23 @@ export const useTableColumns = (props?: useRecordTableProps) => {
     async (
       viewField: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
     ) => {
-      const isNewColumn = !tableColumns.some(
+      const shouldShowColumn = !visibleTableColumns.some(
-        (tableColumns) =>
+        (visibleColumn) =>
-          tableColumns.fieldMetadataId === viewField.fieldMetadataId,
+          visibleColumn.fieldMetadataId === viewField.fieldMetadataId,
       );
-      const lastTableColumnPosition = [...tableColumns]
+
+      const tableColumnPositions = [...tableColumns]
         .sort((a, b) => b.position - a.position)
         .map((column) => column.position);
 
-      const lastPosition = lastTableColumnPosition[0] ?? 0;
+      const lastPosition = tableColumnPositions[0] ?? 0;
 
-      if (isNewColumn) {
+      if (shouldShowColumn) {
         const newColumn = availableTableColumns.find(
           (availableTableColumn) =>
             availableTableColumn.fieldMetadataId === viewField.fieldMetadataId,
         );
+
         if (!newColumn) return;
 
         const nextColumns = [
@@ -67,7 +69,7 @@ export const useTableColumns = (props?: useRecordTableProps) => {
 
         await handleColumnsChange(nextColumns);
       } else {
-        const nextColumns = tableColumns.map((previousColumn) =>
+        const nextColumns = visibleTableColumns.map((previousColumn) =>
           previousColumn.fieldMetadataId === viewField.fieldMetadataId
             ? { ...previousColumn, isVisible: !viewField.isVisible }
             : previousColumn,
@@ -76,7 +78,12 @@ export const useTableColumns = (props?: useRecordTableProps) => {
         await handleColumnsChange(nextColumns);
       }
     },
-    [tableColumns, availableTableColumns, handleColumnsChange],
+    [
+      tableColumns,
+      availableTableColumns,
+      handleColumnsChange,
+      visibleTableColumns,
+    ],
   );
 
   const handleMoveTableColumn = useCallback(

packages/twenty-front/src/modules/views/hooks/internal/usePersistViewFieldRecords.ts

@@ -78,6 +78,7 @@ export const usePersistViewFieldRecords = () => {
   const updateViewFieldRecords = useCallback(
     (viewFieldsToUpdate: ViewField[]) => {
       if (!viewFieldsToUpdate.length) return;
+
       return Promise.all(
         viewFieldsToUpdate.map((viewField) =>
           apolloClient.mutate({

packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFields.ts

@@ -19,7 +19,7 @@ export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
 
   const saveViewFields = useRecoilCallback(
     ({ set, snapshot }) =>
-      async (fields: ViewField[]) => {
+      async (viewFieldsToSave: ViewField[]) => {
         const currentViewId = snapshot
           .getLoadable(currentViewIdState)
           .getValue();
@@ -29,21 +29,27 @@ export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
         }
 
         set(isPersistingViewFieldsState, true);
+
         const view = await getViewFromCache(currentViewId);
 
         if (isUndefinedOrNull(view)) {
           return;
         }
 
-        const viewFieldsToUpdate = fields
+        const currentViewFields = view.viewFields;
-          .map((field) => {
+
-            const existingField = view.viewFields.find(
+        const viewFieldsToUpdate = viewFieldsToSave
-              (viewField) => viewField.id === field.id,
+          .map((viewFieldToSave) => {
+            const existingField = currentViewFields.find(
+              (currentViewField) =>
+                currentViewField.fieldMetadataId ===
+                viewFieldToSave.fieldMetadataId,
             );
 
             if (isUndefinedOrNull(existingField)) {
               return undefined;
             }
+
             if (
               isDeeplyEqual(
                 {
@@ -52,24 +58,33 @@ export const useSaveCurrentViewFields = (viewBarComponentId?: string) => {
                   isVisible: existingField.isVisible,
                 },
                 {
-                  position: field.position,
+                  position: viewFieldToSave.position,
-                  size: field.size,
+                  size: viewFieldToSave.size,
-                  isVisible: field.isVisible,
+                  isVisible: viewFieldToSave.isVisible,
                 },
               )
             ) {
               return undefined;
             }
-            return field;
+
+            return { ...viewFieldToSave, id: existingField.id };
           })
           .filter(isDefined);
 
-        const viewFieldsToCreate = fields.filter((field) => !field.id);
+        const viewFieldsToCreate = viewFieldsToSave.filter(
+          (viewFieldToSave) =>
+            !currentViewFields.some(
+              (currentViewField) =>
+                currentViewField.fieldMetadataId ===
+                viewFieldToSave.fieldMetadataId,
+            ),
+        );
 
         await Promise.all([
           createViewFieldRecords(viewFieldsToCreate, view),
           updateViewFieldRecords(viewFieldsToUpdate),
         ]);
+
         set(isPersistingViewFieldsState, false);
       },
     [

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Reference, useApolloClient } from '@apollo/client';
+import { useApolloClient } from '@apollo/client';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import pick from 'lodash.pick';
@@ -11,10 +11,7 @@ import { z } from 'zod';
 import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCreateOneRelationMetadataItem';
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { RecordGqlRefEdge } from '@/object-record/cache/types/RecordGqlRefEdge';
-import { modifyRecordFromCache } from '@/object-record/cache/utils/modifyRecordFromCache';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@@ -51,13 +48,12 @@ export const SettingsObjectNewFieldStep2 = () => {
   const { objectSlug = '' } = useParams();
   const { enqueueSnackBar } = useSnackBar();
 
-  const { findActiveObjectMetadataItemBySlug, findObjectMetadataItemById } =
+  const { findActiveObjectMetadataItemBySlug } =
     useFilteredObjectMetadataItems();
 
   const activeObjectMetadataItem =
     findActiveObjectMetadataItemBySlug(objectSlug);
   const { createMetadataField } = useFieldMetadataItem();
-  const cache = useApolloClient().cache;
 
   const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
     mode: 'onTouched',
@@ -70,12 +66,8 @@ export const SettingsObjectNewFieldStep2 = () => {
     }
   }, [activeObjectMetadataItem, navigate]);
 
-  const [objectViews, setObjectViews] = useState<View[]>([]);
+  const [, setObjectViews] = useState<View[]>([]);
-  const [relationObjectViews, setRelationObjectViews] = useState<View[]>([]);
+  const [, setRelationObjectViews] = useState<View[]>([]);
-
-  const { objectMetadataItem: viewObjectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular: CoreObjectNameSingular.View,
-  });
 
   useFindManyRecords<View>({
     objectNameSingular: CoreObjectNameSingular.View,
@@ -111,6 +103,8 @@ export const SettingsObjectNewFieldStep2 = () => {
   const { createOneRelationMetadataItem: createOneRelationMetadata } =
     useCreateOneRelationMetadataItem();
 
+  const apolloClient = useApolloClient();
+
   if (!activeObjectMetadataItem) return null;
 
   const canSave =
@@ -126,7 +120,7 @@ export const SettingsObjectNewFieldStep2 = () => {
       ) {
         const { relation: relationFormValues, ...fieldFormValues } = formValues;
 
-        const createdRelation = await createOneRelationMetadata({
+        await createOneRelationMetadata({
           relationType: relationFormValues.type,
           field: pick(fieldFormValues, ['icon', 'label', 'description']),
           objectMetadataId: activeObjectMetadataItem.id,
@@ -139,111 +133,21 @@ export const SettingsObjectNewFieldStep2 = () => {
           },
         });
 
-        const relationObjectMetadataItem = findObjectMetadataItemById(
+        // TODO: fix optimistic update logic
-          relationFormValues.objectMetadataId,
+        // Forcing a refetch for now but it's not ideal
-        );
+        await apolloClient.refetchQueries({
-
+          include: ['FindManyViews', 'CombinedFindManyRecords'],
-        objectViews.map(async (view) => {
-          const viewFieldToCreate = {
-            viewId: view.id,
-            fieldMetadataId:
-              relationFormValues.type === 'MANY_TO_ONE'
-                ? createdRelation.data?.createOneRelation.toFieldMetadataId
-                : createdRelation.data?.createOneRelation.fromFieldMetadataId,
-            position: activeObjectMetadataItem.fields.length,
-            isVisible: true,
-            size: 100,
-          };
-
-          modifyRecordFromCache({
-            objectMetadataItem: viewObjectMetadataItem,
-            cache: cache,
-            fieldModifiers: {
-              viewFields: (viewFieldsRef, { readField }) => {
-                const edges = readField<{ node: Reference }[]>(
-                  'edges',
-                  viewFieldsRef,
-                );
-
-                if (!edges) return viewFieldsRef;
-
-                return {
-                  ...viewFieldsRef,
-                  edges: [...edges, { node: viewFieldToCreate }],
-                };
-              },
-            },
-            recordId: view.id,
-          });
-
-          relationObjectViews.map(async (view) => {
-            const viewFieldToCreate = {
-              viewId: view.id,
-              fieldMetadataId:
-                relationFormValues.type === 'MANY_TO_ONE'
-                  ? createdRelation.data?.createOneRelation.fromFieldMetadataId
-                  : createdRelation.data?.createOneRelation.toFieldMetadataId,
-              position: relationObjectMetadataItem?.fields.length,
-              isVisible: true,
-              size: 100,
-            };
-            modifyRecordFromCache({
-              objectMetadataItem: viewObjectMetadataItem,
-              cache: cache,
-              fieldModifiers: {
-                viewFields: (viewFieldsRef, { readField }) => {
-                  const edges = readField<{ node: Reference }[]>(
-                    'edges',
-                    viewFieldsRef,
-                  );
-
-                  if (!edges) return viewFieldsRef;
-
-                  return {
-                    ...viewFieldsRef,
-                    edges: [...edges, { node: viewFieldToCreate }],
-                  };
-                },
-              },
-              recordId: view.id,
-            });
-          });
         });
       } else {
-        const createdMetadataField = await createMetadataField({
+        await createMetadataField({
           ...formValues,
           objectMetadataId: activeObjectMetadataItem.id,
         });
 
-        objectViews.map(async (view) => {
+        // TODO: fix optimistic update logic
-          const viewFieldToCreate = {
+        // Forcing a refetch for now but it's not ideal
-            viewId: view.id,
+        await apolloClient.refetchQueries({
-            fieldMetadataId: createdMetadataField.data?.createOneField.id,
+          include: ['FindManyViews', 'CombinedFindManyRecords'],
-            position: activeObjectMetadataItem.fields.length,
-            isVisible: true,
-            size: 100,
-          };
-
-          modifyRecordFromCache({
-            objectMetadataItem: viewObjectMetadataItem,
-            cache: cache,
-            fieldModifiers: {
-              viewFields: (cachedViewFieldsConnection, { readField }) => {
-                const edges = readField<RecordGqlRefEdge[]>(
-                  'edges',
-                  cachedViewFieldsConnection,
-                );
-
-                if (!edges) return cachedViewFieldsConnection;
-
-                return {
-                  ...cachedViewFieldsConnection,
-                  edges: [...edges, { node: viewFieldToCreate }],
-                };
-              },
-            },
-            recordId: view.id,
-          });
         });
       }