Refactor default value for select (#5343)

In this PR, we are refactoring two things: - leverage field.defaultValue for Select and MultiSelect settings form (instead of option.isDefault) - use quoted string (ex: "'USD'") for string default values to embrace backend format --------- Co-authored-by: Thaïs Guigon <guigon.thais@gmail.com>
2024-05-10 10:26:46 +02:00
parent 7728c09dba
commit 8590bd7227
40 changed files with 843 additions and 559 deletions
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
@ -2,47 +2,54 @@ import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { IconPlus } from 'twenty-ui';
-import { v4 } from 'uuid';
 import { z } from 'zod';

-import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { SettingsObjectFieldSelectFormOption } from '@/settings/data-model/types/SettingsObjectFieldSelectFormOption';
+import {
+  FieldMetadataItem,
+  FieldMetadataItemOption,
+} from '@/object-metadata/types/FieldMetadataItem';
+import { selectOptionsSchema } from '@/object-metadata/validation-schemas/selectOptionsSchema';
+import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues';
+import { generateNewSelectOption } from '@/settings/data-model/fields/forms/utils/generateNewSelectOption';
+import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
 import { LightButton } from '@/ui/input/button/components/LightButton';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
-import {
-  MAIN_COLOR_NAMES,
-  ThemeColor,
-} from '@/ui/theme/constants/MainColorNames';
-import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
+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

 export const settingsDataModelFieldSelectFormSchema = z.object({
-  options: z
-    .array(
-      z.object({
-        color: themeColorSchema,
-        value: z.string(),
-        isDefault: z.boolean().optional(),
-        label: z.string().min(1),
-      }),
-    )
-    .min(1),
+  defaultValue: simpleQuotesStringSchema.nullable(),
+  options: selectOptionsSchema,
 });

+export const settingsDataModelFieldMultiSelectFormSchema = z.object({
+  defaultValue: z.array(simpleQuotesStringSchema).nullable(),
+  options: selectOptionsSchema,
+});
+
+const selectOrMultiSelectFormSchema = z.union([
+  settingsDataModelFieldSelectFormSchema,
+  settingsDataModelFieldMultiSelectFormSchema,
+]);
+
 export type SettingsDataModelFieldSelectFormValues = z.infer<
-  typeof settingsDataModelFieldSelectFormSchema
+  typeof selectOrMultiSelectFormSchema
 >;

 type SettingsDataModelFieldSelectFormProps = {
-  fieldMetadataItem?: Pick<FieldMetadataItem, 'defaultValue' | 'options'>;
-  isMultiSelect?: boolean;
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'defaultValue' | 'options' | 'type'
+  >;
 };

 const StyledContainer = styled(CardContent)`
@ -68,155 +75,178 @@ const StyledButton = styled(LightButton)`
  width: 100%;
 `;

-const getNextColor = (currentColor: ThemeColor) => {
-  const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
-    (color) => color === currentColor,
-  );
-  const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length;
-  return MAIN_COLOR_NAMES[nextColorIndex];
-};
-
-const getDefaultValueOptionIndexes = (
-  fieldMetadataItem?: Pick<FieldMetadataItem, 'defaultValue' | 'options'>,
-) =>
-  fieldMetadataItem?.options?.reduce<number[]>((result, option, index) => {
-    if (
-      Array.isArray(fieldMetadataItem?.defaultValue) &&
-      fieldMetadataItem?.defaultValue.includes(`'${option.value}'`)
-    ) {
-      return [...result, index];
-    }
-
-    // Ensure default value is unique for simple Select field
-    if (
-      !result.length &&
-      fieldMetadataItem?.defaultValue === `'${option.value}'`
-    ) {
-      return [index];
-    }
-
-    return result;
-  }, []);
-
-const DEFAULT_OPTION: SettingsObjectFieldSelectFormOption = {
-  color: 'green',
-  label: 'Option 1',
-  value: v4(),
-};
-
 export const SettingsDataModelFieldSelectForm = ({
  fieldMetadataItem,
-  isMultiSelect = false,
 }: SettingsDataModelFieldSelectFormProps) => {
-  const { control } = useFormContext<SettingsDataModelFieldSelectFormValues>();
+  const { initialDefaultValue, initialOptions } =
+    useSelectSettingsFormInitialValues({ fieldMetadataItem });

-  const initialDefaultValueOptionIndexes =
-    getDefaultValueOptionIndexes(fieldMetadataItem);
-
-  const initialValue = fieldMetadataItem?.options
-    ?.map((option, index) => ({
-      ...option,
-      isDefault: initialDefaultValueOptionIndexes?.includes(index),
-    }))
-    .sort((optionA, optionB) => optionA.position - optionB.position);
+  const {
+    control,
+    setValue: setFormValue,
+    watch: watchFormValue,
+    getValues,
+  } = useFormContext<SettingsDataModelFieldSelectFormValues>();

  const handleDragEnd = (
-    values: SettingsObjectFieldSelectFormOption[],
+    values: FieldMetadataItemOption[],
    result: DropResult,
-    onChange: (options: SettingsObjectFieldSelectFormOption[]) => void,
+    onChange: (options: FieldMetadataItemOption[]) => void,
  ) => {
    if (!result.destination) return;

    const nextOptions = moveArrayItem(values, {
      fromIndex: result.source.index,
      toIndex: result.destination.index,
-    });
+    }).map((option, index) => ({ ...option, position: index }));

    onChange(nextOptions);
  };

-  const findNewLabel = (values: SettingsObjectFieldSelectFormOption[]) => {
-    let optionIndex = values.length + 1;
-    while (optionIndex < 100) {
-      const newLabel = `Option ${optionIndex}`;
-      if (!values.map((value) => value.label).includes(newLabel)) {
-        return newLabel;
-      }
-      optionIndex += 1;
+  const isOptionDefaultValue = (
+    optionValue: FieldMetadataItemOption['value'],
+  ) =>
+    isSelectOptionDefaultValue(optionValue, {
+      type: fieldMetadataItem.type,
+      defaultValue: watchFormValue('defaultValue'),
+    });
+
+  const handleSetOptionAsDefault = (
+    optionValue: FieldMetadataItemOption['value'],
+  ) => {
+    if (isOptionDefaultValue(optionValue)) return;
+
+    if (fieldMetadataItem.type === FieldMetadataType.Select) {
+      setFormValue('defaultValue', applySimpleQuotesToString(optionValue), {
+        shouldDirty: true,
+      });
+      return;
+    }
+
+    const previousDefaultValue = getValues('defaultValue');
+
+    if (
+      fieldMetadataItem.type === FieldMetadataType.MultiSelect &&
+      (Array.isArray(previousDefaultValue) || previousDefaultValue === null)
+    ) {
+      setFormValue(
+        'defaultValue',
+        [
+          ...(previousDefaultValue ?? []),
+          applySimpleQuotesToString(optionValue),
+        ],
+        { shouldDirty: true },
+      );
+    }
+  };
+
+  const handleRemoveOptionAsDefault = (
+    optionValue: FieldMetadataItemOption['value'],
+  ) => {
+    if (!isOptionDefaultValue(optionValue)) return;
+
+    if (fieldMetadataItem.type === FieldMetadataType.Select) {
+      setFormValue('defaultValue', null, { shouldDirty: true });
+      return;
+    }
+
+    const previousDefaultValue = getValues('defaultValue');
+
+    if (
+      fieldMetadataItem.type === FieldMetadataType.MultiSelect &&
+      (Array.isArray(previousDefaultValue) || previousDefaultValue === null)
+    ) {
+      const nextDefaultValue = previousDefaultValue?.filter(
+        (value) => value !== applySimpleQuotesToString(optionValue),
+      );
+      setFormValue(
+        'defaultValue',
+        nextDefaultValue?.length ? nextDefaultValue : null,
+        { shouldDirty: true },
+      );
    }
-    return `Option 100`;
  };

  return (
-    <Controller
-      name="options"
-      control={control}
-      defaultValue={initialValue?.length ? initialValue : [DEFAULT_OPTION]}
-      render={({ field: { onChange, value: options } }) => (
-        <>
-          <StyledContainer>
-            <StyledLabel>Options</StyledLabel>
-            <DraggableList
-              onDragEnd={(result) => handleDragEnd(options, result, onChange)}
-              draggableItems={
-                <>
-                  {options.map((option, index) => (
-                    <DraggableItem
-                      key={option.value}
-                      draggableId={option.value}
-                      index={index}
-                      isDragDisabled={options.length === 1}
-                      itemComponent={
-                        <SettingsObjectFieldSelectFormOptionRow
-                          key={option.value}
-                          isDefault={option.isDefault}
-                          onChange={(nextOption) => {
-                            const nextOptions =
-                              isMultiSelect || !nextOption.isDefault
-                                ? [...options]
-                                : // Reset simple Select default option before setting the new one
-                                  options.map<SettingsObjectFieldSelectFormOption>(
-                                    (value) => ({ ...value, isDefault: false }),
-                                  );
-                            nextOptions.splice(index, 1, nextOption);
-                            onChange(nextOptions);
-                          }}
-                          onRemove={
-                            options.length > 1
-                              ? () => {
-                                  const nextOptions = [...options];
-                                  nextOptions.splice(index, 1);
-                                  onChange(nextOptions);
-                                }
-                              : undefined
-                          }
-                          option={option}
-                        />
-                      }
-                    />
-                  ))}
-                </>
-              }
-            />
-          </StyledContainer>
-          <StyledFooter>
-            <StyledButton
-              title="Add option"
-              Icon={IconPlus}
-              onClick={() =>
-                onChange([
-                  ...options,
-                  {
-                    color: getNextColor(options[options.length - 1].color),
-                    label: findNewLabel(options),
-                    value: v4(),
-                  },
-                ])
-              }
-            />
-          </StyledFooter>
-        </>
-      )}
-    />
+    <>
+      <Controller
+        name="defaultValue"
+        control={control}
+        defaultValue={initialDefaultValue}
+        render={() => <></>}
+      />
+      <Controller
+        name="options"
+        control={control}
+        defaultValue={initialOptions}
+        render={({ field: { onChange, value: options } }) => (
+          <>
+            <StyledContainer>
+              <StyledLabel>Options</StyledLabel>
+              <DraggableList
+                onDragEnd={(result) => handleDragEnd(options, result, onChange)}
+                draggableItems={
+                  <>
+                    {options.map((option, index) => (
+                      <DraggableItem
+                        key={option.id}
+                        draggableId={option.id}
+                        index={index}
+                        isDragDisabled={options.length === 1}
+                        itemComponent={
+                          <SettingsObjectFieldSelectFormOptionRow
+                            key={option.id}
+                            option={option}
+                            onChange={(nextOption) => {
+                              const nextOptions = [...options];
+                              nextOptions.splice(index, 1, nextOption);
+                              onChange(nextOptions);
+
+                              // Update option value in defaultValue if value has changed
+                              if (
+                                nextOption.value !== option.value &&
+                                isOptionDefaultValue(option.value)
+                              ) {
+                                handleRemoveOptionAsDefault(option.value);
+                                handleSetOptionAsDefault(nextOption.value);
+                              }
+                            }}
+                            onRemove={
+                              options.length > 1
+                                ? () => {
+                                    const nextOptions = [...options];
+                                    nextOptions.splice(index, 1);
+                                    onChange(nextOptions);
+                                  }
+                                : undefined
+                            }
+                            isDefault={isOptionDefaultValue(option.value)}
+                            onSetAsDefault={() =>
+                              handleSetOptionAsDefault(option.value)
+                            }
+                            onRemoveAsDefault={() =>
+                              handleRemoveOptionAsDefault(option.value)
+                            }
+                          />
+                        }
+                      />
+                    ))}
+                  </>
+                }
+              />
+            </StyledContainer>
+            <StyledFooter>
+              <StyledButton
+                title="Add option"
+                Icon={IconPlus}
+                onClick={() =>
+                  onChange([...options, generateNewSelectOption(options)])
+                }
+              />
+            </StyledFooter>
+          </>
+        )}
+      />
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
@ -10,6 +10,8 @@ import {
 } from 'twenty-ui';
 import { v4 } from 'uuid';

+import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
+import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel';
 import { ColorSample } from '@/ui/display/color/components/ColorSample';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { TextInput } from '@/ui/input/components/TextInput';
@ -21,14 +23,14 @@ 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';

-import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
-
 type SettingsObjectFieldSelectFormOptionRowProps = {
  className?: string;
  isDefault?: boolean;
-  onChange: (value: SettingsObjectFieldSelectFormOption) => void;
+  onChange: (value: FieldMetadataItemOption) => void;
  onRemove?: () => void;
-  option: SettingsObjectFieldSelectFormOption;
+  onSetAsDefault?: () => void;
+  onRemoveAsDefault?: () => void;
+  option: FieldMetadataItemOption;
 };

 const StyledRow = styled.div`
@ -58,6 +60,8 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
  isDefault,
  onChange,
  onRemove,
+  onSetAsDefault,
+  onRemoveAsDefault,
  option,
 }: SettingsObjectFieldSelectFormOptionRowProps) => {
  const theme = useTheme();
@ -106,7 +110,9 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
      />
      <StyledOptionInput
        value={option.label}
-        onChange={(label) => onChange({ ...option, label })}
+        onChange={(label) =>
+          onChange({ ...option, label, value: getOptionValueFromLabel(label) })
+        }
        RightIcon={isDefault ? IconCheck : undefined}
      />
      <Dropdown
@ -124,7 +130,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
                  LeftIcon={IconX}
                  text="Remove as default"
                  onClick={() => {
-                    onChange({ ...option, isDefault: false });
+                    onRemoveAsDefault?.();
                    closeActionsDropdown();
                  }}
                />
@ -133,7 +139,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
                  LeftIcon={IconCheck}
                  text="Set as default"
                  onClick={() => {
-                    onChange({ ...option, isDefault: true });
+                    onSetAsDefault?.();
                    closeActionsDropdown();
                  }}
                />
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldCurrencyForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldCurrencyForm.tsx
@ -3,15 +3,22 @@ import { z } from 'zod';

 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
+import { currencyCodeSchema } from '@/object-record/record-field/validation-schemas/currencyCodeSchema';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { Select } from '@/ui/input/components/Select';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
-
-// TODO: rename to SettingsDataModelFieldCurrencyForm and move to settings/data-model/fields/forms/components
+import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
+import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
+import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuotesStringSchema';

 export const settingsDataModelFieldCurrencyFormSchema = z.object({
  defaultValue: z.object({
-    currencyCode: z.nativeEnum(CurrencyCode),
+    currencyCode: simpleQuotesStringSchema.refine(
+      (value) =>
+        currencyCodeSchema.safeParse(stripSimpleQuotesFromString(value))
+          .success,
+      { message: 'String is not a valid currencyCode' },
+    ),
  }),
 });

@ -27,7 +34,7 @@ type SettingsDataModelFieldCurrencyFormProps = {
 const OPTIONS = Object.entries(SETTINGS_FIELD_CURRENCY_CODES).map(
  ([value, { label, Icon }]) => ({
    label,
-    value: value as CurrencyCode,
+    value: applySimpleQuotesToString(value),
    Icon,
  }),
 );
@ -48,7 +55,7 @@ export const SettingsDataModelFieldCurrencyForm = ({
      <Controller
        name="defaultValue.currencyCode"
        control={control}
-        defaultValue={initialValue}
+        defaultValue={applySimpleQuotesToString(initialValue)}
        render={({ field: { onChange, value } }) => (
          <Select
            fullWidth
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSelectSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSelectSettingsFormCard.tsx
@ -0,0 +1,70 @@
+import { useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
+import {
+  settingsDataModelFieldMultiSelectFormSchema,
+  SettingsDataModelFieldSelectForm,
+  settingsDataModelFieldSelectFormSchema,
+} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
+import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues';
+import {
+  SettingsDataModelFieldPreviewCard,
+  SettingsDataModelFieldPreviewCardProps,
+} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+
+const selectOrMultiSelectFormSchema = z.union([
+  settingsDataModelFieldSelectFormSchema,
+  settingsDataModelFieldMultiSelectFormSchema,
+]);
+
+type SettingsDataModelFieldSettingsFormValues = z.infer<
+  typeof selectOrMultiSelectFormSchema
+>;
+
+type SettingsDataModelFieldSelectSettingsFormCardProps = {
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'icon' | 'label' | 'type' | 'defaultValue' | 'options'
+  >;
+} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
+
+const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
+  display: grid;
+  flex: 1 1 100%;
+`;
+
+export const SettingsDataModelFieldSelectSettingsFormCard = ({
+  fieldMetadataItem,
+  objectMetadataItem,
+}: SettingsDataModelFieldSelectSettingsFormCardProps) => {
+  const { initialOptions, initialDefaultValue } =
+    useSelectSettingsFormInitialValues({
+      fieldMetadataItem,
+    });
+
+  const { watch: watchFormValue } =
+    useFormContext<SettingsDataModelFieldSettingsFormValues>();
+
+  return (
+    <SettingsDataModelPreviewFormCard
+      preview={
+        <StyledFieldPreviewCard
+          fieldMetadataItem={{
+            ...fieldMetadataItem,
+            defaultValue: watchFormValue('defaultValue', initialDefaultValue),
+            options: watchFormValue('options', initialOptions),
+          }}
+          objectMetadataItem={objectMetadataItem}
+        />
+      }
+      form={
+        <SettingsDataModelFieldSelectForm
+          fieldMetadataItem={fieldMetadataItem}
+        />
+      }
+    />
+  );
+};
--- 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
@ -1,4 +1,3 @@
-import { useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import omit from 'lodash.omit';
 import { z } from 'zod';
@ -9,17 +8,18 @@ import {
  settingsDataModelFieldBooleanFormSchema,
 } from '@/settings/data-model/components/SettingsDataModelDefaultValue';
 import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
-import {
-  SettingsDataModelFieldCurrencyForm,
-  settingsDataModelFieldCurrencyFormSchema,
-} from '@/settings/data-model/components/SettingsObjectFieldCurrencyForm';
 import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
 import {
-  SettingsDataModelFieldSelectForm,
+  settingsDataModelFieldMultiSelectFormSchema,
  settingsDataModelFieldSelectFormSchema,
 } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
+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';
 import {
  SettingsDataModelFieldPreviewCard,
  SettingsDataModelFieldPreviewCardProps,
@ -39,11 +39,13 @@ const relationFieldFormSchema = z
  .merge(settingsDataModelFieldRelationFormSchema);

 const selectFieldFormSchema = z
-  .object({
-    type: z.enum([FieldMetadataType.Select, FieldMetadataType.MultiSelect]),
-  })
+  .object({ type: z.literal(FieldMetadataType.Select) })
  .merge(settingsDataModelFieldSelectFormSchema);

+const multiSelectFieldFormSchema = z
+  .object({ type: z.literal(FieldMetadataType.MultiSelect) })
+  .merge(settingsDataModelFieldMultiSelectFormSchema);
+
 const otherFieldsFormSchema = z.object({
  type: z.enum(
    Object.keys(
@ -65,14 +67,11 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
    currencyFieldFormSchema,
    relationFieldFormSchema,
    selectFieldFormSchema,
+    multiSelectFieldFormSchema,
    otherFieldsFormSchema,
  ],
 );

-type SettingsDataModelFieldSettingsFormValues = z.infer<
-  typeof settingsDataModelFieldSettingsFormSchema
->;
-
 type SettingsDataModelFieldSettingsFormCardProps = {
  disableCurrencyForm?: boolean;
  fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
@ -84,11 +83,6 @@ const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
  flex: 1 1 100%;
 `;

-const StyledPreviewContent = styled.div`
-  display: flex;
-  gap: 6px;
-`;
-
 const previewableTypes = [
  FieldMetadataType.Boolean,
  FieldMetadataType.Currency,
@ -112,9 +106,6 @@ export const SettingsDataModelFieldSettingsFormCard = ({
  fieldMetadataItem,
  objectMetadataItem,
 }: SettingsDataModelFieldSettingsFormCardProps) => {
-  const { watch: watchFormValue } =
-    useFormContext<SettingsDataModelFieldSettingsFormValues>();
-
  if (!previewableTypes.includes(fieldMetadataItem.type)) return null;

  if (fieldMetadataItem.type === FieldMetadataType.Relation) {
@ -126,16 +117,25 @@ export const SettingsDataModelFieldSettingsFormCard = ({
    );
  }

+  if (
+    fieldMetadataItem.type === FieldMetadataType.Select ||
+    fieldMetadataItem.type === FieldMetadataType.MultiSelect
+  ) {
+    return (
+      <SettingsDataModelFieldSelectSettingsFormCard
+        fieldMetadataItem={fieldMetadataItem}
+        objectMetadataItem={objectMetadataItem}
+      />
+    );
+  }
+
  return (
    <SettingsDataModelPreviewFormCard
      preview={
-        <StyledPreviewContent>
-          <StyledFieldPreviewCard
-            fieldMetadataItem={fieldMetadataItem}
-            objectMetadataItem={objectMetadataItem}
-            selectOptions={watchFormValue('options')}
-          />
-        </StyledPreviewContent>
+        <StyledFieldPreviewCard
+          fieldMetadataItem={fieldMetadataItem}
+          objectMetadataItem={objectMetadataItem}
+        />
      }
      form={
        fieldMetadataItem.type === FieldMetadataType.Boolean ? (
@ -147,14 +147,6 @@ export const SettingsDataModelFieldSettingsFormCard = ({
            disabled={disableCurrencyForm}
            fieldMetadataItem={fieldMetadataItem}
          />
-        ) : fieldMetadataItem.type === FieldMetadataType.Select ||
-          fieldMetadataItem.type === FieldMetadataType.MultiSelect ? (
-          <SettingsDataModelFieldSelectForm
-            fieldMetadataItem={fieldMetadataItem}
-            isMultiSelect={
-              fieldMetadataItem.type === FieldMetadataType.MultiSelect
-            }
-          />
        ) : undefined
      }
    />
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues.ts
@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { v4 } from 'uuid';
+
+import {
+  FieldMetadataItem,
+  FieldMetadataItemOption,
+} from '@/object-metadata/types/FieldMetadataItem';
+import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel';
+
+const DEFAULT_OPTION: FieldMetadataItemOption = {
+  color: 'green',
+  id: v4(),
+  label: 'Option 1',
+  position: 0,
+  value: getOptionValueFromLabel('Option 1'),
+};
+
+export const useSelectSettingsFormInitialValues = ({
+  fieldMetadataItem,
+}: {
+  fieldMetadataItem: Pick<FieldMetadataItem, 'defaultValue' | 'options'>;
+}) => {
+  const initialDefaultValue = fieldMetadataItem.defaultValue ?? null;
+  const initialOptions = useMemo(
+    () =>
+      fieldMetadataItem.options?.length
+        ? [...fieldMetadataItem.options].sort(
+            (optionA, optionB) => optionA.position - optionB.position,
+          )
+        : [DEFAULT_OPTION],
+    [fieldMetadataItem.options],
+  );
+
+  return {
+    initialDefaultValue,
+    initialOptions,
+  };
+};
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/tests/generateNewSelectOptionLabel.test.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/tests/generateNewSelectOptionLabel.test.ts
@ -0,0 +1,34 @@
+import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/utils/generateNewSelectOptionLabel';
+
+describe('generateNewSelectOptionLabel', () => {
+  it('generates a new select option label', () => {
+    // Given
+    const options = [
+      { label: 'Option 1' },
+      { label: 'Option 2' },
+      { label: 'Lorem ipsum' },
+    ];
+
+    // When
+    const newLabel = generateNewSelectOptionLabel(options);
+
+    // Then
+    expect(newLabel).toBe('Option 4');
+  });
+
+  it('iterates until it finds an unique label', () => {
+    // Given
+    const options = [
+      { label: 'Option 1' },
+      { label: 'Option 2' },
+      { label: 'Option 4' },
+      { label: 'Option 5' },
+    ];
+
+    // When
+    const newLabel = generateNewSelectOptionLabel(options);
+
+    // Then
+    expect(newLabel).toBe('Option 6');
+  });
+});
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/tests/getOptionValueFromLabel.test.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/tests/getOptionValueFromLabel.test.ts
@ -0,0 +1,39 @@
+import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel';
+
+describe('getOptionValueFromLabel', () => {
+  it('should return the option value from the label', () => {
+    const label = 'Example Label';
+    const expected = 'EXAMPLE_LABEL';
+
+    const result = getOptionValueFromLabel(label);
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle labels with accents', () => {
+    const label = 'Éxàmplè Làbèl';
+    const expected = 'EXAMPLE_LABEL';
+
+    const result = getOptionValueFromLabel(label);
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle labels with special characters', () => {
+    const label = 'Example!@#$%^&*() Label';
+    const expected = 'EXAMPLE_LABEL';
+
+    const result = getOptionValueFromLabel(label);
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle labels with emojis', () => {
+    const label = '📱 Example Label';
+    const expected = 'EXAMPLE_LABEL';
+
+    const result = getOptionValueFromLabel(label);
+
+    expect(result).toEqual(expected);
+  });
+});
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/generateNewSelectOption.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/generateNewSelectOption.ts
@ -0,0 +1,20 @@
+import { getNextThemeColor } from 'twenty-ui';
+import { v4 } from 'uuid';
+
+import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
+import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/utils/generateNewSelectOptionLabel';
+import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel';
+
+export const generateNewSelectOption = (
+  options: FieldMetadataItemOption[],
+): FieldMetadataItemOption => {
+  const newOptionLabel = generateNewSelectOptionLabel(options);
+
+  return {
+    color: getNextThemeColor(options[options.length - 1].color),
+    id: v4(),
+    label: newOptionLabel,
+    position: options.length,
+    value: getOptionValueFromLabel(newOptionLabel),
+  };
+};
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/generateNewSelectOptionLabel.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/generateNewSelectOptionLabel.ts
@ -0,0 +1,13 @@
+import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
+
+export const generateNewSelectOptionLabel = (
+  values: Pick<FieldMetadataItemOption, 'label'>[],
+  iteration = 1,
+): string => {
+  const newOptionLabel = `Option ${values.length + iteration}`;
+  const labelExists = values.some((value) => value.label === newOptionLabel);
+
+  return labelExists
+    ? generateNewSelectOptionLabel(values, iteration + 1)
+    : newOptionLabel;
+};
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/getOptionValueFromLabel.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/getOptionValueFromLabel.ts
@ -0,0 +1,15 @@
+import snakeCase from 'lodash.snakecase';
+
+export const getOptionValueFromLabel = (label: string) => {
+  // Remove accents
+  const unaccentedLabel = label
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+  // Remove special characters
+  const noSpecialCharactersLabel = unaccentedLabel.replace(
+    /[^a-zA-Z0-9 ]/g,
+    '',
+  );
+
+  return snakeCase(noSpecialCharactersLabel).toUpperCase();
+};
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
@ -8,7 +8,6 @@ import { FieldDisplay } from '@/object-record/record-field/components/FieldDispl
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { BooleanFieldInput } from '@/object-record/record-field/meta-types/input/components/BooleanFieldInput';
 import { RatingFieldInput } from '@/object-record/record-field/meta-types/input/components/RatingFieldInput';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
 import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect';
 import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview';
@ -17,14 +16,13 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 export type SettingsDataModelFieldPreviewProps = {
  fieldMetadataItem: Pick<
    FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'defaultValue'
+    'icon' | 'label' | 'type' | 'defaultValue' | 'options'
  > & {
    id?: string;
    name?: string;
  };
  objectMetadataItem: ObjectMetadataItem;
  relationObjectMetadataItem?: ObjectMetadataItem;
-  selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
  shrink?: boolean;
  withFieldLabel?: boolean;
 };
@ -55,7 +53,6 @@ export const SettingsDataModelFieldPreview = ({
  fieldMetadataItem,
  objectMetadataItem,
  relationObjectMetadataItem,
-  selectOptions,
  shrink,
  withFieldLabel = true,
 }: SettingsDataModelFieldPreviewProps) => {
@ -69,7 +66,6 @@ export const SettingsDataModelFieldPreview = ({
      fieldMetadataItem,
      objectMetadataItem,
      relationObjectMetadataItem,
-      selectOptions,
    });

  return (
@ -107,7 +103,7 @@ export const SettingsDataModelFieldPreview = ({
                objectMetadataNameSingular: objectMetadataItem.nameSingular,
                relationObjectMetadataNameSingular:
                  relationObjectMetadataItem?.nameSingular,
-                options: selectOptions,
+                options: fieldMetadataItem.options,
              },
              defaultValue: fieldMetadataItem.defaultValue,
            },
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
@ -28,7 +28,6 @@ export const SettingsDataModelFieldPreviewCard = ({
  fieldMetadataItem,
  objectMetadataItem,
  relationObjectMetadataItem,
-  selectOptions,
  shrink,
  withFieldLabel = true,
 }: SettingsDataModelFieldPreviewCardProps) => (
@ -39,7 +38,6 @@ export const SettingsDataModelFieldPreviewCard = ({
        objectMetadataItem={objectMetadataItem}
        fieldMetadataItem={fieldMetadataItem}
        relationObjectMetadataItem={relationObjectMetadataItem}
-        selectOptions={selectOptions}
        shrink={shrink}
        withFieldLabel={withFieldLabel}
      />
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreview.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreview.ts
@ -4,26 +4,28 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import { getFieldDefaultPreviewValue } from '@/settings/data-model/utils/getFieldDefaultPreviewValue';
 import { getFieldPreviewValueFromRecord } from '@/settings/data-model/utils/getFieldPreviewValueFromRecord';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 type UseFieldPreviewParams = {
-  fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'type'> & {
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'icon' | 'type' | 'options' | 'defaultValue'
+  > & {
+    // id and name are undefined in create mode (field does not exist yet)
+    // and are defined in edit mode.
    id?: string;
    name?: string;
  };
  objectMetadataItem: ObjectMetadataItem;
  relationObjectMetadataItem?: ObjectMetadataItem;
-  selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
 };

 export const useFieldPreview = ({
  fieldMetadataItem,
  objectMetadataItem,
  relationObjectMetadataItem,
-  selectOptions,
 }: UseFieldPreviewParams) => {
  const isLabelIdentifier =
    !!fieldMetadataItem.id &&
@ -40,6 +42,9 @@ export const useFieldPreview = ({
    objectNameSingular: objectMetadataItem.nameSingular,
    limit: 1,
    skip: !fieldMetadataItem.name,
+    orderBy: {
+      [fieldMetadataItem.name ?? '']: 'AscNullsLast',
+    },
  });
  const [firstRecord] = records;

@ -51,17 +56,17 @@ export const useFieldPreview = ({
            name: fieldMetadataItem.name,
            type: fieldMetadataItem.type,
          },
-          selectOptions,
        })
      : null;

-  const selectOptionValues = selectOptions?.map((option) => option.value);
  const isValueFromFirstRecord =
    firstRecord &&
    !isFieldValueEmpty({
      fieldDefinition: { type: fieldMetadataItem.type },
      fieldValue: fieldPreviewValueFromFirstRecord,
-      selectOptionValues,
+      selectOptionValues: fieldMetadataItem.options?.map(
+        (option) => option.value,
+      ),
    });

  const { records: relationRecords } = useFindManyRecords({
@ -83,7 +88,6 @@ export const useFieldPreview = ({
        fieldMetadataItem,
        objectMetadataItem,
        relationObjectMetadataItem,
-        selectOptions,
      });

  const fieldName =
--- a/packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts
@ -1,8 +0,0 @@
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
-
-export type SettingsObjectFieldSelectFormOption = {
-  color: ThemeColor;
-  isDefault?: boolean;
-  label: string;
-  value: string;
-};
--- a/packages/twenty-front/src/modules/settings/data-model/utils/tests/getFieldDefaultPreviewValue.test.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/tests/getFieldDefaultPreviewValue.test.ts
@ -1,5 +1,4 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import {
  mockedCompanyObjectMetadataItem,
  mockedOpportunityObjectMetadataItem,
@ -10,35 +9,21 @@ import { getFieldDefaultPreviewValue } from '../getFieldDefaultPreviewValue';

 describe('getFieldDefaultPreviewValue', () => {
  describe('SELECT field', () => {
-    it('returns the default select option', () => {
+    it('returns the default select option value', () => {
      // Given
      const objectMetadataItem = mockedOpportunityObjectMetadataItem;
      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
        ({ name }) => name === 'stage',
      )!;
-      const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
-        {
-          color: 'purple',
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink',
-          isDefault: true,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-      ];

      // When
      const result = getFieldDefaultPreviewValue({
        objectMetadataItem,
-        fieldMetadataItem,
-        selectOptions,
+        fieldMetadataItem: { ...fieldMetadataItem, defaultValue: "'MEETING'" },
      });

      // Then
-      expect(result).toEqual(selectOptions[1].value);
+      expect(result).toEqual('MEETING');
    });

    it('returns the first select option if no default option was found', () => {
@ -47,28 +32,15 @@ describe('getFieldDefaultPreviewValue', () => {
      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
        ({ name }) => name === 'stage',
      )!;
-      const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
-        {
-          color: 'purple' as const,
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink' as const,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-      ];

      // When
      const result = getFieldDefaultPreviewValue({
        objectMetadataItem,
-        fieldMetadataItem,
-        selectOptions,
+        fieldMetadataItem: { ...fieldMetadataItem, defaultValue: null },
      });

      // Then
-      expect(result).toEqual(selectOptions[0].value);
+      expect(result).toEqual(fieldMetadataItem.options![0].value);
    });
  });

--- a/packages/twenty-front/src/modules/settings/data-model/utils/tests/getFieldPreviewValueFromRecord.test.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/tests/getFieldPreviewValueFromRecord.test.ts
@ -1,106 +1,12 @@
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import {
  mockedCompanyObjectMetadataItem,
-  mockedOpportunityObjectMetadataItem,
  mockedPersonObjectMetadataItem,
 } from '~/testing/mock-data/metadata';

 import { getFieldPreviewValueFromRecord } from '../getFieldPreviewValueFromRecord';

 describe('getFieldPreviewValueFromRecord', () => {
-  describe('SELECT field', () => {
-    it('returns the select option corresponding to the record field value', () => {
-      // Given
-      const record: ObjectRecord = {
-        id: '',
-        stage: 'MEETING',
-        __typename: 'Opportunity',
-      };
-      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'stage',
-      )!;
-      const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
-        {
-          color: 'red',
-          label: 'New',
-          value: 'NEW',
-        },
-        {
-          color: 'purple',
-          label: 'Screening',
-          value: 'SCREENING',
-        },
-        {
-          color: 'sky',
-          label: 'Meeting',
-          value: 'MEETING',
-          isDefault: true,
-        },
-        {
-          color: 'turquoise',
-          label: 'Proposal',
-          value: 'PROPOSAL',
-        },
-        {
-          color: 'yellow',
-          label: 'Customer',
-          value: 'CUSTOMER',
-        },
-      ];
-
-      // When
-      const result = getFieldPreviewValueFromRecord({
-        record,
-        fieldMetadataItem,
-        selectOptions,
-      });
-
-      // Then
-      expect(result).toEqual(selectOptions[2].value);
-    });
-
-    it('returns undefined if the select option was not found', () => {
-      // Given
-      const record: ObjectRecord = {
-        id: '',
-        industry: 'DOES_NOT_EXIST',
-        __typename: 'Opportunity',
-      };
-      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'stage',
-      )!;
-      const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
-        {
-          color: 'purple',
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink',
-          isDefault: true,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-        {
-          color: 'turquoise',
-          label: '🌿 Green tech',
-          value: 'GREEN_TECH',
-        },
-      ];
-
-      // When
-      const result = getFieldPreviewValueFromRecord({
-        record,
-        fieldMetadataItem,
-        selectOptions,
-      });
-
-      // Then
-      expect(result).toBeUndefined();
-    });
-  });
-
  describe('RELATION field', () => {
    it('returns the first relation record from a list of edges ("to many" relation)', () => {
      // Given
--- a/packages/twenty-front/src/modules/settings/data-model/utils/tests/isSelectOptionDefaultValue.test.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/tests/isSelectOptionDefaultValue.test.ts
@ -0,0 +1,69 @@
+import { FieldMetadataType } from '~/generated/graphql';
+
+import { isSelectOptionDefaultValue } from '../isSelectOptionDefaultValue';
+
+describe('isSelectOptionDefaultValue', () => {
+  describe('SELECT field', () => {
+    it('returns true if the option value matches the default value', () => {
+      // Given
+      const optionValue = 'OPTION_1';
+      const fieldMetadataItem = {
+        defaultValue: `'${optionValue}'`,
+        type: FieldMetadataType.Select,
+      };
+
+      // When
+      const result = isSelectOptionDefaultValue(optionValue, fieldMetadataItem);
+
+      // Then
+      expect(result).toBe(true);
+    });
+
+    it('returns false if the option value does not match the default value', () => {
+      // Given
+      const optionValue = 'OPTION_1';
+      const fieldMetadataItem = {
+        defaultValue: "'OPTION_2'",
+        type: FieldMetadataType.Select,
+      };
+
+      // When
+      const result = isSelectOptionDefaultValue(optionValue, fieldMetadataItem);
+
+      // Then
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('MULTI_SELECT field', () => {
+    it('returns true if the option value is included in the default value array', () => {
+      // Given
+      const optionValue = 'OPTION_1';
+      const fieldMetadataItem = {
+        defaultValue: ["'OPTION_1'", "'OPTION_2'"],
+        type: FieldMetadataType.MultiSelect,
+      };
+
+      // When
+      const result = isSelectOptionDefaultValue(optionValue, fieldMetadataItem);
+
+      // Then
+      expect(result).toBe(true);
+    });
+
+    it('returns false if the option value is not included in the default value array', () => {
+      // Given
+      const optionValue = 'OPTION_1';
+      const fieldMetadataItem = {
+        defaultValue: ["'OPTION_2'", "'OPTION_3'"],
+        type: FieldMetadataType.MultiSelect,
+      };
+
+      // When
+      const result = isSelectOptionDefaultValue(optionValue, fieldMetadataItem);
+
+      // Then
+      expect(result).toBe(false);
+    });
+  });
+});
--- a/packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts
@ -2,39 +2,41 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';

 export const getFieldDefaultPreviewValue = ({
  fieldMetadataItem,
  objectMetadataItem,
  relationObjectMetadataItem,
-  selectOptions,
 }: {
-  fieldMetadataItem: Pick<FieldMetadataItem, 'type'> & {
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'type' | 'defaultValue' | 'options'
+  > & {
    id?: string;
    name?: string;
  };
  objectMetadataItem: ObjectMetadataItem;
  relationObjectMetadataItem?: ObjectMetadataItem;
-  selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
 }) => {
-  if (
-    fieldMetadataItem.type === FieldMetadataType.Select &&
-    isDefined(selectOptions)
-  ) {
-    const defaultSelectOption =
-      selectOptions.find(({ isDefault }) => isDefault) || selectOptions[0];
-    return defaultSelectOption.value;
+  if (fieldMetadataItem.type === FieldMetadataType.Select) {
+    const defaultValue = fieldMetadataItem.defaultValue
+      ? stripSimpleQuotesFromString(fieldMetadataItem.defaultValue)
+      : null;
+    return defaultValue ?? fieldMetadataItem.options?.[0]?.value ?? null;
  }

-  if (
-    fieldMetadataItem.type === FieldMetadataType.MultiSelect &&
-    isDefined(selectOptions)
-  ) {
-    return selectOptions.map((selectOption) => selectOption.value);
+  if (fieldMetadataItem.type === FieldMetadataType.MultiSelect) {
+    const defaultValues = fieldMetadataItem.defaultValue?.map(
+      (defaultValue: `'${string}'`) =>
+        stripSimpleQuotesFromString(defaultValue),
+    );
+    return defaultValues?.length
+      ? defaultValues
+      : fieldMetadataItem.options?.map(({ value }) => value) ?? null;
  }

  if (
--- a/packages/twenty-front/src/modules/settings/data-model/utils/getFieldPreviewValueFromRecord.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/getFieldPreviewValueFromRecord.ts
@ -1,26 +1,16 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 export const getFieldPreviewValueFromRecord = ({
  record,
  fieldMetadataItem,
-  selectOptions,
 }: {
  record: ObjectRecord;
  fieldMetadataItem: Pick<FieldMetadataItem, 'name' | 'type'>;
-  selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
 }) => {
  const recordFieldValue = record[fieldMetadataItem.name];

-  // Select field
-  if (fieldMetadataItem.type === FieldMetadataType.Select) {
-    return selectOptions?.find(
-      (selectOption) => selectOption.value === recordFieldValue,
-    )?.value;
-  }
-
  // Relation fields (to many)
  if (
    fieldMetadataItem.type === FieldMetadataType.Relation &&
--- a/packages/twenty-front/src/modules/settings/data-model/utils/isSelectOptionDefaultValue.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/utils/isSelectOptionDefaultValue.ts
@ -0,0 +1,25 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
+
+export const isSelectOptionDefaultValue = (
+  optionValue: string,
+  fieldMetadataItem: Pick<FieldMetadataItem, 'defaultValue' | 'type'>,
+): boolean => {
+  if (fieldMetadataItem.type === FieldMetadataType.Select) {
+    return (
+      applySimpleQuotesToString(optionValue) === fieldMetadataItem.defaultValue
+    );
+  }
+
+  if (
+    fieldMetadataItem.type === FieldMetadataType.MultiSelect &&
+    Array.isArray(fieldMetadataItem.defaultValue)
+  ) {
+    return fieldMetadataItem.defaultValue.includes(
+      applySimpleQuotesToString(optionValue),
+    );
+  }
+
+  return false;
+};