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

package/src/lib/EditableSettingsList/SettingField/RenderSettingValue.js

@@ -1,17 +1,25 @@
-import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { useKintIntl } from '../../hooks';
 
 const RenderSettingValue = (props) => {
   const {
     currentSetting: setting,
-    refdata,
-    templates
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    refdata, // TODO ... can we get away without passing these in now, using useRefdata?
+    templates // TODO ... can we get away without passing these in now, using useTemplates?
   } = props;
 
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const NoCurrentValue = kintIntl.formatKintMessage({
+    id: 'settings.noCurrentValue',
+    overrideValue: labelOverrides?.noCurrentValue
+  });
 
-  const NoCurrentValue = <FormattedMessage id="stripes-kint-components.settings.noCurrentValue" />;
-  const defaultText = `[${intl.formatMessage({ id: 'stripes-kint-components.settings.default' })}]`;
+  const defaultText = `[${kintIntl.formatKintMessage({ id: 'settings.default', overrideValue: labelOverrides?.default })}]`;
   switch (setting.settingType) {
     case 'Refdata': {
       if (setting.value) {
@@ -56,4 +64,13 @@ const RenderSettingValue = (props) => {
   }
 };
 
+RenderSettingValue.propTypes = {
+  currentSetting: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  refdata: PropTypes.arrayOf(PropTypes.object),
+  templates: PropTypes.arrayOf(PropTypes.object),
+};
+
 export default RenderSettingValue;

package/src/lib/EditableSettingsList/SettingField/RenderSettingValue.test.js

@@ -4,6 +4,7 @@ import RenderSettingValue from './RenderSettingValue';
 
 import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
+jest.mock('../../hooks');
 
 const stringSetting = {
   id: '12345',

package/src/lib/EditableSettingsList/SettingField/SettingField.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
+
 import {
   Button,
   Card,
@@ -10,12 +10,16 @@ import {
 import EditSettingValue from './EditSettingValue';
 import RenderSettingValue from './RenderSettingValue';
 import { SettingsContext } from '../../contexts';
-import { useRefdata, useTemplates } from '../../hooks';
-import { renderHelpText, toCamelCase } from '../../utils';
+import { useKintIntl, useRefdata, useTemplates } from '../../hooks';
+import { toCamelCase } from '../../utils';
 
+import renderHelpTextCSS from '../../../../styles/renderHelpText.css';
 
 const SettingField = (settingFieldProps) => {
   const {
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
     onSave,
     settingData: {
       currentSetting
@@ -23,8 +27,8 @@ const SettingField = (settingFieldProps) => {
   } = settingFieldProps;
 
   const [editing, setEditing] = useState(false);
-  const intl = useIntl();
-  const { intlKey, refdataEndpoint, templateEndpoint } = useContext(SettingsContext);
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const { refdataEndpoint, templateEndpoint } = useContext(SettingsContext);
 
   const {
     0: {
@@ -46,12 +50,40 @@ const SettingField = (settingFieldProps) => {
     }
   });
 
+  const renderHelpText = (helpTextId) => {
+    return (
+      <div className={renderHelpTextCSS.help}>
+        {
+          kintIntl.formatKintMessage({
+            id: helpTextId
+          }, {
+            b: (chunks) => <b>{chunks}</b>,
+            i: (chunks) => <i>{chunks}</i>,
+            em: (chunks) => <em>{chunks}</em>,
+            strong: (chunks) => <strong>{chunks}</strong>,
+            span: (chunks) => <span>{chunks}</span>,
+            div: (chunks) => <div>{chunks}</div>,
+            p: (chunks) => <p>{chunks}</p>,
+            ul: (chunks) => <ul>{chunks}</ul>,
+            ol: (chunks) => <ol>{chunks}</ol>,
+            li: (chunks) => <li>{chunks}</li>,
+          })
+        }
+      </div>
+    );
+  };
+
   const renderEditButton = () => {
     const EditText = editing ?
-      <FormattedMessage id="stripes-kint-components.settings.finishEditing" /> :
-      <FormattedMessage id="stripes-kint-components.settings.edit" />;
+      kintIntl.formatKintMessage({
+        id: 'save'
+      }) :
+      kintIntl.formatKintMessage({
+        id: 'edit'
+      });
     return (
       <Button
+        marginBottom0
         onClick={(e) => {
           e.preventDefault();
           return (
@@ -73,19 +105,25 @@ const SettingField = (settingFieldProps) => {
     RenderFunction = EditSettingValue;
   }
 
-  const id = `${intlKey}.settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}.help`;
+  const id = `settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}.help`;
 
 
   const renderHeaderStart = () => {
     const settingName = Object.keys(currentSetting).length > 0 ?
-      <FormattedMessage id={`${intlKey}.settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}`} /> :
-      <FormattedMessage id="stripes-kint-components.settings.settingLoading" />;
-      return (
-        <>
-          {intl.messages[id] && <InfoPopover content={renderHelpText(id)} />}
-          {settingName}
-        </>
-      );
+    kintIntl.formatKintMessage({
+      id: `settings.${toCamelCase(currentSetting.section)}.${toCamelCase(currentSetting.key)}`
+    }) :
+    kintIntl.formatKintMessage({
+      id: 'loading'
+    });
+
+    return (
+      <>
+        {
+          kintIntl.messageExists(id) && <InfoPopover content={renderHelpText(id)} />}
+        {settingName}
+      </>
+    );
   };
 
   return (
@@ -96,6 +134,9 @@ const SettingField = (settingFieldProps) => {
     >
       <RenderFunction
         currentSetting={currentSetting}
+        intlKey={passedIntlKey}
+        intlNS={passedIntlNS}
+        labelOverrides={labelOverrides}
         refdata={refdata}
         templates={templates}
         {...settingFieldProps}

package/src/lib/EditableSettingsList/SettingField/SettingField.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import '@folio/stripes-erm-components/test/jest/__mock__';
+
+import { waitFor } from '@testing-library/react';
+
 import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
 import { Button } from '@folio/stripes-testing';
 import { Field } from 'react-final-form';
@@ -14,10 +16,7 @@ const onSave = jest.fn().mockResolvedValue();
 jest.mock('./EditSettingValue', () => () => <div>EditSettingValue</div>);
 jest.mock('./RenderSettingValue', () => () => <div>RenderSettingValue</div>);
 
-jest.mock('../../hooks', () => ({
-  useRefdata: () => [],
-  useTemplates: () => [],
-}));
+jest.mock('../../hooks');
 
 
 const setting = {
@@ -48,9 +47,9 @@ describe('SettingField', () => {
     );
   });
 
-  it('renders RenderSettingValue', () => {
+  it('renders RenderSettingValue', async () => {
     const { getByText } = renderComponent;
-    expect(getByText('RenderSettingValue')).toBeInTheDocument();
+    await waitFor(async () => expect(await getByText('RenderSettingValue')).toBeInTheDocument());
   });
 
   test('renders the edit button', () => {
@@ -58,23 +57,19 @@ describe('SettingField', () => {
   });
 
   it('clicking edit/save works as expected', async () => {
-    const { getByRole, findByText } = renderComponent;
-
+    const { findByText } = renderComponent;
     // before clicking on edit button, we should be rendering setting value
-    expect(await findByText('RenderSettingValue')).toBeInTheDocument();
+    await waitFor(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
 
     // Clicking edit button
-    const editButton = getByRole('button', { name: /Edit/i });
-    expect(editButton).toBeInTheDocument();
-    userEvent.click(editButton);
+    await Button('Edit').click();
     // Should be rendering the "edit" for a setting value
-    expect(await findByText('EditSettingValue')).toBeInTheDocument();
+    await waitFor(async () => expect(await findByText('EditSettingValue')).toBeInTheDocument());
+
+    // Clicking save button
+    await waitFor(async () => { await Button('Save').click(); });
 
-    // Clicking finish editing button
-    const finishEditing = getByRole('button', { name: /Finish editing/i });
-    expect(finishEditing).toBeInTheDocument();
-    userEvent.click(finishEditing);
     // Should be rendering the setting value again
-    expect(await findByText('RenderSettingValue')).toBeInTheDocument();
+    await waitFor(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
   });
 });

package/src/lib/FormModal/FormModal.js

@@ -1,16 +1,20 @@
 import PropTypes from 'prop-types';
 
 import { Form } from 'react-final-form';
-import { FormattedMessage } from 'react-intl';
 import { Button, Modal, ModalFooter } from '@folio/stripes/components';
+import { useKintIntl } from '../hooks';
 
 const FormModal = ({
   children,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   modalProps: { footer, onClose, ...modalProps },
   onSubmit,
   ...formProps
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   return (
     <Form
       onSubmit={onSubmit}
@@ -38,19 +42,19 @@ const FormModal = ({
                 onClick={handleSubmit}
                 type="submit"
               >
-                {
-                  labelOverrides.save ??
-                  <FormattedMessage id="stripes-kint-components.saveAndClose" />
-                }
+                {kintIntl.formatKintMessage({
+                  id: 'saveAndClose',
+                  overrideValue: labelOverrides.saveAndClose
+                })}
               </Button>
               <Button
                 marginBottom0
                 onClick={handleClose}
               >
-                {
-                  labelOverrides.cancel ??
-                  <FormattedMessage id="stripes-kint-components.cancel" />
-                }
+                {kintIntl.formatKintMessage({
+                  id: 'cancel',
+                  overrideValue: labelOverrides.cancel
+                })}
               </Button>
             </ModalFooter>
           );
@@ -81,6 +85,8 @@ FormModal.propTypes = {
     PropTypes.node,
     PropTypes.func,
   ]),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   modalProps: PropTypes.shape({
     footer: PropTypes.func,

package/src/lib/FormattedKintMessage/FormattedKintMessage.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntlKey } from '../hooks';
+
+// This works analogously to useKintIntl's "formatKintMessage"
+const FormattedKintMessage = ({
+  fallbackMessage,
+  id,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  overrideValue,
+  ...formattedMessageProps
+}) => {
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
+  const intlObj = useIntl();
+
+  if (overrideValue) {
+    // Version 3 is a breaking change, where labelOverrides must be strings.
+    if (typeof overrideValue !== 'string') {
+      throw new Error('Override values must be strings as of stripes-kint-components ^3.0.0');
+    }
+
+    if (intlObj.messages?.[overrideValue]) {
+      // We've been passed a key as an override, return formattedMessage with it
+      return <FormattedMessage id={overrideValue} {...formattedMessageProps} />;
+    }
+    // At this stage we have an overrideValue that's not a key, return it.
+    return overrideValue;
+  }
+
+  // If key does not exist in intl, and we have a specified "fallbackMessage", use that
+
+  // (FallbackMessage works like defaultMessage but with no warning)
+  if (!intlObj.messages?.[`${intlKey}.${id}`] && fallbackMessage) {
+    // Allow fallback message to be an intl key
+    if (intlObj.messages?.[fallbackMessage]) {
+      return <FormattedMessage id={fallbackMessage} {...formattedMessageProps} />;
+    }
+
+    return fallbackMessage;
+  }
+
+  return (<FormattedMessage id={`${intlKey}.${id}`} {...formattedMessageProps} />);
+};
+
+FormattedKintMessage.propTypes = {
+  fallbackMessage: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  overrideValue: PropTypes.string
+};
+
+export default FormattedKintMessage;

package/src/lib/FormattedKintMessage/index.js

@@ -0,0 +1 @@
+export { default } from './FormattedKintMessage';

package/src/lib/IconSelect/IconSelect.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 
 import classnames from 'classnames';
 
-import { FormattedMessage } from 'react-intl';
-
 import {
   IconButton,
   Icon,
@@ -13,6 +11,7 @@ import {
 import css from '../../../styles/IconSelect.css';
 
 import RichSelect, { useSelectedOption } from '../RichSelect';
+import FormattedKintMessage from '../FormattedKintMessage';
 
 // A form component which acts as a "Select for states with corresponding icons"
 const IconSelect = forwardRef(({
@@ -20,21 +19,29 @@ const IconSelect = forwardRef(({
   disabled = false,
   id,
   input,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
   meta,
-  notSet = {
-    icon: 'ellipsis',
-    value: '',
-    label: <FormattedMessage id="stripes-kint-components.iconSelect.notSet" />
-  },
+  notSet,
   onChange,
   options: userOptions = [],
   required = false,
   value
 }, ref) => {
+  const defaultNotSet = {
+    icon: 'ellipsis',
+    value: '',
+    label: <FormattedKintMessage
+      id="notSet"
+      intlKey={passedIntlKey}
+      intlNS={passedIntlNS}
+    />
+  };
+
   // Options with notSet
   const options = [
-    notSet,
+    notSet ?? defaultNotSet,
     ...userOptions
   ];
 
@@ -100,6 +107,8 @@ IconSelect.propTypes = {
   disabled: PropTypes.bool,
   id: PropTypes.string,
   input: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -3,17 +3,23 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Button, Icon } from '@folio/stripes/components';
 import css from '../../../styles/NoResultsMessage.css';
+import { useKintIntl } from '../hooks';
 
 const NoResultsMessage = ({
   icon: userIcon,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   isLoading,
   isError,
   error,
   filterPaneIsVisible,
   label: userLabel,
+  labelOverrides = {},
   searchTerm,
   toggleFilterPane,
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   let icon = 'search';
   let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
 
@@ -53,7 +59,12 @@ const NoResultsMessage = ({
           marginBottom0
           onClick={toggleFilterPane}
         >
-          <FormattedMessage id="stripes-kint-components.noResultsMessage.showFilters" />
+          {
+            kintIntl.formatKintMessage({
+              id: 'showFilters',
+              overrideValue: labelOverrides?.showFilters
+            })
+          }
         </Button>
       )}
     </div>
@@ -64,6 +75,8 @@ NoResultsMessage.propTypes = {
   error: PropTypes.object,
   filterPaneIsVisible: PropTypes.bool.isRequired,
   icon: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   isLoading: PropTypes.bool,
   isError: PropTypes.bool,
   label: PropTypes.oneOfType([
@@ -71,6 +84,7 @@ NoResultsMessage.propTypes = {
     PropTypes.node,
     PropTypes.func
   ]),
+  labelOverrides: PropTypes.object,
   searchTerm: PropTypes.string.isRequired,
   toggleFilterPane: PropTypes.func.isRequired,
 };

package/src/lib/RichSelect/RichSelect.js

@@ -1,19 +1,17 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import {
   Button,
   Dropdown,
+  DropdownButton,
   DropdownMenu,
-  Icon,
-  // IconButton,
   nativeChangeFieldValue as nativeChangeField,
   Label,
 } from '@folio/stripes/components';
 
 import css from '../../../styles/RichSelect.css';
+import FormattedKintMessage from '../FormattedKintMessage';
 
 const RichSelect = forwardRef(({
   ariaLabel,
@@ -21,6 +19,8 @@ const RichSelect = forwardRef(({
   dropdownProps = {},
   id,
   input: formInput = {},
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
   meta,
   onChange,
@@ -58,11 +58,11 @@ const RichSelect = forwardRef(({
     selectedOption
   }));
 
-  const defaultRenderTrigger = ({ onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => {
+  const defaultRenderTrigger = ({ onToggle, triggerRef, keyHandler, ariaProps, getTriggerProps }) => {
     return (
-      <Button
+      <DropdownButton
         ref={triggerRef}
-        buttonClass={css.iconButtonText}
+        buttonClass={css.triggerButton}
         buttonStyle="none"
         disabled={disabled}
         marginBottom0
@@ -72,41 +72,19 @@ const RichSelect = forwardRef(({
         type="button"
         {...getTriggerProps()}
         {...ariaProps}
-      >
-        <Icon
-          icon={open ? 'caret-up' : 'caret-down'}
-          iconPosition="end"
-        >
-          {
-            selectedOption?.label ??
-            selectedOption?.value ??
-            (internalValue || null) ??
-            placeholder ??
-            <FormattedMessage id="stripes-kint-components.richSelect.placeholder" />
-          }
-        </Icon>
-      </Button>
-      // Awaiting result of conversation about whether we want to allow labels on IconButtons
-      /* <IconButton
-        ref={triggerRef}
-        disabled={disabled}
-        icon={open ? 'caret-up' : 'caret-down'}
-        iconPosition="end"
-        marginBottom0
-        onClick={onToggle}
-        onKeyDown={keyHandler}
-        type="button"
-        {...getTriggerProps()}
-        {...ariaProps}
       >
         {
           selectedOption?.label ??
           selectedOption?.value ??
-          (internalValue ? internalValue : null) ??
+          (internalValue || null) ??
           placeholder ??
-          <FormattedMessage id="stripes-kint-components.richSelect.placeholder" />
+          <FormattedKintMessage
+            id="pleaseSelectOption"
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
+          />
         }
-      </IconButton> */
+      </DropdownButton>
     );
   };
 
@@ -202,6 +180,8 @@ RichSelect.propTypes = {
   dropdownProps: PropTypes.object,
   id: PropTypes.string,
   input: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -22,7 +22,7 @@ import {
 } from '@folio/stripes/components';
 
 import { generateKiwtQuery } from '../utils';
-import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
+import { useKintIntl, useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
 import TableBody from './TableBody';
 
@@ -34,11 +34,15 @@ const SASQLookupComponent = (props) => {
     FilterPaneHeaderComponent = () => null,
     filterPaneProps,
     id,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
     mainPaneProps,
     noSearchField,
     RenderBody,
     sasqProps,
   } = props;
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
@@ -195,12 +199,20 @@ const SASQLookupComponent = (props) => {
                 null}
                 noOverflow
                 padContent={false}
-                paneSub={<FormattedMessage id="stripes-kint-components.sasqLookupComponent.mainPane.found" values={{ total: data?.total }} />}
+                paneSub={
+                  kintIntl.formatKintMessage({
+                    id: 'found#Values',
+                    overrideValue: labelOverrides?.foundValues
+                  }, { total: data?.total })
+                }
                 {...mainPaneProps}
               >
                 <Body
                   data={data}
                   filterPaneVisible={filterPaneVisible}
+                  intlKey={passedIntlKey}
+                  intlNS={passedIntlNS}
+                  labelOverrides={labelOverrides}
                   query={query}
                   toggleFilterPane={toggleFilterPane}
                   {...restOfInfiniteQueryProps}
@@ -240,6 +252,9 @@ SASQLookupComponent.propTypes = {
   ]),
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
   location: PropTypes.object,
   mainPaneProps: PropTypes.object,
   match: PropTypes.object,

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -12,8 +12,11 @@ const TableBody = ({
   error,
   fetchNextPage,
   filterPaneVisible,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   isError,
   isLoading,
+  labelOverrides = {},
   match,
   mclProps,
   onSort,
@@ -48,9 +51,12 @@ const TableBody = ({
         <NoResultsMessage
           {...{
             error,
+            filterPaneIsVisible: filterPaneVisible,
+            intlKey: passedIntlKey,
+            intlNS: passedIntlNS,
             isError,
             isLoading,
-            filterPaneIsVisible: filterPaneVisible,
+            labelOverrides,
             searchTerm: query.query,
             toggleFilterPane
           }}
@@ -81,8 +87,11 @@ TableBody.propTypes = {
   fetchNextPage: PropTypes.func,
   filterPaneVisible: PropTypes.bool,
   history: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   isError: PropTypes.bool,
   isLoading: PropTypes.bool,
+  labelOverrides: PropTypes.object,
   location: PropTypes.object,
   match: PropTypes.object,
   mclProps: PropTypes.object,