@sap-ux/preview-middleware 0.6.2 → 0.7.0

package/dist/client/flp/WorkspaceConnector.ts

@@ -0,0 +1,66 @@
+import merge from 'sap/base/util/merge';
+import ObjectStorageConnector from 'sap/ui/fl/write/api/connectors/ObjectStorageConnector';
+import Layer from 'sap/ui/fl/Layer';
+import VersionInfo from 'sap/ui/VersionInfo';
+
+const path = '/preview/api/changes'; 
+
+const connector = merge({}, ObjectStorageConnector, {
+    layers: [Layer.VENDOR, Layer.CUSTOMER_BASE],
+    storage: {
+        _itemsStoredAsObjects: true,
+        setItem: function (_key: string, change: unknown) {
+            return fetch(path, {
+                method: 'POST',
+                body: JSON.stringify(change, null, 2),
+                headers: {
+                    'content-type': 'application/json'
+                }
+            });
+        },
+        removeItem: function (key: string) {
+            return fetch(path, {
+                method: 'DELETE',
+                body: JSON.stringify({ fileName: key }),
+                headers: {
+                    'content-type': 'application/json'
+                }
+            });
+        },
+        clear: function () {
+            // not implemented
+        },
+        getItem: function (_key: string) {
+            // not implemented
+        },
+        getItems: async function () {
+            const response = await fetch(path, {
+                method: 'GET',
+                headers: {
+                    'content-type': 'application/json'
+                }
+            });
+            const changes = await response.json();
+            return changes;
+        }
+    },
+    loadFeatures: async function () {
+        const features = await ObjectStorageConnector.loadFeatures();
+
+        const ui5Version = (await VersionInfo.load()) as { version: string };
+        const [majorVersion, minorVersion] = ui5Version.version.split('.').map((v: string) => parseInt(v, 10));
+        features.isVariantAdaptationEnabled = majorVersion >= 1 && minorVersion >= 90;  
+
+        const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+        if (bootstrapConfig) {
+            const settings = bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings');
+            if (settings && JSON.parse(settings).developerMode) {
+                features.isVariantAdaptationEnabled = false;
+            }
+        }
+
+        return features;
+    }
+}) as typeof ObjectStorageConnector;
+
+export default connector;

package/dist/client/thirdparty/@sap-ux-private/control-property-editor-common.js

