@sap-ux/preview-middleware 0.16.92 → 0.16.94

package/README.md

@@ -12,7 +12,7 @@ When this middleware is used together with the `reload-middleware`, then the ord
   afterMiddleware: reload-middleware
 ```
 
-## Configuration Options
+## [Configuration Options](#configuration-options)
 | Option                 | Type      | Default Value    | Description                                                                                                                                                                                                                                               |
 | ---------------------- | --------- | ---------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `flp`                  |           |                  | Optional configuration object for the local Fiori launchpad                                                                                                                                                                                               |
@@ -32,7 +32,7 @@ When this middleware is used together with the `reload-middleware`, then the ord
 | `test`                 | `array`   | `undefined`      | Optional list of configurations for automated testing.                                                                                                                                                                                                    |
 | `debug`                | `boolean` | `false`          | Enables debug output                                                                                                                                                                                                                                      |
 
-### `flp.apps`
+### [`flp.apps`](#configuration-option-flpapps)
 Array of additional application configurations:
 | Option                   | Type     | Default Value  | Description                                                                                                   |
 | ------------------------ | -------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
@@ -42,7 +42,7 @@ Array of additional application configurations:
 | `intent.object`          | `string` | `(calculated)` | Optional intent object, if it is not provided then it will be calculated based on the application id          |
 | `intent.action`          | `string` | `preview`      | Optional intent action                                                                                        |
 
-### `adp.target`
+### [`adp.target`](#configuration-option-adptarget)
 | Option        | Type                           | Description                                                                                                                                     |
 | ------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
 | `url`         | `string` mandatory (local)     | Mandatory URL pointing to the backend system. *Not required if destination is provided and the proxy is running SAP Business Application Studio |
@@ -50,13 +50,13 @@ Array of additional application configurations:
 | `client`      | `string` optional              | sap-client parameter                                                                                                                            |
 | `scp`         | `boolean` optional             | If set to true the proxy will execute the required OAuth routine for the ABAP environment on SAP BTP                                            |
 
-### `rta.editors`
+### [`rta.editors`](#configuration-option-rtaeditors)
 | Option          | Type               | Description                                                                                    |
 | --------------- | -------------------| -----------------------------------------------------------------------------------------------|
 | `path`          | `string` mandatory | The mount point to be used for the editor.                                                     |
 | `developerMode` | `boolean` optional | Enables/disables the runtime adaptation developer mode (only supported for adaptation projects) |
 
-### `test`
+### [`test`](#configuration-option-test)
 | Option          | Type               | Description                                                                                                                                                                                                                                                                                                             |
 | --------------- | -------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `framework`     | `string` mandatory | Currently `OPA5`, `QUnit` (only QUnit 2.3.2 provided as third-party module via [OpenUI5](https://github.com/SAP/openui5/blob/master/THIRDPARTY.txt)/SAPUI5) and `Testsuite` are supported. `Testsuite` will generate a testsuite for all configured frameworks that can be be used with a test runner (like e.g. karma) |
@@ -65,11 +65,11 @@ Array of additional application configurations:
 | `pattern`       | `string` optional  | Optional glob pattern to find the tests. By default `/test/**/*Journey.*` is used for `OPA5` and `/test/**/*Test.*` is used for `QUnit` (n.a. for `Testsuite`)                                                                                                                                                          |
 
 
-## Usage
+## [Usage](#usage)
 The middleware can be used without configuration. However, since the middleware intercepts a few requests that might otherwise be handled by a different middleware, it is strongly recommended to run other file serving middlewares after the `preview-middleware` e.g. `backend-proxy-middleware` and `ui5-proxy-middleware` (and the corresponding middlewares in the `@sap/ux-ui5-tooling`).
 Example: [./test/fixtures/simple-app/ui5.yaml](./test/fixtures/simple-app/ui5.yaml) 
 
-### Minimal Configuration
+### [Minimal Configuration](#minimal-configuration)
 With no configuration provided, the local FLP will be available at `/test/flp.html` and the log level is `info`.
 ```Yaml
 server:
@@ -78,7 +78,7 @@ server:
     afterMiddleware: compression
 ```
 
-### Different Path and Debugging enabled
+### [Different Path and Debugging enabled](#different-path-and-debugging-enabled)
 With this configuration, the local FLP will be available at `/test/myFLP.html` and the log level is `debug`.
 ```Yaml
 server:
