@k-int/stripes-kint-components 2.5.0 → 2.6.1

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -11,6 +11,7 @@ import {
 import { useCustomProperties } from '../../hooks';
 import useParseActiveFilterStrings from './useParseActiveFilterStrings';
 import CustomPropertiesFilterForm from './CustomPropertiesFilterForm';
+import { MULTI_REFDATA_CLASS_NAME, REFDATA_CLASS_NAME } from '../../constants/customProperties';
 
 const CustomPropertiesFilter = ({
   activeFilters: {
@@ -74,9 +75,20 @@ const CustomPropertiesFilter = ({
 
     const filterStrings = filters
       .filter(filter => filter.rules)
-      .map(filter => filter.rules
-        .map(rule => `customProperties.${filter.customProperty}.value${rule.operator}${rule.value ?? ''}`)
-        .join('||'));
+      .map(filter => {
+        const relevantCustomProperty = custprops?.filter(cp => cp.name === filter.customProperty)?.[0] ?? {};
+
+        const filterByValueId = (
+          relevantCustomProperty?.type === MULTI_REFDATA_CLASS_NAME ||
+          relevantCustomProperty?.type === REFDATA_CLASS_NAME
+        );
+
+        return (
+          filter.rules
+            .map(rule => `customProperties.${filter.customProperty}.value${filterByValueId ? '.id' : ''}${rule.operator}${rule.value ?? ''}`)
+            .join('||')
+        );
+      });
 
     filterHandlers.state({ ...restOfFilters, customProperties: filterStrings });
     setEditingFilters(false);

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { MemoryRouter } from 'react-router-dom';
+import { Accordion, Button } from '@folio/stripes-testing';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { activeFilters, filterHandlers, labelOverrides } from './testResources';
+import CustomPropertiesFilter from './CustomPropertiesFilter';
+
+jest.mock('./CustomPropertiesFilterForm', () => () => <div>CustomPropertiesFilterForm</div>);
+
+describe('CustomPropertiesFilter', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <CustomPropertiesFilter
+          activeFilters={activeFilters}
+          customPropertiesEndpoint="erm/custprops"
+          filterHandlers={filterHandlers}
+          labelOverrides={labelOverrides}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  test('renders the Supplementrary properties Accordion by id', async () => {
+    await Accordion({ id: 'clickable-custprop-filter' }).exists();
+  });
+
+  test('renders the Supplementrary properties Accordion', async () => {
+    await Accordion('Supplementrary properties').exists();
+  });
+
+  test('renders the edit supplementary property filters button', async () => {
+    await Button({ id: 'accordion-toggle-button-clickable-custprop-filter' }).exists();
+  });
+
+  it('renders CustomPropertiesFilterForm component ', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('CustomPropertiesFilterForm')).toBeInTheDocument();
+  });
+});

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterField.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { MemoryRouter } from 'react-router-dom';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { customProperties, fields, labelOverrides } from './testResources';
+import CustomPropertiesFilterField from './CustomPropertiesFilterField';
+
+const onSubmit = jest.fn();
+
+let renderComponent;
+describe('CustomPropertiesFilterField', () => {
+  renderComponent = renderWithKintHarness(
+    <MemoryRouter>
+      <TestForm onSubmit={onSubmit}>
+        <CustomPropertiesFilterField
+          customProperties={customProperties}
+          fields={fields}
+          index={0}
+          labelOverrides={labelOverrides}
+          name="filters[0]"
+        />
+      </TestForm>
+    </MemoryRouter>
+  );
+
+  test('displays the Supplementary property label', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('Supplementary property')).toBeInTheDocument();
+  });
+});

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { waitFor } from '@testing-library/react';
+import { Button } from '@folio/stripes-testing';
+import { FieldArray } from 'react-final-form-arrays';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { customProperties, labelOverrides } from '../Edit/testResources';
+import CustomPropertiesFilterFieldArray from './CustomPropertiesFilterFieldArray';
+
+jest.mock('./CustomPropertiesFilterField', () => () => <div>CustomPropertiesFilterField</div>);
+const onSubmit = jest.fn();
+
+let renderComponent;
+describe('CustomPropertiesFilterFieldArray', () => {
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <TestForm
+        onSubmit={onSubmit}
+      >
+        <FieldArray
+          component={CustomPropertiesFilterFieldArray}
+          customProperties={customProperties}
+          labelOverrides={labelOverrides}
+          name="customProperties"
+        />
+      </TestForm>
+    );
+  });
+
+  test('renders CustomPropertiesFilterField component', () => {
+    const { getByText } = renderComponent;
+    waitFor(() => expect(getByText('CustomPropertiesFilterField')).toBeInTheDocument());
+  });
+
+  test('renders the Add custom property filter button', async () => {
+    await Button('Add custom property filter').exists();
+  });
+
+  test('renders the submit button', async () => {
+    await Button('Submit').exists();
+  });
+});

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterForm.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { Button } from '@folio/stripes-testing';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import CustomPropertyFiltersForm from './CustomPropertiesFilterForm';
+
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { data } from './testResources';
+
+jest.mock('./CustomPropertiesFilterFieldArray', () => () => <div>CustomPropertiesFilterFieldArray</div>);
+
+const onSubmit = jest.fn();
+
+describe('CustomPropertyFiltersForm', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <TestForm
+        onSubmit={onSubmit}
+      >
+        <CustomPropertyFiltersForm
+          {...data}
+        />
+      </TestForm>
+    );
+  });
+
+  it('renders CustomPropertiesFilterFieldArray component ', () => {
+    const { getByText } = renderComponent;
+    expect(getByText('CustomPropertiesFilterFieldArray')).toBeInTheDocument();
+  });
+
+  test('renders the submit button', async () => {
+    await Button('Submit').exists();
+  });
+
+  test('renders the Edit supplementary property filters button', async () => {
+    await Button('Edit supplementary property filters').exists();
+  });
+});

