fix: options value can't contain special characters (#3738)

* fix: options value can't contain special characters

* add tests for formatFieldMetadataItemInput util

* fix test

* fix: add emoji test

---------

Co-authored-by: corentin <corentin@twenty.com>

packages/twenty-front/src/modules/object-metadata/utils/__tests__/formatFieldMetadataItemInput.test.ts

@@ -0,0 +1,105 @@
+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);
+  });
+});
+
+describe('formatFieldMetadataItemInput', () => {
+  it('should format the field metadata item input correctly', () => {
+    const input = {
+      label: 'Example Label',
+      icon: 'example-icon',
+      description: 'Example description',
+      options: [
+        { id: '1', label: 'Option 1', color: 'red' as const, isDefault: true },
+        { id: '2', label: 'Option 2', color: 'blue' as const },
+      ],
+    };
+
+    const expected = {
+      description: 'Example description',
+      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',
+        },
+      ],
+      defaultValue: 'OPTION_1',
+    };
+
+    const result = formatFieldMetadataItemInput(input);
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle input without options', () => {
+    const input = {
+      label: 'Example Label',
+      icon: 'example-icon',
+      description: 'Example description',
+    };
+
+    const expected = {
+      description: 'Example description',
+      icon: 'example-icon',
+      label: 'Example Label',
+      name: 'exampleLabel',
+      options: undefined,
+      defaultValue: undefined,
+    };
+
+    const result = formatFieldMetadataItemInput(input);
+
+    expect(result).toEqual(expected);
+  });
+});

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

@@ -5,8 +5,19 @@ import { Field } from '~/generated-metadata/graphql';
 
 import { FieldMetadataOption } from '../types/FieldMetadataOption';
 
-const getOptionValueFromLabel = (label: string) =>
+export const getOptionValueFromLabel = (label: string) => {
-  toSnakeCase(label.trim()).toUpperCase();
+  // 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: Pick<Field, 'label' | 'icon' | 'description' | 'defaultValue'> & {