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

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

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 
 import {
   Accordion,
@@ -8,7 +7,7 @@ import {
   Layout,
   Spinner
 } from '@folio/stripes/components';
-import { useCustomProperties } from '../../hooks';
+import { useCustomProperties, useKintIntl } from '../../hooks';
 import useParseActiveFilterStrings from './useParseActiveFilterStrings';
 import CustomPropertiesFilterForm from './CustomPropertiesFilterForm';
 import { MULTI_REFDATA_CLASS_NAME, REFDATA_CLASS_NAME } from '../../constants/customProperties';
@@ -20,12 +19,16 @@ const CustomPropertiesFilter = ({
   },
   customPropertiesEndpoint,
   filterHandlers,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {}
  }) => {
   const [editingFilters, setEditingFilters] = useState(false);
   const openEditModal = () => setEditingFilters(true);
   const closeEditModal = () => setEditingFilters(false);
 
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const { data: custprops, isLoading } = useCustomProperties({
     endpoint: customPropertiesEndpoint,
     returnQueryObject: true,
@@ -38,21 +41,7 @@ const CustomPropertiesFilter = ({
       ],
     }
   });
-  const parsedFilterData = useParseActiveFilterStrings(custPropFilters || []);
-
-  const getFiltersApplied = () => {
-    if (labelOverrides.filtersApplied && typeof labelOverrides.filtersApplied === 'function') {
-      return labelOverrides.filtersApplied((parsedFilterData?.numberOfFilters ?? 0));
-    }
-
-    return (
-      labelOverrides.filtersApplied ??
-      <FormattedMessage
-        id="stripes-kint-components.customProperty.filtersApplied"
-        values={{ count: (parsedFilterData?.numberOfFilters ?? 0) }}
-      />
-    );
-  };
+  const parsedFilterData = useParseActiveFilterStrings(custPropFilters || [], passedIntlKey, passedIntlNS, labelOverrides);
 
   if (isLoading) {
     return (
@@ -61,8 +50,10 @@ const CustomPropertiesFilter = ({
         header={FilterAccordionHeader}
         id="clickable-custprop-filter"
         label={
-          labelOverrides.customProperties ??
-          <FormattedMessage id="stripes-kint-components.customProperties" />
+          kintIntl.formatKintMessage({
+            id: 'customProperties',
+            overrideValue: labelOverrides.customProperties,
+          })
         }
         separator={false}
       >
@@ -104,14 +95,21 @@ const CustomPropertiesFilter = ({
       header={FilterAccordionHeader}
       id="clickable-custprop-filter"
       label={
-        labelOverrides.customProperties ??
-        <FormattedMessage id="stripes-kint-components.customProperties" />
+        kintIntl.formatKintMessage({
+          id: 'customProperties',
+          overrideValue: labelOverrides.customProperties,
+        })
       }
       onClearFilter={() => filterHandlers.state({ ...restOfFilters, customProperties: [] })}
       separator={false}
     >
       <Layout className="padding-bottom-gutter">
-        {getFiltersApplied()}
+        {
+          kintIntl.formatKintMessage({
+            id: 'customProperty.filtersApplied',
+            overrideValue: labelOverrides.filtersApplied,
+          }, { count: (parsedFilterData?.numberOfFilters ?? 0) })
+        }
       </Layout>
       <CustomPropertiesFilterForm
         customProperties={custprops}
@@ -132,6 +130,8 @@ CustomPropertiesFilter.propTypes = {
   activeFilters: PropTypes.object,
   customPropertiesEndpoint: PropTypes.string,
   filterHandlers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object
 };
 

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

@@ -2,11 +2,14 @@ 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 { activeFilters, filterHandlers } from './testResources';
 import CustomPropertiesFilter from './CustomPropertiesFilter';
 
+import translationsProperties from '../../../../test/helpers';
+import { renderWithKintHarness } from '../../../../test/jest';
+
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesFilterForm', () => () => <div>CustomPropertiesFilterForm</div>);
 
 describe('CustomPropertiesFilter', () => {
@@ -18,21 +21,22 @@ describe('CustomPropertiesFilter', () => {
           activeFilters={activeFilters}
           customPropertiesEndpoint="erm/custprops"
           filterHandlers={filterHandlers}
-          labelOverrides={labelOverrides}
         />
-      </MemoryRouter>
+      </MemoryRouter>,
+      {},
+      translationsProperties
     );
   });
 
-  test('renders the Supplementrary properties Accordion by id', async () => {
+  test('renders the Custom 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 Custom properties Accordion', async () => {
+    await Accordion('Custom properties').exists();
   });
 
-  test('renders the edit supplementary property filters button', async () => {
+  test('renders the edit custom property filters button', async () => {
     await Button({ id: 'accordion-toggle-button-clickable-custprop-filter' }).exists();
   });
 

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

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import { Field, useForm, useFormState } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -17,58 +15,54 @@ import { groupCustomPropertiesByCtx } from '../../utils';
 import { required as requiredValidator } from '../../utils/validators';
 
 import CustomPropertiesRule from './CustomPropertiesRule';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertiesFilterField = ({
   customProperties = [],
   fields,
   index,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   name,
 }) => {
   const groupedCustomProperties = groupCustomPropertiesByCtx(customProperties);
   const { change, mutators: { push } } = useForm();
   const { values } = useFormState();
-
-    // Deal with all the possible label override options
-    const getRetiredName = (customProperty) => {
-      // Label override for default card title,
-      if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
-        return (
-          labelOverrides.retiredName(customProperty.label)
-        );
-      }
-
-      // Label override for default title or finally built in default
-      return (
-        labelOverrides.retiredName ??
-        <FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customProperty.label }} />
-      );
-    };
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   return (
     <>
       <Field
         id={`input-custprop-${index}`}
-        label={labelOverrides.customProperty ?? <FormattedMessage id="stripes-kint-components.customProperty" />}
+        label={
+          kintIntl.formatKintMessage({
+            id: 'customProperty',
+            overrideValue: labelOverrides.customProperty
+          })
+        }
         name={`${name}.customProperty`}
         placeholder=" "
         render={fieldProps => {
+          const sortedGroupedCustProps = Object.entries(groupedCustomProperties)?.sort((a, b) => {
+            if (a[0] === 'isNull') return -1; // Make sure noContext is at top
+
+            if (a[0].toLowerCase() < b[0].toLowerCase()) return -1;
+            if (a[0].toLowerCase() > b[0].toLowerCase()) return 1;
+            return 0;
+          });
+
           return (
             <Select
               {...fieldProps}
               placeholder={null} // placeholder default causes issues
             >
-              <option value=""> </option>
+              <option key="empty-option" value=""> </option>
               {
-                Object.entries(groupedCustomProperties)?.sort((a, b) => {
-                  if (a[0] === 'isNull') return -1; // Make sure noContext is at top
-
-                  if (a[0].toLowerCase() < b[0].toLowerCase()) return -1;
-                  if (a[0].toLowerCase() > b[0].toLowerCase()) return 1;
-                  return 0;
-                }).map(([key, value]) => {
+                sortedGroupedCustProps.map(([key, value]) => {
                   return (
                     <optgroup
+                      key={`custom-property-optgroup-${key}`}
                       label={key === 'isNull' ? '-' : key}
                     >
                       {value.map(v => {
@@ -77,7 +71,13 @@ const CustomPropertiesFilterField = ({
                             key={v.id}
                             value={v.name}
                           >
-                            {v.retired ? getRetiredName(v) : v.label}
+                            {v.retired ?
+                              kintIntl.formatKintMessage({
+                                id: 'customProperty.retiredName',
+                                overrideValue: labelOverrides.retiredName
+                              }, { name: v.label }) :
+                              v.label
+                            }
                           </option>
                         );
                       })}
@@ -93,6 +93,7 @@ const CustomPropertiesFilterField = ({
       />
       {/* This next div is rendered so that it can be referred to using aria-labelledby */}
       <div
+        data-testid={`selected-custprop-name-${index}`}
         id={`selected-custprop-name-${index}`}
         style={{ display: 'none' }}
       >
@@ -102,12 +103,18 @@ const CustomPropertiesFilterField = ({
         <Col xs={2} />
         <Col xs={4}>
           <Label id="rule-column-header-comparator" required>
-            <FormattedMessage id="stripes-erm-components.customProperty.filters.comparator" />
+            {kintIntl.formatKintMessage({
+                id: 'comparator',
+                overrideValue: labelOverrides.comparator
+            })}
           </Label>
         </Col>
         <Col xs={4}>
           <Label id="rule-column-header-value" required>
-            <FormattedMessage id="stripes-erm-components.customProperty.filters.value" />
+            {kintIntl.formatKintMessage({
+                id: 'value',
+                overrideValue: labelOverrides.value
+            })}
           </Label>
         </Col>
         <Col xs={2} />
@@ -120,6 +127,7 @@ const CustomPropertiesFilterField = ({
             clearRuleValue={() => change(`filters[${index}].rules[${ruleFieldIndex}].value`, '')}
             custPropDefinition={customProperties.find(t => t.name === fields.value[index].customProperty)}
             index={ruleFieldIndex}
+            labelOverrides={labelOverrides}
             name={ruleFieldName}
             onDelete={() => ruleFields.remove(ruleFieldIndex)}
             value={values.filters[index]?.rules[ruleFieldIndex]}
@@ -131,7 +139,10 @@ const CustomPropertiesFilterField = ({
         disabled={!fields.value[index]?.customProperty}
         onClick={() => push(`${name}.rules`)}
       >
-        <FormattedMessage id="stripes-erm-components.customProperty.filters.addRule" />
+        {kintIntl.formatKintMessage({
+          id: 'addRule',
+          overrideValue: labelOverrides.addRule
+        })}
       </Button>
     </>
   );
@@ -141,6 +152,8 @@ CustomPropertiesFilterField.propTypes = {
   customProperties: PropTypes.arrayOf(PropTypes.object),
   fields: PropTypes.object,
   index: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   name: PropTypes.string
 };

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

@@ -1,32 +1,45 @@
 import React from 'react';
+import { FieldArray } from 'react-final-form-arrays';
+
 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';
+import customProperties from '../../../../test/jest/customProperties';
+import { renderWithKintHarness } from '../../../../test/jest';
+import { data } from './testResources';
 
+jest.mock('../../hooks');
 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
+        initialValues={{
+          filters: data.filters
+        }}
+        onSubmit={onSubmit}
+      >
+        <FieldArray name="filters">
+          {({ fields }) => fields.map((name, index) => (
+            <CustomPropertiesFilterField
+              key={`custom-property-filter-field-${name}[${index}]`}
+              customProperties={customProperties}
+              fields={fields}
+              index={index}
+              name={name}
+            />
+          ))}
+        </FieldArray>
       </TestForm>
     </MemoryRouter>
   );
 
-  test('displays the Supplementary property label', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Supplementary property')).toBeInTheDocument();
+  test('displays the Custom property label', () => {
+    const { getByTestId } = renderComponent;
+    expect(getByTestId('selected-custprop-name-0')).toHaveTextContent('Author Identification');
   });
 });

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

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import { useForm } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -14,49 +12,34 @@ import {
 } from '@folio/stripes/components';
 
 import CustomPropertiesFilterField from './CustomPropertiesFilterField';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertiesFilterFieldArray = ({
   customProperties,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
 }) => {
   const { mutators: { push } } = useForm();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
-  const getCardTitle = (index) => {
-    if (labelOverrides.customPropertyFilter && typeof labelOverrides.customPropertyFilter === 'function') {
-      return labelOverrides.customPropertyFilter(index);
-    }
-
-    return (
-      labelOverrides.customPropertyFilter ??
-      <FormattedMessage id="stripes-kint-components.customProperty.filterIndex" values={{ index: index + 1 }} />
-    );
-  };
-
-  const getTooltipText = (index) => {
-    if (labelOverrides.removeFilter && typeof labelOverrides.removeFilter === 'function') {
-      return labelOverrides.removeFilter(index);
-    }
-
-    return (
-      labelOverrides.removeFilter ??
-      <FormattedMessage
-        id="stripes-kint-components.customProperty.removeFilter"
-        values={{ number: index + 1 }}
-      />
-    );
-  };
   return (
     <>
       <FieldArray name="filters">
         {({ fields }) => fields.map((name, index) => {
           return (
-            <>
+            <div key={`custom-property-filter-card[${index}]-container`}>
               <Card
                 key={`custom-property-filter-card[${index}]`}
                 headerEnd={
                   <Tooltip
                     id={`custom-property-filter-card-delete-[${index}]-tooltip`}
-                    text={getTooltipText(index)}
+                    text={
+                      kintIntl.formatKintMessage({
+                        id: 'customProperty.removeFilter',
+                        overrideValue: labelOverrides.removeFilter
+                      }, { index: index + 1 })
+                    }
                   >
                     {({ ref, ariaIds }) => (
                       <IconButton
@@ -71,12 +54,18 @@ const CustomPropertiesFilterFieldArray = ({
                 }
                 headerStart={
                   <strong>
-                    {getCardTitle(index)}
+                    {
+                      kintIntl.formatKintMessage({
+                        id: 'customProperty.filterIndex',
+                        overrideValue: labelOverrides.customPropertyFilter
+                      }, { index: index + 1 })
+                    }
                   </strong>
                 }
                 marginBottom0={index !== fields.length - 1}
               >
                 <CustomPropertiesFilterField
+                  key={`custom-property-filter-field-${name}[${index}]`}
                   customProperties={customProperties}
                   fields={fields}
                   index={index}
@@ -85,21 +74,27 @@ const CustomPropertiesFilterFieldArray = ({
                 />
               </Card>
               {index < fields.value.length - 1 && (
-                <Layout className="textCentered">
-                  <FormattedMessage id="stripes-kint-components.AND" />
+                <Layout
+                  key={`custom-property-filter[${index}]-AND`}
+                  className="textCentered"
+                >
+                  {kintIntl.formatKintMessage({
+                    id: 'AND',
+                    overrideValue: labelOverrides.AND
+                  })}
                 </Layout>
               )}
-            </>
+            </div>
           );
         })}
       </FieldArray>
       <Button
         onClick={() => push('filters', { rules: [{}] })}
       >
-        {
-          labelOverrides.addFilter ??
-          <FormattedMessage id="stripes-kint-components.customProperty.addFilter" />
-        }
+        {kintIntl.formatKintMessage({
+          id: 'customProperty.addFilter',
+          overrideValue: labelOverrides.addFilter
+        })}
       </Button>
     </>
   );
@@ -107,6 +102,8 @@ const CustomPropertiesFilterFieldArray = ({
 
 CustomPropertiesFilterFieldArray.propTypes = {
   customProperties: PropTypes.arrayOf(PropTypes.object),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object
 };
 

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

@@ -4,11 +4,12 @@ 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';
+import customProperties from '../../../../test/jest/customProperties';
+import { renderWithKintHarness } from '../../../../test/jest';
 
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesFilterField', () => () => <div>CustomPropertiesFilterField</div>);
 const onSubmit = jest.fn();
 
@@ -22,7 +23,6 @@ describe('CustomPropertiesFilterFieldArray', () => {
         <FieldArray
           component={CustomPropertiesFilterFieldArray}
           customProperties={customProperties}
-          labelOverrides={labelOverrides}
           name="customProperties"
         />
       </TestForm>

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

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import arrayMutators from 'final-form-arrays';
 
 import {
@@ -10,6 +8,7 @@ import {
 
 import FormModal from '../../FormModal';
 import CustomPropertiesFilterFieldArray from './CustomPropertiesFilterFieldArray';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertyFiltersForm = ({
   customProperties,
@@ -19,30 +18,40 @@ const CustomPropertyFiltersForm = ({
     closeEditModal,
     openEditModal,
   },
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   onSubmit,
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   return (
     <>
       <Button
         onClick={openEditModal}
       >
         {
-          labelOverrides.editCustomPropertyFilters ??
-          <FormattedMessage id="stripes-kint-components.customProperty.editCustomPropertyFilters" />
+          kintIntl.formatKintMessage({
+            id: 'customProperty.editCustomPropertyFilters',
+            overrideValue: labelOverrides.editCustomPropertyFilters
+          })
         }
       </Button>
       <FormModal
         initialValues={{ filters: filters.length ? filters : [{ rules: [{}] }] }}
         labelOverrides={{
-          save: <FormattedMessage id="stripes-kint-components.apply" />
+          saveAndClose: kintIntl.formatKintMessage({
+            id: 'apply',
+            overrideValue: labelOverrides.apply
+          })
         }}
         modalProps={{
           dismissible: true,
           enforceFocus: false,
-          label:
-            labelOverrides.filterBuilder ??
-            <FormattedMessage id="stripes-kint-components.customProperty.filterbuilder" />,
+          label: kintIntl.formatKintMessage({
+            id: 'customProperty.filterBuilder',
+            overrideValue: labelOverrides.filterBuilder
+          }),
           onClose: closeEditModal,
           open: editingFilters,
           size: 'medium'
@@ -67,6 +76,8 @@ CustomPropertyFiltersForm.propTypes = {
     closeEditModal: PropTypes.func.isRequired,
     openEditModal: PropTypes.func.isRequired
   }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   onSubmit: PropTypes.func.isRequired
 };

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

@@ -1,12 +1,12 @@
 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';
+import { renderWithKintHarness } from '../../../../test/jest';
 
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesFilterFieldArray', () => () => <div>CustomPropertiesFilterFieldArray</div>);
 
 const onSubmit = jest.fn();
@@ -15,13 +15,10 @@ describe('CustomPropertyFiltersForm', () => {
   let renderComponent;
   beforeEach(() => {
     renderComponent = renderWithKintHarness(
-      <TestForm
+      <CustomPropertyFiltersForm
         onSubmit={onSubmit}
-      >
-        <CustomPropertyFiltersForm
-          {...data}
-        />
-      </TestForm>
+        {...data}
+      />
     );
   });
 
@@ -30,11 +27,11 @@ describe('CustomPropertyFiltersForm', () => {
     expect(getByText('CustomPropertiesFilterFieldArray')).toBeInTheDocument();
   });
 
-  test('renders the submit button', async () => {
-    await Button('Submit').exists();
+  test('renders the apply button (disabled)', async () => {
+    await Button('Apply').has({ disabled: true });
   });
 
-  test('renders the Edit supplementary property filters button', async () => {
-    await Button('Edit supplementary property filters').exists();
+  test('renders the Edit custom property filters button', async () => {
+    await Button('Edit custom property filters').exists();
   });
 });