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

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.test.js

@@ -4,12 +4,12 @@ import { Button, KeyValue } from '@folio/stripes-testing';
 import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
 import { waitFor } from '@testing-library/react';
 
-import { data, initialValues } from './testResources';
+import { initialValues } from './testResources';
 import CustomPropertiesListField from './CustomPropertiesListField';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { customProperties, renderWithKintHarness } from '../../../../test/jest';
 
 const onSubmit = jest.fn();
-
+jest.mock('../../hooks');
 jest.mock('./CustomPropertyFormCard', () => () => <div>CustomPropertyFormCard</div>);
 
 describe('CustomPropertiesListField', () => {
@@ -21,18 +21,20 @@ describe('CustomPropertiesListField', () => {
         onSubmit={onSubmit}
       >
         <CustomPropertiesListField
-          {...data}
+          ctx="isNull"
+          customProperties={customProperties}
+          name="customProperties"
         />
       </TestForm>
     );
   });
 
-  test('displays expected Primary terms key value', async () => {
-    await KeyValue('Primary terms').exists();
+  test('displays expected primary properties key value', async () => {
+    await KeyValue('Primary properties').exists();
   });
 
-  test('displays expected Optional terms key value', async () => {
-    await KeyValue('Optional terms').exists();
+  test('displays expected optional properties key value', async () => {
+    await KeyValue('Optional properties').exists();
   });
 
   it('renders CustomPropertyFormCard component ', () => {

package/src/lib/CustomProperties/Edit/CustomPropertyField.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 
-import { FormattedMessage, useIntl } from 'react-intl';
-
 import { Field } from 'react-final-form';
 
 import {
@@ -16,7 +14,14 @@ import {
 
 import * as CUSTOM_PROPERTY_TYPES from '../../constants/customProperties';
 
-import { customPropertyValidator } from '../../utils/validators';
+import { useKintIntl } from '../../hooks';
+
+import {
+  composeValidatorsWithArgs,
+  invalidNumber,
+  rangeOverflow,
+  rangeUnderflow
+} from '../../utils';
 
 const CustomPropertyField = ({
   availableCustomProperties,
@@ -24,13 +29,67 @@ const CustomPropertyField = ({
   customPropertyType,
   customProperties,
   index,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   name,
   onChange,
   value,
   setCustomProperties
 }) => {
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  // Set up the validator for the customProperty
+  const customPropertyValidator = (fieldValue, allValues) => {
+    const { note, publicNote, value: currentValue } = allValues?.customProperties?.[customProperty?.value]?.[0] ?? {};
+
+    if ((note && !currentValue) || (publicNote && !currentValue)) {
+      if (
+        customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME ||
+        customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME
+      ) {
+        return (
+          kintIntl.formatKintMessage({
+            id: 'customProperties.errors.customPropertyNoteInvalidNumber',
+            overrideValue: labelOverrides.customPropertyNoteInvalidNumberError
+          })
+        );
+      } else {
+        return (
+          kintIntl.formatKintMessage({
+            id: 'customProperties.errors.customPropertyNoteWithoutValue',
+            overrideValue: labelOverrides.customPropertyNoteWithoutValueError
+          })
+        );
+      }
+    }
+
+    if (customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME) {
+      const regexp = /^-?[\d]*(\.[\d]{0,2})?$/;
+      return (fieldValue && !regexp.test(fieldValue)) ?
+        kintIntl.formatKintMessage({
+          id: 'errors.maxTwoDecimals',
+          overrideValue: labelOverrides.maxTwoDecimalsError
+        }) : undefined;
+    }
+
+    if (customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME) {
+      const min = Number.MIN_SAFE_INTEGER;
+      const max = Number.MAX_SAFE_INTEGER;
+
+      return (fieldValue && !Number.isInteger(+fieldValue)) ?
+        kintIntl.formatKintMessage({
+          id: 'errors.valueNotInRange',
+          overrideValue: labelOverrides.valueNotInRangeError
+        }, { min, max }) : undefined;
+    }
+
+    if (!customProperty.primary && !currentValue) {
+      return kintIntl.formatMessage({ id: 'stripes-core.label.missingRequiredField' });
+    }
+
+    return undefined;
+  };
 
   const getCustomProperty = (customPropertyValue) => {
     return availableCustomProperties.find(cp => cp.value === customPropertyValue);
@@ -60,8 +119,10 @@ const CustomPropertyField = ({
         dataOptions={[customProperty, ...unsetCustomProperties]} // The selected customProperty, and the available unset customProperties
         id={`edit-customproperty-${index}-name`}
         label={
-          labelOverrides.name ??
-          <FormattedMessage id="stripes-kint-components.customProperty.name" />
+          kintIntl.formatKintMessage({
+            id: 'customProperties.name',
+            overrideValue: labelOverrides.name
+          })
         }
         onChange={e => {
           const newValue = e.target.value;
@@ -140,14 +201,25 @@ const CustomPropertyField = ({
       case CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME:
       case CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME:
         fieldProps = {
-          badInput: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyInvalidNumber' }),
           component: TextField,
           max,
           min,
-          rangeOverflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
-          rangeUnderflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
           step: 'any',
           type: 'number',
+          validate: (validateValue) => {
+              return composeValidatorsWithArgs(
+                invalidNumber,
+                rangeOverflow,
+                rangeUnderflow
+              )(
+                validateValue,
+                min,
+                max,
+                passedIntlKey,
+                passedIntlNS,
+                labelOverrides
+              );
+          }
         };
         handleChange = e => {
           onChange({
@@ -184,14 +256,15 @@ const CustomPropertyField = ({
         data-test-customproperty-value
         id={`edit-customproperty-${index}-value`}
         label={
-          labelOverrides.value ??
-          <FormattedMessage id="stripes-kint-components.customProperty.value" />
+          kintIntl.formatKintMessage({
+            id: 'customProperties.value',
+            overrideValue: labelOverrides.value
+          })
         }
         name={`${name}.${customProperty.value}[0].value`}
         onChange={handleChange}
         required={!customProperty.primary}
-        validate={(fieldValue, allValues) => customPropertyValidator(fieldValue, allValues, customProperty)}
-        valueMissing={intl.formatMessage({ id: 'stripes-core.label.missingRequiredField' })}
+        validate={(fieldValue, allValues) => customPropertyValidator(fieldValue, allValues)}
         {...fieldProps}
       />
     );
@@ -214,13 +287,27 @@ const CustomPropertyField = ({
       <Select
         data-test-customproperty-visibility
         dataOptions={[
-          { value: true, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalTrue' }) },
-          { value: false, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalFalse' }) }
+          {
+            value: true,
+            label: kintIntl.formatKintMessage({
+              id: 'customProperties.internalTrue',
+              overrideValue: labelOverrides.internalTrue
+            })
+          },
+          {
+            value: false,
+            label: kintIntl.formatKintMessage({
+              id: 'customProperties.internalFalse',
+              overrideValue: labelOverrides.internalFalse
+            })
+          }
         ]}
         id={`edit-customproperty-${index}-visibility`}
         label={
-          labelOverrides.visibility ??
-          <FormattedMessage id="stripes-kint-components.customProperty.visibility" />
+          kintIntl.formatKintMessage({
+            id: 'customProperties.visibility',
+            overrideValue: labelOverrides.visibility
+          })
         }
         onChange={handleChange}
         value={customPropertyObject?.internal ?? customProperty.defaultInternal}
@@ -246,8 +333,11 @@ const CustomPropertyField = ({
         data-test-customproperty-note
         id={`edit-customproperty-${index}-internal-note`}
         label={
-          labelOverrides.internalNote ??
-          <FormattedMessage id="stripes-kint-components.customProperty.internalNote" />}
+          kintIntl.formatKintMessage({
+            id: 'customProperties.internalNote',
+            overrideValue: labelOverrides.internalNote
+          })
+        }
         onChange={handleChange}
         value={customPropertyObject?.note}
       />
@@ -272,8 +362,10 @@ const CustomPropertyField = ({
         data-test-customproperty-public-note
         id={`edit-customproperty-${index}-public-note`}
         label={
-          labelOverrides.publicNote ??
-          <FormattedMessage id="stripes-kint-components.customProperty.publicNote" />
+          kintIntl.formatKintMessage({
+            id: 'customProperties.publicNote',
+            overrideValue: labelOverrides.publicNote
+          })
         }
         onChange={handleChange}
         value={customPropertyObject?.publicNote}
@@ -321,6 +413,8 @@ CustomPropertyField.propTypes = {
   customPropertyType: PropTypes.string,
   customProperties: PropTypes.arrayOf(PropTypes.object),
   index: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   name: PropTypes.string,
   onChange: PropTypes.func,

package/src/lib/CustomProperties/Edit/CustomPropertyField.test.js

@@ -1,27 +1,37 @@
 import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { TextArea, MultiSelect, TextInput, Datepicker } from '@folio/stripes-testing';
+
 import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
 import CustomPropertyField from './CustomPropertyField';
-import {
-  availableCustomProperties,
-  customProperties,
-  customProperty,
-  labelOverrides,
-  value,
-  initialValues,
-  dateData,
-  integerData,
-  decimalData,
-  multiSelectData,
-} from './testResources';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { availableCustomProperties, customProperties, renderWithKintHarness } from '../../../../test/jest';
+
+import { value, initialValues } from './testResources';
 
 const onSubmit = jest.fn();
+jest.mock('../../hooks');
 
 const onChange = () => {};
 const setCustomProperties = () => {};
 
+const authIdentCustom = availableCustomProperties?.find(cp => cp.value === 'AuthorIdentification');
+const decimalCustProp = availableCustomProperties?.find(cp => cp.value === 'decimal');
+const integerCustProp = availableCustomProperties?.find(cp => cp.value === 'integer');
+const dateCustProp = availableCustomProperties?.find(cp => cp.value === 'date');
+const multiRefdataCustProp = availableCustomProperties?.find(cp => cp.value === 'MultiRefdata');
+
+const defaultProps = {
+  availableCustomProperties,
+  customProperties,
+  customPropertyType: 'primary',
+  internalPropertyCounter: 1,
+  name: 'customProperties',
+  onChange,
+  setCustomProperties,
+  value
+};
+
 describe('CustomPropertyField', () => {
   let renderComponent;
   describe('CustomPropertyField', () => {
@@ -32,17 +42,9 @@ describe('CustomPropertyField', () => {
           onSubmit={onSubmit}
         >
           <CustomPropertyField
-            availableCustomProperties={availableCustomProperties}
-            customProperties={customProperties}
-            customProperty={customProperty}
-            customPropertyType="primary"
+            {...defaultProps}
+            customProperty={authIdentCustom}
             index={0}
-            internalPropertyCounter={1}
-            labelOverrides={labelOverrides}
-            name="customProperties"
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
-            value={value}
           />
         </TestForm>
       );
@@ -50,35 +52,36 @@ describe('CustomPropertyField', () => {
       expect(getByTestId('customPropertyField')).toBeInTheDocument();
     });
 
-    it('Displays expected value(s) lable ', () => {
+
+    it('Displays expected value(s) label ', () => {
       const { getByText } = renderComponent;
       expect(getByText('Value(s)')).toBeInTheDocument();
     });
 
-    test('Displays expected Valu(s) dropdwon values  ', () => {
+    test('Displays expected Value(s) dropdown values  ', () => {
       MultiSelect('Value(s)').select(['Not set', 'ORCID', 'Ringgold ID', 'Email Domain', 'Over IP Range', 'FOR ID', 'Other', 'Over Institute']);
     });
 
-    it('Displays expected Internal note lable ', () => {
+    it('Displays expected Internal note label ', () => {
       const { getByText } = renderComponent;
       expect(getByText('Internal note')).toBeInTheDocument();
     });
 
     test('Displays expected internal note value', async () => {
-      await TextArea({ id: 'edit-customproperty-0-internal-note' }).has({ value: 'internal note' });
+      await TextArea('Internal note').has({ value: 'this is an internal note' });
     });
 
     test('Displays expected visibilities dropdwon values  ', () => {
       MultiSelect('Visibility').select(['Internal', 'Public']);
     });
 
-    it('Displays expected Public note lable ', () => {
+    it('Displays expected Public note label ', () => {
       const { getByText } = renderComponent;
       expect(getByText('Public note')).toBeInTheDocument();
     });
 
     test('Displays expected public note value', async () => {
-      await TextArea({ id: 'edit-customproperty-0-public-note' }).has({ value: 'public note' });
+      await TextArea('Public note').has({ value: 'this is a public note' });
     });
   });
 
@@ -90,10 +93,9 @@ describe('CustomPropertyField', () => {
           onSubmit={onSubmit}
         >
           <CustomPropertyField
-            {...decimalData}
-            availableCustomProperties={availableCustomProperties}
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
+            {...defaultProps}
+            customProperty={decimalCustProp}
+            index={2}
           />
         </TestForm>
       );
@@ -112,10 +114,9 @@ describe('CustomPropertyField', () => {
           onSubmit={onSubmit}
         >
           <CustomPropertyField
-            {...integerData}
-            availableCustomProperties={availableCustomProperties}
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
+            {...defaultProps}
+            customProperty={integerCustProp}
+            index={3}
           />
         </TestForm>
       );
@@ -126,7 +127,7 @@ describe('CustomPropertyField', () => {
     });
   });
 
-  describe('Date field', () => {
+  describe('Refdata multi-select field', () => {
     beforeEach(() => {
       renderComponent = renderWithKintHarness(
         <TestForm
@@ -134,25 +135,29 @@ describe('CustomPropertyField', () => {
           onSubmit={onSubmit}
         >
           <CustomPropertyField
-            {...dateData}
-            availableCustomProperties={availableCustomProperties}
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
+            {...defaultProps}
+            customProperty={multiRefdataCustProp}
+            index={4}
           />
         </TestForm>
       );
     });
 
-    test('renders values DatePicker', async () => {
-      await Datepicker('Value(s)').exists();
+    test('Displays expected multi-select Refdata Field', async () => {
+      await MultiSelect('Value(s)').exists();
     });
 
-    test('Displays expected date Field', async () => {
-      await TextInput({ id: 'edit-customproperty-5-value' }).exists();
+    it('Displays expected value(s) label ', () => {
+      const { getByText } = renderComponent;
+      expect(getByText('Value(s)')).toBeInTheDocument();
+    });
+
+    test('renders multi-select Refdata values', async () => {
+      await MultiSelect('Value(s)').select(['Future', 'Current', 'Historical', 'Does not apply']);
     });
   });
 
-  describe('Refdata multi-select field', () => {
+  describe('Date field', () => {
     beforeEach(() => {
       renderComponent = renderWithKintHarness(
         <TestForm
@@ -160,26 +165,20 @@ describe('CustomPropertyField', () => {
           onSubmit={onSubmit}
         >
           <CustomPropertyField
-            {...multiSelectData}
-            availableCustomProperties={availableCustomProperties}
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
+            {...defaultProps}
+            customProperty={dateCustProp}
+            index={5}
           />
         </TestForm>
       );
     });
 
-    test('Displays expected multi-select Refdata Field', async () => {
-      await TextInput({ id: 'edit-customproperty-4-value-input' }).exists();
-    });
-
-    it('Displays expected value(s) lable ', () => {
-      const { getByText } = renderComponent;
-      expect(getByText('Value(s)')).toBeInTheDocument();
+    test('renders values DatePicker', async () => {
+      await Datepicker('Value(s)').exists();
     });
 
-    test('renders multi-select Refdata values', async () => {
-      await MultiSelect('Value(s)').select(['Ceased', 'Superseded', 'Rejected', 'Cancelled']);
+    test('Displays expected date Field', async () => {
+      await TextInput({ id: 'edit-customproperty-5-value' }).exists();
     });
   });
 });

package/src/lib/CustomProperties/Edit/CustomPropertyFormCard.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import {
   Card,
   IconButton,
@@ -10,6 +8,7 @@ import {
 } from '@folio/stripes/components';
 
 import CustomPropertyField from './CustomPropertyField';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertyFormCard = ({
   availableCustomProperties,
@@ -19,49 +18,37 @@ const CustomPropertyFormCard = ({
   handleDeleteCustomProperty,
   index,
   internalPropertyCounter,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   name,
   onChange,
   setCustomProperties,
   value
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const getHeader = () => {
     if (customPropertyType === 'optional') {
-      if (labelOverrides.optionalPropertyHeader && typeof labelOverrides.optionalPropertyHeader === 'function') {
-        return labelOverrides.optionalPropertyHeader(internalPropertyCounter);
-      }
-
-      // Label override for optionalPropertyHeader or finally built in default
-      return (
-        labelOverrides.optionalPropertyHeader ??
-        <FormattedMessage
-          id="stripes-kint-components.customProperty.optionalPropertyHeader"
-          values={{ number: internalPropertyCounter }}
-        />
-      );
+      return kintIntl.formatKintMessage({
+        id: 'customProperty.optionalPropertyHeader',
+        overrideValue: labelOverrides.optionalPropertyHeader,
+      }, { number: internalPropertyCounter, name: customProperty.value });
     }
 
-    // Label override for primaryPropertyHeader or finally built in default
-    return (
-      labelOverrides.primaryPropertyHeader ??
-      customProperty.label
-    );
+    return kintIntl.formatKintMessage({
+      id: 'customProperty.primaryPropertyHeader',
+      overrideValue: labelOverrides.primaryPropertyHeader,
+      fallbackMessage: customProperty.label
+    }, { number: internalPropertyCounter, name: customProperty.value });
   };
 
-  const getTooltipText = () => {
-    if (labelOverrides.remove && typeof labelOverrides.remove === 'function') {
-      return labelOverrides.remove(internalPropertyCounter);
-    }
-
-    // Label override for optionalPropertyHeader or finally built in default
-    return (
-      labelOverrides.remove ??
-      <FormattedMessage
-        id="stripes-kint-components.customProperty.remove"
-        values={{ number: internalPropertyCounter }}
-      />
-    );
-  };
+  const getTooltipText = () => (
+    kintIntl.formatKintMessage({
+      id: 'customProperty.remove',
+      overrideValue: labelOverrides.remove
+    }, { number: internalPropertyCounter, name: customProperty.value })
+  );
 
   return (
     <Card
@@ -103,6 +90,8 @@ const CustomPropertyFormCard = ({
           customProperties,
           index,
           internalPropertyCounter,
+          intlKey: passedIntlKey,
+          intlNS: passedIntlNS,
           labelOverrides,
           name,
           onChange,
@@ -122,6 +111,8 @@ CustomPropertyFormCard.propTypes = {
   handleDeleteCustomProperty: PropTypes.func,
   index: PropTypes.number,
   internalPropertyCounter: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   name: PropTypes.string,
   onChange: PropTypes.func,

package/src/lib/CustomProperties/Edit/CustomPropertyFormCard.test.js

@@ -1,42 +1,35 @@
 import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
-import { StaticRouter as Router } from 'react-router-dom';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
-
-import {
-  availableCustomProperties,
-  customProperties,
-  customProperty,
-  labelOverrides,
-  cardFormValue
-} from './testResources';
 import CustomPropertyFormCard from './CustomPropertyFormCard';
 
+import customProperties, { availableCustomProperties } from '../../../../test/jest/customProperties';
+import { renderWithKintHarness } from '../../../../test/jest';
+
+jest.mock('../../hooks');
 jest.mock('./CustomPropertyField', () => () => <div>CustomPropertyField</div>);
 
-const onChange = () => {};
-const setCustomProperties = () => {};
+const customProperty = availableCustomProperties?.find(cp => cp.value === 'AuthorIdentification');
+
+const onChange = jest.fn();
+const setCustomProperties = jest.fn();
 
 describe('CustomPropertyFormCard', () => {
     let renderComponent;
     beforeEach(() => {
       renderComponent = renderWithKintHarness(
-        <Router>
-          <CustomPropertyFormCard
-            availableCustomProperties={availableCustomProperties}
-            customProperties={customProperties}
-            customProperty={customProperty}
-            customPropertyType="primary"
-            index={0}
-            internalPropertyCounter={1}
-            labelOverrides={labelOverrides}
-            name="customProperties"
-            onChange={onChange}
-            setCustomProperties={setCustomProperties}
-            value={cardFormValue}
-          />
-        </Router>
+        <CustomPropertyFormCard
+          availableCustomProperties={availableCustomProperties}
+          customProperties={customProperties}
+          customProperty={customProperty}
+          customPropertyType="primary"
+          index={0}
+          internalPropertyCounter={1}
+          name="customProperties"
+          onChange={onChange}
+          setCustomProperties={setCustomProperties}
+          value={{}}
+        />
       );
     });