asab_webui_shell 25.1.1

package/CHANGELOG.md

@@ -0,0 +1,218 @@
+# CHANGELOG for ASAB WebUI Shell
+
+## v24.47
+
+### Releases
+
+- v24.47-alpha36
+- v24.47-alpha34
+- v24.47-alpha16
+- v24.47-alpha6
+
+### Breaking changes
+
+- A tenant was added to a beacon websocket path, thus WebUI version `v24.47-alpha16` and higher must be aligned with `asab-remote-control` service `v24.48-alpha` and higher.
+- `X-Tenant` was removed from Request headers and `tenant_` was removed from websocket Sec-Websocket-Protocol in `v24.47-alpha6` WebUI version.
+
+### Bugfix
+
+- Fix session expiration handling (fixed the issues with idle mode, refactored the strucutre) and the session expiration info alert message (!463, INDIGO Sprint 250122, v24.47-alpha36)
+- Do not include dummy secret in auth token request (!498, PLUM Sprint 241213, v24.47-alpha34)
+
+### Refactor
+
+- Add a tenant to beacon websocket connection path, this must be aligned with `asab-remote-control` service `v24.48-alpha` and higher (!467, INDIGO Sprint 241122, v24.47-alpha16)
+- Remove `X-Tenant` from request headers, remove `tenant_` from websocket subprotocols (!458, INDIGO Sprint 241108, v24.47-alpha6)
+
+## v24.43
+
+### Releases
+
+- v24.43-alpha5
+
+### Refactor
+
+- Refactor (lowercase) `X-Request-ID` header to `X-Request-Id` (!440, INDIGO Sprint 241030, v24.43-alpha5)
+
+## v24.38
+
+### Releases
+
+- v24.38-alpha16
+- v24.38-alpha9
+- v24.38-alpha4
+- v24.38-alpha2
+
+### Refactor
+
+- Implement sorting for available tenants (!412, INDIGO Sprint 240913, v24.38-alpha9)
+
+### Features
+
+- Implement `X-App: "webui"` and `X-Request-ID: <uid>` API request headers and `app_webui` and `request_id_<uid>` subprotocols to every request call to the service (!420, INDIGO Sprint 240913, v24.38-alpha16)
+- Implement attention required service with Beacons and Toasts (!390, INDIGO Sprint 240913, v24.38-alpha2)
+
+### Bugfix
+
+- Fix issue on user trying to log in to the application without a assigned tenant, resulting in the infinite loop. (!413, INDIGO Sprint 240913, v24.38-alpha4)
+
+## v24.28
+
+### Releases
+
+- v24.28-alpha33
+- v24.28-alpha30
+- v24.28-alpha8
+
+### Breaking changes
+
+- Added special attributes to work correctly to generate `pdf/png` exports for superuser. Recommended not to be combined with the `asab-pyppeteer` service of versions **lower** than `v24.32-alpha3`.
+
+### Features
+
+- Implement `print-ready` and `print-unauthorized` attribute for `UnauthorizedAccessScreen` (!375, INDIGO Sprint 240802, v24.28-alpha30)
+- Add interceptors for injecting tenant into the request headers for API (`X-Tenant`) and websocket (`tenant_`) calls. (!348, INDIGO Sprint 240621, v24.28-alpha8)
+
+### Bugfix
+
+- Fix on implementation of `print-ready` and `print-unauthorized` attribute for `UnauthorizedAccessScreen` which was causing the application crashes (!386, INDIGO Sprint 240802, v24.28-alpha33)
+
+## v24.19
+
+### Releases
+
+- v24.19-alpha30
+- v24.19-alpha27
+- v24.19-alpha23
+- v24.19-alpha19
+- v24.19-alpha15
+- v24.19-alpha14
+- v24.19-alpha12
+- v24.19-alpha11
+- v24.19-alpha9
+- v24.19-alpha1
+
+### Breaking changes
+
+- User invitation path has been updated. Requires Seacat Auth `v24.17-beta1` or later.
+
+### Features
+
+- Update user invitation path (!332, PLUM Sprint 240531, v24.19-alpha19)
+- Implement Application sidepanel feature (!310, INDIGO Sprint 240527, v24.19-alpha14)
+- Change color and icon of username if the user is logged in as a superuser (!321, INDIGO Sprint 240527, v24.19-alpha11)
+- Implement FullScreen mode (!252, INDIGO Sprint 240527, v24.19-alpha9)
+- Add sorting to the Navigation item children (!305, INDIGO Sprint 240510, v24.19-alpha1)
+
+### Refactor
+
+- Updated info alert for Fullscreen mode. (!342, INDIGO Sprint 240621, v24.19-alpha30)
+- Rename ErrorHandler component to RouteErrorHandler (!339, INDIGO Sprint 240621, v24.19-alpha27)
+- Change svg chevron in sidebar bottom to bootstrap icon (!329, INDIGO Sprint 240607, v24.19-alpha23)
+- Refactor `addAlertFromException`. Added new condition for checking new format of errors (!299, INDIGO Sprint 240527, v24.19-alpha12)
+
+### Bugfix
+
+- Change color of the caret in the DropdownToggle of the username (when user is logged in as superuser) (!328, INDIGO Sprint 240527, v24.19-alpha15)
+
+## v24.08
+
+- v24.08-alpha51
+- v24.08-alpha49
+- v24.08-alpha40
+- v24.08-alpha33
+- v24.08-alpha28
+- v24.08-alpha27
+- v24.08-alpha21
+- v24.08-alpha14
+- v24.08-alpha13
+- v24.08-alpha10
+
+### Breaking changes
+
+- The option to hide sidebar items via configuration has been removed from `v24.08-alpha13`. Therefore the configuration schema needs to be updated accordingly.
+
+### Features
+
+- Log into last authorized tenant (!301, PLUM Sprint 240503, v24.08-alpha51)
+- Implement cancel button for invitations (!285, INDIGO Sprint 240430, v24.08-alpha49)
+- Implement PubSub messaging (!244, INDIGO Sprint 240411, v24.08-alpha40)
+- Update auth header to use Seacat Account UI (!148, INDIGO Sprint 240301, v24.08-alpha21)
+- Implement `removeComponent` method for `HeaderService` (!205, INDIGO Sprint 240301, v24.08-alpha14)
+
+### Refactor
+
+- Display the resources in the access control screen in alphabetical order (!254, INDIGO Sprint 240402, v24.08-alpha28)
+- Remove the option to hide sidebar items using configuration (!232, INDIGO Sprint 240301, v24.08-alpha13)
+- Change height of ResultCard and remove top margin to prevent scrolling (!122, INDIGO Sprint 240216, v24.08-alpha10)
+
+### Bugfix
+
+- Redirect URI in authorization request and token request must match (!255, INDIGO Sprint 240402, v24.08-alpha27)
+
+### Hotfix
+
+- Fix title service causing application crash due to render issues caused by useEffect in the Title service (!260, INDIGO Sprint 240411, v24.08-alpha33)
+
+## v24.03
+
+### Releases
+
+- v24.03-alpha3
+
+### Features
+
+- Add ResultCard, which will be displayed after un/successfully inviting other users (!163, INDIGO Sprint 240105, v24.03-alpha3)
+
+## v23.48
+
+### Releases
+
+- v23.48-alpha30
+- v23.48-alpha28
+- v23.48-alpha23
+- v23.48-alpha22
+- v23.48-alpha17
+- v23.48-alpha6
+
+### Features
+
+- Add a "asab" websocket subprotocol to enable working of websocket connection with Chrome/Safari/... browsers. These browsers requires Sec-Websocket-Accept response header which this change should allow (!170, INDIGO Sprint 240105, v23.48-alpha28)
+- Add "batman" to OAuth scope to enable authorized communication with ElasticSearch (!166, INDIGO Sprint 231208, v23.48-alpha22)
+
+
+### Refactor
+
+- Refactor handling of the Help button content in the header and make it more performant (!161, INDIGO Sprint 231208, v23.48-alpha17)
+- Refactor sidebar styling and collapse behaviour and fixing :active state when clicking inside screens (!105, INDIGO Sprint 231110, v23.48-alpha6)
+- Refactor sidebar modal and fixing behaviour of nav items so they will stay active on the correct item in library (!154, INDIGO Sprint 231124, v23.48-alpha23)
+
+### Bugfix
+
+- Fix displaying sidebar in the print, replace bootstrap styles form jsx to scss file (!172, INDIGO Sprint 240105, v23.48-alpha30)
+
+## v23.45
+
+### Releases
+
+- v23.45-alpha6
+- v23.45-alpha1
+
+### Breaking changes
+
+- After migration from react-router-dom v5 to react-router-dom v6, some of the routing components are not being supported. For more info, please see https://reactrouter.com/en/main/upgrading/v5
+
+### Features
+
+- Implement addAlertFromException method to render additional information from exceptions in Alert message (!106, INDIGO Sprint 231110, v23.45-alpha6)
+- Migrate react-router-dom from v5 to v6 (!98, INDIGO Sprint 231027, v23.45-alpha1)
+
+## v23.44
+
+### Releases
+
+- v23.44-alpha3
+
+### Refactoring
+
+- Rename `asab_webui_state` used for capturing the application state to `oauth2_state_<state>` and made a string instead of object from it to avoid race conditions (!116, INDIGO Sprint 231027, v23.44-alpha3)

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, TeskaLabs
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,3 @@
+# Asab Webui Shell Lib
+
+Shell library of ASAB used in WebUI projects.

