Fix multi select filtering (#5358) (#8452)

Allow filtering by multi-select fields.

<img width="1053" alt="Screenshot 2024-11-11 at 11 54 45"
src="https://github.com/user-attachments/assets/a79b2251-94e3-48f8-abda-e808103a6c39">

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx

@@ -75,7 +75,10 @@ export const ViewBarFilterEffect = ({
         ? JSON.parse(viewFilterUsedInDropdown.value)
         : [];
       setObjectFilterDropdownSelectedRecordIds(viewFilterSelectedRecords);
-    } else if (filterDefinitionUsedInDropdown?.type === 'SELECT') {
+    } else if (
+      isDefined(filterDefinitionUsedInDropdown) &&
+      ['SELECT', 'MULTI_SELECT'].includes(filterDefinitionUsedInDropdown.type)
+    ) {
       const viewFilterUsedInDropdown =
         currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
           (filter) =>

packages/twenty-front/src/modules/views/view-filter-value/utils/resolveFilterValue.ts

@@ -2,6 +2,7 @@ import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { FilterableFieldType } from '@/object-record/object-filter-dropdown/types/FilterableFieldType';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { resolveNumberViewFilterValue } from '@/views/view-filter-value/utils/resolveNumberViewFilterValue';
+import { resolveSelectViewFilterValue } from '@/views/view-filter-value/utils/resolveSelectViewFilterValue';
 import {
   resolveDateViewFilterValue,
   ResolvedDateViewFilterValue,
@@ -14,7 +15,9 @@ type ResolvedFilterValue<
   ? ResolvedDateViewFilterValue<O>
   : T extends 'NUMBER'
     ? ReturnType<typeof resolveNumberViewFilterValue>
-    : string;
+    : T extends 'SELECT' | 'MULTI_SELECT'
+      ? string[]
+      : string;
 
 type PartialFilter<
   T extends FilterableFieldType,
@@ -36,6 +39,9 @@ export const resolveFilterValue = <
       return resolveDateViewFilterValue(filter) as ResolvedFilterValue<T, O>;
     case 'NUMBER':
       return resolveNumberViewFilterValue(filter) as ResolvedFilterValue<T, O>;
+    case 'SELECT':
+    case 'MULTI_SELECT':
+      return resolveSelectViewFilterValue(filter) as ResolvedFilterValue<T, O>;
     default:
       return filter.value as ResolvedFilterValue<T, O>;
   }

packages/twenty-front/src/modules/views/view-filter-value/utils/resolveSelectViewFilterValue.ts

@@ -0,0 +1,19 @@
+import { ViewFilter } from '@/views/types/ViewFilter';
+import { z } from 'zod';
+
+const selectViewFilterValueSchema = z
+  .string()
+  .transform((val) => (val === '' ? [] : JSON.parse(val)))
+  .refine(
+    (parsed) =>
+      Array.isArray(parsed) && parsed.every((item) => typeof item === 'string'),
+    {
+      message: 'Expected an array of strings',
+    },
+  );
+
+export const resolveSelectViewFilterValue = (
+  viewFilter: Pick<ViewFilter, 'value'>,
+) => {
+  return selectViewFilterValueSchema.parse(viewFilter.value);
+};