@@ -91,7 +91,7 @@ server:
       debug: true
 ```
 
-### Additional Applications
+### [Additional Applications](#additional-applications)
 If you want to test cross application navigation, then you can add additional applications into the local FLP.
 With this configuration, an application that is locally available in `../local-folder` will be available at `/apps/other-app` and will also be added as tile to the local FLP as well as one of the UI5 sample apps will be bound to the intent `TheOther-preview`.
 ```Yaml
@@ -113,7 +113,7 @@ server:
             action: preview
 ```
 
-### Runtime Adaptation Support
+### [Runtime Adaptation Support](#runtime-adaptation-support)
 If you want to create variants as part of your application, then you can create an additional mount point allowing to create and edit variants.
 ```Yaml
 server:
@@ -131,7 +131,7 @@ This mount path can be used with a run script that looks as follows.
 "start-variants-management": "ui5 serve --open \"test/variant-editor.html.html#app-preview\""
 ```
 
-### Test Suites
+### [Test Suites](#test-suites)
 If you want to also generate generic test suites and test runners for QUnit or OPA5 tests then you can use the following minimum configurations
 ```Yaml
 server:
@@ -145,7 +145,7 @@ server:
         - framework: OPA5
 ```
 
-### Adaptation Project
+### [Adaptation Project](#adaptation-project)
 If you want to use the middleware in an adaption project, the additional `adp` object needs to be configured. This example would preview a local adaptation project merged with its reference application from the target system at `http://sap.example` and it will ignore certification validation errors. For adaptation projects, it is also recommended to add the `rta` configuration allowing to edit the project.
 ```Yaml
 server:
@@ -170,7 +170,7 @@ When the middleware is used in an adaptation project together with a middleware
   afterMiddleware: preview-middleware
 ```
 
