Fix display empty value if boolean instead of false on show page (#4468)

* default value boolean fixed

* fixed creation, fixed updating a value to false

* fixed default value for default value if boolean

* fixed tests

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { SettingsDataModelDefaultValueForm } from '@/settings/data-model/components/SettingsDataModelDefaultValue';
 import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
 import {
   SettingsObjectFieldCurrencyForm,
@@ -26,6 +27,7 @@ export type SettingsDataModelFieldSettingsFormValues = {
   currency: SettingsObjectFieldCurrencyFormValues;
   relation: SettingsObjectFieldRelationFormValues;
   select: SettingsObjectFieldSelectFormValues;
+  defaultValue: any;
 };
 
 type SettingsDataModelFieldSettingsFormCardProps = {
@@ -152,6 +154,13 @@ export const SettingsDataModelFieldSettingsFormCard = ({
               onChange({ select: nextSelectValues })
             }
           />
+        ) : fieldMetadataItem.type === FieldMetadataType.Boolean ? (
+          <SettingsDataModelDefaultValueForm
+            value={values.defaultValue}
+            onChange={(nextValueDefaultValue) =>
+              onChange({ defaultValue: nextValueDefaultValue })
+            }
+          />
         ) : undefined
       }
     />

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

@@ -6,12 +6,19 @@ import {
 } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
 import { Select, SelectOption } from '@/ui/input/components/Select';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsDataModelFieldTypeSelectProps = {
   className?: string;
   disabled?: boolean;
   excludedFieldTypes?: SettingsSupportedFieldType[];
-  onChange?: ({ type }: { type: SettingsSupportedFieldType }) => void;
+  onChange?: ({
+    type,
+    defaultValue,
+  }: {
+    type: SettingsSupportedFieldType;
+    defaultValue: any;
+  }) => void;
   value?: SettingsSupportedFieldType;
 };
 
@@ -41,7 +48,12 @@ export const SettingsDataModelFieldTypeSelect = ({
       disabled={disabled}
       dropdownId="object-field-type-select"
       value={value}
-      onChange={(value) => onChange?.({ type: value })}
+      onChange={(value) =>
+        onChange?.({
+          type: value,
+          defaultValue: value === FieldMetadataType.Boolean ? false : undefined,
+        })
+      }
       options={fieldTypeOptions}
     />
   );

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

@@ -26,6 +26,7 @@ const defaultValues = {
   currency: fieldMetadataFormDefaultValues.currency,
   relation: fieldMetadataFormDefaultValues.relation,
   select: fieldMetadataFormDefaultValues.select,
+  defaultValue: fieldMetadataFormDefaultValues.defaultValue,
 };
 
 const meta: Meta<typeof SettingsDataModelFieldSettingsFormCard> = {
@@ -110,6 +111,7 @@ export const WithSelectForm: Story = {
         },
         { color: 'green', label: '🌏 NGO', value: 'NGO' },
       ],
+      defaultValue: undefined,
     },
   },
 };

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

@@ -23,6 +23,7 @@ describe('useFieldMetadataForm', () => {
         objectMetadataId: '',
         field: { label: '' },
       },
+      defaultValue: null,
       select: [
         { color: 'green', label: 'Option 1', value: expect.any(String) },
       ],

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

@@ -18,6 +18,7 @@ type FormValues = {
   description?: string;
   icon: string;
   label: string;
+  defaultValue: any;
   type: SettingsSupportedFieldType;
 } & SettingsDataModelFieldSettingsFormValues;
 
@@ -31,6 +32,7 @@ export const fieldMetadataFormDefaultValues: FormValues = {
     objectMetadataId: '',
     field: { label: '' },
   },
+  defaultValue: null,
   select: [{ color: 'green', label: 'Option 1', value: v4() }],
 };
 
@@ -38,6 +40,7 @@ const fieldSchema = z.object({
   description: z.string().optional(),
   icon: z.string().startsWith('Icon'),
   label: z.string().min(1),
+  defaultValue: z.any(),
 });
 
 const currencySchema = fieldSchema.merge(
@@ -124,6 +127,8 @@ export const useFieldMetadataForm = () => {
   const [hasCurrencyFormChanged, setHasCurrencyFormChanged] = useState(false);
   const [hasRelationFormChanged, setHasRelationFormChanged] = useState(false);
   const [hasSelectFormChanged, setHasSelectFormChanged] = useState(false);
+  const [hasDefaultValueChanged, setHasDefaultValueFormChanged] =
+    useState(false);
   const [validationResult, setValidationResult] = useState(
     schema.safeParse(formValues),
   );
@@ -169,12 +174,14 @@ export const useFieldMetadataForm = () => {
       currency: initialCurrencyFormValues,
       relation: initialRelationFormValues,
       select: initialSelectFormValues,
+      defaultValue: initalDefaultValue,
       ...initialFieldFormValues
     } = initialFormValues;
     const {
       currency: nextCurrencyFormValues,
       relation: nextRelationFormValues,
       select: nextSelectFormValues,
+      defaultValue: nextDefaultValue,
       ...nextFieldFormValues
     } = nextFormValues;
 
@@ -193,6 +200,10 @@ export const useFieldMetadataForm = () => {
       nextFieldFormValues.type === FieldMetadataType.Select &&
         !isDeeplyEqual(initialSelectFormValues, nextSelectFormValues),
     );
+    setHasDefaultValueFormChanged(
+      nextFieldFormValues.type === FieldMetadataType.Boolean &&
+        !isDeeplyEqual(initalDefaultValue, nextDefaultValue),
+    );
   };
 
   return {
@@ -203,9 +214,11 @@ export const useFieldMetadataForm = () => {
       hasFieldFormChanged ||
       hasCurrencyFormChanged ||
       hasRelationFormChanged ||
-      hasSelectFormChanged,
+      hasSelectFormChanged ||
+      hasDefaultValueChanged,
     hasRelationFormChanged,
     hasSelectFormChanged,
+    hasDefaultValueChanged,
     initForm,
     isInitialized,
     isValid: validationResult.success,