fix: reset default value on field type switch in Settings/Data Model field form

thaisguigon · thaisguigon · commit 830c35e4aee2 · 2024-05-20T15:11:52.000+02:00
Closes #5412
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
@@ -3,23 +3,23 @@ import omit from 'lodash.omit';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
+import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
 import {
   SettingsDataModelFieldBooleanForm,
   settingsDataModelFieldBooleanFormSchema,
-} from '@/settings/data-model/components/SettingsDataModelDefaultValue';
-import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
-import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
-import {
-  settingsDataModelFieldMultiSelectFormSchema,
-  settingsDataModelFieldSelectFormSchema,
-} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
-import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
+} from '@/settings/data-model/fields/forms/components/boolean/SettingsDataModelFieldBooleanForm';
 import {
   SettingsDataModelFieldCurrencyForm,
   settingsDataModelFieldCurrencyFormSchema,
-} from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldCurrencyForm';
-import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldRelationSettingsFormCard';
-import { SettingsDataModelFieldSelectSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSelectSettingsFormCard';
+} from '@/settings/data-model/fields/forms/components/currency/SettingsDataModelFieldCurrencyForm';
+import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm';
+import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationSettingsFormCard';
+import {
+  settingsDataModelFieldMultiSelectFormSchema,
+  settingsDataModelFieldSelectFormSchema,
+} from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm';
+import { SettingsDataModelFieldSelectSettingsFormCard } from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectSettingsFormCard';
 import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/boolean/SettingsDataModelFieldBooleanForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/boolean/SettingsDataModelFieldBooleanForm.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { IconCheck, IconX } from 'twenty-ui';
@@ -8,8 +9,6 @@ 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
-
 export const settingsDataModelFieldBooleanFormSchema = z.object({
   defaultValue: z.boolean(),
 });
