@sap-ux/preview-middleware 0.6.3 → 0.7.1

package/dist/base/flp.d.ts

@@ -30,6 +30,7 @@ export interface TemplateConfig {
             writeConnector: string;
             custom: boolean;
         }[];
+        bootstrapOptions: string;
         resources: Record<string, string>;
     };
     flex?: {

package/dist/base/flp.js

@@ -15,6 +15,15 @@ const fs_1 = require("fs");
 const path_1 = require("path");
 const express_1 = require("express");
 const flex_1 = require("./flex");
+const DEVELOPER_MODE_CONFIG = new Map([
+    // Run application in design time mode
+    // Adds bindingString to BindingInfo objects. Required to create and read PropertyBinding changes
+    ['xx-designMode', 'true'],
+    // In design mode, the controller code will not be executed by default, which is not desired in our case, so we suppress the deactivation
+    ['xx-suppressDeactivationOfControllerCode', 'true'],
+    // Make sure that XML preprocessing results are correctly invalidated
+    ['xx-viewCache', 'false']
+]);
 /**
  * Default theme
  */
@@ -93,7 +102,8 @@ class FlpSandbox {
                     libs: Object.keys((_g = (_f = (_e = manifest['sap.ui5']) === null || _e === void 0 ? void 0 : _e.dependencies) === null || _f === void 0 ? void 0 : _f.libs) !== null && _g !== void 0 ? _g : {}).join(','),
                     theme: ui5Theme,
                     flex,
-                    resources: Object.assign(Object.assign({}, resources), { [PREVIEW_URL.client.ns]: PREVIEW_URL.client.url })
+                    resources: Object.assign(Object.assign({}, resources), { [PREVIEW_URL.client.ns]: PREVIEW_URL.client.url }),
+                    bootstrapOptions: ''
                 },
                 locateReuseLibsScript: (_h = this.config.libs) !== null && _h !== void 0 ? _h : (yield this.hasLocateReuseLibsScript())
             };