package/dist/actions.js

@@ -0,0 +1,22 @@
+"use strict";
+
+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;
+var ADD_ALERT = exports.ADD_ALERT = "asab/addAlert";
+var ACK_ALERT = exports.ACK_ALERT = "asab/ackAlert";
+var DEL_ALERT = exports.DEL_ALERT = "asab/delAlert";
+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";
+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_ATTENTION_REQUIRED_BEACON = exports.SET_ATTENTION_REQUIRED_BEACON = "asab/setAttentionRequiredBeacon";

package/dist/components/branding/BrandImage.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBrandImage = getBrandImage;
+/* Using getBrandImage
+
+- GetBrandImage function returns a brandImage object, based on theme.
+
+- Under the hood, the function uses BrandingService. This service determines correct configuration tu use (dynamic, static, or default).
+Then, if selected configuration's brand image is not complete (e.g. minimized variation is missing), it substitutes missing variations.
+
+`getBrandImage(props, theme, type);`
+	params:
+		* props
+		* theme ('light' || 'dark')
+		* type (optional, default is 'brandImage') - determines content - either for brand Image (in header) or for company branding in the bottom of the sidebar
+
+	return example
+	`{
+		full: 'path/to/logo-light-full',
+		minimized: 'path/to/logo-light-minimized',
+		href: '/subpath'
+	}`
+
+	Example:
+
+	```javascript
+		import { useState, useEffect } from 'react';
+		import { getBrandImage } from 'asab_webui_shell';
+		import { useSelector } from 'react-redux';
+
+		const YourCode = (props) => {
+			const [ brandImage, setBrandImage ] = useState({});
+			const theme = useSelector(state => state.theme);
+
+			useEffect(() => {
+				setBrandImage(getBrandImage(props, theme));
+			}, [theme]);
+
+			...
+
+			return (
+				<>
+
+				...
+
+					<img src={brandImage?.full}/>
+
+				...
+
+				</>
+			)
+		};
+
+		export default YourCode
+
+	```
+*/
+
+function getBrandImage(props) {
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "brandImage";
+  var BrandingService = props.app.Services.BrandingService;
+  var brandImage;
+  if (BrandingService && theme) {
+    brandImage = BrandingService.getLogo(theme, type);
+  }
+  return brandImage;
+}
+;

