@gridsuite/commons-ui 0.22.1 → 0.24.1

package/lib/components/CardErrorBoundary/card-error-boundary.js

@@ -0,0 +1,171 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+
+var _CardHeader = _interopRequireDefault(require("@mui/material/CardHeader"));
+
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+
+var _CardActions = _interopRequireDefault(require("@mui/material/CardActions"));
+
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+
+var _Replay = _interopRequireDefault(require("@mui/icons-material/Replay"));
+
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+
+var _styles = require("@mui/material/styles");
+
+var _reactIntl = require("react-intl");
+
+var _excluded = ["expand"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ExpandMore = (0, _styles.styled)(function (props) {
+  var expand = props.expand,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(_IconButton["default"], other);
+})(function (_ref) {
+  var theme = _ref.theme,
+      expand = _ref.expand;
+  return {
+    transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest
+    })
+  };
+});
+
+var CardErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(CardErrorBoundary, _React$Component);
+
+  function CardErrorBoundary(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
+      hasError: false,
+      expanded: false,
+      error: undefined
+    };
+    _this.handleExpandClick = _this.handleExpandClick.bind(_assertThisInitialized(_this));
+    _this.handleReloadClick = _this.handleReloadClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  CardErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true,
+      error: error
+    };
+  };
+
+  var _proto = CardErrorBoundary.prototype;
+
+  _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.error('CardErrorBoundary caught: ', error, errorInfo);
+  };
+
+  _proto.handleExpandClick = function handleExpandClick() {
+    this.setState(function (state) {
+      return {
+        expanded: !state.expanded
+      };
+    });
+  };
+
+  _proto.handleReloadClick = function handleReloadClick() {
+    this.setState(function (state) {
+      return {
+        hasError: false,
+        expanded: false,
+        error: undefined
+      };
+    });
+  };
+
+  _proto.render = function render() {
+    if (this.state.hasError) {
+      var _this$state = this.state,
+          error = _this$state.error,
+          expanded = _this$state.expanded;
+      return /*#__PURE__*/React.createElement(_Box["default"], {
+        sx: {
+          p: 4
+        }
+      }, /*#__PURE__*/React.createElement(_Card["default"], {
+        sx: {
+          mx: 'auto',
+          maxWidth: 600
+        }
+      }, /*#__PURE__*/React.createElement(_CardHeader["default"], {
+        title: /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, {
+          id: "card_error_boundary/title",
+          defaultMessage: "Sorry, Unexpected error :("
+        })
+      }), /*#__PURE__*/React.createElement(_CardContent["default"], null, /*#__PURE__*/React.createElement(_Typography["default"], {
+        variant: "body2",
+        color: "text.secondary"
+      }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, {
+        id: "card_error_boundary/content",
+        defaultMessage: "Please reload, or close and reopen this application, or contact support."
+      }))), /*#__PURE__*/React.createElement(_CardActions["default"], {
+        disableSpacing: true
+      }, /*#__PURE__*/React.createElement(_IconButton["default"], {
+        onClick: this.handleReloadClick,
+        "aria-label": "reload"
+      }, /*#__PURE__*/React.createElement(_Replay["default"], null)), /*#__PURE__*/React.createElement(ExpandMore, {
+        expand: expanded,
+        onClick: this.handleExpandClick,
+        "aria-expanded": expanded,
+        "aria-label": "show more"
+      }, /*#__PURE__*/React.createElement(_ExpandMore["default"], null))), /*#__PURE__*/React.createElement(_Collapse["default"], {
+        "in": expanded
+      }, /*#__PURE__*/React.createElement(_CardContent["default"], null, /*#__PURE__*/React.createElement(_Typography["default"], {
+        variant: "body2",
+        color: "text.secondary"
+      }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, {
+        id: "card_error_boundary/expandederrorheader",
+        defaultMessage: "Error message (and see more information in the developper console):"
+      })), /*#__PURE__*/React.createElement(_Typography["default"], {
+        variant: "caption"
+      }, error.message)))));
+    }
+
+    return this.props.children;
+  };
+
+  return CardErrorBoundary;
+}(React.Component);
+
+var _default = CardErrorBoundary;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/CardErrorBoundary/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _cardErrorBoundary = _interopRequireDefault(require("./card-error-boundary.js"));
+
+exports["default"] = _cardErrorBoundary["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+module.exports = exports.default;

package/lib/components/ElementSearchDialog/element-search-dialog.js

@@ -33,21 +33,16 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
       elementsFound = props.elementsFound,
       renderElement = props.renderElement;
 
-  var _useState = (0, _react.useState)([]),
-      elements = _useState[0],
-      setElements = _useState[1];
+  var _useState = (0, _react.useState)(false),
+      expanded = _useState[0],
+      setExpanded = _useState[1];
 
   var _useState2 = (0, _react.useState)(false),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      loading = _useState3[0],
-      setLoading = _useState3[1];
+      loading = _useState2[0],
+      setLoading = _useState2[1];
 
   (0, _react.useEffect)(function () {
     setLoading(false);
-    setElements(elementsFound);
   }, [elementsFound]);
 
   var handleSearchTermChange = function handleSearchTermChange(term) {
@@ -56,14 +51,12 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
       onSearchTermChange(term);
       setExpanded(true);
     } else {
-      setElements([]);
       setExpanded(false);
     }
   };
 
   var handleClose = (0, _react.useCallback)(function () {
     setExpanded(false);
-    setElements([]);
     onClose();
   }, [onClose]);
   return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
