asab_webui_shell 25.2.8 → 26.1.2

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_FLAG = 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_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";
@@ -11,7 +11,6 @@ var ADD_TOAST = exports.ADD_TOAST = "asab/addToast";
 var DEL_TOAST = exports.DEL_TOAST = "asab/delToast";
 var SET_HELP_PATH = exports.SET_HELP_PATH = "asab/setHelpContent";
 var SET_SUBTITLE = exports.SET_SUBTITLE = "asab/setSubtitle";
-var SET_FLAG = exports.SET_FLAG = "asab/setFlag";
 var SET_ADVANCED_MODE = exports.SET_ADVANCED_MODE = "asab/setAdvancedMode";
 var SET_FULLSCREEN_MODE = exports.SET_FULLSCREEN_MODE = "asab/setFullscreenMode";
 var CHANGE_CONFIG = exports.CHANGE_CONFIG = "asab/changeConfig";

package/dist/components/branding/BrandImage.js

@@ -29,11 +29,11 @@ Then, if selected configuration's brand image is not complete (e.g. minimized va
 	```javascript
 		import { useState, useEffect } from 'react';
 		import { getBrandImage } from 'asab_webui_shell';
-		import { useSelector } from 'react-redux';
+		import { useAppSelector } from 'asab_webui_components';
 
 		const YourCode = (props) => {
 			const [ brandImage, setBrandImage ] = useState({});
-			const theme = useSelector(state => state.theme);
+			const theme = useAppSelector(state => state.theme);
 
 			useEffect(() => {
 				setBrandImage(getBrandImage(props, theme));

package/dist/config/ConfigService.js

@@ -83,8 +83,8 @@ class ConfigService extends _asab_webui_components.Service {
     // Dispatch customs to config store
     if (Object.keys(dynamicConfig).length > 0) {
       this.Config._dynamic_config = dynamicConfig;
-      if (this.App.Store !== undefined) {
-        this.Config.dispatch(this.App.Store);
+      if (this.App.AppStore) {
+        this.Config.dispatch(this.App.AppStore);
       } else {
         console.warn('Dynamic configuration has not been dispatched to application store');
       }
@@ -104,7 +104,11 @@ class ConfigService extends _asab_webui_components.Service {
         this.Config._defaults[key] = defaults[key];
       }
     }
-    this.Config.dispatch(this.App.Store);
+    if (this.App.AppStore) {
+      this.Config.dispatch(this.App.AppStore);
+    } else {
+      console.warn('Default configuration has not been dispatched to application store');
+    }
   }
 }
 exports.default = ConfigService;
@@ -127,7 +131,7 @@ class Config {
 
     // Then check the local config
     if (this._local_config[key] != undefined) {
-      this._local_config[key];
+      return this._local_config[key];
     }
     ;
 
@@ -139,8 +143,9 @@ class Config {
     return undefined;
   }
   dispatch(store) {
+    var _store$dispatch;
     var config = Object.assign({}, this._defaults, this._local_config, this._dynamic_config);
-    store.dispatch({
+    store === null || store === void 0 || (_store$dispatch = store.dispatch) === null || _store$dispatch === void 0 || _store$dispatch.call(store, {
       type: _actions.CHANGE_CONFIG,
       config: config
     });

package/dist/containers/Alerts/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = AlertsComponent;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
+var _asab_webui_components = require("asab_webui_components");
 var _reactstrap = require("reactstrap");
 var _actions = require("../../actions");
 var _reactI18next = require("react-i18next");
@@ -13,8 +13,8 @@ require("./alerts.scss");
 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); }
 function AlertsComponent(props) {
   var [seconds, setSeconds] = (0, _react.useState)(0);
-  var store = props.app.Store;
-  var alerts = (0, _reactRedux.useSelector)(state => state.alerts.alerts);
+  var store = props.app.AppStore;
+  var alerts = (0, _asab_webui_components.useAppSelector)(state => state.alerts.alerts);
   var {
     t
   } = (0, _reactI18next.useTranslation)();
@@ -30,12 +30,14 @@ function AlertsComponent(props) {
         var alert = alerts[i];
         if (alert.expire < now) {
           if (alert.acked) {
-            store.dispatch({
+            var _store$dispatch;
+            store === null || store === void 0 || (_store$dispatch = store.dispatch) === null || _store$dispatch === void 0 || _store$dispatch.call(store, {
               type: _actions.DEL_ALERT,
               key: alert.key
             });
           } else {
-            store.dispatch({
+            var _store$dispatch2;
+            store === null || store === void 0 || (_store$dispatch2 = store.dispatch) === null || _store$dispatch2 === void 0 || _store$dispatch2.call(store, {
               type: _actions.ACK_ALERT,
               key: alert.key
             });
@@ -57,10 +59,13 @@ function AlertsComponent(props) {
         className: "shadow alerts-style d-print-none",
         fade: true,
         isOpen: !alert.acked,
-        toggle: () => store.dispatch({
-          type: _actions.ACK_ALERT,
-          key: alert.key
-        })
+        toggle: () => {
+          var _store$dispatch3;
+          return store === null || store === void 0 || (_store$dispatch3 = store.dispatch) === null || _store$dispatch3 === void 0 ? void 0 : _store$dispatch3.call(store, {
+            type: _actions.ACK_ALERT,
+            key: alert.key
+          });
+        }
       }, alert.shouldBeTranslated ? t(alert.message) : alert.message);
     } else {
       return alert.component(alert, store);

package/dist/containers/Application.js

@@ -8,8 +8,6 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-var _redux = require("redux");
 var _axios = _interopRequireDefault(require("axios"));
 var _asab_webui_components = require("asab_webui_components");
 var _Header = _interopRequireDefault(require("./Header"));
@@ -36,7 +34,6 @@ var _ThemeService = _interopRequireDefault(require("../theme/ThemeService"));
 var _BrandingService = _interopRequireDefault(require("../services/BrandingService"));
 var _TitleService = _interopRequireDefault(require("../services/TitleService"));
 var _HelpService = _interopRequireDefault(require("./Header/Help/HelpService"));
-var _PreviewService = _interopRequireDefault(require("./Header/Preview/PreviewService"));
 var _AccessDeniedCard = _interopRequireDefault(require("../modules/tenant/access/AccessDeniedCard"));
 var _ApplicationRouter = _interopRequireDefault(require("./Router/ApplicationRouter"));
 var _SuspenseScreen = _interopRequireDefault(require("../screens/SuspenseScreen"));
@@ -84,11 +81,37 @@ class Application extends _react.Component {
 
   constructor(props) {
     super(props);
+
+    // Global AppStore variables
+    var appStore = {
+      state: null,
+      dispatch: null
+    }; // Create the store object (fields stays writable so the provider can update them)
+    Object.seal(appStore); // Lock the shape, so no adding/removing properties (but existing fields remain writable)
+    Object.defineProperty(this, 'AppStore', {
+      value: appStore,
+      writable: false,
+      // Can't reassign this.AppStore
+      configurable: false,
+      // Can't redefine/delete the property
+      enumerable: true // Makes it show up in Object.keys/console
+    }); // Define a read-only, non-configurable property on the instance
+
     this.Modules = [];
     this.Services = {};
     this.ReduxService = new _ReduxService.default(this, "ReduxService");
     this.ConfigService = new _ConfigService.default(this, "ConfigService");
     this.Config = this.ConfigService.Config;
+
+    // Register reducers which are not part of any app service
+    this.ReduxService.addReducer("attentionrequired", _reducer8.default);
+    this.ReduxService.addReducer("alerts", _reducer.default);
+    this.ReduxService.addReducer("advmode", _reducer7.default);
+    this.ReduxService.addReducer("fullscreenmode", _reducer6.default);
+    this.ReduxService.addReducer("header", _reducer3.default);
+    this.ReduxService.addReducer("sidebar", _reducer2.default);
+    this.ReduxService.addReducer("navigation", _reducer4.default);
+    this.ReduxService.addReducer("router", _reducer5.default);
     this.Router = new _Router.default(this);
     this.Navigation = new _Navigation.default(this);
     this.SplashscreenRequestors = new Set(); // If not empty, the splash screen will be rendered
@@ -100,15 +123,6 @@ class Application extends _react.Component {
     this.BrandingService = new _BrandingService.default(this, "BrandingService");
     this.TitleService = new _TitleService.default(this, "TitleService");
     this.HelpService = new _HelpService.default(this, "HelpService");
-    this.PreviewService = new _PreviewService.default(this, "PreviewService");
-    this.ReduxService.addReducer("attentionrequired", _reducer8.default);
-    this.ReduxService.addReducer("alerts", _reducer.default);
-    this.ReduxService.addReducer("advmode", _reducer7.default);
-    this.ReduxService.addReducer("fullscreenmode", _reducer6.default);
-    this.ReduxService.addReducer("header", _reducer3.default);
-    this.ReduxService.addReducer("sidebar", _reducer2.default);
-    this.ReduxService.addReducer("navigation", _reducer4.default);
-    this.ReduxService.addReducer("router", _reducer5.default);
 
     // The application can provide a list of keys that should be automatically parsed as BigInt, when received from the server in Axios call
     // This is important to preserve 64bit numbers from the server such as IP addresses, timestamps etc.
@@ -119,10 +133,7 @@ class Application extends _react.Component {
       // If more than zero, some networking activity is happening
       splashscreenRequestors: 0
     };
-    var composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || _redux.compose;
-    this.Store = (0, _redux.createStore)((0, _redux.combineReducers)(this.ReduxService.Reducers), composeEnhancers((0, _redux.applyMiddleware)()));
     this.ConfigService.addDefaults(props.configdefaults);
-    this.Config.dispatch(this.Store);
     this.addSplashScreenRequestor(this);
     this.state.splashscreenRequestors = this.SplashscreenRequestors.size;
     var that = this;
@@ -164,8 +175,6 @@ class Application extends _react.Component {
             var _mod = new modloaded.default(that); // We expect 'export default class ...Module extends Module'
             that.Modules.push(_mod);
           }
-          that.Store.replaceReducer((0, _redux.combineReducers)(that.ReduxService.Reducers));
-          that.Config.dispatch(that.Store);
         }
 
         // Initialize statically imported modules
@@ -180,9 +189,6 @@ class Application extends _react.Component {
       return _modules_init.apply(this, arguments);
     }
     modules_init().then(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
-      that.Store.replaceReducer((0, _redux.combineReducers)(that.ReduxService.Reducers));
-      that.Config.dispatch(that.Store);
-
       // Initialize all services
       for (var i in that.Services) {
         var ret = that.Services[i].initialize();
@@ -190,7 +196,6 @@ class Application extends _react.Component {
         // Transform result in the promise
         // It unifies synchronous and asynchronous `initialize()` calls
         yield Promise.resolve(ret);
-        that.Config.dispatch(that.Store);
       }
       that.removeSplashScreenRequestor(that);
     }));
@@ -518,10 +523,11 @@ class Application extends _react.Component {
   	* success
   */
   addAlert(level, message) {
+    var _this$AppStore$dispat, _this$AppStore;
     var expire = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5;
     var shouldBeTranslated = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var component = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-    this.Store.dispatch({
+    (_this$AppStore$dispat = (_this$AppStore = this.AppStore).dispatch) === null || _this$AppStore$dispat === void 0 || _this$AppStore$dispat.call(_this$AppStore, {
       type: _actions.ADD_ALERT,
       level: level,
       message: message,
@@ -543,7 +549,7 @@ 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;
+    var _exception$response, _this$AppStore$dispat2, _this$AppStore2;
     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;
@@ -580,7 +586,7 @@ class Application extends _react.Component {
         }, exception.message));
       }
     }
-    this.Store.dispatch({
+    (_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: "danger",
       message: exceptionMessage,
@@ -590,11 +596,13 @@ class Application extends _react.Component {
     });
   }
   setAdvancedMode(enabled) {
+    var _this$AppStore$dispat3, _this$AppStore3;
     if (enabled === 0) {
-      var state = this.Store.getState();
-      enabled = !state.advmode.enabled;
+      var _state$advmode;
+      var state = this.AppStore.state;
+      enabled = !(state !== null && state !== void 0 && (_state$advmode = state.advmode) !== null && _state$advmode !== void 0 && _state$advmode.enabled);
     }
-    this.Store.dispatch({
+    (_this$AppStore$dispat3 = (_this$AppStore3 = this.AppStore).dispatch) === null || _this$AppStore$dispat3 === void 0 || _this$AppStore$dispat3.call(_this$AppStore3, {
       type: _actions.SET_ADVANCED_MODE,
       enabled: enabled
     });
@@ -610,11 +618,12 @@ class Application extends _react.Component {
   	It takes a parameter called "status" to indicate whether to turn the full-screen mode on or off.
   */
   setFullScreenMode(status) {
-    var state = this.Store.getState();
-    if (status === 'on' && state.fullscreenmode.status === 'on') {
+    var _state$fullscreenmode, _this$AppStore$dispat4, _this$AppStore4;
+    var state = this.AppStore.state;
+    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.Store.dispatch({
+    (_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
     });
@@ -626,29 +635,15 @@ class Application extends _react.Component {
       this.addAlert('info', 'ASABApplicationContainer|Fullscreen mode turned off', 30, true);
     }
   }
-  setFlag(name) {
-    (0, _react.useEffect)(() => {
-      this.Store.dispatch({
-        type: _actions.SET_FLAG,
-        flag: name
-      });
-      return () => {
-        this.Store.dispatch({
-          type: _actions.SET_FLAG,
-          flag: undefined
-        });
-      };
-    }, [name]);
-  }
   render() {
     if (this.state.splashscreenRequestors > 0) return (
       /*#__PURE__*/
       // When splashscreenRequestors is requested, the application is not rendered.
       // This prevents race conditions during application init time.
-      _react.default.createElement(_asab_webui_components.PubSubProvider, {
+      _react.default.createElement(_asab_webui_components.AppStoreProvider, {
+        app: this
+      }, /*#__PURE__*/_react.default.createElement(_asab_webui_components.PubSubProvider, {
         app: this
-      }, /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
-        store: this.Store
       }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: /*#__PURE__*/_react.default.createElement("div", null)
       }, /*#__PURE__*/_react.default.createElement(_Alerts.default, {
@@ -659,10 +654,10 @@ class Application extends _react.Component {
         app: this
       })))))
     );
-    return /*#__PURE__*/_react.default.createElement(_asab_webui_components.PubSubProvider, {
+    return /*#__PURE__*/_react.default.createElement(_asab_webui_components.AppStoreProvider, {
+      app: this
+    }, /*#__PURE__*/_react.default.createElement(_asab_webui_components.PubSubProvider, {
       app: this
-    }, /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
-      store: this.Store
     }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
       fallback: /*#__PURE__*/_react.default.createElement("div", null)
     }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/containers/Header/ApplicationScreenTitle/ApplicationScreenTitle.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
 var _reactI18next = require("react-i18next");
+var _asab_webui_components = require("asab_webui_components");
 require("./ApplicationScreenTitle.scss");
 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); }
 var ApplicationScreenTitle = props => {
   var _props$routes;
-  var subtitle = (0, _reactRedux.useSelector)(state => {
+  var subtitle = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$header;
     return (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.subtitle;
   });
-  var title = (0, _reactRedux.useSelector)(state => {
+  var title = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$config;
     return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
   });

package/dist/containers/Header/ApplicationScreenTitle/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactRedux = require("react-redux");
+var _asab_webui_components = require("asab_webui_components");
 var _reactRouterDom = require("react-router-dom");
 var _ApplicationScreenTitle = _interopRequireDefault(require("./ApplicationScreenTitle"));
 var ApplicationTitleRouter = props => {
-  var routes = (0, _reactRedux.useSelector)(state => {
+  var routes = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$router;
-    return (_state$router = state.router) === null || _state$router === void 0 ? void 0 : _state$router.routes;
+    return ((_state$router = state.router) === null || _state$router === void 0 ? void 0 : _state$router.routes) || [];
   });
   var filteredRoutes = filterRoutesByMatch(routes);
   return /*#__PURE__*/_react.default.createElement(_ApplicationScreenTitle.default, {

package/dist/containers/Header/Help/HelpButton.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = HelpButton;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
-var _reactRedux = require("react-redux");
-var _reactstrap = require("reactstrap");
 var _asab_webui_components = require("asab_webui_components");
+var _reactstrap = require("reactstrap");
 require("./HelpButton.scss");
 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); }
 function HelpButton() {
@@ -17,7 +16,10 @@ function HelpButton() {
   } = (0, _reactI18next.useTranslation)();
   var [modal, setModal] = (0, _react.useState)(false);
   var [isIframeLoading, setIsIframeLoading] = (0, _react.useState)(true);
-  var path = (0, _reactRedux.useSelector)(state => state === null || state === void 0 ? void 0 : state.header.helpPath);
+  var path = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$header;
+    return state === null || state === void 0 || (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.helpPath;
+  });
   if (path == undefined) return null;
   var toggle = () => {
     setModal(prev => {

package/dist/containers/Header/index.js

@@ -8,13 +8,13 @@ exports.default = Header;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
-var _reactRedux = require("react-redux");
+var _asab_webui_components = require("asab_webui_components");
 var _ApplicationScreenTitle = _interopRequireDefault(require("./ApplicationScreenTitle"));
 require("./header.scss");
 function Header(props) {
-  var headerNavItems = (0, _reactRedux.useSelector)(state => {
+  var headerNavItems = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$header;
-    return (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.headerNavItems;
+    return state === null || state === void 0 || (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.headerNavItems;
   });
   return /*#__PURE__*/_react.default.createElement("header", {
     id: "app-header"

package/dist/containers/Header/reducer.js

@@ -12,7 +12,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var initialState = {
   helpPath: undefined,
   subtitle: undefined,
-  flag: undefined,
   headerNavItems: []
 };
 var _default = exports.default = function _default() {
@@ -27,10 +26,6 @@ var _default = exports.default = function _default() {
       return _objectSpread(_objectSpread({}, state), {}, {
         subtitle: action.subtitle
       });
-    case _actions.SET_FLAG:
-      return _objectSpread(_objectSpread({}, state), {}, {
-        flag: action.flag
-      });
     case _actions.SET_HEADER_NAVIGATION_ITEMS:
       // Sort the navigation items
       action.headerNavItems.sort((a, b) => {

package/dist/containers/Navigation/index.js

@@ -37,10 +37,13 @@ class Navigation extends _react.Component {
       // If no existing item, push the new item
       this.Items.push(item);
     }
-    this.App.Store.dispatch({
-      type: _actions.SET_NAVIGATION_ITEMS,
-      navItems: this.Items
-    });
+    if (this.App.AppStore) {
+      var _this$App$AppStore$di, _this$App$AppStore;
+      (_this$App$AppStore$di = (_this$App$AppStore = this.App.AppStore).dispatch) === null || _this$App$AppStore$di === void 0 || _this$App$AppStore$di.call(_this$App$AppStore, {
+        type: _actions.SET_NAVIGATION_ITEMS,
+        navItems: this.Items
+      });
+    }
   }
 }
 exports.default = Navigation;

package/dist/containers/Router/ApplicationRouter.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ApplicationRouter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
 var _reactRouterDom = require("react-router-dom");
+var _asab_webui_components = require("asab_webui_components");
 var _actions = require("../../actions");
 var _RouteErrorHandler = _interopRequireDefault(require("../RouteErrorHandler"));
 var _UnauthorizedAccessScreen = _interopRequireDefault(require("../../screens/UnauthorizedAccessScreen"));
@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // TODO: properly isolate authorization screen from the Application (should be injected when needed and only when AuthModule is enabled)
 
 function ApplicationRouter(props) {
-  var routes = (0, _reactRedux.useSelector)(state => {
+  var routes = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$router;
     return (_state$router = state.router) === null || _state$router === void 0 ? void 0 : _state$router.routes;
   });
@@ -42,11 +42,13 @@ function ApplicationRouter(props) {
   }));
 }
 function RouteRenderer(props) {
-  var resources = (0, _reactRedux.useSelector)(state => {
+  var resources = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$auth;
     return (_state$auth = state.auth) !== null && _state$auth !== void 0 && _state$auth.resources ? state.auth.resources : [];
   });
-  var dispatch = (0, _reactRedux.useDispatch)();
+  var {
+    dispatch
+  } = (0, _asab_webui_components.useAppStore)();
   var defaultHelp = props.app.Config.get("help");
 
   // Set up and dispatch help content

package/dist/containers/Router/index.js

@@ -25,10 +25,13 @@ class Router extends _react.Component {
     	}
     */
     this.Routes.push(route);
-    this.App.Store.dispatch({
-      type: _actions.SET_ROUTES,
-      routes: this.Routes
-    });
+    if (this.App.AppStore) {
+      var _this$App$AppStore$di, _this$App$AppStore;
+      (_this$App$AppStore$di = (_this$App$AppStore = this.App.AppStore).dispatch) === null || _this$App$AppStore$di === void 0 || _this$App$AppStore$di.call(_this$App$AppStore, {
+        type: _actions.SET_ROUTES,
+        routes: this.Routes
+      });
+    }
   }
 }
 exports.default = Router;

package/dist/containers/Sidebar/NavbarBrand.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
 var _reactRouterDom = require("react-router-dom");
 var _BrandImage = require("../../components/branding/BrandImage");
+var _asab_webui_components = require("asab_webui_components");
 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); }
 var NavbarBrand = props => {
   var _brandImage$href;
   var [brandImage, setBrandImage] = (0, _react.useState)({});
-  var theme = (0, _reactRedux.useSelector)(state => state.theme);
-  var title = (0, _reactRedux.useSelector)(state => {
+  var theme = (0, _asab_webui_components.useAppSelector)(state => state.theme);
+  var title = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$config;
     return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
   });
-  var isSidebarCollapsed = (0, _reactRedux.useSelector)(state => {
+  var isSidebarCollapsed = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$sidebar;
     return (_state$sidebar = state.sidebar) === null || _state$sidebar === void 0 ? void 0 : _state$sidebar.isSidebarCollapsed;
   });

package/dist/containers/Sidebar/SidebarBottomItem.js

@@ -8,17 +8,22 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _reactI18next = require("react-i18next");
-var _reactRedux = require("react-redux");
+var _asab_webui_components = require("asab_webui_components");
 var _actions = require("../../actions");
 var SidebarBottomItem = _ref => {
   var {
     sidebarLogo
   } = _ref;
-  var isSidebarCollapsed = (0, _reactRedux.useSelector)(state => state.sidebar.isSidebarCollapsed);
+  var isSidebarCollapsed = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$sidebar;
+    return state === null || state === void 0 || (_state$sidebar = state.sidebar) === null || _state$sidebar === void 0 ? void 0 : _state$sidebar.isSidebarCollapsed;
+  });
   var {
     t
   } = (0, _reactI18next.useTranslation)();
-  var dispatch = (0, _reactRedux.useDispatch)();
+  var {
+    dispatch
+  } = (0, _asab_webui_components.useAppStore)();
 
   // Handle toggle of the sidebar's collapsed state
   var onCollapse = event => {

package/dist/containers/Sidebar/SidebarItem.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _reactRouterDom = require("react-router-dom");
 var _reactI18next = require("react-i18next");
-var _reactRedux = require("react-redux");
 var _reactstrap = require("reactstrap");
 var _asab_webui_components = require("asab_webui_components");
 var _SidebarIcon = _interopRequireDefault(require("./SidebarIcon"));
@@ -28,11 +27,11 @@ var SidebarItem = _ref => {
   var {
     t
   } = (0, _reactI18next.useTranslation)();
-  var isSidebarCollapsed = (0, _reactRedux.useSelector)(state => {
+  var isSidebarCollapsed = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$sidebar;
     return (_state$sidebar = state.sidebar) === null || _state$sidebar === void 0 ? void 0 : _state$sidebar.isSidebarCollapsed;
   });
-  var attentionRequired = (0, _reactRedux.useSelector)(state => {
+  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;
   });
@@ -41,6 +40,7 @@ var SidebarItem = _ref => {
   // Attention requred flag
   var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : attentionRequired["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) {
       setOpen(false);
     }
@@ -88,11 +88,11 @@ var SidebarCollapsibleItem = _ref2 => {
   var {
     t
   } = (0, _reactI18next.useTranslation)();
-  var isSidebarCollapsed = (0, _reactRedux.useSelector)(state => {
+  var isSidebarCollapsed = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$sidebar2;
     return (_state$sidebar2 = state.sidebar) === null || _state$sidebar2 === void 0 ? void 0 : _state$sidebar2.isSidebarCollapsed;
   });
-  var attentionRequired = (0, _reactRedux.useSelector)(state => {
+  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;
   });