package/dist/components/locationReplace.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.locationReplace = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+/*
+
+Use only within async functions as per example below.
+locationReplace function help to avoid unintended async actions
+before window.location.replace has finished.
+
+
+```
+import { locationReplace } from '../../components/locationReplace';
+
+const myFunc = async () => {
+	...
+
+	const url = "url/to/replace";
+	await locationReplace(url);
+	...
+}
+
+```
+
+*/
+
+var locationReplace = exports.locationReplace = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(url) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          window.location.replace(url.toString());
+          _context.next = 3;
+          return new Promise(function (r) {
+            return setTimeout(r, 3600 * 1000);
+          });
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function locationReplace(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/config/ConfigReducer.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ConfigReducer;
+var _actions = require("../actions");
+// Actions
+
+var initialState = {};
+function ConfigReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.CHANGE_CONFIG:
+      {
+        return action.config;
+      }
+    default:
+      return state;
+  }
+}

package/dist/config/ConfigService.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _asab_webui_components = require("asab_webui_components");
+var _ConfigReducer = _interopRequireDefault(require("./ConfigReducer"));
+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; }
+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 ConfigService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function ConfigService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ConfigService";
+    (0, _classCallCheck2["default"])(this, ConfigService);
+    _this = _callSuper(this, ConfigService, [app, serviceName]);
+    app.ReduxService.addReducer("config", _ConfigReducer["default"]);
+    _this.Config = new Config();
+    return _this;
+  }
+  (0, _inherits2["default"])(ConfigService, _Service);
+  return (0, _createClass2["default"])(ConfigService, [{
+    key: "initialize",
+    value: function initialize() {
+      var _document$getElements, _document$getElements2, _document$getElements3, _document$getElements4, _document$getElements5, _document$getElements6;
+      // Initialization of dynamic configuration
+      var headerLogoFull = (_document$getElements = document.getElementsByName('header-logo-full')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
+      var headerLogoMini = (_document$getElements2 = document.getElementsByName('header-logo-minimized')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.content;
+      var headerLogoFullDark = (_document$getElements3 = document.getElementsByName('header-logo-full-dark')[0]) === null || _document$getElements3 === void 0 ? void 0 : _document$getElements3.content;
+      var headerLogoMiniDark = (_document$getElements4 = document.getElementsByName('header-logo-minimized-dark')[0]) === null || _document$getElements4 === void 0 ? void 0 : _document$getElements4.content;
+      var title = (_document$getElements5 = document.getElementsByName('title')[0]) === null || _document$getElements5 === void 0 ? void 0 : _document$getElements5.content;
+      var customCSS = (_document$getElements6 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements6 === void 0 ? void 0 : _document$getElements6.content;
+      var dynamicConfig = {};
+      // determine if any logos have been dynamically configured and assign brandImage property as an empty object
+      if (headerLogoFull != undefined && headerLogoFull != "" || headerLogoFullDark != undefined && headerLogoFullDark != "" || headerLogoMini != undefined && headerLogoMini != "" || headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
+        dynamicConfig.brandImage = {};
+      }
+      // If header's full light logo has been configured, add it to dynamic config object
+      if (headerLogoFull != undefined && headerLogoFull != "") {
+        Object.assign(dynamicConfig.brandImage, {
+          "light": {
+            "full": headerLogoFull
+          }
+        });
+      }
+      // If header's full dark logo has been configured, extend/add it to dynamic config's brandImage property
+      if (headerLogoFullDark != undefined && headerLogoFullDark != "") {
+        Object.assign(dynamicConfig.brandImage, {
+          "dark": {
+            "full": headerLogoFullDark
+          }
+        });
+      }
+      // If header's minimized light logo has been configured, extend/add it to dynamic config brandImage property
+      if (headerLogoMini != undefined && headerLogoMini != "") {
+        var _dynamicConfig$brandI;
+        Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
+          "light": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI = dynamicConfig.brandImage) === null || _dynamicConfig$brandI === void 0 ? void 0 : _dynamicConfig$brandI.light), {}, {
+            "minimized": headerLogoMini
+          })
+        }));
+      }
+      // If header's minimized dark logo has been configured, extend/add it to dynamic config brandImage property
+      if (headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
+        var _dynamicConfig$brandI2;
+        Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
+          "dark": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI2 = dynamicConfig.brandImage) === null || _dynamicConfig$brandI2 === void 0 ? void 0 : _dynamicConfig$brandI2.dark), {}, {
+            "minimized": headerLogoMiniDark
+          })
+        }));
+      }
+
+      // Add custom title
+      if (title != undefined && title != "") {
+        dynamicConfig["title"] = title;
+      }
+      // Add custom CSS
+      if (customCSS != undefined && customCSS != "") {
+        var link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('href', customCSS);
+        // Append to the `head` element
+        document.head.appendChild(link);
+      }
+
+      // 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);
+        } else {
+          console.warn('Dynamic configuration has not been dispatched to application store');
+        }
+      }
+    }
+  }, {
+    key: "addDefaults",
+    value: function addDefaults(defaults, override) {
+      if (defaults === undefined) return;
+      if (defaults === null) return;
+      if (override === false) {
+        for (var key in defaults) {
+          if (this.Config._defaults[key] === undefined) {
+            this.Config._defaults[key] = defaults[key];
+          }
+        }
+      } else {
+        for (var key in defaults) {
+          this.Config._defaults[key] = defaults[key];
+        }
+      }
+      this.Config.dispatch(this.App.Store);
+    }
+  }]);
+}(_asab_webui_components.Service);
+var Config = /*#__PURE__*/function () {
+  function Config(app) {
+    (0, _classCallCheck2["default"])(this, Config);
+    this._dynamic_config = {};
+    this._defaults = {};
+    if (typeof LOCAL_CONFIG !== 'undefined') {
+      this._local_config = LOCAL_CONFIG;
+    } else {
+      this._local_config = {};
+    }
+  }
+  return (0, _createClass2["default"])(Config, [{
+    key: "get",
+    value: function get(key) {
+      // First check the remote config
+      if (this._dynamic_config[key] != undefined) {
+        return this._dynamic_config[key];
+      }
+      ;
+
+      // Then check the local config
+      if (this._local_config[key] != undefined) {
+        this._local_config[key];
+      }
+      ;
+
+      // And finally, check defaults
+      if (this._defaults[key] != undefined) {
+        return this._defaults[key];
+      }
+      ;
+      return undefined;
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch(store) {
+      var config = Object.assign({}, this._defaults, this._local_config, this._dynamic_config);
+      store.dispatch({
+        type: _actions.CHANGE_CONFIG,
+        config: config
+      });
+    }
+  }]);
+}();

package/dist/containers/AdvancedMode/reducer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = advancedModeReducer;
+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 = {
+  enabled: false
+};
+function advancedModeReducer() {
+  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_ADVANCED_MODE:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          enabled: action.enabled
+        });
+      }
+    default:
+      return state;
+  }
+}

package/dist/containers/Alerts/alerts.scss

@@ -0,0 +1,9 @@
+#alerts {
+	position: fixed;
+	z-index: 1500;
+	top: 40px;
+
+	width: 80%;
+	margin-left: 10%;
+	margin-right: 10%;
+}