@k-int/stripes-kint-components 5.27.0 → 5.28.0

package/src/lib/Settings/EditableRefdataList/README.md

@@ -0,0 +1,26 @@
+# EditableRefdataList
+A component designed to render an editable list of refdata, which is editable if the refdata has property `internal: false`.
+This will create an `ActionList` complete with `edit`, `delete` and `create` actions, and allow the user to edit the `value` and `label` of refdataValues.
+
+## Basic Usage
+```
+import { EditableRefdataList } from '@k-int/stripes-kint-components';
+
+...
+<EditableRefdataList
+  desc="PublicationRequest.RequestStatus"
+  refdataEndpoint="oa/refdata"
+/>
+```
+
+## Props
+
+| Name              | Type    | Description                                                                                                                                                                                                                                                                                                                                           | default                                                                                                | required       |
+|-------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|----------------|
+| afterQueryCalls   | object  | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called after the `delete`/`put`.                                                                                                                                                                                                                        |                                                                                                        | ✕              |
+| allowSpecial      | boolean | A boolean to turn off/on the stripping out of special characters and replacing them with `_`. Generally turning this on will cause problems with queries to KIWT endpoints and internally with Stripes filters, where a refdata value includes `&&`, `                                                                                                |                                                                                                        | `, `\` or `"`. | false | ✕ |
+| catchQueryCalls   | object  | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called with a HTTPError object when the `delete`/`put` calls fail.                                                                                                                                                                                      | `{delete: <Fires a callout of the format "<strong>Error: {label}</strong> was not deleted. {error}">}` |                | ✕ |
+| desc              | String  | A string corresponding to the refdataValue category, usually of the form `DomainClass.Field`. See `useRefdata` for more information.                                                                                                                                                                                                                  |                                                                                                        | ✕              |
+| displayConditions | object  | An object of the form `{delete: false, edit: true, create: true}`, with keys `delete`, `edit` and `create`, and a boolean value. These will each default to true if not specified. These booleans will act as an additional check before rendering the actions for create/delete/edit, as well as whether or not to render the actions column at all. | `{delete: true, edit: true, create: true}`                                                             | ✕              |
+| endpoint          | String  | A string containing the path to the endpoint for refdata                                                                                                                                                                                                                                                                                              |                                                                                                        | ✓              |
+| labelOverrides    | object  | An object containing translation overrides. Currently accepts: `deleteError: (err, object) => { ... output a callout message }`.                                                                                                                                                                                                                      |                                                                                                        | ✕              |

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/EditableSettingsListFieldArray/EditableSettingsListFieldArray.test.js

@@ -2,7 +2,7 @@ import { TestForm } from '@folio/stripes-erm-testing';
 import { FieldArray } from 'react-final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
 jest.mock('../SettingField', () => ({ SettingField: () => <div>SettingField</div> }));

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

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+
+import { useKintIntl } from '../../../../hooks';
+import StaticSettingsField from '../../../StaticSettingsField';
+
+const EditSettingValue = ({
+  currentSetting: setting,
+  input,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  ...props
+}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const fieldLabel = kintIntl.formatKintMessage({
+    id: 'settings.valueFor',
+    overrideValue: labelOverrides?.valueFor
+  }, { name: setting.key });
+
+  return (
+    <StaticSettingsField
+      aria-label={fieldLabel}
+      autofocus
+      name={`${input.name}.value`}
+      setting={setting}
+      {...props}
+    />
+  );
+};
+
+EditSettingValue.propTypes = {
+  currentSetting: PropTypes.shape({
+    settingType: PropTypes.string,
+    key: PropTypes.string,
+  }),
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  refdata: PropTypes.arrayOf(PropTypes.object),
+  templates: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.string
+  }))
+};
+
+export default EditSettingValue;

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/SettingField/EditSettingValue/EditSettingValue.test.js

@@ -2,10 +2,10 @@ import { TestForm } from '@folio/stripes-erm-testing';
 
 import EditSettingValue from './EditSettingValue';
 
-import { renderWithKintHarness } from '../../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
-jest.mock('../../../hooks');
+jest.mock('../../../../hooks');
 
 const stringSetting = {
   id: '12345',
@@ -317,14 +317,14 @@ describe('EditSettingValue', () => {
       });
       test('renders the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' }));
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' })).toBeInTheDocument();
       });
 
       test('renders the expected template options', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('option', { name: '' })); // empty option
