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

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { Field, useFormState, useForm } from 'react-final-form';
 
 import {
@@ -22,16 +21,19 @@ import {
   MULTI_REFDATA_CLASS_NAME,
   DATE_CLASS_NAME
 } from '../../constants/customProperties';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertyForm = ({
   contextFilterOptions,
   helpPopovers,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   refdata
 }) => {
   const { values } = useFormState();
   const { change } = useForm();
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   const booleanToString = booleanValue => booleanValue?.toString();
   const stringToBoolean = stringValue => stringValue === 'true';
@@ -48,14 +50,26 @@ const CustomPropertyForm = ({
     if (!filterValue || exactMatch) {
       return null;
     } else {
-      return <FormattedMessage id="stripes-kint-components.customProperties.ctx.addContext" values={{ value: filterValue }} />;
+      return kintIntl.formatKintMessage(
+        {
+          id: 'customProperties.ctx.addContext',
+          overrideValue: labelOverrides?.addCtx
+        },
+        {
+          value: filterValue
+        }
+      );
     }
   };
 
   const primaryRetiredValidator = (_v, allValues) => {
     if (allValues.primary && allValues.retired) {
-      return labelOverrides?.primaryRetired ??
-        <FormattedMessage id="stripes-kint-components.errors.primaryRetired" />;
+      return kintIntl.formatKintMessage(
+        {
+          id: 'customProperties.errors.primaryRetired',
+          overrideValue: labelOverrides?.primaryRetired
+        }
+      );
     }
     return null;
   };
@@ -70,48 +84,58 @@ const CustomPropertyForm = ({
             dataOptions={[
               { label: '', value: '' },
               {
-                label: labelOverrides?.[DECIMAL_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${DECIMAL_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${DECIMAL_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[DECIMAL_CLASS_NAME]
                 }),
                 value: DECIMAL_CLASS_NAME,
               },
               {
-                label: labelOverrides?.[INTEGER_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${INTEGER_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${INTEGER_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[INTEGER_CLASS_NAME]
                 }),
                 value: INTEGER_CLASS_NAME,
               },
               {
-                label: labelOverrides?.[TEXT_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${TEXT_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${TEXT_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[TEXT_CLASS_NAME]
                 }),
                 value: TEXT_CLASS_NAME,
               },
               {
-                label: labelOverrides?.[REFDATA_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${REFDATA_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${REFDATA_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[REFDATA_CLASS_NAME]
                 }),
                 value: REFDATA_CLASS_NAME,
               },
               {
-                label: labelOverrides?.[MULTI_REFDATA_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${MULTI_REFDATA_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${MULTI_REFDATA_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[MULTI_REFDATA_CLASS_NAME]
                 }),
                 value: MULTI_REFDATA_CLASS_NAME,
               },
               {
-                label: labelOverrides?.[DATE_CLASS_NAME] ?? intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${DATE_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${DATE_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[DATE_CLASS_NAME]
                 }),
                 value: DATE_CLASS_NAME,
               },
             ]
             }
-            disabled={values?.id}
+            disabled={!!values?.id}
             label={
               <div>
-                {labelOverrides?.type ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.type" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.type',
+                    overrideValue: labelOverrides?.type
+                  })
+                }
                 {helpPopovers?.type ?
                   <InfoPopover
                     content={helpPopovers?.type}
@@ -128,11 +152,15 @@ const CustomPropertyForm = ({
             <Field
               component={Select}
               dataOptions={[{ label: '', value: '' }, ...refdata]}
-              disabled={values?.id}
+              disabled={!!values?.id}
               label={
                 <div>
-                  {labelOverrides?.category ??
-                    <FormattedMessage id="stripes-kint-components.customProperties.category" />}
+                  {
+                    kintIntl.formatKintMessage({
+                      id: 'customProperties.category',
+                      overrideValue: labelOverrides?.category
+                    })
+                  }
                   {helpPopovers?.category ?
                     <InfoPopover
                       content={helpPopovers?.category}
@@ -153,8 +181,12 @@ const CustomPropertyForm = ({
             id="custom-prop-label"
             label={
               <div>
-                {labelOverrides?.label ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.label" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.label',
+                    overrideValue: labelOverrides?.label
+                  })
+                }
                 {helpPopovers?.label ?
                   <InfoPopover
                     content={helpPopovers?.label}
@@ -172,8 +204,12 @@ const CustomPropertyForm = ({
             id="custom-prop-name"
             label={
               <div>
-                {labelOverrides?.name ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.name" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.name',
+                    overrideValue: labelOverrides?.name
+                  })
+                }
                 {helpPopovers?.name ?
                   <InfoPopover
                     content={helpPopovers?.name}
@@ -186,9 +222,11 @@ const CustomPropertyForm = ({
               if (v && v.length) {
                 return /^[a-z][a-z0-9]*$/i.test(v) ? (
                   undefined
-                ) : (
-                  <FormattedMessage id="stripes-kint-components.errors.hasNonAlphaName" />
-                );
+                ) :
+                kintIntl.formatKintMessage({
+                  id: 'errors.hasNonAlphaName',
+                  overrideValue: labelOverrides?.hasNonAlphaName
+                });
               }
 
               return requiredValidator(v);
@@ -203,8 +241,12 @@ const CustomPropertyForm = ({
             id="custom-prop-description"
             label={
               <div>
-                {labelOverrides?.description ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.description" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.description',
+                    overrideValue: labelOverrides?.description
+                  })
+                }
                 {helpPopovers?.description ?
                   <InfoPopover
                     content={helpPopovers?.description}
@@ -213,6 +255,7 @@ const CustomPropertyForm = ({
             }
             name="description"
             required
+            // FIXME I think the required Validator might pose translation problems
             validate={requiredValidator}
           />
         </Col>
@@ -221,11 +264,20 @@ const CustomPropertyForm = ({
             actions={[{ onSelect: addCtx, render: renderAddCtx }]}
             component={MultiSelection}
             dataOptions={contextOptions}
-            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
+            emptyMessage={
+              kintIntl.formatKintMessage({
+                id: 'customProperties.noCtxFound',
+                overrideValue: labelOverrides?.noCtxFound
+              })
+            }
             label={
               <div>
-                {labelOverrides?.ctx ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.ctx" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.ctx',
+                    overrideValue: labelOverrides?.ctx
+                  })
+                }
                 {helpPopovers?.ctx ?
                   <InfoPopover
                     content={helpPopovers?.ctx}
@@ -240,7 +292,6 @@ const CustomPropertyForm = ({
                 change('ctx', undefined);
               }
             }}
-            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
           />
         </Col>
       </Row>
@@ -251,8 +302,12 @@ const CustomPropertyForm = ({
             id="custom-prop-weight"
             label={
               <div>
-                {labelOverrides?.weight ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.weight" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.weight',
+                    overrideValue: labelOverrides?.weight
+                  })
+                }
                 {helpPopovers?.weight ?
                   <InfoPopover
                     content={helpPopovers?.weight}
@@ -270,14 +325,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.yes',
+                label: kintIntl.formatKintMessage({
+                  id: 'yes',
+                  overrideValue: labelOverrides?.yes
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.no',
+                label: kintIntl.formatKintMessage({
+                  id: 'no',
+                  overrideValue: labelOverrides?.no
                 }),
                 value: 'false',
               },
@@ -285,8 +342,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               <div>
-                {labelOverrides?.primary ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.primary" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.primary',
+                    overrideValue: labelOverrides?.primary
+                  })
+                }
                 {helpPopovers?.primary ?
                   <InfoPopover
                     content={helpPopovers?.primary}
@@ -307,14 +368,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.yes',
+                label: kintIntl.formatKintMessage({
+                  id: 'yes',
+                  overrideValue: labelOverrides?.yes
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.no',
+                label: kintIntl.formatKintMessage({
+                  id: 'no',
+                  overrideValue: labelOverrides?.no
                 }),
                 value: 'false',
               },
@@ -322,8 +385,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               <div>
-                {labelOverrides?.retired ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.retired" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.retired',
+                    overrideValue: labelOverrides?.retired
+                  })
+                }
                 {helpPopovers?.retired ?
                   <InfoPopover
                     content={helpPopovers?.retired}
@@ -344,16 +411,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id:
-                    'stripes-kint-components.customProperties.internalTrue',
+                label: kintIntl.formatKintMessage({
+                  id: 'customProperties.internalTrue',
+                  overrideValue: labelOverrides?.internalTrue
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id:
-                    'stripes-kint-components.customProperties.internalFalse',
+                label: kintIntl.formatKintMessage({
+                  id: 'customProperties.internalFalse',
+                  overrideValue: labelOverrides?.internalFalse
                 }),
                 value: 'false',
               },
@@ -361,8 +428,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               <div>
-                {labelOverrides?.defaultVisibility ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.defaultVisibility',
+                    overrideValue: labelOverrides?.defaultVisibility
+                  })
+                }
                 {helpPopovers?.defaultVisibility ?
                   <InfoPopover
                     content={helpPopovers?.defaultVisibility}
@@ -383,6 +454,8 @@ const CustomPropertyForm = ({
 CustomPropertyForm.propTypes = {
   contextFilterOptions: PropTypes.arrayOf(PropTypes.object),
   helpPopovers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   refdata: PropTypes.arrayOf(PropTypes.object)
 };

package/src/lib/CustomProperties/Config/CustomPropertyForm.test.js

@@ -3,13 +3,29 @@ import '@folio/stripes-erm-components/test/jest/__mock__';
 import { TextArea, TextField } from '@folio/stripes-testing';
 import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import refdata from '../../../../test/jest/refdata';
 
-import { contextFilterOptions, helpPopovers, labelOverrides, refdata, initialValues } from './testResources';
 import CustomPropertyForm from './CustomPropertyForm';
 
+import customProperties from '../../../../test/jest/customProperties';
+import { renderWithKintHarness } from '../../../../test/jest';
+
+const initialValues = {
+  ...customProperties?.find(cp => cp.name === 'test'),
+  // Just massage the type/ctx value to be of the shape the form expects
+  type: 'Decimal',
+  ctx: [
+    {
+      value: 'OpenAccess',
+      label: 'OpenAccess'
+    }
+  ],
+};
+
 const onSubmit = jest.fn();
 
+jest.mock('../../hooks');
+
 describe('CustomPropertyForm', () => {
   let renderComponent;
   beforeEach(() => {
@@ -19,16 +35,31 @@ describe('CustomPropertyForm', () => {
         onSubmit={onSubmit}
       >
         <CustomPropertyForm
-          contextFilterOptions={contextFilterOptions}
-          helpPopovers={helpPopovers}
-          labelOverrides={labelOverrides}
-          refdata={refdata}
+          contextFilterOptions={[
+            {
+              'value': '',
+              'label': 'All'
+            },
+            {
+              'value': 'OpenAccess',
+              'label': 'OpenAccess'
+            },
+            {
+              'value': 'test',
+              'label': 'test'
+            },
+            {
+              'value': 'isNull',
+              'label': 'None'
+            }
+          ]}
+          refdata={refdata.map(rdc => ({ label: rdc.desc, value: rdc.id }))}
         />
       </TestForm>
     );
   });
 
-  it('Displays expected lable ', () => {
+  it('Displays expected label ', () => {
     const { getByText } = renderComponent;
     expect(getByText('Label')).toBeInTheDocument();
   });
@@ -84,9 +115,9 @@ describe('CustomPropertyForm', () => {
     await TextField({ id: 'custom-prop-weight' }).exists();
   });
 
-  test('renders the expected value in the Deprecated dropdown', () => {
+  test('renders the expected value in the Retired dropdown', () => {
     const { getByRole } = renderComponent;
-    expect(getByRole('combobox', { name: 'Deprecated' })).toHaveDisplayValue('No');
+    expect(getByRole('combobox', { name: 'Retired' })).toHaveDisplayValue('No');
   });
 
   test('renders the expected value in the Default visibility dropdown', () => {
@@ -99,28 +130,16 @@ describe('CustomPropertyForm', () => {
     expect(getByRole('combobox', { name: 'Primary' })).toHaveDisplayValue('Yes');
   });
 
-  it('Displays expected Decimal option ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Decimal')).toBeInTheDocument();
-  });
-
-  it('Displays expected Refdata (multi-select) option ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Refdata (multi-select)')).toBeInTheDocument();
-  });
-
-  it('Displays expected Refdata option ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Refdata')).toBeInTheDocument();
-  });
-
-  it('Displays expected Text option ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Text')).toBeInTheDocument();
-  });
-
-  it('Displays expected Integer option ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('Integer')).toBeInTheDocument();
-  });
+  [
+    'Decimal',
+    'Refdata (multi-select)',
+    'Refdata',
+    'Text',
+    'Integer'
+  ].forEach((type) => (
+    it(`Displays expected ${type} option`, () => {
+      const { getByText } = renderComponent;
+      expect(getByText(type)).toBeInTheDocument();
+    })
+  ));
 });