Fix transliteration for metadata + transliterate select options (#5430)

## Context 
Fixes #5403

Transliteration is now integrated to form validation through the schema.
While it does not impede inputting an invalid value, it impedes
submitting a form that will fail as the transliteration is not possible.
Until then we were only performing the transliteration at save time in
the front-end, but it's best to provide the information as soon as
possible. Later we will add helpers to guide the user (eg "This name is
not valid": https://github.com/twentyhq/twenty/issues/5428).

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx

@@ -18,7 +18,9 @@ export const RightDrawerCalendarEvent = () => {
     onCompleted: (record) => setRecords([record]),
   });
 
-  if (!calendarEvent) return null;
+  if (!calendarEvent) {
+    return null;
+  }
 
   return <CalendarEventDetails calendarEvent={calendarEvent} />;
 };

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

@@ -1,5 +1,5 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
+import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const formatFieldMetadataItemInput = (
   input: Partial<
@@ -16,7 +16,7 @@ export const formatFieldMetadataItemInput = (
     description: input.description?.trim() ?? null,
     icon: input.icon,
     label,
-    name: label ? formatMetadataLabelToMetadataNameOrThrows(label) : undefined,
+    name: label ? computeMetadataNameFromLabelOrThrow(label) : undefined,
     options: input.options,
   };
 };

packages/twenty-front/src/modules/object-metadata/validation-schemas/__tests__/metadataLabelSchema.test.ts

@@ -0,0 +1,24 @@
+import { metadataLabelSchema } from '@/object-metadata/validation-schemas/metadataLabelSchema';
+
+describe('metadataLabelSchema', () => {
+  it('validates a valid label', () => {
+    // Given
+    const validMetadataLabel = 'Option 1';
+
+    // When
+    const result = metadataLabelSchema.parse(validMetadataLabel);
+
+    // Then
+    expect(result).toEqual(validMetadataLabel);
+  });
+  it('validates a label with non-latin characters', () => {
+    // Given
+    const validMetadataLabel = 'עִבְרִי';
+
+    // When
+    const result = metadataLabelSchema.parse(validMetadataLabel);
+
+    // Then
+    expect(result).toEqual(validMetadataLabel);
+  });
+});

packages/twenty-front/src/modules/object-metadata/validation-schemas/metadataLabelSchema.ts

@@ -1,7 +1,23 @@
 import { z } from 'zod';
 
+import { METADATA_LABEL_VALID_PATTERN } from '~/pages/settings/data-model/constants/MetadataLabelValidPattern';
+import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
+
 export const metadataLabelSchema = z
   .string()
   .trim()
   .min(1)
-  .regex(/^[a-zA-Z][a-zA-Z0-9 ()]*$/);
+  .regex(METADATA_LABEL_VALID_PATTERN)
+  .refine(
+    (label) => {
+      try {
+        computeMetadataNameFromLabelOrThrow(label);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+    {
+      message: 'Label is not formattable',
+    },
+  ); // allows non-latin char

packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts

@@ -3,6 +3,7 @@ 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';
+import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
 
 const selectOptionSchema = z
   .object({
@@ -14,7 +15,20 @@ const selectOptionSchema = z
   })
   .refine((option) => option.value === getOptionValueFromLabel(option.label), {
     message: 'Value does not match label',
-  }) satisfies z.ZodType<FieldMetadataItemOption>;
+  })
+  .refine(
+    (option) => {
+      try {
+        computeOptionValueFromLabelOrThrow(option.label);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+    {
+      message: 'Label is not transliterable',
+    },
+  ) satisfies z.ZodType<FieldMetadataItemOption>;
 
 export const selectOptionsSchema = z
   .array(selectOptionSchema)

packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/getOptionValueFromLabel.ts

@@ -1,15 +1,14 @@
 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,
-    '',
-  );
+import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
 
-  return snakeCase(noSpecialCharactersLabel).toUpperCase();
+export const getOptionValueFromLabel = (label: string) => {
+  let transliteratedLabel = label;
+  try {
+    transliteratedLabel = computeOptionValueFromLabelOrThrow(label);
+  } catch (error) {
+    return label;
+  }
+
+  return snakeCase(transliteratedLabel).toUpperCase();
 };

packages/twenty-front/src/modules/settings/data-model/validation-schemas/settingsCreateObjectInputSchema.ts

@@ -1,6 +1,6 @@
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
 import { CreateObjectInput } from '~/generated-metadata/graphql';
-import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
+import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const settingsCreateObjectInputSchema = objectMetadataItemSchema
   .pick({
@@ -11,8 +11,6 @@ export const settingsCreateObjectInputSchema = objectMetadataItemSchema
   })
   .transform<CreateObjectInput>((value) => ({
     ...value,
-    nameSingular: formatMetadataLabelToMetadataNameOrThrows(
-      value.labelSingular,
-    ),
-    namePlural: formatMetadataLabelToMetadataNameOrThrows(value.labelPlural),
+    nameSingular: computeMetadataNameFromLabelOrThrow(value.labelSingular),
+    namePlural: computeMetadataNameFromLabelOrThrow(value.labelPlural),
   }));

packages/twenty-front/src/modules/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema.ts

@@ -1,6 +1,6 @@
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
 import { UpdateObjectPayload } from '~/generated-metadata/graphql';
-import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
+import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const settingsUpdateObjectInputSchema = objectMetadataItemSchema
   .pick({
@@ -16,9 +16,9 @@ export const settingsUpdateObjectInputSchema = objectMetadataItemSchema
   .transform<UpdateObjectPayload>((value) => ({
     ...value,
     nameSingular: value.labelSingular
-      ? formatMetadataLabelToMetadataNameOrThrows(value.labelSingular)
+      ? computeMetadataNameFromLabelOrThrow(value.labelSingular)
       : undefined,
     namePlural: value.labelPlural
-      ? formatMetadataLabelToMetadataNameOrThrows(value.labelPlural)
+      ? computeMetadataNameFromLabelOrThrow(value.labelPlural)
       : undefined,
   }));