aefis-core-ui 2.2.3 → 2.2.5

package/dist/index.modern.js

@@ -10,6 +10,7 @@ import { red, orange, green, blue, grey, yellow, indigo, purple, cyan, teal, lim
 import makeStyles$1 from '@mui/styles/makeStyles';
 import withStyles from '@mui/styles/withStyles';
 import { useTheme, alpha, createTheme as createTheme$1, ThemeProvider, styled as styled$1, StyledEngineProvider } from '@mui/material/styles';
+import { useFormControl } from '@mui/material/FormControl';
 import mustache from 'mustache';
 import { Box as Box$2 } from '@mui/system';
 import { Skeleton as Skeleton$4, TextField as TextField$1, Box as Box$3 } from '@mui/material/';
@@ -42,7 +43,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';
@@ -71,7 +72,6 @@ import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
 import Chip$2 from '@mui/material/Chip';
 import TextField$2 from '@mui/material/TextField';
-import { useFormControl } from '@mui/material/FormControl';
 import get$1 from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import ToggleButton$1 from '@mui/material/ToggleButton';
@@ -2249,10 +2249,10 @@ ClickWrapper.propTypes = {
 const Chip = ({
   id,
   colorPalette,
-  size,
+  size: _size2 = "medium",
   icon,
   label,
-  displayType,
+  displayType: _displayType = "default",
   deleteIcon,
   onDelete,
   canDelete,
@@ -2260,7 +2260,7 @@ const Chip = ({
 }) => {
   const keyValue = useUID();
   const colors = _extends({}, defaultColorPalette, colorPalette);
-  const _size = size === "medium" || size === "large" ? "medium" : size;
+  const _size = _size2 === "medium" || _size2 === "large" ? "medium" : _size2;
   const styles = {
     outlined: {
       borderWidth: 2,
@@ -2280,14 +2280,14 @@ const Chip = ({
     }
   };
   let chipStyles = styles.chip;
-  if (displayType === "outlined") chipStyles = styles.outlined;
-  if (displayType === "withOutline") chipStyles = styles.withOutline;
+  if (_displayType === "outlined") chipStyles = styles.outlined;
+  if (_displayType === "withOutline") chipStyles = styles.withOutline;
   const chipProps = {
     key: id || keyValue,
     icon,
     label,
     sx: chipStyles,
-    variant: displayType === "withOutline" ? "default" : displayType,
+    variant: _displayType === "withOutline" ? "default" : _displayType,
     size: _size,
     deleteIcon: deleteIcon || /*#__PURE__*/jsx(ClickWrapper, {
       label: label,
@@ -2304,12 +2304,21 @@ const Chip = ({
       })
     })
   };
-  const Chip = () => /*#__PURE__*/jsx(Chip$1, _extends({
-    role: role || "presentation",
-    "aria-label": label
-  }, chipProps, canDelete && {
-    onDelete
-  }));
+
+  // TODO: create FormChip (or similar) and use contextful version there. Pure
+  // and Contextful component should be seperated
+  const formControl = useFormControl();
+  const _canDelete = canDelete && !(formControl != null && formControl.disabled);
+  const Chip = () => {
+    return /*#__PURE__*/jsx(Chip$1, _extends({
+      role: role || "presentation",
+      "aria-label": label
+    }, chipProps, _canDelete && {
+      onDelete
+    }, {
+      disabled: formControl == null ? void 0 : formControl.disabled
+    }));
+  };
 
   /**return tooltipText ? (
   	<Tooltip title={tooltipText}>
@@ -2349,12 +2358,6 @@ Chip.propTypes = {
   /** ARIA Role attribute */
   role: PropTypes.string
 };
-Chip.defaultProps = {
-  size: "medium",
-  variant: "default",
-  canRemove: false,
-  displayType: "default"
-};
 
 const colorPalette$v = {
   light: grey[200],
@@ -6882,12 +6885,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 +6934,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 +6959,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 +7166,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 +7191,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 +7369,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 +7392,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 +7415,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 +7441,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 +7453,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)
   }));
 };
@@ -11278,7 +11277,8 @@ const BusinessObjectPicker = _ref => {
       tooltipText: option.description,
       size: props.size === "medium" || props.size === "small" ? "small" : "large",
       onDelete: () => handleTagDelete(option),
-      canDelete: true
+      canDelete: true,
+      displayType: "default"
     })
   }, getKey(option))), [props.size, getKey, getLabel, handleTagDelete]);
   const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
@@ -11327,7 +11327,11 @@ const BusinessObjectPicker = _ref => {
         value: value,
         renderOption: renderOptionProp || (props.type ? renderBusinessObject : renderOption),
         noOptionsText: status === "error" ? "Error loading options" : "No options",
-        getOptionDisabled: optionItem => (optionItem == null ? void 0 : optionItem.__type) === "loadMore" || (optionItem == null ? void 0 : optionItem.__type) === "noOption",
+        getOptionDisabled: optionItem => {
+          if (props.disabled) return true;
+          const type = optionItem == null ? void 0 : optionItem.__type;
+          return type === "loadMore" || type === "noOption";
+        },
         handleHomeEndKeys: true
         // INFO: freeSolo prevents warning:
         // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid
@@ -11355,7 +11359,7 @@ const BusinessObjectPicker = _ref => {
                 style: {
                   color: red[500]
                 }
-              }), listSelect !== true && /*#__PURE__*/jsx(IconButton$1, {
+              }), listSelect !== true && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": open ? `hide options` : "show options",
                 size: "small",
                 onClick: () => {
@@ -11368,7 +11372,7 @@ const BusinessObjectPicker = _ref => {
                     [classes.expandOpen]: open
                   })
                 })
-              }), enhancedSearch && /*#__PURE__*/jsx(IconButton$1, {
+              }), enhancedSearch && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": "search",
                 size: "small",
                 onKeyDown: handleKeyDown,
@@ -11376,6 +11380,7 @@ const BusinessObjectPicker = _ref => {
                   name: events.OPEN_ENHANCED_SEARCH_DIALOG,
                   payload: true
                 }),
+                disabled: props.disabled,
                 children: /*#__PURE__*/jsx(Search, {})
               })]
             })
@@ -11398,13 +11403,14 @@ const BusinessObjectPicker = _ref => {
         flexDirection: "column",
         padding: 1
       },
-      children: /*#__PURE__*/jsx(IconButton$1, {
+      children: /*#__PURE__*/jsx(IconButton, {
         onClick: () => {
           eventDispatch({
             name: events.OPEN_ADD_ITEM_DIALOG,
             payload: true
           });
         },
+        disabled: props.disabled,
         children: /*#__PURE__*/jsx(AddIcon, {
           sx: {
             color: "grey"