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

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -2,17 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Button, Icon } from '@folio/stripes/components';
-import css from '../../../styles/NoResultsMessage.css';
 import { useKintIntl } from '../hooks';
 
+import css from '../../../styles/NoResultsMessage.css';
+
 const NoResultsMessage = ({
+  className,
+  error,
+  filters,
+  filterPaneIsVisible,
   icon: userIcon,
+  iconPresets: {
+    noTerms: noTermsIcon,
+    noTermsWhenFilterPane: noTermsWhenFilterPaneIcon,
+    noResults: noResultsIcon,
+    isLoading: isLoadingIcon,
+    error: errorIcon,
+  } = {},
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   isLoading,
   isError,
-  error,
-  filterPaneIsVisible,
   label: userLabel,
   labelOverrides = {},
   searchTerm,
@@ -23,28 +33,28 @@ const NoResultsMessage = ({
   let icon = 'search';
   let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
 
-  if (!isLoading && !searchTerm) {
+  if (!isLoading && !searchTerm && !filters) {
     // No search term and not loading
-    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    icon = noTermsIcon ?? (filterPaneIsVisible ? (noTermsWhenFilterPaneIcon ?? 'arrow-left') : null);
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noTerms" />;
   } else if (!isLoading) {
     // Search term but not loading
-    icon = 'search';
+    icon = noResultsIcon ?? 'search';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
   } else if (isLoading) {
     // Loading
-    icon = 'spinner-ellipsis';
+    icon = isLoadingIcon ?? 'spinner-ellipsis';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
   } else if (isError) {
     // Request failure
-    icon = 'exclamation-circle';
+    icon = errorIcon ?? 'exclamation-circle';
     label = error?.message;
   }
 
   return (
-    <div className={css.noResultsMessage}>
+    <div className={`${className} ${css.noResultsMessage}`}>
       <div className={css.noResultsMessageLabelWrap}>
-        {(icon || userIcon) &&
+        {(userIcon || icon) &&
           <Icon
             icon={userIcon ?? icon}
             iconRootClass={css.noResultsMessageIcon}
@@ -72,9 +82,18 @@ const NoResultsMessage = ({
 };
 
 NoResultsMessage.propTypes = {
+  className: PropTypes.string,
   error: PropTypes.object,
+  filters: PropTypes.string,
   filterPaneIsVisible: PropTypes.bool.isRequired,
   icon: PropTypes.string,
+  iconPresets: PropTypes.shape({
+    noTerms: PropTypes.string,
+    noTermsWhenFilterPane: PropTypes.string,
+    noResults: PropTypes.string,
+    isLoading: PropTypes.string,
+    error: PropTypes.string,
+  }),
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   isLoading: PropTypes.bool,

package/src/lib/NoResultsMessage/README.md

@@ -66,16 +66,19 @@ export default MyDataView;
 
 ## Props
 
-| **Prop**              | **Type**                 | **Required** | **Description**                                                                                                                                       |
-|-----------------------|--------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `filterPaneIsVisible` | `boolean`                | ✓            | Indicates if the associated filter pane is currently visible. Controls the display of the "Show Filters" button.                                      |
-| `toggleFilterPane`    | `() => void`             | ✓            | Callback function invoked when the "Show Filters" button is clicked. Typically used to toggle the filter pane's visibility.                           |
-| `error`               | `object`                 | ✕            | An error object (e.g., from `react-query`) containing details of a failed request. Its `message` property will be displayed if `isError` is `true`.   |
-| `icon`                | `string`                 | ✕            | An optional custom icon string (from `@folio/stripes/components/Icon`) to override the default icon based on the message state.                       |
-| `intlKey`             | `string`                 | ✕            | A base internationalization key used by the internal `useKintIntl` hook to resolve localized messages.                                                |
-| `intlNS`              | `string`                 | ✕            | An internationalization namespace used by the internal `useKintIntl` hook.                                                                            |
-| `isLoading`           | `boolean`                | ✕            | When `true`, indicates that data is currently being loaded, displaying a loading message.                                                             |
-| `isError`             | `boolean`                | ✕            | When `true`, indicates an error occurred during data fetching, displaying an error message.                                                           |
-| `label`               | `string`, `node`, `func` | ✕            | An optional custom label to override all default message content.                                                                                     |
-| `labelOverrides`      | `object`                 | ✕            | An object for overriding specific parts of the default labels, such as `{ noResultsLabel: 'No records found' }` or `{ showFilters: 'View Filters' }`. |
-| `searchTerm`          | `string`                 | ✕            | The current search query string. Used to differentiate between "no results for search" and "no search term entered" messages.                         |
+| **Prop**              | **Type**                 | **Required** | **Description**                                                                                                                                                                                                                |
+|-----------------------|--------------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `className`           | `string`                 | ✕            | Allows the passing of additional CSS characteristics to the noResultsMessage                                                                                                                                                   | 
+| `filters  `           | `string`                 | ✕            | The current filters. Used alongside searchTerm to differentiate between "no results for search" and "no search term entered" messages.                                                                                         |
+| `filterPaneIsVisible` | `boolean`                | ✓            | Indicates if the associated filter pane is currently visible. Controls the display of the "Show Filters" button.                                                                                                               |
+| `toggleFilterPane`    | `() => void`             | ✓            | Callback function invoked when the "Show Filters" button is clicked. Typically used to toggle the filter pane's visibility.                                                                                                    |
+| `error`               | `object`                 | ✕            | An error object (e.g., from `react-query`) containing details of a failed request. Its `message` property will be displayed if `isError` is `true`.                                                                            |
+| `icon`                | `string`                 | ✕            | An optional custom icon string (from `@folio/stripes/components/Icon`) to override the default icon based on the message state.                                                                                                |
+| `iconPresets`         | `object`                 | ✕            | An optional object containing keys: `noTerms`, `noTermsWhenFilterPane`, `noResults`, `isLoading` and `error`. Each key is optional and allows direcet overriding of one of the states NoResultsMessage is configured to output |
+| `intlKey`             | `string`                 | ✕            | A base internationalization key used by the internal `useKintIntl` hook to resolve localized messages.                                                                                                                         |
+| `intlNS`              | `string`                 | ✕            | An internationalization namespace used by the internal `useKintIntl` hook.                                                                                                                                                     |
+| `isLoading`           | `boolean`                | ✕            | When `true`, indicates that data is currently being loaded, displaying a loading message.                                                                                                                                      |
+| `isError`             | `boolean`                | ✕            | When `true`, indicates an error occurred during data fetching, displaying an error message.                                                                                                                                    |
+| `label`               | `string`, `node`, `func` | ✕            | An optional custom label to override all default message content.                                                                                                                                                              |
+| `labelOverrides`      | `object`                 | ✕            | An object for overriding specific parts of the default labels, such as `{ noResultsLabel: 'No records found' }` or `{ showFilters: 'View Filters' }`.                                                                          |
+| `searchTerm`          | `string`                 | ✕            | The current search query string. Used alongside filters to differentiate between "no results for search" and "no search term entered" messages.                                                                                |

package/src/lib/SASQLookupComponent/README.md

@@ -178,3 +178,15 @@ export default LookupWithRefExample;
     Using `forwardRef` and `useImperativeHandle`, the component exposes certain query properties and generated query parameters to parent components.
 
 This design enables **SASQLookupComponent** to serve as a robust and flexible foundation for building data lookup views with advanced filtering, search, and pagination functionalities.
+
+## Use in Settings
+
+In Settings, often a "search and filter" experience is wanted, but with 2 panes instead of 3. In order to facilitate this,
+SASQRoute (via SASQLookupComponent) exposes a set of props.
+
+- `hasFilterPane`. This defaults to true, if set to false it will _instead_ default to rendering a search bar at the
+  top of the main pane. It will additionally render any passed FilterHeaderComponent and FilterComponent.
+- `noSearchField`. In order to prevent rendering of the search bar, set this to false.
+
+In this way a SASQRoute can be set up to be purely routing with no search/filter, or with search and filter in the main
+  body for settings.

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,5 +1,5 @@
 import {
-  forwardRef,
+  forwardRef, useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -38,6 +38,8 @@ import {
 import TableBody from './TableBody';
 import SearchKeyControl from '../SearchKeyControl';
 
+import css from '../../../styles/SASQLookupComponent.css';
+
 const SASQLookupComponent = forwardRef((props, ref) => {
   const {
     children,
@@ -60,9 +62,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       if (passedId) {
         queryNamespace.push(passedId);
       }
-      queryNamespace.push('viewAll');
-      queryNamespace.push(query);
-      queryNamespace.push(currentPage);
+      queryNamespace.push('viewAll', query, currentPage);
 
       return queryNamespace;
     },
@@ -78,6 +78,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchableIndexes = [],
+    SearchComponent: PassedSearchComponent,
     searchFieldAriaLabel,
     searchFieldProps = {},
   } = props;
@@ -194,6 +195,53 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     queryParams,
   }));
 
+  const InternalSearchComponent = useCallback(({
+    disableReset,
+    resetAll,
+    searchHandlers,
+    searchValue
+  }) => (
+    <>
+      <SearchField
+        ariaLabel={searchFieldAriaLabel}
+        autoFocus
+        id={`sasq-search-field-${id}`}
+        name="query"
+        onChange={(e) => {
+          if (e.target?.value) {
+            searchHandlers.query(e); // SASQ needs the whole event here
+          } else {
+            searchHandlers.reset();
+          }
+        }}
+        onClear={searchHandlers.reset}
+        value={searchValue.query}
+        {...searchFieldProps}
+      />
+      {searchableIndexes?.length > 0 && (
+        <SearchKeyControl options={searchableIndexes} />
+      )}
+      <Button
+        buttonStyle="primary"
+        disabled={!searchValue.query}
+        fullWidth
+        type="submit"
+      >
+        <FormattedMessage id="stripes-smart-components.search" />
+      </Button>
+      <Button
+        buttonStyle="none"
+        disabled={disableReset}
+        id="clickable-reset-all"
+        onClick={resetAll}
+      >
+        <Icon icon="times-circle-solid">
+          <FormattedMessage id="stripes-smart-components.resetAll" />
+        </Icon>
+      </Button>
+    </>
+  ), [id, searchFieldAriaLabel, searchFieldProps, searchableIndexes]);
+
   return (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
@@ -260,6 +308,8 @@ const SASQLookupComponent = forwardRef((props, ref) => {
           return null;
         };
 
+        const SearchComponent = PassedSearchComponent ?? InternalSearchComponent;
+
         return (
           <PersistedPaneset
             appId={namespace}
@@ -291,49 +341,17 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               >
                 <form onSubmit={onSubmitSearch}>
                   <FilterPaneHeaderComponent />
-                  {!noSearchField && (
-                    <>
-                      <SearchField
-                        ariaLabel={searchFieldAriaLabel}
-                        autoFocus
-                        id={`sasq-search-field-${id}`}
-                        name="query"
-                        onChange={(e) => {
-                          if (e.target?.value) {
-                            searchHandlers.query(e); // SASQ needs the whole event here
-                          } else {
-                            searchHandlers.reset();
-                          }
-                        }}
-                        onClear={searchHandlers.reset}
-                        value={searchValue.query}
-                        {...searchFieldProps}
-                      />
-                      {searchableIndexes?.length > 0 && (
-                        <SearchKeyControl options={searchableIndexes} />
-                      )}
-                      <Button
-                        buttonStyle="primary"
-                        disabled={!searchValue.query}
-                        fullWidth
-                        type="submit"
-                      >
-                        <FormattedMessage id="stripes-smart-components.search" />
-                      </Button>
-                      <Button
-                        buttonStyle="none"
-                        disabled={disableReset}
-                        id="clickable-reset-all"
-                        onClick={resetAll}
-                      >
-                        <Icon icon="times-circle-solid">
-                          <FormattedMessage id="stripes-smart-components.resetAll" />
-                        </Icon>
-                      </Button>
-                    </>
-                  )}
+                  {!noSearchField &&
+                    <SearchComponent
+                      disableReset={disableReset}
+                      resetAll={resetAll}
+                      searchHandlers={searchHandlers}
+                      searchValue={searchValue}
+                    />
+                  }
                   <FilterComponent
-                    activeFilters={activeFilters.state}
+                    activeFilters={activeFilters}
+                    data={data}
                     filterChanged={filterChanged}
                     filterHandlers={getFilterHandlers()}
                     resetAll={resetAll}
@@ -363,33 +381,68 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               )}
               {...restOfMainPaneProps}
             >
-              <Body
-                data={data}
-                filterPaneVisible={filterPaneVisible}
-                intlKey={passedIntlKey}
-                intlNS={passedIntlNS}
-                labelOverrides={labelOverrides}
-                noResultsProps={noResultsProps}
-                query={query}
-                rowNavigation={rowNavigation}
-                toggleFilterPane={toggleFilterPane}
-                {...restOfQueryProps}
-                {...sasqRenderProps}
-                /*
-                 * This is insane, it looks like SASQProps `initialSortState`
-                 * needs to be passed through to MCL, as it relies on MCL calling the initial
-                 * sort handler. Passing through SASQProps.
-                 */
-                {...sasqProps}
-                // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
-                {...{
-                  ...props,
-                  mclProps: {
-                    ...paginationMCLProps,
-                    ...mclProps,
-                  },
-                }}
-              />
+              <div className={css.mainPaneContainer}>
+                {!hasFilterPane &&
+                  <div className={css.controlsContainer}>
+                    <form onSubmit={onSubmitSearch}>
+                      <FilterPaneHeaderComponent />
+                      {!noSearchField &&
+                        <SearchComponent
+                          disableReset={disableReset}
+                          resetAll={resetAll}
+                          searchHandlers={searchHandlers}
+                          searchValue={searchValue}
+                        />
+                      }
+                      <FilterComponent
+                        activeFilters={activeFilters}
+                        data={data}
+                        filterChanged={filterChanged}
+                        filterHandlers={getFilterHandlers()}
+                        resetAll={resetAll}
+                        searchChanged={searchChanged}
+                        searchHandlers={getSearchHandlers()}
+                        searchValue={searchValue}
+                      />
+                    </form>
+                  </div>
+                }
+                <div className={css.bodyContainer}>
+                  <Body
+                    data={data}
+                    filterPaneVisible={filterPaneVisible}
+                    intlKey={passedIntlKey}
+                    intlNS={passedIntlNS}
+                    labelOverrides={labelOverrides}
+                    noResultsProps={{
+                      ...noResultsProps,
+                      iconPresets: {
+                        noTermsWhenFilterPane: hasFilterPane ? null : 'arrow-up',
+                        ...noResultsProps.iconPresets,
+                      },
+                    }}
+                    query={query}
+                    rowNavigation={rowNavigation}
+                    toggleFilterPane={toggleFilterPane}
+                    {...restOfQueryProps}
+                    {...sasqRenderProps}
+                    /*
+                     * This is insane, it looks like SASQProps `initialSortState`
+                     * needs to be passed through to MCL, as it relies on MCL calling the initial
+                     * sort handler. Passing through SASQProps.
+                     */
+                    {...sasqProps}
+                    // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
+                    {...{
+                      ...props,
+                      mclProps: {
+                        ...paginationMCLProps,
+                        ...mclProps,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
             </Pane>
             {children}
           </PersistedPaneset>
@@ -431,6 +484,7 @@ SASQLookupComponent.propTypes = {
       label: PropTypes.string,
     })
   ),
+  SearchComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   searchFieldAriaLabel: PropTypes.string,
   searchFieldProps: PropTypes.object,
 };

package/src/lib/SASQLookupComponent/SASQLookupComponent.test.js

@@ -203,7 +203,18 @@ describe('SASQLookupComponent', () => {
       testLabel: 'with filter pane disabled',
       props: {
         ...baseSASQLookupProps,
-        hasFilterPane: false
+        hasFilterPane: false,
+      },
+      expectQueryFire: false,
+      expectedSearchField :true,
+      expectedFilterPane: false,
+    },
+    {
+      testLabel: 'with filter pane disabled (and no search)',
+      props: {
+        ...baseSASQLookupProps,
+        hasFilterPane: false,
+        noSearchField: true,
       },
       expectQueryFire: false,
       expectedSearchField :false,
@@ -392,6 +403,7 @@ describe('SASQLookupComponent', () => {
           beforeEach(async () => {
             mockKy.mockClear();
             await waitFor(async () => {
+              await SearchField().fillIn(''); // Needed to avoid flakiness
               await SearchField().fillIn('some test query');
               await Button('Search').click();
             });

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -98,13 +98,15 @@ const TableBody = ({
         <NoResultsComponent
           {...{
             error,
+            filters: query.filters, // Separate out filters as per "searchTerm" below
             filterPaneIsVisible: filterPaneVisible,
             intlKey: passedIntlKey,
             intlNS: passedIntlNS,
             isError,
             isLoading,
             labelOverrides,
-            searchTerm: query.query,
+            query, // Passing the whole query object just in case
+            searchTerm: query.query, // Here for compatibility, probably better to just use "query" prop
             toggleFilterPane,
             ...noResultsProps, // Anything passed in directly takes precedence
           }}
@@ -141,6 +143,7 @@ TableBody.propTypes = {
   location: PropTypes.object,
   match: PropTypes.object,
   mclProps: PropTypes.object,
+  noResultsProps: PropTypes.object,
   onSort: PropTypes.func,
   path: PropTypes.string.isRequired,
   query: PropTypes.object,

package/src/lib/SASQRoute/README.md

@@ -83,4 +83,9 @@ In this example, **SASQRoute**:
 4. **Customizability:**  
    By overriding default sub-components (`SASQLookupComponent` and `SASQViewComponent`), and by providing custom functions for route paths (`getPathLookup` and `getPathView`), developers can tailor the routing and display behavior to match specific application needs.
 
-This comprehensive setup provided by **SASQRoute** allows for a rapid configuration of complex layouts involving data lookup and detailed views, reducing boilerplate and ensuring consistency across the application.
+This comprehensive setup provided by **SASQRoute** allows for a rapid configuration of complex layouts involving data lookup and detailed views, reducing boilerplate and ensuring consistency across the application.
+
+## Use in Settings
+
+In Settings, often a "search and filter" experience is wanted, but with 2 panes instead of 3. In order to facilitate this,
+SASQRoute (via SASQLookupComponent) exposes a set of props. See SASQLookupComponent README for details.

package/src/lib/hooks/index.js

@@ -19,6 +19,8 @@ export { default as useMutateRefdataCategory } from './useMutateRefdataCategory'
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';
 export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
 
+export { default as useMutateTemplates } from './useMutateTemplates';
+
 export { default as usePrevNextPagination } from './usePrevNextPagination';
 export { default as useStandaloneSASQQueryParameter } from './useStandaloneSASQQueryParameter';
 

package/src/lib/hooks/useMutateTemplates/index.js

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

package/src/lib/hooks/useMutateTemplates/useMutateTemplates.js

@@ -0,0 +1,44 @@
+import noop from 'lodash/noop';
+
+import useInvalidateRefdata from '../useInvalidateRefdata';
+import useMutateGeneric from '../useMutateGeneric';
+
+const useMutateTemplates = ({
+  afterQueryCalls: {
+    delete: afterQueryDelete = noop,
+    post: afterQueryPost = noop,
+    put: afterQueryPut = noop,
+  } = {},
+  endpoint,
+  ...mutateGenericProps
+}) => {
+  const invalidateRefdata = useInvalidateRefdata();
+
+  return useMutateGeneric({
+    afterQueryCalls: {
+      delete: (res) => {
+        invalidateRefdata()
+          .then(() => {
+            afterQueryDelete(res);
+          });
+      },
+      post: (res) => {
+        invalidateRefdata()
+          .then(() => {
+            afterQueryPost(res);
+          });
+      },
+      put: (res) => {
+        invalidateRefdata()
+          .then(() => {
+            afterQueryPut(res);
+          });
+      },
+    },
+    endpoint,
+    queryKey: ['stripes-kint-components', 'useMutateTemplates'],
+    ...mutateGenericProps
+  });
+};
+
+export default useMutateTemplates;

package/src/lib/utils/parseErrorResponse.js

@@ -9,7 +9,13 @@ const parseErrorResponse = async (responseObj) => {
   const contentType = [...(responseObj?.headers ?? [])]?.find(header => header[0]?.toLowerCase() === 'content-type')?.[1] ?? 'application/text';
 
   if (contentType.includes('json')) {
-    errorResp = await responseObj.json();
+    const parsed = await responseObj.json();
+
+    errorResp = {
+      code,
+      ...parsed,
+      message: parsed?.message || parsed?.errors?.[0]?.message || 'something went wrong'
+    };
   } else {
     try {
       errorResp = { code, message: await responseObj.text() };

package/styles/NoResultsMessage.css

@@ -6,6 +6,7 @@
 
  /* Empty Message */
  .noResultsMessage {
+   z-index: -100; /* This ends up in front of anything rendered in the same pane as the MCL otherwise */
    padding: 15px;
    color: var(--color-text-p2);
    position: absolute;

package/styles/SASQLookupComponent.css

@@ -0,0 +1,15 @@
+@import '@folio/stripes-components/lib/variables.css';
+
+.mainPaneContainer {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.controlsContainer {
+    padding: var(--gutter);
+}
+
+.bodyContainer {
+    flex-grow: 1;
+}