asab_webui_shell 27.1.4 → 27.2.1

package/dist/actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SET_SUBTITLE = exports.SET_ROUTES = exports.SET_NAVIGATION_ITEMS = exports.SET_HELP_PATH = exports.SET_HEADER_NAVIGATION_ITEMS = exports.SET_FULLSCREEN_MODE = exports.SET_ATTENTION_REQUIRED_BEACON = exports.SET_ADVANCED_MODE = exports.DEL_TOAST = exports.DEL_ALERT = exports.COLLAPSE_SIDEBAR = exports.CHANGE_CONFIG = exports.ADD_TOAST = exports.ADD_ALERT = exports.ACK_ALERT = void 0;
+exports.SET_SUBTITLE = exports.SET_ROUTES = exports.SET_NAVIGATION_ITEMS = exports.SET_HELP_PATH = exports.SET_HEADER_NAVIGATION_ITEMS = exports.SET_FULLSCREEN_MODE = exports.SET_CONNECTIVITY_STATUS = exports.SET_ATTENTION_REQUIRED_BEACON = exports.SET_ADVANCED_MODE = exports.DEL_TOAST = exports.DEL_ALERT = exports.COLLAPSE_SIDEBAR = exports.CHANGE_CONFIG = exports.ADD_TOAST = exports.ADD_ALERT = exports.ACK_ALERT = void 0;
 var ADD_ALERT = exports.ADD_ALERT = "asab/addAlert";
 var ACK_ALERT = exports.ACK_ALERT = "asab/ackAlert";
 var DEL_ALERT = exports.DEL_ALERT = "asab/delAlert";
@@ -18,4 +18,5 @@ var COLLAPSE_SIDEBAR = exports.COLLAPSE_SIDEBAR = "asab/collapseSidebar";
 var SET_NAVIGATION_ITEMS = exports.SET_NAVIGATION_ITEMS = "asab/setNavigationItems";
 var SET_ROUTES = exports.SET_ROUTES = "asab/setRoutes";
 var SET_HEADER_NAVIGATION_ITEMS = exports.SET_HEADER_NAVIGATION_ITEMS = "asab/setHeaderNavigationItems";
+var SET_CONNECTIVITY_STATUS = exports.SET_CONNECTIVITY_STATUS = "asab/setConnectivityStatus";
 var SET_ATTENTION_REQUIRED_BEACON = exports.SET_ATTENTION_REQUIRED_BEACON = "asab/setAttentionRequiredBeacon";

package/dist/containers/Application.js

@@ -80,6 +80,10 @@ class Application extends _react.Component {
       // If more than zero, some networking activity is happening
       splashscreenRequestors: 0
     };
+
+    // Subscribe and unsubscribe handlers for connectivity detection
+    this._initConnectivitySubscription = this._initConnectivitySubscription.bind(this);
+    this._unsubscribeConnectivity = null;
     this.ConfigService.addDefaults(props.configdefaults);
     this.addSplashScreenRequestor(this);
     this.state.splashscreenRequestors = this.SplashscreenRequestors.size;
@@ -442,6 +446,9 @@ class Application extends _react.Component {
   componentDidMount() {
     document.addEventListener("keyup", this._handleKeyUp, false);
 
+    // Subscribe to Application.status! once PubSub is available
+    this._initConnectivitySubscription();
+
     // Add print-landscape class to body if not present
     if (!document.body.classList.contains('print-landscape')) {
       document.body.classList.add('print-landscape');
@@ -449,6 +456,12 @@ class Application extends _react.Component {
   }
   componentWillUnmount() {
     document.removeEventListener("keyup", this._handleKeyUp, false);
+
+    // Unsubscribe from Application.status! PubSub
+    if (this._unsubscribeConnectivity) {
+      this._unsubscribeConnectivity();
+      this._unsubscribeConnectivity = null;
+    }
   }
 
   // Splash screen
@@ -648,4 +661,29 @@ class Application extends _react.Component {
     }))));
   }
 }
