@k-int/stripes-kint-components 5.33.2 → 5.34.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [5.34.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.33.2...v5.34.0) (2026-03-18)
+
+
+### Features
+
+* **useCustProps:** Implement a 'parallel batched fetch' approach for retrieving custom properties in Agreements and Licenses -- ERM-3953 ([e68465a](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/e68465a22dd85becc971857200ce645ca388e03c))
+
 ## [5.33.2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.33.1...v5.33.2) (2026-03-12)
 
 

package/es/lib/CustomProperties/Config/CustomPropertiesLookup.js

@@ -30,13 +30,12 @@ const CustomPropertiesLookup = _ref => {
   });
   const [selectedContext, setSelectedContext] = (0, _react.useState)();
   const {
-    data: custprops,
+    custprops,
     isLoading
-  } = (0, _hooks.useCustomProperties)({
+  } = (0, _hooks.useCustProps)({
     endpoint,
     nsValues,
     queryParams,
-    returnQueryObject: true,
     ctx: selectedContext,
     options: {
       sort: [{

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

@@ -15,6 +15,7 @@ var _CustomPropertiesLookup = _interopRequireDefault(require("./CustomProperties
 var _CustomPropertyView = _interopRequireDefault(require("./CustomPropertyView"));
 var _CustomPropertyForm = _interopRequireDefault(require("./CustomPropertyForm"));
 var _hooks = require("../../hooks");
+var _useCustProps = require("../../hooks/useCustProps");
 var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -83,7 +84,7 @@ const CustomPropertiesSettings = _ref => {
     afterQueryCalls: {
       put: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(_useCustProps.CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty(res);
         if (afterQueryCalls?.put) {
           afterQueryCalls.put(res);
@@ -91,7 +92,7 @@ const CustomPropertiesSettings = _ref => {
       },
       post: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(_useCustProps.CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty(res);
         if (afterQueryCalls?.post) {
           afterQueryCalls.post(res);
@@ -99,7 +100,7 @@ const CustomPropertiesSettings = _ref => {
       },
       delete: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(_useCustProps.CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty();
         if (afterQueryCalls?.delete) {
           afterQueryCalls.delete(res);

package/es/lib/CustomProperties/Edit/CustomPropertiesEditCtx.js

@@ -48,12 +48,11 @@ const CustomPropertiesEditCtx = _ref => {
     });
   };
   const {
-    data: custprops,
+    custprops,
     isLoading
-  } = (0, _hooks.useCustomProperties)({
+  } = (0, _hooks.useCustProps)({
     ctx,
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       filters: [{
         path: 'retired',

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -30,11 +30,10 @@ const CustomPropertiesFilter = _ref => {
   const closeEditModal = () => setEditingFilters(false);
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   const {
-    data: custprops,
+    custprops,
     isLoading
-  } = (0, _hooks.useCustomProperties)({
+  } = (0, _hooks.useCustProps)({
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       sort: [{
         path: 'ctx'

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -2,6 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
 var _stripesErmTesting = require("@folio/stripes-erm-testing");
 var _testResources = require("./testResources");
 var _CustomPropertiesFilter = _interopRequireDefault(require("./CustomPropertiesFilter"));
@@ -37,10 +38,19 @@ describe('CustomPropertiesFilter', () => {
       id: 'accordion-toggle-button-clickable-custprop-filter'
     }).exists();
   });
-  it('renders CustomPropertiesFilterForm component ', () => {
-    const {
-      getByText
-    } = renderComponent;
-    expect(getByText('CustomPropertiesFilterForm')).toBeInTheDocument();
+  describe.each('Opening the Custom properties accordion', () => {
+    beforeEach(async () => {
+      await (0, _react2.waitFor)(async () => {
+        await (0, _stripesErmTesting.Accordion)({
+          id: 'clickable-custprop-filter'
+        }).click();
+      });
+    });
+    it('renders CustomPropertiesFilterForm component ', () => {
+      const {
+        getByText
+      } = renderComponent;
+      expect(getByText('CustomPropertiesFilterForm')).toBeInTheDocument();
+    });
   });
 });

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -48,12 +48,11 @@ const CustomPropertiesViewCtx = _ref => {
     });
   };
   const {
-    data: custprops,
+    custprops,
     isLoading
-  } = (0, _hooks.useCustomProperties)({
+  } = (0, _hooks.useCustProps)({
     ctx,
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       sort: [{
         path: 'retired'

package/es/lib/hooks/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   useQIndex: true,
   useKiwtFieldArray: true,
   useCustomProperties: true,
+  useCustProps: true,
   useInvalidateRefdata: true,
   useSASQQueryMeta: true,
   useModConfigEntries: true,
@@ -23,7 +24,8 @@ var _exportNames = {
   useMutateCustomProperties: true,
   useMutateModConfigEntry: true,
   usePrevNextPagination: true,
-  useStandaloneSASQQueryParameter: true
+  useStandaloneSASQQueryParameter: true,
+  useParallelBatchFetch: true
 };
 Object.defineProperty(exports, "useActionListRef", {
   enumerable: true,
@@ -37,6 +39,12 @@ Object.defineProperty(exports, "useActiveElement", {
     return _useActiveElement.default;
   }
 });
+Object.defineProperty(exports, "useCustProps", {
+  enumerable: true,
+  get: function () {
+    return _useCustProps.default;
+  }
+});
 Object.defineProperty(exports, "useCustomProperties", {
   enumerable: true,
   get: function () {
@@ -109,6 +117,12 @@ Object.defineProperty(exports, "useMutateRefdataValue", {
     return _useMutateRefdataValue.default;
   }
 });
+Object.defineProperty(exports, "useParallelBatchFetch", {
+  enumerable: true,
+  get: function () {
+    return _useParallelBatchFetch.default;
+  }
+});
 Object.defineProperty(exports, "usePrevNextPagination", {
   enumerable: true,
   get: function () {
@@ -154,6 +168,7 @@ var _useLocalStorageState = _interopRequireDefault(require("./useLocalStorageSta
 var _useQIndex = _interopRequireDefault(require("./useQIndex"));
 var _useKiwtFieldArray = _interopRequireDefault(require("./useKiwtFieldArray"));
 var _useCustomProperties = _interopRequireDefault(require("./useCustomProperties"));
+var _useCustProps = _interopRequireDefault(require("./useCustProps"));
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
 var _useSASQQueryMeta = _interopRequireDefault(require("./useSASQQueryMeta"));
 var _useModConfigEntries = _interopRequireDefault(require("./useModConfigEntries"));
@@ -165,6 +180,7 @@ var _useMutateCustomProperties = _interopRequireDefault(require("./useMutateCust
 var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
 var _usePrevNextPagination = _interopRequireDefault(require("./usePrevNextPagination"));
 var _useStandaloneSASQQueryParameter = _interopRequireDefault(require("./useStandaloneSASQQueryParameter"));
+var _useParallelBatchFetch = _interopRequireDefault(require("./useParallelBatchFetch"));
 var _intlHooks = require("./intlHooks");
 Object.keys(_intlHooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/es/lib/hooks/useCustProps.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CUSTPROPS_QUERY_KEY_BASE = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useParallelBatchFetch = _interopRequireDefault(require("./useParallelBatchFetch"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CUSTPROPS_QUERY_KEY_BASE = exports.CUSTPROPS_QUERY_KEY_BASE = ['stripes-kint-components', 'useCustProps', 'custprops'];
+const useCustProps = _ref => {
+  let {
+    endpoint,
+    ctx,
+    nsValues = {
+      sort: 'id'
+    },
+    options = {},
+    queryParams = {},
+    batchLimit = Infinity,
+    batchSize = 100,
+    concurrentRequests = 5
+  } = _ref;
+  const custPropOptions = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    sort: [{
+      path: 'weight'
+    }, {
+      path: 'label'
+    }],
+    filters: [],
+    ...options
+  };
+  if (Array.isArray(ctx)) {
+    custPropOptions.filters.push({
+      values: ctx.map(c => c === 'isNull' ? 'ctx isNull' : `ctx==${c}`)
+    });
+  } else if (ctx === 'isNull') {
+    custPropOptions.filters.push({
+      value: 'ctx isNull'
+    });
+  } else if (ctx) {
+    custPropOptions.filters.push({
+      path: 'ctx',
+      value: ctx
+    });
+  }
+  const {
+    items: custprops = [],
+    isLoading = true,
+    total = 0
+  } = (0, _useParallelBatchFetch.default)({
+    endpoint,
+    BATCH_LIMIT: batchLimit,
+    BATCH_SIZE: batchSize,
+    CONCURRENT_REQUESTS: concurrentRequests,
+    batchParams: custPropOptions,
+    nsValues,
+    generateQueryKey: _ref2 => {
+      let {
+        endpoint: queryEndpoint,
+        offset,
+        paramsArray
+      } = _ref2;
+      return [...CUSTPROPS_QUERY_KEY_BASE, ctx, queryEndpoint, offset, paramsArray];
+    },
+    queryOptions: queryParams
+  });
+  return {
+    custprops,
+    isLoading,
+    total
+  };
+};
+useCustProps.propTypes = {
+  endpoint: _propTypes.default.string,
+  ctx: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  nsValues: _propTypes.default.object,
+  options: _propTypes.default.object,
+  queryParams: _propTypes.default.object,
+  batchLimit: _propTypes.default.number,
+  batchSize: _propTypes.default.number,
+  concurrentRequests: _propTypes.default.number
+};
+var _default = exports.default = useCustProps;

package/es/lib/hooks/useParallelBatchFetch.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactQuery = require("react-query");
+var _lodash = require("lodash");
+var _core = require("@folio/stripes/core");
+var _utils = require("../utils");
+// A hook to do the same thing as batch fetching > 100 resources, but parallelising it.
+
+// Only defining defaults to ward of "magic number" sonarlint rule -.-
+const CONCURRENT_REQUESTS_DEFAULT = 5;
+const MAX_BATCH_SIZE = 100;
+const DEFAULT_BATCH_LIMIT = Infinity;
+
+// CONCURRENT_REQUESTS and BATCH_SIZE can be tweaked here, but implementor beware
+// They are formatted as if constants to discourage this
+const useParallelBatchFetch = _ref => {
+  let {
+    BATCH_LIMIT = DEFAULT_BATCH_LIMIT,
+    // Number of resources to stop at, Infinity by default but can be set to a limit
+    batchParams = {},
+    // Params object of the shape accepted by generateKiwtQueryParams
+    nsValues = {},
+    BATCH_SIZE = MAX_BATCH_SIZE,
+    // Number of resources to fetch per batch
+    CONCURRENT_REQUESTS = CONCURRENT_REQUESTS_DEFAULT,
+    // Number of requests to make concurrently
+    endpoint,
+    // endpoint to hit to fetch items
+    generateQueryKey,
+    // Passed function to allow customised query keys
+    queryNamespace = 'stripes-kint-components',
+    queryOptions: passedQueryOptions = {} // Options to pass to each query
+  } = _ref;
+  const ky = (0, _core.useOkapiKy)();
+  const SAFE_BATCH_SIZE = Math.min(BATCH_SIZE, MAX_BATCH_SIZE);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+
+  // Destructure passed query options to grab enabled
+  const {
+    enabled: queryEnabled = true,
+    ...queryOptions
+  } = passedQueryOptions;
+  const paramsArray = (0, _react.useMemo)(() => (0, _utils.generateKiwtQueryParams)({
+    ...batchParams,
+    perPage: SAFE_BATCH_SIZE,
+    stats: true
+  }, nsValues), [batchParams, nsValues, SAFE_BATCH_SIZE]);
+  const getDefaultNSArray = (0, _react.useCallback)(offset => [queryNamespace, endpoint, offset, paramsArray, 'useChunkedBatchedFetch'], [queryNamespace, endpoint, paramsArray]);
+  const namespaceArray = generateQueryKey ? generateQueryKey({
+    CONCURRENT_REQUESTS,
+    BATCH_LIMIT,
+    SAFE_BATCH_SIZE,
+    batchParams,
+    endpoint,
+    offset: 0,
+    paramsArray,
+    passedQueryOptions
+  }) : getDefaultNSArray(0);
+
+  // Firstly fetch page 1 to get information about totals
+  const firstFetchResult = (0, _reactQuery.useQuery)(namespaceArray, () => ky.get(`${endpoint}?${[...paramsArray, 'offset=0']?.join('&')}`).json(), passedQueryOptions);
+  const totalRecords = (0, _react.useMemo)(() => firstFetchResult?.data?.total ?? 0, [firstFetchResult]);
+
+  // WAIT for initial fetch to conclude before setting up queryArray
+  // Set up query array, and only enable the first CONCURRENT_REQUESTS requests
+  const getQueryArray = (0, _react.useCallback)(() => {
+    if (!firstFetchResult?.isFetched) {
+      return [];
+    }
+    const recordsToFetch = Math.min(totalRecords, BATCH_LIMIT);
+    // Have already fetched page 1
+
+    const queryArray = [];
+    // Offset will be i * SAFE_BATCH_SIZE
+    for (let offset = SAFE_BATCH_SIZE; offset < recordsToFetch; offset += SAFE_BATCH_SIZE) {
+      const queryKey = generateQueryKey ? generateQueryKey({
+        CONCURRENT_REQUESTS,
+        BATCH_LIMIT,
+        SAFE_BATCH_SIZE,
+        batchParams,
+        endpoint,
+        offset,
+        paramsArray,
+        passedQueryOptions
+      }) : getDefaultNSArray(offset);
+      const paramString = [...paramsArray, `offset=${offset}`]?.join('&');
+      queryArray.push({
+        queryKey,
+        queryFn: () => ky.get(`${endpoint}?${paramString}`).json(),
+        // Only enable once the previous slice has all been fetched
+        enabled: queryEnabled && offset / SAFE_BATCH_SIZE < CONCURRENT_REQUESTS,
+        ...queryOptions
+      });
+    }
+    return queryArray;
+  }, [BATCH_LIMIT, batchParams, CONCURRENT_REQUESTS, endpoint, firstFetchResult, generateQueryKey, getDefaultNSArray, ky, paramsArray, passedQueryOptions, queryEnabled, queryOptions, SAFE_BATCH_SIZE, totalRecords]);
+
+  // Differentiate between chunked logic and the first return (Which includes the initial fetch)
+  const itemQueries = (0, _reactQuery.useQueries)(getQueryArray());
+  const returnItemQueries = (0, _react.useMemo)(() => [firstFetchResult, ...itemQueries], [firstFetchResult, itemQueries]);
+
+  // Once chunk has finished fetching, fetch next chunk
+  (0, _react.useEffect)(() => {
+    const chunkedQuery = (0, _lodash.chunk)(returnItemQueries, CONCURRENT_REQUESTS);
+    chunkedQuery.forEach((q, i) => {
+      // Check that all previous chunk are fetched,
+      // and that all of our current chunk are not fetched and not loading
+      if (i !== 0 && chunkedQuery[i - 1]?.every(pq => pq.isFetched === true) && q.every(req => req.isFetched === false) && q.every(req => req.isLoading === false)) {
+        // Trigger fetch for each request in the chunk
+        q.forEach(req => {
+          req.refetch();
+        });
+      }
+    });
+  }, [CONCURRENT_REQUESTS, returnItemQueries]);
+
+  // Keep easy track of whether this hook is all loaded or not
+  // (This slightly flattens the "isLoading/isFetched" distinction, but it's an ease of use prop)
+  (0, _react.useEffect)(() => {
+    const newLoading = (returnItemQueries?.length ?? 0) < 1 || returnItemQueries?.some(uq => !uq.isFetched);
+    if (isLoading !== newLoading) {
+      setIsLoading(newLoading);
+    }
+  }, [isLoading, returnItemQueries]);
+  return {
+    itemQueries: returnItemQueries,
+    isLoading,
+    // Offer all fetched orderLines in flattened array once ready
+    items: isLoading ? [] : returnItemQueries?.reduce((acc, curr) => {
+      return [...acc, ...(curr?.data?.results ?? [])];
+    }, []),
+    total: totalRecords
+  };
+};
+var _default = exports.default = useParallelBatchFetch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.33.2",
+  "version": "5.34.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/artifacts/coverage-jest/ActionList/ActionList.js.html

@@ -358,7 +358,7 @@ export default ActionList;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/ActionListFieldArray.js.html

@@ -1495,7 +1495,7 @@ export default ActionListFieldArray;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/index.html

@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ButtonTypedown/ButtonTypedown.js.html

@@ -421,7 +421,7 @@ ButtonTypedown.propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ButtonTypedown/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ButtonTypedown/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ComboButton/ComboButton.js.html

@@ -553,7 +553,7 @@ export default ComboButton;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ComboButton/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ComboButton/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-12T15:30:01.874Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>