refactor: use react-hook-form for Field type config forms (#5326)

Closes #4295

Note: for the sake of an easier code review, I did not rename/move some
files and added "todo" comments instead so Github is able to match those
files with their previous version.

packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts

@@ -69,18 +69,7 @@ export const variables = {
   disableMetadataField: {
     idToUpdate: fieldId,
     updatePayload: { isActive: false, label: undefined },
-  },
-  editMetadataField: {
-    idToUpdate: '2c43466a-fe9e-4005-8d08-c5836067aa6c',
-    updatePayload: {
-      defaultValue: undefined,
-      description: null,
-      icon: undefined,
-      label: 'New label',
-      name: 'newLabel',
-      options: undefined,
-    },
-  },
+  }
 };
 
 const defaultResponseData = {

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFieldMetadataItem.test.tsx

@@ -68,17 +68,6 @@ const mocks = [
       },
     })),
   },
-  {
-    request: {
-      query: queries.activateMetadataField,
-      variables: variables.editMetadataField,
-    },
-    result: jest.fn(() => ({
-      data: {
-        updateOneField: responseData.default,
-      },
-    })),
-  },
 ];
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
@@ -149,22 +138,4 @@ describe('useFieldMetadataItem', () => {
       });
     });
   });
-
-  it('should editMetadataField', async () => {
-    const { result } = renderHook(() => useFieldMetadataItem(), {
-      wrapper: Wrapper,
-    });
-
-    await act(async () => {
-      const res = await result.current.editMetadataField({
-        id: fieldMetadataItem.id,
-        label: 'New label',
-        type: FieldMetadataType.Text,
-      });
-
-      expect(res.data).toEqual({
-        updateOneField: responseData.default,
-      });
-    });
-  });
 });

packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts

@@ -1,7 +1,3 @@
-import { v4 } from 'uuid';
-
-import { FieldMetadataOption } from '@/object-metadata/types/FieldMetadataOption';
-import { getDefaultValueForBackend } from '@/object-metadata/utils/getDefaultValueForBackend';
 import { Field } from '~/generated/graphql';
 
 import { FieldMetadataItem } from '../types/FieldMetadataItem';
@@ -26,49 +22,12 @@ export const useFieldMetadataItem = () => {
   ) => {
     const formattedInput = formatFieldMetadataItemInput(input);
 
-    const defaultValue = getDefaultValueForBackend(
-      input.defaultValue ?? formattedInput.defaultValue,
-      input.type,
-    );
-
     return createOneFieldMetadataItem({
       ...formattedInput,
-      defaultValue,
       objectMetadataId: input.objectMetadataId,
       type: input.type,
-    });
-  };
-
-  const editMetadataField = (
-    input: Pick<
-      Field,
-      | 'id'
-      | 'label'
-      | 'icon'
-      | 'description'
-      | 'defaultValue'
-      | 'type'
-      | 'options'
-    >,
-  ) => {
-    // In Edit mode, all options need an id,
-    // so we generate an id for newly created options.
-    const inputOptions = input.options?.map((option: FieldMetadataOption) =>
-      option.id ? option : { ...option, id: v4() },
-    );
-    const formattedInput = formatFieldMetadataItemInput({
-      ...input,
-      options: inputOptions,
-    });
-
-    const defaultValue = input.defaultValue ?? formattedInput.defaultValue;
-
-    return updateOneFieldMetadataItem({
-      fieldMetadataIdToUpdate: input.id,
-      updatePayload: {
-        ...formattedInput,
-        defaultValue,
-      },
+      label: formattedInput.label ?? '',
+      name: formattedInput.name ?? '',
     });
   };
 
@@ -92,6 +51,5 @@ export const useFieldMetadataItem = () => {
     createMetadataField,
     disableMetadataField,
     eraseMetadataField,
-    editMetadataField,
   };
 };

packages/twenty-front/src/modules/object-metadata/hooks/useGetRelationMetadata.ts

@@ -12,7 +12,14 @@ import { FieldMetadataItem } from '../types/FieldMetadataItem';
 export const useGetRelationMetadata = () =>
   useRecoilCallback(
     ({ snapshot }) =>
-      ({ fieldMetadataItem }: { fieldMetadataItem: FieldMetadataItem }) => {
+      ({
+        fieldMetadataItem,
+      }: {
+        fieldMetadataItem: Pick<
+          FieldMetadataItem,
+          'fromRelationMetadata' | 'toRelationMetadata' | 'type'
+        >;
+      }) => {
         if (fieldMetadataItem.type !== FieldMetadataType.Relation) return null;
 
         const relationMetadata =