@k-int/stripes-kint-components 5.24.1 → 5.25.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [5.25.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.25.0...v5.25.1) (2025-08-27)
+
+
+### Bug Fixes
+
+* **deprecationWarnings:** Add deprecation warnings to mod-config hooks and components ([716b3cf](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/716b3cf999635dc8e01ef19afeab043012d63907))
+* **deps:** update dependency zustand to v5 ([bfd0134](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/bfd013486176db77c94c5db77dd6bbda661d17b9))
+
+# [5.25.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.24.1...v5.25.0) (2025-08-06)
+
+
+### Features
+
+* SASQRoute ViewComponent QueryPromise/ResponseTransform -- ERM-3771 ([ce4eba3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/ce4eba3162628bfd89940b60ddf9b41b9beb093f))
+
 ## [5.24.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.24.0...v5.24.1) (2025-07-15)
 
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -390,6 +390,7 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
         className: _ActionListFieldArray.default.headerText,
         children: label
       }), !hideCreateButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        buttonStyle: "primary",
         disabled: !!editing || !createCallback,
         marginBottom0: true,
         onClick: handleClickCreate,

package/es/lib/SASQViewComponent/SASQViewComponent.js

@@ -18,13 +18,22 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     location,
     match,
     path,
+    viewQueryPromise = _ref2 => {
+      let {
+        endpoint,
+        ky,
+        resourceId
+      } = _ref2;
+      return ky.get(`${endpoint}/${resourceId}`).json();
+    },
+    viewResponseTransform = response => response,
     ViewComponent,
