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

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

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 
 import compose from 'compose-function';
 
-import { FormattedMessage, useIntl } from 'react-intl';
-
 import { useQueryClient } from 'react-query';
 
 import { Button, ConfirmationModal, Icon, Pane } from '@folio/stripes/components';
@@ -14,7 +12,7 @@ import FormModal from '../../FormModal/FormModal';
 import CustomPropertiesLookup from './CustomPropertiesLookup';
 import CustomPropertyView from './CustomPropertyView';
 import CustomPropertiesForm from './CustomPropertyForm';
-import { useMutateCustomProperties, useRefdata } from '../../hooks';
+import { useKintIntl, useMutateCustomProperties, useRefdata } from '../../hooks';
 import { parseErrorResponse } from '../../utils';
 
 const EDITING = 'edit';
@@ -28,13 +26,14 @@ const CustomPropertiesSettings = ({
   contextFilterOptions,
   customPropertiesEndpoint,
   helpPopovers,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   refdataEndpoint,
 }) => {
   const callout = useContext(CalloutContext);
   const queryClient = useQueryClient();
 
-  const intl = useIntl();
   const [customProperty, setCustomProperty] = useState();
   const [deleteModal, setDeleteModal] = useState(false);
 
@@ -44,6 +43,8 @@ const CustomPropertiesSettings = ({
 
   const [mode, setMode] = useState(VIEWING);
 
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   // Default props that need hooks are hard
   let renderContextFilterOptions = contextFilterOptions;
   if (!contextFilterOptions) {
@@ -55,16 +56,16 @@ const CustomPropertiesSettings = ({
     renderContextFilterOptions = [
       {
         value: '', // empty string is all custoprop contexts
-        label: intl.formatMessage({ id: 'stripes-kint-components.customProperties.all' })
+        label: kintIntl.formatKintMessage(
+          {
+            id: 'customProperties.config.all',
+            overrideValue: labelOverrides?.all,
+          },
+        )
       }
     ];
   }
 
-  let renderViewPaneTitle = labelOverrides?.viewPaneTitle;
-  if (renderViewPaneTitle instanceof Function) {
-    renderViewPaneTitle = renderViewPaneTitle(customProperty);
-  }
-
   const {
     post: createCustprop,
     put: editCustProp,
@@ -103,14 +104,15 @@ const CustomPropertiesSettings = ({
         const errorResp = await parseErrorResponse(err.response);
 
         callout.sendCallout({
-          message: labelOverrides?.deleteError ? labelOverrides.deleteError(errorResp?.message, customProperty) : (
-            <FormattedMessage
-              id="stripes-kint-components.customPropertiesSettings.deleteCustomProperty.errorMessage"
-              values={{
-                error: errorResp?.message,
-                label: customProperty?.label
-              }}
-            />
+          message: kintIntl.formatKintMessage(
+            {
+              id: 'customProperties.config.delete.errorMessage',
+              overrideValue: labelOverrides?.deleteError
+            },
+            {
+              error: errorResp?.message,
+              label: customProperty?.label
+            }
           ),
           type: 'error',
         });
@@ -150,16 +152,28 @@ const CustomPropertiesSettings = ({
             marginBottom0
             onClick={() => setMode(CREATING)} // TODO do we need to clear form here too?
           >
-            <FormattedMessage id="stripes-kint-components.new" />
+            {
+              kintIntl.formatKintMessage(
+                {
+                  id: 'new',
+                  overrideValue: labelOverrides?.new,
+                }
+              )
+            }
           </Button>
         }
-        paneTitle={labelOverrides.paneTitle ??
-          <FormattedMessage id="stripes-kint-components.customProperties" /> // This should be configurable?
+        paneTitle={
+          kintIntl.formatKintMessage({
+            id: 'customProperties',
+            overrideValue: labelOverrides.paneTitle
+          })
         }
       >
         <CustomPropertiesLookup
           contextFilterOptions={renderContextFilterOptions}
           customPropertiesEndpoint={customPropertiesEndpoint}
+          intlKey={passedIntlKey}
+          intlNS={passedIntlNS}
           labelOverrides={labelOverrides}
           onSelectCustomProperty={(_e, cp) => setCustomProperty(cp)}
         />
@@ -169,15 +183,24 @@ const CustomPropertiesSettings = ({
           actionMenu={({ onToggle }) => (
             [
               <Button
+                key={`${customProperty.name}-action-edit`}
                 buttonStyle="dropdownItem"
                 marginBottom0
                 onClick={() => setMode(EDITING)}
               >
                 <Icon icon="edit">
-                  <FormattedMessage id="stripes-kint-components.edit" />
+                  {
+                    kintIntl.formatKintMessage(
+                      {
+                        id: 'edit',
+                        overrideValue: labelOverrides?.edit,
+                      }
+                    )
+                  }
                 </Icon>
               </Button>,
               <Button
+                key={`${customProperty.name}-action-delete`}
                 buttonStyle="dropdownItem"
                 marginBottom0
                 onClick={() => {
@@ -186,7 +209,14 @@ const CustomPropertiesSettings = ({
                 }}
               >
                 <Icon icon="trash">
-                  <FormattedMessage id="stripes-kint-components.delete" />
+                  {
+                    kintIntl.formatKintMessage(
+                      {
+                        id: 'delete',
+                        overrideValue: labelOverrides?.delete,
+                      }
+                    )
+                  }
                 </Icon>
               </Button>
             ]
@@ -196,12 +226,23 @@ const CustomPropertiesSettings = ({
           id="settings-customProperties-viewPane"
           onClose={() => setCustomProperty()}
           paneTitle={
-            renderViewPaneTitle ?? customProperty?.label ?? customProperty?.name
+            kintIntl.formatKintMessage(
+              {
+                id: 'customProperties.config.viewPaneTitle',
+                overrideValue: labelOverrides?.viewPaneTitle,
+                fallbackMessage: customProperty?.label ?? customProperty?.name,
+              },
+              {
+                name: customProperty?.label ?? customProperty?.name,
+              }
+            )
           }
         >
           <CustomPropertyView
             customProperty={customProperty}
             helpPopovers={helpPopovers}
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
             labelOverrides={labelOverrides}
           />
         </Pane>
@@ -223,9 +264,21 @@ const CustomPropertiesSettings = ({
         modalProps={{
           dismissible: true,
           label: mode === CREATING ?
-            labelOverrides?.modalTitleNew ?? <FormattedMessage id="stripes-kint-components.customProperty.newModal" />
-            :
-            labelOverrides?.modalTitleEdit ?? <FormattedMessage id="stripes-kint-components.customProperty.editModal" />,
+            kintIntl.formatKintMessage(
+              {
+                id: 'customProperties.config.newModal',
+                overrideValue: labelOverrides?.newModalTitle
+              }
+            ) :
+            kintIntl.formatKintMessage(
+              {
+                id: 'customProperties.config.editModal',
+                overrideValue: labelOverrides?.editModalTitle
+              },
+              {
+                name: customProperty?.label ?? customProperty?.name,
+              }
+            ),
           onClose: () => setMode(VIEWING),
           open: (mode === CREATING || mode === EDITING)
         }}
@@ -237,6 +290,8 @@ const CustomPropertiesSettings = ({
         <CustomPropertiesForm
           contextFilterOptions={renderContextFilterOptions}
           helpPopovers={helpPopovers}
+          intlKey={passedIntlKey}
+          intlNS={passedIntlNS}
           labelOverrides={labelOverrides}
           refdata={refdata.map(rdc => ({ label: rdc.desc, value: rdc.id }))}
         />
@@ -244,16 +299,32 @@ const CustomPropertiesSettings = ({
       <ConfirmationModal
         buttonStyle="danger"
         confirmLabel={
-          <FormattedMessage id="stripes-kint-components.delete" />
+          kintIntl.formatKintMessage(
+            {
+              id: 'delete',
+              overrideValue: labelOverrides?.delete,
+            }
+          )
         }
         heading={
-          labelOverrides?.confirmHeading ??
-          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmHeading" />
+          kintIntl.formatKintMessage(
+            {
+              id: 'customProperties.config.delete.confirmHeading',
+              overrideValue: labelOverrides?.confirmHeading
+            }
+          )
         }
-        id="delete-job-confirmation"
+        id="delete-custprop-confirmation"
         message={
-          labelOverrides?.confirmMessage ? labelOverrides.confirmMessage(customProperty) :
-          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} />
+          kintIntl.formatKintMessage(
+            {
+              id: 'customProperties.config.delete.confirmMessage',
+              overrideValue: labelOverrides?.confirmMessage
+            },
+            {
+              name: customProperty?.label ?? customProperty?.name,
+            }
+          )
         }
         onCancel={() => setDeleteModal(false)}
         onConfirm={() => {
@@ -279,6 +350,8 @@ CustomPropertiesSettings.propTypes = {
   })),
   customPropertiesEndpoint: PropTypes.string,
   helpPopovers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   refdataEndpoint: PropTypes.string,
 };

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

@@ -2,15 +2,11 @@ import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { Button, Pane, PaneHeader } from '@folio/stripes-testing';
 import { MemoryRouter } from 'react-router-dom';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
-import { custPropsSettings } from './testResources';
 import CustomPropertiesSettings from './CustomPropertiesSettings';
+import { renderWithKintHarness } from '../../../../test/jest';
 
-jest.mock('../../hooks', () => ({
-  useRefdata: () => [],
-  useMutateCustomProperties: () => [],
-}));
+jest.mock('../../hooks');
 
 jest.mock('../../FormModal/FormModal', () => () => <div>FormModal</div>);
 jest.mock('./CustomPropertiesLookup', () => () => <div>CustomPropertiesLookup</div>);
@@ -21,7 +17,18 @@ describe('CustomPropertiesSettings', () => {
     renderComponent = renderWithKintHarness(
       <MemoryRouter>
         <CustomPropertiesSettings
-          {...custPropsSettings}
+          contextFilterOptions={[
+            {
+              'value': '',
+              'label': 'All'
+            },
+            {
+              'value': 'isNull',
+              'label': 'None'
+            }
+          ]}
+          customPropertiesEndpoint="erm/custprops"
+          refdataEndpoint="erm/refdata"
         />
       </MemoryRouter>
     );
@@ -42,10 +49,10 @@ describe('CustomPropertiesSettings', () => {
   });
 
   it('renders the expected Pane ', async () => {
-    await Pane('Supplementary properties').is({ visible: true });
+    await Pane('Custom properties').is({ visible: true });
   });
 
   it('renders the expected Pane header', async () => {
-    await PaneHeader('Supplementary properties').is({ visible: true });
+    await PaneHeader('Custom properties').is({ visible: true });
   });
 });