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

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

@@ -3,7 +3,7 @@ import type { MiddlewareParameters } from '@ui5/server';
 import { json, Router as createRouter } from 'express';
 import path, { join } from 'path';
 import { promises } from 'fs';
-import { getWebappPath, FileName } from '@sap-ux/project-access';
+import { getWebappPath, FileName, type Manifest } from '@sap-ux/project-access';
 import { render } from 'ejs';
 import * as utils from './utilities';
 import os from 'os';
@@ -13,6 +13,32 @@ export const enum ApiRoutes {
     cardsStore = '/cards/store',
     i18nStore = '/editor/i18n'
 }
+export const DEFAULT_THEME = 'sap_horizon';
+
+const UI5_LIBS = [
+    'sap.apf',
+    'sap.base',
+    'sap.chart',
+    'sap.collaboration',
+    'sap.f',
+    'sap.fe',
+    'sap.fileviewer',
+    'sap.gantt',
+    'sap.landvisz',
+    'sap.m',
+    'sap.ndc',
+    'sap.ovp',
+    'sap.rules',
+    'sap.suite',
+    'sap.tnt',
+    'sap.ui',
+    'sap.uiext',
+    'sap.ushell',
+    'sap.uxap',
+    'sap.viz',
+    'sap.webanalytics',
+    'sap.zen'
+];
 
 /**
  * Check if a file exists.
@@ -33,6 +59,23 @@ async function pathExists(path: string) {
     }
 }
 
+function getUI5Libs(manifest: Partial<Manifest>): string {
+    const libs = manifest['sap.ui5']?.dependencies?.libs ?? {};
+    // add libs that should always be preloaded
+    libs['sap.m'] = {};
+    libs['sap.ui.core'] = {};
+    libs['sap.ushell'] = {};
+    libs['sap.rta'] = {};
+
+    return Object.keys(libs)
+        .filter((key) => {
+            return UI5_LIBS.some((substring) => {
+                return key === substring || key.startsWith(substring + '.');
+            });
+        })
+        .join(',');
+}
+
 module.exports = async ({ resources }: MiddlewareParameters<any>): Promise<RequestHandler> => {
     const router = createRouter();
     router.use(json());
@@ -47,11 +90,18 @@ 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'];
+        const ui5libs = getUI5Libs(JSON.parse(await manifest.getString()));
+        const supportedThemes: string[] = (JSON.parse(await manifest.getString())['sap.ui5']?.supportedThemes as []) ?? [DEFAULT_THEME];
+        const ui5Theme = supportedThemes.includes(DEFAULT_THEME) ? DEFAULT_THEME : supportedThemes[0];
         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
+                    component: app.id,
+                    ui5: {
+                        libs: ui5libs,
+                        theme: ui5Theme
+                    }
                 }
             })
         );

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

@@ -0,0 +1,74 @@
+function parseUI5Version(version) {
+    const versionParts = version.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 = { major: 1, minor: 121 };
+        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",
+        "sap/ushell/Container"
+    ], async (CardGenerator, 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/ushell/Container", "sap/m/MessageBox", "sap/ui/VersionInfo"], async (Container, MessageBox, VersionInfo) => {
+    Container.attachRendererCreatedEvent(function() {
+        Container.getServiceAsync('AppLifeCycle').then((serviceInstance) => {
+            serviceInstance.attachAppLoaded(async (event) => {
+                const sapCoreVersionInfo = await VersionInfo.load({
+                    library: "sap.ui.core"
+                });
+                const sapCoreVersion = 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);
+            });
+        });
+    });
+    Container.createRendererInternal(undefined, true).then(function(oRenderer){
+        oRenderer.placeAt("content");
+    });  
+});
+
+

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

@@ -0,0 +1,63 @@
+<!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="<%- templateModel.ui5.libs %>"
+		data-sap-ui-async="true"
+		data-sap-ui-preload="async"
+		data-sap-ui-theme="<%- templateModel.ui5.theme %>"
+		data-sap-ui-compat-version="edge"
+		data-sap-ui-language="en"
+		data-sap-ui-oninit="module:Init"
+		data-sap-ui-resource-roots='{"<%- templateModel.component %>": "../"}'
+		data-sap-ui-frame-options="allow"> // NON-SECURE setting for testing environment
+	</script>
+
+    <script src="./Init.js"></script>
+</head>
+<!-- UI Content -->
+
+<body class="sapUiBody" id="content"></body>
+
+</html>