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

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.1-dev.2",
+	"version": "5.10.1-dev.3",
 	"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);
+	});
+});