package/src/lib/CustomProperties/Filter/CustomPropertiesRule.test.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { MemoryRouter } from 'react-router-dom';
+import { Select } from '@folio/stripes-testing';
+import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import CustomPropertiesRule from './CustomPropertiesRule';
+
+const onSubmit = jest.fn();
+const onDelete = jest.fn();
+
+const clearRuleValue = () => {};
+
+describe('CustomPropertiesRule', () => {
+  beforeEach(() => {
+     renderWithKintHarness(
+       <MemoryRouter>
+         <TestForm onSubmit={onSubmit}>
+           <CustomPropertiesRule
+             ariaLabelledby="selected-custprop-name-0"
+             clearRuleValue={clearRuleValue}
+             index={0}
+             name="filters[0].rules[0]"
+             onDelete={onDelete}
+           />
+         </TestForm>
+       </MemoryRouter>
+    );
+  });
+
+  describe('select Is set operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is set');
+    });
+
+    it('renders expected Is set operator', async () => {
+      await Select().has({ value: ' isSet' });
+    });
+  });
+
+  describe('select Is not set operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is not set');
+    });
+
+    it('renders expected is not set operator in comparator dropdown', async () => {
+      await Select().has({ value: ' isNotSet' });
+    });
+  });
+
+  describe('select Equals from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Equals');
+    });
+
+    it('renders expected Equals operator', async () => {
+      await Select().has({ value: '==' });
+    });
+  });
+
+  describe('select not equal operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Does not equal');
+    });
+
+    it('renders expected Does not equal operator in comparator dropdown', async () => {
+      await Select().has({ value: '!=' });
+    });
+  });
+
+  describe('select Is greater than or equal to operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is greater than or equal to');
+    });
+
+    it('renders expected Is greater than or equal to operator in comparator dropdown', async () => {
+      await Select().has({ value: '>=' });
+    });
+  });
+
+  describe('select Is less than or equal to operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is less than or equal to');
+    });
+
+    it('renders expected Is less than or equal to operator in comparator dropdown', async () => {
+      await Select().has({ value: '<=' });
+    });
+  });
+
+  describe('select Is operator from comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is');
+    });
+
+    it('renders expected is operator', async () => {
+      await Select().has({ value: '==' });
+    });
+  });
+
+  describe('select Is not operator form comparator dropdown', () => {
+    beforeEach(async () => {
+      await Select().choose('Is not');
+    });
+
+    it('renders expected is not operator ', async () => {
+      await Select().has({ value: '!=' });
+    });
+  });
+});

