feat(framework): support sap-* config URL params (#3138)

The change will assist broader UI technology co-existence by allowing the app developers use the older sap-* params in order to configure the theme, language, etc. There are use-cases where the sap-* is still the preferred param.
In case both sap-ui-* and sap-* params are set, the sap-ui-* ones will take precedence - the same way UI5 handles it.

FIXES: #3114

Author: ilhan007

packages/base/hash.txt

@@ -1 +1 @@
-Ypwf1pcj/tFLkCFKDb5OPtwjd5A=
+KJ0tn0Kg8EEEQiQ6XKfqbAsP3eQ=

packages/base/src/InitialConfiguration.js

@@ -92,23 +92,36 @@ const parseConfigurationScript = () => {
 const parseURLParameters = () => {
 	const params = new URLSearchParams(window.location.search);
 
+	// Process "sap-*" params first
 	params.forEach((value, key) => {
-		if (!key.startsWith("sap-ui")) {
+		const parts = key.split("sap-").length;
+		if (parts === 0 || parts === key.split("sap-ui-").length) {
 			return;
 		}
 
-		const lowerCaseValue = value.toLowerCase();
-
-		const param = key.split("sap-ui-")[1];
+		applyURLParam(key, value, "sap");
+	});
 
-		if (booleanMapping.has(value)) {
-			value = booleanMapping.get(lowerCaseValue);
+	// Process "sap-ui-*" params
+	params.forEach((value, key) => {
+		if (!key.startsWith("sap-ui")) {
+			return;
 		}
 
-		initialConfig[param] = value;
+		applyURLParam(key, value, "sap-ui");
 	});
 };
 
+const applyURLParam = (key, value, paramType) => {
+	const lowerCaseValue = value.toLowerCase();
+	const param = key.split(`${paramType}-`)[1];
+
+	if (booleanMapping.has(value)) {
+		value = booleanMapping.get(lowerCaseValue);
+	}
+	initialConfig[param] = value;
+};
+
 const applyOpenUI5Configuration = () => {
 	const OpenUI5Support = getFeature("OpenUI5Support");
 	if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {

packages/base/test/specs/ConfigurationURL.spec.js

@@ -1,6 +1,6 @@
 const assert = require("chai").assert;
 
-describe("Some settings can be set via URL params", () => {
+describe("Some settings can be set via SAP UI URL params", () => {
 	before(() => {
 		browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
 	});
@@ -45,3 +45,49 @@ describe("Some settings can be set via URL params", () => {
 		assert.strictEqual(res, 'basic', "animationMode is basic");
 	});
 });
+
+
+describe("Some settings can be set via SAP URL params", () => {
+	before(() => {
+		browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-theme=sap_fiori_3_dark");
+	});
+
+	it("Tests that language is applied", () => {
+		const res = browser.execute( () => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			return config.getLanguage();
+		});
+		assert.strictEqual(res, 'bg', "language is bulgarian");
+	});
+
+	it("Tests that theme is applied", () => {
+		const res = browser.execute( () => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			return config.getTheme();
+		});
+		assert.strictEqual(res, 'sap_fiori_3_dark', "Thems is Fiori Dark");
+	});
+});
+
+
+describe("SAP UI params take precedence over the SAP params", () => {
+	before(() => {
+		browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb");
+	});
+
+	it("Tests that language is applied via sap-ui-language", () => {
+		const res = browser.execute( () => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			return config.getLanguage();
+		});
+		assert.strictEqual(res, 'de', "language is german");
+	});
+
+	it("Tests that theme is applied via sap-ui-theme", () => {
+		const res = browser.execute( () => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			return config.getTheme();
+		});
+		assert.strictEqual(res, 'sap_fiori_3_hcb', "Thems is Fiori HCB");
+	});
+});