feat: Ensuring UI5 2.x compliance for cards-editor-middleware Plugin

packages/cards-editor-middleware/src/index.ts

@@ -48,7 +48,7 @@ module.exports = async ({ resources }: MiddlewareParameters<any>): Promise<Reque
     router.get(ApiRoutes.previewGeneratorSandbox, async (_req, res: Response) => {
         const app = JSON.parse(await manifest.getString())['sap.app'];
         res.status(200).send(
-            render(await promises.readFile(join(__dirname, '../templates/editor.html'), 'utf-8'), {
+            render(await promises.readFile(join(__dirname, '../templates/flpSandbox.html'), 'utf-8'), {
                 templateModel: {
                     appTitle: app.title || 'Card Editor Preview',
                     component: app.id

packages/cards-editor-middleware/templates/Init.js

@@ -0,0 +1,84 @@
+function parseUI5Version(version) {
+    const versionParts = version.replace(/snapshot-untested|snapshot-|snapshot/, '').split('.');
+    const major = parseInt(versionParts[0], 10);
+    const minor = parseInt(versionParts[1], 10);
+
+    return { major, minor };
+}
+
+function isLowerThanMinimalUi5Version(version, minVersion) {
+    if (version && minVersion) {
+        const minVersionParsed = parseUI5Version(minVersion);
+        const ui5VersionParsed = parseUI5Version(version);
+        if (!isNaN(ui5VersionParsed.major) && !isNaN(ui5VersionParsed.minor)) {
+            if (ui5VersionParsed.major < minVersionParsed.major) {
+                return true;
+            }
+            if (ui5VersionParsed.major === minVersionParsed.major && ui5VersionParsed.minor < minVersionParsed.minor) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+function addCardGenerationUserAction(oComponentInstance) {
+    sap.ui.require([
+        "sap/cards/ap/generator/CardGenerator"
+    ], (CardGenerator) => {
+        sap.ui.require(["sap/ushell/Container"], async function (Container) {
+            const oRenderer = await Container.getServiceAsync("fiori2");
+            if (oRenderer) {
+                var generateCardBtn = {
+                    controlType: "sap.ushell.ui.launchpad.ActionItem",
+                    bCurrentState: true,
+                    oControlProperties: {
+                        icon: "sap-icon://add",
+                        id: "generate_card",
+                        text: "Generate Card",
+                        tooltip: "Generate Card",
+                        press: function () {
+                            CardGenerator.initializeAsync(oComponentInstance);
+                        }
+                    },
+                    bIsVisible: true
+                };
+                oRenderer.addUserAction(generateCardBtn);
+            }
+        });
+    });
+}
+
+sap.ui.require(["sap/ui/core/Core"], (Core) => {
+    Core.ready().then(function() {
+        sap.ui.require("sap/ushell/Container").attachRendererCreatedEvent(function() {
+            sap.ui.require("sap/ushell/Container").getServiceAsync('AppLifeCycle').then((serviceInstance) => {
+                serviceInstance.attachAppLoaded(async (event) => {
+                    sap.ui.require([
+                        "sap/m/MessageBox",
+                        "sap/ui/VersionInfo"
+                    ], async (MessageBox, VersionInfo) => {
+                        const sapCoreVersionInfo = await VersionInfo.load({
+                            library: "sap.ui.core"
+                        });
+                        const sapCoreVersion = sapCoreVersionInfo && sapCoreVersionInfo.version;
+
+                        if (isLowerThanMinimalUi5Version(sapCoreVersion, "1.121")) {
+                            MessageBox.error("Card Generation feature is not supported for the current UI5 version. Please use UI5 version 1.121 or higher.");
+                            return;
+                        }
+
+                        var oCurrentApplication = serviceInstance.getCurrentApplication();
+                        var oComponentInstance = oCurrentApplication.componentInstance;
+                        addCardGenerationUserAction(oComponentInstance);
+                    });
+                });
+            });
+        });
+        sap.ui.require("sap/ushell/Container").createRenderer(true).then(function(oRenderer){
+            oRenderer.placeAt("content");
+        });
+    });  
+});
+
+

packages/cards-editor-middleware/templates/editor.html

@@ -50,84 +50,7 @@
 		// NON-SECURE setting for testing environment
 	</script>
 
-	<script>
-		function parseUI5Version(version) {
-			const versionParts = version.replace(/snapshot-untested|snapshot-|snapshot/, '').split('.');
-			const major = parseInt(versionParts[0], 10);
-			const minor = parseInt(versionParts[1], 10);
-
-			return { major, minor };
-		}
-
-		function isLowerThanMinimalUi5Version(version, minVersion) {
-			if (version && minVersion) {
-				const minVersionParsed = parseUI5Version(minVersion);
-				const ui5VersionParsed = parseUI5Version(version);
-				if (!isNaN(ui5VersionParsed.major) && !isNaN(ui5VersionParsed.minor)) {
-					if (ui5VersionParsed.major < minVersionParsed.major) {
-						return true;
-					}
-					if (ui5VersionParsed.major === minVersionParsed.major && ui5VersionParsed.minor < minVersionParsed.minor) {
-						return true;
-					}
-				}
-			}
-			return false;
-		}
-
-		function addCardGenerationUserAction(oComponentInstance) {
-			sap.ui.require([
-				"sap/cards/ap/generator/CardGenerator"
-			], (CardGenerator) => {
-				var oRenderer = sap.ushell.Container.getRenderer("fiori2");
-				if (oRenderer) {
-					var generateCardBtn = {
-						controlType: "sap.ushell.ui.launchpad.ActionItem",
-						bCurrentState: true,
-						oControlProperties: {
-							icon: "sap-icon://add",
-							id: "generate_card",
-							text: "Generate Card",
-							tooltip: "Generate Card",
-							press: function () {
-								CardGenerator.initializeAsync(oComponentInstance);
-							}
-						},
-						bIsVisible: true
-					};
-					oRenderer.addUserAction(generateCardBtn);
-				}
-			});
-		}
-
-		sap.ui.getCore().attachInit(() => {
-			sap.ushell.Container.attachRendererCreatedEvent(() => {
-				sap.ushell.Container.getServiceAsync('AppLifeCycle').then((serviceInstance) => {
-					serviceInstance.attachAppLoaded(async (event) => {
-						sap.ui.require([
-							"sap/m/MessageBox",
-							"sap/ui/VersionInfo"
-						], async (MessageBox, VersionInfo) => {
-							const sapCoreVersionInfo = await VersionInfo.load({
-								library: "sap.ui.core"
-							});
-							const sapCoreVersion = sapCoreVersionInfo && sapCoreVersionInfo.version;
-
-							if (isLowerThanMinimalUi5Version(sapCoreVersion, "1.121")) {
-								MessageBox.error("Card Generation feature is not supported for the current UI5 version. Please use UI5 version 1.121 or higher.");
-								return;
-							}
-
-							var oCurrentApplication = serviceInstance.getCurrentApplication();
-							var oComponentInstance = oCurrentApplication.componentInstance;
-							addCardGenerationUserAction(oComponentInstance);
-						});
-					});
-				});
-			});
-			sap.ushell.Container.createRenderer().placeAt("content");
-		});
-	</script>
+    <script src="./Init.js"></script>
 </head>
 <!-- UI Content -->
 

packages/cards-editor-middleware/templates/flpSandbox.html

@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->
+<html lang="en">
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title><%- templateModel.appTitle %></title>
+	<script type="text/javascript">
+		window["sap-ushell-config"] = {
+			defaultRenderer: "fiori2",
+			bootstrapPlugins: {
+				"RuntimeAuthoringPlugin": {
+					component: "sap.ushell.plugins.rta",
+					config: {
+						validateAppVersion: false
+					}
+				}
+			},
+			renderers: {
+				fiori2: {
+					componentData: {
+						config: {
+							search: "hidden"
+						}
+					}
+				}
+			},
+			applications: {
+				"Cards-generator": {
+					title: "<%- templateModel.appTitle %>",
+					description: "",
+					additionalInformation: "SAPUI5.Component=<%- templateModel.component %>",
+					applicationType: "URL",
+					url: "../"
+				}
+			}
+		};
+	</script>
+
+    <script src="../resources/sap/ushell/bootstrap/sandbox2.js" id="sap-ushell-bootstrap"></script>
+
+	<!-- Bootstrap the UI5 core library -->
+	<script id="sap-ui-bootstrap" src="../resources/sap-ui-core.js"
+		data-sap-ui-libs="sap.m, sap.f, sap.ushell, sap.ui.core, sap.ui.layout, sap.ui.generic.app, sap.ui.comp, sap.suite.ui.generic.template, sap.ovp, sap.ui.rta"
+		data-sap-ui-async="true" data-sap-ui-preload="async" data-sap-ui-theme="sap_horizon"
+		data-sap-ui-compat-version="edge" data-sap-ui-language="en"
+		data-sap-ui-resource-roots='{"<%- templateModel.component %>": "../"}' data-sap-ui-frameOptions="allow">
+		// NON-SECURE setting for testing environment
+	</script>
+
+    <script src="./Init.js"></script>
+</head>
+<!-- UI Content -->
+
+<body class="sapUiBody" id="content"></body>
+
+</html>