fix: fix several field bugs (#5339)

After discussing with @charlesBochet, several fixes are needed on
fields:
- [x] Disable Boolean field `defaultValue` edition for now (On
`defaultValue` update, newly created records are not taking the updated
`defaultValue` into account. Setting the `defaultValue` on creation is
fine.)
- [x] Disable Phone field creation for now
- [x] For the Person object, display the "Phone" field as a field of
type Phone (right now its type is Text; later we'll migrate it to a
proper Phone field).
- [x] Fix RawJson field display (displaying `[object Object]` in Record
Table cells).
- [x] In Settings/Data Model, on Relation field creation/edition,
"Object destination" select is not working properly if an object was not
manually selected (displays Companies by default but creates a relation
to another random object than Companies).

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelDefaultValue.tsx

@@ -6,6 +6,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { Select } from '@/ui/input/components/Select';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { isDefined } from '~/utils/isDefined';
 
 // TODO: rename to SettingsDataModelFieldBooleanForm and move to settings/data-model/fields/forms/components
 
@@ -41,6 +42,7 @@ export const SettingsDataModelFieldBooleanForm = ({
 }: SettingsDataModelFieldBooleanFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
 
+  const isEditMode = isDefined(fieldMetadataItem?.defaultValue);
   const initialValue = fieldMetadataItem?.defaultValue ?? true;
 
   return (
@@ -54,6 +56,9 @@ export const SettingsDataModelFieldBooleanForm = ({
           <Select
             className={className}
             fullWidth
+            // TODO: temporary fix - disabling edition because after editing the defaultValue,
+            // newly created records are not taking into account the updated defaultValue properly.
+            disabled={isEditMode}
             dropdownId="object-field-default-value-select"
             value={value}
             onChange={onChange}

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx

@@ -1,18 +1,16 @@
-import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { useIcons } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
 import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
+import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { RelationMetadataType } from '~/generated-metadata/graphql';
 
 import { RELATION_TYPES } from '../constants/RelationTypes';
 import { RelationType } from '../types/RelationType';
@@ -32,7 +30,7 @@ export const settingsDataModelFieldRelationFormSchema = z.object({
   }),
 });
 
-type SettingsDataModelFieldRelationFormValues = z.infer<
+export type SettingsDataModelFieldRelationFormValues = z.infer<
   typeof settingsDataModelFieldRelationFormSchema
 >;
 
@@ -79,30 +77,23 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES)
 export const SettingsDataModelFieldRelationForm = ({
   fieldMetadataItem,
 }: SettingsDataModelFieldRelationFormProps) => {
-  const { control } =
+  const { control, watch: watchFormValue } =
     useFormContext<SettingsDataModelFieldRelationFormValues>();
   const { getIcon } = useIcons();
-  const { objectMetadataItems } = useFilteredObjectMetadataItems();
+  const { objectMetadataItems, findObjectMetadataItemById } =
+    useFilteredObjectMetadataItems();
 
-  const getRelationMetadata = useGetRelationMetadata();
   const {
-    relationFieldMetadataItem,
-    relationType,
-    relationObjectMetadataItem,
-  } =
-    useMemo(
-      () =>
-        fieldMetadataItem ? getRelationMetadata({ fieldMetadataItem }) : null,
-      [fieldMetadataItem, getRelationMetadata],
-    ) ?? {};
+    disableFieldEdition,
+    disableRelationEdition,
+    initialRelationFieldMetadataItem,
+    initialRelationObjectMetadataItem,
+    initialRelationType,
+  } = useRelationSettingsFormInitialValues({ fieldMetadataItem });
 
-  const disableFieldEdition =
-    relationFieldMetadataItem && !relationFieldMetadataItem.isCustom;
-
-  const disableRelationEdition = !!relationFieldMetadataItem;
-
-  const selectedObjectMetadataItem =
-    relationObjectMetadataItem ?? objectMetadataItems[0];
+  const selectedObjectMetadataItem = findObjectMetadataItemById(
+    watchFormValue('relation.objectMetadataId'),
+  );
 
   return (
     <StyledContainer>
@@ -110,7 +101,7 @@ export const SettingsDataModelFieldRelationForm = ({
         <Controller
           name="relation.type"
           control={control}
-          defaultValue={relationType ?? RelationMetadataType.OneToMany}
+          defaultValue={initialRelationType}
           render={({ field: { onChange, value } }) => (
             <Select
               label="Relation type"
@@ -126,7 +117,7 @@ export const SettingsDataModelFieldRelationForm = ({
         <Controller
           name="relation.objectMetadataId"
           control={control}
-          defaultValue={selectedObjectMetadataItem?.id}
+          defaultValue={initialRelationObjectMetadataItem.id}
           render={({ field: { onChange, value } }) => (
             <Select
               label="Object destination"
@@ -153,11 +144,7 @@ export const SettingsDataModelFieldRelationForm = ({
         <Controller
           name="relation.field.icon"
           control={control}
-          defaultValue={
-            relationFieldMetadataItem?.icon ??
-            relationObjectMetadataItem?.icon ??
-            'IconUsers'
-          }
+          defaultValue={initialRelationFieldMetadataItem.icon}
           render={({ field: { onChange, value } }) => (
             <IconPicker
               disabled={disableFieldEdition}
@@ -171,7 +158,7 @@ export const SettingsDataModelFieldRelationForm = ({
         <Controller
           name="relation.field.label"
           control={control}
-          defaultValue={relationFieldMetadataItem?.label}
+          defaultValue={initialRelationFieldMetadataItem.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
               disabled={disableFieldEdition}