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(
-        (tableColumns) =>
-          tableColumns.fieldMetadataId === viewField.fieldMetadataId,
+      const shouldShowColumn = !visibleTableColumns.some(
+        (visibleColumn) =>
+          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
-          .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);
       },
     [