@@ -76,9 +69,6 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
     id: "element-search",
     forcePopupIcon: false,
     open: expanded,
-    onOpen: function onOpen() {
-      setElements([]);
-    },
     onClose: function onClose() {
       setExpanded(false);
     },
@@ -95,7 +85,7 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
     isOptionEqualToValue: function isOptionEqualToValue(option, value) {
       return option.id === value.id;
     },
-    options: elements,
+    options: loading ? [] : elementsFound,
     loading: loading,
     autoHighlight: true,
     noOptionsText: intl.formatMessage({

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -27,6 +27,8 @@ var _reactIntl = require("react-intl");
 
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
+var _overflowableText = _interopRequireDefault(require("../OverflowableText/overflowable-text"));
+
 var _excluded = ["name", "classes", "rows", "columns", "rowHeight", "headerHeight", "rowCount", "sortable", "enableExportCSV"],
     _excluded2 = ["dataKey"];
 
@@ -93,7 +95,11 @@ var defaultStyles = {
     fontWeight: 'bold'
   },
   rowBackgroundDark: {},
-  rowBackgroundLight: {}
+  rowBackgroundLight: {},
+  cellTooltip: {
+    maxWidth: '1260px',
+    fontSize: '0.9rem'
+  }
 };
 
 var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
@@ -241,7 +247,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, (_clsx2 = {}, _clsx2[classes.noClick] = displayedValue === undefined || onCellClick == null || columns[columnIndex].clickable === undefined || !columns[columnIndex].clickable, _clsx2[classes.tableCellColor] = displayedValue === undefined || onCellClick !== null && columns[columnIndex].clickable !== undefined && columns[columnIndex].clickable, _clsx2)),
         variant: "body",
         style: {
-          height: rowHeight
+          height: rowHeight,
+          width: '100%'
         },
         align: columnIndex != null && columns[columnIndex].numeric || false ? 'right' : 'left',
         onClick: function onClick() {
@@ -249,7 +256,10 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
             onCellClick(rows[rowIndex], columns[columnIndex]);
           }
         }
