@gen3/frontend 0.11.24 → 0.11.26

package/dist/cjs/index.js

@@ -46,7 +46,7 @@ var MiniSearch = require('minisearch');
 var uniq = require('lodash/uniq');
 var sum = require('lodash/sum');
 var lu = require('react-icons/lu');
-require('universal-cookie');
+var Cookies = require('universal-cookie');
 var GraphiQL = require('graphiql');
 var fs = require('fs');
 var path = require('path');
@@ -1433,7 +1433,7 @@ const CredentialsLogin = ({ handleLogin })=>{
 };
 
 // separate function for hashing logic
-function hashString(str) {
+function hashString$1(str) {
     let hash = 0;
     for(let i = 0; i < str.length; i++){
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -1445,7 +1445,7 @@ function hashCode(str) {
     if (str === null || str === '') {
         return 0;
     }
-    return hashString(str);
+    return hashString$1(str);
 }
 
 /**
@@ -11181,6 +11181,22 @@ const CountsValue = ({ label, isSuccess, counts })=>{
     });
 };
 
+const hashString = (s)=>s.split('').reduce((acc, c)=>(acc << 5) - acc + c.charCodeAt(0), 0);
+const getBody = (iframe)=>{
+    const document1 = iframe?.contentWindow || iframe?.contentDocument;
+    return document1?.document?.body || document1?.body;
+};
+const toHtml = (key, value)=>`<input
+    type="hidden"
+    name="${key}"
+    value="${lodash.isPlainObject(value) ? JSON.stringify(value).replace(/"/g, '&quot;') : value}"
+  />`;
+const customKeys = [
+    'expand',
+    'fields',
+    'facets'
+];
+const processParamObj = (key, value)=>lodash.includes(customKeys, key) ? [].concat(value).join() : value;
 /**
  * A notification box that is used to alert the user that their
  * selected file downloads are in progress
@@ -11206,6 +11222,136 @@ const CountsValue = ({ label, isSuccess, counts })=>{
         ]
     });
 };
+/**
+ * Trigger a download by attaching an iFrame to the document with the parameters of the request as fields in a form
+ * @param endpoint - endpoint to be attached with
+ * @param params - body to be attached with post request
+ * @param method - Request Method: GET, PUT, POST
+ * @param dispatch - dispatch send from the parent component to dispatch Modals
+ * @param done - callback function to be called after the download has been initiated
+ * @param Modal400 - Modal for 400 error
+ * @param Modal403 - Modal for 403 error
+ * @param customErrorMessage - custom message to be passed for 400 errors
+ * @param hideNotification - hide the notification
+ */ const download = async ({ endpoint, params, method, dispatch, done, Modal400 = core.Modals.GeneralErrorModal, Modal403 = core.Modals.NoAccessModal, customErrorMessage, hideNotification = false })=>{
+    const cookies = new Cookies();
+    /* Create a cookie with a unique identifier to attach to request. Response from server will use the set-cookie header
+    to remove the cookie when the response is received (aka the download starts). This will only work on when the FE and BE
+    are on the same domain.
+  */ const downloadToken = lodash.uniqueId(`${+new Date()}-`);
+    const cookieKey = navigator.cookieEnabled ? Math.abs(hashString(JSON.stringify(params) + downloadToken)).toString(16) : null;
+    if (cookieKey) {
+        cookies.set(cookieKey, downloadToken);
+    }
+    // place notification in timeout to avoid flicker on fast calls
+    const showNotificationTimeout = setTimeout(()=>notifications.showNotification({
+            message: /*#__PURE__*/ jsxRuntime.jsx(DownloadNotification, {
+                onClick: ()=>{
+                    iFrame.remove();
+                    notifications.cleanNotifications();
+                    if (done) {
+                        done();
+                    }
+                }
+            }),
+            styles: ()=>({
+                    root: {
+                        textAlign: 'center',
+                        display: hideNotification ? 'none' : 'block'
+                    },
+                    closeButton: {
+                        color: 'black',
+                        '&:hover': {
+                            backgroundColor: 'lightslategray'
+                        }
+                    }
+                }),
+            closeButtonProps: {
+                'aria-label': 'Close notification'
+            }
+        }), 100); // set to 100 as that is perceived as instant
+    const fields = lodash.reduce({
+        ...params,
+        downloadCookieKey: cookieKey,
+        downloadCookiePath: '/',
+        attachment: true,
+        ...params.filename !== undefined ? {
+            download: params.filename
+        } : {}
+    }, (result, value, key)=>{
+        const paramValue = processParamObj(key, value);
+        return result + [].concat(paramValue).reduce((acc, v)=>acc + toHtml(key, v), '');
+    }, '');
+    const iFrame = document.createElement('iframe');
+    iFrame.style.display = 'none';
+    iFrame.src = 'about:blank';
+    // Appending to document body to allow navigation away from the current
+    // page and downloads in the background
+    document.body.appendChild(iFrame);
+    const pollForDownloadResult = async ()=>{
+        const executePoll = async (resolve)=>{
+            // Request has been canceled
+            const body = getBody(iFrame);
+            if (body === undefined) {
+                resolve();
+                return;
+            }
+            const content = body?.textContent;
+            // Download has started
+            if (cookieKey !== null && !cookies.get(cookieKey)) {
+                clearTimeout(showNotificationTimeout);
+                notifications.cleanNotifications();
+                if (done) {
+                    done();
+                }
+                resolve();
+            } else {
+                const iFrameHasContent = iFrame.contentWindow?.document.body;
+                const requestError = iFrame.contentWindow?.document.getElementsByTagName('form').length === 0 && content !== '';
+                if (iFrameHasContent && requestError) {
+                    clearTimeout(showNotificationTimeout);
+                    notifications.cleanNotifications();
+                    const errorMessage = /{"(?:message|error)":"([^"]*)"/g.exec(content ?? 'Undefined')?.[1];
+                    if (errorMessage === 'internal server error' || errorMessage === undefined) {
+                        dispatch(core.showModal({
+                            modal: Modal400,
+                            message: errorMessage
+                        }));
+                    } else if (errorMessage === 'Your token is invalid or expired. Please get a new token.') {
+                        dispatch(core.showModal({
+                            modal: Modal403,
+                            message: errorMessage
+                        }));
+                    } else {
+                        dispatch(core.showModal({
+                            modal: Modal400,
+                            message: customErrorMessage || errorMessage
+                        }));
+                    }
+                    if (done) {
+                        done();
+                    }
+                    resolve();
+                } else {
+                    setTimeout(executePoll, 1000, resolve);
+                }
+            }
+        };
+        return new Promise(executePoll);
+    };
+    const addFormAndSubmit = ()=>{
+        //do all of this together for FireFox support
+        const form = document.createElement('form');
+        form.method = method.toUpperCase();
+        form.action = endpoint;
+        form.innerHTML = fields;
+        getBody(iFrame).appendChild(form);
+        form.submit();
+    };
+    addFormAndSubmit();
+    await pollForDownloadResult();
+    iFrame.remove();
+};
 
 const showErrorMessage = (error)=>{
     notifications.showNotification({
@@ -19739,6 +19885,78 @@ border-solid
 rounded-[7px]
 `;
 
+/**
+ * A Button component that downloads data from a given endpoint.
+ * The component will handle all download logic including fetching
+ * the data, creating the file, and downloading the file.
+ * @param endpoint - The endpoint to download from.
+ * @param disabled - Whether the button is disabled.
+ * @param inactiveText - The text to display when the button is inactive.
+ * @param activeText - The text to display when the button is active.
+ * @param filename - The name of the file to download.
+ * @param size - The size of the download.
+ * @param format - The format of the download.
+ * @param fields - The fields to download.
+ * @param caseFilters - The case filters to download.
+ * @param filters - The filters to download.
+ * @param extraParams - Any extra parameters to download.
+ * @param method - The method to use for the download.
+ * @param customStyle - Any custom styles to apply to the button.
+ * @param showLoading - Whether to show the loading icon.
+ * @param showIcon - Whether to show the download icon.
+ * @param preventClickEvent - Whether to prevent the default click event.
+ * @param onClick - The function to call when the button is clicked.
+ * @param setActive - The function to call when the button is set active.
+ * @param active - Whether the button is active.
+ * @param Modal403 - The modal to display when a 403 error occurs.
+ * @param Modal400 - The modal to display when a 400 error occurs.
+ * @param toolTip - The tooltip to display.
+ * @category Buttons
+ */ const DownloadButton = /*#__PURE__*/ React.forwardRef(({ endpoint = '', disabled = false, inactiveText, activeText, params = {}, method = 'POST', customStyle, setActive, onClick, showLoading = true, showIcon = true, preventClickEvent = false, active, Modal400 = core.Modals.GeneralErrorModal, Modal403 = core.Modals.NoAccessModal, toolTip, ...buttonProps }, ref)=>{
+    const text = active ? activeText : inactiveText;
+    const dispatch = core.useCoreDispatch();
+    const Icon = active ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {
+        size: "sm",
+        className: "p-1"
+    }) : /*#__PURE__*/ jsxRuntime.jsx(fi.FiDownload, {
+        title: "download",
+        size: 16
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        disabled: !toolTip,
+        label: toolTip,
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+            ref: ref,
+            leftSection: showIcon && inactiveText && /*#__PURE__*/ jsxRuntime.jsx(fi.FiDownload, {}),
+            disabled: disabled,
+            className: customStyle || `text-base-lightest ${disabled ? 'bg-base' : 'bg-primary hover:bg-primary-darker'} `,
+            loading: showLoading && active,
+            onClick: ()=>{
+                if (!preventClickEvent && onClick) {
+                    onClick();
+                    return;
+                }
+                dispatch(core.hideModal());
+                if (setActive) setActive(true);
+                download({
+                    endpoint,
+                    params,
+                    method,
+                    dispatch,
+                    done: ()=>{
+                        if (setActive) setActive(false);
+                    },
+                    Modal400,
+                    Modal403
+                });
+            },
+            ...buttonProps,
+            children: text || Icon
+        })
+    });
+});
+DownloadButton.displayName = 'DownloadButton';
+
 // Define theme for mantine v7
 const createMantineTheme = (fonts, colors)=>{
     const theme = core$1.createTheme({