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/utils/__tests__/formatFieldMetadataItemInput.test.ts

@@ -77,7 +77,7 @@ describe('formatFieldMetadataItemInput', () => {
           value: 'OPTION_2',
         },
       ],
-      defaultValue: 'OPTION_1',
+      defaultValue: "'OPTION_1'",
     };
 
     const result = formatFieldMetadataItemInput(input);
@@ -140,7 +140,7 @@ describe('formatFieldMetadataItemInput', () => {
           value: 'OPTION_2',
         },
       ],
-      defaultValue: ['OPTION_1', 'OPTION_2'],
+      defaultValue: ["'OPTION_1'", "'OPTION_2'"],
     };
 
     const result = formatFieldMetadataItemInput(input);

packages/twenty-front/src/modules/object-metadata/utils/__tests__/validateMetadataLabel.test.ts

@@ -1,8 +0,0 @@
-import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
-
-describe('validateMetadataLabel', () => {
-  it('should work as expected', () => {
-    const res = validateMetadataLabel('Pipeline Step');
-    expect(res).toBe(true);
-  });
-});

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemInput.ts

@@ -1,6 +1,8 @@
 import toSnakeCase from 'lodash.snakecase';
 
-import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { getDefaultValueForBackend } from '@/object-metadata/utils/getDefaultValueForBackend';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
 import { isDefined } from '~/utils/isDefined';
 
@@ -21,25 +23,24 @@ export const getOptionValueFromLabel = (label: string) => {
 };
 
 export const formatFieldMetadataItemInput = (
-  input: Pick<
-    Field,
-    'label' | 'icon' | 'description' | 'defaultValue' | 'options'
-  > & { type?: FieldMetadataType },
+  input: Partial<
+    Pick<
+      FieldMetadataItem,
+      'type' | 'label' | 'defaultValue' | 'icon' | 'description'
+    >
+  > & { options?: FieldMetadataOption[] },
 ) => {
-  const options = input.options as FieldMetadataOption[];
+  const options = input.options as FieldMetadataOption[] | undefined;
   let defaultValue = input.defaultValue;
   if (input.type === FieldMetadataType.MultiSelect) {
-    const defaultOptions = options?.filter((option) => option.isDefault);
-    if (isDefined(defaultOptions)) {
-      defaultValue = defaultOptions.map(
-        (defaultOption) => `${getOptionValueFromLabel(defaultOption.label)}`,
-      );
-    }
+    defaultValue = options
+      ?.filter((option) => option.isDefault)
+      ?.map((defaultOption) => getOptionValueFromLabel(defaultOption.label));
   }
   if (input.type === FieldMetadataType.Select) {
     const defaultOption = options?.find((option) => option.isDefault);
     defaultValue = isDefined(defaultOption)
-      ? `${getOptionValueFromLabel(defaultOption.label)}`
+      ? getOptionValueFromLabel(defaultOption.label)
       : undefined;
   }
 
@@ -59,12 +60,17 @@ export const formatFieldMetadataItemInput = (
     }
   }
 
+  const label = input.label?.trim();
+
   return {
-    defaultValue,
+    defaultValue:
+      isDefined(defaultValue) && input.type
+        ? getDefaultValueForBackend(defaultValue, input.type)
+        : undefined,
     description: input.description?.trim() ?? null,
     icon: input.icon,
-    label: input.label.trim(),
-    name: formatMetadataLabelToMetadataNameOrThrows(input.label.trim()),
+    label,
+    name: label ? formatMetadataLabelToMetadataNameOrThrows(label) : undefined,
     options: options?.map((option, index) => ({
       color: option.color,
       id: option.id,

packages/twenty-front/src/modules/object-metadata/utils/formatRelationMetadataInput.ts

@@ -35,14 +35,14 @@ export const formatRelationMetadataInput = (
   const {
     description: fromDescription,
     icon: fromIcon,
-    label: fromLabel,
-    name: fromName,
+    label: fromLabel = '',
+    name: fromName = '',
   } = formatFieldMetadataItemInput(fromField);
   const {
     description: toDescription,
     icon: toIcon,
-    label: toLabel,
-    name: toName,
+    label: toLabel = '',
+    name: toName = '',
   } = formatFieldMetadataItemInput(toField);
 
   return {

packages/twenty-front/src/modules/object-metadata/utils/getDefaultValueForBackend.ts

@@ -13,7 +13,7 @@ export const getDefaultValueForBackend = (
       currencyCode: `'${currencyDefaultValue.currencyCode}'` as CurrencyCode,
     } satisfies FieldCurrencyValue;
   } else if (fieldMetadataType === FieldMetadataType.Select) {
-    return `'${defaultValue}'`;
+    return defaultValue ? `'${defaultValue}'` : null;
   } else if (fieldMetadataType === FieldMetadataType.MultiSelect) {
     return defaultValue.map((value: string) => `'${value}'`);
   }

packages/twenty-front/src/modules/object-metadata/utils/validateMetadataLabel.ts

@@ -1,4 +0,0 @@
-const metadataLabelValidationPattern = /^[^0-9].*$/;
-
-export const validateMetadataLabel = (value: string) =>
-  !!value.match(metadataLabelValidationPattern);