@gridsuite/commons-ui 0.21.0 → 0.23.0

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

@@ -241,7 +241,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,
+          whiteSpace: 'pre-line'
         },
         align: columnIndex != null && columns[columnIndex].numeric || false ? 'right' : 'left',
         onClick: function onClick() {

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

@@ -87,7 +87,8 @@ var useStyles = (0, _makeStyles["default"])(function (theme) {
   return {
     grow: {
       flexGrow: 1,
-      display: 'flex'
+      display: 'flex',
+      overflow: 'hidden'
     },
     logo: {
       flexShrink: 0,
@@ -227,6 +228,7 @@ var TopBar = function TopBar(_ref) {
       onEquipmentLabellingClick = _ref.onEquipmentLabellingClick,
       equipmentLabelling = _ref.equipmentLabelling,
       withElementsSearch = _ref.withElementsSearch,
+      searchDisabled = _ref.searchDisabled,
       searchingLabel = _ref.searchingLabel,
       onSearchTermChange = _ref.onSearchTermChange,
       _onSelectionChange = _ref.onSelectionChange,
@@ -331,15 +333,20 @@ var TopBar = function TopBar(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    if (user && withElementsSearch) {
-      document.addEventListener('keydown', function (e) {
+    if (user && withElementsSearch && !searchDisabled) {
+      var openSearch = function openSearch(e) {
         if (e.ctrlKey && e.key === 'f') {
           e.preventDefault();
           setDialogSearchOpen(true);
         }
-      });
+      };
+
+      document.addEventListener('keydown', openSearch);
+      return function () {
+        return document.removeEventListener('keydown', openSearch);
+      };
     }
-  }, [user, withElementsSearch]);
+  }, [user, withElementsSearch, searchDisabled]);
   return /*#__PURE__*/_react["default"].createElement(_AppBar["default"], {
     position: "static",
     color: "default",
@@ -383,7 +390,8 @@ var TopBar = function TopBar(_ref) {
     renderElement: renderElement
   }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     color: "inherit",
-    onClick: handleClickElementSearch
+    onClick: handleClickElementSearch,
+    disabled: searchDisabled
   }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null)))), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     "aria-controls": "apps-menu",
     "aria-haspopup": "true",
@@ -616,6 +624,7 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onEquipmentLabellingClick: _propTypes["default"].func,
   equipmentLabelling: _propTypes["default"].bool,
   withElementsSearch: _propTypes["default"].bool,
+  searchDisabled: _propTypes["default"].bool,
   searchingLabel: _propTypes["default"].string,
   onSearchTermChange: _propTypes["default"].func,
   onSelectionChange: _propTypes["default"].func,

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

@@ -41,6 +41,8 @@ function initializeAuthenticationDev(dispatch, isSilentRenew) {
   return Promise.resolve(userManager);
 }
 
+var accessTokenExpiringNotificationTime = 60; // seconds
+
 function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettings) {
   return idpSettings.then(function (r) {
     return r.json();
@@ -74,10 +76,23 @@ function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettings) {
             var expires_in = parseInt(matched_expires[0].split('=')[1]);
             var now = parseInt(Date.now() / 1000);
             var exp = decoded.exp;
+            var idTokenExpiresIn = exp - now;
+            var minAccesstokenOrIdtokenOrIdpSettingsExpiresIn = expires_in;
+            var newExpireReplaceReason;
+
+            if (idTokenExpiresIn < minAccesstokenOrIdtokenOrIdpSettingsExpiresIn) {
+              minAccesstokenOrIdtokenOrIdpSettingsExpiresIn = idTokenExpiresIn;
+              newExpireReplaceReason = 'idtoken.exp is earlier';
+            }
+
+            if (idpSettings.maxExpiresIn && idpSettings.maxExpiresIn < minAccesstokenOrIdtokenOrIdpSettingsExpiresIn) {
+              minAccesstokenOrIdtokenOrIdpSettingsExpiresIn = idpSettings.maxExpiresIn;
+              newExpireReplaceReason = 'idpSettings.maxExpiresIn is smaller';
+            }
 
-            if (exp < now + expires_in) {
-              var newhash = window.location.hash.replace(matched_expires[0], 'expires_in=' + (exp - now));
-              console.debug('Replacing expires_in in window.location.hash because idtoken.exp is earlier. Before: ', window.location.hash, 'after: ', newhash);
+            if (newExpireReplaceReason) {
+              var newhash = window.location.hash.replace(matched_expires[0], 'expires_in=' + minAccesstokenOrIdtokenOrIdpSettingsExpiresIn);
+              console.debug('Replacing expires_in in window.location.hash to ' + minAccesstokenOrIdtokenOrIdpSettingsExpiresIn + ' because ' + newExpireReplaceReason + '. ', 'debug:', 'original expires_in: ' + expires_in + ', ', 'idTokenExpiresIn: ' + idTokenExpiresIn + '(idtoken exp: ' + exp + '), ', 'idpSettings maxExpiresIn: ' + idpSettings.maxExpiresIn);
               window.location.hash = newhash;
             }
           }
@@ -96,9 +111,10 @@ function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettings) {
       response_type: 'id_token token',
       scope: idpSettings.scope,
       automaticSilentRenew: !isSilentRenew,
-      accessTokenExpiringNotificationTime: 60
+      accessTokenExpiringNotificationTime: accessTokenExpiringNotificationTime
     };
     var userManager = new _oidcClient.UserManager(settings);
+    userManager.idpSettings = idpSettings; //store our settings in there as well to use it later
 
     if (!isSilentRenew) {
       handleUser(dispatch, userManager);
@@ -119,7 +135,11 @@ function logout(dispatch, userManagerInstance) {
   dispatch((0, _actions.setLoggedUser)(null));
   sessionStorage.removeItem(hackauthoritykey); //To remove when hack is removed
 
-  return userManagerInstance.signoutRedirect().then(function () {
+  return userManagerInstance.signoutRedirect({
+    extraQueryParams: {
+      TargetResource: userManagerInstance.settings.post_logout_redirect_uri
+    }
+  }).then(function () {
     return console.debug('logged out');
   });
 }
@@ -160,8 +180,41 @@ function handleUser(dispatch, userManager) {
     dispatchUser(dispatch, userManager);
   });
   userManager.events.addSilentRenewError(function (error) {
-    console.debug(error);
-    logout(dispatch, userManager);
+    console.debug(error); // wait for accessTokenExpiringNotificationTime so that the user is expired
+    // otherwise the library tries to signin immediately when we do getUser()
+
+    window.setTimeout(function () {
+      userManager.getUser().then(function (user) {
+        var now = parseInt(Date.now() / 1000);
+        var exp = (0, _jwtDecode["default"])(user.id_token).exp;
+        var idTokenExpiresIn = exp - now;
+
+        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 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 ?
+            // for now we do the same thing as in the else block
+            console.log('Error in silent renew, but idtoken ALMOST expiring (expiring in' + idTokenExpiresIn + ') => last chance' + userManager.idpSettings.maxExpiresIn, error);
+            user.expires_in = userManager.idpSettings.maxExpiresIn;
+            userManager.storeUser(user).then(function () {
+              userManager.getUser();
+            });
+          } else {
+            console.log('Error in silent renew, but idtoken NOT expiring (expiring in' + idTokenExpiresIn + ') => postponing expiration to' + userManager.idpSettings.maxExpiresIn, error);
+            user.expires_in = userManager.idpSettings.maxExpiresIn;
+            userManager.storeUser(user).then(function () {
+              userManager.getUser();
+            });
+          }
+        } else {
+          console.log('Error in silent renew, unsupported configuration: token still valid for ' + idTokenExpiresIn + ' but maxExpiresIn is not configured:' + userManager.idpSettings.maxExpiresIn, error);
+        }
+      });
+    }, accessTokenExpiringNotificationTime * 1000);
   });
   console.debug('dispatch user');
   dispatchUser(dispatch, userManager);

package/package.json

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