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/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
-          .map((field) => {
-            const existingField = view.viewFields.find(
-              (viewField) => viewField.id === field.id,
+        const currentViewFields = view.viewFields;
+
+        const viewFieldsToUpdate = viewFieldsToSave
+          .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,
-                  size: field.size,
-                  isVisible: field.isVisible,
+                  position: viewFieldToSave.position,
+                  size: viewFieldToSave.size,
+                  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);
       },
     [