@@ -0,0 +1,272 @@
+sap.ui.define((function () { 'use strict';
+
+	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+	var dist = {};
+
+	var api = {};
+
+	(function (exports) {
+		Object.defineProperty(exports, "__esModule", { value: true });
+		exports.changeStackModified = exports.propertyChangeFailed = exports.propertyChanged = exports.changeProperty = exports.outlineChanged = exports.deletePropertyChanges = exports.selectControl = exports.controlSelected = exports.iconsLoaded = exports.EXTERNAL_ACTION_PREFIX = exports.CHECKBOX_EDITOR_TYPE = exports.DROPDOWN_EDITOR_TYPE = exports.INPUT_EDITOR_TYPE = exports.STRING_VALUE_TYPE = exports.FLOAT_VALUE_TYPE = exports.INTEGER_VALUE_TYPE = exports.BOOLEAN_VALUE_TYPE = void 0;
+		exports.BOOLEAN_VALUE_TYPE = 'boolean';
+		exports.INTEGER_VALUE_TYPE = 'integer';
+		exports.FLOAT_VALUE_TYPE = 'float';
+		exports.STRING_VALUE_TYPE = 'string';
+		exports.INPUT_EDITOR_TYPE = 'input';
+		exports.DROPDOWN_EDITOR_TYPE = 'dropdown';
+		exports.CHECKBOX_EDITOR_TYPE = 'checkbox';
+		/**
+		 * Create matcher.
+		 *
+		 * @param type action type
+		 * @returns (value: { type: unknown } | undefined) => value is Y
+		 */
+		function createMatcher(type) {
+		    return function match(value) {
+		        return (value === null || value === void 0 ? void 0 : value.type) === type;
+		    };
+		}
+		/**
+		 * Create action factory.
+		 *
+		 * @param prefix to determine ext action
+		 * @returns Function
+		 */
+		function createActionFactory(prefix) {
+		    return function createAction(name) {
+		        const actionType = [prefix, name].join(' ');
+		        /**
+		         *
+		         * @param payload action payload
+		         * @returns PayloadAction<typeof actionType, T>
+		         */
+		        function action(payload) {
+		            return {
+		                type: actionType,
+		                payload
+		            };
+		        }
+		        action.type = actionType;
+		        action.match = createMatcher(actionType);
+		        return action;
+		    };
+		}
+		exports.EXTERNAL_ACTION_PREFIX = '[ext]';
+		const createExternalAction = createActionFactory(exports.EXTERNAL_ACTION_PREFIX);
+		exports.iconsLoaded = createExternalAction('icons-loaded');
+		exports.controlSelected = createExternalAction('control-selected');
+		exports.selectControl = createExternalAction('select-control');
+		exports.deletePropertyChanges = createExternalAction('delete-property-changes');
+		exports.outlineChanged = createExternalAction('outline-changed');
+		exports.changeProperty = createExternalAction('change-property');
+		exports.propertyChanged = createExternalAction('property-changed');
+		exports.propertyChangeFailed = createExternalAction('change-property-failed');
+		exports.changeStackModified = createExternalAction('change-stack-modified');
+		
+	} (api));
+
+	var debounce$1 = {};
+
+	Object.defineProperty(debounce$1, "__esModule", { value: true });
+	debounce$1.debounce = void 0;
+	/**
+	 * Returns a function which calls the callback function only after the specified idle time
+	 * Works similar to the Debounce operator from rxjs https://reactivex.io/documentation/operators/debounce.html link.
+	 *
+	 * @param callback Function to execute
+	 * @param delay Idle period in milliseconds after which the callback will be executed
+	 * @returns A wrapper function that should be called to invoke the callback function after delay
+	 */
+	function debounce(callback, delay) {
+	    let timerId;
+	    return (...args) => {
+	        clearTimeout(timerId);
+	        timerId = setTimeout(() => {
+	            callback(...args);
+	        }, delay);
+	    };
+	}
+	debounce$1.debounce = debounce;
+
+	var postMessage = {};
+
+	Object.defineProperty(postMessage, "__esModule", { value: true });
+	postMessage.startPostMessageCommunication = void 0;
+	const POST_MESSAGE_ACTION_TYPE = 'post-message-action';
+	/**
+	 * Check if data isPostMessageAction.
+	 *
+	 * @param data - post message action
+	 * @returns data is PostMessageAction<T>
+	 */
+	function isPostMessageAction(data) {
+	    return (data === null || data === void 0 ? void 0 : data.type) === POST_MESSAGE_ACTION_TYPE && typeof (data === null || data === void 0 ? void 0 : data.action) === 'object';
+	}
+	/**
+	 * Method to start post message communication.
+	 *
+	 * @param target target window
+	 * @param onActionHandler action handler
+	 * @param logger to log info, default: browser console.
+	 * @returns PostMessageCommunication<T>
+	 */
+	function startPostMessageCommunication(target, onActionHandler, logger = console) {
+	    /**
+	     * Returns target windows or undefined.
+	     *
+	     * @returns Window | undefined
+	     */
+	    function getTarget() {
+	        if (typeof target === 'function') {
+	            return target();
+	        }
+	        return target;
+	    }
+	    /**
+	     * Invoke action on post message.
+	     *
+	     * @param event event
+	     */
+	    function postMessageListener(event) {
+	        const target = getTarget();
+	        if (!target || event.origin !== target.origin || event.source !== target) {
+	            // Ignore messages from unknown sources
+	            return;
+	        }
+	        if (isPostMessageAction(event.data)) {
+	            onActionHandler(event.data.action).catch((error) => logger.error(error));
+	        }
+	        else {
+	            logger.warn(`Unknown message received ${event.data}`);
+	        }
+	    }
+	    function dispose() {
+	        window.removeEventListener('message', postMessageListener);
+	    }
+	    /**
+	     * Post message to a give window.
+	     *
+	     * @param action action payload
+	     */
+	    function sendAction(action) {
+	        const target = getTarget();
+	        if (!target) {
+	            return;
+	        }
+	        const message = {
+	            type: POST_MESSAGE_ACTION_TYPE,
+	            action
+	        };
+	        target.postMessage(message, target.origin);
+	    }
+	    window.addEventListener('message', postMessageListener);
+	    return {
+	        dispose,
+	        sendAction
+	    };
+	}
+	postMessage.startPostMessageCommunication = startPostMessageCommunication;
+
+	var telemetry = {};
+
+	var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) {
+	    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+	    return new (P || (P = Promise))(function (resolve, reject) {
+	        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+	        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+	        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+	        step((generator = generator.apply(thisArg, _arguments || [])).next());
+	    });
+	};
+	Object.defineProperty(telemetry, "__esModule", { value: true });
+	telemetry.reportTelemetry = telemetry.disableTelemetry = telemetry.enableTelemetry = void 0;
+	let enabled = false;
+	function enableTelemetry() {
+	    enabled = true;
+	}
+	telemetry.enableTelemetry = enableTelemetry;
+	function disableTelemetry() {
+	    enabled = false;
+	}
+	telemetry.disableTelemetry = disableTelemetry;
+	/**
+	 * Reports telemetry data from Control Property Editor.
+	 *
+	 * @param data The TelemetryData object, that needs to be reported
+	 * @returns {Promise<void>}
+	 */
+	function reportTelemetry(data) {
+	    return __awaiter(this, void 0, void 0, function* () {
+	        try {
+	            if (enabled) {
+	                const requestOptions = {
+	                    method: 'POST',
+	                    headers: {
+	                        Accept: 'application/json',
+	                        'Content-Type': 'application/json'
+	                    },
+	                    body: JSON.stringify(data)
+	                };
+	                yield fetch('/preview/api/telemetry', requestOptions);
+	            }
+	        }
+	        catch (_error) {
+	            // something is wrong with the telemetry service
+	            disableTelemetry();
+	        }
+	    });
+	}
+	telemetry.reportTelemetry = reportTelemetry;
+
+	var utils = {};
+
+	(function (exports) {
+		Object.defineProperty(exports, "__esModule", { value: true });
+		exports.FlexChangesEndPoints = exports.convertCamelCaseToPascalCase = void 0;
+		const convertCamelCaseToPascalCase = (text) => {
+		    const string = text.replace(/([A-Z])/g, ' $1');
+		    return string.charAt(0).toUpperCase() + string.slice(1);
+		};
+		exports.convertCamelCaseToPascalCase = convertCamelCaseToPascalCase;
+		(function (FlexChangesEndPoints) {
+		    FlexChangesEndPoints["changes"] = "/preview/api/changes";
+		})(exports.FlexChangesEndPoints || (exports.FlexChangesEndPoints = {}));
+		
+	} (utils));
+
+	(function (exports) {
+		var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+		    if (k2 === undefined) k2 = k;
+		    var desc = Object.getOwnPropertyDescriptor(m, k);
+		    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+		      desc = { enumerable: true, get: function() { return m[k]; } };
+		    }
+		    Object.defineProperty(o, k2, desc);
+		}) : (function(o, m, k, k2) {
+		    if (k2 === undefined) k2 = k;
+		    o[k2] = m[k];
+		}));
+		var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+		    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+		};
+		Object.defineProperty(exports, "__esModule", { value: true });
+		exports.disableTelemetry = exports.enableTelemetry = exports.reportTelemetry = exports.startPostMessageCommunication = exports.debounce = void 0;
+		__exportStar(api, exports);
+		var debounce_1 = debounce$1;
+		Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return debounce_1.debounce; } });
+		var post_message_1 = postMessage;
+		Object.defineProperty(exports, "startPostMessageCommunication", { enumerable: true, get: function () { return post_message_1.startPostMessageCommunication; } });
+		var telemetry_1 = telemetry;
+		Object.defineProperty(exports, "reportTelemetry", { enumerable: true, get: function () { return telemetry_1.reportTelemetry; } });
+		Object.defineProperty(exports, "enableTelemetry", { enumerable: true, get: function () { return telemetry_1.enableTelemetry; } });
+		Object.defineProperty(exports, "disableTelemetry", { enumerable: true, get: function () { return telemetry_1.disableTelemetry; } });
+		__exportStar(utils, exports);
+		
+	} (dist));
+
+	Object.defineProperty(dist, "__" + "esModule", { value: true });
+
+	return dist;
+
+}));

