asab_webui_shell 26.2.1 → 26.3.1-alpha.2

package/dist/config/ConfigService.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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; }
 class ConfigService extends _asab_webui_components.Service {
   constructor(app) {
     var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ConfigService";
@@ -19,53 +16,25 @@ class ConfigService extends _asab_webui_components.Service {
     this.Config = new Config();
   }
   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 _document$getElements, _document$getElements2;
+    /*
+    	Initialization of dynamic configuration
+    		Dynamic branding of the header logo can be done via nginx location configuration.
+    	The support of meta tags for configuration of the header logo brand image has been striped of in 09/2025
+    	from ASAB WebUI Shell version 26.3.1
+    		Example of setting up the nginx location for full logo. Same way it can be done for minimized variation.
+    		...
+    		location /<app path>/media/logo/header-logo-full-dark.svg {
+    		alias /<path to logo>/<logo name for dark theme>.svg;
+    	}
+    		location /<app path>/media/logo/header-logo-full.svg {
+    		alias /<path to logo>/<logo name for light theme>.svg;
+    	}
+    		...
+    	*/
+    var title = (_document$getElements = document.getElementsByName('title')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
+    var customCSS = (_document$getElements2 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.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 != "") {

package/dist/containers/Application.js

@@ -41,42 +41,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
 class Application extends _react.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: '',
-  	});
-  
-  ...
-  	*/
-
   constructor(props) {
     super(props);
 
@@ -276,7 +240,18 @@ class Application extends _react.Component {
     	define recognition of the requests from the service perspective
     */
     axios.interceptors.request.use(function (config) {
-      that.pushNetworkingIndicator();
+      var _config$headers, _config$headers2;
+      /* Usage of networking indicator is optional and can be set as following among other headers:
+      	headers: { 'X-Networking-Indicator': 'off' }
+      */
+      var networkingIndicatorOff = (config === null || config === void 0 || (_config$headers = config.headers) === null || _config$headers === void 0 ? void 0 : _config$headers['X-Networking-Indicator']) === 'off';
+      // Store flag in config for response interceptors to access
+      config._networkingIndicatorOff = networkingIndicatorOff;
+      if (!networkingIndicatorOff) {
+        that.pushNetworkingIndicator();
+      }
+      // Remove the X-Networking-Indicator header before sending to service (its only for internal use)
+      config === null || config === void 0 || (_config$headers2 = config.headers) === null || _config$headers2 === void 0 || delete _config$headers2['X-Networking-Indicator'];
       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;
@@ -288,7 +263,9 @@ class Application extends _react.Component {
     axios.interceptors.response.use(function (response) {
       var _response$headers$con;
       // Call the `popNetworkingIndicator` method to remove the networking indicator (e.g., loading spinner)
-      that.popNetworkingIndicator();
+      if (!response.config._networkingIndicatorOff) {
+        that.popNetworkingIndicator();
+      }
 
       /*
       	Custom flag to control JSON parsing for specific requests.
@@ -329,8 +306,10 @@ class Application extends _react.Component {
       // If the request was satisfied (application/json and presence of BigInt) return the modified object. If not, we return unchanged object
       return response;
     }, function (error) {
-      var _error$response, _error$response2;
-      that.popNetworkingIndicator();
+      var _error$config, _error$response, _error$response2;
+      if (!((_error$config = error.config) !== null && _error$config !== void 0 && _error$config._networkingIndicatorOff)) {
+        that.popNetworkingIndicator();
+      }
       var contentType = error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 || (_error$response = _error$response.headers) === null || _error$response === void 0 ? void 0 : _error$response['content-type'];
       // Check if the response content type is 'application/json' and data is a string
       if (contentType !== null && contentType !== void 0 && contentType.startsWith('application/json') && typeof (error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) === 'string') {

package/dist/containers/Application.scss

@@ -45,6 +45,16 @@
 			opacity: 0%;
 		}
 	}
+
+	&.sidebar-hidden {
+		> #app-sidebar {
+			display: none;
+		}
+
+		> #app-main {
+			grid-area: 2 / 1 / 4 / 3;
+		}
+	}
 }
 
 body {

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

@@ -9,6 +9,28 @@ 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); }
+/*
+	Example of use hasHeaderTitle.
+	It must be set in App configuration.
+	If not set to `false` or at all, it is considered as true.
+
+	...
+
+	const ConfigDefaults = {
+		...
+		hasHeaderTitle: false,
+	}
+
+	root.render(
+		<HashRouter>
+			<Application
+				configdefaults={ConfigDefaults} 
+				modules={modules}
+			/>
+		</HashRouter>
+	);
+*/
+
 var ApplicationScreenTitle = props => {
   var _props$routes;
   var subtitle = (0, _asab_webui_components.useAppSelector)(state => {
@@ -19,6 +41,10 @@ var ApplicationScreenTitle = props => {
     var _state$config;
     return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
   });
+  var hasHeaderTitle = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$config2;
+    return state === null || state === void 0 || (_state$config2 = state.config) === null || _state$config2 === void 0 ? void 0 : _state$config2.hasHeaderTitle;
+  });
   var {
     t
   } = (0, _reactI18next.useTranslation)();
@@ -33,6 +59,11 @@ var ApplicationScreenTitle = props => {
   (0, _react.useEffect)(() => {
     document.title = title && routeName ? "".concat(title, " | ").concat(routeName) : title;
   }, [routeName, t]);
+
+  // If specifically declared in the configuration, that header title should not be available, dont display header title
+  if (hasHeaderTitle === false) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "application-screen-title text-primary"
   }, /*#__PURE__*/_react.default.createElement("h4", {

package/dist/containers/Sidebar/index.js

@@ -14,6 +14,28 @@ var _BrandImage = require("../../components/branding/BrandImage");
 require("./sidebar.scss");
 var _SidebarItemRenderer = require("./SidebarItemRenderer");
 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); }
+/*
+	Example of use hasSidebar.
+	It must be set in App configuration.
+	If not set to `false` or at all, it is considered as true.
+
+	...
+
+	const ConfigDefaults = {
+		...
+		hasSidebar: false,
+	}
+
+	root.render(
+		<HashRouter>
+			<Application
+				configdefaults={ConfigDefaults} 
+				modules={modules}
+			/>
+		</HashRouter>
+	);
+*/
+
 function Sidebar(props) {
   var [isSmallResolution, setIsSmallResolution] = (0, _react.useState)(false);
   var [sidebarBottomBranding, setSidebarBottomBranding] = (0, _react.useState)({});
@@ -22,6 +44,10 @@ function Sidebar(props) {
     var _state$navigation;
     return (_state$navigation = state.navigation) === null || _state$navigation === void 0 ? void 0 : _state$navigation.navItems;
   });
+  var hasSidebar = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$config;
+    return state === null || state === void 0 || (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.hasSidebar;
+  });
   var sessionExpired = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$auth;
     return (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.sessionExpired;
@@ -30,6 +56,22 @@ function Sidebar(props) {
   var {
     dispatch
   } = (0, _asab_webui_components.useAppStore)();
+
+  // Handling sidebar-hidden app class
+  (0, _react.useEffect)(() => {
+    var appElement = document.getElementById("app");
+    if (!appElement) return;
+    if (hasSidebar === false) {
+      appElement.classList.add("sidebar-hidden");
+    } else {
+      appElement.classList.remove("sidebar-hidden");
+    }
+  }, [hasSidebar]);
+
+  // If specifically declared in the configuration, that sidebar should not be available, dont display sidebar at all
+  if (hasSidebar === false) {
+    return null;
+  }
   (0, _react.useEffect)(() => {
     // Collapse sidebar if innerWidth is smaller or equal to 944px on page initialization
     if (window.innerWidth <= 944) {

package/package.json

@@ -1,57 +1,57 @@
 {
-  "name": "asab_webui_shell",
-  "version": "26.2.1",
-  "license": "BSD-3-Clause",
-  "description": "TeskaLabs ASAB WebUI Shell Application",
-  "contributors": [
-    {
-      "name": "TeskaLabs",
-      "email": "info@teskalabs.com",
-      "url": "https://teskalabs.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:TeskaLabs/asab-webui-shell-lib.git"
-  },
-  "bugs": {
-    "url": "https://github.com/TeskaLabs/asab-webui-shell-lib/issues"
-  },
-  "homepage": "https://github.com/TeskaLabs/asab-webui-shell-lib",
-  "main": "dist/index.js",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "i18next-browser-languagedetector": "^6.1.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.22.11",
-    "@babel/core": "^7.22.11",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "copyfiles": "^2.4.1",
-    "rimraf": "^5.0.0"
-  },
-  "peerDependencies": {
-    "asab_webui_components": "^26.1.1",
-    "@babel/runtime": "^7.22.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "axios": "^1.8.4",
-    "i18next": "^20.3.5",
-    "react-i18next": "^11.8.12",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "reactstrap": "^9.2.0"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "babel src --extensions '.js,.jsx' --out-dir dist && copyfiles -u 1 'src/**/*.{scss,jsx}' dist"
-  }
-}
+	"name": "asab_webui_shell",
+	"version": "26.3.1-alpha.2",
+	"license": "BSD-3-Clause",
+	"description": "TeskaLabs ASAB WebUI Shell Application",
+	"contributors": [
+		{
+			"name": "TeskaLabs",
+			"email": "info@teskalabs.com",
+			"url": "https://teskalabs.com"
+		}
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+ssh://git@github.com:TeskaLabs/asab-webui-shell-lib.git"
+	},
+	"bugs": {
+		"url": "https://github.com/TeskaLabs/asab-webui-shell-lib/issues"
+	},
+	"homepage": "https://github.com/TeskaLabs/asab-webui-shell-lib",
+	"main": "dist/index.js",
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+	    "registry": "https://registry.npmjs.org/"
+	 },
+	"scripts": {
+		"clean": "rimraf dist",
+		"build": "babel src --extensions '.js,.jsx' --out-dir dist && copyfiles -u 1 'src/**/*.{scss,jsx}' dist"
+	},
+	"dependencies": {
+		"i18next-browser-languagedetector": "^6.1.2"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.22.11",
+		"@babel/core": "^7.22.11",
+		"@babel/plugin-transform-runtime": "^7.22.10",
+		"@babel/preset-env": "^7.22.10",
+		"@babel/preset-react": "^7.22.5",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"copyfiles": "^2.4.1",
+		"rimraf": "^5.0.0"
+	},
+	"peerDependencies": {
+		"asab_webui_components": "^26.1.1",
+		"@babel/runtime": "^7.22.11",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"axios": "^1.8.4",
+		"i18next": "^20.3.5",
+		"react-i18next": "^11.8.12",
+		"react-router": "^6.16.0",
+		"react-router-dom": "^6.16.0",
+		"reactstrap": "^9.2.0"
+	}
+}