@k-int/stripes-kint-components 5.14.0 → 5.16.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [5.16.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.15.0...v5.16.0) (2025-03-14)
+
+
+### Features
+
+* Added ability for SASQLookupComponent to accept sasqProps.syncToLocation/query(Getter/Setter) and have that impact on results ([351b503](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/351b50313e0a320191b24fa1df6227103021f106))
+* SASQRoute allow tweaking of SASQLookupComponent and SASQViewComponent component directly in SASQRoute ([6c812b2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/6c812b2c4c10a049b8a9e56e624cc3dceee3a8fe))
+* SASQRoute override paths for lookup/view ([994b976](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/994b976cbec3af6382066bc6bf6dd945d4a3e239))
+
+# [5.15.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.14.0...v5.15.0) (2025-02-21)
+
+
+### Features
+
+* useSettings sections ([0c062bf](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/0c062bf203811078371820b5106b3106982845ad))
+
 # [5.14.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.13.0...v5.14.0) (2025-02-19)
 
 

package/es/lib/NoResultsMessage/NoResultsMessage.js

@@ -34,25 +34,26 @@ const NoResultsMessage = _ref => {
       searchTerm
     }
   });
-
-  // No search term but no results
-  if (!searchTerm) {
+  if (!isLoading && !searchTerm) {
+    // No search term and not loading
+    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: "stripes-smart-components.sas.noResults.noTerms"
+    });
+  } else if (!isLoading) {
+    // Search term but not loading
     icon = 'search';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.noResults"
     });
-  }
-
-  // Loading results
-  if (isLoading) {
+  } else if (isLoading) {
+    // Loading
     icon = 'spinner-ellipsis';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.loading"
     });
-  }
-
-  // Request failure
-  if (isError) {
+  } else if (isError) {
+    // Request failure
     icon = 'exclamation-circle';
     label = error?.message;
   }

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -27,10 +27,12 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = _utils.generateKiwtQuery,
+    // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true,
     // Default navigation onRowClick
@@ -40,28 +42,41 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   } = props;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   const [count, setCount] = (0, _react.useState)(0);
+
+  // Grab things we might need from sasqProps if passed
+  const {
+    query: sasqPropsQuery,
+    // If these are overriden we need to make use of them
+    queryGetter: sasqPropsQueryGetter,
+    querySetter: sasqPropsQuerySetter,
+    syncToLocation = true
+  } = sasqProps ?? {};
   const {
     currentPage,
     paginationMCLProps,
     paginationSASQProps
   } = (0, _hooks.usePrevNextPagination)({
     count,
-    pageSize: fetchParameters.SASQ_MAP?.perPage
+    pageSize: fetchParameters.SASQ_MAP?.perPage,
+    syncToLocation
   });
   const {
-    query,
-    queryGetter,
-    querySetter
+    query: kintSASQQuery,
+    queryGetter: kintSASQQueryGetter,
+    querySetter: kintSASQQuerySetter
   } = (0, _hooks.useKiwtSASQuery)();
