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

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/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;
+}