@sap-ux/preview-middleware 0.23.47 → 0.23.49

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

@@ -1,386 +1,511 @@
-'use strict';
-sap.ui.define([
-    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
-    'sap/base/Log',
-    '../../i18n',
-    '../../utils/additional-change-info',
-    '../../utils/core',
-    '../../utils/error',
-    '../../utils/info-center-message',
-    '../rta-service',
-    './flex-change',
-    './generic-change'
-], function (___sap_ux_private_control_property_editor_common, Log, ____i18n, ____utils_additional_change_info, ____utils_core, ____utils_error, ____utils_info_center_message, ___rta_service, ___flex_change, ___generic_change) {
-    'use strict';
-    const changeProperty = ___sap_ux_private_control_property_editor_common['changeProperty'];
-    const changeStackModified = ___sap_ux_private_control_property_editor_common['changeStackModified'];
-    const deletePropertyChanges = ___sap_ux_private_control_property_editor_common['deletePropertyChanges'];
-    const FlexChangesEndPoints = ___sap_ux_private_control_property_editor_common['FlexChangesEndPoints'];
-    const GENERIC_CHANGE_KIND = ___sap_ux_private_control_property_editor_common['GENERIC_CHANGE_KIND'];
-    const MessageBarType = ___sap_ux_private_control_property_editor_common['MessageBarType'];
-    const PENDING_CHANGE_TYPE = ___sap_ux_private_control_property_editor_common['PENDING_CHANGE_TYPE'];
-    const propertyChangeFailed = ___sap_ux_private_control_property_editor_common['propertyChangeFailed'];
-    const reloadApplication = ___sap_ux_private_control_property_editor_common['reloadApplication'];
-    const save = ___sap_ux_private_control_property_editor_common['save'];
-    const setApplicationRequiresReload = ___sap_ux_private_control_property_editor_common['setApplicationRequiresReload'];
-    const UNKNOWN_CHANGE_KIND = ___sap_ux_private_control_property_editor_common['UNKNOWN_CHANGE_KIND'];
-    const getTextBundle = ____i18n['getTextBundle'];
-    const setAdditionalChangeInfo = ____utils_additional_change_info['setAdditionalChangeInfo'];
-    const getControlById = ____utils_core['getControlById'];
-    const isA = ____utils_core['isA'];
-    const getError = ____utils_error['getError'];
-    const sendInfoCenterMessage = ____utils_info_center_message['sendInfoCenterMessage'];
-    const modeAndStackChangeHandler = ___rta_service['modeAndStackChangeHandler'];
-    const applyChange = ___flex_change['applyChange'];
-    const GENERIC_CHANGE_HANDLER = ___generic_change['GENERIC_CHANGE_HANDLER'];
-    const getControlIdByChange = ___generic_change['getControlIdByChange'];
-    const getFlexObject = ___generic_change['getFlexObject'];
-    const TITLE_MAP = { appdescr_app_addAnnotationsToOData: 'Add New Annotation File' };
-    const STACK_CHANGE_EVENT = 'STACK_CHANGED';
-    function modifyRTAErrorMessage(errorMessage, id, type) {
-        return errorMessage.replace('Error: Applying property changes failed:', '').replace(`${ type }#${ id }`, '');
+"use strict";
+
+sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "sap/base/Log", "../../i18n", "../../utils/additional-change-info", "../../utils/core", "../../utils/error", "../../utils/info-center-message", "../rta-service", "./flex-change", "./generic-change"], function (___sap_ux_private_control_property_editor_common, Log, ____i18n, ____utils_additional_change_info, ____utils_core, ____utils_error, ____utils_info_center_message, ___rta_service, ___flex_change, ___generic_change) {
+  "use strict";
+
+  const changeProperty = ___sap_ux_private_control_property_editor_common["changeProperty"];
+  const changeStackModified = ___sap_ux_private_control_property_editor_common["changeStackModified"];
+  const deletePropertyChanges = ___sap_ux_private_control_property_editor_common["deletePropertyChanges"];
+  const FlexChangesEndPoints = ___sap_ux_private_control_property_editor_common["FlexChangesEndPoints"];
+  const GENERIC_CHANGE_KIND = ___sap_ux_private_control_property_editor_common["GENERIC_CHANGE_KIND"];
+  const MessageBarType = ___sap_ux_private_control_property_editor_common["MessageBarType"];
+  const PENDING_CHANGE_TYPE = ___sap_ux_private_control_property_editor_common["PENDING_CHANGE_TYPE"];
+  const propertyChangeFailed = ___sap_ux_private_control_property_editor_common["propertyChangeFailed"];
+  const reloadApplication = ___sap_ux_private_control_property_editor_common["reloadApplication"];
+  const save = ___sap_ux_private_control_property_editor_common["save"];
+  const setApplicationRequiresReload = ___sap_ux_private_control_property_editor_common["setApplicationRequiresReload"];
+  const UNKNOWN_CHANGE_KIND = ___sap_ux_private_control_property_editor_common["UNKNOWN_CHANGE_KIND"];
+  const getTextBundle = ____i18n["getTextBundle"];
+  const setAdditionalChangeInfo = ____utils_additional_change_info["setAdditionalChangeInfo"];
+  const getControlById = ____utils_core["getControlById"];
+  const isA = ____utils_core["isA"];
+  const getError = ____utils_error["getError"];
+  const sendInfoCenterMessage = ____utils_info_center_message["sendInfoCenterMessage"];
+  const modeAndStackChangeHandler = ___rta_service["modeAndStackChangeHandler"];
+  const applyChange = ___flex_change["applyChange"];
+  const GENERIC_CHANGE_HANDLER = ___generic_change["GENERIC_CHANGE_HANDLER"];
+  const getControlIdByChange = ___generic_change["getControlIdByChange"];
+  const getFlexObject = ___generic_change["getFlexObject"];
+  const TITLE_MAP = {
+    appdescr_app_addAnnotationsToOData: 'Add New Annotation File'
+  };
+  const STACK_CHANGE_EVENT = 'STACK_CHANGED';
+  /**
+   * Modify rta message.
+   *
+   * @param errorMessage error message to be replaced
+   * @param id - control id
+   * @param type - control type
+   * @returns string
+   */
+  function modifyRTAErrorMessage(errorMessage, id, type) {
+    return errorMessage.replace('Error: Applying property changes failed:', '').replace(`${type}#${id}`, '');
+  }
+
+  /**
+   * A Class of ChangeService
+   */
+  class ChangeService extends EventTarget {
+    savedChanges = [];
+    changesRequiringReload = 0;
+    pendingChanges = [];
+    changedFiles = {};
+    eventStack = [];
+    pendingConfigChangeMap = (() => new Map())();
+    configPropertyControlIdMap = (() => new Map())();
+    /**
+     *
+     * @param options ui5 adaptation options.
+     * @param ui5 facade for ui5 framework methods.
+     * @param selectionService selection service instance.
+     */
+    constructor(options) {
+      super();
+      this.options = options;
     }
-    class ChangeService extends EventTarget {
-        savedChanges = [];
-        changesRequiringReload = 0;
-        pendingChanges = [];
-        changedFiles = {};
-        eventStack = [];
-        pendingConfigChangeMap = ((() => new Map())());
-        configPropertyControlIdMap = ((() => new Map())());
-        constructor(options) {
-            super();
-            this.options = options;
-        }
-        async init(sendAction, subscribe) {
-            this.sendAction = sendAction;
-            subscribe(async action => {
-                if (changeProperty.match(action)) {
-                    try {
-                        await applyChange(this.options, action.payload);
-                    } catch (exception) {
-                        let name = '';
-                        const id = action.payload.controlId || '';
-                        const control = sap.ui.getCore().byId(id);
-                        if (control) {
-                            name = control.getMetadata().getName();
-                        }
-                        const error = getError(exception);
-                        const modifiedMessage = modifyRTAErrorMessage(error.toString(), id, name);
-                        const errorMessage = modifiedMessage || `RTA Exception applying expression "${ action.payload.value }"`;
-                        await sendInfoCenterMessage({
-                            title: { key: 'CHANGE_CREATION_FAILED_TITLE' },
-                            description: errorMessage,
-                            type: MessageBarType.error
-                        });
-                        const propertyChangeFailedAction = propertyChangeFailed({
-                            ...action.payload,
-                            errorMessage
-                        });
-                        sendAction(propertyChangeFailedAction);
-                    }
-                } else if (deletePropertyChanges.match(action)) {
-                    await this.deleteChange(action.payload.controlId, action.payload.propertyName, action.payload.fileName);
-                } else if (reloadApplication.match(action)) {
-                    this.sendAction(setApplicationRequiresReload(false));
-                } else if (save.match(action)) {
-                    this.changesRequiringReload = 0;
-                    this.sendAction(setApplicationRequiresReload(false));
-                }
+
+    /**
+     * Initializes change service.
+     *
+     * @param sendAction action sender function
+     * @param subscribe subscriber function
+     */
+    async init(sendAction, subscribe) {
+      this.sendAction = sendAction;
+      subscribe(async action => {
+        if (changeProperty.match(action)) {
+          try {
+            await applyChange(this.options, action.payload);
+          } catch (exception) {
+            // send error information
+            let name = '';
+            const id = action.payload.controlId || '';
+            const control = sap.ui.getCore().byId(id);
+            if (control) {
+              name = control.getMetadata().getName();
+            }
+            const error = getError(exception);
+            // eslint-disable-next-line  @typescript-eslint/no-unsafe-call
+            const modifiedMessage = modifyRTAErrorMessage(error.toString(), id, name);
+            const errorMessage = modifiedMessage || `RTA Exception applying expression "${action.payload.value}"`;
+            await sendInfoCenterMessage({
+              title: {
+                key: 'CHANGE_CREATION_FAILED_TITLE'
+              },
+              description: errorMessage,
+              type: MessageBarType.error
             });
-            await this.fetchSavedChanges();
-            this.updateStack();
-            this.options.rta.attachUndoRedoStackModified(this.createOnStackChangeHandler());
-        }
-        updateStack() {
-            this.sendAction(changeStackModified({
-                saved: this.savedChanges ?? [],
-                pending: this.pendingChanges ?? []
-            }));
-        }
-        isGenericChange(change) {
-            return change.changeType === 'appdescr_app_addAnnotationsToOData' || change.changeType === 'rename' || change.changeType === 'moveControls' || change.changeType === 'addXML' || change.changeType === 'propertyChange' || change.changeType === 'propertyBindingChange' || change.changeType === 'appdescr_fe_changePageConfiguration' || change.changeType === 'appdescr_ui_generic_app_changePageConfiguration';
-        }
-        async fetchSavedChanges() {
-            this.changedFiles = {};
-            const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${ Date.now() }`);
-            const savedChanges = await savedChangesResponse.json();
-            const textBundle = await getTextBundle();
-            const changes = (await Promise.all(Object.keys(savedChanges ?? {}).map(async key => {
-                const change = savedChanges[key];
-                try {
-                    const handler = GENERIC_CHANGE_HANDLER[change.changeType];
-                    if (this.isGenericChange(change)) {
-                        const {
-                            properties,
-                            changeTitle,
-                            controlId,
-                            changeType: type,
-                            subtitle
-                        } = await handler(change, {
-                            textBundle,
-                            appComponent: this.options.rta.getRootControlInstance(),
-                            configPropertyControlIdMap: this.configPropertyControlIdMap
-                        });
-                        this.changedFiles[change.fileName] = change;
-                        return {
-                            kind: GENERIC_CHANGE_KIND,
-                            type: 'saved',
-                            fileName: change.fileName,
-                            ...subtitle && { subtitle },
-                            changeType: type ?? change.changeType,
-                            timestamp: new Date(change.creation).getTime(),
-                            ...controlId && { controlId },
-                            properties,
-                            title: textBundle.getText(changeTitle)
-                        };
-                    }
-                    throw new Error('Unknown change type');
-                } catch (error) {
-                    const flexObject = await getFlexObject(change);
-                    const selectorId = await getControlIdByChange(flexObject, this.options.rta.getRootControlInstance());
-                    if (change.fileName) {
-                        this.changedFiles[change.fileName] = change;
-                        const unknownChange = {
-                            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 = {
-                                ...unknownChange,
-                                kind: 'control',
-                                controlId: selectorId
-                            };
-                            return controlChange;
-                        }
-                        return unknownChange;
-                    }
-                    return undefined;
-                }
-            }))).filter(change => !!change).sort((a, b) => b.timestamp - a.timestamp);
-            this.savedChanges = changes;
-        }
-        async deleteChange(controlId, propertyName, fileName) {
-            const filesToDelete = this.savedChanges.filter(change => {
-                if (fileName) {
-                    return fileName === change.fileName;
-                }
-                if (change.kind === 'control') {
-                    return change.controlId === controlId;
-                }
-                return false;
-            }).map(change => fetch(FlexChangesEndPoints.changes, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ fileName: change.fileName })
-            }));
-            await Promise.all(filesToDelete).catch(error => Log.error(getError(error).message));
-            await this.fetchSavedChanges();
-            this.updateStack();
+            const propertyChangeFailedAction = propertyChangeFailed({
+              ...action.payload,
+              errorMessage
+            });
+            sendAction(propertyChangeFailedAction);
+          }
+        } else if (deletePropertyChanges.match(action)) {
+          await this.deleteChange(action.payload.controlId, action.payload.propertyName, action.payload.fileName);
+        } else if (reloadApplication.match(action)) {
+          this.sendAction(setApplicationRequiresReload(false));
+        } else if (save.match(action)) {
+          this.changesRequiringReload = 0;
+          this.sendAction(setApplicationRequiresReload(false));
         }
-        createOnStackChangeHandler() {
-            const handleStackChange = modeAndStackChangeHandler(this.sendAction, this.options.rta);
-            return async event => {
-                const pendingChanges = [];
-                this.eventStack.push(event);
-                const stack = this.options.rta.getCommandStack();
-                const allCommands = stack.getCommands();
-                const executedCommands = stack.getAllExecutedCommands();
-                const allCommandsFlattened = allCommands.flatMap(command => typeof command.getCommands === 'function' ? command.getCommands() : [command]);
-                const activeCommandCount = allCommandsFlattened.length - executedCommands.length;
-                this.pendingConfigChangeMap = new Map();
-                let i = 0;
-                for (const command of allCommands) {
-                    try {
-                        if (typeof command.getCommands === 'function') {
-                            const subCommands = command.getCommands();
-                            for (const subCommand of subCommands) {
-                                await this.handleCommand(subCommand, activeCommandCount, i, pendingChanges);
-                                i++;
-                            }
-                        } else {
-                            await this.handleCommand(command, activeCommandCount, i, pendingChanges);
-                            i++;
-                        }
-                    } catch (error) {
-                        Log.error('CPE: Change creation Failed', getError(error));
-                    }
-                }
-                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) => isGenericConfigChange(change) ? sum + 1 : sum, 0);
-                    if (changesRequiringReload > this.changesRequiringReload) {
-                        await sendInfoCenterMessage({
-                            title: { key: 'CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_TITLE' },
-                            description: { key: 'CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_DESCRIPTION' },
-                            type: MessageBarType.info
-                        });
-                        this.sendAction(setApplicationRequiresReload(changesRequiringReload > 0));
-                    }
-                    this.changesRequiringReload = changesRequiringReload;
-                }
-                this.eventStack.splice(eventIndex, 1);
-                if (Array.isArray(allCommands) && allCommands.length === 0) {
-                    this.pendingChanges = [];
-                    this.pendingConfigChangeMap = new Map();
-                    await this.fetchSavedChanges();
-                }
-                const configurationChanges = this.pendingChanges?.filter(isGenericConfigChange);
-                if (configurationChanges.length) {
-                    const stackChangeEvent = new CustomEvent(STACK_CHANGE_EVENT, {
-                        detail: {
-                            controls: configurationChanges.reduce((acc, item) => {
-                                const controls = [...item.controlId ?? []].map(id => {
-                                    return getControlById(id);
-                                }).filter(ui5Element => isA('sap.ui.core.Element', ui5Element));
-                                acc.push(...controls);
-                                return acc;
-                            }, [])
-                        }
-                    });
-                    this.dispatchEvent(stackChangeEvent);
-                }
-                this.updateStack();
-                handleStackChange();
+      });
+      await this.fetchSavedChanges();
+      this.updateStack();
+      this.options.rta.attachUndoRedoStackModified(this.createOnStackChangeHandler());
+    }
+
+    /**
+     * Send update to the editor with modified stack.
+     *
+     * @param pendingChanges Changes that are waiting to be saved
+     */
+    updateStack() {
+      this.sendAction(changeStackModified({
+        saved: this.savedChanges ?? [],
+        pending: this.pendingChanges ?? []
+      }));
+    }
+    isGenericChange(change) {
+      return change.changeType === 'appdescr_app_addAnnotationsToOData' || change.changeType === 'rename' || change.changeType === 'moveControls' || change.changeType === 'addXML' || change.changeType === 'propertyChange' || change.changeType === 'propertyBindingChange' || change.changeType === 'appdescr_fe_changePageConfiguration' || change.changeType === 'appdescr_ui_generic_app_changePageConfiguration';
+    }
+
+    /**
+     * Fetches saved changes from the workspace and sorts them.
+     */
+    async fetchSavedChanges() {
+      this.changedFiles = {};
+      const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${Date.now()}`);
+      const savedChanges = await savedChangesResponse.json();
+      const textBundle = await getTextBundle();
+      const changes = (await Promise.all(Object.keys(savedChanges ?? {}).map(async key => {
+        const change = savedChanges[key];
+        try {
+          const handler = GENERIC_CHANGE_HANDLER[change.changeType];
+          if (this.isGenericChange(change)) {
+            const {
+              properties,
+              changeTitle,
+              controlId,
+              changeType: type,
+              subtitle
+            } = await handler(change, {
+              textBundle,
+              appComponent: this.options.rta.getRootControlInstance(),
+              configPropertyControlIdMap: this.configPropertyControlIdMap
+            });
+            this.changedFiles[change.fileName] = change;
+            return {
+              kind: GENERIC_CHANGE_KIND,
+              type: 'saved',
+              fileName: change.fileName,
+              ...(subtitle && {
+                subtitle
+              }),
+              changeType: type ?? change.changeType,
+              timestamp: new Date(change.creation).getTime(),
+              ...(controlId && {
+                controlId
+              }),
+              properties,
+              title: textBundle.getText(changeTitle)
             };
+          }
+          throw new Error('Unknown change type');
+        } catch (error) {
+          // Gracefully handle change files with invalid content
+          const flexObject = await getFlexObject(change);
+          const selectorId = await getControlIdByChange(flexObject, this.options.rta.getRootControlInstance());
+          if (change.fileName) {
+            this.changedFiles[change.fileName] = change;
+            const unknownChange = {
+              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 = {
+                ...unknownChange,
+                kind: 'control',
+                controlId: selectorId
+              };
+              return controlChange;
+            }
+            return unknownChange;
+          }
+          return undefined;
         }
-        getConfigurationPropertyValue(controlId, propertyName) {
-            const pendingChanges = this.pendingConfigChangeMap?.get(controlId);
-            return (pendingChanges || []).find(item => item.isActive && item.properties[0].label === propertyName)?.properties[0].value;
+      }))).filter(change => !!change).sort((a, b) => b.timestamp - a.timestamp);
+      this.savedChanges = changes;
+    }
+
+    /**
+     *
+     * @param controlId unique identifier for a control
+     * @param propertyName name of the property change to be deleted
+     * @param fileName name of the file.
+     */
+    async deleteChange(controlId, propertyName, fileName) {
+      const filesToDelete = this.savedChanges.filter(change => {
+        if (fileName) {
+          return fileName === change.fileName;
         }
-        async updateConfigurationProps(configPropertyControlIdMap) {
-            this.configPropertyControlIdMap = configPropertyControlIdMap;
-            await this.fetchSavedChanges();
-            this.updateStack();
+        if (change.kind === 'control') {
+          return change.controlId === controlId;
         }
-        async handleCommand(command, inactiveCommandCount, index, pendingChanges) {
-            setAdditionalChangeInfo(command?.getPreparedChange?.());
-            const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
-            if (pendingChange) {
-                pendingChanges.push(pendingChange);
+        return false;
+      }).map(change => fetch(FlexChangesEndPoints.changes, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          fileName: change.fileName
+        })
+      }));
+      await Promise.all(filesToDelete).catch(error => Log.error(getError(error).message));
+      await this.fetchSavedChanges();
+      this.updateStack();
+    }
+
+    /**
+     * Handler for undo/redo stack change.
+     *
+     * @param sendAction send action method
+     * @returns (event: sap.ui.base.Event) => Promise<void>
+     */
+    createOnStackChangeHandler() {
+      const handleStackChange = modeAndStackChangeHandler(this.sendAction, this.options.rta);
+      return async event => {
+        const pendingChanges = [];
+        this.eventStack.push(event);
+        const stack = this.options.rta.getCommandStack();
+        const allCommands = stack.getCommands();
+        const executedCommands = stack.getAllExecutedCommands();
+        const allCommandsFlattened = allCommands.flatMap(command => typeof command.getCommands === 'function' ? command.getCommands() : [command]);
+        const activeCommandCount = allCommandsFlattened.length - executedCommands.length;
+        this.pendingConfigChangeMap = new Map();
+        let i = 0;
+        for (const command of allCommands) {
+          try {
+            if (typeof command.getCommands === 'function') {
+              const subCommands = command.getCommands();
+              for (const subCommand of subCommands) {
+                await this.handleCommand(subCommand, activeCommandCount, i, pendingChanges);
+                i++;
+              }
+            } else {
+              await this.handleCommand(command, activeCommandCount, i, pendingChanges);
+              i++;
             }
+          } catch (error) {
+            Log.error('CPE: Change creation Failed', getError(error));
+          }
         }
-        trackPendingConfigChanges(result) {
-            for (const id of result?.controlId ?? []) {
-                if (!this.pendingConfigChangeMap.get(id)) {
-                    this.pendingConfigChangeMap.set(id, []);
-                }
-                const pendingChanges = this.pendingConfigChangeMap.get(id);
-                pendingChanges?.push(result);
-            }
+        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) => isGenericConfigChange(change) ? sum + 1 : sum, 0);
+          if (changesRequiringReload > this.changesRequiringReload) {
+            await sendInfoCenterMessage({
+              title: {
+                key: 'CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_TITLE'
+              },
+              description: {
+                key: 'CHANGES_VISIBLE_AFTER_SAVE_AND_RELOAD_DESCRIPTION'
+              },
+              type: MessageBarType.info
+            });
+            this.sendAction(setApplicationRequiresReload(changesRequiringReload > 0));
+          }
+          this.changesRequiringReload = changesRequiringReload;
         }
-        async prepareChangeType(command, inactiveCommandCount, index) {
-            const change = command?.getPreparedChange?.();
-            const textBundle = await getTextBundle();
-            const selectorId = typeof change?.getSelector === 'function' ? await getControlIdByChange(change, this.options.rta.getRootControlInstance()) : this.getCommandSelectorId(command);
-            const changeType = this.getCommandChangeType(command);
-            if (!changeType) {
-                return undefined;
-            }
-            const changeDefinition = change.getDefinition ? change.getDefinition() : change.getJson();
-            const {fileName} = changeDefinition;
-            const handler = GENERIC_CHANGE_HANDLER[changeType];
-            if (handler) {
-                const {
-                    properties,
-                    changeTitle,
-                    controlId,
-                    changeType: type,
-                    subtitle
-                } = await handler(changeDefinition, {
-                    textBundle,
-                    appComponent: this.options.rta.getRootControlInstance(),
-                    configPropertyControlIdMap: this.configPropertyControlIdMap
-                });
-                const genericChange = {
-                    kind: GENERIC_CHANGE_KIND,
-                    type: 'pending',
-                    changeType: type ?? changeType,
-                    ...subtitle && { subtitle },
-                    isActive: index >= inactiveCommandCount,
-                    title: textBundle.getText(changeTitle),
-                    fileName,
-                    ...controlId && { controlId },
-                    properties
-                };
-                if (changeType === 'appdescr_fe_changePageConfiguration') {
-                    this.trackPendingConfigChanges(genericChange);
-                }
-                return genericChange;
-            } else {
-                const title = TITLE_MAP[changeType] ?? '';
-                let result = {
-                    type: PENDING_CHANGE_TYPE,
-                    kind: UNKNOWN_CHANGE_KIND,
-                    ...title && { title },
-                    changeType,
-                    isActive: index >= inactiveCommandCount,
-                    fileName
-                };
-                if (selectorId) {
-                    result = {
-                        ...result,
-                        kind: 'control',
-                        controlId: selectorId
-                    };
-                }
-                return result;
-            }
+        this.eventStack.splice(eventIndex, 1);
+        if (Array.isArray(allCommands) && allCommands.length === 0) {
+          this.pendingChanges = [];
+          this.pendingConfigChangeMap = new Map();
+          await this.fetchSavedChanges();
         }
-        retryOperations(operations) {
-            for (const operation of operations) {
-                try {
-                    const result = operation();
-                    if (!result) {
-                        continue;
-                    }
-                    return result;
-                } catch (error) {
-                    continue;
-                }
+
+        // Notify to update the ui for configuration changes.
+        const configurationChanges = this.pendingChanges?.filter(isGenericConfigChange);
+        if (configurationChanges.length) {
+          const stackChangeEvent = new CustomEvent(STACK_CHANGE_EVENT, {
+            detail: {
+              controls: configurationChanges.reduce((acc, item) => {
+                const controls = [...(item.controlId ?? [])].map(id => {
+                  return getControlById(id);
+                }).filter(ui5Element => isA('sap.ui.core.Element', ui5Element));
+                acc.push(...controls);
+                return acc;
+              }, [])
             }
-            Log.error('All retry operations failed');
-            return undefined;
+          });
+          this.dispatchEvent(stackChangeEvent);
+        }
+        this.updateStack();
+        handleStackChange();
+      };
+    }
+    /**
+     * Cached configuration commands to set reset value during stack change event.
+     *
+     * @param  controlId - control id of the config property.
+     * @param  propertyName - config property name.
+     * @returns Configuration property value.
+     */
+    getConfigurationPropertyValue(controlId, propertyName) {
+      const pendingChanges = this.pendingConfigChangeMap?.get(controlId);
+      return (pendingChanges || []).find(item => item.isActive && item.properties[0].label === propertyName)?.properties[0].value;
+    }
+
+    /**
+     * Update config changes with associated controls.
+     *
+     * @param {Map<string, string[]>} configPropertyControlIdMap - config property path control id map.
+     */
+    async updateConfigurationProps(configPropertyControlIdMap) {
+      this.configPropertyControlIdMap = configPropertyControlIdMap;
+      await this.fetchSavedChanges();
+      this.updateStack();
+    }
+
+    /**
+     * 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.
+     */
+    async handleCommand(command, inactiveCommandCount, index, pendingChanges) {
+      setAdditionalChangeInfo(command?.getPreparedChange?.());
+      const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
+      if (pendingChange) {
+        pendingChanges.push(pendingChange);
+      }
+    }
+    trackPendingConfigChanges(result) {
+      for (const id of result?.controlId ?? []) {
+        if (!this.pendingConfigChangeMap.get(id)) {
+          this.pendingConfigChangeMap.set(id, []);
         }
-        getCommandChangeType(command) {
-            return this.retryOperations([
-                () => command.getChangeType(),
-                () => command.getPreparedChange().getDefinition().changeType
-            ]);
+        const pendingChanges = this.pendingConfigChangeMap.get(id);
+        pendingChanges?.push(result);
+      }
+    }
+
+    /**
+     * 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`.
+     */
+    async prepareChangeType(command, inactiveCommandCount, index) {
+      const change = command?.getPreparedChange?.();
+      const textBundle = await getTextBundle();
+      const selectorId = typeof change?.getSelector === 'function' ? await getControlIdByChange(change, this.options.rta.getRootControlInstance()) : this.getCommandSelectorId(command);
+      const changeType = this.getCommandChangeType(command);
+      if (!changeType) {
+        return undefined;
+      }
+      const changeDefinition = change.getDefinition ? change.getDefinition() : change.getJson();
+      const {
+        fileName
+      } = changeDefinition;
+      const handler = GENERIC_CHANGE_HANDLER[changeType];
+      if (handler) {
+        const {
+          properties,
+          changeTitle,
+          controlId,
+          changeType: type,
+          subtitle
+        } = await handler(changeDefinition, {
+          textBundle,
+          appComponent: this.options.rta.getRootControlInstance(),
+          configPropertyControlIdMap: this.configPropertyControlIdMap
+        });
+        const genericChange = {
+          kind: GENERIC_CHANGE_KIND,
+          type: 'pending',
+          changeType: type ?? changeType,
+          ...(subtitle && {
+            subtitle
+          }),
+          isActive: index >= inactiveCommandCount,
+          title: textBundle.getText(changeTitle),
+          fileName,
+          ...(controlId && {
+            controlId
+          }),
+          properties
+        };
+        if (changeType === 'appdescr_fe_changePageConfiguration') {
+          this.trackPendingConfigChanges(genericChange);
         }
-        getCommandSelectorId(command) {
-            return this.retryOperations([
-                () => command.getSelector().id,
-                () => command.getElement().getProperty('persistencyKey'),
-                () => command.getElement().getId(),
-                () => command.getParent()?.getElement().getId()
-            ]);
+        return genericChange;
+      } else {
+        const title = TITLE_MAP[changeType] ?? '';
+        let result = {
+          type: PENDING_CHANGE_TYPE,
+          kind: UNKNOWN_CHANGE_KIND,
+          ...(title && {
+            title
+          }),
+          changeType,
+          isActive: index >= inactiveCommandCount,
+          fileName
+        };
+        if (selectorId) {
+          result = {
+            ...result,
+            kind: 'control',
+            controlId: selectorId
+          };
         }
-        async syncOutlineChanges() {
-            for (const change of this.savedChanges) {
-                if (change.kind !== 'unknown' && change.changeType !== 'configuration') {
-                    const flexObject = await getFlexObject(this.changedFiles[change.fileName]);
-                    change.controlId = await getControlIdByChange(flexObject, this.options.rta.getRootControlInstance()) ?? '';
-                }
-            }
-            this.updateStack();
+        return result;
+      }
+    }
+
+    /**
+     * Retry operations.
+     *
+     * @param operations to be executed
+     * @returns first successfull operation result or undefined
+     */
+    retryOperations(operations) {
+      for (const operation of operations) {
+        try {
+          const result = operation();
+          if (!result) {
+            continue;
+          }
+          return result;
+        } catch (error) {
+          continue;
         }
-        onStackChange(handler) {
-            this.addEventListener(STACK_CHANGE_EVENT, handler);
+      }
+      Log.error('All retry operations failed');
+      return undefined;
+    }
+
+    /**
+     * Get command change type.
+     *
+     * @param command to be executed for creating change
+     * @returns command change type or undefined
+     */
+    getCommandChangeType(command) {
+      return this.retryOperations([() => command.getChangeType(), () => command.getPreparedChange().getDefinition().changeType]);
+    }
+
+    /**
+     * Get command selector id.
+     *
+     * @param command to be executed for creating change
+     * @returns command selector id or undefined
+     */
+    getCommandSelectorId(command) {
+      return this.retryOperations([() => command.getSelector().id,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      () => command.getElement().getProperty('persistencyKey'), () => command.getElement().getId(), () => command.getParent()?.getElement().getId()]);
+    }
+
+    /**
+     * Sync outline changes to place modification markers when outline is changed.
+     *
+     * @returns void
+     */
+    async syncOutlineChanges() {
+      for (const change of this.savedChanges) {
+        if (change.kind !== 'unknown' && change.changeType !== 'configuration') {
+          const flexObject = await getFlexObject(this.changedFiles[change.fileName]);
+          change.controlId = (await getControlIdByChange(flexObject, this.options.rta.getRootControlInstance())) ?? '';
         }
+      }
+      this.updateStack();
     }
-    function isGenericConfigChange(change) {
-        return change.kind === GENERIC_CHANGE_KIND && change.changeType === 'configuration';
+    onStackChange(handler) {
+      this.addEventListener(STACK_CHANGE_EVENT, handler);
     }
-    var __exports = { __esModule: true };
-    __exports.STACK_CHANGE_EVENT = STACK_CHANGE_EVENT;
-    __exports.ChangeService = ChangeService;
-    return __exports;
-});
+  }
+  function isGenericConfigChange(change) {
+    return change.kind === GENERIC_CHANGE_KIND && change.changeType === 'configuration';
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.STACK_CHANGE_EVENT = STACK_CHANGE_EVENT;
+  __exports.ChangeService = ChangeService;
+  return __exports;
+});
+//# sourceMappingURL=service.js.map