asab_webui_shell 27.7.0 → 27.7.2

package/dist/containers/Application.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _axios = _interopRequireDefault(require("axios"));
 var _asab_webui_components = require("asab_webui_components");
 var _jsonParseWithBigInt2 = require("../utils/jsonParseWithBigInt");
+var _statusAlerts = require("../utils/statusAlerts.js");
 var _Header = _interopRequireDefault(require("./Header"));
 var _Sidebar = _interopRequireDefault(require("./Sidebar"));
 var _ToastContainer = _interopRequireDefault(require("./Toast/ToastContainer.js"));
@@ -35,6 +36,7 @@ var _HelpService = _interopRequireDefault(require("./Header/Help/HelpService"));
 var _AccessDeniedCard = _interopRequireDefault(require("../modules/tenant/access/AccessDeniedCard"));
 var _ApplicationRouter = _interopRequireDefault(require("./Router/ApplicationRouter"));
 var _SuspenseScreen = _interopRequireDefault(require("../screens/SuspenseScreen"));
+var _OfflineIndication = require("../modules/attentionrequired/components/OfflineIndication.js");
 require("./Application.scss");
 var _actions = require("../actions");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -93,6 +95,7 @@ class Application extends _react.Component {
     // Clear print-ready timeout handler
     this._clearPrintReadyTimeout = this._clearPrintReadyTimeout.bind(this);
     this._printReadyTimeout = null;
+    this._offlineIndicationTimeout = null;
     this.state = {
       networking: 0,
       // If more than zero, some networking activity is happening
@@ -549,6 +552,7 @@ class Application extends _react.Component {
       this._unsubscribeConnectivity();
       this._unsubscribeConnectivity = null;
     }
+    this._clearOfflineIndicationTimeout();
     this._clearPrintReadyTimeout();
     document.body.removeAttribute('print-ready');
   }
@@ -558,6 +562,12 @@ class Application extends _react.Component {
       this._printReadyTimeout = null;
     }
   }
+  _clearOfflineIndicationTimeout() {
+    if (this._offlineIndicationTimeout !== null) {
+      clearTimeout(this._offlineIndicationTimeout);
+      this._offlineIndicationTimeout = null;
+    }
+  }
 
   // Splash screen
 
