@sap-ux/preview-middleware 0.16.91 → 0.16.93

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';
 		/**