-      }, displayedValue);
+      }, /*#__PURE__*/_react["default"].createElement(_overflowableText["default"], {
+        text: displayedValue,
+        tooltipStyle: classes.cellTooltip
+      }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "headerRenderer", function (_ref4) {

package/lib/components/OverflowableText/overflowable-text.js

@@ -13,7 +13,7 @@ var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["text", "className", "children"];
+var _excluded = ["text", "tooltipStyle", "className", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -45,6 +45,7 @@ var useStyles = (0, _makeStyles["default"])(overflowStyle);
 
 var OverflowableText = function OverflowableText(_ref) {
   var text = _ref.text,
+      tooltipStyle = _ref.tooltipStyle,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -67,7 +68,7 @@ var OverflowableText = function OverflowableText(_ref) {
     title: text || '',
     disableHoverListener: !overflowed,
     classes: {
-      tooltip: classes.tooltip
+      tooltip: tooltipStyle ? tooltipStyle : classes.tooltip
     }
   }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
     ref: element,
@@ -80,6 +81,7 @@ exports.OverflowableText = OverflowableText;
 OverflowableText.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _propTypes["default"].array,
   text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].node]),
+  tooltipStyle: _propTypes["default"].string,
   className: _propTypes["default"].string
 } : {};
 var _default = OverflowableText;

package/lib/components/ReportViewer/log-table.js