+
+/*
+	On Application initialization, initialize subscription to Application.status!
+	once PubSub is assigned by PubSubProvider
+*/
+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$dispat5, _this$AppStore5;
+        // Prefer store so UI updates predictably
+        (_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
+        });
+      });
+    }
+    return;
+  }
+  /*
+  	This is a safety precaution which retry initialization, PubSubProvider may assigns app.PubSub
+  	in its useEffect after first render (however we use useLayoutEffect there, so it should not be an issue).
+  */
+  setTimeout(this._initConnectivitySubscription, 0);
+};
 var _default = exports.default = Application;

package/dist/containers/Sidebar/SidebarItem.js

@@ -30,14 +30,10 @@ var SidebarItem = _ref => {
     var _state$sidebar;
     return (_state$sidebar = state.sidebar) === null || _state$sidebar === void 0 ? void 0 : _state$sidebar.isSidebarCollapsed;
   });
-  var attentionRequired = (0, _asab_webui_components.useAppSelector)(state => {
-    var _state$attentionrequi;
-    return (_state$attentionrequi = state.attentionrequired) === null || _state$attentionrequi === void 0 ? void 0 : _state$attentionrequi.beacon;
-  });
   var [isActive, setActive] = (0, _react.useState)(false);
   var lowercasedItemName = item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase();
   // Attention requred flag
-  var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : attentionRequired === null || attentionRequired === void 0 ? void 0 : attentionRequired["beacon.".concat(lowercasedItemName)];
+  var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : {};
   (0, _react.useEffect)(() => {
     // TODO: refactor the handling of active and open states, since it does not behave as expected in some cases
     if (isOpen && !isActive) {
@@ -80,7 +76,8 @@ var SidebarCollapsibleItem = _ref2 => {
   var {
     item,
     disabled,
-    isSmallResolution
+    isSmallResolution,
+    beacon = undefined
   } = _ref2;
   var [isOpen, setOpen] = (0, _react.useState)(false);
   var location = (0, _reactRouter.useLocation)();
@@ -91,14 +88,10 @@ var SidebarCollapsibleItem = _ref2 => {
     var _state$sidebar2;
     return (_state$sidebar2 = state.sidebar) === null || _state$sidebar2 === void 0 ? void 0 : _state$sidebar2.isSidebarCollapsed;
   });
-  var attentionRequired = (0, _asab_webui_components.useAppSelector)(state => {
-    var _state$attentionrequi2;
-    return (_state$attentionrequi2 = state.attentionrequired) === null || _state$attentionrequi2 === void 0 ? void 0 : _state$attentionrequi2.beacon;
-  });
   var lowercasedItemName = item.name.toLowerCase();
 
   // Attention required flag
-  var itemsBeacon = parentBeacon(attentionRequired, "beacon.".concat(lowercasedItemName), lowercasedItemName);
+  var itemsBeacon = parentBeacon(beacon, "beacon.".concat(lowercasedItemName), lowercasedItemName);
   // Summarize parent beacon count based on children
   var beaconCount = itemsBeacon && Object.keys(itemsBeacon).length > 0 ? Object.values(itemsBeacon).reduce((sum, current) => {
     return sum + (current.count || 0); // Ensure we sum only valid count values

package/dist/containers/Sidebar/SidebarItemRenderer.js

@@ -11,7 +11,8 @@ var SidebarItemRenderer = _ref => {
   var {
     sidebarItems,
     sessionExpired,
-    isSmallResolution = undefined
+    isSmallResolution = undefined,
+    beacon = undefined
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("nav", {
     className: "nav flex-column"
@@ -19,12 +20,14 @@ var SidebarItemRenderer = _ref => {
     key: idx,
     item: item,
     disabled: sessionExpired,
-    isSmallResolution: isSmallResolution
+    isSmallResolution: isSmallResolution,
+    beacon: beacon
   }) : /*#__PURE__*/_react.default.createElement(_SidebarItem.SidebarItem, {
     key: idx,
     item: item,
     disabled: sessionExpired,
-    isSmallResolution: isSmallResolution
+    isSmallResolution: isSmallResolution,
+    beacon: beacon
   })));
 };
 exports.SidebarItemRenderer = SidebarItemRenderer;

package/dist/containers/Sidebar/index.js

@@ -53,6 +53,11 @@ function Sidebar(props) {
     return (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.sessionExpired;
   });
   var theme = (0, _asab_webui_components.useAppSelector)(state => state.theme);
+  // Subscription to a beacon
+  var beacon = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$attentionrequi;
+    return state === null || state === void 0 || (_state$attentionrequi = state.attentionrequired) === null || _state$attentionrequi === void 0 ? void 0 : _state$attentionrequi.beacon;
+  });
   var {
     dispatch
   } = (0, _asab_webui_components.useAppStore)();
@@ -98,13 +103,15 @@ function Sidebar(props) {
   }, /*#__PURE__*/_react.default.createElement(_SidebarItemRenderer.SidebarItemRenderer, {
     sidebarItems: sidebarItems,
     sessionExpired: sessionExpired,
-    isSmallResolution: isSmallResolution
+    isSmallResolution: isSmallResolution,
+    beacon: beacon
   })))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "h-100",
     id: "app-sidebar"
   }, /*#__PURE__*/_react.default.createElement(_SidebarItemRenderer.SidebarItemRenderer, {
     sidebarItems: sidebarItems,
-    sessionExpired: sessionExpired
+    sessionExpired: sessionExpired,
+    beacon: beacon
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-fill"
   }, "\xA0"), /*#__PURE__*/_react.default.createElement(_SidebarBottomItem.default, {

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OfflineIndication = OfflineIndication;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+// Header badge for displaying offline status
+function OfflineIndication() {
+  var {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  return /*#__PURE__*/_react.default.createElement("i", {
+    title: t('General|You are offline. Functionality of the Application may be limited.'),
+    className: "bi bi-wifi-off mx-3",
+    style: {
+      fontSize: '16px'
+    } // Align with fontsize of navitems of Header
+  });
+}

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

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

package/dist/modules/attentionrequired/connectivityReducer.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = connectivityReducer;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("../../actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialState = {
+  status: null
+};
+
+// Reducer for connectivity status
+function connectivityReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.SET_CONNECTIVITY_STATUS:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          status: action.status
+        });
+      }
+    default:
+      return state;
+  }
+}