-    viewQueryNamespaceGenerator = _ref2 => {
+    viewQueryNamespaceGenerator = _ref3 => {
       let {
         namespace,
         componentId,
         id: passedId
-      } = _ref2;
+      } = _ref3;
       const queryNamespace = [namespace, 'SASQ'];
       if (componentId) {
         queryNamespace.push(componentId);
@@ -51,8 +60,20 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     endpoint,
     id: match?.params?.id,
     match
-  }), () => ky(`${endpoint}/${match?.params?.id}`).json(), {
-    enabled: !!match?.params?.id
+  }), () => {
+    return viewQueryPromise({
+      ky,
+      resourceId: match?.params?.id,
+      endpoint: fetchParameters.endpoint
+    });
+  }, {
+    enabled: !!match?.params?.id,
+    // select is a parameter supported by useQuery to transform the response
+    // Could be possible to instead pass this down along with the queryOptions
+    // Additionally this is assuming the viewResponseTransform is a func as opposed to an object
+    select: selectData => {
+      return viewResponseTransform(selectData);
+    }
   });
   (0, _react.useImperativeHandle)(ref, () => ({
     queryProps: {
@@ -75,6 +96,8 @@ SASQViewComponent.propTypes = {
   id: _propTypes.default.string,
   location: _propTypes.default.object,
   match: _propTypes.default.object,
+  viewQueryPromise: _propTypes.default.func,
+  viewResponseTransform: _propTypes.default.func,
   path: _propTypes.default.string.isRequired,
   ViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
 };

package/es/lib/SearchKeyControl/SearchKeyControl.test.js

@@ -4,6 +4,7 @@ var _react = require("react");
 var _react2 = require("@folio/jest-config-stripes/testing-library/react");
 var _stripesErmTesting = require("@folio/stripes-erm-testing");
 var _SearchKeyControl = _interopRequireDefault(require("./SearchKeyControl"));
+var _jest = require("../../../test/jest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const mockUseQIndex = jest.fn();
@@ -17,7 +18,7 @@ describe('SearchKeyControl', () => {
       mockUseQIndex.mockImplementation(() => {
         return (0, _react.useState)();
       });
-      (0, _stripesErmTesting.renderWithIntl)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
+      (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
         options: [{
           label: 'Opt 1',
           key: 'opt1'
@@ -89,7 +90,7 @@ describe('SearchKeyControl', () => {
       mockUseQIndex.mockImplementation(() => {
         return (0, _react.useState)('opt1,opt3');
       });
-      (0, _stripesErmTesting.renderWithIntl)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
+      (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
         options: [{
           label: 'Opt 1',
           key: 'opt1'

package/es/lib/SettingsFormContainer/SettingsFormContainer.js

@@ -11,6 +11,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
  * API is similar to ConfigManager
+ *
+ * DEPRECATED -- As far as I can see this is now unused anyway
+ * KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
  */const SettingsFormContainer = _ref => {
   let {
     ConfigFormComponent,
@@ -24,6 +27,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     // We don't use this currently but it's here for future reference
     ...rest
   } = _ref;
+  // eslint-disable-next-line no-console
+  console.warn('SettingsFormContainer is deprecated, as it utilises mod-config');
   const callout = (0, _core.useCallout)();
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
 

package/es/lib/hooks/useModConfigEntries.js

@@ -10,6 +10,8 @@ var _core = require("@folio/stripes/core");
 var _utils = require("../utils");
 var _endpoints = require("../constants/endpoints");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// DEPRECATED -- As far as I can see this is now unused anyway
+// KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
 const useModConfigEntries = _ref => {
   let {
     configName,
@@ -17,6 +19,8 @@ const useModConfigEntries = _ref => {
     namespaceAppend,
     queryParams
   } = _ref;
+  // eslint-disable-next-line no-console
+  console.warn('useModConfigEntries is deprecated, as it utilises mod-config');
   const ky = (0, _core.useOkapiKy)();
   const query = `?query=(module=${moduleName} and configName=${configName})`;
   const path = `${_endpoints.MOD_SETTINGS_ENDPOINT}${query}`;

package/es/lib/hooks/useMutateModConfigEntry.js

@@ -9,12 +9,16 @@ var _core = require("@folio/stripes/core");
 var _utils = require("../utils");
 var _endpoints = require("../constants/endpoints");
 // This will simply take in some information and decide whether to mutate via POST or via PUT
+// DEPRECATED -- As far as I can see this is now unused anyway
+// KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
 const useMutateModConfigEntry = _ref => {
   let {
     configName,
     moduleName,
     id
   } = _ref;
+  // eslint-disable-next-line no-console
+  console.warn('useMutateModConfigEntry is deprecated, as it utilises mod-config');
   const ky = (0, _core.useOkapiKy)();
   const queryClient = (0, _reactQuery.useQueryClient)();
   const baseNamespace = (0, _utils.modConfigEntriesQueryKey)({

package/es/lib/utils/generateKiwtQueryParams/generateKiwtQueryParams.test.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _generateKiwtQuery = _interopRequireDefault(require("../generateKiwtQuery"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// FIXME we need to test more than this
+describe('generateKiwtQueryParams', () => {
+  describe('generateKiwtQueryParams nested group filters', () => {
+    test('EXAMPLE nested AND shape', () => {
+      expect((0, _generateKiwtQuery.default)({
+        filters: [{
+          groupValues: {
+            AND: [{
+              path: 'wobble',
+              value: 'test'
+            }, {
+              groupValues: {
+                OR: [{
+                  value: 'test2'
+                }, {
+                  path: 'sup',
+                  value: 'test3'
+                }, {
+                  groupValues: {
+                    AND: [{
+                      value: 'test4'
+                    }, {
+                      path: 'help',
+                      comparator: '!=',
+                      value: 'false'
+                    }]
+                  }
+                }]
+              }
+            }]
+          }
+        }]
+      }, {}, false)).toEqual('?filters=wobble==test&&(test2||sup==test3||(test4&&help!=false))&stats=true');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.24.1",
+  "version": "5.25.1",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -25,7 +25,7 @@
     "@rehooks/local-storage": "^2.4.4",
     "compose-function": "^3.0.3",
     "react-resize-detector": "^11.0.0",
-    "zustand": "^4.0.0"
+    "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
@@ -66,10 +66,8 @@
     "react-dom": "^18.2.0",
     "react-intl": "^6.4.4 || ^7.1.5",
     "react-query": "^3.6.0",
-    "react-redux": "^9.0.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "redux": "^5.0.0",
     "redux-observable": "^2.0.0",
     "regenerator-runtime": "^0.14.0",
     "rxjs": "^7.0.0",

package/src/lib/ActionList/ActionListFieldArray.js

@@ -421,6 +421,7 @@ const ActionListFieldArray = forwardRef(({
         </Headline>
         {!hideCreateButton &&
           <Button
+            buttonStyle="primary"
             disabled={!!editing || !createCallback}
             marginBottom0
             onClick={handleClickCreate}

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -65,7 +65,8 @@ const SASQLookupComponent = forwardRef((props, ref) => {
 
       return queryNamespace;
     },
-    lookupQueryPromise = ({ endpoint, ky, queryParams }) => ky.get(`${endpoint}${queryParams}`).json(),
+    lookupQueryPromise = ({ endpoint, ky, queryParams }) =>
+      ky.get(`${endpoint}${queryParams}`).json(),
     lookupResponseTransform = (response) => response, // Function to transform the response from the query
     mainPaneProps = {},
     mclProps = {},
@@ -125,7 +126,8 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
   const queryParams = useMemo(
-    () => queryParameterGenerator(
+    () =>
+      queryParameterGenerator(
         // With Typescript this would be a type of SASQ_MAP, and so totalRecords is a valid property in our new shape
         // In generateKiwtQueryParams we can choose to ignore totalRecords, which while being a valid property is not necessary for KIWT queries
         {
@@ -135,7 +137,13 @@ const SASQLookupComponent = forwardRef((props, ref) => {
         },
         query ?? {}
       ),
-    [count, currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]
+    [
+      count,
+      currentPage,
+      fetchParameters.SASQ_MAP,
+      query,
+      queryParameterGenerator,
+    ]
   );
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(
@@ -157,7 +165,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       return lookupQueryPromise({
         ky,
         queryParams,
-        endpoint: fetchParameters.endpoint
+        endpoint: fetchParameters.endpoint,
       });
     },
     {

package/src/lib/SASQViewComponent/SASQViewComponent.js

@@ -3,69 +3,88 @@ import PropTypes from 'prop-types';
 
 import { useQuery } from 'react-query';
 
-import {
-  useNamespace,
-  useOkapiKy
-} from '@folio/stripes/core';
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 
-const SASQViewComponent = forwardRef(({
-  fetchParameters,
-  history,
-  id,
-  location,
-  match,
-  path,
-  ViewComponent,
-  viewQueryNamespaceGenerator = ({ namespace, componentId, id: passedId }) => {
-    const queryNamespace = [namespace, 'SASQ'];
-    if (componentId) {
-      queryNamespace.push(componentId);
-    }
-    queryNamespace.push('view');
-    queryNamespace.push(passedId);
+const SASQViewComponent = forwardRef(
+  (
+    {
+      fetchParameters,
+      history,
+      id,
+      location,
+      match,
+      path,
+      viewQueryPromise = ({ endpoint, ky, resourceId }) =>
+        ky.get(`${endpoint}/${resourceId}`).json(),
+      viewResponseTransform = (response) => response,
+      ViewComponent,
+      viewQueryNamespaceGenerator = ({
+        namespace,
+        componentId,
+        id: passedId,
+      }) => {
+        const queryNamespace = [namespace, 'SASQ'];
+        if (componentId) {
+          queryNamespace.push(componentId);
+        }
+        queryNamespace.push('view');
+        queryNamespace.push(passedId);
 
-    return queryNamespace;
-  },
-  ...props
-}, ref) => {
-  const { 0: namespace } = useNamespace();
+        return queryNamespace;
+      },
+      ...props
+    },
+    ref
+  ) => {
+    const { 0: namespace } = useNamespace();
 
-  // If itemEndpoint is available, use that, otherwise use standard endpoint
-  const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
+    // If itemEndpoint is available, use that, otherwise use standard endpoint
+    const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
 
-  const ky = useOkapiKy();
-  const { data = {}, ...rest } = useQuery(
-    viewQueryNamespaceGenerator({
-      componentId: id,
-      namespace,
-      endpoint,
-      id: match?.params?.id,
-      match,
-    }),
-    () => ky(`${endpoint}/${match?.params?.id}`).json(),
-    {
-      enabled: !!match?.params?.id
-    }
-  );
+    const ky = useOkapiKy();
+    const { data = {}, ...rest } = useQuery(
+      viewQueryNamespaceGenerator({
+        componentId: id,
+        namespace,
+        endpoint,
+        id: match?.params?.id,
+        match,
+      }),
+      () => {
+        return viewQueryPromise({
+          ky,
+          resourceId: match?.params?.id,
+          endpoint: fetchParameters.endpoint,
+        });
+      },
+      {
+        enabled: !!match?.params?.id,
+        // select is a parameter supported by useQuery to transform the response
+        // Could be possible to instead pass this down along with the queryOptions
+        // Additionally this is assuming the viewResponseTransform is a func as opposed to an object
+        select: (selectData) => {
+          return viewResponseTransform(selectData);
+        },
+      }
+    );
 
-  useImperativeHandle(ref, () => (
-    {
+    useImperativeHandle(ref, () => ({
       queryProps: {
         data,
-        ...rest
-      }
-    }
-  ));
+        ...rest,
+      },
+    }));
 
-  return (
-    <ViewComponent
-      onClose={() => history.push(`${path}${location.search}`)}
-      queryProps={{ ...rest }}
-      resource={data}
-      {...props}
-    />
-  );
-});
+    return (
+      <ViewComponent
+        onClose={() => history.push(`${path}${location.search}`)}
+        queryProps={{ ...rest }}
+        resource={data}
+        {...props}
+      />
+    );
+  }
+);
 
 SASQViewComponent.propTypes = {
   fetchParameters: PropTypes.object,
@@ -73,11 +92,10 @@ SASQViewComponent.propTypes = {
   id: PropTypes.string,
   location: PropTypes.object,
   match: PropTypes.object,
+  viewQueryPromise: PropTypes.func,
+  viewResponseTransform: PropTypes.func,
   path: PropTypes.string.isRequired,
-  ViewComponent: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node
-  ]),
+  ViewComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };
 
 export default SASQViewComponent;

package/src/lib/SearchKeyControl/SearchKeyControl.test.js

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 
 import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
-import { renderWithIntl, Checkbox } from '@folio/stripes-erm-testing';
+import { Checkbox } from '@folio/stripes-erm-testing';
 
 import SearchKeyControl from './SearchKeyControl';
+import { renderWithKintHarness } from '../../../test/jest';
 
 const mockUseQIndex = jest.fn();
 
@@ -19,7 +20,7 @@ describe('SearchKeyControl', () => {
         return useState();
       });
 
-      renderWithIntl(
+      renderWithKintHarness(
         <SearchKeyControl
           options={[
             {
@@ -87,7 +88,7 @@ describe('SearchKeyControl', () => {
         return useState('opt1,opt3');
       });
 
-      renderWithIntl(
+      renderWithKintHarness(
         <SearchKeyControl
           options={[
             {

package/src/lib/SettingsFormContainer/SettingsFormContainer.js

@@ -5,6 +5,9 @@ import { useKintIntl, useModConfigEntries, useMutateModConfigEntry } from '../ho
 
 /*
  * API is similar to ConfigManager
+ *
+ * DEPRECATED -- As far as I can see this is now unused anyway
+ * KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
  */
 const SettingsFormContainer = ({
   ConfigFormComponent,
@@ -17,6 +20,9 @@ const SettingsFormContainer = ({
   scope, // We don't use this currently but it's here for future reference
   ...rest
 }) => {
+  // eslint-disable-next-line no-console
+  console.warn('SettingsFormContainer is deprecated, as it utilises mod-config');
+
   const callout = useCallout();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 

package/src/lib/hooks/useModConfigEntries.js

@@ -5,12 +5,17 @@ import { useOkapiKy } from '@folio/stripes/core';
 import { modConfigEntriesQueryKey, parseModConfigEntry } from '../utils';
 import { MOD_SETTINGS_ENDPOINT } from '../constants/endpoints';
 
+// DEPRECATED -- As far as I can see this is now unused anyway
+// KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
 const useModConfigEntries = ({
   configName,
   moduleName,
   namespaceAppend,
   queryParams
 }) => {
+  // eslint-disable-next-line no-console
+  console.warn('useModConfigEntries is deprecated, as it utilises mod-config');
+
   const ky = useOkapiKy();
 
   const query = `?query=(module=${moduleName} and configName=${configName})`;

package/src/lib/hooks/useMutateModConfigEntry.js

@@ -6,11 +6,16 @@ import { modConfigEntriesQueryKey } from '../utils';
 import { MOD_SETTINGS_ENDPOINT } from '../constants/endpoints';
 
 // This will simply take in some information and decide whether to mutate via POST or via PUT
+// DEPRECATED -- As far as I can see this is now unused anyway
+// KInt modules are swapping to AppSettings instead of mod-settings, so no centralised components should be needed
 const useMutateModConfigEntry = ({
   configName,
   moduleName,
   id
 }) => {
+  // eslint-disable-next-line no-console
+  console.warn('useMutateModConfigEntry is deprecated, as it utilises mod-config');
+
   const ky = useOkapiKy();
   const queryClient = useQueryClient();
 

package/src/lib/utils/generateKiwtQueryParams/generateKiwtQueryParams.test.js

@@ -0,0 +1,27 @@
+import generateKiwtQuery from '../generateKiwtQuery';
+
+// FIXME we need to test more than this
+describe('generateKiwtQueryParams', () => {
+  describe('generateKiwtQueryParams nested group filters', () => {
+    test('EXAMPLE nested AND shape', () => {
+      expect(generateKiwtQuery({
+        filters: [{
+          groupValues: {
+            AND: [
+              { path: 'wobble', value: 'test' },
+              {
+                groupValues: {
+                  OR: [
+                    { value: 'test2' },
+                    { path: 'sup', value: 'test3' },
+                    { groupValues: { AND: [{ value: 'test4' }, { path: 'help', comparator: '!=', value: 'false' }] } },
+                  ]
+                }
+              },
+            ]
+          }
+        }]
+      }, {}, false)).toEqual('?filters=wobble==test&&(test2||sup==test3||(test4&&help!=false))&stats=true');
+    });
+  });
+});