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/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 [relationObjectViews, setRelationObjectViews] = useState<View[]>([]);
-
-  const { objectMetadataItem: viewObjectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular: CoreObjectNameSingular.View,
-  });
+  const [, setObjectViews] = useState<View[]>([]);
+  const [, setRelationObjectViews] = useState<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(
-          relationFormValues.objectMetadataId,
-        );
-
-        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,
-            });
-          });
+        // TODO: fix optimistic update logic
+        // Forcing a refetch for now but it's not ideal
+        await apolloClient.refetchQueries({
+          include: ['FindManyViews', 'CombinedFindManyRecords'],
         });
       } else {
-        const createdMetadataField = await createMetadataField({
+        await createMetadataField({
           ...formValues,
           objectMetadataId: activeObjectMetadataItem.id,
         });
 
-        objectViews.map(async (view) => {
-          const viewFieldToCreate = {
-            viewId: view.id,
-            fieldMetadataId: createdMetadataField.data?.createOneField.id,
-            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,
-          });
+        // TODO: fix optimistic update logic
+        // Forcing a refetch for now but it's not ideal
+        await apolloClient.refetchQueries({
+          include: ['FindManyViews', 'CombinedFindManyRecords'],
         });
       }