@sap-ux/preview-middleware 0.16.91 → 0.16.93

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

@@ -4,11 +4,26 @@ sap.ui.define([
     './flex-change',
     'sap/base/Log',
     '../rta-service',
+    'sap/ui/core/util/reflection/JsControlTreeModifier',
     '../../utils/error',
+    '../../utils/version',
     'sap/m/MessageToast',
     '../../i18n'
-], function (___sap_ux_private_control_property_editor_common, ___flex_change, Log, ___rta_service, ____utils_error, MessageToast, ____i18n) {
+], function (___sap_ux_private_control_property_editor_common, ___flex_change, Log, ___rta_service, JsControlTreeModifier, ____utils_error, ____utils_version, MessageToast, ____i18n) {
     'use strict';
+    function __ui5_require_async(path) {
+        return new Promise(function (resolve, reject) {
+            sap.ui.require([path], function (module) {
+                if (!(module && module.__esModule)) {
+                    module = module === null || !(typeof module === 'object' && path.endsWith('/library')) ? { default: module } : module;
+                    Object.defineProperty(module, '__esModule', { value: true });
+                }
+                resolve(module);
+            }, function (err) {
+                reject(err);
+            });
+        });
+    }
     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'];
@@ -20,6 +35,8 @@ sap.ui.define([
     const applyChange = ___flex_change['applyChange'];
     const modeAndStackChangeHandler = ___rta_service['modeAndStackChangeHandler'];
     const getError = ____utils_error['getError'];
+    const isLowerThanMinimalUi5Version = ____utils_version['isLowerThanMinimalUi5Version'];
+    const getUi5Version = ____utils_version['getUi5Version'];
     const getTextBundle = ____i18n['getTextBundle'];
     function assertProperties(properties, target) {
         for (const property of properties) {
@@ -45,6 +62,9 @@ sap.ui.define([
     class ChangeService {
         savedChanges = [];
         changesRequiringReload = 0;
+        pendingChanges = [];
+        changedFiles = {};
+        eventStack = [];
         constructor(options, selectionService) {
             this.options = options;
             this.selectionService = selectionService;
@@ -86,18 +106,21 @@ sap.ui.define([
             this.options.rta.attachUndoRedoStackModified(this.createOnStackChangeHandler());
         }
         updateStack() {
-            let pendingChanges = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
             this.sendAction(changeStackModified({
-                saved: this.savedChanges,
-                pending: pendingChanges
+                saved: this.savedChanges ?? [],
+                pending: this.pendingChanges ?? []
             }));
         }
         async fetchSavedChanges() {
+            this.changedFiles = {};
             const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${ Date.now() }`);
             const savedChanges = await savedChangesResponse.json();
-            const changes = Object.keys(savedChanges ?? {}).map(key => {
+            const changes = (await Promise.all(Object.keys(savedChanges ?? {}).map(async key => {
                 const change = savedChanges[key];
+                let selectorId;
                 try {
+                    const flexObject = await this.getFlexObject(change);
+                    selectorId = await this.getControlIdByChange(flexObject);
                     assertChange(change);
                     if ([
                             change.content.newValue,
@@ -108,11 +131,12 @@ sap.ui.define([
                     if (change.changeType !== 'propertyChange' && change.changeType !== 'propertyBindingChange') {
                         throw new Error('Unknown Change Type');
                     }
+                    this.changedFiles[change.fileName] = change;
                     return {
                         type: 'saved',
                         kind: 'property',
                         fileName: change.fileName,
-                        controlId: change.selector.id,
+                        controlId: selectorId,
                         propertyName: change.content.property,
                         value: change.content.newValue ?? change.content.newBinding,
                         timestamp: new Date(change.creation).getTime(),
@@ -121,25 +145,44 @@ sap.ui.define([
                     };
                 } catch (error) {
                     if (change.fileName) {
+                        this.changedFiles[change.fileName] = change;
                         const unknownChange = {
                             type: 'saved',
                             kind: 'unknown',
                             changeType: change.changeType,
                             fileName: change.fileName,
-                            controlId: change.selector?.id
+                            timestamp: new Date(change.creation).getTime()
                         };
                         if (change.creation) {
                             unknownChange.timestamp = new Date(change.creation).getTime();
                         }
+                        if (selectorId) {
+                            const controlChange = {
+                                ...unknownChange,
+                                kind: 'control',
+                                controlId: selectorId
+                            };
+                            return controlChange;
+                        }
                         return unknownChange;
                     }
                     return undefined;
                 }
-            }).filter(change => !!change).sort((a, b) => b.timestamp - a.timestamp);
+            }))).filter(change => !!change).sort((a, b) => b.timestamp - a.timestamp);
             this.savedChanges = changes;
         }
         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, {
+            const filesToDelete = this.savedChanges.filter(change => {
+                if (fileName) {
+                    return fileName === change.fileName;
+                }
+                if (change.kind === 'property') {
+                    return change.controlId === controlId && change.propertyName === propertyName;
+                }
+                if (change.kind === 'control') {
+                    return change.controlId === controlId;
+                }
+            }).map(change => fetch(FlexChangesEndPoints.changes, {
                 method: 'DELETE',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ fileName: change.fileName })
@@ -150,53 +193,61 @@ sap.ui.define([
         }
         createOnStackChangeHandler() {
             const handleStackChange = modeAndStackChangeHandler(this.sendAction, this.options.rta);
-            return async () => {
+            return async event => {
+                const pendingChanges = [];
+                this.eventStack.push(event);
                 const stack = this.options.rta.getCommandStack();
                 const allCommands = stack.getCommands();
                 const executedCommands = stack.getAllExecutedCommands();
                 const inactiveCommandCount = allCommands.length - executedCommands.length;
-                let activeChanges = [];
-                allCommands.forEach((command, i) => {
+                let i, command;
+                for ([i, command] of allCommands.entries()) {
                     try {
                         if (typeof command.getCommands === 'function') {
                             const subCommands = command.getCommands();
-                            subCommands.forEach(subCommand => {
-                                const pendingChange = this.prepareChangeType(subCommand, inactiveCommandCount, i);
-                                if (pendingChange) {
-                                    activeChanges.push(pendingChange);
-                                }
-                            });
-                        } else {
-                            const pendingChange = this.prepareChangeType(command, inactiveCommandCount, i);
-                            if (pendingChange) {
-                                activeChanges.push(pendingChange);
+                            for (const subCommand of subCommands) {
+                                await this.handleCommand(subCommand, inactiveCommandCount, i, pendingChanges);
                             }
+                        } else {
+                            await this.handleCommand(command, inactiveCommandCount, i, pendingChanges);
                         }
                     } catch (error) {
                         Log.error('CPE: Change creation Failed', getError(error));
                     }
-                });
-                activeChanges = activeChanges.filter(change => !!change);
-                const changesRequiringReload = activeChanges.reduce((sum, change) => change.changeType === 'appdescr_fe_changePageConfiguration' ? sum + 1 : sum, 0);
-                if (changesRequiringReload > this.changesRequiringReload) {
-                    const resourceBundle = await getTextBundle();
-                    MessageToast.show(resourceBundle.getText('CPE_CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_MESSAGE'), { duration: 8000 });
-                    this.sendAction(setApplicationRequiresReload(changesRequiringReload > 0));
                 }
-                this.changesRequiringReload = changesRequiringReload;
+                const resourceBundle = await getTextBundle();
+                const eventIndex = this.eventStack.indexOf(event);
+                if (this.eventStack.length - 1 === eventIndex) {
+                    this.pendingChanges = pendingChanges.filter(change => !!change);
+                    const changesRequiringReload = this.pendingChanges.reduce((sum, change) => change.changeType === 'appdescr_fe_changePageConfiguration' ? sum + 1 : sum, 0);
+                    if (changesRequiringReload > this.changesRequiringReload) {
+                        MessageToast.show(resourceBundle.getText('CPE_CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_MESSAGE'), { duration: 8000 });
+                        this.sendAction(setApplicationRequiresReload(changesRequiringReload > 0));
+                    }
+                    this.changesRequiringReload = changesRequiringReload;
+                }
+                this.eventStack.splice(eventIndex, 1);
                 if (Array.isArray(allCommands) && allCommands.length === 0) {
+                    this.pendingChanges = [];
                     await this.fetchSavedChanges();
                 }
-                this.updateStack(activeChanges);
+                this.updateStack();
                 handleStackChange();
             };
         }
-        prepareChangeType(command, inactiveCommandCount, index) {
+        async handleCommand(command, inactiveCommandCount, index, pendingChanges) {
+            const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
+            if (pendingChange) {
+                pendingChanges.push(pendingChange);
+            }
+        }
+        async prepareChangeType(command, inactiveCommandCount, index) {
             let result;
             let value = '';
-            const selectorId = this.getCommandSelectorId(command);
+            const change = command.getPreparedChange();
+            const selectorId = typeof change.getSelector === 'function' ? await this.getControlIdByChange(change) : this.getCommandSelectorId(command);
             const changeType = this.getCommandChangeType(command);
-            if (!selectorId || !changeType) {
+            if (!changeType) {
                 return undefined;
             }
             switch (changeType) {
@@ -207,8 +258,8 @@ sap.ui.define([
                 value = command.getProperty('newBinding');
                 break;
             }
-            const {fileName} = command.getPreparedChange().getDefinition();
-            if (changeType === 'propertyChange' || changeType === 'propertyBindingChange') {
+            const {fileName} = change.getDefinition();
+            if ((changeType === 'propertyChange' || changeType === 'propertyBindingChange') && selectorId) {
                 result = {
                     type: 'pending',
                     kind: 'property',
@@ -224,12 +275,17 @@ sap.ui.define([
                 result = {
                     type: 'pending',
                     kind: 'unknown',
-                    controlId: selectorId,
                     changeType,
                     isActive: index >= inactiveCommandCount,
-                    controlName: changeType === 'addXMLAtExtensionPoint' ? command.getSelector().name ?? '' : command.getElement().getMetadata().getName().split('.').pop() ?? '',
                     fileName
                 };
+                if (selectorId) {
+                    result = {
+                        ...result,
+                        kind: 'control',
+                        controlId: selectorId
+                    };
+                }
             }
             return result;
         }
@@ -262,6 +318,56 @@ sap.ui.define([
                 () => command.getParent()?.getElement().getId()
             ]);
         }
+        async getControlIdByChange(change) {
+            const appComponent = this.options.rta.getRootControlInstance();
+            const selector = typeof change.getSelector === 'function' ? change.getSelector() : undefined;
+            const changeType = change.getChangeType();
+            const layer = change.getLayer();
+            if (!selector?.id) {
+                return;
+            }
+            try {
+                let control = JsControlTreeModifier.bySelector(selector, appComponent);
+                if (!control) {
+                    return selector.id;
+                }
+                const changeHandlerAPI = (await __ui5_require_async('sap/ui/fl/write/api/ChangesWriteAPI')).default;
+                const changeHandler = await changeHandlerAPI.getChangeHandler({
+                    changeType,
+                    element: control,
+                    modifier: JsControlTreeModifier,
+                    layer
+                });
+                if (changeHandler && typeof changeHandler.getChangeVisualizationInfo === 'function') {
+                    const result = await changeHandler.getChangeVisualizationInfo(change, appComponent);
+                    return JsControlTreeModifier.getControlIdBySelector(result?.affectedControls?.[0] ?? selector, appComponent);
+                }
+                return JsControlTreeModifier.getControlIdBySelector(selector, appComponent);
+            } catch (error) {
+                Log.error('Getting element ID from change has failed:', getError(error));
+                return selector.id;
+            }
+        }
+        async syncOutlineChanges() {
+            for (const change of this.savedChanges) {
+                if (change.kind !== 'unknown') {
+                    const flexObject = await this.getFlexObject(this.changedFiles[change.fileName]);
+                    change.controlId = await this.getControlIdByChange(flexObject) ?? '';
+                }
+            }
+            this.updateStack();
+        }
+        async getFlexObject(change) {
+            if (isLowerThanMinimalUi5Version(await getUi5Version(), {
+                    major: 1,
+                    minor: 109
+                })) {
+                const Change = (await __ui5_require_async('sap/ui/fl/Change')).default;
+                return new Change(change);
+            }
+            const FlexObjectFactory = (await __ui5_require_async('sap/ui/fl/apply/_internal/flexObjects/FlexObjectFactory')).default;
+            return FlexObjectFactory.createFromFileContent(change);
+        }
     }
     var __exports = { __esModule: true };
     __exports.ChangeService = ChangeService;