-### Programmatic Usage
+### [Programmatic Usage](#programmatic-usage)
 Alternatively you can use the underlying middleware fuction programmatically, e.g. for the case when you want to incorporate the `preview-middleware` functionality in your own middleware.
 
 ```typescript

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;

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

@@ -2,7 +2,8 @@ import type {
     ExternalAction,
     PendingChange,
     SavedPropertyChange,
-    UnknownSavedChange
+    UnknownSavedChange,
+    SavedControlChange
 } from '@sap-ux-private/control-property-editor-common';
 import {
     changeProperty,
@@ -16,13 +17,15 @@ import {
 } from '@sap-ux-private/control-property-editor-common';
 import { applyChange } from './flex-change';
 import type { SelectionService } from '../selection';
-
 import type { ActionSenderFunction, SubscribeFunction, UI5AdaptationOptions } from '../types';
 import type Event from 'sap/ui/base/Event';
 import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import Log from 'sap/base/Log';
 import { modeAndStackChangeHandler } from '../rta-service';
+import JsControlTreeModifier from 'sap/ui/core/util/reflection/JsControlTreeModifier';
+import FlexChange from 'sap/ui/fl/Change';
 import { getError } from '../../utils/error';
+import { isLowerThanMinimalUi5Version, getUi5Version } from '../../utils/version';
 import MessageToast from 'sap/m/MessageToast';
 import { getTextBundle } from '../../i18n';
 
@@ -94,9 +97,12 @@ function modifyRTAErrorMessage(errorMessage: string, id: string, type: string):
  * A Class of ChangeService
  */
 export class ChangeService {
-    private savedChanges: SavedPropertyChange[] = [];
+    private savedChanges: SavedPropertyChange[] | UnknownSavedChange[] | SavedControlChange[] = [];
     private changesRequiringReload = 0;
     private sendAction: (action: ExternalAction) => void;
+    private pendingChanges: PendingChange[] = [];
+    private changedFiles: Record<string, object> = {};
+    private readonly eventStack: object[] = [];
     /**
      *
      * @param options ui5 adaptation options.
@@ -159,11 +165,11 @@ export class ChangeService {
      *
      * @param pendingChanges Changes that are waiting to be saved
      */
-    private updateStack(pendingChanges: PendingChange[] = []) {
+    private updateStack() {
         this.sendAction(
             changeStackModified({
-                saved: this.savedChanges,
-                pending: pendingChanges
+                saved: this.savedChanges ?? [],
+                pending: this.pendingChanges ?? []
             })
         );
     }
@@ -172,54 +178,80 @@ export class ChangeService {
      * Fetches saved changes from the workspace and sorts them.
      */
     private async fetchSavedChanges(): Promise<void> {
+        this.changedFiles = {};
         const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${Date.now()}`);
         const savedChanges = (await savedChangesResponse.json()) as SavedChangesResponse;
         const changes = (
-            Object.keys(savedChanges ?? {})
-                .map((key): SavedPropertyChange | UnknownSavedChange | undefined => {
-                    const change: 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');
-                        }
-                        if (change.changeType !== 'propertyChange' && change.changeType !== 'propertyBindingChange') {
-                            throw new Error('Unknown Change Type');
-                        }
-                        return {
-                            type: 'saved',
-                            kind: 'property',
-                            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 ? (change.selector.type.split('.').pop() as string) : '',
-                            changeType: change.changeType
-                        };
-                    } catch (error) {
-                        // Gracefully handle change files with invalid content
-                        if (change.fileName) {
-                            const unknownChange: UnknownSavedChange = {
-                                type: 'saved',
-                                kind: 'unknown',
-                                changeType: change.changeType,
-                                fileName: change.fileName,
-                                controlId: change.selector?.id // some changes may not have selector
-                            };
-                            if (change.creation) {
-                                unknownChange.timestamp = new Date(change.creation).getTime();
+            (
+                await Promise.all(
+                    Object.keys(savedChanges ?? {}).map(
+                        async (
+                            key
+                        ): Promise<SavedPropertyChange | UnknownSavedChange | SavedControlChange | undefined> => {
+                            const change: Change = savedChanges[key];
+                            let selectorId;
+                            try {
+                                const flexObject = await this.getFlexObject(change);
+                                selectorId = await this.getControlIdByChange(flexObject);
+                                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');
+                                }
+                                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: selectorId,
+                                    propertyName: change.content.property,
+                                    value: change.content.newValue ?? change.content.newBinding,
+                                    timestamp: new Date(change.creation).getTime(),
+                                    controlName: change.selector.type
+                                        ? (change.selector.type.split('.').pop() as string)
+                                        : '',
+                                    changeType: change.changeType
+                                } as SavedPropertyChange;
+                            } catch (error) {
+                                // Gracefully handle change files with invalid content
+                                if (change.fileName) {
+                                    this.changedFiles[change.fileName] = change;
+                                    const unknownChange: UnknownSavedChange = {
+                                        type: 'saved',
+                                        kind: 'unknown',
+                                        changeType: change.changeType,
+                                        fileName: change.fileName,
+                                        timestamp: new Date(change.creation).getTime()
+                                    };
+                                    if (change.creation) {
+                                        unknownChange.timestamp = new Date(change.creation).getTime();
+                                    }
+                                    if (selectorId) {
+                                        const controlChange: SavedControlChange = {
+                                            ...unknownChange,
+                                            kind: 'control',
+                                            controlId: selectorId
+                                        };
+
+                                        return controlChange;
+                                    }
+                                    return unknownChange;
+                                }
+                                return undefined;
                             }
-                            return unknownChange;
                         }
-                        return undefined;
-                    }
-                })
-                .filter((change) => !!change) as SavedPropertyChange[]
+                    )
+                )
+            ).filter((change) => !!change) as SavedPropertyChange[]
         ).sort((a, b) => b.timestamp - a.timestamp);
         this.savedChanges = changes;
     }
