UIPQB-53 Add support for $contains and $not_contains operators

CHANGELOG.md

@@ -5,6 +5,7 @@
 * [UIPQB-56](https://issues.folio.org/browse/UIPQB-56) Prevent columns from being reset when query is changed
 * [UIPQB-67](https://issues.folio.org/browse/UIPQB-67) Styles are defined globally for inputs with type "number"
 * [UIPQB-64](https://issues.folio.org/browse/UIPQB-64) Query builder can’t edit single condition queries without AND wrapper
+* [UIPQB-53](https://issues.folio.org/browse/UIPQB-53) Add support for $contains and $not_contains operators
 
 ## [1.0.0](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.0.0) (2023-10-12)
 

src/QueryBuilder/QueryBuilder/QueryBuilderModal/DataTypeInput/DataTypeInput.js

@@ -168,6 +168,8 @@ export const DataTypeInput = ({
       return openUUIDTypeControls();
 
     case DATA_TYPES.ArrayType:
+      return textControl({ testId: 'data-input-text-arrayType' });
+
     case DATA_TYPES.EnumType:
       return arrayLikeTypeControls();
     default:

src/QueryBuilder/QueryBuilder/QueryBuilderModal/DataTypeInput/DataTypeInput.test.js

@@ -87,13 +87,8 @@ const arr = [
   },
   {
     dataType: DATA_TYPES.ArrayType,
-    operator: OPERATORS.IN,
-    text: 'stripes-components.multiSelection.controlDescription',
-  },
-  {
-    dataType: DATA_TYPES.ArrayType,
-    operator: OPERATORS.EQUAL,
-    componentTestId: 'data-input-select-arrayType',
+    operator: OPERATORS.CONTAINS,
+    componentTestId: 'data-input-text-arrayType',
     onChange: jest.fn(),
   },
   {

src/QueryBuilder/QueryBuilder/helpers/query.js

@@ -2,6 +2,7 @@ import { COLUMN_KEYS } from '../../../constants/columnKeys';
 import { valueBuilder } from './valueBuilder';
 import { BOOLEAN_OPERATORS, BOOLEAN_OPERATORS_MAP, OPERATORS } from '../../../constants/operators';
 import { getOperatorOptions } from './selectOptions';
+import { DATA_TYPES } from '../../../constants/dataTypes';
 
 export const DEFAULT_PREVIEW_INTERVAL = 5000;
 
@@ -50,7 +51,7 @@ export const getTransformedValue = (val) => {
 };
 
 const escapeRegex = (value) => {
-  const escapedValue = value.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+  const escapedValue = value?.toString().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
 
   return `${escapedValue}`;
 };
@@ -61,6 +62,11 @@ const getQueryOperand = (item) => {
   const field = item.field.current;
   const operator = item.operator.current;
   const value = item.value.current;
+  const dataType = item.field.dataType;
+
+  const containsTemplate = dataType === DATA_TYPES.ArrayType
+    ? { $contains: value }
+    : { $regex: new RegExp(escapeRegex(value)).source };
 
   switch (operator) {
     case OPERATORS.EQUAL:
@@ -91,7 +97,10 @@ const getQueryOperand = (item) => {
       queryOperand = { [field]: { $regex: new RegExp(`^${escapeRegex(value)}`).source } };
       break;
     case OPERATORS.CONTAINS:
-      queryOperand = { [field]: { $regex: new RegExp(escapeRegex(value)).source } };
+      queryOperand = { [field]: containsTemplate };
+      break;
+    case OPERATORS.NOT_CONTAINS:
+      queryOperand = { [field]: { $not_contains: value } };
       break;
     default:
       break;
@@ -126,6 +135,8 @@ const getSourceFields = (field) => ({
   $lte: (value) => ({ operator: OPERATORS.LESS_THAN_OR_EQUAL, value }),
   $in: (value) => ({ operator: OPERATORS.IN, value }),
   $nin: (value) => ({ operator: OPERATORS.NOT_IN, value }),
+  $contains: (value) => ({ operator: OPERATORS.CONTAINS, value }),
+  $not_contains: (value) => ({ operator: OPERATORS.NOT_CONTAINS, value }),
   $regex: (value) => {
     return value?.includes('^')
       ? { operator: OPERATORS.STARTS_WITH, value: value?.replace(cleanerRegex, '') }

src/QueryBuilder/QueryBuilder/helpers/query.test.js

@@ -2,6 +2,7 @@ import { mongoQueryToSource, sourceToMongoQuery } from './query';
 import { booleanOptions } from './selectOptions';
 import { OPERATORS } from '../../../constants/operators';
 import { fieldOptions } from '../../../../test/jest/data/entityType';
+import { DATA_TYPES } from '../../../constants/dataTypes';
 
 describe('mongoQueryToSource()', () => {
   test('should return empty array for empty query', async () => {
@@ -85,6 +86,18 @@ describe('mongoQueryToSource()', () => {
       operator: { options: expect.any(Array), current: OPERATORS.IN },
       value: { current: 'value, value2' },
     },
+    {
+      boolean: { options: booleanOptions, current: '$and' },
+      field: { options: fieldOptions, current: 'department_names', dataType: DATA_TYPES.ArrayType },
+      operator: { options: expect.any(Array), current: OPERATORS.CONTAINS },
+      value: { current: 'value' },
+    },
+    {
+      boolean: { options: booleanOptions, current: '$and' },
+      field: { options: fieldOptions, current: 'department_names', dataType: DATA_TYPES.ArrayType },
+      operator: { options: expect.any(Array), current: OPERATORS.NOT_CONTAINS },
+      value: { current: 'value' },
+    },
   ];
 
   const initialValues = {
@@ -99,6 +112,8 @@ describe('mongoQueryToSource()', () => {
       { languages: { $nin: ['value', 'value2'] } },
       { user_id: { $nin: ['value', 'value2'] } },
       { user_id: { $in: ['value', 'value2'] } },
+      { department_names: { $contains: 'value' } },
+      { department_names: { $not_contains: 'value' } },
     ],
   };
 
@@ -163,6 +178,8 @@ describe('mongoQueryToSource()', () => {
         { languages: { $nin: ['value', 'value2'] } },
         { user_id: { $nin: ['value', 'value2'] } },
         { user_id: { $in: ['value', 'value2'] } },
+        { department_names: { $contains: 'value' } },
+        { department_names: { $not_contains: 'value' } },
       ],
     };
 

src/QueryBuilder/QueryBuilder/helpers/selectOptions.js

@@ -33,6 +33,15 @@ const UUIDOperators = () => [
   { label: OPERATORS.NOT_IN, value: OPERATORS.NOT_IN },
 ];
 
+const ArrayOperators = () => [
+  { label: OPERATORS.EQUAL, value: OPERATORS.EQUAL },
+  { label: OPERATORS.NOT_EQUAL, value: OPERATORS.NOT_EQUAL },
+  { label: OPERATORS.IN, value: OPERATORS.IN },
+  { label: OPERATORS.NOT_IN, value: OPERATORS.NOT_IN },
+  { label: OPERATORS.CONTAINS, value: OPERATORS.CONTAINS },
+  { label: OPERATORS.NOT_CONTAINS, value: OPERATORS.NOT_CONTAINS },
+];
+
 export const getFilledValues = (options) => {
   return options?.map(({ value, label }) => ({ value, label: label || value }));
 };
@@ -74,7 +83,7 @@ export const getOperatorOptions = ({
       return getOperatorsWithPlaceholder(baseLogicalOperators(), intl);
 
     case DATA_TYPES.ArrayType:
-      return getOperatorsWithPlaceholder(UUIDOperators(), intl);
+      return getOperatorsWithPlaceholder(ArrayOperators(), intl);
 
     case DATA_TYPES.DateType:
       return getOperatorsWithPlaceholder(extendedLogicalOperators(), intl);

src/QueryBuilder/QueryBuilder/helpers/selectOptions.test.js

@@ -181,6 +181,8 @@ describe('select options', () => {
           { label: OPERATORS.NOT_EQUAL, value: OPERATORS.NOT_EQUAL },
           { label: OPERATORS.IN, value: OPERATORS.IN },
           { label: OPERATORS.NOT_IN, value: OPERATORS.NOT_IN },
+          { label: OPERATORS.CONTAINS, value: OPERATORS.CONTAINS },
+          { label: OPERATORS.NOT_CONTAINS, value: OPERATORS.NOT_CONTAINS },
         ],
       });
     });

src/constants/operators.js

@@ -8,6 +8,7 @@ export const OPERATORS = {
   IN: 'in',
   NOT_IN: 'not in',
   CONTAINS: 'contains',
+  NOT_CONTAINS: 'not contains',
   STARTS_WITH: 'starts with',
 };
 

test/jest/data/entityType.js

@@ -296,6 +296,14 @@ export const entityType = {
         'columnName': 'material_type_name',
       },
     },
+    {
+      'name': 'department_names',
+      'dataType': {
+        'dataType': 'arrayType',
+      },
+      'labelAlias': 'Department names',
+      'visibleByDefault': true,
+    },
   ],
   'defaultSort': [
     {