orc-shared 5.10.1-dev.2 → 5.10.1-dev.4

package/dist/components/AppFrame/Topbar.js

@@ -1,8 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useMenuProps = exports.default = exports.Menu = exports.CurrentApp = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useMenuProps = exports.sanitizeEnvironmentCode = exports.getAppEnvironmentInfo = exports.default = exports.Menu = exports.CurrentApp = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _reactIntl = require("react-intl");
 var _styles = require("@material-ui/core/styles");
@@ -16,9 +16,13 @@ var _DropMenu = _interopRequireDefault(require("../DropMenu"));
 var _Anchor = _interopRequireDefault(require("./Anchor"));
 var _Help = _interopRequireDefault(require("./Help"));
 var _sharedMessages = _interopRequireDefault(require("./../../sharedMessages"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _comparisonHelper = require("../../utils/comparisonHelper");
 var _excluded = ["menuLabel"],
   _excluded2 = ["applications", "applicationId", "currentApplication", "onClick", "helpUrl"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -27,6 +31,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
 })();
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
@@ -63,6 +73,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     appLogo: {
       height: "30px",
       marginRight: "10px"
+    },
+    qaContainerColor: {
+      backgroundColor: "#9F0F18",
+      color: "#FFFFFF"
+    },
+    intContainerColor: {
+      backgroundColor: "#FCA311",
+      color: "#000000"
+    },
+    stgContainerColor: {
+      backgroundColor: "#19B9E6",
+      color: "#000000"
+    },
+    localdevContainerColor: {
+      backgroundColor: "#87E911",
+      color: "#000000"
     }
   };
 });
@@ -116,21 +142,126 @@ __signature__(Menu, "useMenuProps{{ menuLabel, ...menuProps }}", function () {
 __signature__(Menu, "useMenuProps{{ menuLabel, ...menuProps }}", function () {
   return [useMenuProps];
 });
+var sanitizeEnvironmentCode = exports.sanitizeEnvironmentCode = function sanitizeEnvironmentCode(envCode) {
+  if (!envCode) {
+    return envCode;
+  }
+  envCode = envCode.toLowerCase();
+  var partialEnvCodes = ["prd",
+  // to support the old prdhi / prdlow used by SBD
+  "int",
+  // to support int, int2, etc
+  "qa",
+  // to support qa, qa2, etc
+  "stg",
+  // to support stg, stg2, etc
+  "localdev" // local development of the platform by product or service teams
+  ];
+  for (var _i = 0, _partialEnvCodes = partialEnvCodes; _i < _partialEnvCodes.length; _i++) {
+    var partialEnvCode = _partialEnvCodes[_i];
+    if (envCode.startsWith(partialEnvCode)) {
+      return partialEnvCode;
+    }
+  }
+  return envCode; // other names will be used as-is
+};
+var getAppEnvironmentInfo = exports.getAppEnvironmentInfo = function getAppEnvironmentInfo(currentLocation, uiContainerName) {
+  var environmentCode = null;
+  var sanitizedEnvironmentCode = null;
+  var isDeployedLocalDevEnv = false;
+  var domainMatch = currentLocation == null ? void 0 : currentLocation.match(/*#__PURE__*/_wrapRegExp(/^([^.]+)\.([^.]+)\.([^.]+)\.orckestra\.(cloud|org)$/, {
+    appName: 1,
+    envCode: 2,
+    clientCode: 3
+  }));
+  if (domainMatch) {
+    environmentCode = domainMatch.groups.envCode;
+  } else if (currentLocation != null && currentLocation.toLowerCase().endsWith("local.develop.orckestra.cloud") || (currentLocation == null ? void 0 : currentLocation.toLowerCase()) === "localhost") {
+    environmentCode = "localdev";
+  } else if (currentLocation != null && currentLocation.toLowerCase().endsWith("develop.orckestra.cloud")) {
+    environmentCode = "localdev";
+    isDeployedLocalDevEnv = true;
+  }
+
+  // uncomment if you want to force a specific environment / color
+  // environmentCode = "prd";
+
+  sanitizedEnvironmentCode = sanitizeEnvironmentCode(environmentCode);
+  if (!sanitizedEnvironmentCode || sanitizedEnvironmentCode === "rel") {
+    // we never want a different color / text for our rel environment
+    return {
+      name: "",
+      cssClassCategory: null
+    };
+  }
+  if (!uiContainerName) {
+    uiContainerName = "prd"; // fallback in case the container is not defined in a meta tag
+  }
+  var needCustomCssClass = !!sanitizedEnvironmentCode && !(0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "prd") || !(0, _comparisonHelper.areEqualCaseInsensitive)(uiContainerName, "prd");
+  var cssClassCategory = null;
+  var nameParts = [];
+  if (!(0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "prd")) {
+    nameParts.push(environmentCode);
+  }
+  if (needCustomCssClass) {
+    var needBuildNumber = false;
+    var isPrdUiContainer = (0, _comparisonHelper.areEqualCaseInsensitive)(uiContainerName, "prd");
+    if ((0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "prd")) {
+      cssClassCategory = "qa"; // if we end up here, it means that our prd environment is using a different UI container
+      needBuildNumber = !isPrdUiContainer;
+    } else if ((0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "localdev")) {
+      cssClassCategory = "localdev";
+      needBuildNumber = !isPrdUiContainer && isDeployedLocalDevEnv;
+    } else if ((0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "qa")) {
+      cssClassCategory = "qa";
+      needBuildNumber = !isPrdUiContainer;
+    } else if ((0, _comparisonHelper.areEqualCaseInsensitive)(sanitizedEnvironmentCode, "stg")) {
+      cssClassCategory = "stg";
+      needBuildNumber = !isPrdUiContainer;
+    } else {
+      // any other container have the int look
+      cssClassCategory = "int";
+      needBuildNumber = !isPrdUiContainer;
+    }
+    if (needBuildNumber) {
+      nameParts.push("".concat(window.BUILD_NUMBER, "/").concat(uiContainerName));
+    }
+  }
+  return {
+    name: nameParts.join(" — "),
+    cssClassCategory: cssClassCategory
+  };
+};
 var CurrentApp = exports.CurrentApp = function CurrentApp(_ref) {
   var displayName = _ref.displayName,
     iconUri = _ref.iconUri;
   var classes = useStyles();
+  var containerInfo = (0, _react.useMemo)(function () {
+    var _document$querySelect;
+    return getAppEnvironmentInfo(window.location.hostname, (_document$querySelect = document.querySelector('meta[name="cdn-container-name"]')) == null ? void 0 : _document$querySelect.getAttribute("content"));
+  }, []);
+  var name;
+  if (containerInfo.name) {
+    if (displayName) {
+      // to avoid issues with tests where "undefined" ends up in the name
+      name = "".concat(displayName, " \u2014 ").concat(containerInfo.name);
+    } else {
+      name = " \u2014 ".concat(containerInfo.name);
+    }
+  } else {
+    name = displayName;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.appLabel
+    className: (0, _classnames.default)(classes.appLabel, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.qaContainerColor, containerInfo.cssClassCategory === "qa"), classes.intContainerColor, containerInfo.cssClassCategory === "int"), classes.stgContainerColor, containerInfo.cssClassCategory === "stg"), classes.localdevContainerColor, containerInfo.cssClassCategory === "localdev"))
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: iconUri,
     className: classes.appLogo
