Add filter on array and jsonb field types

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

@@ -1,16 +1,35 @@
 import { renderHook } from '@testing-library/react';
 import { Nullable } from 'twenty-ui';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { WorkspaceActivationStatus } from '~/generated/graphql';
+import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 
+const Wrapper = getJestMetadataAndApolloMocksWrapper({
+  apolloMocks: [],
+  onInitializeRecoilSnapshot: ({ set }) => {
+    set(currentWorkspaceState, {
+      id: '1',
+      featureFlags: [],
+      allowImpersonation: false,
+      activationStatus: WorkspaceActivationStatus.Active,
+      metadataVersion: 1,
+    });
+  },
+});
+
 describe('useColumnDefinitionsFromFieldMetadata', () => {
   it('should return empty definitions if no object is passed', () => {
     const { result } = renderHook(
       (objectMetadataItem?: Nullable<ObjectMetadataItem>) => {
         return useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
       },
+      {
+        wrapper: Wrapper,
+      },
     );
 
     expect(Array.isArray(result.current.columnDefinitions)).toBe(true);
@@ -32,6 +51,7 @@ describe('useColumnDefinitionsFromFieldMetadata', () => {
       },
       {
         initialProps: companyObjectMetadata,
+        wrapper: Wrapper,
       },
     );
 

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

@@ -6,6 +6,7 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { formatFieldMetadataItemAsColumnDefinition } from '../utils/formatFieldMetadataItemAsColumnDefinition';
 import { formatFieldMetadataItemsAsFilterDefinitions } from '../utils/formatFieldMetadataItemsAsFilterDefinitions';
 import { formatFieldMetadataItemsAsSortDefinitions } from '../utils/formatFieldMetadataItemsAsSortDefinitions';
@@ -23,8 +24,13 @@ export const useColumnDefinitionsFromFieldMetadata = (
     [objectMetadataItem],
   );
 
+  const isArrayAndJsonFilterEnabled = useIsFeatureEnabled(
+    'IS_ARRAY_AND_JSON_FILTER_ENABLED',
+  );
+
   const filterDefinitions = formatFieldMetadataItemsAsFilterDefinitions({
     fields: activeFieldMetadataItems,
+    isArrayAndJsonFilterEnabled,
   });
 
   const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({

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

@@ -8,10 +8,12 @@ import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
 
 export const formatFieldMetadataItemsAsFilterDefinitions = ({
   fields,
+  isArrayAndJsonFilterEnabled,
 }: {
   fields: Array<ObjectMetadataItem['fields'][0]>;
-}): FilterDefinition[] =>
-  fields.reduce((acc, field) => {
+  isArrayAndJsonFilterEnabled: boolean;
+}): FilterDefinition[] => {
+  return fields.reduce((acc, field) => {
     if (
       field.type === FieldMetadataType.Relation &&
       field.relationDefinition?.direction !==
@@ -37,13 +39,17 @@ export const formatFieldMetadataItemsAsFilterDefinitions = ({
         FieldMetadataType.Rating,
         FieldMetadataType.Actor,
         FieldMetadataType.Phones,
+        ...(isArrayAndJsonFilterEnabled
+          ? [FieldMetadataType.Array, FieldMetadataType.RawJson]
+          : []),
       ].includes(field.type)
     ) {
       return acc;
     }
 
     return [...acc, formatFieldMetadataItemAsFilterDefinition({ field })];
   }, [] as FilterDefinition[]);
+};
 
 export const formatFieldMetadataItemAsFilterDefinition = ({
   field,
@@ -92,6 +98,8 @@ export const getFilterTypeFromFieldType = (fieldType: FieldMetadataType) => {
       return 'ACTOR';
     case FieldMetadataType.Array:
       return 'ARRAY';
+    case FieldMetadataType.RawJson:
+      return 'RAW_JSON';
     default:
       return 'TEXT';
   }

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

@@ -104,6 +104,17 @@ export type PhonesFilter = {
   primaryPhoneCountryCode?: StringFilter;
 };
 
+export type ArrayFilter = {
+  contains?: string[];
+  not_contains?: string[];
+  is?: IsFilter;
+};
+
+export type RawJsonFilter = {
+  like?: string;
+  is?: IsFilter;
+};
+
 export type LeafFilter =
   | UUIDFilter
   | StringFilter
@@ -117,6 +128,8 @@ export type LeafFilter =
   | LinksFilter
   | ActorFilter
   | PhonesFilter
+  | ArrayFilter
+  | RawJsonFilter
   | undefined;
 
 export type AndObjectRecordFilter = {

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

@@ -93,6 +93,7 @@ export const ObjectFilterDropdownFilterInput = ({
             'ADDRESS',
             'ACTOR',
             'ARRAY',
+            'RAW_JSON',
             'PHONES',
           ].includes(filterDefinitionUsedInDropdown.type) &&
             !isActorSourceCompositeFilter(filterDefinitionUsedInDropdown) && (

packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterableFieldType.ts

@@ -19,4 +19,5 @@ export type FilterableFieldType = PickLiteral<
   | 'MULTI_SELECT'
   | 'ACTOR'
   | 'ARRAY'
+  | 'RAW_JSON'
 >;

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

@@ -18,7 +18,6 @@ export const getOperandsForFilterDefinition = (
     case 'FULL_NAME':
     case 'ADDRESS':
     case 'LINKS':
-    case 'ARRAY':
     case 'PHONES':
       return [
         ViewFilterOperand.Contains,
@@ -32,6 +31,12 @@ export const getOperandsForFilterDefinition = (
         ViewFilterOperand.LessThan,
         ...emptyOperands,
       ];
+    case 'RAW_JSON':
+      return [
+        ViewFilterOperand.Contains,
+        ViewFilterOperand.DoesNotContain,
+        ...emptyOperands,
+      ];
     case 'DATE_TIME':
     case 'DATE':
       return [
@@ -70,6 +75,12 @@ export const getOperandsForFilterDefinition = (
         ...emptyOperands,
       ];
     }
+    case 'ARRAY':
+      return [
+        ViewFilterOperand.Contains,
+        ViewFilterOperand.DoesNotContain,
+        ...emptyOperands,
+      ];
     default:
       return [];
   }

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

@@ -1,10 +1,12 @@
 import {
   ActorFilter,
   AddressFilter,
+  ArrayFilter,
   CurrencyFilter,
   DateFilter,
   EmailsFilter,
   FloatFilter,
+  RawJsonFilter,
   RecordGqlOperationFilter,
   RelationFilter,
   StringFilter,
@@ -290,6 +292,24 @@ export const applyEmptyFilters = (
         ],
       };
       break;
+    case 'ARRAY':
+      emptyRecordFilter = {
+        or: [
+          {
+            [correspondingField.name]: { is: 'NULL' } as ArrayFilter,
+          },
+        ],
+      };
+      break;
+    case 'RAW_JSON':
+      emptyRecordFilter = {
+        or: [
+          {
+            [correspondingField.name]: { is: 'NULL' } as RawJsonFilter,
+          },
+        ],
+      };
+      break;
     case 'EMAILS':
       emptyRecordFilter = {
         or: [

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

@@ -0,0 +1,34 @@
+import { ArrayFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+
+export const isMatchingArrayFilter = ({
+  arrayFilter,
+  value,
+}: {
+  arrayFilter: ArrayFilter;
+  value: string[];
+}) => {
+  if (value === null || !Array.isArray(value)) {
+    return false;
+  }
+
+  switch (true) {
+    case arrayFilter.contains !== undefined: {
+      return arrayFilter.contains.every((item) => value.includes(item));
+    }
+    case arrayFilter.not_contains !== undefined: {
+      return !arrayFilter.not_contains.some((item) => value.includes(item));
+    }
+    case arrayFilter.is !== undefined: {
+      if (arrayFilter.is === 'NULL') {
+        return value === null;
+      } else {
+        return value !== null;
+      }
+    }
+    default: {
+      throw new Error(
+        `Unexpected value for array filter: ${JSON.stringify(arrayFilter)}`,
+      );
+    }
+  }
+};

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

@@ -0,0 +1,32 @@
+import { RawJsonFilter } from '../../graphql/types/RecordGqlOperationFilter';
+
+export const isMatchingRawJsonFilter = ({
+  rawJsonFilter,
+  value,
+}: {
+  rawJsonFilter: RawJsonFilter;
+  value: string;
+}) => {
+  switch (true) {
+    case rawJsonFilter.like !== undefined: {
+      const regexPattern = rawJsonFilter.like.replace(/%/g, '.*');
+      const regexCaseInsensitive = new RegExp(`^${regexPattern}$`, 'i');
+
+      const stringValue = JSON.stringify(value);
+
+      return regexCaseInsensitive.test(stringValue);
+    }
+    case rawJsonFilter.is !== undefined: {
+      if (rawJsonFilter.is === 'NULL') {
+        return value === null;
+      } else {
+        return value !== null;
+      }
+    }
+    default: {
+      throw new Error(
+        `Unexpected value for string filter : ${JSON.stringify(rawJsonFilter)}`,
+      );
+    }
+  }
+};

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

@@ -5,6 +5,7 @@ import {
   ActorFilter,
   AddressFilter,
   AndObjectRecordFilter,
+  ArrayFilter,
   BooleanFilter,
   CurrencyFilter,
   DateFilter,
@@ -16,14 +17,17 @@ import {
   NotObjectRecordFilter,
   OrObjectRecordFilter,
   PhonesFilter,
+  RawJsonFilter,
   RecordGqlOperationFilter,
   StringFilter,
   UUIDFilter,
 } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+import { isMatchingArrayFilter } from '@/object-record/record-filter/utils/isMatchingArrayFilter';
 import { isMatchingBooleanFilter } from '@/object-record/record-filter/utils/isMatchingBooleanFilter';
 import { isMatchingCurrencyFilter } from '@/object-record/record-filter/utils/isMatchingCurrencyFilter';
 import { isMatchingDateFilter } from '@/object-record/record-filter/utils/isMatchingDateFilter';
 import { isMatchingFloatFilter } from '@/object-record/record-filter/utils/isMatchingFloatFilter';
+import { isMatchingRawJsonFilter } from '@/object-record/record-filter/utils/isMatchingRawJsonFilter';
 import { isMatchingStringFilter } from '@/object-record/record-filter/utils/isMatchingStringFilter';
 import { isMatchingUUIDFilter } from '@/object-record/record-filter/utils/isMatchingUUIDFilter';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -165,6 +169,18 @@ export const isRecordMatchingFilter = ({
           value: record[filterKey],
         });
       }
+      case FieldMetadataType.Array: {
+        return isMatchingArrayFilter({
+          arrayFilter: filterValue as ArrayFilter,
+          value: record[filterKey],
+        });
+      }
+      case FieldMetadataType.RawJson: {
+        return isMatchingRawJsonFilter({
+          rawJsonFilter: filterValue as RawJsonFilter,
+          value: record[filterKey],
+        });
+      }
       case FieldMetadataType.FullName: {
         const fullNameFilter = filterValue as FullNameFilter;
 
@@ -302,6 +318,7 @@ export const isRecordMatchingFilter = ({
           `Not implemented yet, use UUID filter instead on the corredponding "${filterKey}Id" field`,
         );
       }
+
       default: {
         throw new Error(
           `Not implemented yet for field type "${objectMetadataField.type}"`,