refactor: use react-hook-form to validate Settings/DataModel/Field Ab…

…out form

Part of #4295

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

@@ -2,14 +2,15 @@ import { RelationType } from '@/settings/data-model/types/RelationType';
 import {
   CreateRelationInput,
   Field,
+  FieldMetadataType,
   RelationMetadataType,
 } from '~/generated-metadata/graphql';
 
 import { formatFieldMetadataItemInput } from './formatFieldMetadataItemInput';
 
 export type FormatRelationMetadataInputParams = {
   relationType: RelationType;
-  field: Pick<Field, 'label' | 'icon' | 'description' | 'type'>;
+  field: Pick<Field, 'label' | 'icon' | 'description'>;
   objectMetadataId: string;
   connect: {
     field: Pick<Field, 'label' | 'icon'>;
@@ -37,13 +38,19 @@ export const formatRelationMetadataInput = (
     icon: fromIcon,
     label: fromLabel,
     name: fromName,
-  } = formatFieldMetadataItemInput(fromField);
+  } = formatFieldMetadataItemInput({
+    type: FieldMetadataType.Relation,
+    ...fromField,
+  });
   const {
     description: toDescription,
     icon: toIcon,
     label: toLabel,
     name: toName,
-  } = formatFieldMetadataItemInput(toField);
+  } = formatFieldMetadataItemInput({
+    type: FieldMetadataType.Relation,
+    ...toField,
+  });
 
   return {
     fromDescription,

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm.tsx

@@ -0,0 +1,87 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+
+export const settingsDataModelFieldAboutFormSchema =
+  fieldMetadataItemSchema.pick({
+    description: true,
+    icon: true,
+    label: true,
+  });
+
+type SettingsDataModelFieldAboutFormValues = z.infer<
+  typeof settingsDataModelFieldAboutFormSchema
+>;
+
+type SettingsDataModelFieldAboutFormProps = {
+  disabled?: boolean;
+  fieldMetadataItem?: FieldMetadataItem;
+};
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+export const SettingsDataModelFieldAboutForm = ({
+  disabled,
+  fieldMetadataItem,
+}: SettingsDataModelFieldAboutFormProps) => {
+  const { control } = useFormContext<SettingsDataModelFieldAboutFormValues>();
+
+  return (
+    <>
+      <StyledInputsContainer>
+        <Controller
+          name="icon"
+          control={control}
+          defaultValue={fieldMetadataItem?.icon ?? 'IconUsers'}
+          render={({ field: { onChange, value } }) => (
+            <IconPicker
+              disabled={disabled}
+              selectedIconKey={value}
+              onChange={({ iconKey }) => onChange(iconKey)}
+              variant="primary"
+            />
+          )}
+        />
+        <Controller
+          name="label"
+          control={control}
+          defaultValue={fieldMetadataItem?.label}
+          render={({ field: { onChange, value } }) => (
+            <TextInput
+              placeholder="Employees"
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+              fullWidth
+            />
+          )}
+        />
+      </StyledInputsContainer>
+      <Controller
+        name="description"
+        control={control}
+        defaultValue={fieldMetadataItem?.description}
+        render={({ field: { onChange, value } }) => (
+          <TextArea
+            placeholder="Write a description"
+            minRows={4}
+            value={value ?? undefined}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        )}
+      />
+    </>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldAboutForm.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { mockedPersonObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SettingsDataModelFieldAboutForm } from '../SettingsDataModelFieldAboutForm';
+
+const meta: Meta<typeof SettingsDataModelFieldAboutForm> = {
+  title: 'Modules/Settings/DataModel/SettingsDataModelFieldAboutForm',
+  component: SettingsDataModelFieldAboutForm,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsDataModelFieldAboutForm>;
+
+export const Default: Story = {};
+
+export const WithDefaultValues: Story = {
+  args: {
+    fieldMetadataItem: mockedPersonObjectMetadataItem.fields.find(
+      ({ name }) => name === 'name',
+    )!,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/__tests__/useFieldMetadataForm.test.ts

@@ -1,5 +1,7 @@
 import { act, renderHook } from '@testing-library/react';
 
+import { FieldMetadataType } from '~/generated/graphql';
+
 import { useFieldMetadataForm } from '../useFieldMetadataForm';
 
 describe('useFieldMetadataForm', () => {
@@ -14,8 +16,6 @@ describe('useFieldMetadataForm', () => {
 
     expect(result.current.isInitialized).toBe(true);
     expect(result.current.formValues).toEqual({
-      icon: 'IconUsers',
-      label: '',
       type: 'TEXT',
       currency: { currencyCode: 'USD' },
       relation: {
@@ -45,7 +45,7 @@ describe('useFieldMetadataForm', () => {
     expect(result.current.hasSelectFormChanged).toBe(false);
 
     act(() => {
-      result.current.handleFormChange({ label: 'New Label' });
+      result.current.handleFormChange({ type: FieldMetadataType.Number });
     });
 
     expect(result.current.hasFieldFormChanged).toBe(true);

packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/useFieldMetadataForm.ts

@@ -15,16 +15,11 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { SettingsDataModelFieldSettingsFormValues } from '../components/SettingsDataModelFieldSettingsFormCard';
 
 type FormValues = {
-  description?: string;
-  icon: string;
-  label: string;
   defaultValue: any;
   type: SettingsSupportedFieldType;
 } & SettingsDataModelFieldSettingsFormValues;
 
 export const fieldMetadataFormDefaultValues: FormValues = {
-  icon: 'IconUsers',
-  label: '',
   type: FieldMetadataType.Text,
   currency: { currencyCode: CurrencyCode.USD },
   relation: {
@@ -43,9 +38,6 @@ const relationTargetFieldSchema = z.object({
   defaultValue: z.any(),
 });
 const fieldSchema = z.object({
-  description: z.string().optional(),
-  icon: z.string().startsWith('Icon'),
-  label: z.string().min(1),
   defaultValue: z.any(),
   type: z.enum(
     Object.values(FieldMetadataType) as [

packages/twenty-front/src/modules/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema.ts

@@ -0,0 +1,3 @@
+import { settingsDataModelFieldAboutFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm';
+
+export const settingsFieldFormSchema = settingsDataModelFieldAboutFormSchema;