@@ -232,11 +264,19 @@ export class ChangeService {
      */
     public async deleteChange(controlId: string, propertyName: string, fileName?: string): Promise<void> {
         const filesToDelete = this.savedChanges
-            .filter((change) =>
-                fileName
-                    ? fileName === change.fileName
-                    : change.controlId === controlId && change.propertyName === propertyName
-            )
+            .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',
@@ -261,67 +301,101 @@ export class ChangeService {
      */
     private createOnStackChangeHandler(): (event: Event) => Promise<void> {
         const handleStackChange = modeAndStackChangeHandler(this.sendAction, this.options.rta);
-        return async (): Promise<void> => {
+        return async (event): Promise<void> => {
+            const pendingChanges: PendingChange[] = [];
+            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: PendingChange[] = [];
-            allCommands.forEach((command: FlexCommand, i): void => {
+            let i: number, command: FlexCommand;
+            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): boolean => !!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): boolean => !!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();
         };
     }
 
-    private prepareChangeType(
+    /**
+     * Handles a command by preparing a pending change and adding it to the list of pending changes.
+     *
+     * @param {FlexCommand} command - The command to process.
+     * @param {number} inactiveCommandCount - The number of inactive commands.
+     * @param {number} index - The index of the current command being processed.
+     * @param {PendingChange[]} pendingChanges - The list of pending changes to update.
+     * @returns {Promise<void>} A promise that resolves when the command is handled.
+     */
+    private async handleCommand(
+        command: FlexCommand,
+        inactiveCommandCount: number,
+        index: number,
+        pendingChanges: PendingChange[]
+    ): Promise<void> {
+        const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
+        if (pendingChange) {
+            pendingChanges.push(pendingChange);
+        }
+    }
+
+    /**
+     * Prepares the type of change based on the command and other parameters.
+     *
+     * @param {FlexCommand} command - The command to process.
+     * @param {number} inactiveCommandCount - The number of inactive commands.
+     * @param {number} index - The index of the current command being processed.
+     * @returns {Promise<PendingChange | undefined>} - A promise that resolves to a `PendingChange` or `undefined`.
+     */
+    private async prepareChangeType(
         command: FlexCommand,
         inactiveCommandCount: number,
         index: number
-    ): PendingChange | undefined {
+    ): Promise<PendingChange | undefined> {
         let result: PendingChange;
         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;
         }
 
@@ -333,8 +407,9 @@ export class ChangeService {
                 value = command.getProperty('newBinding') as string;
                 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',
@@ -350,15 +425,18 @@ export class ChangeService {
             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;
@@ -414,4 +492,84 @@ export class ChangeService {
             () => command.getParent()?.getElement().getId()
         ]) as string | undefined;
     }
+
+    /**
+     * Get element id by change.
+     *
+     * @param change to be executed for creating change
+     * @returns element id or empty string
+     */
+    private async getControlIdByChange(change: FlexChange<ChangeContent>): Promise<string | undefined> {
+        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 import('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: { affectedControls?: [string] } = 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;
+        }
+    }
+
+    /**
+     * Sync outline changes to place modification markers when outline is changed.
+     *
+     * @returns void
+     */
+    public async syncOutlineChanges(): Promise<void> {
+        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();
+    }
+
+    /**
+     * Get FlexObject from change object based on UI5 version.
+     *
+     * @param change change object
+     * @returns FlexChange
+     */
+    private async getFlexObject(change: object): Promise<FlexChange<ChangeContent>> {
+        if (isLowerThanMinimalUi5Version(await getUi5Version(), { major: 1, minor: 109 })) {
+            const Change = (await import('sap/ui/fl/Change')).default;
+            return new Change(change);
+        }
+
+        const FlexObjectFactory = (await import('sap/ui/fl/apply/_internal/flexObjects/FlexObjectFactory')).default;
+        return FlexObjectFactory.createFromFileContent(change) as FlexChange<ChangeContent>;
+    }
 }

package/dist/client/cpe/init.js

@@ -41,7 +41,7 @@ sap.ui.define([
         const changesService = new ChangeService({ rta }, selectionService);
         const connectorService = new WorkspaceConnectorService();
         const rtaService = new RtaService(rta);
-        const outlineService = new OutlineService(rta);
+        const outlineService = new OutlineService(rta, changesService);
         const quickActionService = new QuickActionService(rta, outlineService, registries);
         const services = [
             connectorService,

package/dist/client/cpe/init.ts

@@ -45,7 +45,7 @@ export default function init(
     const changesService = new ChangeService({ rta }, selectionService);
     const connectorService = new WorkspaceConnectorService();
     const rtaService = new RtaService(rta);
-    const outlineService = new OutlineService(rta);
+    const outlineService = new OutlineService(rta, changesService);
     const quickActionService = new QuickActionService(rta, outlineService, registries);
     const services: Service[] = [
         connectorService,

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

@@ -15,9 +15,10 @@ sap.ui.define([
     const transformNodes = ___nodes['transformNodes'];
     const OUTLINE_CHANGE_EVENT = 'OUTLINE_CHANGED';
     class OutlineService extends EventTarget {
-        constructor(rta) {
+        constructor(rta, changeService) {
             super();
             this.rta = rta;
+            this.changeService = changeService;
         }
         async init(sendAction) {
             const outline = await this.rta.getService('outline');
@@ -32,6 +33,7 @@ sap.ui.define([
                     const viewNodes = await outline.get();
                     const controlIndex = {};
                     const outlineNodes = await transformNodes(viewNodes, scenario, reuseComponentsIds, controlIndex);
+                    await this.changeService.syncOutlineChanges();
                     const event = new CustomEvent(OUTLINE_CHANGE_EVENT, { detail: { controlIndex } });
                     this.dispatchEvent(event);
                     sendAction(outlineChanged(outlineNodes));

package/dist/client/cpe/outline/service.ts

@@ -1,6 +1,7 @@
 import Log from 'sap/base/Log';
 import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
 import type RTAOutlineService from 'sap/ui/rta/command/OutlineService';
+import type { ChangeService } from '../changes/service';
 
 import type { ExternalAction } from '@sap-ux-private/control-property-editor-common';
 import { outlineChanged, SCENARIO, showMessage } from '@sap-ux-private/control-property-editor-common';
@@ -19,7 +20,7 @@ export interface OutlineChangedEventDetail {
  * A Class of WorkspaceConnectorService
  */
 export class OutlineService extends EventTarget {
-    constructor(private rta: RuntimeAuthoring) {
+    constructor(private readonly rta: RuntimeAuthoring, private readonly changeService: ChangeService) {
         super();
     }
 
@@ -41,6 +42,7 @@ export class OutlineService extends EventTarget {
                 const viewNodes = await outline.get();
                 const controlIndex: ControlTreeIndex = {};
                 const outlineNodes = await transformNodes(viewNodes, scenario, reuseComponentsIds, controlIndex);
+                await this.changeService.syncOutlineChanges();
 
                 const event = new CustomEvent(OUTLINE_CHANGE_EVENT, {
                     detail: {

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

@@ -8,7 +8,7 @@ sap.ui.define((function () { 'use strict';
 
 	(function (exports) {
 		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.setApplicationRequiresReload = exports.executeQuickAction = exports.updateQuickAction = exports.quickActionListChanged = exports.save = exports.redo = exports.undo = exports.appLoaded = exports.setSaveEnablement = exports.setUndoRedoEnablement = exports.applicationModeChanged = exports.setAppMode = exports.storageFileChanged = exports.reloadApplication = exports.showMessage = exports.changeStackModified = exports.propertyChangeFailed = exports.propertyChanged = exports.changeProperty = exports.outlineChanged = exports.deletePropertyChanges = exports.addExtensionPoint = exports.selectControl = exports.controlSelected = exports.iconsLoaded = exports.EXTERNAL_ACTION_PREFIX = exports.NESTED_QUICK_ACTION_KIND = exports.SIMPLE_QUICK_ACTION_KIND = exports.UNKNOWN_CHANGE_KIND = exports.PROPERTY_CHANGE_KIND = exports.SAVED_CHANGE_TYPE = exports.PENDING_CHANGE_TYPE = exports.SCENARIO = 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.setApplicationRequiresReload = exports.executeQuickAction = exports.updateQuickAction = exports.quickActionListChanged = exports.save = exports.redo = exports.undo = exports.appLoaded = exports.setSaveEnablement = exports.setUndoRedoEnablement = exports.applicationModeChanged = exports.setAppMode = exports.storageFileChanged = exports.reloadApplication = exports.showMessage = exports.changeStackModified = exports.propertyChangeFailed = exports.propertyChanged = exports.changeProperty = exports.outlineChanged = exports.deletePropertyChanges = exports.addExtensionPoint = exports.selectControl = exports.controlSelected = exports.iconsLoaded = exports.EXTERNAL_ACTION_PREFIX = exports.NESTED_QUICK_ACTION_KIND = exports.SIMPLE_QUICK_ACTION_KIND = exports.CONTROL_CHANGE_KIND = exports.UNKNOWN_CHANGE_KIND = exports.PROPERTY_CHANGE_KIND = exports.SAVED_CHANGE_TYPE = exports.PENDING_CHANGE_TYPE = exports.SCENARIO = 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';
@@ -27,6 +27,7 @@ sap.ui.define((function () { 'use strict';
 		exports.SAVED_CHANGE_TYPE = 'saved';
 		exports.PROPERTY_CHANGE_KIND = 'property';
 		exports.UNKNOWN_CHANGE_KIND = 'unknown';
+		exports.CONTROL_CHANGE_KIND = 'control';
 		exports.SIMPLE_QUICK_ACTION_KIND = 'simple';
 		exports.NESTED_QUICK_ACTION_KIND = 'nested';
 		/**

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.16.92",
+  "version": "0.16.94",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -29,7 +29,7 @@
     "@sap-ux/feature-toggle": "0.2.2",
     "@sap-ux/btp-utils": "0.15.2",
     "@sap-ux/adp-tooling": "0.12.62",
-    "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.5.21",
+    "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.5.22",
     "@sap-ux/project-access": "1.28.2"
   },
   "devDependencies": {
@@ -46,7 +46,7 @@
     "supertest": "6.3.3",
     "@sap-ux-private/playwright": "0.1.0",
     "dotenv": "16.3.1",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.11.17",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.11.18",
     "@sap-ux/axios-extension": "1.16.7",
     "@sap-ux/store": "0.9.2",
     "@sap-ux/ui5-info": "0.8.1",