[fix] Support non latin characters in schema names (#5063)

Fixes #4943

## How was it tested?
Local (front + /metadata)
Unit tests for utils

---------

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

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

@@ -1,7 +1,7 @@
-import toCamelCase from 'lodash.camelcase';
 import toSnakeCase from 'lodash.snakecase';
 
 import { Field, 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';
@@ -64,7 +64,7 @@ export const formatFieldMetadataItemInput = (
     description: input.description?.trim() ?? null,
     icon: input.icon,
     label: input.label.trim(),
-    name: toCamelCase(input.label.trim()),
+    name: formatMetadataLabelToMetadataNameOrThrows(input.label.trim()),
     options: options?.map((option, index) => ({
       color: option.color,
       id: option.id,

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

@@ -1,4 +1,4 @@
-const metadataLabelValidationPattern = /^[a-zA-Z][a-zA-Z0-9 ]*$/;
+const metadataLabelValidationPattern = /^[^0-9].*$/;
 
 export const validateMetadataLabel = (value: string) =>
   !!value.match(metadataLabelValidationPattern);

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { z } from 'zod';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextArea } from '@/ui/input/components/TextArea';
@@ -92,7 +93,11 @@ export const SettingsDataModelObjectAboutForm = ({
                 label={label}
                 placeholder={placeholder}
                 value={value}
-                onChange={onChange}
+                onChange={(value) => {
+                  if (!value || validateMetadataLabel(value)) {
+                    onChange?.(value);
+                  }
+                }}
                 disabled={disabled}
                 fullWidth
               />

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

@@ -1,7 +1,6 @@
-import camelCase from 'lodash.camelcase';
-
 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';
 
 export const settingsCreateObjectInputSchema = objectMetadataItemSchema
   .pick({
@@ -12,6 +11,8 @@ export const settingsCreateObjectInputSchema = objectMetadataItemSchema
   })
   .transform<CreateObjectInput>((value) => ({
     ...value,
-    nameSingular: camelCase(value.labelSingular),
-    namePlural: camelCase(value.labelPlural),
+    nameSingular: formatMetadataLabelToMetadataNameOrThrows(
+      value.labelSingular,
+    ),
+    namePlural: formatMetadataLabelToMetadataNameOrThrows(value.labelPlural),
   }));

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

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

packages/twenty-front/src/pages/settings/data-model/utils/__tests__/format-metadata-label-to-name.spec.ts

@@ -0,0 +1,57 @@
+import { formatMetadataLabelToMetadataNameOrThrows } from '~/pages/settings/data-model/utils/format-metadata-label-to-name.util';
+
+const VALID_STRING_PATTERN = /^[a-zA-Z][a-zA-Z0-9 ]*$/;
+
+describe('formatMetadataLabelToMetadataNameOrThrows', () => {
+  it('leaves strings unchanged if only latin characters', () => {
+    const input = 'testName';
+
+    expect(
+      formatMetadataLabelToMetadataNameOrThrows(input).match(
+        VALID_STRING_PATTERN,
+      )?.length,
+    ).toBe(1);
+    expect(formatMetadataLabelToMetadataNameOrThrows(input)).toEqual(input);
+  });
+
+  it('leaves strings unchanged if only latin characters and digits', () => {
+    const input = 'testName123';
+
+    expect(
+      formatMetadataLabelToMetadataNameOrThrows(input).match(
+        VALID_STRING_PATTERN,
+      )?.length,
+    ).toBe(1);
+    expect(formatMetadataLabelToMetadataNameOrThrows(input)).toEqual(input);
+  });
+
+  it('format strings with non latin characters', () => {
+    const input = 'בְרִבְרִ';
+    const expected = 'bRibRi';
+
+    expect(
+      formatMetadataLabelToMetadataNameOrThrows(input).match(
+        VALID_STRING_PATTERN,
+      )?.length,
+    ).toBe(1);
+    expect(formatMetadataLabelToMetadataNameOrThrows(input)).toEqual(expected);
+  });
+
+  it('format strings with mixed characters', () => {
+    const input = 'aa2בְרִבְרִ';
+    const expected = 'aa2BRibRi';
+
+    expect(
+      formatMetadataLabelToMetadataNameOrThrows(input).match(
+        VALID_STRING_PATTERN,
+      )?.length,
+    ).toBe(1);
+    expect(formatMetadataLabelToMetadataNameOrThrows(input)).toEqual(expected);
+  });
+
+  it('throws error if could not format', () => {
+    const input = '$$$***';
+
+    expect(() => formatMetadataLabelToMetadataNameOrThrows(input)).toThrow();
+  });
+});

packages/twenty-front/src/pages/settings/data-model/utils/format-metadata-label-to-name.util.ts

@@ -0,0 +1,26 @@
+import toCamelCase from 'lodash.camelcase';
+import { slugify, transliterate } from 'transliteration';
+
+import { isDefined } from '~/utils/isDefined';
+
+const VALID_STRING_PATTERN = /^[a-zA-Z][a-zA-Z0-9 ]*$/;
+
+export const formatMetadataLabelToMetadataNameOrThrows = (
+  string: string,
+): string => {
+  let formattedString = string;
+
+  if (isDefined(formattedString.match(VALID_STRING_PATTERN))) {
+    return toCamelCase(formattedString);
+  }
+
+  formattedString = toCamelCase(
+    slugify(transliterate(formattedString, { trim: true })),
+  );
+
+  if (!formattedString.match(VALID_STRING_PATTERN)) {
+    throw new Error(`"${string}" is not a valid name`);
+  }
+
+  return formattedString;
+};