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

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/downloadBlob.js

@@ -0,0 +1,42 @@
+/*
+ * The options block allows for a very customisable approach to naming files
+ * and applying extensions. The default options are chosen in order to keep default
+ * behaviour found in other apps, but this can now be changed use case by use case.
+ *
+ * This is copied from stripes-erm-components
+ */
+
+const downloadBlob = (
+  name,
+  {
+    fileExt = '',
+    spaceDelimiter = '_',
+    dotDelimiter = '',
+    processWhitespace = true,
+    processDots = false
+  } = {}
+) => {
+  let downloadName = name;
+  if (processWhitespace) {
+    downloadName = downloadName.replaceAll(/\s/g, spaceDelimiter);
+  }
+
+  if (processDots) {
+    downloadName = downloadName.replaceAll(/\./g, dotDelimiter);
+  }
+
+  if (fileExt.length) {
+    downloadName = `${downloadName}.${fileExt}`;
+  }
+
+  return blob => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = downloadName;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+};
+
+export default downloadBlob;

package/src/lib/utils/index.js

@@ -33,3 +33,4 @@ export { default as parseErrorResponse } from './parseErrorResponse';
 
 export { default as modConfigEntriesQueryKey } from './modConfigEntriesQueryKey';
 export { default as parseModConfigEntry } from './parseModConfigEntry';
+export { default as downloadBlob } from './downloadBlob';

package/styles/FileUploader.css

@@ -0,0 +1,34 @@
+@import "@folio/stripes-components/lib/variables.css";
+
+.upload {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 150px;
+  padding: var(--gutter);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius);
+  background-color: var(--color-fill);
+}
+
+.uploadTitle {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.activeUpload {
+  background-color: var(--color-fill-current);
+  color: var(--bg);
+  border-style: dashed;
+}
+
+.activeUploadTitle {
+  font-size: var(--font-size-large);
+}
+
+.children {
+  width: 100%;
+  display: flex;
+}

package/styles/FileView.css

@@ -0,0 +1,8 @@
+@import '@folio/stripes-components/lib/variables.css';
+
+.fileViewContainer {
+  width: 100%;
+  border-top: 1px solid var(--color-border);
+  padding: var(--gutter-static-one-third) var(--gutter);
+  margin-top: var(--gutter);
+}

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