@@ -625,30 +635,50 @@ class Application extends _react.Component {
   		addAlertFromException will always use "danger" color as its background and the full exception will be printed into the console
   */
   addAlertFromException(exception, message) {
-    var _exception$response, _this$AppStore$dispat2, _this$AppStore2;
+    var _exception$response, _exception$response2, _this$AppStore$dispat3, _this$AppStore3;
     var expire = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
     var shouldBeTranslated = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var component = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
     console.error(exception); // Log the whole exception in the browser
+
+    var exceptionStatus = exception === null || exception === void 0 || (_exception$response = exception.response) === null || _exception$response === void 0 ? void 0 : _exception$response.status;
+    // Indicate gateway timeout if the response status is 502, 503 or 504 and if so, then dont continue with the alert and display the offline indication
+    if ((exceptionStatus === 502 || exceptionStatus === 503 || exceptionStatus === 504) && this._indicateGatewayTimeout()) {
+      return;
+    }
+    // Handle specific response statuses and set the appropriate level and message
+    var statusAlert = _statusAlerts.STATUS_ALERTS[exceptionStatus];
+    if (statusAlert) {
+      var _this$AppStore$dispat2, _this$AppStore2;
+      (_this$AppStore$dispat2 = (_this$AppStore2 = this.AppStore).dispatch) === null || _this$AppStore$dispat2 === void 0 || _this$AppStore$dispat2.call(_this$AppStore2, {
+        type: _actions.ADD_ALERT,
+        level: statusAlert.level,
+        message: statusAlert.message,
+        expire: expire,
+        shouldBeTranslated: true,
+        component: component
+      });
+      return;
+    }
     var exceptionMessage = /*#__PURE__*/_react.default.createElement("span", null, message);
     /*
     	If the exception has an error_dict in the response data (error in the new format),
     	the ErrorHandler component is used to display the error,
     	along with the exception message in the form-text class.
     */
-    if (exception !== null && exception !== void 0 && (_exception$response = exception.response) !== null && _exception$response !== void 0 && (_exception$response = _exception$response.data) !== null && _exception$response !== void 0 && _exception$response.error_dict) {
+    if (exception !== null && exception !== void 0 && (_exception$response2 = exception.response) !== null && _exception$response2 !== void 0 && (_exception$response2 = _exception$response2.data) !== null && _exception$response2 !== void 0 && _exception$response2.error_dict) {
       exceptionMessage = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_asab_webui_components.ErrorHandler, {
         error: exception.response.data
       }), (exception === null || exception === void 0 ? void 0 : exception.message) && /*#__PURE__*/_react.default.createElement("div", {
         className: "form-text"
       }, exception.message));
     } else {
-      var _exception$response2;
+      var _exception$response3;
       /*
       	Capture the cases when service returns a message in the exception response data.
       	Add hoc messages are displayed in form-text class on the new line
       */
-      if (exception !== null && exception !== void 0 && (_exception$response2 = exception.response) !== null && _exception$response2 !== void 0 && (_exception$response2 = _exception$response2.data) !== null && _exception$response2 !== void 0 && _exception$response2.message) {
+      if (exception !== null && exception !== void 0 && (_exception$response3 = exception.response) !== null && _exception$response3 !== void 0 && (_exception$response3 = _exception$response3.data) !== null && _exception$response3 !== void 0 && _exception$response3.message) {
         exceptionMessage = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, exceptionMessage), /*#__PURE__*/_react.default.createElement("div", {
           className: "mt-2",
           style: {
@@ -662,7 +692,7 @@ class Application extends _react.Component {
         }, exception.message));
       }
     }
-    (_this$AppStore$dispat2 = (_this$AppStore2 = this.AppStore).dispatch) === null || _this$AppStore$dispat2 === void 0 || _this$AppStore$dispat2.call(_this$AppStore2, {
+    (_this$AppStore$dispat3 = (_this$AppStore3 = this.AppStore).dispatch) === null || _this$AppStore$dispat3 === void 0 || _this$AppStore$dispat3.call(_this$AppStore3, {
       type: _actions.ADD_ALERT,
       level: "danger",
       message: exceptionMessage,
@@ -672,17 +702,46 @@ class Application extends _react.Component {
     });
   }
 
+  /*
+  	Show OfflineIndication in the header for a limited time
+  	Each subsequent 504 resets the timer so the badge stays visible while gateway timeouts keep occurring
+  	Returns true when the indication was shown, false when HeaderService is unavailable
+  */
+  _indicateGatewayTimeout() {
+    var durationMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30000;
+    var headerService = this.locateService('HeaderService');
+    if (!headerService) {
+      return false;
+    }
+    var isVisible = headerService.Items.some(item => item.component === _OfflineIndication.OfflineIndication);
+    if (!isVisible) {
+      headerService.addComponent({
+        component: _OfflineIndication.OfflineIndication,
+        componentProps: {
+          title: 'General|Full or partial loss of connectivity to a server'
+        },
+        order: 100
+      });
+    }
+    this._clearOfflineIndicationTimeout();
+    this._offlineIndicationTimeout = setTimeout(() => {
+      headerService.removeComponent(_OfflineIndication.OfflineIndication);
+      this._offlineIndicationTimeout = null;
+    }, durationMs);
+    return true;
+  }
+
   /*
   	This method toggles the full-screen mode of the application container.
   	It takes a parameter called "status" to indicate whether to turn the full-screen mode on or off.
   */
   setFullScreenMode(status) {
-    var _state$fullscreenmode, _this$AppStore$dispat3, _this$AppStore3;
+    var _state$fullscreenmode, _this$AppStore$dispat4, _this$AppStore4;
     var state = this.AppStore.getState();
     if (status === 'on' && (state === null || state === void 0 || (_state$fullscreenmode = state.fullscreenmode) === null || _state$fullscreenmode === void 0 ? void 0 : _state$fullscreenmode.status) === 'on') {
       status = 'off';
     }
-    (_this$AppStore$dispat3 = (_this$AppStore3 = this.AppStore).dispatch) === null || _this$AppStore$dispat3 === void 0 || _this$AppStore$dispat3.call(_this$AppStore3, {
+    (_this$AppStore$dispat4 = (_this$AppStore4 = this.AppStore).dispatch) === null || _this$AppStore$dispat4 === void 0 || _this$AppStore$dispat4.call(_this$AppStore4, {
       type: _actions.SET_FULLSCREEN_MODE,
       status: status
     });
@@ -754,9 +813,9 @@ Application.prototype._initConnectivitySubscription = function () {
   if (this.PubSub && typeof this.PubSub.subscribe === 'function') {
     if (!this._unsubscribeConnectivity) {
       this._unsubscribeConnectivity = this.PubSub.subscribe('Application.status!', value => {
-        var _this$AppStore$dispat4, _this$AppStore4;
+        var _this$AppStore$dispat5, _this$AppStore5;
         // Prefer store so UI updates predictably
-        (_this$AppStore$dispat4 = (_this$AppStore4 = this.AppStore).dispatch) === null || _this$AppStore$dispat4 === void 0 || _this$AppStore$dispat4.call(_this$AppStore4, {
+        (_this$AppStore$dispat5 = (_this$AppStore5 = this.AppStore).dispatch) === null || _this$AppStore$dispat5 === void 0 || _this$AppStore$dispat5.call(_this$AppStore5, {
           type: _actions.SET_CONNECTIVITY_STATUS,
           status: value.status
         });

package/dist/modules/attentionrequired/components/OfflineIndication.js

@@ -8,11 +8,13 @@ exports.OfflineIndication = OfflineIndication;
 var _react = _interopRequireDefault(require("react"));
 var _reactI18next = require("react-i18next");
 // Header badge for displaying offline status
-function OfflineIndication() {
+function OfflineIndication(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'General|You are offline. Functionality of the Application may be limited.' : _ref$title;
   var _useTranslation = (0, _reactI18next.useTranslation)(),
     t = _useTranslation.t;
   return /*#__PURE__*/_react.default.createElement("i", {
-    title: t('General|You are offline. Functionality of the Application may be limited.'),
+    title: t(title),
     className: "bi bi-wifi-off mx-3",
     style: {
       fontSize: '16px'

package/dist/modules/attentionrequired/components/OfflineIndication.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 // Header badge for displaying offline status
-export function OfflineIndication() {
+export function OfflineIndication({ title = 'General|You are offline. Functionality of the Application may be limited.' }) {
 	const { t } = useTranslation();
 
 	return <i
-		title={t('General|You are offline. Functionality of the Application may be limited.')}
+		title={t(title)}
 		className='bi bi-wifi-off mx-3'
 		style={{ fontSize: '16px' }} // Align with fontsize of navitems of Header
 	/>

package/dist/styles/constants/index.scss

@@ -57,6 +57,17 @@
 	--bs-dropdown-bg: var(--bs-element-bg-color);
 }
 
+.tooltip {
+	--bs-tooltip-bg: rgba(var(--bs-body-bg-rgb), 0.9);
+	--bs-tooltip-color: var(--bs-body-color);
+	--bs-tooltip-border-radius: var(--bs-border-radius);
+
+	.tooltip-inner {
+		border: 1px solid var(--bs-border-color);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	}
+}
+
 .input-group-text {
 	border-radius: 0;
 }

package/dist/utils/statusAlerts.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATUS_ALERTS = void 0;
+/*
+	Status-specific alerts shown instead of the generic exception alert.
+	This is a extension to the addAlertFromException function in the Application.js file.
+	
+	The 502, 503 and 504 errors are handled directly in the Application.js file, since it does not render an alert at all.
+*/
+var STATUS_ALERTS = exports.STATUS_ALERTS = {
+  408: {
+    level: 'warning',
+    message: 'General|The request timed out. Please try again.'
+  },
+  413: {
+    level: 'warning',
+    message: 'General|The request is too large for the server to process. If you are uploading a file, please choose a smaller one.'
+  },
+  429: {
+    level: 'warning',
+    message: 'General|Too many requests. Please wait a moment and try again.'
+  }
+  // TODO: add more response statuses if needed
+};

package/dist/utils/statusAlerts.jsx

@@ -0,0 +1,21 @@
+/*
+	Status-specific alerts shown instead of the generic exception alert.
+	This is a extension to the addAlertFromException function in the Application.js file.
+	
+	The 502, 503 and 504 errors are handled directly in the Application.js file, since it does not render an alert at all.
+*/
+export const STATUS_ALERTS = {
+	408: {
+		level: 'warning',
+		message: 'General|The request timed out. Please try again.',
+	},
+	413: {
+		level: 'warning',
+		message: 'General|The request is too large for the server to process. If you are uploading a file, please choose a smaller one.',
+	},
+	429: {
+		level: 'warning',
+		message: 'General|Too many requests. Please wait a moment and try again.',
+	},
+	// TODO: add more response statuses if needed
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "asab_webui_shell",
-	"version": "27.7.0",
+	"version": "27.7.2",
 	"license": "BSD-3-Clause",
 	"description": "TeskaLabs ASAB WebUI Shell Application",
 	"contributors": [