@k-int/stripes-kint-components 2.8.1 → 3.0.0

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { uniqueId } from 'lodash';
-import { FormattedMessage } from 'react-intl';
 import { Field } from 'react-final-form';
 
 import {
@@ -17,11 +16,15 @@ import { required as requiredValidator } from '../../utils/validators';
 
 import useValueProps from './useValueProps';
 import useOperators from './useOperators';
+import { useKintIntl } from '../../hooks';
 
 const propTypes = {
   ariaLabelledby: PropTypes.string.isRequired,
   clearRuleValue: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
   name: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
   custPropDefinition: PropTypes.shape({
@@ -40,13 +43,18 @@ const CustomPropertiesRule = ({
   ariaLabelledby,
   clearRuleValue,
   index,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   name,
   onDelete,
   custPropDefinition = {},
   value,
 }) => {
-  const operators = useOperators(custPropDefinition.type);
-  const valueProps = useValueProps(custPropDefinition);
+  const operators = useOperators(custPropDefinition.type, passedIntlKey, passedIntlNS, labelOverrides);
+  const valueProps = useValueProps(custPropDefinition, passedIntlKey, passedIntlNS, labelOverrides);
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const selectedOperator = operators.find(o => o.value === value?.operator);
 
   return (
@@ -55,7 +63,12 @@ const CustomPropertiesRule = ({
     >
       <Col xs={2}>
         <Layout className="textCentered">
-          {index === 0 ? null : <FormattedMessage id="stripes-kint-components.OR" />}
+          {index === 0 ? null :
+            kintIntl.formatKintMessage({
+              id: 'OR',
+              overrideValue: labelOverrides.OR
+            })
+        }
         </Layout>
       </Col>
       <Col xs={4}>
@@ -100,7 +113,11 @@ const CustomPropertiesRule = ({
         { index ? (
           <Tooltip
             id={uniqueId('delete-rule-btn')}
-            text={<FormattedMessage id="stripes-kint-components.customProperty.removeRule" values={{ number: index + 1 }} />}
+            text={
+              kintIntl.formatKintMessage({
+              id: 'customProperty.removeRule',
+              overrideValue: labelOverrides.removeRule
+            }, { number: index + 1 })}
           >
             {({ ref, ariaIds }) => (
               <IconButton

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

@@ -3,13 +3,15 @@ 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';
+import { renderWithKintHarness } from '../../../../test/jest';
 
 const onSubmit = jest.fn();
 const onDelete = jest.fn();
 
+jest.mock('../../hooks');
+
 const clearRuleValue = () => {};
 
 describe('CustomPropertiesRule', () => {

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

@@ -1,261 +1,23 @@
+import { customProperties, refdata } from '../../../../test/jest';
+
 const activeFilters = {
-  'agreementStatus': [
-    'active',
-    'draft',
-    'in_negotiation',
-    'requested'
-  ],
   'customProperties': [
-    'customProperties.AuthorIdentification.value==2c91809c813e654501813e6c3bc50061'
+    `customProperties.AuthorIdentification.value==${refdata?.find(rdc => rdc.desc === 'AuthIdent')?.values?.find(rdv => rdv.value === 'email_domain')?.id}`
   ]
 };
 
 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'
-      }]
-    }
-  ]
+  'state': () => ({}),
+  'checkbox': () => ({}),
+  'clear': () => ({}),
+  'clearGroup': () => ({}),
+  'reset': () => ({}),
 };
 
 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': [{
+  customProperties,
+  editingFilters: true,
+  filters: [{
       'customProperty': 'AuthorIdentification',
       'rules': [{
         'operator': '==',
@@ -271,27 +33,14 @@ const data = {
     }
   ],
   'handlers': {
-    'closeEditModal': () => {},
-    'openEditModal': () => {}
+    'closeEditModal': () => ({}),
+    'openEditModal': () => ({})
   },
-  'labelOverrides': {
-    'customProperty': '<Memo />',
-    'customProperties': '<Memo />',
-    'filtersApplied': () => {},
-    'editCustomPropertyFilters': 'Edit supplementary property filters',
-    'filterBuilder': '<Memo />',
-    'customPropertyFilter': () => {},
-    'removeFilter': () => {},
-    'retiredName': () => {}
-  },
-  'onSubmit': () => {}
+  'onSubmit': () => ({})
 };
 
 export {
   activeFilters,
   filterHandlers,
-  labelOverrides,
-  customProperties,
-  fields,
   data
 };

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

@@ -1,5 +1,5 @@
-import { useIntl } from 'react-intl';
 import * as CUSTPROP_TYPES from '../../constants/customProperties';
+import { useKintIntl } from '../../hooks';
 
 const {
   REFDATA_CLASS_NAME: REFDATA,
@@ -10,49 +10,49 @@ const {
   TEXT_CLASS_NAME: TEXT,
 } = CUSTPROP_TYPES;
 
-const useOperators = (type) => {
-  const intl = useIntl();
-  const getLabel = id => intl.formatMessage({ id });
+const useOperators = (type = null, passedIntlKey = null, passedIntlNS = null, labelOverrides = {}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const operators = [
-    { value: ' isSet', label: getLabel('stripes-kint-components.operator.isSet'), noValueAllowed: true },
-    { value: ' isNotSet', label: getLabel('stripes-kint-components.operator.isNotSet'), noValueAllowed: true },
+    { value: ' isSet', label: kintIntl.formatKintMessage({ id: 'operator.isSet', overrideValue: labelOverrides.operatorIsSet }), noValueAllowed: true },
+    { value: ' isNotSet', label: kintIntl.formatKintMessage({ id: 'operator.isNotSet', overrideValue: labelOverrides.operatorIsNotSet }), noValueAllowed: true },
   ];
 
   if (!type || type === INTEGER || type === DECIMAL) {
     operators.push(
-      { value: '==', label: getLabel('stripes-kint-components.operator.equals') },
-      { value: '!=', label: getLabel('stripes-kint-components.operator.doesNotEqual') },
-      { value: '>=', label: getLabel('stripes-kint-components.operator.isGreaterThanOrEqual') },
-      { value: '<=', label: getLabel('stripes-kint-components.operator.isLessThanOrEqual') },
+      { value: '==', label: kintIntl.formatKintMessage({ id: 'operator.equals', overrideValue: labelOverrides.operatorEquals }) },
+      { value: '!=', label: kintIntl.formatKintMessage({ id: 'operator.doesNotEqual', overrideValue: labelOverrides.operatorDoesNotEqual }) },
+      { value: '>=', label: kintIntl.formatKintMessage({ id: 'operator.isGreaterThanOrEqual', overrideValue: labelOverrides.operatorIsGreaterThanOrEqual }) },
+      { value: '<=', label: kintIntl.formatKintMessage({ id: 'operator.isLessThanOrEqual', overrideValue: labelOverrides.operatorIsLessThanOrEqual }) },
     );
   }
 
   if (type === DATE) { // Basically the same as the "number" types above, so no need to reassign if there is no type
     operators.push(
-      { value: '==', label: getLabel('stripes-kint-components.operator.equals') },
-      { value: '!=', label: getLabel('stripes-kint-components.operator.doesNotEqual') },
-      { value: '>=', label: getLabel('stripes-kint-components.operator.isOnOrAfter') },
-      { value: '<=', label: getLabel('stripes-kint-components.operator.isOnOrBefore') },
+      { value: '==', label: kintIntl.formatKintMessage({ id: 'operator.equals', overrideValue: labelOverrides.operatorEquals }) },
+      { value: '!=', label: kintIntl.formatKintMessage({ id: 'operator.doesNotEqual', overrideValue: labelOverrides.operatorDoesNotEqual }) },
+      { value: '>=', label: kintIntl.formatKintMessage({ id: 'operator.isOnOrAfter', overrideValue: labelOverrides.operatorIsOnOrAfter }) },
+      { value: '<=', label: kintIntl.formatKintMessage({ id: 'operator.isOnOrBefore', overrideValue: labelOverrides.operatorIsOnOrBefore }) },
     );
   }
 
   if (!type || type === REFDATA) {
     operators.push(
-      { value: '==', label: getLabel('stripes-kint-components.operator.is') },
-      { value: '!=', label: getLabel('stripes-kint-components.operator.isNot') },
+      { value: '==', label: kintIntl.formatKintMessage({ id: 'operator.is', overrideValue: labelOverrides.operatorIs }) },
+      { value: '!=', label: kintIntl.formatKintMessage({ id: 'operator.isNot', overrideValue: labelOverrides.operatorIsNot }) },
     );
   }
 
-  if (!type || type === MULTIREFDATA) {
+  if (type === MULTIREFDATA) {
     operators.push(
-      { value: '==', label: getLabel('stripes-kint-components.operator.contains') },
+      { value: '==', label: kintIntl.formatKintMessage({ id: 'operator.contains', overrideValue: labelOverrides.operatorContains }) },
     );
   }
 
   if (!type || type === TEXT) {
     operators.push(
-      { value: '=~', label: getLabel('stripes-kint-components.operator.contains') },
-      { value: '!~', label: getLabel('stripes-kint-components.operator.doesNotContain') },
+      { value: '=~', label: kintIntl.formatKintMessage({ id: 'operator.contains', overrideValue: labelOverrides.operatorContains }) },
+      { value: '!~', label: kintIntl.formatKintMessage({ id: 'operator.doesNotContain', overrideValue: labelOverrides.operatorDoesNotContain }) },
     );
   }
 

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

@@ -1,7 +1,7 @@
 import useOperators from './useOperators';
 
-const useParseActiveFilterStrings = (filterStrings) => {
-  const operators = useOperators().map(o => o.value);
+const useParseActiveFilterStrings = (filterStrings, passedIntlKey, passedIntlNS, labelOverrides = {}) => {
+  const operators = useOperators(null, passedIntlKey, passedIntlNS, labelOverrides).map(o => o.value);
 
   let numberOfFilters = 0;
   const filters = filterStrings.map(filter => {

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

@@ -1,6 +1,6 @@
 import { Datepicker, Select, TextField } from '@folio/stripes/components';
 import * as CUSTPROP_TYPES from '../../constants/customProperties';
-import { invalidNumber as invalidNumberValidator, required as requiredValidator } from '../../utils/validators';
+import { invalidNumber, required as requiredValidator } from '../../utils/validators';
 
 const {
   REFDATA_CLASS_NAME: REFDATA,
@@ -11,7 +11,12 @@ const {
   TEXT_CLASS_NAME: TEXT,
 } = CUSTPROP_TYPES;
 
-const useValueProps = (custPropDefinition) => {
+const useValueProps = (
+  custPropDefinition,
+  intlKey,
+  intlNS,
+  labelOverrides = {},
+) => {
   const props = {
     validate: requiredValidator
   };
@@ -21,7 +26,7 @@ const useValueProps = (custPropDefinition) => {
     case DECIMAL:
       props.component = TextField;
       props.type = 'number';
-      props.validate = invalidNumberValidator;
+      props.validate = (value) => invalidNumber(value, intlKey, intlNS, labelOverrides);
       break;
     case REFDATA:
       props.component = Select;

package/src/lib/CustomProperties/View/CustomPropertiesView.js

@@ -6,6 +6,8 @@ const CustomPropertiesView = ({
   customProperties,
   customPropertiesEndpoint,
   id,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
 }) => {
   return (
@@ -17,6 +19,8 @@ const CustomPropertiesView = ({
           customProperties,
           customPropertiesEndpoint,
           id,
+          intlKey: passedIntlKey,
+          intlNS: passedIntlNS,
           labelOverrides
         }}
       />
@@ -29,6 +33,8 @@ CustomPropertiesView.propTypes = {
   customProperties: PropTypes.object,
   customPropertiesEndpoint: PropTypes.string,
   id: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   nameOverride: PropTypes.string
 };

package/src/lib/CustomProperties/View/CustomPropertiesView.test.js

@@ -2,11 +2,12 @@ import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
 import { contexts, customProperties, labelOverrides } from './testResources';
 import CustomPropertiesView from './CustomPropertiesView';
+import { renderWithKintHarness } from '../../../../test/jest';
 
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesViewCtx', () => () => <div>CustomPropertiesViewCtx</div>);
 
 describe('CustomPropertiesView', () => {

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Accordion, Badge, Spinner } from '@folio/stripes/components';
 
-import { useCustomProperties } from '../../hooks';
+import { useCustomProperties, useKintIntl } from '../../hooks';
 
 import CustomPropertyCard from './CustomPropertyCard';
 
@@ -11,15 +10,21 @@ const CustomPropertiesViewCtx = ({
   customProperties = [],
   customPropertiesEndpoint,
   id,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {}
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   // Deal with all the possible label override options
   const getAccordionLabel = () => {
     // Special case for null context
     if (ctx === 'isNull') {
       return (
-        labelOverrides.noContext ??
-        <FormattedMessage id="stripes-kint-components.customProperties" />
+        kintIntl.formatKintMessage({
+          id: 'customProperties',
+          overrideValue: labelOverrides.noContext
+        })
       );
     }
 
@@ -28,17 +33,12 @@ const CustomPropertiesViewCtx = ({
       return labelOverrides[ctx];
     }
 
-    // Label override for default title, taking ctx into account
-    if (labelOverrides.defaultTitle && typeof labelOverrides.defaultTitle === 'function') {
-      return (
-        labelOverrides.defaultTitle(ctx)
-      );
-    }
-
     // Label override for default title or finally built in default
     return (
-      labelOverrides.defaultTitle ??
-      <FormattedMessage id="stripes-kint-components.customProperties.ctx.title" values={{ ctx }} />
+      kintIntl.formatKintMessage({
+        id: 'customProperties.defaultTitle',
+        overrideValue: labelOverrides.defaultTitle
+      }, { ctx })
     );
   };
 
@@ -112,6 +112,8 @@ CustomPropertiesViewCtx.propTypes = {
   customProperties: PropTypes.object,
   customPropertiesEndpoint: PropTypes.string,
   id: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.test.js

@@ -2,15 +2,12 @@ import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { MemoryRouter } from 'react-router-dom';
 import { waitFor } from '@testing-library/react';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
 import { data } from './testResources';
 import CustomPropertiesViewCtx from './CustomPropertiesViewCtx';
+import { renderWithKintHarness } from '../../../../test/jest';
 
-jest.mock('../../hooks', () => ({
-  useCustomProperties: () => [],
-}));
-
+jest.mock('../../hooks');
 jest.mock('./CustomPropertyCard', () => () => <div>CustomPropertyCard</div>);
 
 describe('CustomPropertiesViewCtx', () => {