-        expect(getByRole('option', { name: 'Test template' }));
-        expect(getByRole('option', { name: 'Red herring template' }));
+        expect(getByRole('option', { name: '' })).toBeInTheDocument(); // empty option
+        expect(getByRole('option', { name: 'Test template' })).toBeInTheDocument();
+        expect(getByRole('option', { name: 'Red herring template' })).toBeInTheDocument();
       });
 
       test('renders expected display item in template dropdown', () => {
@@ -358,14 +358,14 @@ describe('EditSettingValue', () => {
 
       test('renders the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' }));
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' })).toBeInTheDocument();
       });
 
       test('renders the expected template options', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('option', { name: '' })); // empty option
-        expect(getByRole('option', { name: 'Test template' }));
-        expect(getByRole('option', { name: 'Red herring template' }));
+        expect(getByRole('option', { name: '' })).toBeInTheDocument(); // empty option
+        expect(getByRole('option', { name: 'Test template' })).toBeInTheDocument();
+        expect(getByRole('option', { name: 'Red herring template' })).toBeInTheDocument();
       });
 
       test('renders expected display item in template dropdown', () => {

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/SettingField/RenderSettingValue/RenderSettingValue.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { useKintIntl } from '../../../hooks';
+import { useKintIntl } from '../../../../hooks';
 
 const RenderSettingValue = (props) => {
   const {

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/SettingField/RenderSettingValue/RenderSettingValue.test.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import RenderSettingValue from './RenderSettingValue';
 
-import { renderWithKintHarness } from '../../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../../test/jest/helpers';
 
-jest.mock('../../../hooks');
+jest.mock('../../../../hooks');
 
 const stringSetting = {
   id: '12345',

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/SettingField/SettingField.js

@@ -10,10 +10,10 @@ import {
 import EditSettingValue from './EditSettingValue';
 import RenderSettingValue from './RenderSettingValue';
 import { SettingsContext } from '../../contexts';
-import { useKintIntl, useRefdata, useTemplates } from '../../hooks';
-import { toCamelCase } from '../../utils';
+import { useKintIntl, useRefdata, useTemplates } from '../../../hooks';
+import { toCamelCase } from '../../../utils';
 
-import renderHelpTextCSS from '../../../../styles/renderHelpText.css';
+import renderHelpTextCSS from '../../../../../styles/renderHelpText.css';
 
 const SettingField = (settingFieldProps) => {
   const {

package/src/lib/{EditableSettingsList → Settings/EditableSettingsList}/SettingField/SettingField.test.js

@@ -6,7 +6,7 @@ import { Button, TestForm } from '@folio/stripes-erm-testing';
 import { Field } from 'react-final-form';
 import SettingField from './SettingField';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
 const onSave = jest.fn().mockResolvedValue();
@@ -14,7 +14,7 @@ const onSave = jest.fn().mockResolvedValue();
 jest.mock('./EditSettingValue', () => () => <div>EditSettingValue</div>);
 jest.mock('./RenderSettingValue', () => () => <div>RenderSettingValue</div>);
 
-jest.mock('../../hooks');
+jest.mock('../../../hooks');
 
 
 const setting = {

package/src/lib/{RefdataCategoriesSettings → Settings/RefdataCategoriesSettings}/RefdataCategoriesSettings.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import { Button, Col, KeyValue, Pane, PaneHeader, PaneMenu, Row } from '@folio/stripes/components';
 
-import { useActionListRef, useKintIntl } from '../hooks';
+import { useActionListRef, useKintIntl } from '../../hooks';
 
 import EditableRefdataCategoryList from '../EditableRefdataCategoryList';
 import EditableRefdataList from '../EditableRefdataList';
-import FormattedKintMessage from '../FormattedKintMessage';
+import FormattedKintMessage from '../../FormattedKintMessage';
 
 
 const propTypes = {

package/src/lib/{SettingPage → Settings/SettingPage}/SettingPage.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { EditableSettingsList } from '../EditableSettingsList';
 import { SettingsContext } from '../contexts';
 // Importing directly here to avoid cyclic dependency
-import useSettingSection from '../settingsHooks/useSettingSection';
+import useSettingSection from '../hooks/useSettingSection';
 
 const SettingPage = ({
   allowEdit = true,

package/src/lib/{SettingPage → Settings/SettingPage}/SettingPagePane/SettingPagePane.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 
 import { Pane } from '@folio/stripes/components';
-import { toCamelCase } from '../../utils';
-import { useKintIntl } from '../../hooks';
+import { toCamelCase } from '../../../utils';
+import { useKintIntl } from '../../../hooks';
 
 const SettingPagePane = ({
   children,

package/src/lib/{SettingsFormContainer → Settings/SettingsFormContainer}/SettingsFormContainer.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import { useCallout } from '@folio/stripes/core';
-import { useKintIntl, useModConfigEntries, useMutateModConfigEntry } from '../hooks';
+import { useKintIntl, useModConfigEntries, useMutateModConfigEntry } from '../../hooks';
 
 /*
  * API is similar to ConfigManager

package/src/lib/{EditableSettingsList/SettingField/EditSettingValue/EditSettingValue.js → Settings/StaticSettingsField/StaticSettingsField.js}

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Field } from 'react-final-form';
@@ -6,27 +5,17 @@ import {
   Select,
   TextField,
 } from '@folio/stripes/components';
-import RefdataButtons from '../../../RefdataButtons';
-import { useKintIntl } from '../../../hooks';
 
-const EditSettingValue = (props) => {
-  const {
-    currentSetting: setting,
-    input,
-    intlKey: passedIntlKey,
-    intlNS: passedIntlNS,
-    labelOverrides = {},
-    refdata,
-    templates
-  } = props;
-
-  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
-
-  const fieldLabel = kintIntl.formatKintMessage({
-    id: 'settings.valueFor',
-    overrideValue: labelOverrides?.valueFor
-  }, { name: setting.key });
+import RefdataButtons from '../../RefdataButtons';
 
+// This is pretty much EXACTLY equivalent to the EditSettingValue in EditableSettingsList,
+// but slightly tweaked to be more accommodating
+const StaticSettingsField = ({
+  refdata,
+  setting = {},
+  templates,
+  ...fieldProps // Anything else will be passed directly onto the <Field> component
+}) => {
   // Adding default sort to refdata object in ascending order by label
   const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
   const sortedRefdata = refdata?.sort(sortByLabel);
@@ -42,26 +31,23 @@ const EditSettingValue = (props) => {
 
       return (
         <Field
-          aria-label={fieldLabel}
           component={RefdataComponent}
           dataOptions={sortedRefdata}
-          name={`${input.name}.value`}
+          {...fieldProps}
         />
       );
 
     case 'Password':
       return (
         <Field
-          aria-label={fieldLabel}
-          autoFocus
           component={TextField}
-          name={`${input.name}.value`}
           parse={v => v} // Lets us send an empty string instead of 'undefined'
           type="password"
+          {...fieldProps}
         />
       );
     case 'Template': {
-      // Grab refdata values corresponding to setting
+      // Grab template values corresponding to setting
       // eslint-disable-next-line no-case-declarations
       const selectTemplateValues = [
         { value: '', label: '' },
@@ -70,11 +56,10 @@ const EditSettingValue = (props) => {
 
       return (
         <Field
-          aria-label={fieldLabel}
           component={Select}
           dataOptions={selectTemplateValues}
-          name={`${input.name}.value`}
           parse={v => v}
+          {...fieldProps}
         />
       );
     }
@@ -82,27 +67,20 @@ const EditSettingValue = (props) => {
       // If in doubt, go with String
       return (
         <Field
-          aria-label={fieldLabel}
-          autoFocus
           component={TextField}
-          name={`${input.name}.value`}
           parse={v => v} // Lets us send an empty string instead of 'undefined'
+          {...fieldProps}
         />
       );
   }
 };
 
-EditSettingValue.propTypes = {
-  currentSetting: PropTypes.shape({
+StaticSettingsField.propTypes = {
+  setting: PropTypes.shape({
     settingType: PropTypes.string,
     key: PropTypes.string,
   }),
-  input: PropTypes.shape({
-    name: PropTypes.string
-  }),
-  intlKey: PropTypes.string,
-  intlNS: PropTypes.string,
-  labelOverrides: PropTypes.object,
+  name: PropTypes.string.isRequired,
   refdata: PropTypes.arrayOf(PropTypes.object),
   templates: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
@@ -110,4 +88,4 @@ EditSettingValue.propTypes = {
   }))
 };
 
-export default EditSettingValue;
+export default StaticSettingsField;

package/src/lib/Settings/StaticSettingsField/index.js

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

package/src/lib/Settings/constants/index.js

@@ -0,0 +1 @@
+export * from './queryKeys';

package/src/lib/Settings/constants/queryKeys.js

@@ -0,0 +1,5 @@
+export const BASE_APP_SETTING_QUERY_KEY = ['stripes-kint-components', 'useSetting', 'appSettings'];
+export const GET_SETTING_SECTION_QUERY_KEY = (queryParams, sectionName) => [...BASE_APP_SETTING_QUERY_KEY, sectionName, queryParams];
+
+export const BASE_APP_SETTING_MUTATE_KEY = ['stripes-kint-components', 'useSetting', 'putSetting'];
+export const GET_SETTING_SECTION_MUTATE_KEY = (sectionName) => [...BASE_APP_SETTING_MUTATE_KEY, sectionName];

package/src/lib/{settingsHooks → Settings/hooks}/index.js

@@ -1,3 +1,4 @@
 export { default as useSettings } from './useSettings';
 export { default as useSettingSection } from './useSettingSection';
 export { default as useAppSettings } from './useAppSettings';
+export * from './staticSettingsPages';

package/src/lib/Settings/hooks/staticSettingsPages/README.md

@@ -0,0 +1,187 @@
+# Static settings pages
+
+## Premise
+A set of hooks and utilities for use in static settings pages.
+The dynamic AppSettings pages are great for getting a system up and running, but lack any design, and have pretty poor UX.
+
+Instead we often wish to replace these modular dynamic pages with ones statically designed and rendered.
+
+## Usage
+In the example below, one can see how the user might make use of the initialValues and onSubmit from the useStaticSettingsSection
+in order to set up everything needed to handle a static settings section form
+```javascript
+import { Form, Field } from 'react-final-form';
+import { FormattedMessage } from 'react-intl';
+import { useQueryClient } from 'react-query';
+
+import {
+  Button,
+  Label,
+  RadioButton,
+  RadioButtonGroup,
+  Tooltip,
+  IconButton,
+  TextField,
+  Pane,
+  Row,
+  Col
+} from '@folio/stripes/components';
+
+import {
+  useStaticSettingsSection
+} from '@k-int/stripes-kint-components';
+import { SETTINGS_INSTITUTION_ENDPOINT, useILLRefdata } from '@k-int/stripes-ill';
+
+// Some constants for refdata vocab names
+const AUTO_RESPONDER = 'AutoResponder';
+const AUTO_RESPONDER_LOCAL = 'AutoResponder_Local';
+const AUTO_RESPONDER_CANCEL = 'AutoResponder_Cancel';
+const YES_NO = 'YesNo';
+
+const AutoResponderSettings = () => {
+  const queryClient = useQueryClient();
+  const refdataValues = useILLRefdata([AUTO_RESPONDER, AUTO_RESPONDER_LOCAL, AUTO_RESPONDER_CANCEL, YES_NO]);
+  const queryNamespaceBase = ['ILL', 'Settings', 'AutoResponderSettings'];
+
+  const {
+    initialValues,
+    onSubmit,
+  } = useStaticSettingsSection({
+    intlKey: 'ui-ill-ui', // FIXME it's kind of crazy that this isn't set up above in the main App...
+    onSubmitComplete: () => queryClient.invalidateQueries(queryNamespaceBase), // Ensure it updates fields after submits
+    sectionName: 'autoResponder',
+    settingEndpoint: SETTINGS_INSTITUTION_ENDPOINT,
+    getQueryNamespaceGenerator: ({ queryParams }) => [...queryNamespaceBase, queryParams]
+  });
+
+  const renderRefdataSetting = ({
+    helpText,
+    label,
+    name,
+    fieldRefdataValues = [],
+  }) => (
+    <Field
+      component={RadioButtonGroup}
+      label={
+        <Label>
+          {label}
+          {helpText ?
+            <Tooltip text={helpText}>
+              {({ ref, ariaIds }) => (
+                <IconButton
+                  ref={ref}
+                  aria-describedby={ariaIds.sub}
+                  aria-labelledby={ariaIds.text}
+                  icon="info"
+                />
+              )}
+            </Tooltip> :
+            null
+          }
+        </Label>
+      }
+      name={name}
+    >
+      {
+        fieldRefdataValues.map(rdv => (
+          <RadioButton
+            key={`${name}-option-${rdv.value}`}
+            label={rdv.label}
+            value={rdv.value}
+          />
+        ))
+      }
+    </Field>
+  );
+
+  return (
+    <Form
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      render={({ handleSubmit, submitting, pristine, invalid }) => (
+        <form onSubmit={handleSubmit}>
+          <Pane
+            defaultWidth="fill"
+            lastMenu={
+              <Button
+                buttonStyle="primary"
+                disabled={submitting || pristine || invalid}
+                marginBottom0
+                onClick={handleSubmit}
+              >
+                <FormattedMessage id="ui-ill-ui.save" />
+              </Button>
+          }
+            paneTitle={<FormattedMessage id="ui-ill-ui.settings.settingsSection.autoResponder" />}
+          >
+            <Row>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderCancel.help" />,
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderCancel" />,
+                  name: 'auto_responder_cancel',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER_CANCEL)?.values ?? []
+                })}
+              </Col>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderLocal.help" />,
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderLocal" />,
+                  name: 'auto_responder_local',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER_LOCAL)?.values ?? []
+                })}
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderStatus.help" />,
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderStatus" />,
+                  name: 'auto_responder_status',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER)?.values ?? []
+                })}
+              </Col>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.enableLocalAvailabilityCheck" />,
+                  name: 'enable_local_availability_check',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
+                })}
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={6}>
+                <Field
+                  component={TextField}
+                  label={<FormattedMessage id="ui-ill-ui.settings.autoResponder.staleAfter" />}
+                  name="stale_request_2_days"
+                />
+              </Col>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest3ExcludeWeekend.help" />,
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest3ExcludeWeekend" />,
+                  name: 'stale_request_3_exclude_weekend',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
+                })}
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={6}>
+                {renderRefdataSetting({
+                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest1Enabled.help" />,
+                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest1Enabled" />,
+                  name: 'stale_request_1_enabled',
+                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
+                })}
+              </Col>
+            </Row>
+          </Pane>
+        </form>
+      )}
+    />
+  );
+};
+
+export default AutoResponderSettings;
+```

package/src/lib/Settings/hooks/staticSettingsPages/index.js

@@ -0,0 +1,3 @@
+export { default as useSettingsSectionInitalValues } from './useSettingsSectionInitalValues';
+export { default as useSettingCallout } from './useSettingCallout';
+export { default as useStaticSettingsSection } from './useStaticSettingsSection';

package/src/lib/Settings/hooks/staticSettingsPages/useSettingCallout/index.js

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

package/src/lib/Settings/hooks/staticSettingsPages/useSettingCallout/useSettingCallout.js

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+
+import { useCallout } from '@folio/stripes/core';
+import { useKintIntl } from '../../../../hooks';
+import { toCamelCase } from '../../../../utils';
+
+// A hook which can take an array of settings objects and return a
+const useSettingCallout = ({
+  labelOverrides = [],
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+} = {}) => {
+  const callout = useCallout();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  return useCallback(({
+    settings,
+    type
+  }) => {
+    callout.sendCallout({
+      type,
+      timeout: 10000,
+      message: (
+        <ul>
+          {settings.map(({ setting, error: _error }) => {
+            // error will obviously be null for successful updates.
+            // We can choose to surface the errors to the user should we wish
+            const settingLabel = kintIntl.formatKintMessage({
+              id: `settings.${setting.section}.${toCamelCase(setting.key)}`, // Camelcasing to keep in line with how we translate the dynamic settings
+              overrideValue: labelOverrides[setting.key],
+              fallbackMessage: setting.key
+            });
+
+            const message = kintIntl.formatKintMessage({
+              id: `settings.update.${type}`,
+              overrideValue: labelOverrides[type],
+              fallbackMessage: setting.key
+            }, { settingLabel, newValue: setting.value });
+
+            return (
+              <li key={setting.id || setting.key}>
+                {message}
+              </li>
+            );
+          })}
+        </ul>
+      )
+    });
+  }, [callout, kintIntl, labelOverrides]);
+};
+
+export default useSettingCallout;

package/src/lib/Settings/hooks/staticSettingsPages/useSettingsSectionInitalValues/index.js

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