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

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Filter/CustomPropertiesFilterField.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">51.85% </span>
+                <span class="strong">68% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>14/27</span>
+                <span class='fraction'>17/25</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.27% </span>
+                <span class="strong">42.85% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/22</span>
+                <span class='fraction'>6/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">53.84% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>7/13</span>
+                <span class='fraction'>9/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">54.16% </span>
+                <span class="strong">72.72% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>13/24</span>
+                <span class='fraction'>16/22</span>
             </div>
         
             
@@ -211,8 +211,20 @@
 <a name='L146'></a><a href='#L146'>146</a>
 <a name='L147'></a><a href='#L147'>147</a>
 <a name='L148'></a><a href='#L148'>148</a>
-<a name='L149'></a><a href='#L149'>149</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -238,54 +250,60 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">48x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -305,11 +323,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -326,12 +344,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -350,6 +371,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -359,10 +383,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
 &nbsp;
-import { FormattedMessage } from 'react-intl';
-&nbsp;
 import { Field, useForm, useFormState } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 &nbsp;
@@ -378,58 +402,54 @@ import { groupCustomPropertiesByCtx } from '../../utils';
 import { required as requiredValidator } from '../../utils/validators';
 &nbsp;
 import CustomPropertiesRule from './CustomPropertiesRule';