package/dist/types/index.d.ts

@@ -23,6 +23,10 @@ export interface RtaConfig {
     layer: UI5FlexLayer;
     options?: {
         [key: string]: unknown;
+        baseId?: string;
+        projectId?: string;
+        generator?: string;
+        scenario?: string;
     };
     editors: {
         path: string;

package/dist/ui5/middleware.js

@@ -32,7 +32,8 @@ function initAdp(rootProject, config, flp, util, logger) {
             if (flp.rta) {
                 flp.rta.layer = layer;
                 flp.rta.options = {
-                    projectId: variant.id
+                    projectId: variant.id,
+                    scenario: 'ADAPTATION_PROJECT'
                 };
                 for (const editor of flp.rta.editors) {
                     (_a = editor.pluginScript) !== null && _a !== void 0 ? _a : (editor.pluginScript = 'open/ux/preview/client/adp/init');
@@ -47,6 +48,23 @@ function initAdp(rootProject, config, flp, util, logger) {
         }
     });
 }
+/**
+ * The developer mode is only supported for adaptation projects, therefore, notify the user if it is wrongly configured and then disable it.
+ *
+ * @param config configurations from the ui5.yaml
+ * @param logger logger instance
+ */
+function sanitizeConfig(config, logger) {
+    if (config.rta && config.adp === undefined) {
+        config.rta.editors = config.rta.editors.filter((editor) => {
+            if (editor.developerMode) {
+                logger.error('developerMode is ONLY supported for SAP UI5 adaptation projects.');
+                logger.warn(`developerMode for ${editor.path} disabled`);
+            }
+            return !editor.developerMode;
+        });
+    }
+}
 /**
  * Create the router that is to be exposed as UI5 middleware.
  *
@@ -63,6 +81,7 @@ function createRouter({ resources, options, middlewareUtil }, logger) {
         // setting defaults
         const config = (_a = options.configuration) !== null && _a !== void 0 ? _a : {};
         (_b = config.flp) !== null && _b !== void 0 ? _b : (config.flp = {});
+        sanitizeConfig(config, logger);
         // configure the FLP sandbox based on information from the manifest
         const flp = new flp_1.FlpSandbox(config, resources.rootProject, middlewareUtil, logger);
         if (config.adp) {

package/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "0.6.2",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -24,7 +24,8 @@
   "dependencies": {
     "ejs": "3.1.9",
     "@sap-ux/logger": "0.3.8",
-    "@sap-ux/adp-tooling": "0.3.1"
+    "@sap-ux/adp-tooling": "0.3.1",
+    "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.2.0"
   },
   "devDependencies": {
     "@types/ejs": "3.1.2",
@@ -36,7 +37,7 @@
     "express": "4.18.2",
     "nock": "13.2.1",
     "supertest": "6.3.3",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.2.1",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.3.0",
     "@sap-ux/project-access": "1.13.6",
     "@sap-ux/store": "0.3.14"
   },

package/templates/flp/editor.html

@@ -4,25 +4,21 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
-        <meta name="description" content="Web page for rendering Open UX Tools Control Property Editor" />
+        <meta name="description" content="Web page for rendering SAP Fiori Tools Control Property Editor" />
         <link rel="shortcut icon" type="image/x-icon" href="./editor/favicon.ico" />
         <link rel="stylesheet" type="text/css" href="./editor/app.css" />
         <title>Control Property Editor</title>
-        <style>
-            body, html {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-                overflow: hidden;
-            }
-            iframe {
-                width: 100%;
-                height: 100%;
-                border: none;
-            }
-        </style>
     </head>
     <body>
-        <iframe src="<%- previewUrl %>"></iframe>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module">
+            import { start } from './editor/app.js';
+            start({
+                previewUrl: '<%- previewUrl %>',
+                telemetry: <%- telemetry %>,
+                rootElementId: 'root'
+            });
+        </script>
     </body>
 </html>

package/templates/flp/sandbox.html

@@ -50,10 +50,11 @@
         data-sap-ui-theme="<%- ui5.theme %>"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-language="en"
+        data-sap-ui-bindingSyntax="complex"
         data-sap-ui-flexibilityServices='<%- JSON.stringify(ui5.flex) %>'
         data-sap-ui-resourceroots='<%- JSON.stringify(ui5.resources) %>'
         data-sap-ui-frameOptions="allow"
-        data-sap-ui-xx-componentPreload="off"
+        data-sap-ui-xx-componentPreload="off"<%- ui5.bootstrapOptions %>
         data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.flex) { %>
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flex) %>'<% } if (locals.locateReuseLibsScript) { %>
         data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>>

package/templates/flp/workspaceConnector.js

@@ -1,76 +0,0 @@
-sap.ui.define(
-    [
-        'sap/base/util/merge',
-        'sap/ui/fl/write/api/connectors/ObjectStorageConnector',
-        'sap/ui/fl/Layer',
-        'sap/base/util/UriParameters'
-    ],
-    function (merge, ObjectStorageConnector, Layer, UriParameters) {
-        'use strict';
-        var url = new URL(window.location.toString());
-        var uriParameters = UriParameters.fromURL(url.href);
-        var rtaMode = uriParameters.get('fiori-tools-rta-mode');
-        var generator =
-            rtaMode === 'forAdaptation'
-                ? 'changeUtils: SAPFioriTools-propertyEditor'
-                : 'changeUtils: SAPFioriTools-variants';
-        var path = '/preview/api/changes'; 
-        var WorkspaceConnector = merge({}, ObjectStorageConnector, {
-            layers: [Layer.VENDOR, Layer.CUSTOMER_BASE],
-            storage: {
-                _itemsStoredAsObjects: true,
-                setItem: function (_sKey, vValue) {
-                    // update generator
-                    if (vValue && vValue.support) {
-                        vValue.support.generator = generator;
-                    }
-                    $.ajax({
-                        type: 'POST',
-                        url: path,
-                        data: JSON.stringify(vValue, null, 2),
-                        contentType: 'application/json'
-                    });
-                },
-                removeItem: function (sKey) {
-                    $.ajax({
-                        type: 'DELETE',
-                        url: path,
-                        data: JSON.stringify({ fileName: sKey }),
-                        contentType: 'application/json'
-                    });
-                },
-                clear: function () {
-                    // not implemented
-                },
-                getItem: function (_sKey) {
-                    // not implemented
-                },
-                getItems: async function () {
-                    const changes = await $.ajax({
-                        url: path,
-                        type: 'GET',
-                        cache: false,
-                        dataType: 'json'
-                    });
-                    return changes;
-                }
-            },
-            loadFeatures: function () {
-                return ObjectStorageConnector.loadFeatures().then(function (settings) {
-                    const [majorVersion, minorVersion] = sap.ui.version.split('.').map((v) => parseInt(v, 10));
-                    if (majorVersion >= 1 && minorVersion >= 90) {
-                        settings.isVariantAdaptationEnabled = true;
-                    }
-
-                    if (rtaMode === 'forAdaptation') {
-                        settings.isVariantAdaptationEnabled = false;
-                    }
-                    return settings;
-                });
-            }
-        });
-
-        return WorkspaceConnector;
-    },
-    true
-);