Basic import for select in CSV (#6047)

Enables basic support for Select import and field matching in CSV. 
It's not pretty! But it's better than what we had before.
We should iterate on that quickly

<img width="591" alt="Screenshot 2024-06-26 at 18 41 16"
src="https://github.com/twentyhq/twenty/assets/6399865/99f67f39-3f0f-4074-aac6-3200954be08a">

packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts

@@ -1,11 +1,11 @@
 import { isNonEmptyString } from '@sniptt/guards';
-import { IconComponent, useIcons } from 'twenty-ui';
+import { useIcons } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
 import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation';
 import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
-import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types';
+import { Field, SpreadsheetOptions } from '@/spreadsheet-import/types';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -32,15 +32,7 @@ export const useSpreadsheetRecordImport = (objectNameSingular: string) => {
     )
     .sort((a, b) => a.name.localeCompare(b.name));
 
-  const templateFields: {
+  const templateFields: Field<string>[] = [];
-    icon: IconComponent;
-    label: string;
-    key: string;
-    fieldType: {
-      type: 'input' | 'checkbox';
-    };
-    validations?: Validation[];
-  }[] = [];
   for (const field of fields) {
     if (field.type === FieldMetadataType.FullName) {
       templateFields.push({
@@ -80,6 +72,24 @@ export const useSpreadsheetRecordImport = (objectNameSingular: string) => {
           field.label + ' (ID)',
         ),
       });
+    } else if (field.type === FieldMetadataType.Select) {
+      templateFields.push({
+        icon: getIcon(field.icon),
+        label: field.label,
+        key: field.name,
+        fieldType: {
+          type: 'select',
+          options:
+            field.options?.map((option) => ({
+              label: option.label,
+              value: option.value,
+            })) || [],
+        },
+        validations: getSpreadSheetValidation(
+          field.type,
+          field.label + ' (ID)',
+        ),
+      });
     } else {
       templateFields.push({
         icon: getIcon(field.icon),

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -125,7 +125,7 @@ export const MatchColumnSelect = ({
             <DropdownMenu
               data-select-disable
               ref={dropdownContainerRef}
-              width={refs.domReference.current?.clientWidth}
+              // width={refs.domReference.current?.clientWidth}
             >
               <DropdownMenuSearchInput
                 value={searchFilter}

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -143,6 +143,10 @@ export const ValidationStep = <T extends string>({
               (importColumn) =>
                 (importColumn.type === ColumnType.matched &&
                   importColumn.value === column.key) ||
+                (importColumn.type === ColumnType.matchedSelect &&
+                  importColumn.value === column.key) ||
+                (importColumn.type === ColumnType.matchedSelectOptions &&
+                  importColumn.value === column.key) ||
                 column.key === 'select-row',
             ).length > 0;
 

packages/twenty-front/src/modules/spreadsheet-import/utils/__tests__/setColumn.test.ts

@@ -20,10 +20,13 @@ describe('setColumn', () => {
     value: 'oldValue',
   };
 
-  it('should return a matchedSelect column if field type is "select"', () => {
+  it('should return a matchedSelectOptions column if field type is "select"', () => {
     const field = {
       ...defaultField,
-      fieldType: { type: 'select' },
+      fieldType: {
+        type: 'select',
+        options: [{ value: 'John' }, { value: 'Alice' }],
+      },
     } as Field<'Name'>;
 
     const data = [['John'], ['Alice']];
@@ -32,14 +35,16 @@ describe('setColumn', () => {
     expect(result).toEqual({
       index: 0,
       header: 'Name',
-      type: ColumnType.matchedSelect,
+      type: ColumnType.matchedSelectOptions,
       value: 'Name',
       matchedOptions: [
         {
           entry: 'John',
+          value: 'John',
         },
         {
           entry: 'Alice',
+          value: 'Alice',
         },
       ],
     });

packages/twenty-front/src/modules/spreadsheet-import/utils/setColumn.ts

@@ -2,6 +2,7 @@ import {
   Column,
   ColumnType,
   MatchColumnsStepProps,
+  MatchedOptions,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Field } from '@/spreadsheet-import/types';
 
@@ -12,33 +13,56 @@ export const setColumn = <T extends string>(
   field?: Field<T>,
   data?: MatchColumnsStepProps<T>['data'],
 ): Column<T> => {
-  switch (field?.fieldType.type) {
+  if (field?.fieldType.type === 'select') {
-    case 'select':
+    const fieldOptions = field.fieldType.options;
-      return {
+    const uniqueData = uniqueEntries(
-        ...oldColumn,
+      data || [],
-        type: ColumnType.matchedSelect,
+      oldColumn.index,
-        value: field.key,
+    ) as MatchedOptions<T>[];
-        matchedOptions: uniqueEntries(data || [], oldColumn.index),
+    const matchedOptions = uniqueData.map((record) => {
-      };
+      const value = fieldOptions.find(
-    case 'checkbox':
+        (fieldOption) =>
-      return {
+          fieldOption.value === record.entry ||
-        index: oldColumn.index,
+          fieldOption.label === record.entry,
-        type: ColumnType.matchedCheckbox,
+      )?.value;
-        value: field.key,
+      return value
-        header: oldColumn.header,
+        ? ({ ...record, value } as MatchedOptions<T>)
-      };
+        : (record as MatchedOptions<T>);
-    case 'input':
+    });
-      return {
+    const allMatched =
-        index: oldColumn.index,
+      matchedOptions.filter((o) => o.value).length === uniqueData?.length;
-        type: ColumnType.matched,
+
-        value: field.key,
+    return {
-        header: oldColumn.header,
+      ...oldColumn,
-      };
+      type: allMatched
-    default:
+        ? ColumnType.matchedSelectOptions
-      return {
+        : ColumnType.matchedSelect,
-        index: oldColumn.index,
+      value: field.key,
-        header: oldColumn.header,
+      matchedOptions,
-        type: ColumnType.empty,
+    };
-      };
   }
+
+  if (field?.fieldType.type === 'checkbox') {
+    return {
+      index: oldColumn.index,
+      type: ColumnType.matchedCheckbox,
+      value: field.key,
+      header: oldColumn.header,
+    };
+  }
+
+  if (field?.fieldType.type === 'input') {
+    return {
+      index: oldColumn.index,
+      type: ColumnType.matched,
+      value: field.key,
+      header: oldColumn.header,
+    };
+  }
+
+  return {
+    index: oldColumn.index,
+    header: oldColumn.header,
+    type: ColumnType.empty,
+  };
 };