package/src/lib/CustomProperties/Filter/testResources.js

@@ -0,0 +1,297 @@
+const activeFilters = {
+  'agreementStatus': [
+    'active',
+    'draft',
+    'in_negotiation',
+    'requested'
+  ],
+  'customProperties': [
+    'customProperties.AuthorIdentification.value==2c91809c813e654501813e6c3bc50061'
+  ]
+};
+
+const filterHandlers = {
+  'state': () => {},
+  'checkbox': () => {},
+  'clear': () => {},
+  'clearGroup': () => {},
+  'reset': () => {},
+};
+
+const labelOverrides = {
+  'customProperty': 'Supplementary property',
+  'customProperties': 'Supplementrary properties',
+  'filtersApplied': () => {},
+  'editCustomPropertyFilters': '<Memo />',
+  'filterBuilder': '<Memo />',
+  'customPropertyFilter': () => {},
+  'removeFilter': () => {},
+  'retiredName': () => {},
+};
+
+const customProperties = [{
+    'id': '2c91809c813e654501813e6c3c6a0066',
+    'retired': false,
+    'ctx': 'OpenAccess',
+    'name': 'AuthorIdentification',
+    'primary': true,
+    'category': {
+      'id': '2c91809c813e654501813e6c3bbb005e',
+      'desc': 'AuthIdent',
+      'internal': false,
+      'values': [{
+          'id': '2c91809c813e654501813e6c3bcf0064',
+          'value': 'ringgold_id',
+          'label': 'Ringgold ID'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bbd005f',
+          'value': 'other',
+          'label': 'Other'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bcc0063',
+          'value': 'over_ip_range',
+          'label': 'Over IP Range'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bc20060',
+          'value': 'email_domain',
+          'label': 'Email Domain'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bc50061',
+          'value': 'orcid',
+          'label': 'ORCID'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bc90062',
+          'value': 'over_institute',
+          'label': 'Over Institute'
+        },
+        {
+          'id': '2c91809c813e654501813e6c3bd20065',
+          'value': 'ror_id',
+          'label': 'ROR ID'
+        }
+      ]
+    },
+    'defaultInternal': true,
+    'label': 'Author Identification',
+    'description': 'Author Identification',
+    'weight': 0,
+    'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+  },
+  {
+    'id': '2c91809c813e654501813e6c3c7d0067',
+    'retired': false,
+    'ctx': 'OpenAccess',
+    'name': 'Eligible authors',
+    'primary': true,
+    'defaultInternal': true,
+    'label': 'Does this agreement support publishing',
+    'description': 'Does this agreement support publishing',
+    'weight': 0,
+    'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyText'
+  },
+  {
+    'id': '2c91809c813e654501814287324e0070',
+    'retired': false,
+    'ctx': 'OpenAccess',
+    'name': 'Test',
+    'primary': true,
+    'category': {
+      'id': '2096ecb6794fae7aa29074cf31970b17',
+      'desc': 'SubscriptionAgreement.AgreementStatus',
+      'internal': true,
+      'values': '[{…}, {…}, {…}, {…}, {…}]'
+    },
+    'defaultInternal': true,
+    'label': 'test',
+    'description': 'test description',
+    'weight': 1,
+    'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+  },
+  {
+    'id': '2c91809c813e6545018143f201040073',
+    'retired': false,
+    'name': 'TestTextSuppProp',
+    'primary': true,
+    'defaultInternal': false,
+    'label': 'TestTextSuppProp',
+    'description': 'TestTextSuppProp',
+    'weight': 0,
+    'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyText'
+  }
+];
+
+const fields = {
+  'name': 'filters',
+  'forEach': () => {},
+  'length': 2,
+  'map': () => {},
+  'insert': () => {},
+  'concat': () => {},
+  'move': () => {},
+  'pop': () => {},
+  'push': () => {},
+  'remove': () => {},
+  'removeBatch': () => {},
+  'shift': () => {},
+  'swap': () => {},
+  'unshift': () => {},
+  'update': () => {},
+  'value': [{
+      'customProperty': 'AuthorIdentification',
+      'rules': [{
+        'operator': '==',
+        'value': '2c91809c813e654501813e6c3bc50061'
+      }]
+    },
+    {
+      'customProperty': 'AuthorIdentification',
+      'rules': [{
+        'operator': '==',
+        'value': '2c91809c813e654501813e6c3bd20065'
+      }]
+    }
+  ]
+};
+
+const data = {
+  'customProperties': [{
+      'id': '2c91809c813e654501813e6c3c6a0066',
+      'retired': false,
+      'ctx': 'OpenAccess',
+      'name': 'AuthorIdentification',
+      'primary': true,
+      'category': {
+        'id': '2c91809c813e654501813e6c3bbb005e',
+        'desc': 'AuthIdent',
+        'internal': false,
+        'values': [{
+            'id': '2c91809c813e654501813e6c3bd20065',
+            'value': 'ror_id',
+            'label': 'ROR ID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bc20060',
+            'value': 'email_domain',
+            'label': 'Email Domain'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bc50061',
+            'value': 'orcid',
+            'label': 'ORCID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bcf0064',
+            'value': 'ringgold_id',
+            'label': 'Ringgold ID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bbd005f',
+            'value': 'other',
+            'label': 'Other'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bc90062',
+            'value': 'over_institute',
+            'label': 'Over Institute'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bcc0063',
+            'value': 'over_ip_range',
+            'label': 'Over IP Range'
+          }
+        ]
+      },
+      'defaultInternal': true,
+      'label': 'Author Identification',
+      'description': 'Author Identification',
+      'weight': 0,
+      'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+    },
+    {
+      'id': '2c91809c813e654501813e6c3c7d0067',
+      'retired': false,
+      'ctx': 'OpenAccess',
+      'name': 'Eligible authors',
+      'primary': true,
+      'defaultInternal': true,
+      'label': 'Does this agreement support publishing',
+      'description': 'Does this agreement support publishing',
+      'weight': 0,
+      'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyText'
+    },
+    {
+      'id': '2c91809c813e654501814287324e0070',
+      'retired': false,
+      'ctx': 'OpenAccess',
+      'name': 'Test',
+      'primary': true,
+      'category': {
+        'id': '2096ecb6794fae7aa29074cf31970b17',
+        'desc': 'SubscriptionAgreement.AgreementStatus',
+        'internal': true,
+        'values': '[{…}, {…}, {…}, {…}, {…}]'
+      },
+      'defaultInternal': true,
+      'label': 'test',
+      'description': 'test description',
+      'weight': 1,
+      'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+    },
+    {
+      'id': '2c91809c813e6545018143f201040073',
+      'retired': false,
+      'name': 'TestTextSuppProp',
+      'primary': true,
+      'defaultInternal': false,
+      'label': 'TestTextSuppProp',
+      'description': 'TestTextSuppProp',
+      'weight': 0,
+      'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyText'
+    }
+  ],
+  'editingFilters': true,
+  'filters': [{
+      'customProperty': 'AuthorIdentification',
+      'rules': [{
+        'operator': '==',
+        'value': '2c91809c813e654501813e6c3bd20065'
+      }]
+    },
+    {
+      'customProperty': 'Eligible authors',
+      'rules': [{
+        'operator': '=~',
+        'value': 'i'
+      }]
+    }
+  ],
+  'handlers': {
+    'closeEditModal': () => {},
+    'openEditModal': () => {}
+  },
+  'labelOverrides': {
+    'customProperty': '<Memo />',
+    'customProperties': '<Memo />',
+    'filtersApplied': () => {},
+    'editCustomPropertyFilters': 'Edit supplementary property filters',
+    'filterBuilder': '<Memo />',
+    'customPropertyFilter': () => {},
+    'removeFilter': () => {},
+    'retiredName': () => {}
+  },
+  'onSubmit': () => {}
+};
+
+export {
+  activeFilters,
+  filterHandlers,
+  labelOverrides,
+  customProperties,
+  fields,
+  data
+};

package/src/lib/CustomProperties/Filter/useOperators.js

@@ -3,6 +3,7 @@ import * as CUSTPROP_TYPES from '../../constants/customProperties';
 
 const {
   REFDATA_CLASS_NAME: REFDATA,
+  MULTI_REFDATA_CLASS_NAME: MULTIREFDATA,
   DECIMAL_CLASS_NAME: DECIMAL,
   INTEGER_CLASS_NAME: INTEGER,
   DATE_CLASS_NAME: DATE,
@@ -42,6 +43,12 @@ const useOperators = (type) => {
     );
   }
 
+  if (!type || type === MULTIREFDATA) {
+    operators.push(
+      { value: '==', label: getLabel('stripes-kint-components.operator.contains') },
+    );
+  }
+
   if (!type || type === TEXT) {
     operators.push(
       { value: '=~', label: getLabel('stripes-kint-components.operator.contains') },

package/src/lib/CustomProperties/Filter/useParseActiveFilterStrings.js

@@ -9,11 +9,14 @@ const useParseActiveFilterStrings = (filterStrings) => {
     const rules = filter.split('||').map(ruleString => {
       // ruleString is constructed in this.handleSubmit passed to CustomPropertyFiltersForm
       // and has shape "customProperties.foo.value!=42"
+      // OR customProperties.foo.value.id==1234, so make sure to disregard the .id
       const [customPropertyPath, rule] = ruleString.split('.value');
+      const idSafeRule = rule.replace('.id', '');
+
       customProperty = customPropertyPath.replace('customProperties.', '');
 
-      const operator = operators.find(o => rule.startsWith(o)) ?? '';
-      const value = rule.substring(operator.length);
+      const operator = operators.find(o => idSafeRule.startsWith(o)) ?? '';
+      const value = idSafeRule.substring(operator.length);
 
       numberOfFilters += 1;
 

package/src/lib/CustomProperties/Filter/useValueProps.js

@@ -4,6 +4,7 @@ import { invalidNumber as invalidNumberValidator, required as requiredValidator
 
 const {
   REFDATA_CLASS_NAME: REFDATA,
+  MULTI_REFDATA_CLASS_NAME: MULTIREFDATA,
   DECIMAL_CLASS_NAME: DECIMAL,
   INTEGER_CLASS_NAME: INTEGER,
   DATE_CLASS_NAME: DATE,
@@ -27,6 +28,11 @@ const useValueProps = (custPropDefinition) => {
       props.dataOptions = custPropDefinition.category.values.map(rdv => ({ label: rdv.label, value: rdv.id }));
       props.placeholder = ' ';
       break;
+    case MULTIREFDATA:
+      props.component = Select;
+      props.dataOptions = custPropDefinition.category.values.map(mrdv => ({ label: mrdv.label, value: mrdv.id }));
+      props.placeholder = ' ';
+      break;
     case DATE:
       props.component = Datepicker;
       props.backendDateStandard = 'YYYY-MM-DD';