@@ -33,18 +32,23 @@ const StyledLabel = styled.span`
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin-bottom: 6px;
-  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const SettingsDataModelFieldBooleanForm = ({
   className,
   fieldMetadataItem,
 }: SettingsDataModelFieldBooleanFormProps) => {
-  const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
+  const { control, resetField } =
+    useFormContext<SettingsDataModelFieldBooleanFormValues>();
 
   const isEditMode = isDefined(fieldMetadataItem?.defaultValue);
   const initialValue = fieldMetadataItem?.defaultValue ?? true;
 
+  // Reset defaultValue on mount, so it doesn't conflict with other field types.
+  useEffect(() => {
+    resetField('defaultValue', { defaultValue: initialValue });
+  }, [initialValue, resetField]);
+
   return (
     <StyledContainer>
       <StyledLabel>Default Value</StyledLabel>
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/currency/SettingsDataModelFieldCurrencyForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/currency/SettingsDataModelFieldCurrencyForm.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -13,6 +14,7 @@ import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuote
 
 export const settingsDataModelFieldCurrencyFormSchema = z.object({
   defaultValue: z.object({
+    amountMicros: z.null(),
     currencyCode: simpleQuotesStringSchema.refine(
       (value) =>
         currencyCodeSchema.safeParse(stripSimpleQuotesFromString(value))
@@ -43,19 +45,38 @@ export const SettingsDataModelFieldCurrencyForm = ({
   disabled,
   fieldMetadataItem,
 }: SettingsDataModelFieldCurrencyFormProps) => {
-  const { control } =
+  const { control, resetField } =
     useFormContext<SettingsDataModelFieldCurrencyFormValues>();
 
-  const initialValue =
+  const initialAmountMicrosValue = null;
+  const initialCurrencyCode =
     (fieldMetadataItem?.defaultValue?.currencyCode as CurrencyCode) ??
     CurrencyCode.USD;
+  const initialCurrencyCodeValue =
+    applySimpleQuotesToString(initialCurrencyCode);
+
+  // Reset defaultValue on mount, so it doesn't conflict with other field types.
+  useEffect(() => {
+    resetField('defaultValue', {
+      defaultValue: {
+        amountMicros: initialAmountMicrosValue,
+        currencyCode: initialCurrencyCodeValue,
+      },
+    });
+  }, [initialCurrencyCodeValue, resetField]);
 
   return (
     <CardContent>
+      <Controller
+        name="defaultValue.amountMicros"
+        control={control}
+        defaultValue={initialAmountMicrosValue}
+        render={() => <></>}
+      />
       <Controller
         name="defaultValue.currencyCode"
         control={control}
-        defaultValue={applySimpleQuotesToString(initialValue)}
+        defaultValue={initialCurrencyCodeValue}
         render={({ field: { onChange, value } }) => (
           <Select
             fullWidth
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm.tsx
@@ -7,16 +7,13 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
 import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
+import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
 import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
+import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 
-import { RELATION_TYPES } from '../constants/RelationTypes';
-import { RelationType } from '../types/RelationType';
-
-// TODO: rename to SettingsDataModelFieldRelationForm and move to settings/data-model/fields/forms/components
-
 export const settingsDataModelFieldRelationFormSchema = z.object({
   relation: z.object({
     field: fieldMetadataItemSchema.pick({
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationSettingsFormCard.tsx
@@ -4,11 +4,11 @@ import styled from '@emotion/styled';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
+import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
 import {
   SettingsDataModelFieldRelationForm,
   SettingsDataModelFieldRelationFormValues,
-} from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
-import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
+} from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm';
 import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
 import {
   SettingsDataModelFieldPreviewCard,
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
@@ -23,9 +24,7 @@ import { toSpliced } from '~/utils/array/toSpliced';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuotesStringSchema';
 
-import { SettingsObjectFieldSelectFormOptionRow } from './SettingsObjectFieldSelectFormOptionRow';
-
-// TODO: rename to SettingsDataModelFieldSelectForm and move to settings/data-model/fields/forms/components
+import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
 
 export const settingsDataModelFieldSelectFormSchema = z.object({
   defaultValue: simpleQuotesStringSchema.nullable(),
@@ -87,6 +86,7 @@ export const SettingsDataModelFieldSelectForm = ({
     setValue: setFormValue,
     watch: watchFormValue,
     getValues,
+    resetField,
   } = useFormContext<SettingsDataModelFieldSelectFormValues>();
 
   const handleDragEnd = (
@@ -168,6 +168,11 @@ export const SettingsDataModelFieldSelectForm = ({
     }
   };
 
+  // Reset defaultValue on mount or on field type change, so it doesn't conflict with other field types.
+  useEffect(() => {
+    resetField('defaultValue', { defaultValue: initialDefaultValue });
+  }, [initialDefaultValue, initialOptions, resetField, fieldMetadataItem.type]);
+
   return (
     <>
       <Controller
@@ -195,7 +200,7 @@ export const SettingsDataModelFieldSelectForm = ({
                         index={index}
                         isDragDisabled={options.length === 1}
                         itemComponent={
-                          <SettingsObjectFieldSelectFormOptionRow
+                          <SettingsDataModelFieldSelectFormOptionRow
                             key={option.id}
                             option={option}
                             onChange={(nextOption) => {
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx
@@ -23,7 +23,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
 import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
 
-type SettingsObjectFieldSelectFormOptionRowProps = {
+type SettingsDataModelFieldSelectFormOptionRowProps = {
   className?: string;
   isDefault?: boolean;
   onChange: (value: FieldMetadataItemOption) => void;
@@ -55,15 +55,15 @@ const StyledOptionInput = styled(TextInput)`
   }
 `;
 
-export const SettingsObjectFieldSelectFormOptionRow = ({
+export const SettingsDataModelFieldSelectFormOptionRow = ({
   className,
   isDefault,
   onChange,
   onRemove,
   onSetAsDefault,
   onRemoveAsDefault,
   option,
-}: SettingsObjectFieldSelectFormOptionRowProps) => {
+}: SettingsDataModelFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
 
   const dropdownIds = useMemo(() => {
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectSettingsFormCard.tsx
@@ -8,7 +8,7 @@ import {
   settingsDataModelFieldMultiSelectFormSchema,
   SettingsDataModelFieldSelectForm,
   settingsDataModelFieldSelectFormSchema,
-} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
+} from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm';
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues';
 import {
   SettingsDataModelFieldPreviewCard,
diff --git a/packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts b/packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts
@@ -1,3 +1,5 @@
+import { isString } from '@sniptt/guards';
+
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
@@ -23,17 +25,18 @@ export const getFieldDefaultPreviewValue = ({
   relationObjectMetadataItem?: ObjectMetadataItem;
 }) => {
   if (fieldMetadataItem.type === FieldMetadataType.Select) {
-    const defaultValue = fieldMetadataItem.defaultValue
+    const defaultValue = isString(fieldMetadataItem.defaultValue)
       ? stripSimpleQuotesFromString(fieldMetadataItem.defaultValue)
       : null;
     return defaultValue ?? fieldMetadataItem.options?.[0]?.value ?? null;
   }
 
   if (fieldMetadataItem.type === FieldMetadataType.MultiSelect) {
-    const defaultValues = fieldMetadataItem.defaultValue?.map(
-      (defaultValue: `'${string}'`) =>
-        stripSimpleQuotesFromString(defaultValue),
-    );
+    const defaultValues = Array.isArray(fieldMetadataItem.defaultValue)
+      ? fieldMetadataItem.defaultValue?.map((defaultValue: `'${string}'`) =>
+          stripSimpleQuotesFromString(defaultValue),
+        )
+      : null;
     return defaultValues?.length
       ? defaultValues
       : fieldMetadataItem.options?.map(({ value }) => value) ?? null;
