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-08-16 17:30:24 +03:00 · 2024-05-10 10:26:46 +02:00 · 2024-05-10 10:26:46 +02:00 · 8590bd7227
commit 8590bd7227
parent 7728c09dba
40 changed files with 843 additions and 559 deletions
--- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts
+++ b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts
@ -1,8 +0,0 @@
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
-
-export type FieldMetadataOption = {
-  color?: ThemeColor;
-  id?: string;
-  isDefault?: boolean;
-  label: string;
-};
--- a/packages/twenty-front/src/modules/object-metadata/utils/tests/formatFieldMetadataItemInput.test.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/tests/formatFieldMetadataItemInput.test.ts
@ -1,59 +1,33 @@
+import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

-import {
-  formatFieldMetadataItemInput,
-  getOptionValueFromLabel,
-} from '../formatFieldMetadataItemInput';
-
-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);
-  });
-});
+import { formatFieldMetadataItemInput } from '../formatFieldMetadataItemInput';

 describe('formatFieldMetadataItemInput', () => {
  it('should format the field metadata item input correctly', () => {
+    const options: FieldMetadataItemOption[] = [
+      {
+        id: '1',
+        label: 'Option 1',
+        color: 'red' as const,
+        position: 0,
+        value: 'OPTION_1',
+      },
+      {
+        id: '2',
+        label: 'Option 2',
+        color: 'blue' as const,
+        position: 1,
+        value: 'OPTION_2',
+      },
+    ];
    const input = {
+      defaultValue: "'OPTION_1'",
      label: 'Example Label',
      icon: 'example-icon',
      type: FieldMetadataType.Select,
      description: 'Example description',
-      options: [
-        { id: '1', label: 'Option 1', color: 'red' as const, isDefault: true },
-        { id: '2', label: 'Option 2', color: 'blue' as const },
-      ],
+      options,
    };

    const expected = {
@ -61,22 +35,7 @@ describe('formatFieldMetadataItemInput', () => {
      icon: 'example-icon',
      label: 'Example Label',
      name: 'exampleLabel',
-      options: [
-        {
-          id: '1',
-          label: 'Option 1',
-          color: 'red',
-          position: 0,
-          value: 'OPTION_1',
-        },
-        {
-          id: '2',
-          label: 'Option 2',
-          color: 'blue',
-          position: 1,
-          value: 'OPTION_2',
-        },
-      ],
+      options,
      defaultValue: "'OPTION_1'",
    };

@ -108,15 +67,29 @@ describe('formatFieldMetadataItemInput', () => {
  });

  it('should format the field metadata item multi select input correctly', () => {
+    const options: FieldMetadataItemOption[] = [
+      {
+        id: '1',
+        label: 'Option 1',
+        color: 'red' as const,
+        position: 0,
+        value: 'OPTION_1',
+      },
+      {
+        id: '2',
+        label: 'Option 2',
+        color: 'blue' as const,
+        position: 1,
+        value: 'OPTION_2',
+      },
+    ];
    const input = {
+      defaultValue: ["'OPTION_1'", "'OPTION_2'"],
      label: 'Example Label',
      icon: 'example-icon',
      type: FieldMetadataType.MultiSelect,
      description: 'Example description',
-      options: [
-        { id: '1', label: 'Option 1', color: 'red' as const, isDefault: true },
-        { id: '2', label: 'Option 2', color: 'blue' as const, isDefault: true },
-      ],
+      options,
    };

    const expected = {
@ -124,22 +97,7 @@ describe('formatFieldMetadataItemInput', () => {
      icon: 'example-icon',
      label: 'Example Label',
      name: 'exampleLabel',
-      options: [
-        {
-          id: '1',
-          label: 'Option 1',
-          color: 'red',
-          position: 0,
-          value: 'OPTION_1',
-        },
-        {
-          id: '2',
-          label: 'Option 2',
-          color: 'blue',
-          position: 1,
-          value: 'OPTION_2',
-        },
-      ],
+      options,
      defaultValue: ["'OPTION_1'", "'OPTION_2'"],
    };

--- a/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemInput.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemInput.ts
@ -1,82 +1,22 @@
-import toSnakeCase from 'lodash.snakecase';
-
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { getDefaultValueForBackend } from '@/object-metadata/utils/getDefaultValueForBackend';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
-import { isDefined } from '~/utils/isDefined';
-
-import { FieldMetadataOption } from '../types/FieldMetadataOption';
-
-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 toSnakeCase(noSpecialCharactersLabel).toUpperCase();
-};

 export const formatFieldMetadataItemInput = (
  input: Partial<
    Pick<
      FieldMetadataItem,
-      'type' | 'label' | 'defaultValue' | 'icon' | 'description'
+      'type' | 'label' | 'defaultValue' | 'icon' | 'description' | 'options'
    >
-  > & { options?: FieldMetadataOption[] },
+  >,
 ) => {
-  const options = input.options as FieldMetadataOption[] | undefined;
-  let defaultValue = input.defaultValue;
-  if (input.type === FieldMetadataType.MultiSelect) {
-    defaultValue = options
-      ?.filter((option) => option.isDefault)
-      ?.map((defaultOption) => getOptionValueFromLabel(defaultOption.label));
-  }
-  if (input.type === FieldMetadataType.Select) {
-    const defaultOption = options?.find((option) => option.isDefault);
-    defaultValue = isDefined(defaultOption)
-      ? getOptionValueFromLabel(defaultOption.label)
-      : undefined;
-  }
-
-  // Check if options has unique values
-  if (options !== undefined) {
-    // Compute the values based on the label
-    const values = options.map((option) =>
-      getOptionValueFromLabel(option.label),
-    );
-
-    if (new Set(values).size !== options.length) {
-      throw new Error(
-        `Options must have unique values, but contains the following duplicates ${values.join(
-          ', ',
-        )}`,
-      );
-    }
-  }
-
  const label = input.label?.trim();

  return {
-    defaultValue:
-      isDefined(defaultValue) && input.type
-        ? getDefaultValueForBackend(defaultValue, input.type)
-        : undefined,
+    defaultValue: input.defaultValue,
    description: input.description?.trim() ?? null,
    icon: input.icon,
    label,
    name: label ? formatMetadataLabelToMetadataNameOrThrows(label) : undefined,
-    options: options?.map((option, index) => ({
-      color: option.color,
-      id: option.id,
-      label: option.label.trim(),
-      position: index,
-      value: getOptionValueFromLabel(option.label),
-    })),
+    options: input.options,
  };
 };
--- a/packages/twenty-front/src/modules/object-metadata/utils/getDefaultValueForBackend.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/getDefaultValueForBackend.ts
@ -1,22 +0,0 @@
-import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
-import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
-
-export const getDefaultValueForBackend = (
-  defaultValue: any,
-  fieldMetadataType: FieldMetadataType,
-) => {
-  if (fieldMetadataType === FieldMetadataType.Currency) {
-    const currencyDefaultValue = defaultValue as FieldCurrencyValue;
-    return {
-      amountMicros: currencyDefaultValue.amountMicros,
-      currencyCode: `'${currencyDefaultValue.currencyCode}'` as CurrencyCode,
-    } satisfies FieldCurrencyValue;
-  } else if (fieldMetadataType === FieldMetadataType.Select) {
-    return defaultValue ? `'${defaultValue}'` : null;
-  } else if (fieldMetadataType === FieldMetadataType.MultiSelect) {
-    return defaultValue.map((value: string) => `'${value}'`);
-  }
-
-  return defaultValue;
-};
--- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts
+++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts
@ -0,0 +1,46 @@
+import { z } from 'zod';
+
+import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
+import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel';
+import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
+
+const selectOptionSchema = z
+  .object({
+    color: themeColorSchema,
+    id: z.string(),
+    label: z.string().trim().min(1),
+    position: z.number(),
+    value: z.string(),
+  })
+  .refine((option) => option.value === getOptionValueFromLabel(option.label), {
+    message: 'Value does not match label',
+  }) satisfies z.ZodType<FieldMetadataItemOption>;
+
+export const selectOptionsSchema = z
+  .array(selectOptionSchema)
+  .min(1)
+  .refine(
+    (options) => {
+      const optionIds = options.map(({ id }) => id);
+      return new Set(optionIds).size === options.length;
+    },
+    {
+      message: 'Options must have unique ids',
+    },
+  )
+  .refine(
+    (options) => {
+      const optionValues = options.map(({ value }) => value);
+      return new Set(optionValues).size === options.length;
+    },
+    {
+      message: 'Options must have unique values',
+    },
+  )
+  .refine(
+    (options) =>
+      [...options].sort().every((option, index) => option.position === index),
+    {
+      message: 'Options positions must be sequential',
+    },
+  );
--- a/packages/twenty-front/src/modules/object-record/record-field/validation-schemas/currencyCodeSchema.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/validation-schemas/currencyCodeSchema.ts
@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
+
+export const currencyCodeSchema = z.nativeEnum(CurrencyCode);
--- 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;
+};
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@ -6,7 +6,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import omit from 'lodash.omit';
 import pick from 'lodash.pick';
 import { IconArchive, IconSettings } from 'twenty-ui';
-import { v4 } from 'uuid';
 import { z } from 'zod';

 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
@ -125,14 +124,9 @@ export const SettingsObjectFieldEdit = () => {
          Object.keys(otherDirtyFields),
        );

-        const options = formattedInput.options?.map((option) => ({
-          ...option,
-          id: option.id ?? v4(),
-        }));
-
        await updateOneFieldMetadataItem({
          fieldMetadataIdToUpdate: activeMetadataField.id,
-          updatePayload: { ...formattedInput, options },
+          updatePayload: formattedInput,
        });
      }

--- a/packages/twenty-front/src/utils/string/tests/applySimpleQuotesToString.test.ts
+++ b/packages/twenty-front/src/utils/string/tests/applySimpleQuotesToString.test.ts
@ -0,0 +1,11 @@
+import { applySimpleQuotesToString } from '../applySimpleQuotesToString';
+
+describe('applySimpleQuotesToString', () => {
+  it('wraps the input string with single quotes', () => {
+    const input = 'Hello, World!';
+
+    const result = applySimpleQuotesToString(input);
+
+    expect(result).toBe(`'${input}'`);
+  });
+});
--- a/packages/twenty-front/src/utils/string/tests/capitalize.test.ts
+++ b/packages/twenty-front/src/utils/string/tests/capitalize.test.ts
--- a/packages/twenty-front/src/utils/string/tests/stripSimpleQuotesFromString.test.ts
+++ b/packages/twenty-front/src/utils/string/tests/stripSimpleQuotesFromString.test.ts
@ -0,0 +1,32 @@
+import { stripSimpleQuotesFromString } from '../stripSimpleQuotesFromString';
+
+describe('stripSimpleQuotesFromString', () => {
+  it('removes surrounding single quotes from a string', () => {
+    // Given
+    const input = "'Hello, World!'";
+
+    // When
+    const output = stripSimpleQuotesFromString(input);
+
+    // Then
+    expect(output).toBe('Hello, World!');
+  });
+
+  it.each([
+    // Given
+    ['no simple quotes'],
+    ["'only at start"],
+    ["only at end'"],
+    ["mid'dle"],
+    [''],
+  ])(
+    'returns the input without changes if the string does not start and end with single quotes (%s)',
+    (input) => {
+      // When
+      const output = stripSimpleQuotesFromString(input);
+
+      // Then
+      expect(output).toBe(input);
+    },
+  );
+});
--- a/packages/twenty-front/src/utils/string/applySimpleQuotesToString.ts
+++ b/packages/twenty-front/src/utils/string/applySimpleQuotesToString.ts
@ -0,0 +1,3 @@
+export const applySimpleQuotesToString = <T extends string>(
+  value: T,
+): `'${T}'` => `'${value}'`;
--- a/packages/twenty-front/src/utils/string/stripSimpleQuotesFromString.ts
+++ b/packages/twenty-front/src/utils/string/stripSimpleQuotesFromString.ts
@ -0,0 +1,8 @@
+import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuotesStringSchema';
+
+export const stripSimpleQuotesFromString = <Input extends string>(
+  value: Input,
+) =>
+  (simpleQuotesStringSchema.safeParse(value).success
+    ? value.slice(1, -1)
+    : value) as Input extends `'${infer Output}'` ? Output : Input;
--- a/packages/twenty-front/src/utils/validation-schemas/tests/simpleQuotesStringSchema.test.ts
+++ b/packages/twenty-front/src/utils/validation-schemas/tests/simpleQuotesStringSchema.test.ts
@ -0,0 +1,38 @@
+import { SafeParseError } from 'zod';
+
+import { simpleQuotesStringSchema } from '../simpleQuotesStringSchema';
+
+describe('simpleQuotesStringSchema', () => {
+  it('validates a string with simple quotes', () => {
+    // Given
+    const input = "'with simple quotes'";
+
+    // When
+    const result = simpleQuotesStringSchema.parse(input);
+
+    // Then
+    expect(result).toBe(input);
+  });
+
+  it.each([
+    // Given
+    ['no simple quotes'],
+    ["'only at start"],
+    ["only at end'"],
+    ["mid'dle"],
+    [''],
+  ])('fails for strings not wrapped in simple quotes (%s)', (input) => {
+    // When
+    const result = simpleQuotesStringSchema.safeParse(input);
+
+    // Then
+    expect(result.success).toBe(false);
+    expect((result as SafeParseError<string>).error.errors).toEqual([
+      {
+        code: 'custom',
+        message: 'String should be wrapped in simple quotes',
+        path: [],
+      },
+    ]);
+  });
+});
--- a/packages/twenty-front/src/utils/validation-schemas/simpleQuotesStringSchema.ts
+++ b/packages/twenty-front/src/utils/validation-schemas/simpleQuotesStringSchema.ts
@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const simpleQuotesStringSchema: z.ZodType<
+  `'${string}'`,
+  z.ZodTypeDef,
+  string
+> = z
+  .string()
+  .refine(
+    (value: string): value is `'${string}'` =>
+      value.startsWith("'") && value.endsWith("'"),
+    {
+      message: 'String should be wrapped in simple quotes',
+    },
+  );
--- a/packages/twenty-ui/mocks/imageMock.js
+++ b/packages/twenty-ui/mocks/imageMock.js
@ -0,0 +1 @@
+export default 'test-file-stub';
--- a/packages/twenty-ui/jest.config.ts
+++ b/packages/twenty-ui/jest.config.ts
@ -1,4 +1,9 @@
-export default {
+import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const tsConfig = require('./tsconfig.json');
+
+const jestConfig: JestConfigWithTsJest = {
  displayName: 'twenty-ui',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['./setupTests.ts'],
@ -15,7 +20,14 @@ export default {
      },
    ],
  },
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
+      '<rootDir>/__mocks__/imageMock.js',
+    ...pathsToModuleNameMapper(tsConfig.compilerOptions.paths),
+  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  coverageDirectory: './coverage',
 };
+
+export default jestConfig;
--- a/packages/twenty-ui/src/theme/index.ts
+++ b/packages/twenty-ui/src/theme/index.ts
@ -32,3 +32,4 @@ export * from './constants/ThemeDark';
 export * from './constants/ThemeLight';
 export * from './provider/ThemeProvider';
 export * from './types/ThemeType';
+export * from './utils/getNextThemeColor';
--- a/packages/twenty-ui/src/theme/utils/tests/getNextThemeColor.test.ts
+++ b/packages/twenty-ui/src/theme/utils/tests/getNextThemeColor.test.ts
@ -0,0 +1,23 @@
+import {
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@ui/theme/constants/MainColorNames';
+
+import { getNextThemeColor } from '../getNextThemeColor';
+
+describe('getNextThemeColor', () => {
+  it('returns the next theme color', () => {
+    const currentColor: ThemeColor = MAIN_COLOR_NAMES[0];
+    const nextColor: ThemeColor = MAIN_COLOR_NAMES[1];
+
+    expect(getNextThemeColor(currentColor)).toBe(nextColor);
+  });
+
+  it('returns the first color when reaching the end', () => {
+    const currentColor: ThemeColor =
+      MAIN_COLOR_NAMES[MAIN_COLOR_NAMES.length - 1];
+    const nextColor: ThemeColor = MAIN_COLOR_NAMES[0];
+
+    expect(getNextThemeColor(currentColor)).toBe(nextColor);
+  });
+});
--- a/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts
+++ b/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts
@ -0,0 +1,9 @@
+import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme';
+
+export const getNextThemeColor = (currentColor: ThemeColor): ThemeColor => {
+  const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
+    (color) => color === currentColor,
+  );
+  const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length;
+  return MAIN_COLOR_NAMES[nextColorIndex];
+};