-  }), displayName);
+  }), name);
 };
-__signature__(CurrentApp, "useStyles{classes}", function () {
+__signature__(CurrentApp, "useStyles{classes}\nuseMemo{containerInfo}", function () {
   return [useStyles];
 });
-__signature__(CurrentApp, "useStyles{classes}", function () {
+__signature__(CurrentApp, "useStyles{classes}\nuseMemo{containerInfo}", function () {
   return [useStyles];
 });
 CurrentApp.displayName = "CurrentApp";
@@ -173,6 +304,8 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(useMenuProps, "useMenuProps", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(Menu, "Menu", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
+  reactHotLoader.register(sanitizeEnvironmentCode, "sanitizeEnvironmentCode", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
+  reactHotLoader.register(getAppEnvironmentInfo, "getAppEnvironmentInfo", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(CurrentApp, "CurrentApp", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(Topbar, "Topbar", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
@@ -191,6 +324,8 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(useMenuProps, "useMenuProps", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(Menu, "Menu", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
+  reactHotLoader.register(sanitizeEnvironmentCode, "sanitizeEnvironmentCode", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
+  reactHotLoader.register(getAppEnvironmentInfo, "getAppEnvironmentInfo", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(CurrentApp, "CurrentApp", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(Topbar, "Topbar", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/Topbar.js");

package/dist/utils/ListHelper.js

@@ -6,7 +6,7 @@ var _immutable = _interopRequireDefault(require("immutable"));
 var _lodash = require("lodash");
 var _ListHelper;
 var _excluded = ["resetList", "scope", "filters", "sorting"],
-  _excluded2 = ["sorting", "filters", "scope", "page", "nextPageToLoad", "index", "list", "totalCount"];
+  _excluded2 = ["sorting", "filters", "scope", "page", "nextPageToLoad", "index", "list", "totalCount", "searchRequested"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -30,13 +30,16 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
   return a;
 };
 var ListInfoPropertyName = exports.ListInfoPropertyName = "listInfo";
-var standardInfoKeys = ["scope", "page", "filters", "sorting", "totalCount", "nextPageToLoad", "index", "list"];
+var standardInfoKeys = ["scope", "page", "filters", "sorting", "totalCount", "nextPageToLoad", "index", "list", "searchRequested"];
 var ListReducerHelper = /*#__PURE__*/function () {
   function ListReducerHelper(groupPropertyName) {
     var _this = this;
     _defineProperty(this, "setNextPageToLoad", function (state, nextPageToLoad) {
       return state.setIn([_this.groupPropertyName, "nextPageToLoad"], nextPageToLoad);
     });
+    _defineProperty(this, "setSearchRequested", function (state, searchRequested) {
+      return state.setIn([_this.groupPropertyName, "searchRequested"], searchRequested);
+    });
     _defineProperty(this, "setResults", function (state, listInfo, forceReset) {
       if (forceReset === void 0) {
         forceReset = false;
@@ -79,6 +82,7 @@ var ListReducerHelper = /*#__PURE__*/function () {
         s.setIn([_this.groupPropertyName, "scope"], scope != null ? scope : null);
         s.setIn([_this.groupPropertyName, "filters"], _immutable.default.fromJS(filters != null ? filters : null));
         s.setIn([_this.groupPropertyName, "sorting"], _immutable.default.fromJS(sorting != null ? sorting : null));
+        s.setIn([_this.groupPropertyName, "searchRequested"], false);
         var otherKeys = Object.keys(others);
         s.get(_this.groupPropertyName).keySeq().forEach(function (key) {
           if (!standardInfoKeys.includes(key) && !otherKeys.includes(key)) {
@@ -109,7 +113,7 @@ var ListReducerHelper = /*#__PURE__*/function () {
       if (propertiesToKeep === void 0) {
         propertiesToKeep = {};
       }
-      var updatedState = state.setIn([_this.groupPropertyName, "nextPageToLoad"], 1).setIn([_this.groupPropertyName, "index"], _immutable.default.fromJS({})).setIn([_this.groupPropertyName, "list"], _immutable.default.fromJS([])).setIn([_this.groupPropertyName, "totalCount"], 0);
+      var updatedState = state.setIn([_this.groupPropertyName, "nextPageToLoad"], 1).setIn([_this.groupPropertyName, "searchRequested"], false).setIn([_this.groupPropertyName, "index"], _immutable.default.fromJS({})).setIn([_this.groupPropertyName, "list"], _immutable.default.fromJS([])).setIn([_this.groupPropertyName, "totalCount"], 0);
       if (!propertiesToKeep.filters) {
         updatedState = updatedState.setIn([_this.groupPropertyName, "filters"], null);
       }
@@ -145,7 +149,8 @@ var ListSelectorHelper = /*#__PURE__*/function () {
         currentPage: listInfo.get("page"),
         currentFilters: (_listInfo$get = listInfo.get("filters")) == null ? void 0 : _listInfo$get.toJS(),
         currentSorting: (_listInfo$get2 = listInfo.get("sorting")) == null ? void 0 : _listInfo$get2.toJS(),
-        totalCount: listInfo.get("totalCount")
+        totalCount: listInfo.get("totalCount"),
+        searchRequested: listInfo.get("searchRequested")
       };
       listInfo.mapKeys(function (key, value) {
         if (standardInfoKeys.includes(key)) {
@@ -165,6 +170,9 @@ var ListSelectorHelper = /*#__PURE__*/function () {
     _defineProperty(this, "getNextPageToLoad", function (state) {
       return state.getIn([_this2.groupPropertyName, "nextPageToLoad"]);
     });
+    _defineProperty(this, "getSearchRequested", function (state) {
+      return state.getIn([_this2.groupPropertyName, "searchRequested"]);
+    });
     this.groupPropertyName = groupPropertyName;
   }
   var _proto2 = ListSelectorHelper.prototype;
@@ -200,6 +208,7 @@ var ListHelper = /*#__PURE__*/function () {
         index = _ref4.index,
         list = _ref4.list,
         totalCount = _ref4.totalCount,
+        searchRequested = _ref4.searchRequested,
         additionalValues = _objectWithoutProperties(_ref4, _excluded2);
       return _defineProperty({}, _this3.groupPropertyName, _objectSpread({
         sorting: sorting != null ? sorting : null,
@@ -209,7 +218,8 @@ var ListHelper = /*#__PURE__*/function () {
         nextPageToLoad: nextPageToLoad != null ? nextPageToLoad : 1,
         index: index != null ? index : {},
         list: list != null ? list : [],
-        totalCount: totalCount != null ? totalCount : 0
+        totalCount: totalCount != null ? totalCount : 0,
+        searchRequested: searchRequested != null ? searchRequested : false
       }, additionalValues));
     });
     this.groupPropertyName = groupPropertyName;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.1-dev.2",
+	"version": "5.10.1-dev.4",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/AppFrame/Topbar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useIntl } from "react-intl";
 import { makeStyles } from "@material-ui/core/styles";
@@ -12,6 +12,8 @@ import DropMenu from "../DropMenu";
 import Anchor from "./Anchor";
 import Help from "./Help";
 import sharedMessages from "./../../sharedMessages";
+import classNames from "classnames";
+import { areEqualCaseInsensitive } from "../../utils/comparisonHelper";
 
 const useStyles = makeStyles(theme => ({
 	wrapper: {
@@ -41,6 +43,22 @@ const useStyles = makeStyles(theme => ({
 		height: "30px",
 		marginRight: "10px",
 	},
+	qaContainerColor: {
+		backgroundColor: "#9F0F18",
+		color: "#FFFFFF",
+	},
+	intContainerColor: {
+		backgroundColor: "#FCA311",
+		color: "#000000",
+	},
+	stgContainerColor: {
+		backgroundColor: "#19B9E6",
+		color: "#000000",
+	},
+	localdevContainerColor: {
+		backgroundColor: "#87E911",
+		color: "#000000",
+	},
 }));
 
 export const useMenuProps = () => {
@@ -81,13 +99,146 @@ export const Menu = () => {
 	);
 };
 
+export const sanitizeEnvironmentCode = envCode => {
+	if (!envCode) {
+		return envCode;
+	}
+
+	envCode = envCode.toLowerCase();
+
+	const partialEnvCodes = [
+		"prd", // to support the old prdhi / prdlow used by SBD
+		"int", // to support int, int2, etc
+		"qa", // to support qa, qa2, etc
+		"stg", // to support stg, stg2, etc
+		"localdev", // local development of the platform by product or service teams
+	];
+
+	for (const partialEnvCode of partialEnvCodes) {
+		if (envCode.startsWith(partialEnvCode)) {
+			return partialEnvCode;
+		}
+	}
+
+	return envCode; // other names will be used as-is
+};
+
+export const getAppEnvironmentInfo = (currentLocation, uiContainerName) => {
+	let environmentCode = null;
+	let sanitizedEnvironmentCode = null;
+	let isDeployedLocalDevEnv = false;
+
+	const domainMatch = currentLocation?.match(
+		/^(?<appName>[^.]+)\.(?<envCode>[^.]+)\.(?<clientCode>[^.]+)\.orckestra\.(cloud|org)$/,
+	);
+
+	if (domainMatch) {
+		environmentCode = domainMatch.groups.envCode;
+	} else if (
+		currentLocation?.toLowerCase().endsWith("local.develop.orckestra.cloud") ||
+		currentLocation?.toLowerCase() === "localhost"
+	) {
+		environmentCode = "localdev";
+	} else if (currentLocation?.toLowerCase().endsWith("develop.orckestra.cloud")) {
+		environmentCode = "localdev";
+		isDeployedLocalDevEnv = true;
+	}
+
+	// uncomment if you want to force a specific environment / color
+	// environmentCode = "prd";
+
+	sanitizedEnvironmentCode = sanitizeEnvironmentCode(environmentCode);
+
+	if (!sanitizedEnvironmentCode || sanitizedEnvironmentCode === "rel") {
+		// we never want a different color / text for our rel environment
+		return {
+			name: "",
+			cssClassCategory: null,
+		};
+	}
+
+	if (!uiContainerName) {
+		uiContainerName = "prd"; // fallback in case the container is not defined in a meta tag
+	}
+
+	const needCustomCssClass =
+		(!!sanitizedEnvironmentCode && !areEqualCaseInsensitive(sanitizedEnvironmentCode, "prd")) ||
+		!areEqualCaseInsensitive(uiContainerName, "prd");
+
+	let cssClassCategory = null;
+
+	const nameParts = [];
+
+	if (!areEqualCaseInsensitive(sanitizedEnvironmentCode, "prd")) {
+		nameParts.push(environmentCode);
+	}
+
+	if (needCustomCssClass) {
+		let needBuildNumber = false;
+		const isPrdUiContainer = areEqualCaseInsensitive(uiContainerName, "prd");
+
+		if (areEqualCaseInsensitive(sanitizedEnvironmentCode, "prd")) {
+			cssClassCategory = "qa"; // if we end up here, it means that our prd environment is using a different UI container
+			needBuildNumber = !isPrdUiContainer;
+		} else if (areEqualCaseInsensitive(sanitizedEnvironmentCode, "localdev")) {
+			cssClassCategory = "localdev";
+			needBuildNumber = !isPrdUiContainer && isDeployedLocalDevEnv;
+		} else if (areEqualCaseInsensitive(sanitizedEnvironmentCode, "qa")) {
+			cssClassCategory = "qa";
+			needBuildNumber = !isPrdUiContainer;
+		} else if (areEqualCaseInsensitive(sanitizedEnvironmentCode, "stg")) {
+			cssClassCategory = "stg";
+			needBuildNumber = !isPrdUiContainer;
+		} else {
+			// any other container have the int look
+			cssClassCategory = "int";
+			needBuildNumber = !isPrdUiContainer;
+		}
+
+		if (needBuildNumber) {
+			nameParts.push(`${window.BUILD_NUMBER}/${uiContainerName}`);
+		}
+	}
+
+	return {
+		name: nameParts.join(" — "),
+		cssClassCategory: cssClassCategory,
+	};
+};
+
 export const CurrentApp = ({ displayName, iconUri }) => {
 	const classes = useStyles();
+	const containerInfo = useMemo(() => {
+		return getAppEnvironmentInfo(
+			window.location.hostname,
+			document.querySelector('meta[name="cdn-container-name"]')?.getAttribute("content"),
+		);
+	}, []);
+
+	let name;
+
+	if (containerInfo.name) {
+		if (displayName) {
+			// to avoid issues with tests where "undefined" ends up in the name
+			name = `${displayName} — ${containerInfo.name}`;
+		} else {
+			name = ` — ${containerInfo.name}`;
+		}
+	} else {
+		name = displayName;
+	}
 
 	return (
-		<div className={classes.appLabel}>
+		<div
+			className={classNames(classes.appLabel, {
+				[classes.qaContainerColor]: containerInfo.cssClassCategory === "qa",
+				[classes.intContainerColor]: containerInfo.cssClassCategory === "int",
+				[classes.stgContainerColor]: containerInfo.cssClassCategory === "stg",
+				[classes.localdevContainerColor]: containerInfo.cssClassCategory === "localdev",
+			})}
+		>
 			<img src={iconUri} className={classes.appLogo} />
-			{displayName}
+			{name}
 		</div>
 	);
 };

package/src/components/AppFrame/Topbar.test.js

@@ -10,7 +10,7 @@ import { SIGN_OUT_REQUEST, SIGN_OUT_SUCCESS, SIGN_OUT_FAILURE } from "../../acti
 import { PREFS_NAME } from "./Preferences";
 import { ABOUT_NAME } from "./About";
 import ApplicationSelector from "./ApplicationSelector";
-import Topbar, { CurrentApp, useMenuProps } from "./Topbar";
+import Topbar, { CurrentApp, getAppEnvironmentInfo, sanitizeEnvironmentCode, useMenuProps } from "./Topbar";
 
 jest.mock("../../utils/buildUrl", () => {
 	const modExport = {};
@@ -80,7 +80,7 @@ describe("Topbar", () => {
 					<ApplicationSelector {...props} />
 					<div>
 						<img src="/test/url" />
-						Test label
+						Test label — localdev
 					</div>
 				</div>
 				<Ignore />
@@ -102,6 +102,7 @@ describe("Topbar", () => {
 					<Ignore />
 					<div>
 						<img />
+						{" — localdev"}
 					</div>
 				</div>
 				<Ignore />
@@ -123,6 +124,7 @@ describe("Topbar", () => {
 					<Ignore />
 					<div>
 						<img />
+						{" — localdev"}
 					</div>
 				</div>
 				<Ignore />
@@ -232,7 +234,20 @@ describe("useMenuProps", () => {
 		));
 });
 
-describe("CurrentApp", () => {
+describe("CurrentApp for production site", () => {
+	const { location } = window;
+
+	beforeAll(() => {
+		delete window.location;
+
+		window.location = {
+			hostname: "oco.prd.platform.orckestra.cloud",
+		};
+	});
+	afterAll(() => {
+		window.location = location;
+	});
+
 	it("renders the app logo and name", () =>
 		expect(
 			<CurrentApp displayName="Test label" iconUri="/test/url" />,
@@ -244,3 +259,143 @@ describe("CurrentApp", () => {
 			</div>,
 		));
 });
+
+describe("CurrentApp for localhost", () => {
+	it("renders the app logo and name and with build info", () => {
+		expect(
+			<CurrentApp displayName="Test label" iconUri="/test/url" />,
+			"when mounted",
+			"to satisfy",
+			<div>
+				<img src="/test/url" />
+				Test label — localdev
+			</div>,
+		);
+	});
+});
+
+describe("sanitizeEnvironmentCode", () => {
+	it.each([
+		[null, null],
+		[undefined, undefined],
+		["demo1", "demo1"],
+		["prd", "prd"],
+		["prdhi", "prd"],
+		["prd2", "prd"],
+		["qa", "qa"],
+		["qahi", "qa"],
+		["qa2", "qa"],
+		["int", "int"],
+		["inthi", "int"],
+		["int2", "int"],
+		["stg", "stg"],
+		["stghi", "stg"],
+		["stg2", "stg"],
+		["localdev", "localdev"],
+		["localdevhi", "localdev"],
+		["localdev2", "localdev"],
+	])("Should sanitize %s as %s", (code, expectedSanitizedVersion) => {
+		const sanitizedVersion = sanitizeEnvironmentCode(code);
+
+		expect(sanitizedVersion, "to equal", expectedSanitizedVersion);
+	});
+});
+
+describe("getAppEnvironmentInfo", () => {
+	let originalBuildNumber;
+
+	beforeEach(() => {
+		originalBuildNumber = window.BUILD_NUMBER;
+		window.BUILD_NUMBER = "1.2-alpha888";
+	});
+
+	afterEach(() => {
+		window.BUILD_NUMBER = originalBuildNumber;
+	});
+
+	it.each([
+		[null, "prd", "", null],
+		["", "prd", "", null],
+		["prd", null, "", null],
+		["prd", "", "", null],
+		["prd", "prd", "", null],
+		["prd", "qa", "1.2-alpha888/qa", "qa"],
+		["prd", "int", "1.2-alpha888/int", "qa"],
+		["qa", "prd", "qa", "qa"],
+		["qa", "qa", "qa — 1.2-alpha888/qa", "qa"],
+		["qa", "int", "qa — 1.2-alpha888/int", "qa"],
+		["int", "prd", "int", "int"],
+		["int", "qa", "int — 1.2-alpha888/qa", "int"],
+		["int", "int", "int — 1.2-alpha888/int", "int"],
+		["stg", "prd", "stg", "stg"],
+		["stg", "stg", "stg — 1.2-alpha888/stg", "stg"],
+		["stg", "int", "stg — 1.2-alpha888/int", "stg"],
+		["demo1", "prd", "demo1", "int"],
+		["demo1", "stg", "demo1 — 1.2-alpha888/stg", "int"],
+		["demo1", "int", "demo1 — 1.2-alpha888/int", "int"],
+		["rel", "prd", "", null],
+		["rel", "stg", "", null],
+		["rel", "int", "", null],
+		["localdev", "prd", "localdev", "localdev"],
+		["localdev", "qa", "localdev", "localdev"],
+	])(
+		"getAppEnvironmentInfo for %s url and %s UI container",
+		(envCode, uiContainerName, expectedName, expectedCssClassCategory) => {
+			const info = getAppEnvironmentInfo(
+				envCode ? `oco.${envCode}.platform.orckestra.cloud` : envCode,
+				uiContainerName,
+			);
+
+			const expected = {
+				name: expectedName,
+				cssClassCategory: expectedCssClassCategory,
+			};
+
+			expect(info, "to equal", expected);
+		},
+	);
+
+	it("getAppEnvironmentInfo for localdev (occ-dev-oco.develop.orckestra.cloud) and prd UI container", () => {
+		const info = getAppEnvironmentInfo("occ-dev-oco.develop.orckestra.cloud", "prd");
+
+		const expected = {
+			name: "localdev",
+			cssClassCategory: "localdev",
+		};
+
+		expect(info, "to equal", expected);
+	});
+
+	it("getAppEnvironmentInfo for localdev (occ-dev-oco.develop.orckestra.cloud) and qa UI container", () => {
+		const info = getAppEnvironmentInfo("occ-dev-oco.develop.orckestra.cloud", "qa");
+
+		const expected = {
+			name: "localdev — 1.2-alpha888/qa",
+			cssClassCategory: "localdev",
+		};
+
+		expect(info, "to equal", expected);
+	});
+
+	it("getAppEnvironmentInfo for localdev (local.develop.orckestra.cloud) and prd UI container", () => {
+		const info = getAppEnvironmentInfo("local.develop.orckestra.cloud", "prd");
+
+		const expected = {
+			name: "localdev",
+			cssClassCategory: "localdev",
+		};
+
+		expect(info, "to equal", expected);
+	});
+
+	it("getAppEnvironmentInfo for localdev (localhost) and prd UI container", () => {
+		const info = getAppEnvironmentInfo("localhost", "prd");
+
+		const expected = {
+			name: "localdev",
+			cssClassCategory: "localdev",
+		};
+
+		expect(info, "to equal", expected);
+	});
+});

package/src/utils/ListHelper.js

@@ -3,7 +3,17 @@ import { isObject } from "lodash";
 
 export const ListInfoPropertyName = "listInfo";
 
-const standardInfoKeys = ["scope", "page", "filters", "sorting", "totalCount", "nextPageToLoad", "index", "list"];
+const standardInfoKeys = [
+	"scope",
+	"page",
+	"filters",
+	"sorting",
+	"totalCount",
+	"nextPageToLoad",
+	"index",
+	"list",
+	"searchRequested",
+];
 
 class ListReducerHelper {
 	constructor(groupPropertyName) {
@@ -14,6 +24,10 @@ class ListReducerHelper {
 		return state.setIn([this.groupPropertyName, "nextPageToLoad"], nextPageToLoad);
 	};
 
+	setSearchRequested = (state, searchRequested) => {
+		return state.setIn([this.groupPropertyName, "searchRequested"], searchRequested);
+	};
+
 	setResults = (state, listInfo, forceReset = false) => {
 		return state.withMutations(s => {
 			const page = s.getIn([this.groupPropertyName, "nextPageToLoad"]);
@@ -51,6 +65,7 @@ class ListReducerHelper {
 			s.setIn([this.groupPropertyName, "scope"], scope ?? null);
 			s.setIn([this.groupPropertyName, "filters"], Immutable.fromJS(filters ?? null));
 			s.setIn([this.groupPropertyName, "sorting"], Immutable.fromJS(sorting ?? null));
+			s.setIn([this.groupPropertyName, "searchRequested"], false);
 
 			const otherKeys = Object.keys(others);
 
@@ -90,6 +105,7 @@ class ListReducerHelper {
 	resetListInfo = (state, propertiesToKeep = {}) => {
 		let updatedState = state
 			.setIn([this.groupPropertyName, "nextPageToLoad"], 1)
+			.setIn([this.groupPropertyName, "searchRequested"], false)
 			.setIn([this.groupPropertyName, "index"], Immutable.fromJS({}))
 			.setIn([this.groupPropertyName, "list"], Immutable.fromJS([]))
 			.setIn([this.groupPropertyName, "totalCount"], 0);
@@ -128,6 +144,7 @@ class ListSelectorHelper {
 			currentFilters: listInfo.get("filters")?.toJS(),
 			currentSorting: listInfo.get("sorting")?.toJS(),
 			totalCount: listInfo.get("totalCount"),
+			searchRequested: listInfo.get("searchRequested"),
 		};
 
 		listInfo.mapKeys((key, value) => {
@@ -152,6 +169,10 @@ class ListSelectorHelper {
 	getNextPageToLoad = state => {
 		return state.getIn([this.groupPropertyName, "nextPageToLoad"]);
 	};
+
+	getSearchRequested = state => {
+		return state.getIn([this.groupPropertyName, "searchRequested"]);
+	};
 }
 
 class ListHelper {
@@ -182,6 +203,7 @@ class ListHelper {
 		index,
 		list,
 		totalCount,
+		searchRequested,
 		...additionalValues
 	} = {}) => {
 		return {
@@ -194,6 +216,7 @@ class ListHelper {
 				index: index ?? {},
 				list: list ?? [],
 				totalCount: totalCount ?? 0,
+				searchRequested: searchRequested ?? false,
 				...additionalValues,
 			},
 		};

package/src/utils/ListHelper.test.js

@@ -14,6 +14,7 @@ describe("createInitialListInfo", () => {
 				index: {},
 				list: [],
 				totalCount: 0,
+				searchRequested: false,
 			},
 		});
 	});
@@ -33,6 +34,7 @@ describe("createInitialListInfo", () => {
 				index: {},
 				list: [],
 				totalCount: 0,
+				searchRequested: false,
 				prop1: 123,
 				prop2: { subprop: "a" },
 			},
@@ -49,6 +51,7 @@ describe("createInitialListInfo", () => {
 			index: { c: 1 },
 			list: [1, 2, 3],
 			totalCount: 10,
+			searchRequested: false,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		});
@@ -62,6 +65,7 @@ describe("createInitialListInfo", () => {
 				index: { c: 1 },
 				list: [1, 2, 3],
 				totalCount: 10,
+				searchRequested: false,
 				prop1: 123,
 				prop2: { subprop: "a" },
 			},
@@ -82,6 +86,7 @@ describe("createListInfoFrom", () => {
 				index: {},
 				list: [],
 				totalCount: 0,
+				searchRequested: false,
 			},
 		});
 	});
@@ -101,6 +106,7 @@ describe("createListInfoFrom", () => {
 				index: {},
 				list: [],
 				totalCount: 0,
+				searchRequested: false,
 				prop1: 123,
 				prop2: { subprop: "a" },
 			},
@@ -117,6 +123,7 @@ describe("createListInfoFrom", () => {
 			index: { c: 1 },
 			list: [1, 2, 3],
 			totalCount: 10,
+			searchRequested: false,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		});
@@ -130,6 +137,7 @@ describe("createListInfoFrom", () => {
 				index: { c: 1 },
 				list: [1, 2, 3],
 				totalCount: 10,
+				searchRequested: false,
 				prop1: 123,
 				prop2: { subprop: "a" },
 			},
@@ -148,6 +156,7 @@ describe("ListSelectorHelper", () => {
 			index: { c: 1 },
 			list: [1, 2, 3],
 			totalCount: 10,
+			searchRequested: true,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		}),
@@ -168,6 +177,11 @@ describe("ListSelectorHelper", () => {
 		expect(value, "to equal", Immutable.fromJS({ c: 1 }));
 	});
 
+	it("getSearchRequested", () => {
+		const value = ListHelper.selector.getSearchRequested(initialState);
+		expect(value, "to equal", true);
+	});
+
 	it("getCurrentInfo", () => {
 		const value = ListHelper.selector.getCurrentInfo(initialState);
 		expect(value, "to equal", {
@@ -176,6 +190,7 @@ describe("ListSelectorHelper", () => {
 			currentScope: "canada",
 			currentPage: 1,
 			totalCount: 10,
+			searchRequested: true,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		});
@@ -191,6 +206,7 @@ describe("ListSelectorHelper", () => {
 			currentScope: "canada",
 			currentPage: 1,
 			totalCount: 10,
+			searchRequested: true,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		});
@@ -204,6 +220,7 @@ describe("ListSelectorHelper", () => {
 			currentScope: undefined,
 			currentPage: undefined,
 			totalCount: undefined,
+			searchRequested: undefined,
 		});
 	});
 });
@@ -219,6 +236,7 @@ describe("ListReducerHelper", () => {
 			index: { c: 1 },
 			list: [1, 2, 3],
 			totalCount: 10,
+			searchRequested: false,
 			prop1: 123,
 			prop2: { subprop: "a" },
 		}),
@@ -239,6 +257,30 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
+					prop1: 123,
+					prop2: { subprop: "a" },
+				}),
+			),
+		);
+	});
+
+	it("setSearchRequested", () => {
+		const newState = ListHelper.reducer.setSearchRequested(initialState, true);
+		expect(
+			newState,
+			"to equal",
+			Immutable.fromJS(
+				ListHelper.createListInfoFrom({
+					sorting: { a: 1 },
+					filters: { b: 1 },
+					scope: "canada",
+					page: 1,
+					nextPageToLoad: 2,
+					index: { c: 1 },
+					list: [1, 2, 3],
+					totalCount: 10,
+					searchRequested: true,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -269,6 +311,7 @@ describe("ListReducerHelper", () => {
 					index: { d: 1 },
 					list: [4, 5, 6],
 					totalCount: 222,
+					searchRequested: undefined,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -300,6 +343,7 @@ describe("ListReducerHelper", () => {
 					index: {},
 					list: [4, 5, 6],
 					totalCount: 222,
+					searchRequested: undefined,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -327,6 +371,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1, d: 1 },
 					list: [1, 2, 3, 4, 5, 6],
 					totalCount: 222,
+					searchRequested: undefined,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -354,6 +399,7 @@ describe("ListReducerHelper", () => {
 					index: { d: 1 },
 					list: [4, 5, 6],
 					totalCount: 222,
+					searchRequested: undefined,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -384,6 +430,7 @@ describe("ListReducerHelper", () => {
 					index: {},
 					list: [],
 					totalCount: 0,
+					searchRequested: false,
 					prop1: 456,
 					prop2: { subprop: "b" },
 				}),
@@ -414,6 +461,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 456,
 					prop2: { subprop: "b" },
 				}),
@@ -444,6 +492,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 456,
 					prop3: 789,
 				}),
@@ -472,6 +521,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 				}),
 			),
 		);
@@ -500,6 +550,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 456,
 					prop2: { subprop: "b" },
 				}),
@@ -522,6 +573,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 				}),
 			),
 		);
@@ -542,6 +594,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1, d: 888 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -564,6 +617,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3, 888],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -586,6 +640,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 888 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -608,6 +663,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -630,6 +686,7 @@ describe("ListReducerHelper", () => {
 					index: {},
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -652,6 +709,7 @@ describe("ListReducerHelper", () => {
 					index: { c: 1 },
 					list: [1, 2, 3],
 					totalCount: 10,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -674,6 +732,7 @@ describe("ListReducerHelper", () => {
 					index: {},
 					list: [],
 					totalCount: 0,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),
@@ -701,6 +760,7 @@ describe("ListReducerHelper", () => {
 					index: {},
 					list: [],
 					totalCount: 0,
+					searchRequested: false,
 					prop1: 123,
 					prop2: { subprop: "a" },
 				}),