asab_webui_shell 25.1.1

package/dist/containers/Application.js

@@ -0,0 +1,773 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+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"));
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _ToastContainer = _interopRequireDefault(require("./Toast/ToastContainer.js"));
+var _NavbarBrand = _interopRequireDefault(require("./Sidebar/NavbarBrand.js"));
+var _Alerts = _interopRequireDefault(require("./Alerts"));
+var _Navigation = _interopRequireDefault(require("./Navigation"));
+var _Router = _interopRequireDefault(require("./Router"));
+var _Sidepanel = _interopRequireDefault(require("./Sidepanel/Sidepanel.js"));
+var _reducer = _interopRequireDefault(require("./Alerts/reducer"));
+var _reducer2 = _interopRequireDefault(require("./Sidebar/reducer"));
+var _reducer3 = _interopRequireDefault(require("./Header/reducer"));
+var _reducer4 = _interopRequireDefault(require("./Navigation/reducer"));
+var _reducer5 = _interopRequireDefault(require("./Router/reducer"));
+var _reducer6 = _interopRequireDefault(require("./FullscreenMode/reducer"));
+var _reducer7 = _interopRequireDefault(require("./AdvancedMode/reducer"));
+var _reducer8 = _interopRequireDefault(require("./AttentionRequired/reducer"));
+var _ReduxService = _interopRequireDefault(require("../services/ReduxService"));
+var _AttentionRequiredService = _interopRequireDefault(require("../services/AttentionRequiredService"));
+var _ConfigService = _interopRequireDefault(require("../config/ConfigService"));
+var _HeaderService = _interopRequireDefault(require("../services/HeaderService"));
+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"));
+require("./Application.scss");
+var _actions = require("../actions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Application = /*#__PURE__*/function (_Component) {
+  /*
+  Example of use hasSidebar.
+  It must be set in Application.
+  If not set, it is considered as true.
+  
+  ...
+  
+  const config = {
+  	hasSidebar: false,
+  }
+  
+  
+  ReactDOM.render((
+  	<BrowserRouter>
+  		<Application modules={modules} {...config}/>
+  	</BrowserRouter>
+  ), document.getElementById('app'));
+  
+  ...
+  
+  Example of settings in Module of the Application
+  Following above settings, this will show the item in
+  the header and when the screen is diminished (e.g. screening
+  using the mobile phone), the item is moved to the sidebar and
+  it is accessible by the sidebar toggler button.
+  
+  ...
+  
+  	app.Navigation.addItem({
+  		name: 'Item 1',
+  		url: '',
+  	});
+  
+  ...
+  	*/
+
+  function Application(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Application);
+    _this = _callSuper(this, Application, [props]);
+    _this.Modules = [];
+    _this.Services = {};
+    _this.ReduxService = new _ReduxService["default"](_this, "ReduxService");
+    _this.ConfigService = new _ConfigService["default"](_this, "ConfigService");
+    _this.Config = _this.ConfigService.Config;
+    _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
+    _this.AxiosInterceptors = new Set();
+    _this.WebSocketInterceptors = new Set();
+    _this.AttentionRequiredService = new _AttentionRequiredService["default"](_this, "AttentionRequired");
+    _this.HeaderService = new _HeaderService["default"](_this, "HeaderService");
+    _this.ThemeService = new _ThemeService["default"](_this, "ThemeService");
+    _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"]);
+    _this._handleKeyUp = _this._handleKeyUp.bind(_this);
+    _this.state = {
+      networking: 0,
+      // 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;
+    function modules_init() {
+      return _modules_init.apply(this, arguments);
+    }
+    function _modules_init() {
+      _modules_init = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var i, modcandidate, modloaded, mod, _mod, ret;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.t0 = _regenerator["default"].keys(props.modules);
+            case 1:
+              if ((_context2.t1 = _context2.t0()).done) {
+                _context2.next = 29;
+                break;
+              }
+              i = _context2.t1.value;
+              // The candidate can be:
+              //  1. { Module } from "asab_webui_components"
+              //  2. A promise that loads the remote module from the federated application
+              modcandidate = props.modules[i];
+              modloaded = void 0;
+              if (!(modcandidate.prototype instanceof _asab_webui_components.Module)) {
+                _context2.next = 10;
+                break;
+              }
+              // This is a Module from "asab_webui_components"
+              mod = new modcandidate(that);
+              that.Modules.push(mod);
+              _context2.next = 25;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.next = 13;
+              return Promise.resolve(modcandidate);
+            case 13:
+              modloaded = _context2.sent;
+              _context2.next = 20;
+              break;
+            case 16:
+              _context2.prev = 16;
+              _context2.t2 = _context2["catch"](10);
+              if (_context2.t2 instanceof Error && _context2.t2.name == 'ScriptExternalLoadError') {
+                // The initial load of the remote failed; it is ok in development environment
+                console.warn("Failed to load a remote module: ScriptExternalLoadError:", _context2.t2.message);
+              } else {
+                console.error(_context2.t2);
+              }
+              return _context2.abrupt("continue", 1);
+            case 20:
+              if (!(!modloaded["default"].prototype instanceof _asab_webui_components.Module)) {
+                _context2.next = 23;
+                break;
+              }
+              console.error("The default object from the remote is not a Module - skipping");
+              return _context2.abrupt("continue", 1);
+            case 23:
+              _mod = new modloaded["default"](that); // We expect 'export default class ...Module extends Module'
+              that.Modules.push(_mod);
+            case 25:
+              that.Store.replaceReducer((0, _redux.combineReducers)(that.ReduxService.Reducers));
+              that.Config.dispatch(that.Store);
+              _context2.next = 1;
+              break;
+            case 29:
+              _context2.t3 = _regenerator["default"].keys(that.Modules);
+            case 30:
+              if ((_context2.t4 = _context2.t3()).done) {
+                _context2.next = 37;
+                break;
+              }
+              i = _context2.t4.value;
+              ret = that.Modules[i].initialize(); // Transform result in the promise
+              // It unifies synchronous and asynchronous `initialize()` calls
+              _context2.next = 35;
+              return Promise.resolve(ret);
+            case 35:
+              _context2.next = 30;
+              break;
+            case 37:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[10, 16]]);
+      }));
+      return _modules_init.apply(this, arguments);
+    }
+    modules_init().then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var i, ret;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            that.Store.replaceReducer((0, _redux.combineReducers)(that.ReduxService.Reducers));
+            that.Config.dispatch(that.Store);
+
+            // Initialize all services
+            _context.t0 = _regenerator["default"].keys(that.Services);
+          case 3:
+            if ((_context.t1 = _context.t0()).done) {
+              _context.next = 11;
+              break;
+            }
+            i = _context.t1.value;
+            ret = that.Services[i].initialize(); // Transform result in the promise
+            // It unifies synchronous and asynchronous `initialize()` calls
+            _context.next = 8;
+            return Promise.resolve(ret);
+          case 8:
+            that.Config.dispatch(that.Store);
+            _context.next = 3;
+            break;
+          case 11:
+            that.removeSplashScreenRequestor(that);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    return _this;
+  }
+  (0, _inherits2["default"])(Application, _Component);
+  return (0, _createClass2["default"])(Application, [{
+    key: "getServiceURL",
+    value: function getServiceURL(service) {
+      // Handle if service is unknown => return undefined
+      if (service == undefined) {
+        console.warn("Service is undefined!");
+        return undefined;
+      }
+
+      // Handle if SERVICES not provided, empty object will be used as default
+      var services = this.Config.get('SERVICES') ? this.Config.get('SERVICES') : {};
+
+      // Handle if service is not in SERVICES => use service as service_path
+      var service_path = services[service] ? services[service] : service;
+
+      // If service_path is complete URL, then return that URL
+      if (service_path.toString().indexOf('http://') !== -1 || service_path.toString().indexOf('https://') !== -1) {
+        return service_path;
+      }
+      // If service_path is complete WebSocket URL, then return that URL
+      if (service_path.toString().indexOf('ws://') !== -1 || service_path.toString().indexOf('wss://') !== -1) {
+        return service_path;
+      }
+
+      // Obtain BASE_URL
+      var BASE_URL = undefined;
+      if (this.Config.get('BASE_URL') == undefined) {
+        // If BASE_URL has not been defined => take browser URL as BASE_URL
+        BASE_URL = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/\/$/, '');
+      } else if (this.Config.get('BASE_URL').toString().indexOf('http://') !== -1 || this.Config.get('BASE_URL').toString().indexOf('https://') !== -1) {
+        // If BASE_URL has been defined => take defined BASE_URL as BASE_URL
+        BASE_URL = this.Config.get('BASE_URL');
+      } else {
+        // If BASE_URL has been defined but with relative path => take browser URL as BASE_URL and append relative path from BASE_URL behind the browser URL
+        var relative_base_url = this.Config.get('BASE_URL');
+        // Check if trailing slash has been added on first place of a BASE_URL string and if so, remove it
+        if (relative_base_url.indexOf("/", 0) == 0) {
+          relative_base_url = relative_base_url.substring(1);
+        }
+        BASE_URL = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/\/$/, '') + '/' + relative_base_url.replace(/\/$/, '');
+      }
+
+      // Compose service_url
+      var service_url = undefined;
+      if (this.Config.get('API_PATH') == undefined) {
+        // If API_PATH has not been defined => use /api to compose service_url
+        service_url = BASE_URL.replace(/\/$/, '') + '/api';
+      } else if (this.Config.get('API_PATH').toString().indexOf('http://') !== -1 || this.Config.get('API_PATH').toString().indexOf('https://') !== -1) {
+        // If API_PATH has been defined but with absolute URL => use API_PATH as service_url
+        service_url = this.Config.get('API_PATH');
+      } else {
+        // If API_PATH has been defined => use API_PATH to compose service_url
+        var api_path = this.Config.get('API_PATH');
+        // Check if trailing slash has been added on first place of a API_PATH string and if so, remove it
+        if (api_path.indexOf("/", 0) == 0) {
+          api_path = api_path.substring(1);
+        }
+        service_url = BASE_URL.replace(/\/$/, '') + "/" + api_path;
+      }
+      return service_url.replace(/\/$/, '') + "/" + service_path;
+    }
+
+    /*
+     *	Creates an AXIOS object for communication with TeskaLabs API's
+     *
+     *	IMPORTANT NOTE:
+     *		Bearer token will be sent to any URL specified in the API / Services configuration.
+     *		axiosCreate must only be used for creating http sessions
+     *		towards TeskaLabs API's, since it adds Bearer token to all calls.
+     */
+  }, {
+    key: "axiosCreate",
+    value: function axiosCreate(service, props) {
+      var service_url = this.getServiceURL(service);
+      if (service_url == undefined) {
+        this.addAlert('danger', "ASABApplicationContainer|Service URL is undefined, please check service paths passed to axios", 5, true);
+        return undefined;
+      }
+      var axios = _axios["default"].create(_objectSpread(_objectSpread({}, props), {}, {
+        baseURL: service_url
+      }));
+
+      // Iterate through custom interceptors
+      var _iterator = _createForOfIteratorHelper(this.AxiosInterceptors.keys()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var interceptor = _step.value;
+          this.interceptorRequest(axios, interceptor);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var that = this;
+
+      /*
+      	We want to be notified when networking activity is taking place,
+      	thus we use pushNetworkingIndicator.
+      		Default request headers are X-App and X-Request-Id which
+      	define recognition of the requests from the service perspective
+      */
+      axios.interceptors.request.use(function (config) {
+        that.pushNetworkingIndicator();
+        config.headers['X-App'] = "webui"; // Include X-App header in every axios API request
+        config.headers['X-Request-Id'] = that._generateUID(); // Include X-Request-Id header in every axios API request
+        return config;
+      }, function (error) {
+        return Promise.reject(error);
+      });
+
+      // We want to remove networking indicator when we recieve the response
+      axios.interceptors.response.use(function (response) {
+        that.popNetworkingIndicator();
+        return response;
+      }, function (error) {
+        that.popNetworkingIndicator();
+        return Promise.reject(error);
+      });
+      return axios;
+    }
+
+    // Internal method for generating random UID's
+  }, {
+    key: "_generateUID",
+    value: function _generateUID() {
+      /*
+      	- Math.random() * 0x100000000: Generates a random floating-point number between 0 and 0x100000000.
+      	- >>> 0: Applies a bitwise unsigned right shift by 0, effectively converting the floating-point number to a 32-bit unsigned integer.
+      	- toString(36): Converts the integer to a base-36 string, using the digits 0-9 and letters a-z.
+      */
+      return (Math.random() * 0x100000000 >>> 0).toString(36) + (Math.random() * 0x100000000 >>> 0).toString(36) + (Math.random() * 0x100000000 >>> 0).toString(36) + (Math.random() * 0x100000000 >>> 0).toString(36);
+    }
+  }, {
+    key: "interceptorRequest",
+    value: function interceptorRequest(axios, interceptor) {
+      // Add a request interceptor
+      axios.interceptors.request.use(interceptor, function (error) {
+        return Promise.reject(error);
+      });
+    }
+  }, {
+    key: "addAxiosInterceptor",
+    value: function addAxiosInterceptor(interceptor) {
+      this.AxiosInterceptors.add(interceptor);
+    }
+  }, {
+    key: "removeAxiosInterceptor",
+    value: function removeAxiosInterceptor(interceptor) {
+      this.AxiosInterceptors["delete"](interceptor);
+    }
+  }, {
+    key: "addWebSocketInterceptor",
+    value: function addWebSocketInterceptor(interceptor) {
+      this.WebSocketInterceptors.add(interceptor);
+    }
+  }, {
+    key: "removeWebSocketInterceptor",
+    value: function removeWebSocketInterceptor(interceptor) {
+      this.WebSocketInterceptors["delete"](interceptor);
+    }
+  }, {
+    key: "getWebSocketURL",
+    value: function getWebSocketURL(service, subpath) {
+      // Handle if service is unknown => return undefined
+      var service_url = this.getServiceURL(service);
+      if (service_url == undefined) {
+        return undefined;
+      }
+
+      // Handle if subpath is unknown => subpath = ""
+      if (subpath == undefined) {
+        subpath = "";
+      }
+
+      // If service_path is complete WebSocket URL, then return that URL
+      if (service_url.toString().indexOf('ws://') !== -1 || service_url.toString().indexOf('wss://') !== -1) {
+        return service_url;
+      }
+
+      // Replace http:// or https:// protocol with ws:// or wss://
+      var ws_service_url = service_url.replace(/(http)(s)?\:\/\//, "ws$2://");
+      return ws_service_url + subpath;
+    }
+  }, {
+    key: "createWebSocket",
+    value: function createWebSocket(service, subpath) {
+      var socket_url = this.getWebSocketURL(service, subpath);
+      if (socket_url == undefined) {
+        this.addAlert('danger', "ASABApplicationContainer|WebSocket URL is undefined, please check service and subpath passed to WebSocket", 5, true);
+        return undefined;
+      }
+
+      /*
+      	Adding ws interceptors to the ws subprotocols (e.g. to pass auth token).
+      		"asab" subprotocol is given by default for consumer (any websocket service)
+      	which require this particular value to authenticate websocket connection,
+      	since some browsers (Chrome, Safari, ...) requires Sec-Websocket-Accept
+      	response header.
+      		Another default subprotocols are "app_webui" and "request_id_<uid>"
+      	which define recognition of the requests from the service perspective
+      */
+      var subprotocols = ["asab", "app_webui", "request_id_".concat(this._generateUID())];
+      var _iterator2 = _createForOfIteratorHelper(this.WebSocketInterceptors.keys()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var interceptor = _step2.value;
+          // Avoid pushing undefined interceptor values
+          if (interceptor) {
+            subprotocols.push(interceptor);
+          }
+        }
+
+        // Create new WebSocket based on socket URL
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var socket = new WebSocket(socket_url, subprotocols);
+      return socket;
+    }
+
+    // Display and hide networking indicator
+  }, {
+    key: "pushNetworkingIndicator",
+    value: function pushNetworkingIndicator() {
+      this.setState(function (prevState, props) {
+        return {
+          networking: prevState.networking + 1
+        };
+      });
+    }
+  }, {
+    key: "popNetworkingIndicator",
+    value: function popNetworkingIndicator() {
+      this.setState(function (prevState, props) {
+        return {
+          networking: prevState.networking - 1
+        };
+      });
+    }
+  }, {
+    key: "registerService",
+    value: function registerService(service) {
+      if (service.Name in this.Services) {
+        console.warn("Service ".concat(service.Name, " is already registered."));
+        return;
+      }
+      this.Services[service.Name] = service;
+    }
+  }, {
+    key: "locateService",
+    value: function locateService(name) {
+      if (!name in this.Services) {
+        console.warn("Service ".concat(name, " doesn't exist."));
+        return null;
+      }
+      return this.Services[name];
+    }
+
+    // This function handles keystroke events and performs enabling/disabling of mods
+  }, {
+    key: "_handleKeyUp",
+    value: function _handleKeyUp(event) {
+      // CTRL+SHIFT+F enables the fullscreen mode
+      if (event.ctrlKey && event.shiftKey && event.code === 'KeyF') {
+        this.setFullScreenMode('on');
+      }
+
+      // CTRL+Q (Windows) or CTRL+1 (Linux) enables the advanced mode
+      if (event.ctrlKey && event.code === 'KeyQ' || event.code === 'Digit1' && event.ctrlKey) {
+        this.setAdvancedMode(0);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener("keyup", this._handleKeyUp, false);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener("keyup", this._handleKeyUp, false);
+    }
+
+    // Splash screen
+  }, {
+    key: "addSplashScreenRequestor",
+    value: function addSplashScreenRequestor(obj) {
+      var origLen = this.SplashscreenRequestors.size;
+      this.SplashscreenRequestors.add(obj);
+      if (origLen != this.SplashscreenRequestors.size) {
+        this.state.splashscreenRequestors = this.SplashscreenRequestors.size;
+      }
+      var splashscreen = document.getElementById('app-splashscreen'); // See public/index.html`
+      splashscreen === null || splashscreen === void 0 || splashscreen.classList.remove("d-none");
+    }
+  }, {
+    key: "removeSplashScreenRequestor",
+    value: function removeSplashScreenRequestor(obj) {
+      var origLen = this.SplashscreenRequestors.size;
+      this.SplashscreenRequestors["delete"](obj);
+      if (origLen != this.SplashscreenRequestors.size) {
+        this.setState({
+          splashscreenRequestors: this.SplashscreenRequestors.size
+        });
+      }
+      if (this.SplashscreenRequestors.size == 0) {
+        var splashscreen = document.getElementById('app-splashscreen'); // See public/index.html
+        splashscreen === null || splashscreen === void 0 || splashscreen.classList.add("d-none");
+      }
+    }
+
+    // Alerts
+    /*
+    	levels:
+    	* danger
+    	* warning
+    	* info
+    	* success
+    */
+  }, {
+    key: "addAlert",
+    value: function addAlert(level, message) {
+      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({
+        type: _actions.ADD_ALERT,
+        level: level,
+        message: message,
+        expire: expire,
+        shouldBeTranslated: shouldBeTranslated,
+        component: component
+      });
+    }
+
+    /*
+    	Alert from exception suppose to be used ONLY for exception cases.
+    	By default it requires:
+    			- exception - this is comming from the try{...}catch(exception){...} . It is important to pass the whole exception.
+    		- message - this is the custom message written by developer based on the situation
+    		Additional options are:
+    			- expire - expiration of the aler (by default set to 30s)
+    		- shouldBeTranslated - boolean for cases where is not possible to use useTranslation hook (by default false)
+    		- component - option to pass additional component of the alert message e.g. button (by default null)
+    		addAlertFromException will always use "danger" color as its background and the full exception will be printed into the console
+    */
+  }, {
+    key: "addAlertFromException",
+    value: function addAlertFromException(exception, message) {
+      var _exception$response;
+      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 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) {
+        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;
+        /*
+        	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) {
+          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: {
+              whiteSpace: 'pre-wrap'
+            }
+          }, exception.response.data.message));
+        } else {
+          // Exception message is always present in the exception
+          exceptionMessage = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h5", null, exceptionMessage), (exception === null || exception === void 0 ? void 0 : exception.message) && /*#__PURE__*/_react["default"].createElement("div", {
+            className: "mt-2"
+          }, exception.message));
+        }
+      }
+      this.Store.dispatch({
+        type: _actions.ADD_ALERT,
+        level: "danger",
+        message: exceptionMessage,
+        expire: expire,
+        shouldBeTranslated: shouldBeTranslated,
+        component: component
+      });
+    }
+  }, {
+    key: "setAdvancedMode",
+    value: function setAdvancedMode(enabled) {
+      if (enabled === 0) {
+        var state = this.Store.getState();
+        enabled = !state.advmode.enabled;
+      }
+      this.Store.dispatch({
+        type: _actions.SET_ADVANCED_MODE,
+        enabled: enabled
+      });
+      if (enabled) {
+        this.addAlert('warning', "ASABApplicationContainer|Advanced mode enabled", 1, true);
+      } else {
+        this.addAlert('success', "ASABApplicationContainer|Advanced mode disabled", 1, 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.
+    */
+  }, {
+    key: "setFullScreenMode",
+    value: function setFullScreenMode(status) {
+      var state = this.Store.getState();
+      if (status === 'on' && state.fullscreenmode.status === 'on') {
+        status = 'off';
+      }
+      this.Store.dispatch({
+        type: _actions.SET_FULLSCREEN_MODE,
+        status: status
+      });
+      if (status === 'on') {
+        document.body.classList.add('fullscreen');
+        this.addAlert('info', 'ASABApplicationContainer|Fullscreen mode turned on. To turn it off, press CTRL + SHIFT + F.', 30, true);
+      } else {
+        document.body.classList.remove('fullscreen');
+        this.addAlert('info', 'ASABApplicationContainer|Fullscreen mode turned off', 30, true);
+      }
+    }
+  }, {
+    key: "setFlag",
+    value: function setFlag(name) {
+      var _this2 = this;
+      (0, _react.useEffect)(function () {
+        _this2.Store.dispatch({
+          type: _actions.SET_FLAG,
+          flag: name
+        });
+        return function () {
+          _this2.Store.dispatch({
+            type: _actions.SET_FLAG,
+            flag: undefined
+          });
+        };
+      }, [name]);
+    }
+  }, {
+    key: "render",
+    value: function 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, {
+          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"], {
+          app: this
+        }), /*#__PURE__*/_react["default"].createElement("main", {
+          id: "app-main"
+        }, /*#__PURE__*/_react["default"].createElement(_AccessDeniedCard["default"], {
+          app: this
+        })))))
+      );
+      return /*#__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", {
+        id: "app-networking-indicator",
+        className: "progress-bar progress-bar-animated progress-bar-striped" + (this.state.networking == 0 ? " transparent" : "")
+      }), /*#__PURE__*/_react["default"].createElement(_Alerts["default"], {
+        app: this
+      }), /*#__PURE__*/_react["default"].createElement(_NavbarBrand["default"], {
+        app: this
+      }), /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], {
+        app: this
+      }), /*#__PURE__*/_react["default"].createElement(_ToastContainer["default"], {
+        app: this
+      }), /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+        app: this
+      }), /*#__PURE__*/_react["default"].createElement("main", {
+        id: "app-main"
+      }, /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+        fallback: /*#__PURE__*/_react["default"].createElement(_SuspenseScreen["default"], {
+          app: this
+        }) /*The suspense that captures lazy loading of the federated apps*/
+      }, /*#__PURE__*/_react["default"].createElement(_ApplicationRouter["default"], {
+        app: this
+      }))), /*#__PURE__*/_react["default"].createElement(_Sidepanel["default"], {
+        app: this
+      }))));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = Application;