@@ -107,6 +117,7 @@ class FlpSandbox {
             if (this.rta) {
                 (_k = (_l = this.rta).options) !== null && _k !== void 0 ? _k : (_l.options = {});
                 this.rta.options.baseId = componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id;
+                this.rta.options.generator = 'changeUtils: SAPFioriTools-propertyEditor';
                 this.addEditorRoutes(this.rta);
             }
             this.addRoutesForAdditionalApps();
@@ -121,22 +132,33 @@ class FlpSandbox {
      */
     addEditorRoutes(rta) {
         var _a;
+        const cpe = (0, path_1.dirname)(require.resolve('@sap-ux/control-property-editor-sources'));
         for (const editor of rta.editors) {
             let previewUrl = editor.path;
             if (editor.developerMode) {
                 previewUrl = `${previewUrl}.inner.html`;
                 (_a = editor.pluginScript) !== null && _a !== void 0 ? _a : (editor.pluginScript = 'open/ux/preview/client/cpe/init');
                 this.router.get(editor.path, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
+                    var _b, _c;
                     const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/editor.html'), 'utf-8');
                     const html = (0, ejs_1.render)(template, {
-                        previewUrl: `${previewUrl}?sap-ui-xx-viewCache=false&fiori-tools-rta-mode=forAdaptation&sap-ui-rta-skip-flex-validation=true&sap-ui-xx-condense-changes=true#${this.config.intent.object}-${this.config.intent.action}`
+                        previewUrl: `${previewUrl}?sap-ui-xx-viewCache=false&fiori-tools-rta-mode=forAdaptation&sap-ui-rta-skip-flex-validation=true&sap-ui-xx-condense-changes=true#${this.config.intent.object}-${this.config.intent.action}`,
+                        telemetry: (_c = (_b = rta.options) === null || _b === void 0 ? void 0 : _b.telemetry) !== null && _c !== void 0 ? _c : false
                     });
                     res.status(200).contentType('html').send(html);
                 })));
+                let path = (0, path_1.dirname)(editor.path);
+                if (!path.endsWith('/')) {
+                    path = `${path}/`;
+                }
+                this.router.use(`${path}editor`, (0, express_1.static)(cpe));
             }
             this.router.get(previewUrl, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
                 const config = Object.assign({}, this.templateConfig);
                 config.flex = Object.assign(Object.assign({ layer: rta.layer }, rta.options), { developerMode: editor.developerMode === true, pluginScript: editor.pluginScript });
+                if (editor.developerMode === true) {
+                    config.ui5.bootstrapOptions = serializeUi5Configuration(DEVELOPER_MODE_CONFIG);
+                }
                 const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/sandbox.html'), 'utf-8');
                 const html = (0, ejs_1.render)(template, config);
                 res.status(200).contentType('html').send(html);
@@ -198,12 +220,7 @@ class FlpSandbox {
      * @returns template configuration for flex.
      */
     createFlexHandler() {
-        const workspaceConnectorPath = '/preview/WorkspaceConnector';
-        this.router.get(`/resources${workspaceConnectorPath}.js`, (_req, res) => {
-            res.status(200)
-                .contentType('text/javascript')
-                .send((0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/workspaceConnector.js'), 'utf-8'));
-        });
+        const workspaceConnectorPath = 'open/ux/preview/client/flp/WorkspaceConnector';
         const api = `${PREVIEW_URL.api}/changes`;
         this.router.use(api, (0, express_1.json)());
         this.router.get(api, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
@@ -271,4 +288,28 @@ class FlpSandbox {
     }
 }
 exports.FlpSandbox = FlpSandbox;
+/**
+ * Creates an attribute string that can be added to an HTML element.
+ *
+ * @param attributes map with attributes and their values
+ * @param indent indentation thats inserted before each attribute
+ * @param prefix value that should be added at the start of to all attribute names
+ * @returns attribute string
+ */
+function serializeDataAttributes(attributes, indent = '', prefix = 'data') {
+    return [...attributes.entries()]
+        .map(([name, value]) => {
+        return `${indent}${prefix}-${name}="${value}"`;
+    })
+        .join('\n');
+}
+/**
+ * Creates an attribute string that can be added to bootstrap script in a HTML file.
+ *
+ * @param config ui5 configuration options
+ * @returns attribute string
+ */
+function serializeUi5Configuration(config) {
+    return '\n' + serializeDataAttributes(config, '        ', 'data-sap-ui');
+}
 //# sourceMappingURL=flp.js.map

package/dist/client/adp/controllers/AddFragment.controller.js

@@ -11,7 +11,6 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Con
   const ControlUtils = _interopRequireDefault(__ControlUtils);
   const CommandExecutor = _interopRequireDefault(__CommandExecutor);
   const getFragments = ___api_handler["getFragments"];
-  const getManifestAppdescr = ___api_handler["getManifestAppdescr"];
   const writeFragment = ___api_handler["writeFragment"];
   /**
    * @namespace open.ux.preview.client.adp.controllers
@@ -212,32 +211,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Con
         index,
         targetAggregation
       } = fragmentData;
-      let manifest;
-      try {
-        manifest = await getManifestAppdescr();
-        if (!manifest) {
-          // Highly unlikely since adaptation projects are required to have manifest.appdescr_variant
-          throw new Error('Could not retrieve manifest');
-        }
-      } catch (e) {
-        MessageToast.show(e.message);
-        throw new Error(e.message);
-      }
-      const {
-        id,
-        reference,
-        namespace,
-        layer
-      } = manifest;
-      const flexSettings = {
-        baseId: reference,
-        developerMode: true,
-        layer: layer,
-        namespace: namespace,
-        projectId: id,
-        rootNamespace: namespace.split('/').slice(0, 2).join('/'),
-        scenario: undefined
-      };
+      const flexSettings = this.rta.getFlexSettings();
       const overlay = OverlayRegistry.getOverlay(this.runtimeControl);
       const designMetadata = overlay.getDesignTimeMetadata();
       const modifiedValue = {

package/dist/client/adp/controllers/AddFragment.controller.ts

@@ -27,7 +27,7 @@ import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 
 import ControlUtils from '../control-utils';
 import CommandExecutor from '../command-executor';
-import { ManifestAppdescr, getFragments, getManifestAppdescr, writeFragment } from '../api-handler';
+import { getFragments, writeFragment } from '../api-handler';
 
 interface CreateFragmentProps {
     fragmentName: string;
@@ -332,30 +332,8 @@ export default class AddFragment extends Controller {
      */
     private async createFragmentChange(fragmentData: CreateFragmentProps) {
         const { fragmentName, index, targetAggregation } = fragmentData;
-        let manifest: ManifestAppdescr;
-        try {
-            manifest = await getManifestAppdescr();
 
-            if (!manifest) {
-                // Highly unlikely since adaptation projects are required to have manifest.appdescr_variant
-                throw new Error('Could not retrieve manifest');
-            }
-        } catch (e) {
-            MessageToast.show(e.message);
-            throw new Error(e.message);
-        }
-
-        const { id, reference, namespace, layer } = manifest;
-
-        const flexSettings = {
-            baseId: reference,
-            developerMode: true,
-            layer: layer,
-            namespace: namespace,
-            projectId: id,
-            rootNamespace: namespace.split('/').slice(0, 2).join('/'),
-            scenario: undefined
-        };
+        const flexSettings = this.rta.getFlexSettings();
 
         const overlay = OverlayRegistry.getOverlay(this.runtimeControl as UI5Element);
         const designMetadata = overlay.getDesignTimeMetadata();

package/dist/client/cpe/changes/flex-change.js

@@ -0,0 +1,46 @@
+"use strict";
+
+sap.ui.define(["sap/ui/rta/command/CommandFactory"], function (CommandFactory) {
+  "use strict";
+
+  /**
+   * Function to check a give value is a binding expression.
+   *
+   * @param value value to be checked.
+   * @returns boolean
+   */
+  function isBindingExpression(value) {
+    return value.includes('{') && value.includes('}');
+  }
+
+  /**
+   *
+   * @param options UI5 adaptation options
+   * @param change changed property of a control
+   */
+  async function applyChange(options, change) {
+    const {
+      rta
+    } = options;
+    const modifiedControl = sap.ui.getCore().byId(change.controlId);
+    if (!modifiedControl) {
+      return;
+    }
+    const flexSettings = rta.getFlexSettings();
+    const changeType = typeof change.value === 'string' && isBindingExpression(change.value) ? 'BindProperty' : 'Property';
+    const property = typeof change.value === 'string' && isBindingExpression(change.value) ? 'newBinding' : 'newValue';
+    const modifiedValue = {
+      generator: flexSettings.generator,
+      propertyName: change.propertyName,
+      [property]: change.value
+    };
+    const command = await CommandFactory.getCommandFor(modifiedControl, changeType, modifiedValue, null, flexSettings);
+    await rta.getCommandStack().pushAndExecute(command);
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.applyChange = applyChange;
+  return __exports;
+});
+//# sourceMappingURL=flex-change.js.map

package/dist/client/cpe/changes/flex-change.ts

@@ -0,0 +1,49 @@
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import CommandFactory from 'sap/ui/rta/command/CommandFactory';
+import type { PropertyChange } from '@sap-ux-private/control-property-editor-common';
+import type { UI5AdaptationOptions } from '../types';
+
+/**
+ * Function to check a give value is a binding expression.
+ *
+ * @param value value to be checked.
+ * @returns boolean
+ */
+function isBindingExpression(value: string): boolean {
+    return value.includes('{') && value.includes('}');
+}
+
+/**
+ *
+ * @param options UI5 adaptation options
+ * @param change changed property of a control
+ */
+export async function applyChange(options: UI5AdaptationOptions, change: PropertyChange): Promise<void> {
+    const { rta } = options;
+    const modifiedControl = sap.ui.getCore().byId(change.controlId);
+    if (!modifiedControl) {
+        return;
+    }
+
+    const flexSettings = rta.getFlexSettings();
+
+    const changeType =
+        typeof change.value === 'string' && isBindingExpression(change.value) ? 'BindProperty' : 'Property';
+
+    const property = typeof change.value === 'string' && isBindingExpression(change.value) ? 'newBinding' : 'newValue';
+    const modifiedValue = {
+        generator: flexSettings.generator,
+        propertyName: change.propertyName,
+        [property]: change.value
+    };
+
+    const command = await CommandFactory.getCommandFor<FlexCommand>(
+        modifiedControl,
+        changeType,
+        modifiedValue,
+        null,
+        flexSettings
+    );
+
+    await rta.getCommandStack().pushAndExecute(command);
+}

package/dist/client/cpe/changes/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+sap.ui.define(["./service"], function (___service) {
+  "use strict";
+
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ChangeService = ___service.ChangeService;
+  return __exports;
+});
+//# sourceMappingURL=index.js.map

package/dist/client/cpe/changes/index.ts

@@ -0,0 +1 @@
+export { ChangeService } from './service';

package/dist/client/cpe/changes/service.js

@@ -0,0 +1,164 @@
+'use strict';
+sap.ui.define([
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './flex-change',
+    'sap/base/Log'
+], function (___sap_ux_private_control_property_editor_common, ___flex_change, Log) {
+    'use strict';
+    const changeProperty = ___sap_ux_private_control_property_editor_common['changeProperty'];
+    const changeStackModified = ___sap_ux_private_control_property_editor_common['changeStackModified'];
+    const deletePropertyChanges = ___sap_ux_private_control_property_editor_common['deletePropertyChanges'];
+    const propertyChangeFailed = ___sap_ux_private_control_property_editor_common['propertyChangeFailed'];
+    const FlexChangesEndPoints = ___sap_ux_private_control_property_editor_common['FlexChangesEndPoints'];
+    const applyChange = ___flex_change['applyChange'];
+    function assertProperties(properties, target) {
+        for (const property of properties) {
+            const value = target[property];
+            if (value === null || value === undefined) {
+                throw new Error(`Invalid change, missing ${ property } in the change file`);
+            }
+        }
+    }
+    function assertChange(change) {
+        assertProperties([
+            'fileName',
+            'selector',
+            'content',
+            'creation'
+        ], change);
+        assertProperties(['id'], change.selector);
+        assertProperties(['property'], change.content);
+    }
+    function modifyRTAErrorMessage(errorMessage, id, type) {
+        return errorMessage.replace('Error: Applying property changes failed:', '').replace(`${ type }#${ id }`, '');
+    }
+    class ChangeService {
+        savedChanges = [];
+        constructor(options, ui5, selectionService) {
+            this.options = options;
+            this.ui5 = ui5;
+            this.selectionService = selectionService;
+        }
+        async init(sendAction, subscribe) {
+            subscribe(async action => {
+                if (changeProperty.match(action)) {
+                    try {
+                        this.selectionService.applyControlPropertyChange(action.payload.controlId, action.payload.propertyName);
+                        await applyChange(this.options, action.payload);
+                    } catch (exception) {
+                        let name = '';
+                        const id = action.payload.controlId || '';
+                        const control = this.ui5.getControlById(id);
+                        if (control) {
+                            name = control.getMetadata().getName();
+                        }
+                        const modifiedMessage = modifyRTAErrorMessage(exception?.toString(), id, name);
+                        const errorMessage = modifiedMessage || `RTA Exception applying expression "${ action.payload.value }"`;
+                        const propertyChangeFailedAction = propertyChangeFailed({
+                            ...action.payload,
+                            errorMessage
+                        });
+                        sendAction(propertyChangeFailedAction);
+                    }
+                } else if (deletePropertyChanges.match(action)) {
+                    await this.deleteChange(action.payload.controlId, action.payload.propertyName, action.payload.fileName);
+                }
+            });
+            const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${ Date.now() }`);
+            const savedChanges = await savedChangesResponse.json();
+            const changes = Object.keys(savedChanges ?? {}).map(key => {
+                const change = savedChanges[key];
+                try {
+                    assertChange(change);
+                    if ([
+                            change.content.newValue,
+                            change.content.newBinding
+                        ].every(item => item === undefined || item === null)) {
+                        throw new Error('Invalid change, missing new value in the change file');
+                    }
+                    return {
+                        type: 'saved',
+                        kind: 'valid',
+                        fileName: change.fileName,
+                        controlId: change.selector.id,
+                        propertyName: change.content.property,
+                        value: change.content.newValue ?? change.content.newBinding,
+                        timestamp: new Date(change.creation).getTime(),
+                        controlName: change.selector.type.split('.').pop()
+                    };
+                } catch (error) {
+                    if (change.fileName) {
+                        const unknownChange = {
+                            type: 'saved',
+                            kind: 'unknown',
+                            fileName: change.fileName
+                        };
+                        if (change.creation) {
+                            unknownChange.timestamp = new Date(change.creation).getTime();
+                        }
+                        return unknownChange;
+                    }
+                    return undefined;
+                }
+            }).filter(change => !!change).sort((a, b) => b.timestamp - a.timestamp);
+            this.savedChanges = changes;
+            sendAction(changeStackModified({
+                saved: changes,
+                pending: []
+            }));
+            this.options.rta.attachUndoRedoStackModified(this.createOnStackChangeHandler(sendAction));
+        }
+        async deleteChange(controlId, propertyName, fileName) {
+            const filesToDelete = this.savedChanges.filter(change => fileName ? fileName === change.fileName : change.controlId === controlId && change.propertyName === propertyName).map(change => fetch(FlexChangesEndPoints.changes, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ fileName: change.fileName })
+            }));
+            await Promise.all(filesToDelete).catch(error => Log.error(error));
+        }
+        createOnStackChangeHandler(sendAction) {
+            return () => {
+                const stack = this.options.rta.getCommandStack();
+                const allCommands = stack.getCommands();
+                const executedCommands = stack.getAllExecutedCommands();
+                const inactiveCommandCount = allCommands.length - executedCommands.length;
+                const activeChanges = allCommands.map((command, i) => {
+                    let result;
+                    try {
+                        const selector = command.getProperty('selector');
+                        const changeType = command.getProperty('changeType');
+                        let value = '';
+                        switch (changeType) {
+                        case 'propertyChange':
+                            value = command.getProperty('newValue');
+                            break;
+                        case 'propertyBindingChange':
+                            value = command.getProperty('newBinding');
+                            break;
+                        default:
+                            throw new Error(`Invalid changeType ${ changeType }`);
+                        }
+                        result = {
+                            type: 'pending',
+                            controlId: selector.id,
+                            propertyName: command.getProperty('propertyName'),
+                            isActive: i >= inactiveCommandCount,
+                            value,
+                            controlName: command.getElement().getMetadata().getName().split('.').pop() ?? ''
+                        };
+                    } catch (error) {
+                        Log.error('Failed: ', error);
+                    }
+                    return result;
+                }).filter(change => !!change);
+                sendAction(changeStackModified({
+                    saved: this.savedChanges,
+                    pending: activeChanges
+                }));
+            };
+        }
+    }
+    var __exports = { __esModule: true };
+    __exports.ChangeService = ChangeService;
+    return __exports;
+});