Add Multiselect for forms (#9092)

- Add new FormMultiSelectField component
- Factorize existing display / input into new ui components
- Update the variable resolver to handle arrays properly

<img width="526" alt="Capture d’écran 2024-12-17 à 11 46 38"
src="https://github.com/user-attachments/assets/6d37b513-8caa-43d0-a27e-ab55dac21f6d"
/>

packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx

@@ -0,0 +1,47 @@
+import { Tag, THEME_COMMON } from 'twenty-ui';
+
+import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
+import { SelectOption } from '@/spreadsheet-import/types';
+import styled from '@emotion/styled';
+
+const spacing1 = THEME_COMMON.spacing(1);
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${spacing1};
+  justify-content: flex-start;
+
+  max-width: 100%;
+
+  overflow: hidden;
+
+  width: 100%;
+`;
+
+export const MultiSelectDisplay = ({
+  values,
+  options,
+}: {
+  values: FieldMultiSelectValue | undefined;
+  options: SelectOption[];
+}) => {
+  const selectedOptions = values
+    ? options?.filter((option) => values.includes(option.value))
+    : [];
+
+  if (!selectedOptions) return null;
+
+  return (
+    <StyledContainer>
+      {selectedOptions.map((selectedOption, index) => (
+        <Tag
+          preventShrink
+          key={index}
+          color={selectedOption.color ?? 'transparent'}
+          text={selectedOption.label}
+        />
+      ))}
+    </StyledContainer>
+  );
+};