+import { useKintIntl } from '../../hooks';
 &nbsp;
 const CustomPropertiesFilterField = ({
   customProperties = <span class="branch-0 cbranch-no" title="branch not covered" >[],</span>
   fields,
   index,
-  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   name,
 }) =&gt; {
   const groupedCustomProperties = groupCustomPropertiesByCtx(customProperties);
   const { change, mutators: { push } } = useForm();
   const { values } = useFormState();
-&nbsp;
-    // Deal with all the possible label override options
-    const getRetiredName = <span class="fstat-no" title="function not covered" >(c</span>ustomProperty) =&gt; {
-      // Label override for default card title,
-<span class="cstat-no" title="statement not covered" >      if (labelOverrides.retiredName &amp;&amp; typeof labelOverrides.retiredName === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >        return (</span>
-          labelOverrides.retiredName(customProperty.label)
-        );
-      }
-&nbsp;
-      // Label override for default title or finally built in default
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.retiredName ??
-        &lt;FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customProperty.label }} /&gt;
-      );
-    };
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 &nbsp;
   return (
     &lt;&gt;
       &lt;Field
         id={`input-custprop-${index}`}
-        label={labelOverrides.customProperty ?? <span class="branch-1 cbranch-no" title="branch not covered" >&lt;FormattedMessage id="stripes-kint-components.customProperty" /&gt;}</span>
+        label={
+          kintIntl.formatKintMessage({
+            id: 'customProperty',
+            overrideValue: labelOverrides.customProperty
+          })
+        }
         name={`${name}.customProperty`}
         placeholder=" "
         render={fieldProps =&gt; {
+          const sortedGroupedCustProps = Object.entries(groupedCustomProperties)?.sort((a, b) =&gt; {
+            <span class="missing-if-branch" title="else path not taken" >E</span>if (a[0] === 'isNull') return -1; // Make sure noContext is at top
+&nbsp;
+<span class="cstat-no" title="statement not covered" >            if (a[0].toLowerCase() &lt; b[0].toLowerCase()) <span class="cstat-no" title="statement not covered" >return -1;</span></span>
+<span class="cstat-no" title="statement not covered" >            if (a[0].toLowerCase() &gt; b[0].toLowerCase()) <span class="cstat-no" title="statement not covered" >return 1;</span></span>
+<span class="cstat-no" title="statement not covered" >            return 0;</span>
+          });
+&nbsp;
           return (
             &lt;Select
               {...fieldProps}
               placeholder={null} // placeholder default causes issues
             &gt;
-              &lt;option value=""&gt; &lt;/option&gt;
+              &lt;option key="empty-option" value=""&gt; &lt;/option&gt;
               {
-                Object.entries(groupedCustomProperties)?.sort((a, b) =&gt; {
-                  <span class="missing-if-branch" title="else path not taken" >E</span>if (a[0] === 'isNull') return -1; // Make sure noContext is at top
-&nbsp;
-<span class="cstat-no" title="statement not covered" >                  if (a[0].toLowerCase() &lt; b[0].toLowerCase()) <span class="cstat-no" title="statement not covered" >return -1;</span></span>
-<span class="cstat-no" title="statement not covered" >                  if (a[0].toLowerCase() &gt; b[0].toLowerCase()) <span class="cstat-no" title="statement not covered" >return 1;</span></span>
-<span class="cstat-no" title="statement not covered" >                  return 0;</span>
-                }).map(([key, value]) =&gt; {
+                sortedGroupedCustProps.map(([key, value]) =&gt; {
                   return (
                     &lt;optgroup
+                      key={`custom-property-optgroup-${key}`}
                       label={key === 'isNull' ? '-' : key}
                     &gt;
                       {value.map(v =&gt; {
@@ -438,7 +458,13 @@ const CustomPropertiesFilterField = ({
                             key={v.id}
                             value={v.name}
                           &gt;
-                            {v.retired ? <span class="branch-0 cbranch-no" title="branch not covered" >getRetiredName(v) </span>: v.label}
+                            {v.retired ?
+<span class="branch-0 cbranch-no" title="branch not covered" >                              kintIntl.formatKintMessage({</span>
+                                id: 'customProperty.retiredName',
+                                overrideValue: labelOverrides.retiredName
+                              }, { name: v.label }) :
+                              v.label
+                            }
                           &lt;/option&gt;
                         );
                       })}
@@ -454,6 +480,7 @@ const CustomPropertiesFilterField = ({
       /&gt;
       {/* This next div is rendered so that it can be referred to using aria-labelledby */}
       &lt;div
+        data-testid={`selected-custprop-name-${index}`}
         id={`selected-custprop-name-${index}`}
         style={{ display: 'none' }}
       &gt;
@@ -463,24 +490,31 @@ const CustomPropertiesFilterField = ({
         &lt;Col xs={2} /&gt;
         &lt;Col xs={4}&gt;
           &lt;Label id="rule-column-header-comparator" required&gt;
-            &lt;FormattedMessage id="stripes-erm-components.customProperty.filters.comparator" /&gt;
+            {kintIntl.formatKintMessage({
+                id: 'comparator',
+                overrideValue: labelOverrides.comparator
+            })}
           &lt;/Label&gt;
         &lt;/Col&gt;
         &lt;Col xs={4}&gt;
           &lt;Label id="rule-column-header-value" required&gt;
-            &lt;FormattedMessage id="stripes-erm-components.customProperty.filters.value" /&gt;
+            {kintIntl.formatKintMessage({
+                id: 'value',
+                overrideValue: labelOverrides.value
+            })}
           &lt;/Label&gt;
         &lt;/Col&gt;
         &lt;Col xs={2} /&gt;
       &lt;/Row&gt;
       &lt;FieldArray name={`${name}.rules`}&gt;
-        {({ fields: ruleFields }) =&gt; ruleFields.map(<span class="fstat-no" title="function not covered" >(r</span>uleFieldName, ruleFieldIndex) =&gt; (
-<span class="cstat-no" title="statement not covered" >          &lt;CustomPropertiesRule</span>
+        {({ fields: ruleFields }) =&gt; ruleFields.map((ruleFieldName, ruleFieldIndex) =&gt; (
+          &lt;CustomPropertiesRule
             key={ruleFieldName}
             ariaLabelledby={`selected-custprop-name-${index}`}
             clearRuleValue={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >change(`filters[${index}].rules[${ruleFieldIndex}].value`, '')}</span>
-            custPropDefinition={customProperties.find(<span class="fstat-no" title="function not covered" >t </span>=&gt; <span class="cstat-no" title="statement not covered" >t.name === fields.value[index].customProperty)</span>}
+            custPropDefinition={customProperties.find(t =&gt; t.name === fields.value[index].customProperty)}
             index={ruleFieldIndex}
+            labelOverrides={labelOverrides}
             name={ruleFieldName}
             onDelete={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >ruleFields.remove(ruleFieldIndex)}</span>
             value={values.filters[index]?.rules[ruleFieldIndex]}
@@ -492,7 +526,10 @@ const CustomPropertiesFilterField = ({
         disabled={!fields.value[index]?.customProperty}
         onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >push(`${name}.rules`)}</span>
       &gt;
-        &lt;FormattedMessage id="stripes-erm-components.customProperty.filters.addRule" /&gt;
+        {kintIntl.formatKintMessage({
+          id: 'addRule',
+          overrideValue: labelOverrides.addRule
+        })}
       &lt;/Button&gt;
     &lt;/&gt;
   );
@@ -502,6 +539,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
 };
@@ -514,7 +553,7 @@ export default CustomPropertiesFilterField;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Filter/CustomPropertiesFilterFieldArray.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.17% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>7/17</span>
+                <span class='fraction'>6/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">12.5% </span>
+                <span class="strong">33.33% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/16</span>
+                <span class='fraction'>1/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">25% </span>
+                <span class="strong">33.33% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/8</span>
+                <span class='fraction'>2/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.17% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>7/17</span>
+                <span class='fraction'>6/10</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -173,11 +173,7 @@
 <a name='L108'></a><a href='#L108'>108</a>
 <a name='L109'></a><a href='#L109'>109</a>
 <a name='L110'></a><a href='#L110'>110</a>
-<a name='L111'></a><a href='#L111'>111</a>
-<a name='L112'></a><a href='#L112'>112</a>
-<a name='L113'></a><a href='#L113'>113</a>
-<a name='L114'></a><a href='#L114'>114</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L111'></a><a href='#L111'>111</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -197,25 +193,23 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -223,13 +217,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -237,12 +231,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -289,10 +281,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
 &nbsp;
-import { FormattedMessage } from 'react-intl';
-&nbsp;
 import { useForm } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 &nbsp;
@@ -305,49 +297,34 @@ import {
 } from '@folio/stripes/components';
 &nbsp;
 import CustomPropertiesFilterField from './CustomPropertiesFilterField';
+import { useKintIntl } from '../../hooks';
 &nbsp;
 const CustomPropertiesFilterFieldArray = ({
   customProperties,
-  labelOverrides,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
 }) =&gt; {
   const { mutators: { push } } = useForm();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 &nbsp;
-  const getCardTitle = <span class="fstat-no" title="function not covered" >(i</span>ndex) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (labelOverrides.customPropertyFilter &amp;&amp; typeof labelOverrides.customPropertyFilter === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      return labelOverrides.customPropertyFilter(index);</span>
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.customPropertyFilter ??
-      &lt;FormattedMessage id="stripes-kint-components.customProperty.filterIndex" values={{ index: index + 1 }} /&gt;
-    );
-  };
-&nbsp;
-  const getTooltipText = <span class="fstat-no" title="function not covered" >(i</span>ndex) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (labelOverrides.removeFilter &amp;&amp; typeof labelOverrides.removeFilter === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      return labelOverrides.removeFilter(index);</span>
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.removeFilter ??
-      &lt;FormattedMessage
-        id="stripes-kint-components.customProperty.removeFilter"
-        values={{ number: index + 1 }}
-      /&gt;
-    );
-  };
   return (
     &lt;&gt;
       &lt;FieldArray name="filters"&gt;
         {({ fields }) =&gt; fields.map(<span class="fstat-no" title="function not covered" >(n</span>ame, index) =&gt; {
 <span class="cstat-no" title="statement not covered" >          return (</span>
-            &lt;&gt;
+            &lt;div key={`custom-property-filter-card[${index}]-container`}&gt;
               &lt;Card
                 key={`custom-property-filter-card[${index}]`}
                 headerEnd={
                   &lt;Tooltip
                     id={`custom-property-filter-card-delete-[${index}]-tooltip`}
-                    text={getTooltipText(index)}
+                    text={
+                      kintIntl.formatKintMessage({
+                        id: 'customProperty.removeFilter',
+                        overrideValue: labelOverrides.removeFilter
+                      }, { index: index + 1 })
+                    }
                   &gt;
                     {<span class="fstat-no" title="function not covered" >({</span> ref, ariaIds }) =&gt; (
 <span class="cstat-no" title="statement not covered" >                      &lt;IconButton</span>
@@ -362,12 +339,18 @@ const CustomPropertiesFilterFieldArray = ({
                 }
                 headerStart={
                   &lt;strong&gt;
-                    {getCardTitle(index)}
+                    {
+                      kintIntl.formatKintMessage({
+                        id: 'customProperty.filterIndex',
+                        overrideValue: labelOverrides.customPropertyFilter
+                      }, { index: index + 1 })
+                    }
                   &lt;/strong&gt;
                 }
                 marginBottom0={index !== fields.length - 1}
               &gt;
                 &lt;CustomPropertiesFilterField
+                  key={`custom-property-filter-field-${name}[${index}]`}
                   customProperties={customProperties}
                   fields={fields}
                   index={index}
@@ -376,21 +359,27 @@ const CustomPropertiesFilterFieldArray = ({
                 /&gt;
               &lt;/Card&gt;
               {index &lt; fields.value.length - 1 &amp;&amp; (
-                &lt;Layout className="textCentered"&gt;
-                  &lt;FormattedMessage id="stripes-kint-components.AND" /&gt;
+                &lt;Layout
+                  key={`custom-property-filter[${index}]-AND`}
+                  className="textCentered"
+                &gt;
+                  {kintIntl.formatKintMessage({
+                    id: 'AND',
+                    overrideValue: labelOverrides.AND
+                  })}
                 &lt;/Layout&gt;
               )}
-            &lt;/&gt;
+            &lt;/div&gt;
           );
         })}
       &lt;/FieldArray&gt;
       &lt;Button
         onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >push('filters', { rules: [{}] })}</span>
       &gt;
-        {
-          labelOverrides.addFilter ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.addFilter" /&gt;
-        }
+        {kintIntl.formatKintMessage({
+          id: 'customProperty.addFilter',
+          overrideValue: labelOverrides.addFilter
+        })}
       &lt;/Button&gt;
     &lt;/&gt;
   );
@@ -398,6 +387,8 @@ const CustomPropertiesFilterFieldArray = ({
 &nbsp;
 CustomPropertiesFilterFieldArray.propTypes = {
   customProperties: PropTypes.arrayOf(PropTypes.object),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object
 };
 &nbsp;
@@ -409,7 +400,7 @@ export default CustomPropertiesFilterFieldArray;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>