From 15201aa37d07c7d1ec70a4854719c768f4bea675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix@twenty.com>
Date: Fri, 8 Nov 2024 17:19:46 +0100
Subject: [PATCH] Improve algo

---
 .../select/utils/getOptionValueFromLabel.ts      |  7 +++----
 .../constants/OptionValueValidPattern.ts         |  2 +-
 .../compute-option-value-from-label.utils.ts     |  7 ++++++-
 .../utils/transliterate-and-format.utils.ts      | 16 +++++++---------
 .../twenty-ui/src/display/tag/components/Tag.tsx |  5 ++---
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel.ts b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel.ts
index cbfc4b4a084c5..b55d0ebfd735a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel.ts
@@ -1,5 +1,3 @@
-import snakeCase from 'lodash.snakecase';
-
 import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
 
 export const getOptionValueFromLabel = (label: string) => {
@@ -7,8 +5,9 @@ export const getOptionValueFromLabel = (label: string) => {
   try {
     transliteratedLabel = computeOptionValueFromLabelOrThrow(label);
   } catch (error) {
-    return "";
+    console.error(error);
+    return '';
   }
 
-  return snakeCase(transliteratedLabel).toUpperCase();
+  return transliteratedLabel;
 };
diff --git a/packages/twenty-front/src/pages/settings/data-model/constants/OptionValueValidPattern.ts b/packages/twenty-front/src/pages/settings/data-model/constants/OptionValueValidPattern.ts
index 2d8ef0210eb93..3db373acc14a0 100644
--- a/packages/twenty-front/src/pages/settings/data-model/constants/OptionValueValidPattern.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/constants/OptionValueValidPattern.ts
@@ -1 +1 @@
-export const OPTION_VALUE_VALID_PATTERN = /^[a-zA-Z0-9]+$/;
+export const OPTION_VALUE_VALID_PATTERN = /^[A-Z_][A-Z0-9_]*$/;
diff --git a/packages/twenty-front/src/pages/settings/data-model/utils/compute-option-value-from-label.utils.ts b/packages/twenty-front/src/pages/settings/data-model/utils/compute-option-value-from-label.utils.ts
index ebf66346ade6f..80ec1d00128ba 100644
--- a/packages/twenty-front/src/pages/settings/data-model/utils/compute-option-value-from-label.utils.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/utils/compute-option-value-from-label.utils.ts
@@ -2,5 +2,10 @@ import { OPTION_VALUE_VALID_PATTERN } from '~/pages/settings/data-model/constant
 import { transliterateAndFormatOrThrow } from '~/pages/settings/data-model/utils/transliterate-and-format.utils';
 
 export const computeOptionValueFromLabelOrThrow = (label: string): string => {
-  return transliterateAndFormatOrThrow(label, OPTION_VALUE_VALID_PATTERN);
+  const prefixedLabel = /^\d/.test(label) ? `OPT${label}` : label;
+
+  return transliterateAndFormatOrThrow(
+    prefixedLabel,
+    OPTION_VALUE_VALID_PATTERN,
+  );
 };
diff --git a/packages/twenty-front/src/pages/settings/data-model/utils/transliterate-and-format.utils.ts b/packages/twenty-front/src/pages/settings/data-model/utils/transliterate-and-format.utils.ts
index b3b4419021e43..7798eb7d4419e 100644
--- a/packages/twenty-front/src/pages/settings/data-model/utils/transliterate-and-format.utils.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/utils/transliterate-and-format.utils.ts
@@ -1,5 +1,4 @@
-import toCamelCase from 'lodash.camelcase';
-import { slugify, transliterate } from 'transliteration';
+import { slugify } from 'transliteration';
 
 import { isDefined } from '~/utils/isDefined';
 
@@ -7,15 +6,14 @@ export const transliterateAndFormatOrThrow = (
   string: string,
   validStringPattern: RegExp,
 ): string => {
-  let formattedString = string;
-
-  if (isDefined(formattedString.match(validStringPattern))) {
-    return toCamelCase(formattedString);
+  if (isDefined(string.match(validStringPattern))) {
+    return string;
   }
 
-  formattedString = toCamelCase(
-    slugify(transliterate(formattedString, { trim: true })),
-  );
+  const formattedString = slugify(string, {
+    trim: true,
+    separator: '_',
+  }).toUpperCase();
 
   if (!formattedString.match(validStringPattern)) {
     throw new Error(`"${string}" is not a valid name`);
diff --git a/packages/twenty-ui/src/display/tag/components/Tag.tsx b/packages/twenty-ui/src/display/tag/components/Tag.tsx
index 3b5f84b08a649..a8ab14dd3ff39 100644
--- a/packages/twenty-ui/src/display/tag/components/Tag.tsx
+++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx
@@ -43,12 +43,11 @@ const StyledTag = styled.h3<{
   border: ${({ variant, theme }) =>
     variant === 'outline' || variant === 'border'
       ? `1px ${variant === 'border' ? 'solid' : 'dashed'} ${theme.border.color.strong}`
-      : ''};
+      : 'none'};
 
   gap: ${spacing1};
 
-  min-width: ${({ preventShrink }) =>
-    preventShrink ? 'fit-content' : 'none;'};
+  min-width: ${({ preventShrink }) => (preventShrink ? 'fit-content' : 'none')};
 `;
 
 const StyledContent = styled.span`