@k-int/stripes-kint-components 2.8.4 → 2.8.6

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">44.82% </span>
+                <span class="strong">42.3% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>13/29</span>
+                <span class='fraction'>11/26</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">26.66% </span>
+                <span class="strong">27.77% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/30</span>
+                <span class='fraction'>5/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">20% </span>
+                <span class="strong">11.11% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/10</span>
+                <span class='fraction'>1/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
+                <span class="strong">47.82% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>13/26</span>
+                <span class='fraction'>11/23</span>
             </div>
         
             
@@ -215,7 +215,6 @@
 <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>
@@ -225,12 +224,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-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-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-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>
@@ -241,13 +243,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-yes">4x</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-yes">4x</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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -257,14 +256,6 @@
 <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-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-neutral">&nbsp;</span>
@@ -310,6 +301,8 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -331,6 +324,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-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>
@@ -339,9 +337,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 { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 &nbsp;
 import {
   Accordion,
@@ -349,7 +348,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';
@@ -361,11 +360,15 @@ const CustomPropertiesFilter = ({
   },
   customPropertiesEndpoint,
   filterHandlers,
-  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{}</span>
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {}
  }) =&gt; {
   const [editingFilters, setEditingFilters] = useState(false);
   const openEditModal = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setEditingFilters(true);</span>
   const closeEditModal = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setEditingFilters(false);</span>
+&nbsp;
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 &nbsp;
   const { data: custprops, isLoading } = useCustomProperties({
     endpoint: customPropertiesEndpoint,
@@ -379,21 +382,7 @@ const CustomPropertiesFilter = ({
       ],
     }
   });
-  const parsedFilterData = useParseActiveFilterStrings(custPropFilters || <span class="branch-1 cbranch-no" title="branch not covered" >[])</span>;
-&nbsp;
-  const getFiltersApplied = () =&gt; {
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (labelOverrides.filtersApplied &amp;&amp; typeof labelOverrides.filtersApplied === 'function') {
-      return labelOverrides.filtersApplied((parsedFilterData?.numberOfFilters ?? <span class="branch-1 cbranch-no" title="branch not covered" >0)</span>);
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.filtersApplied ??
-      &lt;FormattedMessage
-        id="stripes-kint-components.customProperty.filtersApplied"
-        values={{ count: (parsedFilterData?.numberOfFilters ?? 0) }}
-      /&gt;
-    );
-  };
+  const parsedFilterData = useParseActiveFilterStrings(custPropFilters || <span class="branch-1 cbranch-no" title="branch not covered" >[],</span> passedIntlKey, passedIntlNS, labelOverrides);
 &nbsp;
   <span class="missing-if-branch" title="if path not taken" >I</span>if (isLoading) {
 <span class="cstat-no" title="statement not covered" >    return (</span>
@@ -402,8 +391,10 @@ const CustomPropertiesFilter = ({
         header={FilterAccordionHeader}
         id="clickable-custprop-filter"
         label={
-          labelOverrides.customProperties ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperties" /&gt;
+          kintIntl.formatKintMessage({
+            id: 'customProperties',
+            overrideValue: labelOverrides.customProperties,
+          })
         }
         separator={false}
       &gt;
@@ -445,14 +436,21 @@ const CustomPropertiesFilter = ({
       header={FilterAccordionHeader}
       id="clickable-custprop-filter"
       label={
-        labelOverrides.customProperties ??
-<span class="branch-1 cbranch-no" title="branch not covered" >        &lt;FormattedMessage id="stripes-kint-components.customProperties" /&gt;</span>
+        kintIntl.formatKintMessage({
+          id: 'customProperties',
+          overrideValue: labelOverrides.customProperties,
+        })
       }
       onClearFilter={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >filterHandlers.state({ ...restOfFilters, customProperties: [] })}</span>
       separator={false}
     &gt;
       &lt;Layout className="padding-bottom-gutter"&gt;
-        {getFiltersApplied()}
+        {
+          kintIntl.formatKintMessage({
+            id: 'customProperty.filtersApplied',
+            overrideValue: labelOverrides.filtersApplied,
+          }, { count: (parsedFilterData?.numberOfFilters ?? <span class="branch-1 cbranch-no" title="branch not covered" >0)</span> })
+        }
       &lt;/Layout&gt;
       &lt;CustomPropertiesFilterForm
         customProperties={custprops}
@@ -473,6 +471,8 @@ CustomPropertiesFilter.propTypes = {
   activeFilters: PropTypes.object,
   customPropertiesEndpoint: PropTypes.string,
   filterHandlers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object
 };
 &nbsp;
@@ -484,7 +484,7 @@ export default CustomPropertiesFilter;
             <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 2022-11-22T09:57:19.883Z
+                at 2022-12-09T15:17:50.295Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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 2022-11-22T09:57:19.883Z
+                at 2022-12-09T15:17:50.295Z
             </div>
         <script src="../../prettify.js"></script>
         <script>