+  const query = (0, _react.useMemo)(() => sasqPropsQuery ?? kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
+  const queryGetter = (0, _react.useMemo)(() => sasqPropsQueryGetter ?? kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
+  const querySetter = (0, _react.useMemo)(() => sasqPropsQuerySetter ?? kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
   const {
     0: namespace
   } = (0, _core.useNamespace)();
   const ky = (0, _core.useOkapiKy)();
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
-  const queryParams = (0, _react.useMemo)(() => (0, _utils.generateKiwtQuery)({
+  const queryParams = (0, _react.useMemo)(() => queryParameterGenerator({
     ...fetchParameters.SASQ_MAP,
     page: currentPage
-  }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query]);
+  }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
   const [filterPaneVisible, setFilterPaneVisible] = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
   const queryNamespace = [namespace, 'SASQ'];
@@ -97,6 +112,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     },
     queryGetter: queryGetter,
     querySetter: querySetter,
+    syncToLocation: syncToLocation,
     ...sasqProps,
     ...paginationSASQProps,
     children: sasqRenderProps => {
@@ -246,6 +262,7 @@ SASQLookupComponent.propTypes = {
   filterPaneProps: _propTypes.default.object,
   FilterComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   FilterPaneHeaderComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  queryParameterGenerator: _propTypes.default.func,
   history: _propTypes.default.object,
   id: _propTypes.default.string.isRequired,
   intlKey: _propTypes.default.string,

package/es/lib/SASQRoute/SASQRoute.js

@@ -15,7 +15,11 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     fetchParameters,
+    getPathLookup = path => `${path}/:id?`,
+    getPathView = path => `${path}/:id`,
+    SASQLookupComponent: RouteLookupComponent = _SASQLookupComponent.SASQLookupComponent,
     path,
+    SASQViewComponent: RouteViewComponent = _SASQViewComponent.default,
     ...props
   } = _ref;
   // Grab the SASQ_MAP and tweak it
@@ -36,9 +40,9 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   // Reinsert the SASQ_MAP
   fetchParameters.SASQ_MAP = SASQ_MAP;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-    path: `${path}/:id?`,
+    path: getPathLookup(path),
     render: routeProps => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponent.SASQLookupComponent, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteLookupComponent, {
         ref: lookupRef,
         ...routeProps,
         fetchParameters: fetchParameters,
@@ -46,8 +50,8 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         ...props,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Switch, {
           children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-            path: `${path}/:id`,
-            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQViewComponent.default, {
+            path: getPathView(path),
+            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteViewComponent, {
               ref: viewRef,
               ...innerProps,
               fetchParameters: fetchParameters,
@@ -64,7 +68,11 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 SASQRoute.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.element, _propTypes.default.func]),
   fetchParameters: _propTypes.default.object,
+  getPathLookup: _propTypes.default.func,
+  getPathView: _propTypes.default.func,
   path: _propTypes.default.string,
+  SASQLookupComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  SASQViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   ViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
 };
 var _default = exports.default = SASQRoute;

package/es/lib/settingsHooks/useSettings.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
@@ -15,97 +15,213 @@ var _utils = require("../utils");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useSettings = _ref => {
-  let {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
+const useSettings = function () {
+  let settingsProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
     allowGlobalEdit = true,
     dynamicPageExclusions,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    persistentPages,
+    pages,
+    // If this is present, act completely as a passthrough either in sections OR standalone
+    persistentPages = [],
+    preventQueries = false,
     refdataEndpoint,
+    renderSingleSection = false,
+    // IF SECTIONS == NULL, this prop allows the implementor to render the pageList as a section with label etc
+    sectionPermission,
+    // If we're rendering sections, this prevents the rendering of said section (works as fallback or prevention for single section)
+    sectionRoute,
+    sections,
+    // if present, should be an array of objects with the SAME shape as the overall props here.
+    // If a prop isn't present it can fall back to the "global" prop.
     settingEndpoint,
     templateEndpoint
-  } = _ref;
+  } = settingsProps;
   const ky = (0, _core.useOkapiKy)();
+  const stripes = (0, _core.useStripes)();
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
-  const queryParams = (0, _utils.generateKiwtQueryParams)({
-    filters: dynamicPageExclusions?.map(dpe => ({
-      path: 'section',
-      comparator: '!=',
-      value: dpe
-    })),
-    perPage: 100,
-    stats: false
-  }, {});
-  const {
-    data: appSettings = [],
-    isLoading
-  } = (0, _reactQuery.useQuery)(['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams], () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json());
-  const sections = [...new Set(appSettings.map(s => s.section))];
-  const dynamic = sections.map(section => {
+
+  // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
+
+  const sectionMetaArray = (0, _react.useMemo)(() => {
+    const array = [];
+    const getSectionQueryProps = sectionProps => {
+      const dqp = sectionProps.dynamicPageExclusions ?? dynamicPageExclusions;
+      const queryParams = (0, _utils.generateKiwtQueryParams)({
+        filters: dqp?.map(dpe => ({
+          path: 'section',
+          comparator: '!=',
+          value: dpe
+        })),
+        perPage: 100,
+        stats: false
+      }, {});
+      const finalSettingEndpoint = sectionProps.settingEndpoint ?? settingEndpoint;
+      const queryKey = ['stripes-kint-components', 'useSettings', 'appSettings', finalSettingEndpoint, queryParams];
+      const queryFn = () => ky(`${finalSettingEndpoint}?${queryParams?.join('&')}`).json();
+      return {
+        queryParams,
+        queryKey,
+        queryFn
+      };
+    };
+    if ((sections?.length ?? 0) > 0) {
+      array.push(...sections.map(section => {
+        const querySectionProps = getSectionQueryProps(section);
+        return {
+          ...settingsProps,
+          // ensure these fall through to section based props
+          ...querySectionProps,
+          ...section // return original section object
+        };
+      }));
+    } else {
+      const querySectionProps = getSectionQueryProps(settingsProps);
+      array.push({
+        ...settingsProps,
+        ...querySectionProps
+      });
+    }
+    return array;
+  }, [dynamicPageExclusions, ky, sections, settingEndpoint, settingsProps]);
+  const queries = (0, _react.useMemo)(() => sectionMetaArray.map(sma => {
+    let enabled = true;
+    if (sma.pages || sma.preventQueries || pages || preventQueries) {
+      enabled = false;
+    }
     return {
-      route: section,
-      label: kintIntl.formatKintMessage({
-        id: `settings.settingsSection.${(0, _utils.toCamelCase)(section)}`,
-        fallbackMessage: section
-      }),
-      component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPagePane, {
-        intlKey: passedIntlKey,
-        intlNS: passedIntlNS,
-        sectionName: section,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPage, {
-          allowEdit: allowGlobalEdit,
+      queryKey: sma.queryKey,
+      queryFn: sma.queryFn,
+      enabled
+    };
+  }) ?? [], [pages, preventQueries, sectionMetaArray]);
+  const queryReturnArray = (0, _reactQuery.useQueries)(queries);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const getDynamicPages = (0, _react.useCallback)((qra, sma) => {
+    const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
+    const dynamic = pagesFromQueryReturn.map(page => {
+      const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
+      const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
+      return {
+        route: pageRoute,
+        label: kintIntl.formatKintMessage({
+          id: `settings.settingsSection.${(0, _utils.toCamelCase)(page)}`,
+          fallbackMessage: page
+        }),
+        component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPagePane, {
           intlKey: passedIntlKey,
           intlNS: passedIntlNS,
-          labelOverrides: labelOverrides,
-          sectionName: section,
-          ...props
+          sectionName: page,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPage, {
+            allowEdit: allowGlobalEdit,
+            intlKey: passedIntlKey,
+            intlNS: passedIntlNS,
+            labelOverrides: labelOverrides,
+            sectionName: page,
+            ...props
+          })
         })
-      })
-    };
-  });
-  const pageList = persistentPages.concat(dynamic).sort(_utils.sortByLabel);
-  const intlKey = (0, _hooks.useIntlKey)(passedIntlKey, passedIntlNS);
-  const SettingsContextProvider = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_contexts.SettingsContext.Provider, {
-      value: {
-        intlKey,
-        // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-        refdataEndpoint,
-        settingEndpoint,
-        templateEndpoint
-      },
-      children: children
+      };
     });
-  };
-  SettingsContextProvider.propTypes = {
-    children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
-  };
+    return {
+      pages: pagesFromQueryReturn,
+      dynamic
+    };
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+  (0, _react.useEffect)(() => {
+    // Handle loading
+    if (queryReturnArray.length > 0 && queryReturnArray.every(qra => qra.isLoading === false) && isLoading === true) {
+      setIsLoading(false);
+    }
+  }, [isLoading, queryReturnArray]);
+  const finalSections = (0, _react.useMemo)(() => {
+    return sectionMetaArray.map((sma, idx) => {
+      const SettingsContextProvider = _ref => {
+        let {
+          children
+        } = _ref;
+        const intlKey = (0, _hooks.useIntlKey)(passedIntlKey, passedIntlNS);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_contexts.SettingsContext.Provider, {
+          value: {
+            intlKey: sma.intlKey ?? intlKey,
+            // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+            refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+            settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+            templateEndpoint: sma.templateEndpoint ?? templateEndpoint
+          },
+          children: children
+        });
+      };
+      SettingsContextProvider.propTypes = {
+        children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
+      };
+      const finalPermission = sma.sectionPermission ?? sectionPermission;
+      if (!finalPermission || stripes.hasPerm(finalPermission)) {
+        const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
+        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(_utils.sortByLabel).map(p => {
+          return {
+            ...p,
+            component: pCProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsContextProvider, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(p.component, {
+                ...pCProps
+              })
+            })
+          };
+        });
+        return {
+          ...sma,
+          SettingsContextProvider,
+          ...dynamicPagesFromQueryReturn,
+          pageList: finalPages,
+          // DEPRECATED Here for backwards compatibility
+          pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
+        };
+      }
+      return null;
+    }).filter(Boolean);
+  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
+  const pageList = (0, _react.useMemo)(() => {
+    let finalPages = null;
+    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+      finalPages = pages ?? finalSections[0].pages;
+    }
+    return finalPages;
+  }, [finalSections, pages, renderSingleSection]);
+  const passedSections = (0, _react.useMemo)(() => {
+    if (finalSections.length > 1 || finalSections.length === 1 && renderSingleSection) {
+      return finalSections;
+    }
+    return null;
+  }, [finalSections, renderSingleSection]);
   const SettingsComponent = props => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.Settings, {
       pages: pageList,
       paneTitle: kintIntl.formatKintMessage({
         id: 'meta.title'
       }),
+      sections: passedSections,
       ...props
     });
   };
-  const SettingsComponentWithContext = props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsContextProvider, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsComponent, {
-        ...props
-      })
-    });
-  };
   return {
     isLoading,
     pageList,
-    SettingsComponent: SettingsComponentWithContext,
-    SettingsContextProvider
+    sections: finalSections,
+    SettingsComponent,
+    // This doesn't make much sense if there is more than one section, here to avoid breaking changes
+    SettingsContextProvider: finalSections && finalSections.length === 1 ? finalSections[0].SettingsContextProvider : _ref2 => {
+      let {
+        children
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [" ", children, " "]
+      });
+    }
   };
 };
 var _default = exports.default = useSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.14.0",
