Fix multi select filtering (#5358)

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useColumnDefinitionsFromFieldMetadata.test.ts

@@ -61,7 +61,7 @@ describe('useColumnDefinitionsFromFieldMetadata', () => {
       result.current;
 
     expect(columnDefinitions.length).toBe(21);
-    expect(filterDefinitions.length).toBe(14);
+    expect(filterDefinitions.length).toBe(15);
     expect(sortDefinitions.length).toBe(14);
   });
 });

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions.ts

@@ -35,6 +35,7 @@ export const formatFieldMetadataItemsAsFilterDefinitions = ({
         FieldMetadataType.Address,
         FieldMetadataType.Relation,
         FieldMetadataType.Select,
+        FieldMetadataType.MultiSelect,
         FieldMetadataType.Currency,
         FieldMetadataType.Rating,
         FieldMetadataType.Actor,

packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationFilter.ts

@@ -33,6 +33,8 @@ export type StringFilter = {
   regex?: string;
   iregex?: string;
   is?: IsFilter;
+  containsIlike?: string;
+  containsAny?: string[];
 };
 
 export type FloatFilter = {

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx

@@ -16,6 +16,7 @@ import { isDefined } from 'twenty-ui';
 
 import { DATE_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/DateFilterTypes';
 import { NUMBER_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/NumberFilterTypes';
+import { SELECT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/SelectFilterTypes';
 import { TEXT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/TextFilterTypes';
 
 type ObjectFilterDropdownFilterInputProps = {
@@ -93,7 +94,9 @@ export const ObjectFilterDropdownFilterInput = ({
               <ObjectFilterDropdownSourceSelect />
             </>
           )}
-          {filterDefinitionUsedInDropdown.type === 'SELECT' && (
+          {SELECT_FILTER_TYPES.includes(
+            filterDefinitionUsedInDropdown.type,
+          ) && (
             <>
               <ObjectFilterDropdownSearchInput />
               <ObjectFilterDropdownOptionSelect />

packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/SelectFilterTypes.ts

@@ -0,0 +1 @@
+export const SELECT_FILTER_TYPES = ['SELECT', 'MULTI_SELECT'];

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandsForFilterType.ts

@@ -58,6 +58,7 @@ export const getOperandsForFilterDefinition = (
       ];
     case 'RELATION':
       return [...relationOperands, ...emptyOperands];
+    case 'MULTI_SELECT':
     case 'SELECT':
       return [...relationOperands];
     case 'ACTOR': {

packages/twenty-front/src/modules/object-record/record-filter/utils/computeViewRecordGqlOperationFilter.ts

@@ -601,6 +601,53 @@ const computeFilterRecordGqlOperationFilter = (
             `Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
           );
       }
+    case 'MULTI_SELECT': {
+      if (isEmptyOperand) {
+        return getEmptyRecordGqlOperationFilter(
+          filter.operand,
+          correspondingField,
+          filter.definition,
+        );
+      }
+      const stringifiedSelectValues = filter.value;
+      let parsedOptionValues: string[] = [];
+
+      if (!isNonEmptyString(stringifiedSelectValues)) {
+        break;
+      }
+
+      try {
+        parsedOptionValues = JSON.parse(stringifiedSelectValues);
+      } catch (e) {
+        throw new Error(
+          `Cannot parse filter value for MULTI_SELECT filter : "${stringifiedSelectValues}"`,
+        );
+      }
+
+      if (parsedOptionValues.length > 0) {
+        switch (filter.operand) {
+          case ViewFilterOperand.Is:
+            return {
+              [correspondingField.name]: {
+                containsAny: parsedOptionValues,
+              } as UUIDFilter,
+            };
+          case ViewFilterOperand.IsNot:
+            return {
+              not: {
+                [correspondingField.name]: {
+                  containsAny: parsedOptionValues,
+                } as UUIDFilter,
+              },
+            };
+          default:
+            throw new Error(
+              `Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
+            );
+        }
+      }
+      break;
+    }
     case 'SELECT': {
       if (isEmptyOperand) {
         return getEmptyRecordGqlOperationFilter(
@@ -648,6 +695,35 @@ const computeFilterRecordGqlOperationFilter = (
       }
       break;
     }
+    case 'ARRAY': {
+      switch (filter.operand) {
+        case ViewFilterOperand.Contains:
+          return {
+            [correspondingField.name]: {
+              containsIlike: filter.value, // Why doesn't `%${filter.value}%` here? %-signs only work when they are in compute-where-condition-parts.ts.
+            } as StringFilter,
+          };
+        case ViewFilterOperand.DoesNotContain:
+          return {
+            not: {
+              [correspondingField.name]: {
+                containsIlike: `%${filter.value}%`,
+              } as StringFilter,
+            },
+          };
+        case ViewFilterOperand.IsEmpty:
+        case ViewFilterOperand.IsNotEmpty:
+          return getEmptyRecordGqlOperationFilter(
+            filter.operand,
+            correspondingField,
+            filter.definition,
+          );
+        default:
+          throw new Error(
+            `Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
+          );
+      }
+    }
     // TODO: fix this with a new composite field in ViewFilter entity
     case 'ACTOR': {
       switch (filter.operand) {

packages/twenty-front/src/modules/object-record/record-filter/utils/isMatchingStringFilter.ts

@@ -5,63 +5,70 @@ export const isMatchingStringFilter = ({
   value,
 }: {
   stringFilter: StringFilter;
-  value: string;
+  value: string | null;
 }) => {
+  const defaultedValue = value ?? '';
+
   switch (true) {
     case stringFilter.eq !== undefined: {
-      return value === stringFilter.eq;
+      return defaultedValue === stringFilter.eq;
     }
     case stringFilter.neq !== undefined: {
-      return value !== stringFilter.neq;
+      return defaultedValue !== stringFilter.neq;
     }
     case stringFilter.like !== undefined: {
       const regexPattern = stringFilter.like.replace(/%/g, '.*');
       const regexCaseSensitive = new RegExp(`^${regexPattern}$`);
 
-      return regexCaseSensitive.test(value);
+      return regexCaseSensitive.test(defaultedValue);
     }
     case stringFilter.ilike !== undefined: {
       const regexPattern = stringFilter.ilike.replace(/%/g, '.*');
       const regexCaseInsensitive = new RegExp(`^${regexPattern}$`, 'i');
 
-      return regexCaseInsensitive.test(value);
+      return regexCaseInsensitive.test(defaultedValue);
     }
     case stringFilter.in !== undefined: {
-      return stringFilter.in.includes(value);
+      return stringFilter.in.includes(defaultedValue);
     }
     case stringFilter.is !== undefined: {
       if (stringFilter.is === 'NULL') {
-        return value === null;
+        return defaultedValue === null;
       } else {
-        return value !== null;
+        return defaultedValue !== null;
       }
     }
     case stringFilter.regex !== undefined: {
       const regexPattern = stringFilter.regex;
       const regexCaseSensitive = new RegExp(regexPattern);
 
-      return regexCaseSensitive.test(value);
+      return regexCaseSensitive.test(defaultedValue);
     }
     case stringFilter.iregex !== undefined: {
       const regexPattern = stringFilter.iregex;
       const regexCaseInsensitive = new RegExp(regexPattern, 'i');
 
-      return regexCaseInsensitive.test(value);
+      return regexCaseInsensitive.test(defaultedValue);
     }
     case stringFilter.gt !== undefined: {
-      return value > stringFilter.gt;
+      return defaultedValue > stringFilter.gt;
     }
     case stringFilter.gte !== undefined: {
-      return value >= stringFilter.gte;
+      return defaultedValue >= stringFilter.gte;
     }
     case stringFilter.lt !== undefined: {
-      return value < stringFilter.lt;
+      return defaultedValue < stringFilter.lt;
     }
     case stringFilter.lte !== undefined: {
-      return value <= stringFilter.lte;
+      return defaultedValue <= stringFilter.lte;
     }
     case stringFilter.startsWith !== undefined: {
-      return value.startsWith(stringFilter.startsWith);
+      return defaultedValue.startsWith(stringFilter.startsWith);
+    }
+    case stringFilter.containsAny !== undefined: {
+      return stringFilter.containsAny.some((item) =>
+        defaultedValue.includes(item),
+      );
     }
     default: {
       throw new Error(

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

@@ -7,6 +7,7 @@ import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
+import { SELECT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/SelectFilterTypes';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
@@ -75,7 +76,10 @@ export const ViewBarFilterEffect = ({
         ? JSON.parse(viewFilterUsedInDropdown.value)
         : [];
       setObjectFilterDropdownSelectedRecordIds(viewFilterSelectedRecords);
-    } else if (filterDefinitionUsedInDropdown?.type === 'SELECT') {
+    } else if (
+      isDefined(filterDefinitionUsedInDropdown) &&
+      SELECT_FILTER_TYPES.includes(filterDefinitionUsedInDropdown.type)
+    ) {
       const viewFilterUsedInDropdown =
         currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
           (filter) =>

packages/twenty-server/src/engine/api/graphql/graphql-query-runner/utils/compute-where-condition-parts.ts

@@ -84,12 +84,21 @@ export const computeWhereConditionParts = (
         sql: `"${objectNameSingular}"."${key}" @> ARRAY[:...${key}${uuid}]`,
         params: { [`${key}${uuid}`]: value },
       };
-
     case 'not_contains':
       return {
-        sql: `NOT ("${objectNameSingular}"."${key}" && ARRAY[:...${key}${uuid}])`,
+        sql: `NOT ("${objectNameSingular}"."${key}"::text[] && ARRAY[:...${key}${uuid}]::text[])`,
+        params: { [`${key}${uuid}`]: value },
+      };
+    case 'containsAny':
+      return {
+        sql: `"${objectNameSingular}"."${key}"::text[] && ARRAY[:...${key}${uuid}]::text[]`,
         params: { [`${key}${uuid}`]: value },
       };
+    case 'containsIlike':
+      return {
+        sql: `EXISTS (SELECT 1 FROM unnest("${objectNameSingular}"."${key}") AS elem WHERE elem ILIKE :${key}${uuid})`,
+        params: { [`${key}${uuid}`]: `%${value}%` },
+      };
 
     default:
       throw new GraphqlQueryRunnerException(

packages/twenty-server/src/engine/api/graphql/workspace-schema-builder/factories/input-type.factory.ts

@@ -103,6 +103,7 @@ export class InputTypeFactory {
         eq: { type: enumType },
         neq: { type: enumType },
         in: { type: new GraphQLList(enumType) },
+        containsAny: { type: new GraphQLList(enumType) },
         is: { type: FilterIs },
       }),
     });

packages/twenty-server/src/engine/api/graphql/workspace-schema-builder/graphql-types/input/array-filter.input-type.ts

@@ -5,6 +5,7 @@ import { FilterIs } from 'src/engine/api/graphql/workspace-schema-builder/graphq
 export const ArrayFilterType = new GraphQLInputObjectType({
   name: 'ArrayFilter',
   fields: {
+    containsIlike: { type: new GraphQLList(GraphQLString) },
     contains: { type: new GraphQLList(GraphQLString) },
     not_contains: { type: new GraphQLList(GraphQLString) },
     is: { type: FilterIs },

packages/twenty-server/src/engine/api/graphql/workspace-schema-builder/utils/generate-fields.utils.ts

@@ -58,7 +58,9 @@ export const generateFields = <
       ? {
           nullable: fieldMetadata.isNullable,
           defaultValue: fieldMetadata.defaultValue,
-          isArray: fieldMetadata.type === FieldMetadataType.MULTI_SELECT,
+          isArray:
+            kind !== InputTypeDefinitionKind.Filter &&
+            fieldMetadata.type === FieldMetadataType.MULTI_SELECT,
           settings: fieldMetadata.settings,
           isIdField: fieldMetadata.name === 'id',
         }