package/dist/modules/attentionrequired/connectivityReducer.jsx

@@ -0,0 +1,20 @@
+import { SET_CONNECTIVITY_STATUS } from "../../actions";
+
+const initialState = {
+	status: null
+};
+
+// Reducer for connectivity status
+export default function connectivityReducer(state = initialState, action) {
+	switch (action.type) {
+		case SET_CONNECTIVITY_STATUS: {
+			return {
+				...state,
+				status: action.status
+			}
+		}
+
+		default:
+			return state;
+	}
+}

package/dist/modules/attentionrequired/index.js

@@ -8,14 +8,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _asab_webui_components = require("asab_webui_components");
 var _service = _interopRequireDefault(require("./service.js"));
-var _reducer = _interopRequireDefault(require("./reducer.js"));
+var _connectivityReducer = _interopRequireDefault(require("./connectivityReducer.js"));
+var _attentionRequiredReducer = _interopRequireDefault(require("./attentionRequiredReducer.js"));
 class AttentionRequiredModule extends _asab_webui_components.Module {
   constructor(app) {
     var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "AttentionRequiredModule";
     super(app, name);
     this.App = app;
     this.AttentionRequiredService = new _service.default(app, "AttentionRequiredService");
-    this.App.ReduxService.addReducer("attentionrequired", _reducer.default);
+    this.App.ReduxService.addReducer("attentionrequired", _attentionRequiredReducer.default);
+    this.App.ReduxService.addReducer("connectivity", _connectivityReducer.default);
   }
 }
 exports.default = AttentionRequiredModule;

