Fix multi select filtering (#5358) #8452

ad-elias · 2024-11-11T10:49:54Z

Allow filtering by multi-select fields.

greptile-apps

PR Summary

This PR implements comprehensive multi-select filtering functionality across the frontend and backend, including GraphQL schema updates and PostgreSQL array operations.

Added containsAny operator in /packages/twenty-server/src/engine/api/graphql/graphql-query-runner/utils/compute-where-condition-parts.ts for PostgreSQL array overlap checks
Modified array handling in /packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationFilter.ts to support containsAny filtering
Created /packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/SelectFilterTypes.ts to unify SELECT and MULTI_SELECT filter handling
Updated enum filter types in /packages/twenty-server/src/engine/api/graphql/workspace-schema-builder/factories/input-type.factory.ts to support containsAny operation
Changed multi-select field array handling in schema generation via /packages/twenty-server/src/engine/api/graphql/workspace-schema-builder/utils/generate-fields.utils.ts

_{10 file(s) reviewed, 6 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

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

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

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

FelixMalfait · 2024-11-11T16:16:36Z

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

@@ -63,6 +63,9 @@ export const isMatchingStringFilter = ({
    case stringFilter.startsWith !== undefined: {
      return value.startsWith(stringFilter.startsWith);
    }
+    case stringFilter.containsAny !== undefined: {
+      return stringFilter.containsAny.some((item) => value.includes(item));


Getting an error when triple clicking on one of the 9Lol cell

I'm not able to reproduce this. I could add a nullish check like so

return stringFilter.containsAny.some((item) => value?.includes(item));

but would be better to know why null is passed to this function in the first place. Quick screenshare call?

FelixMalfait · 2024-11-11T20:47:16Z

Could you please also take care of the Array field? I just noticed it's similar because I saw not_contains. Also could you please rename it to notContains? Since there was no filtered view I don't think there's any risk to rolling out a rename for everyone (unless you see one?).

Also I saw the "not contains" filters out null which we probably don't really want.

On the UI front, maybe display "Contains" / "Does not contain" instead of "Is" / "Is not"?

…ias/twenty into fix/multi-select-filtering

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

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

ad-elias · 2024-11-13T23:12:12Z

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

@@ -19,6 +19,11 @@ export const computeWhereConditionParts = (
  const uuid = Math.random().toString(36).slice(2, 7);

  switch (operator) {
+    case 'isEmptyArray':


The value of an empty multi-select can either be NULL or an empty array.

Instead of adding isEmptyArray operator, we could change the eq operator, but as far as I understand GraphQL does not support union types of inputs.

In other words I think it's not possible to set the value of an eq filter to either be an empty array or an enum like this:

{ eq: [] } # or { eq: 'SOME_ENUM_VALUE' }

To get around that, we could add a subfield under eq like this:

{ eq: { value: 'SOME_ENUM_VALUE' } } # or { eq: { emptyList: true } }

But I think it's cleaner to just add the isEmptyArray operator and keep eq as is.

@FelixMalfait What do you think?

I guess all variations of existing syntax like eq: "'{}'" etc didn't work?

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

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

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

charlesBochet · 2024-11-14T12:53:35Z

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

+          filter.definition,
+        );
+      }
+      const stringifiedSelectValues = filter.value;


why do we manipulated stringified values here? I feel they should be parsed as as regular values way earlier

I moved parsing the string to resolveFilterValue function, it's a bit cleaner now.

Could be good to first do a bigger refactoring of filtering, especially remove the Filter type and use ViewFilter everywhere instead, and after that move parsing earlier. What do you think?

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

charlesBochet · 2024-11-14T12:56:05Z

...enty-front/src/modules/object-record/record-filter/utils/getEmptyRecordGqlOperationFilter.ts

+      emptyRecordFilter = {
+        or: [
+          {
+            [correspondingField.name]: { is: 'NULL' } as ArrayFilter,


fast folllow, we should have ArrayFilter, MultiSelectFilter, etc.

charlesBochet · 2024-11-14T12:58:17Z

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

      case FieldMetadataType.Text: {
        return isMatchingStringFilter({
          stringFilter: filterValue as StringFilter,
          value: record[filterKey],
        });
      }
+      case FieldMetadataType.Select:
+      case FieldMetadataType.MultiSelect:
      case FieldMetadataType.Array: {
        return isMatchingArrayFilter({
          arrayFilter: filterValue as ArrayFilter,


this looks wrong to me (see comment above) why would Select checking isMatchingArrayFilter. MultiSelect is already borderline to me (as constainsILike does not make sense), Select seems wrong

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

github-actions · 2024-11-15T00:03:58Z

TODOs/FIXMEs:

// TODO: Why doesn't `%${filter.value}%` here? %-signs only work when they are in compute-where-condition-parts.ts.: packages/twenty-front/src/modules/object-record/record-filter/utils/computeViewRecordGqlOperationFilter.ts

Generated by 🚫 dangerJS against 117b74f

ad-elias added 3 commits November 10, 2024 23:12

Multi-select filtering

139d691

Merge branch 'main' into fix/multi-select-filtering

faa5c29

Fix loading selected options

74d0bd6

greptile-apps bot reviewed Nov 11, 2024

View reviewed changes

ad-elias commented Nov 11, 2024

View reviewed changes

...ty-server/src/engine/api/graphql/graphql-query-runner/utils/compute-where-condition-parts.ts Show resolved Hide resolved

Fix multi select filter GraphQL type

b2ebab2

twentyhq deleted a comment from greptile-apps bot Nov 11, 2024

Fix typo

42d4794

FelixMalfait reviewed Nov 11, 2024

View reviewed changes

Fix tests

6dab82b

ad-elias added 2 commits November 11, 2024 22:48

Fix isMatchingStringFilter

83d06b4

Merge branch 'fix/multi-select-filtering' of https://github.com/ad-el…

f998906

…ias/twenty into fix/multi-select-filtering

FelixMalfait self-assigned this Nov 12, 2024

Enable array ilike filtering

92ebce1

FelixMalfait reviewed Nov 13, 2024

View reviewed changes

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

FelixMalfait reviewed Nov 13, 2024

View reviewed changes

...ty-server/src/engine/api/graphql/graphql-query-runner/utils/compute-where-condition-parts.ts Show resolved Hide resolved

charlesBochet added the -PR: awaiting author label Nov 13, 2024

ad-elias added 3 commits November 13, 2024 22:06

Empty array filtering, change select filter operand label

41cda30

Include nulls and empty arrays in MULTI_SELECT DoesNotContain

84c618b

Fix spelling

c019420

ad-elias commented Nov 13, 2024

View reviewed changes