4778 multi select field front implement multi select type (#4887)

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx

@@ -27,6 +27,7 @@ export type SettingsDataModelFieldSettingsFormValues = {
   currency: SettingsObjectFieldCurrencyFormValues;
   relation: SettingsObjectFieldRelationFormValues;
   select: SettingsObjectFieldSelectFormValues;
+  multiSelect: SettingsObjectFieldSelectFormValues;
   defaultValue: any;
 };
 
@@ -63,6 +64,7 @@ const previewableTypes = [
   FieldMetadataType.Currency,
   FieldMetadataType.DateTime,
   FieldMetadataType.Select,
+  FieldMetadataType.MultiSelect,
   FieldMetadataType.Link,
   FieldMetadataType.Number,
   FieldMetadataType.Rating,
@@ -98,7 +100,11 @@ export const SettingsDataModelFieldSettingsFormCard = ({
             shrink={fieldMetadataItem.type === FieldMetadataType.Relation}
             objectMetadataItem={objectMetadataItem}
             relationObjectMetadataItem={relationObjectMetadataItem}
-            selectOptions={values.select}
+            selectOptions={
+              fieldMetadataItem.type === FieldMetadataType.MultiSelect
+                ? values.multiSelect
+                : values.select
+            }
           />
           {fieldMetadataItem.type === FieldMetadataType.Relation &&
             !!relationObjectMetadataItem && (
@@ -155,6 +161,14 @@ export const SettingsDataModelFieldSettingsFormCard = ({
               onChange({ select: nextSelectValues })
             }
           />
+        ) : fieldMetadataItem.type === FieldMetadataType.MultiSelect ? (
+          <SettingsObjectFieldSelectForm
+            values={values.multiSelect}
+            onChange={(nextMultiSelectValues) =>
+              onChange({ multiSelect: nextMultiSelectValues })
+            }
+            isMultiSelect={true}
+          />
         ) : fieldMetadataItem.type === FieldMetadataType.Boolean ? (
           <SettingsDataModelDefaultValueForm
             value={values.defaultValue}

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx

@@ -26,6 +26,7 @@ const defaultValues = {
   currency: fieldMetadataFormDefaultValues.currency,
   relation: fieldMetadataFormDefaultValues.relation,
   select: fieldMetadataFormDefaultValues.select,
+  multiSelect: fieldMetadataFormDefaultValues.multiSelect,
   defaultValue: fieldMetadataFormDefaultValues.defaultValue,
 };
 

packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/__tests__/useFieldMetadataForm.test.ts

@@ -27,6 +27,9 @@ describe('useFieldMetadataForm', () => {
       select: [
         { color: 'green', label: 'Option 1', value: expect.any(String) },
       ],
+      multiSelect: [
+        { color: 'green', label: 'Option 1', value: expect.any(String) },
+      ],
     });
   });
 

packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/useFieldMetadataForm.ts

@@ -34,13 +34,19 @@ export const fieldMetadataFormDefaultValues: FormValues = {
   },
   defaultValue: null,
   select: [{ color: 'green', label: 'Option 1', value: v4() }],
+  multiSelect: [{ color: 'green', label: 'Option 1', value: v4() }],
 };
-
 const fieldSchema = z.object({
   description: z.string().optional(),
   icon: z.string().startsWith('Icon'),
   label: z.string().min(1),
   defaultValue: z.any(),
+  type: z.enum(
+    Object.values(FieldMetadataType) as [
+      FieldMetadataType,
+      ...FieldMetadataType[],
+    ],
+  ),
 });
 
 const currencySchema = fieldSchema.merge(
@@ -83,10 +89,27 @@ const selectSchema = fieldSchema.merge(
   }),
 );
 
+const multiSelectSchema = fieldSchema.merge(
+  z.object({
+    type: z.literal(FieldMetadataType.MultiSelect),
+    multiSelect: z
+      .array(
+        z.object({
+          color: themeColorSchema,
+          id: z.string().optional(),
+          isDefault: z.boolean().optional(),
+          label: z.string().min(1),
+        }),
+      )
+      .nonempty(),
+  }),
+);
+
 const {
   Currency: _Currency,
   Relation: _Relation,
   Select: _Select,
+  MultiSelect: _MultiSelect,
   ...otherFieldTypes
 } = FieldMetadataType;
 
@@ -95,6 +118,7 @@ type OtherFieldType = Exclude<
   | FieldMetadataType.Currency
   | FieldMetadataType.Relation
   | FieldMetadataType.Select
+  | FieldMetadataType.MultiSelect
 >;
 
 const otherFieldTypesSchema = fieldSchema.merge(
@@ -109,6 +133,7 @@ const schema = z.discriminatedUnion('type', [
   currencySchema,
   relationSchema,
   selectSchema,
+  multiSelectSchema,
   otherFieldTypesSchema,
 ]);
 
@@ -127,6 +152,8 @@ export const useFieldMetadataForm = () => {
   const [hasCurrencyFormChanged, setHasCurrencyFormChanged] = useState(false);
   const [hasRelationFormChanged, setHasRelationFormChanged] = useState(false);
   const [hasSelectFormChanged, setHasSelectFormChanged] = useState(false);
+  const [hasMultiSelectFormChanged, setHasMultiSelectFormChanged] =
+    useState(false);
   const [hasDefaultValueChanged, setHasDefaultValueFormChanged] =
     useState(false);
   const [validationResult, setValidationResult] = useState(
@@ -174,13 +201,15 @@ export const useFieldMetadataForm = () => {
       currency: initialCurrencyFormValues,
       relation: initialRelationFormValues,
       select: initialSelectFormValues,
-      defaultValue: initalDefaultValue,
+      multiSelect: initialMultiSelectFormValues,
+      defaultValue: initialDefaultValue,
       ...initialFieldFormValues
     } = initialFormValues;
     const {
       currency: nextCurrencyFormValues,
       relation: nextRelationFormValues,
       select: nextSelectFormValues,
+      multiSelect: nextMultiSelectFormValues,
       defaultValue: nextDefaultValue,
       ...nextFieldFormValues
     } = nextFormValues;
@@ -200,9 +229,13 @@ export const useFieldMetadataForm = () => {
       nextFieldFormValues.type === FieldMetadataType.Select &&
         !isDeeplyEqual(initialSelectFormValues, nextSelectFormValues),
     );
+    setHasMultiSelectFormChanged(
+      nextFieldFormValues.type === FieldMetadataType.MultiSelect &&
+        !isDeeplyEqual(initialMultiSelectFormValues, nextMultiSelectFormValues),
+    );
     setHasDefaultValueFormChanged(
       nextFieldFormValues.type === FieldMetadataType.Boolean &&
-        !isDeeplyEqual(initalDefaultValue, nextDefaultValue),
+        !isDeeplyEqual(initialDefaultValue, nextDefaultValue),
     );
   };
 
@@ -215,9 +248,11 @@ export const useFieldMetadataForm = () => {
       hasCurrencyFormChanged ||
       hasRelationFormChanged ||
       hasSelectFormChanged ||
+      hasMultiSelectFormChanged ||
       hasDefaultValueChanged,
     hasRelationFormChanged,
     hasSelectFormChanged,
+    hasMultiSelectFormChanged,
     hasDefaultValueChanged,
     initForm,
     isInitialized,