package/dist/modules/attentionrequired/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Module } from 'asab_webui_components';
 import AttentionRequiredService from './service.jsx';
-import reducer from './reducer.jsx';
+import connectivityReducer from './connectivityReducer.jsx';
+import attentionRequiredReducer from './attentionRequiredReducer.jsx';
 
 export default class AttentionRequiredModule extends Module {
 
@@ -11,7 +12,8 @@ export default class AttentionRequiredModule extends Module {
 
 		this.AttentionRequiredService = new AttentionRequiredService(app, "AttentionRequiredService");
 
-		this.App.ReduxService.addReducer("attentionrequired", reducer);
+		this.App.ReduxService.addReducer("attentionrequired", attentionRequiredReducer);
+		this.App.ReduxService.addReducer("connectivity", connectivityReducer);
 	}
 
 }

package/dist/modules/attentionrequired/service.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _asab_webui_components = require("asab_webui_components");
 var _actions = require("../../actions");
+var _OfflineIndication = require("./components/OfflineIndication.js");
 // Service handling attention required
 class AttentionRequiredService extends _asab_webui_components.Service {
   constructor(app) {
@@ -14,6 +15,8 @@ class AttentionRequiredService extends _asab_webui_components.Service {
     this.beaconWebSocket = null; // beacon websocket variable
     this.reconnectTimeout = null; // timeout variable
     this.reconnectInterval = 5000; // initial reconnection interval (5 seconds)
+    this.prevStatus = null; // initial status
+    this.prevBeacon = null; // initial beacon
   }
 
   // Start beacon websocket connection on initialization
@@ -28,6 +31,7 @@ class AttentionRequiredService extends _asab_webui_components.Service {
     var currentTenant = (_this$App = this.App) === null || _this$App === void 0 || (_this$App = _this$App.Services) === null || _this$App === void 0 || (_this$App = _this$App.TenantService) === null || _this$App === void 0 ? void 0 : _this$App.getCurrentTenant();
     // Gracefully reconnect if tenant was not found
     if (!currentTenant) {
+      // TODO: maybe set offline
       console.error("Beacon WebSocket error: Tenant was not found!");
       this.reconnectBeaconWebSocket();
       return;
@@ -35,7 +39,7 @@ class AttentionRequiredService extends _asab_webui_components.Service {
     var BeaconServiceClient = this.App.createWebSocket('asab-remote-control', "/beacon/".concat(currentTenant, "/ws"));
     this.beaconWebSocket = BeaconServiceClient;
     this.beaconWebSocket.onopen = () => {
-      // TODO: may be removed
+      this.connectionStatus('online');
       console.log('Beacon WebSocket connection established.');
     };
     this.beaconWebSocket.onmessage = message => {
@@ -51,10 +55,12 @@ class AttentionRequiredService extends _asab_webui_components.Service {
     this.beaconWebSocket.onerror = error => {
       console.error("Beacon WebSocket error:", error);
       console.error("Beacon WebSocket is attempting to reconnect...");
+      this.connectionStatus('offline');
       this.distributeData({});
       this.reconnectBeaconWebSocket();
     };
     this.beaconWebSocket.onclose = () => {
+      this.connectionStatus('offline');
       /*
       	WebSocket connection is closed by the browser automatically when user
       	leaves the application (not the screen).
@@ -99,13 +105,24 @@ class AttentionRequiredService extends _asab_webui_components.Service {
 
   // Method for distributing the data into Application store
   distributeData(data) {
-    var _this$App2, _this$App2$dispatch;
-    var transformedData = this.transformData(data);
-    // TODO: use a pubsub instead of the appstore dispatch
-    (_this$App2 = this.App) === null || _this$App2 === void 0 || (_this$App2 = _this$App2.AppStore) === null || _this$App2 === void 0 || (_this$App2$dispatch = _this$App2.dispatch) === null || _this$App2$dispatch === void 0 || _this$App2$dispatch.call(_this$App2, {
-      type: _actions.SET_ATTENTION_REQUIRED_BEACON,
-      beacon: transformedData
-    });
+    var next = this.transformData(data);
+    var initial = this.prevBeacon === null;
+    var nextEmpty = _isEmptyObject(next);
+    var prevEmpty = _isEmptyObject(this.prevBeacon);
+
+    /*
+    	We dont want to repetitivelly dispatch empty beacons to the AppStore
+    	because it is causing unwanted re-rendering of the Application
+    */
+    if (initial || !nextEmpty || nextEmpty && !prevEmpty) {
+      var _this$App2, _this$App2$dispatch;
+      (_this$App2 = this.App) === null || _this$App2 === void 0 || (_this$App2 = _this$App2.AppStore) === null || _this$App2 === void 0 || (_this$App2$dispatch = _this$App2.dispatch) === null || _this$App2$dispatch === void 0 || _this$App2$dispatch.call(_this$App2, {
+        type: _actions.SET_ATTENTION_REQUIRED_BEACON,
+        beacon: next
+      });
+      // Update previous snapshot after dispatch
+      this.prevBeacon = next;
+    }
   }
 
   // Transform and group beacon data
@@ -142,5 +159,35 @@ class AttentionRequiredService extends _asab_webui_components.Service {
       return acc;
     }, {});
   }
+  // Method for publishing the connection status and displaying offline indication
+  connectionStatus(status) {
+    var _this$App3;
+    if ((_this$App3 = this.App) !== null && _this$App3 !== void 0 && _this$App3.PubSub) {
+      var _this$App4, _this$App5;
+      // Distribute status
+      (_this$App4 = this.App) === null || _this$App4 === void 0 || (_this$App4 = _this$App4.PubSub) === null || _this$App4 === void 0 || _this$App4.publish('Application.status!', {
+        status
+      });
+      var headerService = (_this$App5 = this.App) === null || _this$App5 === void 0 || (_this$App5 = _this$App5.Services) === null || _this$App5 === void 0 ? void 0 : _this$App5.HeaderService;
+      if (headerService) {
+        if (this.prevStatus != status) {
+          if (status === 'offline') {
+            headerService === null || headerService === void 0 || headerService.addComponent({
+              component: _OfflineIndication.OfflineIndication,
+              order: 100
+            });
+          } else {
+            headerService === null || headerService === void 0 || headerService.removeComponent(_OfflineIndication.OfflineIndication);
+          }
+          this.prevStatus = status;
+        }
+      }
+    }
+  }
 }
-exports.default = AttentionRequiredService;
+
+// Method for identifying an empty object
+exports.default = AttentionRequiredService;
+function _isEmptyObject(o) {
+  return o != null && typeof o === 'object' && Object.keys(o).length === 0;
+}

package/dist/modules/attentionrequired/service.jsx

@@ -1,5 +1,6 @@
 import { Service } from 'asab_webui_components';
 import { SET_ATTENTION_REQUIRED_BEACON } from '../../actions';
+import { OfflineIndication } from './components/OfflineIndication.jsx';
 
 // Service handling attention required
 export default class AttentionRequiredService extends Service {
@@ -9,6 +10,8 @@ export default class AttentionRequiredService extends Service {
 		this.beaconWebSocket = null; // beacon websocket variable
 		this.reconnectTimeout = null; // timeout variable
 		this.reconnectInterval = 5000; // initial reconnection interval (5 seconds)
+		this.prevStatus = null; // initial status
+		this.prevBeacon = null; // initial beacon
 	}
 
 	// Start beacon websocket connection on initialization
@@ -22,6 +25,7 @@ export default class AttentionRequiredService extends Service {
 		const currentTenant = this.App?.Services?.TenantService?.getCurrentTenant();
 		// Gracefully reconnect if tenant was not found
 		if (!currentTenant) {
+			// TODO: maybe set offline
 			console.error("Beacon WebSocket error: Tenant was not found!");
 			this.reconnectBeaconWebSocket();
 			return;
@@ -31,7 +35,7 @@ export default class AttentionRequiredService extends Service {
 		this.beaconWebSocket = BeaconServiceClient;
 
 		this.beaconWebSocket.onopen = () => {
-			// TODO: may be removed
+			this.connectionStatus('online');
 			console.log('Beacon WebSocket connection established.');
 		};
 
@@ -49,11 +53,13 @@ export default class AttentionRequiredService extends Service {
 		this.beaconWebSocket.onerror = (error) => {
 			console.error("Beacon WebSocket error:", error);
 			console.error("Beacon WebSocket is attempting to reconnect...");
+			this.connectionStatus('offline');
 			this.distributeData({});
 			this.reconnectBeaconWebSocket();
 		};
 
 		this.beaconWebSocket.onclose = () => {
+			this.connectionStatus('offline');
 			/*
 				WebSocket connection is closed by the browser automatically when user
 				leaves the application (not the screen).
@@ -99,9 +105,23 @@ export default class AttentionRequiredService extends Service {
 
 	// Method for distributing the data into Application store
 	distributeData(data) {
-		const transformedData = this.transformData(data);
-		// TODO: use a pubsub instead of the appstore dispatch
-		this.App?.AppStore?.dispatch?.({ type: SET_ATTENTION_REQUIRED_BEACON, beacon: transformedData });
+		const next = this.transformData(data);
+		const initial = (this.prevBeacon === null);
+		const nextEmpty = _isEmptyObject(next);
+		const prevEmpty = _isEmptyObject(this.prevBeacon);
+
+		/*
+			We dont want to repetitivelly dispatch empty beacons to the AppStore
+			because it is causing unwanted re-rendering of the Application
+		*/
+		if (initial || !nextEmpty || (nextEmpty && !prevEmpty)) {
+			this.App?.AppStore?.dispatch?.({
+				type: SET_ATTENTION_REQUIRED_BEACON,
+				beacon: next,
+			});
+			// Update previous snapshot after dispatch
+			this.prevBeacon = next;
+		}
 	}
 
 	// Transform and group beacon data
@@ -138,4 +158,32 @@ export default class AttentionRequiredService extends Service {
 			return acc;
 		}, {});
 	};
+
+	// Method for publishing the connection status and displaying offline indication
+	connectionStatus(status) {
+		if (this.App?.PubSub) {
+			// Distribute status
+			this.App?.PubSub?.publish('Application.status!', { status });
+			const headerService = this.App?.Services?.HeaderService;
+			if (headerService) {
+				if (this.prevStatus != status) {
+					if (status === 'offline') {
+						headerService?.addComponent({
+							component: OfflineIndication,
+							order: 100
+						});
+					} else {
+						headerService?.removeComponent(OfflineIndication);
+					}
+					this.prevStatus = status;
+				}
+			}
+		}
+	}
+
+}
+
+// Method for identifying an empty object
+function _isEmptyObject(o) {
+	return o != null && typeof o === 'object' && Object.keys(o).length === 0;
 }

package/dist/styles/constants/index.scss

@@ -68,3 +68,7 @@
 .monaco-hover {
 	position: fixed !important;
 }
+
+.cursor-pointer {
+	cursor: pointer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asab_webui_shell",
-  "version": "27.1.4",
+  "version": "27.2.1",
   "license": "BSD-3-Clause",
   "description": "TeskaLabs ASAB WebUI Shell Application",
   "contributors": [
@@ -39,13 +39,13 @@
     "rimraf": "^6.0.1"
   },
   "peerDependencies": {
-    "asab_webui_components": "^27.1.1",
+    "asab_webui_components": "^27.3.1",
     "@babel/runtime": "^7.22.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "axios": "^1.8.4",
-    "i18next": "^25.4.2",
-    "react-i18next": "^15.7.3",
+    "i18next": "^25.5.2",
+    "react-i18next": "^16.0.0",
     "react-router": "^7.8.2",
     "reactstrap": "^9.2.0"
   },