feat: add EnumFieldDisplay and Enum field preview (#2487)

Closes #2428

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

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -32,8 +32,8 @@ const StyledSettingsObjectFieldTypeCard = styled(SettingsObjectFieldTypeCard)`
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
-// TODO: remove "relation" type for now, add it back when the backend is ready.
-const { RELATION: _, ...dataTypesWithoutRelation } = dataTypes;
+// TODO: remove "enum" and "relation" types for now, add them back when the backend is ready.
+const { ENUM: _ENUM, RELATION: _RELATION, ...allowedDataTypes } = dataTypes;
 
 export const SettingsObjectFieldTypeSelectSection = ({
   disabled,
@@ -57,12 +57,10 @@ export const SettingsObjectFieldTypeSelectSection = ({
       dropdownScopeId="object-field-type-select"
       value={fieldType}
       onChange={onChange}
-      options={Object.entries(dataTypesWithoutRelation).map(
-        ([key, dataType]) => ({
-          value: key as FieldMetadataType,
-          ...dataType,
-        }),
-      )}
+      options={Object.entries(allowedDataTypes).map(([key, dataType]) => ({
+        value: key as FieldMetadataType,
+        ...dataType,
+      }))}
     />
     {['BOOLEAN', 'DATE', 'MONEY', 'NUMBER', 'TEXT', 'URL'].includes(
       fieldType,

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx

@@ -73,6 +73,14 @@ export const Number: Story = {
   },
 };
 
+export const Select: Story = {
+  args: {
+    fieldIconKey: 'IconBuildingFactory2',
+    fieldLabel: 'Industry',
+    fieldType: FieldMetadataType.Enum,
+  },
+};
+
 export const CustomObject: Story = {
   args: {
     isObjectCustom: true,

front/src/modules/settings/data-model/constants/dataTypes.ts

@@ -8,6 +8,7 @@ import {
   IconNumbers,
   IconPhone,
   IconPlug,
+  IconTag,
   IconTextSize,
   IconUser,
 } from '@/ui/display/icon';
@@ -52,6 +53,11 @@ export const dataTypes: Record<
     Icon: IconCalendarEvent,
     defaultValue: defaultDateValue.toISOString(),
   },
+  [FieldMetadataType.Enum]: {
+    label: 'Select',
+    Icon: IconTag,
+    defaultValue: { color: 'green', text: 'Option 1' },
+  },
   [FieldMetadataType.Currency]: {
     label: 'Currency',
     Icon: IconCoins,
@@ -66,5 +72,4 @@ export const dataTypes: Record<
     defaultValue: 50,
   },
   [FieldMetadataType.FullName]: { label: 'Full Name', Icon: IconUser },
-  [FieldMetadataType.Enum]: { label: 'Enum', Icon: IconPlug },
 };

front/src/modules/settings/data-model/types/ObjectFieldDataType.ts

@@ -1,6 +1,7 @@
 export type MetadataFieldDataType =
   | 'BOOLEAN'
   | 'DATE'
+  | 'ENUM'
   | 'MONEY'
   | 'NUMBER'
   | 'RELATION'