@@ -74,6 +74,7 @@ var LogTable = function LogTable(_ref) {
     id: 'severity',
     dataKey: 'severity',
     maxWidth: SEVERITY_COLUMN_FIXED_WIDTH,
+    minWidth: SEVERITY_COLUMN_FIXED_WIDTH,
     cellRenderer: severityCellRender
   }, {
     label: intl.formatMessage({

package/lib/components/ReportViewer/report-viewer.js

@@ -121,7 +121,7 @@ function ReportViewer(_ref) {
     xs: 12,
     sm: 3,
     style: {
-      height: '100%',
+      height: '95%',
       borderRight: '1px solid rgba(81, 81, 81, 1)'
     }
   }, /*#__PURE__*/_react["default"].createElement(_TreeView["default"], {
@@ -142,7 +142,7 @@ function ReportViewer(_ref) {
     xs: 12,
     sm: 9,
     style: {
-      height: '100%'
+      height: '95%'
     }
   }, /*#__PURE__*/_react["default"].createElement(_logTable["default"], {
     logs: logs

package/lib/components/TreeViewFinder/TreeViewFinder.js

@@ -113,7 +113,8 @@ var TreeViewFinder = function TreeViewFinder(props) {
       onTreeBrowse = props.onTreeBrowse,
       validationButtonText = props.validationButtonText,
       onlyLeaves = props.onlyLeaves,
-      multiselect = props.multiselect;
+      multiselect = props.multiselect,
+      sortMethod = props.sortMethod;
 
   var _useState = (0, _react.useState)({}),
       mapPrintedNodes = _useState[0],
@@ -225,7 +226,7 @@ var TreeViewFinder = function TreeViewFinder(props) {
       key: node.id,
       nodeId: node.id,
       label: renderTreeItemLabel(node)
-    }, Array.isArray(node.children) ? node.children.length ? node.children.map(function (child) {
+    }, Array.isArray(node.children) ? node.children.length ? node.children.sort(sortMethod).map(function (child) {
       return renderTree(child);
     }) : [false] // Pass non empty Array here to simulate a child then this node isn't considered as a leaf.
     : null);
@@ -269,7 +270,7 @@ var TreeViewFinder = function TreeViewFinder(props) {
       className: classes.icon
     }),
     multiSelect: multiselect
-  }, data && Array.isArray(data) ? data.map(function (child) {
+  }, data && Array.isArray(data) ? data.sort(sortMethod).map(function (child) {
     return renderTree(child);
   }) : null)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     variant: "contained",
@@ -319,7 +320,8 @@ TreeViewFinder.propTypes = process.env.NODE_ENV !== "production" ? {
   defaultSelected: _propTypes["default"].arrayOf(_propTypes["default"].string),
   defaultExpanded: _propTypes["default"].arrayOf(_propTypes["default"].string),
   onlyLeaves: _propTypes["default"].bool,
-  multiselect: _propTypes["default"].bool
+  multiselect: _propTypes["default"].bool,
+  sortMethod: _propTypes["default"].func
 } : {};
 /* TreeViewFinder props default values */
 
@@ -327,7 +329,8 @@ TreeViewFinder.defaultProps = {
   defaultSelected: [],
   defaultExpanded: [],
   onlyLeaves: true,
-  multiselect: false
+  multiselect: false,
+  sortMethod: undefined
 };
 
 var _default = (0, _withStyles["default"])(defaultStyles)(TreeViewFinder);

package/lib/components/translations/card-error-boundary-en.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var card_error_boundary_en = {
+  'card_error_boundary/title': 'Sorry, unexpected error :(',
+  'card_error_boundary/content': 'Please reload, or close and reopen this application, or contact support.',
+  'card_error_boundary/expandederrorheader': 'Error message (and see more information in the developper console):'
+};
+var _default = card_error_boundary_en;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/translations/card-error-boundary-fr.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var card_error_boundary_fr = {
+  'card_error_boundary/title': 'Désolé, erreur inattendue :(',
+  'card_error_boundary/content': 'Veuillez recharger, ou fermer et réouvrir cette application, ou contacter le support.',
+  'card_error_boundary/expandederrorheader': "Message d'erreur (et voir plus d'informations dans la console developpeur):"
+};
+var _default = card_error_boundary_fr;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/index.js

@@ -136,10 +136,22 @@ var _equipmentSearchFr = _interopRequireDefault(require("./components/translatio
 
 exports.equipment_search_fr = _equipmentSearchFr["default"];
 
+var _cardErrorBoundaryEn = _interopRequireDefault(require("./components/translations/card-error-boundary-en"));
+
+exports.card_error_boundary_en = _cardErrorBoundaryEn["default"];
+
+var _cardErrorBoundaryFr = _interopRequireDefault(require("./components/translations/card-error-boundary-fr"));
+
+exports.card_error_boundary_fr = _cardErrorBoundaryFr["default"];
+
 var _equipmentItem = require("./components/ElementSearchDialog/equipment-item");
 
 exports.EquipmentItem = _equipmentItem.EquipmentItem;
 
+var _CardErrorBoundary2 = _interopRequireDefault(require("./components/CardErrorBoundary"));
+
+exports.CardErrorBoundary = _CardErrorBoundary2["default"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/AuthService.js

@@ -147,6 +147,15 @@ function logout(dispatch, userManagerInstance) {
 function dispatchUser(dispatch, userManagerInstance) {
   return userManagerInstance.getUser().then(function (user) {
     if (user) {
+      var now = parseInt(Date.now() / 1000);
+      var exp = (0, _jwtDecode["default"])(user.id_token).exp;
+      var idTokenExpiresIn = exp - now;
+
+      if (idTokenExpiresIn < 0) {
+        console.debug('User token is expired and will not be dispatched');
+        return;
+      }
+
       console.debug('User has been successfully loaded from store.');
       return dispatch((0, _actions.setLoggedUser)(user));
     } else {
@@ -191,8 +200,9 @@ function handleUser(dispatch, userManager) {
 
         if (idTokenExpiresIn < 0) {
           console.log('Error in silent renew, idtoken expired: ' + idTokenExpiresIn + ' => Logging out.', error); // TODO here allow to continue to use the app but in some kind of frozen state because we can't make API calls anymore
+          // remove the user from our app, but don't sso logout on all other apps
 
-          return logout(dispatch, userManager);
+          return dispatch((0, _actions.setLoggedUser)(null));
         } else if (userManager.idpSettings.maxExpiresIn) {
           if (idTokenExpiresIn < userManager.idpSettings.maxExpiresIn) {
             // TODO here attempt last chance login ? snackbar to notify the user ? Popup ?

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.22.1",
+    "version": "0.24.1",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",