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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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/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/package.json

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

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;