+  "version": "5.16.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -44,7 +44,7 @@
     "@folio/jest-config-stripes": "^2.0.0 || ^3.0.0",
     "@folio/stripes": "^9.0.0 || ^10.0.0",
     "@folio/stripes-cli": "^3.0.0 || ^4.0.0",
-    "@folio/stripes-erm-testing": "^2.0.0",
+    "@folio/stripes-erm-testing": "^2.0.0 || ^3.0.0",
     "@formatjs/cli": "^6.6.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -23,20 +23,20 @@ const NoResultsMessage = ({
   let icon = 'search';
   let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
 
-  // No search term but no results
-  if (!searchTerm) {
+  if (!isLoading && !searchTerm) {
+    // No search term and not loading
+    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.noTerms" />;
+  } else if (!isLoading) {
+    // Search term but not loading
     icon = 'search';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
-  }
-
-  // Loading results
-  if (isLoading) {
+  } else if (isLoading) {
+    // Loading
     icon = 'spinner-ellipsis';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
-  }
-
-  // Request failure
-  if (isError) {
+  } else if (isError) {
+    // Request failure
     icon = 'exclamation-circle';
     label = error?.message;
   }

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -40,10 +40,11 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = generateKiwtQuery, // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
@@ -53,25 +54,43 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   const [count, setCount] = useState(0);
 
+  // Grab things we might need from sasqProps if passed
+  const {
+    query: sasqPropsQuery, // If these are overriden we need to make use of them
+    queryGetter: sasqPropsQueryGetter,
+    querySetter: sasqPropsQuerySetter,
+    syncToLocation = true
+  } = sasqProps ?? {};
+
   const { currentPage, paginationMCLProps, paginationSASQProps } = usePrevNextPagination({
     count,
-    pageSize: fetchParameters.SASQ_MAP?.perPage
+    pageSize: fetchParameters.SASQ_MAP?.perPage,
+    syncToLocation
   });
 
-  const { query, queryGetter, querySetter } = useKiwtSASQuery();
+  const {
+    query: kintSASQQuery,
+    queryGetter: kintSASQQueryGetter,
+    querySetter: kintSASQQuerySetter
+  } = useKiwtSASQuery();
+
+  const query = useMemo(() => sasqPropsQuery ?? kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
+  const queryGetter = useMemo(() => sasqPropsQueryGetter ?? kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
+  const querySetter = useMemo(() => sasqPropsQuerySetter ?? kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
+
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
 
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
   const queryParams = useMemo(() => (
-    generateKiwtQuery(
+    queryParameterGenerator(
       {
         ...fetchParameters.SASQ_MAP,
         page: currentPage,
       }, (query ?? {})
     )
-  ), [currentPage, fetchParameters.SASQ_MAP, query]);
+  ), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
@@ -118,6 +137,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       initialSearchState={{ query: '' }}
       queryGetter={queryGetter}
       querySetter={querySetter}
+      syncToLocation={syncToLocation}
       {...sasqProps}
       {...paginationSASQProps}
     >
@@ -315,6 +335,7 @@ SASQLookupComponent.propTypes = {
     PropTypes.func,
     PropTypes.node
   ]),
+  queryParameterGenerator: PropTypes.func,
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
   intlKey: PropTypes.string,

package/src/lib/SASQRoute/SASQRoute.js

@@ -12,7 +12,11 @@ import SASQViewComponent from '../SASQViewComponent';
 const SASQRoute = forwardRef(({
   children,
   fetchParameters,
+  getPathLookup = (path) => `${path}/:id?`,
+  getPathView = (path) => `${path}/:id`,
+  SASQLookupComponent: RouteLookupComponent = SASQLookupComponent,
   path,
+  SASQViewComponent: RouteViewComponent = SASQViewComponent,
   ...props
 }, ref) => {
   // Grab the SASQ_MAP and tweak it
@@ -37,10 +41,10 @@ const SASQRoute = forwardRef(({
 
   return (
     <Route
-      path={`${path}/:id?`}
+      path={getPathLookup(path)}
       render={routeProps => {
         return (
-          <SASQLookupComponent
+          <RouteLookupComponent
             ref={lookupRef}
             {...routeProps}
             fetchParameters={fetchParameters}
@@ -50,9 +54,9 @@ const SASQRoute = forwardRef(({
             <Switch>
               {children}
               <Route
-                path={`${path}/:id`}
+                path={getPathView(path)}
                 render={innerProps => (
-                  <SASQViewComponent
+                  <RouteViewComponent
                     ref={viewRef}
                     {...innerProps}
                     fetchParameters={fetchParameters}
@@ -63,7 +67,7 @@ const SASQRoute = forwardRef(({
                 )}
               />
             </Switch>
-          </SASQLookupComponent>
+          </RouteLookupComponent>
         );
       }}
     />
@@ -77,7 +81,17 @@ SASQRoute.propTypes = {
     PropTypes.func
   ]),
   fetchParameters: PropTypes.object,
+  getPathLookup: PropTypes.func,
+  getPathView: PropTypes.func,
   path: PropTypes.string,
+  SASQLookupComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  SASQViewComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
   ViewComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

package/src/lib/settingsHooks/useSettings.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useQuery } from 'react-query';
-import { useOkapiKy } from '@folio/stripes/core';
+import { useQueries } from 'react-query';
+import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
@@ -12,88 +12,207 @@ import { SettingsContext } from '../contexts';
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../utils';
 import { useKintIntl, useIntlKey } from '../hooks';
 
-const useSettings = ({
-  allowGlobalEdit = true,
-  dynamicPageExclusions,
-  intlKey: passedIntlKey,
-  intlNS: passedIntlNS,
-  labelOverrides = {},
-  persistentPages,
-  refdataEndpoint,
-  settingEndpoint,
-  templateEndpoint
-}) => {
+// TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
+const useSettings = (settingsProps = {}) => {
+  const {
+    allowGlobalEdit = true,
+    dynamicPageExclusions,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    pages, // If this is present, act completely as a passthrough either in sections OR standalone
+    persistentPages = [],
+    preventQueries = false,
+    refdataEndpoint,
+    renderSingleSection = false, // IF SECTIONS == NULL, this prop allows the implementor to render the pageList as a section with label etc
+    sectionPermission, // If we're rendering sections, this prevents the rendering of said section (works as fallback or prevention for single section)
+    sectionRoute,
+    sections, // if present, should be an array of objects with the SAME shape as the overall props here.
+    // If a prop isn't present it can fall back to the "global" prop.
+    settingEndpoint,
+    templateEndpoint
+  } = settingsProps;
+
   const ky = useOkapiKy();
+  const stripes = useStripes();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
-  const queryParams = generateKiwtQueryParams({
-      filters: dynamicPageExclusions?.map(dpe => ({
-        path: 'section',
-        comparator: '!=',
-        value: dpe
-      })),
-      perPage: 100,
-      stats: false
-  }, {});
-
-  const { data: appSettings = [], isLoading } = useQuery(
-    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams],
-    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
-  );
-
-  const sections = [...new Set(appSettings.map(s => s.section))];
-  const dynamic = sections.map(section => {
-    return (
-      {
-        route: section,
-        label: kintIntl.formatKintMessage({
-          id: `settings.settingsSection.${toCamelCase(section)}`,
-          fallbackMessage: section
-        }),
-        component: (props) => (
-          <SettingPagePane
-            intlKey={passedIntlKey}
-            intlNS={passedIntlNS}
-            sectionName={section}
-          >
-            <SettingPage
-              allowEdit={allowGlobalEdit}
+  // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
+
+  const sectionMetaArray = useMemo(() => {
+    const array = [];
+    const getSectionQueryProps = (sectionProps) => {
+      const dqp = sectionProps.dynamicPageExclusions ?? dynamicPageExclusions;
+      const queryParams = generateKiwtQueryParams({
+        filters: dqp?.map(dpe => ({
+          path: 'section',
+          comparator: '!=',
+          value: dpe
+        })),
+        perPage: 100,
+        stats: false
+      }, {});
+      const finalSettingEndpoint = sectionProps.settingEndpoint ?? settingEndpoint;
+      const queryKey = ['stripes-kint-components', 'useSettings', 'appSettings', finalSettingEndpoint, queryParams];
+      const queryFn = () => ky(`${finalSettingEndpoint}?${queryParams?.join('&')}`).json();
+
+      return { queryParams, queryKey, queryFn };
+    };
+
+    if ((sections?.length ?? 0) > 0) {
+      array.push(...sections.map((section) => {
+        const querySectionProps = getSectionQueryProps(section);
+
+        return ({
+          ...settingsProps, // ensure these fall through to section based props
+          ...querySectionProps,
+          ...section // return original section object
+        });
+      }));
+    } else {
+      const querySectionProps = getSectionQueryProps(settingsProps);
+      array.push({
+        ...settingsProps,
+        ...querySectionProps,
+      });
+    }
+
+    return array;
+  }, [dynamicPageExclusions, ky, sections, settingEndpoint, settingsProps]);
+
+  const queries = useMemo(() => sectionMetaArray.map(sma => {
+    let enabled = true;
+    if (sma.pages || sma.preventQueries || pages || preventQueries) {
+      enabled = false;
+    }
+
+    return {
+      queryKey: sma.queryKey,
+      queryFn: sma.queryFn,
+      enabled
+    };
+  }) ?? [], [pages, preventQueries, sectionMetaArray]);
+
+  const queryReturnArray = useQueries(queries);
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const getDynamicPages = useCallback((qra, sma) => {
+    const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
+    const dynamic = pagesFromQueryReturn.map(page => {
+      const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
+      const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
+      return (
+        {
+          route: pageRoute,
+          label: kintIntl.formatKintMessage({
+            id: `settings.settingsSection.${toCamelCase(page)}`,
+            fallbackMessage: page
+          }),
+          component: (props) => (
+            <SettingPagePane
               intlKey={passedIntlKey}
               intlNS={passedIntlNS}
-              labelOverrides={labelOverrides}
-              sectionName={section}
-              {...props}
-            />
-          </SettingPagePane>
-        )
+              sectionName={page}
+            >
+              <SettingPage
+                allowEdit={allowGlobalEdit}
+                intlKey={passedIntlKey}
+                intlNS={passedIntlNS}
+                labelOverrides={labelOverrides}
+                sectionName={page}
+                {...props}
+              />
+            </SettingPagePane>
+          )
+        }
+      );
+    });
+
+    return {
+      pages: pagesFromQueryReturn,
+      dynamic,
+    };
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+
+  useEffect(() => {
+    // Handle loading
+    if (
+      queryReturnArray.length > 0 &&
+      queryReturnArray.every(qra => qra.isLoading === false) &&
+      isLoading === true
+    ) {
+      setIsLoading(false);
+    }
+  }, [isLoading, queryReturnArray]);
+
+  const finalSections = useMemo(() => {
+    return sectionMetaArray.map(((sma, idx) => {
+      const SettingsContextProvider = ({ children }) => {
+        const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
+        return (
+          <SettingsContext.Provider
+            value={{
+              intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+              refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+              settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+              templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
+            }}
+          >
+            {children}
+          </SettingsContext.Provider>
+        );
+      };
+
+      SettingsContextProvider.propTypes = {
+        children: PropTypes.oneOfType([
+          PropTypes.func,
+          PropTypes.node
+        ])
+      };
+
+      const finalPermission = sma.sectionPermission ?? sectionPermission;
+      if (!finalPermission || stripes.hasPerm(finalPermission)) {
+        const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
+
+        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(sortByLabel).map((p) => {
+          return {
+            ...p,
+            component: (pCProps) => (
+              <SettingsContextProvider>
+                <p.component {...pCProps} />
+              </SettingsContextProvider>
+            )
+          };
+        });
+
+        return {
+          ...sma,
+          SettingsContextProvider,
+          ...dynamicPagesFromQueryReturn,
+          pageList: finalPages, // DEPRECATED Here for backwards compatibility
+          pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
+        };
       }
-    );
-  });
+      return null;
+    })).filter(Boolean);
+  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
 
-  const pageList = persistentPages.concat(dynamic).sort(sortByLabel);
+  const pageList = useMemo(() => {
+    let finalPages = null;
+    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+      finalPages = pages ?? finalSections[0].pages;
+    }
 
-  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
-  const SettingsContextProvider = ({ children }) => {
-    return (
-      <SettingsContext.Provider
-        value={{
-          intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-          refdataEndpoint,
-          settingEndpoint,
-          templateEndpoint
-        }}
-      >
-        {children}
-      </SettingsContext.Provider>
-    );
-  };
+    return finalPages;
+  }, [finalSections, pages, renderSingleSection]);
 
-  SettingsContextProvider.propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.node
-    ])
-  };
+  const passedSections = useMemo(() => {
+    if (finalSections.length > 1 || (finalSections.length === 1 && renderSingleSection)) {
+      return finalSections;
+    }
+    return null;
+  }, [finalSections, renderSingleSection]);
 
   const SettingsComponent = (props) => {
     return (
@@ -101,26 +220,21 @@ const useSettings = ({
         pages={pageList}
         paneTitle={
           kintIntl.formatKintMessage({
-          id: 'meta.title'
-        })}
+            id: 'meta.title'
+          })}
+        sections={passedSections}
         {...props}
       />
     );
   };
 
-  const SettingsComponentWithContext = (props) => {
-    return (
-      <SettingsContextProvider>
-        <SettingsComponent {...props} />
-      </SettingsContextProvider>
-    );
-  };
-
   return {
     isLoading,
     pageList,
-    SettingsComponent: SettingsComponentWithContext,
-    SettingsContextProvider
+    sections: finalSections,
+    SettingsComponent,
+    // This doesn't make much sense if there is more than one section, here to avoid breaking changes
+    SettingsContextProvider: (finalSections && finalSections.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
   };
 };