aefis-core-ui 2.2.3-rc4 → 2.3.0-rc1

package/dist/index.modern.js

@@ -42,7 +42,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import CircularProgress$1 from '@mui/material/CircularProgress';
 import { useQuery, useInfiniteQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from 'react-query';
 import axios from 'axios';
-import _ from 'lodash';
+import _, { merge } from 'lodash';
 import qs from 'query-string';
 import SortIcon from '@mui/icons-material/Sort';
 import { useSnackbar, SnackbarProvider } from 'notistack';
@@ -5296,8 +5296,7 @@ const useStyles$y = makeStyles(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
-    position: "relative",
-    minHeight: 60
+    position: "relative"
   },
   closeButton: {
     position: "absolute",
@@ -6882,12 +6881,9 @@ const sanitizedEval = (code, context, options) => {
   }
 };
 
+// TODO: move this to a state
 let token = "";
-const apiClient = axios.create({
-  validateStatus: false
-  //baseURL: process.env.NODE_ENV === "development" ? "" : "/ui"
-});
-
+const apiClient = axios.create({});
 const parseQueryParam = url => {
   const hashIndex = url.indexOf("#");
   const noHashExists = hashIndex === -1;
@@ -6934,44 +6930,11 @@ apiClient.interceptors.request.use(config => {
     for (const key in queryParams) {
       queryParams[key] = objectParse(queryParams[key]);
     }
-    config.params = _.merge(queryParams, config.params);
+    config.params = merge(queryParams, config.params);
     config.url = urlOrigin;
   }
   return config;
 });
-const getLoggerErrorMessage = error => {
-  if (error.response) {
-    var _error$response, _error$request, _error$response2, _error$response2$conf, _error$response2$conf2;
-    const status = (_error$response = error.response) == null ? void 0 : _error$response.status;
-    const URL = (_error$request = error.request) == null ? void 0 : _error$request.responseURL;
-    const method = (_error$response2 = error.response) == null ? void 0 : (_error$response2$conf = _error$response2.config) == null ? void 0 : (_error$response2$conf2 = _error$response2$conf.method) == null ? void 0 : _error$response2$conf2.toUpperCase();
-    const message = `RequestError: [${method}] ${status} ${URL}`;
-    return message;
-  } else if (error.request) {
-    return "RequestError: No Response";
-  } else {
-    return `RequestError: ${error.message.toString()}`;
-  }
-};
-
-// Error is formatted to react query and reporting is handled by react-query
-// This prevent re-tried queries to trigger logger request
-const loggerForwardError = promise => (...args) => {
-  return promise(...args).catch(error => {
-    if (window.logger) {
-      var _error$response3, _error$response3$conf, _window$logger;
-      const message = getLoggerErrorMessage(error);
-      const requestBody = ((_error$response3 = error.response) == null ? void 0 : (_error$response3$conf = _error$response3.config) == null ? void 0 : _error$response3$conf.data) || null;
-      (_window$logger = window.logger) == null ? void 0 : _window$logger.logELKEvent == null ? void 0 : _window$logger.logELKEvent({
-        name: message,
-        data: requestBody
-      });
-      throw message;
-    } else {
-      throw error;
-    }
-  });
-};
 function download(url) {
   apiClient.request({
     url: url,
@@ -6992,33 +6955,32 @@ function download(url) {
     link.remove();
   });
 }
-function get() {
-  let args = [...arguments];
-  if (args[0].includes("http://gateway") || args[0].includes("https://gateway")) {
-    args[1]["headers"] = {
-      Authorization: "Bearer " + token
-    };
-  }
-  return apiClient.get(...args);
+function get(endPoint, config = {}) {
+  const isGateway = endPoint.includes("http://gateway") || endPoint.includes("https://gateway");
+  return apiClient.get(endPoint, _extends({}, config, {
+    headers: _extends({}, config.headers, isGateway && {
+      Authorization: `Bearer ${token}`
+    })
+  }));
 }
-function post() {
-  return apiClient.post(...arguments);
+function post(...args) {
+  return apiClient.post(...args);
 }
-function put() {
-  return apiClient.put(...arguments);
+function put(...args) {
+  return apiClient.put(...args);
 }
-function destroy() {
-  return apiClient.destroy(...arguments);
+function destroy(...args) {
+  return apiClient.delete(...args);
 }
 async function setUserToken(t) {
   token = t;
 }
 var http = {
-  get: loggerForwardError(get),
-  post: loggerForwardError(post),
-  put: loggerForwardError(put),
-  download: loggerForwardError(download),
-  delete: loggerForwardError(destroy),
+  get,
+  post,
+  put,
+  download,
+  delete: destroy,
   setUserToken
 };
 
@@ -7200,6 +7162,23 @@ let dataSourceConfiguration = {
   }
 };
 
+// TODO: move this function to logger
+const getLoggerErrorMessage = error => {
+  if (!error.isAxiosError) return (error == null ? void 0 : error.toString()) || "Undefined error";
+  if (error.response) {
+    var _error$response, _error$request, _error$response2, _error$response2$conf, _error$response2$conf2;
+    const status = (_error$response = error.response) == null ? void 0 : _error$response.status;
+    const URL = (_error$request = error.request) == null ? void 0 : _error$request.responseURL;
+    const method = (_error$response2 = error.response) == null ? void 0 : (_error$response2$conf = _error$response2.config) == null ? void 0 : (_error$response2$conf2 = _error$response2$conf.method) == null ? void 0 : _error$response2$conf2.toUpperCase();
+    const message = `RequestError: [${method}] ${status} ${URL}`;
+    return message;
+  } else if (error.request) {
+    return "RequestError: No Response";
+  } else {
+    return `RequestError: ${error.message.toString()}`;
+  }
+};
+
 /**
  * wraps function and reports (fire request) to Logger
  * @param {function} onError
@@ -7208,11 +7187,29 @@ let dataSourceConfiguration = {
 const logger = onError => (error, ...rest) => {
   var _window$logger;
   onError == null ? void 0 : onError(error, ...rest);
-  const event = {
-    name: (error == null ? void 0 : error.toString()) || "Undefined error"
-  };
-  (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog == null ? void 0 : _window$logger.sendLog(event);
+  (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+    name: getLoggerErrorMessage(error),
+    data: error
+  });
 };
+
+/**
+ * Promisify fetch, this is required for useQuery to handle error properly.
+ * @param {Promise} fetch
+ * @returns Promise
+ */
+const promisifyRequest = fetch => (...args) => new Promise(async (resolve, reject) => {
+  try {
+    const res = await fetch(...args);
+    resolve(res);
+  } catch (error) {
+    var _window$logger2;
+    reject(error);
+    (_window$logger2 = window.logger) == null ? void 0 : _window$logger2.logEvent({
+      name: getLoggerErrorMessage(error)
+    });
+  }
+});
 const getGenericBusinessObjectAction = source => {
   var typeAction = source.split("_");
   return typeAction.length === 2 ? `businessObject_${typeAction[1]}` : source;
@@ -7368,7 +7365,7 @@ const useDataSourceQuery = (dataSource, parameters, options, templateContext) =>
     return runQuery(dataSource, parameters, templateContext);
   };
   const fetchStrategy = configuration && typeof configuration.endPoint === "function" ? configuration.endPoint : fetch;
-  return useQuery([dataSource, parameters], fetchStrategy, _extends({}, (configuration == null ? void 0 : configuration.options) || {}, options, {
+  return useQuery([dataSource, parameters], promisifyRequest(fetchStrategy), _extends({}, (configuration == null ? void 0 : configuration.options) || {}, options, {
     onError: logger(options == null ? void 0 : options.onError)
   }));
 };
@@ -7391,12 +7388,11 @@ const useDataSourceInfiniteQuery = (dataSource, parameters, initialParameters, o
   const configuration = getConfiguration(dataSource);
   const fetch = ({
     pageParam: _pageParam = initialParameters
-  }) => {
-    return runQuery(dataSource, _extends({}, parameters, _pageParam));
-  };
+  }) => runQuery(dataSource, _extends({}, parameters, _pageParam));
   const fetchStrategy = configuration && typeof configuration.endPoint === "function" ? configuration.endPoint : fetch;
-  return useInfiniteQuery([dataSource, parameters], fetchStrategy, _extends({}, configuration ? configuration.options : {}, options, {
-    onError: logger(options == null ? void 0 : options.onError)
+  return useInfiniteQuery([dataSource, parameters], promisifyRequest(fetchStrategy), _extends({}, configuration ? configuration.options : {}, options, {
+    onError: logger(options == null ? void 0 : options.onError),
+    retry: false
   }));
 };
 
@@ -7415,7 +7411,6 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
   var _mutationOptions;
   const queryClient = useQueryClient();
   const configuration = getConfiguration(dataSource);
-  getEndpoint(dataSource, configuration);
   const invalidateFunction = () => {
     if (invalidateQueries) {
       for (let q of invalidateQueries) {
@@ -7442,11 +7437,11 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
     };
   }
   function requestCall(requestBody) {
-    const request = axios[httpMethodType];
+    const request = http[httpMethodType];
     const endPoint = getEndpoint(dataSource, configuration); //?
     if (httpMethodType === "get" || httpMethodType === "delete") {
       // INFO (Caveat!): requestBody is used as query param in case of
-      // httpMethodType is get or delete
+      // httpMethodType is GET or DELETE
       const params = _extends({}, baseParameters, requestBody);
       return request(endPoint, {
         params
@@ -7454,7 +7449,7 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
     }
     return request(endPoint, requestBody);
   }
-  return useMutation(requestCall, _extends({}, mutationOptions, {
+  return useMutation(promisifyRequest(requestCall), _extends({}, mutationOptions, {
     onError: logger((_mutationOptions = mutationOptions) == null ? void 0 : _mutationOptions.onError)
   }));
 };
@@ -10751,7 +10746,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       exportOptions: props.exportOptions,
       actions: props.actions && props.actions.length > 0 || props.addAction ? updateActions(props.actions, handleDrawerOpen, enableTableRowAction, selectedRowCount, Add) : undefined,
       onFilterClick: isFilterPanelEnabled ? handleFilterClick : undefined,
-      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0 || filterPanelState.searchText,
+      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0 || !!filterPanelState.searchText,
       disableFilterButton: isFetching
     }, props.titleAndActionHeaderProps)), /*#__PURE__*/jsx(DataTable, _extends({}, props, {
       tableRef: DataTableRef,
@@ -14659,7 +14654,36 @@ Header.propTypes = {
   allStepsCompleted: PropTypes.bool
 };
 
+// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$5 = makeStyles(theme => ({
+  container: {
+    position: "absolute",
+    overflowY: "auto",
+    left: 0,
+    right: 0,
+    bottom: 64,
+    top: 178
+  },
+  tabBar: {
+    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    zIndex: 1,
+    background: "#ffffff",
+    padding: theme.spacing(2)
+  },
+  scrolledTabBar: {
+    zIndex: 1,
+    borderBottom: "none",
+    background: "#ffffff",
+    padding: theme.spacing(2),
+    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
+  },
+  bottomBar: {
+    borderTop: "1px solid rgba(0, 0, 0, 0.12)"
+  },
+  scrolledBottomBar: {
+    borderTop: "none",
+    boxShadow: "0px -4px 8px -4px rgba(0,0,0,0.12)"
+  },
   buttonContainer: {
     marginLeft: "auto",
     display: "flex"
@@ -14672,7 +14696,7 @@ const useStyles$5 = makeStyles(theme => ({
     marginRight: 8
   }
 }));
-const bottomBarDefaultStyle = {
+const bottomBarStyle = {
   background: "#ffffff",
   display: "flex",
   minHeight: 64,
@@ -14688,7 +14712,7 @@ const bottomBarDefaultStyle = {
   right: 0
 };
 
-/** Component to display a "stepper" wizard panel for multiple step processes with swipeable tabs. Designed to be display within a Drawer component. */
+/** Component to display a "stepper" wizard panel for multiple step proceses with swipeable tabs. Designed to be display within a Drawer component. */
 
 const WizardPanel = props => {
   var _props$panels;
@@ -14720,34 +14744,9 @@ const WizardPanel = props => {
     props.onComplete && props.onComplete();
   };
   const theme = useTheme$1();
-  const stepsContainer = {
-    position: "absolute",
-    overflowY: "auto",
-    left: 0,
-    right: 0,
-    bottom: 64,
-    top: 178
-  };
   const containerStyle = {
     backgroundColor: props.cardContent ? "rgb(239, 242, 246)" : "rgb(255,255,255)"
   };
-  const tabBarStyle = {
-    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
-    zIndex: 1,
-    background: "#ffffff",
-    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px"
-  };
-  const scrolledTabBarStyle = {
-    zIndex: 1,
-    borderBottom: "none",
-    background: "#ffffff",
-    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px",
-    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
-  };
-  const bottomBarStyle = _extends({}, bottomBarDefaultStyle, {
-    borderTop: "none",
-    boxShadow: props.display === "drawer" ? "0px -4px 8px -4px rgba(0,0,0,0.12)" : "none"
-  });
   useEffect(() => {
     var _containerRef$current;
     (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.scrollTo == null ? void 0 : _containerRef$current.scrollTo({
@@ -14761,9 +14760,9 @@ const WizardPanel = props => {
   }, [props.completed]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(AppBar$1, {
-      position: props.display === "drawer" ? "sticky" : "relative",
+      position: "sticky",
       component: "div",
-      sx: scrollTrigger ? scrolledTabBarStyle : tabBarStyle,
+      className: scrollTrigger ? classes.scrolledTabBar : classes.tabBar,
       elevation: 0,
       color: "default",
       children: /*#__PURE__*/jsx(Header, {
@@ -14774,7 +14773,7 @@ const WizardPanel = props => {
     }), /*#__PURE__*/jsx(Box$1, {
       ref: containerRef,
       sx: containerStyle,
-      style: props.display === "drawer" ? stepsContainer : undefined,
+      className: classes.container,
       children: /*#__PURE__*/jsx(SwipeableViews, {
         axis: theme.direction === "rtl" ? "x-reverse" : "x",
         index: activeStep,
@@ -14791,6 +14790,7 @@ const WizardPanel = props => {
       })
     }), /*#__PURE__*/jsx(Box$1, {
       style: bottomBarStyle,
+      className: classes.scrolledBottomBar,
       children: /*#__PURE__*/jsxs(Box$1, {
         className: classes.buttonContainer,
         children: [/*#__PURE__*/jsx(Button, {
@@ -14851,12 +14851,9 @@ WizardPanel.defaultProps = {
   completed: false,
   completeButtonText: "Finish",
   disableComplete: false,
-  completing: false,
-  display: "drawer"
+  completing: false
 };
 WizardPanel.propTypes = {
-  /** Where to display the panel, a dialog or drawer. */
-  display: PropTypes.oneOf(["drawer"], ["dialog"]),
   /** The data defining the wizard steps and content. */
   panels: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.any.isRequired,
@@ -17289,6 +17286,9 @@ const Upload = props => {
     type: (message == null ? void 0 : message.type) || "info",
     canDismiss: (message == null ? void 0 : message.canDismiss) || true
   };
+  const {
+    error
+  } = useNotify();
   const filePondProps = {
     acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
     files,
@@ -17300,7 +17300,16 @@ const Upload = props => {
         headers: {
           Methods: "POST"
         },
-        onload: handleUploadResponse
+        onload: handleUploadResponse,
+        onerror: e => {
+          var _window$logger;
+          const message = `The image could not be uploaded.`;
+          error(message);
+          (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+            name: message,
+            data: e
+          });
+        }
       },
       load: handleLoad,
       revert: handleDelete