@sap-ux/preview-middleware 1.0.18 → 1.0.21

package/README.md

@@ -71,7 +71,7 @@ Array of additional application configurations:
 | `framework`     | `string`   | mandatory        | `undefined`    | Currently `OPA5`, `QUnit` (only QUnit 2.3.2 provided as third-party module using [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 (such as karma) |
 | `path`          | `string`   | optional         | `(calculated)` | The mount point to be used for test suite. By default, `/test/opaTests.qunit.html` is used for `OPA5`, `/test/unitTests.qunit.html` is used for `QUnit`, and `/test/testsuite.qunit.html` is used for `Testsuite`                                                                                                       |
 | `init`          | `string`   | optional         | `undefined`    | The mount point to be used for custom test runner script                                                                                                                                                                                                                                                                |
-| `pattern`       | `string`   | optional         | `(calculated)` | Optional glob pattern to find the tests. By default, `/test/**/*Journey.{js,ts}` is used for `OPA5` and `/test/**/*Test.{js,ts}` is used for `QUnit` (not applicable for `Testsuite`)                                                                                                                                   |
+| `pattern`       | `string`   | optional         | `(calculated)` | Optional glob pattern to find the tests. By default, `/test/**/*Journey{,.gen}.{js,ts}` is used for `OPA5` and `/test/**/*Test.{js,ts}` is used for `QUnit` (not applicable for `Testsuite`)                                                                                                                                   |
 
 
 ## [Usage](#usage)

package/dist/base/flp.d.ts

@@ -149,6 +149,16 @@ export declare class FlpSandbox {
      * @private
      */
     private addCardGeneratorMiddlewareRoute;
+    /**
+     * Extracts protocol and baseUrl from a request and calls getUi5Version.
+     * Handles both express Request and connect IncomingMessage (karma test runner).
+     *
+     * @param req - the incoming request
+     * @param baseUrl - the base path to include when fetching the UI5 version
+     * @returns the parsed UI5 version
+     * @private
+     */
+    private getUi5VersionFromRequest;
     /**
      * Read the UI5 version.
      * In case of an error, the default UI5 version '1.121.0' is returned.

package/dist/base/flp.js

@@ -350,11 +350,7 @@ export class FlpSandbox {
         else {
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             this.templateConfig.baseUrl = ('ui5-patched-router' in req && req['ui5-patched-router']?.baseUrl) || '';
-            const ui5Version = await this.getUi5Version(
-            //use protocol from request header referer as fallback for connect API (karma test runner)
-            'protocol' in req
-                ? req.protocol
-                : (req.headers.referer?.substring(0, req.headers.referer.indexOf(':')) ?? 'http'), req.headers.host, this.templateConfig.baseUrl);
+            const ui5Version = await this.getUi5VersionFromRequest(req, this.templateConfig.baseUrl);
             this.checkDeleteConnectors(ui5Version.major, ui5Version.minor, ui5Version.isCdn);
             if (ui5Version.major === 1 && ui5Version.minor < 120) {
                 this.removeFlexExtensionPointEnabled();
@@ -388,9 +384,37 @@ export class FlpSandbox {
         this.logger.debug(`Add route for ${previewGeneratorPath}`);
         this.router.get(previewGeneratorPath, async (req, res, next) => {
             this.templateConfig.enableCardGenerator = !!this.cardGenerator?.path;
+            if (this.templateConfig.enableCardGenerator) {
+                // check for min ui5 version of card generator feature
+                const baseUrl = 'ui5-patched-router' in req ? (req['ui5-patched-router']?.baseUrl ?? '') : '';
+                const ui5Version = await this.getUi5VersionFromRequest(req, baseUrl);
+                const minMinor = this.projectType === 'CAPNodejs' || this.projectType === 'CAPJava' ? 149 : 121;
+                if ((ui5Version.major === 1 && ui5Version.minor < minMinor) ||
+                    ui5Version.major >= 2 ||
+                    ui5Version.label?.includes('legacy-free')) {
+                    this.templateConfig.enableCardGenerator = false;
+                    this.logger.warn(`Feature cardGenerator disabled: UI5 version ${ui5Version.major}.${ui5Version.minor}.${ui5Version.patch} does not meet the minimum required version 1.${minMinor}.0 for project type '${this.projectType}'.`);
+                }
+            }
             await this.flpGetHandler(req, res, next);
         });
     }
+    /**
+     * Extracts protocol and baseUrl from a request and calls getUi5Version.
+     * Handles both express Request and connect IncomingMessage (karma test runner).
+     *
+     * @param req - the incoming request
+     * @param baseUrl - the base path to include when fetching the UI5 version
+     * @returns the parsed UI5 version
+     * @private
+     */
+    async getUi5VersionFromRequest(req, baseUrl = '') {
+        // use protocol from request header referer as fallback for connect API (karma test runner)
+        const protocol = 'protocol' in req
+            ? req.protocol
+            : (req.headers.referer?.substring(0, req.headers.referer.indexOf(':')) ?? 'http');
+        return this.getUi5Version(protocol, req.headers.host, baseUrl);
+    }
     /**
      * Read the UI5 version.
      * In case of an error, the default UI5 version '1.121.0' is returned.
@@ -425,6 +449,7 @@ export class FlpSandbox {
         }
         const [major, minor, patch] = version.split('.').map((versionPart) => Number.parseInt(versionPart, 10));
         const label = version.split(/-(.*)/s)?.[1];
+        // check for min ui5 version of flp.enhancedHomePage feature
         if (this.flpConfig.enhancedHomePage &&
             ((major < 2 && minor < 123) || major >= 2 || label?.includes('legacy-free'))) {
             this.flpConfig.enhancedHomePage = this.templateConfig.enhancedHomePage = false;

package/dist/base/test.js

@@ -8,7 +8,7 @@ const DEFAULTS = {
     opa5: {
         path: '/test/opaTests.qunit.html',
         init: '/test/opaTests.qunit.js',
-        pattern: '/test/**/*Journey.{js,ts}',
+        pattern: '/test/**/*Journey{,.gen}.{js,ts}',
         framework: 'OPA5'
     },
     testsuite: {

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

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "../../cpe/communication-service", "../../i18n", "sap/ui/core/library", "../../utils/additional-change-info", "../../utils/error", "../../utils/info-center-message", "../api-handler", "../command-executor", "../control-utils", "./BaseDialog.controller"], function (JSONModel, OverlayRegistry, ___sap_ux_private_control_property_editor_common, ____cpe_communication_servicejs, ____i18njs, sap_ui_core_library, ____utils_additional_change_infojs, ____utils_errorjs, ____utils_info_center_messagejs, ___api_handlerjs, __CommandExecutor, __ControlUtils, __BaseDialog) {
+sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "../../cpe/communication-service", "../../i18n", "sap/ui/core/library", "../../utils/additional-change-info", "../../utils/changes", "../../utils/error", "../../utils/info-center-message", "../api-handler", "../command-executor", "../control-utils", "./BaseDialog.controller"], function (JSONModel, OverlayRegistry, ___sap_ux_private_control_property_editor_common, ____cpe_communication_servicejs, ____i18njs, sap_ui_core_library, ____utils_additional_change_infojs, ____utils_changesjs, ____utils_errorjs, ____utils_info_center_messagejs, ___api_handlerjs, __CommandExecutor, __ControlUtils, __BaseDialog) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -12,6 +12,7 @@ sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "open
   const getResourceModel = ____i18njs["getResourceModel"];
   const ValueState = sap_ui_core_library["ValueState"];
   const setAdditionalChangeInfoForChangeFile = ____utils_additional_change_infojs["setAdditionalChangeInfoForChangeFile"];
+  const getChangeDefinition = ____utils_changesjs["getChangeDefinition"];
   const getError = ____utils_errorjs["getError"];
   const sendInfoCenterMessage = ____utils_info_center_messagejs["sendInfoCenterMessage"];
   const getFragments = ___api_handlerjs["getFragments"];
@@ -218,7 +219,10 @@ sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "open
         const command = await this.commandExecutor.getCommand(targetObject, 'addXML', modifiedValue, flexSettings, designMetadata);
         const templateName = fragment.targetAggregation === COLUMNS_AGGREGATION ? `V2_SMART_TABLE_COLUMN` : 'V2_SMART_TABLE_CELL';
         const preparedChange = command.getPreparedChange();
-        setAdditionalChangeInfoForChangeFile(preparedChange.getDefinition().fileName, {
+        const {
+          fileName
+        } = getChangeDefinition(preparedChange);
+        setAdditionalChangeInfoForChangeFile(fileName, {
           templateName
         });
         compositeCommand.addCommand(command, false);

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

@@ -32,8 +32,10 @@ import Input from 'sap/m/Input';
 import ManagedObject from 'sap/ui/base/ManagedObject';
 import Control from 'sap/ui/core/Control';
 import { ValueState } from 'sap/ui/core/library';
+import Change from 'sap/ui/fl/Change';
 import { QuickActionTelemetryData } from '../../cpe/quick-actions/quick-action-definition.js';
 import { setAdditionalChangeInfoForChangeFile } from '../../utils/additional-change-info.js';
+import { getChangeDefinition } from '../../utils/changes.js';
 import { getError } from '../../utils/error.js';
 import { sendInfoCenterMessage } from '../../utils/info-center-message.js';
 import { getFragments } from '../api-handler.js';
@@ -295,8 +297,10 @@ export default class AddTableColumnFragments extends BaseDialog<AddTableColumnsF
 
             const templateName =
                 fragment.targetAggregation === COLUMNS_AGGREGATION ? `V2_SMART_TABLE_COLUMN` : 'V2_SMART_TABLE_CELL';
-            const preparedChange = command.getPreparedChange();
-            setAdditionalChangeInfoForChangeFile(preparedChange.getDefinition().fileName, { templateName });
+            const preparedChange =
+                command.getPreparedChange() as unknown as Change<AddTableCellFragmentChangeContentType>;
+            const { fileName } = getChangeDefinition(preparedChange);
+            setAdditionalChangeInfoForChangeFile(fileName, { templateName });
             compositeCommand.addCommand(command, false);
         }
 

package/dist/client/adp/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define(["sap/ui/fl/Utils", "../utils/core", "../utils/version"], function (FlexUtils, ___utils_corejs, ___utils_versionjs) {
+sap.ui.define(["sap/ui/fl/Utils", "../utils/core", "../utils/changes", "../utils/version"], function (FlexUtils, ___utils_core, ___utils_changesjs, ___utils_versionjs) {
   "use strict";
 
   function __ui5_require_async(path) {
@@ -20,7 +20,9 @@ sap.ui.define(["sap/ui/fl/Utils", "../utils/core", "../utils/version"], function
       });
     });
   }
-  const getControlById = ___utils_corejs["getControlById"];
+  const getControlById = ___utils_core["getControlById"];
+  const getChangeDefinition = ___utils_changesjs["getChangeDefinition"];
+  const getFlexChangeList = ___utils_changesjs["getFlexChangeList"];
   const isLowerThanMinimalUi5Version = ___utils_versionjs["isLowerThanMinimalUi5Version"];
   let reuseComponentChecker;
 
@@ -99,15 +101,11 @@ sap.ui.define(["sap/ui/fl/Utils", "../utils/core", "../utils/version"], function
    * @returns {boolean} Returns true if the command's change contains the specified property with the matching value; otherwise, returns false.
    */
   function matchesChangeProperty(command, propertyPath, propertyValue) {
-    if (typeof command.getPreparedChange !== 'function') {
-      return false;
-    }
-    const change = command.getPreparedChange()?.getDefinition?.();
-    if (!change) {
-      return false;
-    }
-    const nestedProperty = getNestedProperty(change, propertyPath);
-    return typeof nestedProperty === 'string' ? nestedProperty.includes(propertyValue) : false;
+    return getFlexChangeList(command).some(change => {
+      const changeDefinition = getChangeDefinition(change);
+      const nestedProperty = getNestedProperty(changeDefinition, propertyPath);
+      return typeof nestedProperty === 'string' ? nestedProperty.includes(propertyValue) : false;
+    });
   }
   /**
    * Gets controller name and view ID for the given UI5 control.

package/dist/client/adp/utils.ts

@@ -1,12 +1,13 @@
-import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import type ManagedObject from 'sap/ui/base/ManagedObject';
 import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 import FlexUtils from 'sap/ui/fl/Utils';
-import IsReuseComponentApi from 'sap/ui/rta/util/isReuseComponent';
-import { getControlById } from '../utils/core.js';
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import type { Manifest } from 'sap/ui/rta/RuntimeAuthoring';
 import RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import IsReuseComponentApi from 'sap/ui/rta/util/isReuseComponent';
+import { getControlById } from '../utils/core';
 
+import { getChangeDefinition, getFlexChangeList } from '../utils/changes.js';
 import { isLowerThanMinimalUi5Version, Ui5VersionInfo } from '../utils/version.js';
 
 export interface Deferred<T> {
@@ -106,16 +107,11 @@ export function getNestedProperty(obj: object, path: string): unknown {
  * @returns {boolean} Returns true if the command's change contains the specified property with the matching value; otherwise, returns false.
  */
 export function matchesChangeProperty(command: FlexCommand, propertyPath: string, propertyValue: string): boolean {
-    if (typeof command.getPreparedChange !== 'function') {
-        return false;
-    }
-    const change = command.getPreparedChange()?.getDefinition?.();
-    if (!change) {
-        return false;
-    }
-
-    const nestedProperty = getNestedProperty(change, propertyPath);
-    return typeof nestedProperty === 'string' ? nestedProperty.includes(propertyValue) : false;
+    return getFlexChangeList(command).some((change) => {
+        const changeDefinition = getChangeDefinition(change);
+        const nestedProperty = getNestedProperty(changeDefinition, propertyPath);
+        return typeof nestedProperty === 'string' ? nestedProperty.includes(propertyValue) : false;
+    });
 }
 interface ControllerInfo {
     controllerName: string;

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

@@ -1,6 +1,6 @@
 "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, ____i18njs, ____utils_additional_change_infojs, ____utils_corejs, ____utils_errorjs, ____utils_info_center_messagejs, ___rta_servicejs, ___flex_changejs, ___generic_changejs) {
+sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "sap/base/Log", "../../i18n", "../../utils/additional-change-info", "../../utils/changes", "../../utils/core", "../../utils/error", "../../utils/info-center-message", "../rta-service", "./flex-change", "./generic-change"], function (___sap_ux_private_control_property_editor_common, Log, ____i18njs, ____utils_additional_change_infojs, ____utils_changesjs, ____utils_corejs, ____utils_errorjs, ____utils_info_center_messagejs, ___rta_servicejs, ___flex_changejs, ___generic_changejs) {
   "use strict";
 
   const changeProperty = ___sap_ux_private_control_property_editor_common["changeProperty"];
@@ -17,6 +17,9 @@ sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-proper
   const UNKNOWN_CHANGE_KIND = ___sap_ux_private_control_property_editor_common["UNKNOWN_CHANGE_KIND"];
   const getTextBundle = ____i18njs["getTextBundle"];
   const setAdditionalChangeInfo = ____utils_additional_change_infojs["setAdditionalChangeInfo"];
+  const getChangeDefinition = ____utils_changesjs["getChangeDefinition"];
+  const getFlexChangeList = ____utils_changesjs["getFlexChangeList"];
+  const getFlexXMLChangeList = ____utils_changesjs["getFlexXMLChangeList"];
   const getControlById = ____utils_corejs["getControlById"];
   const isA = ____utils_corejs["isA"];
   const getError = ____utils_errorjs["getError"];
@@ -354,11 +357,11 @@ sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-proper
      * @returns {Promise<void>} A promise that resolves when the command is handled.
      */
     async handleCommand(command, inactiveCommandCount, index, pendingChanges) {
-      setAdditionalChangeInfo(command?.getPreparedChange?.(), this.options.rta.getRootControlInstance());
-      const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
-      if (pendingChange) {
-        pendingChanges.push(pendingChange);
-      }
+      const flexXMLChanges = getFlexXMLChangeList(command);
+      const rootController = this.options.rta.getRootControlInstance();
+      setAdditionalChangeInfo(flexXMLChanges, rootController);
+      const changes = await this.buildPendingChanges(command, inactiveCommandCount, index);
+      pendingChanges.push(...changes);
     }
     trackPendingConfigChanges(result) {
       for (const id of result?.controlId ?? []) {
@@ -377,11 +380,11 @@ sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-proper
      * @param changeType - the change type string
      * @param handler - the generic change handler
      * @param isActive - whether the change is currently active
-     * @param fileName - file name of the change
      * @param textBundle - i18n text bundle
      * @returns Promise resolving to PendingGenericChange
      */
-    async buildGenericChange(changeDefinition, changeType, handler, isActive, fileName, textBundle) {
+    async buildGenericChange(changeDefinition, changeType, handler, isActive, textBundle) {
+      const fileName = changeDefinition.fileName;
       const {
         properties,
         changeTitle,
@@ -453,31 +456,27 @@ sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-proper
     }
 
     /**
-     * Prepares the type of change based on the command and other parameters.
+     * Build the list of pending changes 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`.
+     * @returns {Promise<PendingChange[]>} - A promise that resolves to a `PendingChange` list.
      */
-    async prepareChangeType(command, inactiveCommandCount, index) {
-      const change = command?.getPreparedChange?.();
+    async buildPendingChanges(command, inactiveCommandCount, index) {
       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];
-      const isActive = index >= inactiveCommandCount;
-      if (handler) {
-        return this.buildGenericChange(changeDefinition, changeType, handler, isActive, fileName, textBundle);
-      }
-      return this.buildFallbackChange(changeType, selectorId, isActive, fileName);
+      const rootController = this.options.rta.getRootControlInstance();
+      return Promise.all(getFlexChangeList(command).map(async change => {
+        const selectorId = typeof change?.getSelector === 'function' ? await getControlIdByChange(change, rootController) : this.getCommandSelectorId(command);
+        const changeType = change.getChangeType?.() ?? command.getChangeType?.();
+        const changeDefinition = getChangeDefinition(change);
+        const {
+          fileName
+        } = changeDefinition;
+        const handler = GENERIC_CHANGE_HANDLER[changeType];
+        const isActive = index >= inactiveCommandCount;
+        return handler ? this.buildGenericChange(changeDefinition, changeType, handler, isActive, textBundle) : this.buildFallbackChange(changeType, selectorId, isActive, fileName);
+      })).then(pendingChanges => pendingChanges.filter(change => !!change));
     }
 
     /**
@@ -502,16 +501,6 @@ sap.ui.define(["open/ux/preview/client/thirdparty/@sap-ux-private/control-proper
       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.
      *

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

@@ -25,10 +25,11 @@ import {
 import Log from 'sap/base/Log';
 import type Event from 'sap/ui/base/Event';
 import UI5Element from 'sap/ui/core/Element';
-import { ChangeDefinition } from 'sap/ui/fl/Change';
+import Change, { ChangeDefinition } from 'sap/ui/fl/Change';
 import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import { getTextBundle } from '../../i18n.js';
 import { setAdditionalChangeInfo } from '../../utils/additional-change-info.js';
+import { getChangeDefinition, getFlexChangeList, getFlexXMLChangeList } from '../../utils/changes.js';
 import { getControlById, isA } from '../../utils/core.js';
 import { getError } from '../../utils/error.js';
 import { sendInfoCenterMessage } from '../../utils/info-center-message.js';
@@ -56,6 +57,12 @@ export interface StackChangedEventDetail {
 
 type SavedChangesResponse = Record<string, ConfigChange | GenericChange>;
 
+interface ChangeContent {
+    property: string;
+    newValue: string;
+    newBinding: string;
+}
+
 /**
  * Modify rta message.
  *
@@ -416,11 +423,11 @@ export class ChangeService extends EventTarget {
         index: number,
         pendingChanges: PendingChange[]
     ): Promise<void> {
-        setAdditionalChangeInfo(command?.getPreparedChange?.(), this.options.rta.getRootControlInstance());
-        const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
-        if (pendingChange) {
-            pendingChanges.push(pendingChange);
-        }
+        const flexXMLChanges = getFlexXMLChangeList(command);
+        const rootController = this.options.rta.getRootControlInstance();
+        setAdditionalChangeInfo(flexXMLChanges, rootController);
+        const changes = await this.buildPendingChanges(command, inactiveCommandCount, index);
+        pendingChanges.push(...changes);
     }
 
     private trackPendingConfigChanges(result: PendingGenericChange): void {
@@ -440,7 +447,6 @@ export class ChangeService extends EventTarget {
      * @param changeType - the change type string
      * @param handler - the generic change handler
      * @param isActive - whether the change is currently active
-     * @param fileName - file name of the change
      * @param textBundle - i18n text bundle
      * @returns Promise resolving to PendingGenericChange
      */
@@ -449,9 +455,9 @@ export class ChangeService extends EventTarget {
         changeType: string,
         handler: ChangeHandler<GenericChange>,
         isActive: boolean,
-        fileName: string,
         textBundle: Awaited<ReturnType<typeof getTextBundle>>
     ): Promise<PendingGenericChange> {
+        const fileName = changeDefinition.fileName;
         const {
             properties,
             changeTitle,
@@ -522,39 +528,42 @@ export class ChangeService extends EventTarget {
     }
 
     /**
-     * Prepares the type of change based on the command and other parameters.
+     * Build the list of pending changes 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`.
+     * @returns {Promise<PendingChange[]>} - A promise that resolves to a `PendingChange` list.
      */
-    private async prepareChangeType(
+    private async buildPendingChanges(
         command: FlexCommand,
         inactiveCommandCount: number,
         index: number
-    ): Promise<PendingChange | undefined> {
-        const change = command?.getPreparedChange?.();
+    ): Promise<PendingChange[]> {
         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() as ChangeDefinition);
-        const { fileName } = changeDefinition;
-        const handler = GENERIC_CHANGE_HANDLER[changeType as ChangeType] as unknown as ChangeHandler<GenericChange>;
-        const isActive = index >= inactiveCommandCount;
-        if (handler) {
-            return this.buildGenericChange(changeDefinition, changeType, handler, isActive, fileName, textBundle);
-        }
-        return this.buildFallbackChange(changeType, selectorId, isActive, fileName);
+        const rootController = this.options.rta.getRootControlInstance();
+        return Promise.all(
+            getFlexChangeList(command).map(async (change) => {
+                const selectorId =
+                    typeof change?.getSelector === 'function'
+                        ? await getControlIdByChange(change as Change<ChangeContent>, rootController)
+                        : this.getCommandSelectorId(command);
+
+                const changeType = change.getChangeType?.() ?? command.getChangeType?.();
+
+                const changeDefinition = getChangeDefinition(change);
+                const { fileName } = changeDefinition;
+
+                const handler = GENERIC_CHANGE_HANDLER[
+                    changeType as ChangeType
+                ] as unknown as ChangeHandler<GenericChange>;
+                const isActive = index >= inactiveCommandCount;
+
+                return handler
+                    ? this.buildGenericChange(changeDefinition, changeType, handler, isActive, textBundle)
+                    : this.buildFallbackChange(changeType, selectorId, isActive, fileName);
+            })
+        ).then((pendingChanges) => pendingChanges.filter((change) => !!change));
     }
 
     /**
@@ -579,19 +588,6 @@ export class ChangeService extends EventTarget {
         return undefined;
     }
 
-    /**
-     * Get command change type.
-     *
-     * @param command to be executed for creating change
-     * @returns command change type or undefined
-     */
-    private getCommandChangeType(command: FlexCommand): string | undefined {
-        return this.retryOperations([
-            () => command.getChangeType(),
-            () => command.getPreparedChange().getDefinition().changeType
-        ]);
-    }
-
     /**
      * Get command selector id.
      *

package/dist/client/utils/additional-change-info.js

@@ -1,40 +1,37 @@
 "use strict";
 
-sap.ui.define(["../cpe/additional-change-info/add-xml-additional-info"], function (___cpe_additional_change_info_add_xml_additional_infojs) {
+sap.ui.define(["../cpe/additional-change-info/add-xml-additional-info", "./changes"], function (___cpe_additional_change_info_add_xml_additional_infojs, ___changesjs) {
   "use strict";
 
   const getAddXMLAdditionalInfo = ___cpe_additional_change_info_add_xml_additional_infojs["getAddXMLAdditionalInfo"];
+  const getChangeDefinition = ___changesjs["getChangeDefinition"];
   const additionalChangeInfoMap = new Map();
 
   /**
    * This function is used to set additional change information for a given change.
    *
-   * @param change - The change object for which additional information is to be set.
+   * @param changes - An array of change objects, for which additional information is to be set.
    * @param appComponent - The app component (optional), used to resolve controls in projects with local IDs.
    */
-  function setAdditionalChangeInfo(change, appComponent) {
-    if (!change) {
-      return;
-    }
-    let additionalChangeInfo;
-    const key = change.getDefinition().fileName;
-    if (change?.getChangeType?.() === 'addXML') {
-      additionalChangeInfo = getAddXMLAdditionalInfo(change, appComponent);
-    }
-    if (additionalChangeInfo) {
-      const existingInfo = additionalChangeInfoMap.get(key);
-      if (existingInfo) {
-        // Merge new info with existing info, keeping existing values and only adding new ones
-        const mergedInfo = {
-          ...additionalChangeInfo,
-          ...existingInfo
-        };
-        additionalChangeInfoMap.set(key, mergedInfo);
+  function setAdditionalChangeInfo(changes, appComponent) {
+    changes.forEach(change => {
+      const {
+        fileName
+      } = getChangeDefinition(change);
+      const changeInfo = getAddXMLAdditionalInfo(change, appComponent);
+      if (!changeInfo) {
+        return;
+      }
+      if (additionalChangeInfoMap.has(fileName)) {
+        const storedChangeInfo = additionalChangeInfoMap.get(fileName);
+        additionalChangeInfoMap.set(fileName, {
+          ...changeInfo,
+          ...storedChangeInfo
+        });
       } else {
-        // No existing info, set the new info
-        additionalChangeInfoMap.set(key, additionalChangeInfo);
+        additionalChangeInfoMap.set(fileName, changeInfo);
       }
-    }
+    });
   }
   function setAdditionalChangeInfoForChangeFile(fileName, additionalChangeInfo) {
     additionalChangeInfoMap.set(fileName, additionalChangeInfo);

package/dist/client/utils/additional-change-info.ts

@@ -1,3 +1,4 @@
+import type Component from 'sap/ui/core/Component';
 import FlexChange from 'sap/ui/fl/Change';
 import {
     getAddXMLAdditionalInfo,
@@ -5,46 +6,38 @@ import {
     type AddXMLChangeContent
 } from '../cpe/additional-change-info/add-xml-additional-info.js';
 import { FlexChange as Change } from '../flp/common.js';
-import type Component from 'sap/ui/core/Component';
+import { getChangeDefinition } from './changes.js';
 
 export type AdditionalChangeInfo = AddXMLAdditionalInfo | undefined;
+type FlexXMLChange = FlexChange<AddXMLChangeContent>;
 
 const additionalChangeInfoMap = new Map<string, AdditionalChangeInfo>();
 
 /**
  * This function is used to set additional change information for a given change.
  *
- * @param change - The change object for which additional information is to be set.
+ * @param changes - An array of change objects, for which additional information is to be set.
  * @param appComponent - The app component (optional), used to resolve controls in projects with local IDs.
  */
-export function setAdditionalChangeInfo(
-    change: FlexChange<AddXMLChangeContent> | undefined,
-    appComponent?: Component
-): void {
-    if (!change) {
-        return;
-    }
+export function setAdditionalChangeInfo(changes: FlexXMLChange[], appComponent?: Component): void {
+    changes.forEach((change) => {
+        const { fileName } = getChangeDefinition(change);
+        const changeInfo = getAddXMLAdditionalInfo(change, appComponent);
 
-    let additionalChangeInfo;
-    const key = change.getDefinition().fileName;
-    if (change?.getChangeType?.() === 'addXML') {
-        additionalChangeInfo = getAddXMLAdditionalInfo(change, appComponent);
-    }
+        if (!changeInfo) {
+            return;
+        }
 
-    if (additionalChangeInfo) {
-        const existingInfo = additionalChangeInfoMap.get(key);
-        if (existingInfo) {
-            // Merge new info with existing info, keeping existing values and only adding new ones
-            const mergedInfo = {
-                ...additionalChangeInfo,
-                ...existingInfo
-            };
-            additionalChangeInfoMap.set(key, mergedInfo);
+        if (additionalChangeInfoMap.has(fileName)) {
+            const storedChangeInfo = additionalChangeInfoMap.get(fileName);
+            additionalChangeInfoMap.set(fileName, {
+                ...changeInfo,
+                ...storedChangeInfo
+            });
         } else {
-            // No existing info, set the new info
-            additionalChangeInfoMap.set(key, additionalChangeInfo);
+            additionalChangeInfoMap.set(fileName, changeInfo);
         }
-    }
+    });
 }
 
 export function setAdditionalChangeInfoForChangeFile(

package/dist/client/utils/changes.js

@@ -0,0 +1,60 @@
+"use strict";
+
+sap.ui.define(["../cpe/changes/generic-change"], function (___cpe_changes_generic_change) {
+  "use strict";
+
+  const ADD_XML_CHANGE = ___cpe_changes_generic_change["ADD_XML_CHANGE"];
+  /**
+   * Extracts the list of changes from a flex command.
+   *
+   * @param command - The flex command from which to extract changes.
+   * @returns An array of flex changes associated with the command, or an empty array if no changes are available.
+   */
+  function getFlexChangeList(command) {
+    const changes = command?.getPreparedChange?.();
+    if (!changes) {
+      return [];
+    }
+    return Array.isArray(changes) ? changes : [changes];
+  }
+
+  /**
+   * Extracts the list of XML changes from a flex command, filtering only changes of type 'addXML'.
+   *
+   * @param command - The flex command from which to extract XML changes.
+   * @returns An array of flex XML changes associated with the command.
+   */
+  function getFlexXMLChangeList(command) {
+    return getFlexChangeList(command).filter(change => change.getChangeType?.() === ADD_XML_CHANGE);
+  }
+
+  /**
+   * Retrieves the change definition from a flex change object, supporting both modern and legacy UI5 APIs.
+   *
+   * In UI5 2.x, the change base class is a FlexObject exposing `convertToFileContent()`.
+   * In older UI5 versions (e.g. 1.96.x), the base class is `Change` which uses the now-deprecated
+   * `getDefinition()` method and lacks `convertToFileContent`. This function falls back to
+   * `getDefinition()` for backward compatibility with those older versions.
+   *
+   * @param change - The flex change object (modern FlexObject or legacy Change instance).
+   * @returns The change definition.
+   * @throws Error if the change object supports neither API.
+   */
+  function getChangeDefinition(change) {
+    if ('convertToFileContent' in change) {
+      return change.convertToFileContent();
+    }
+    if ('getDefinition' in change) {
+      return change.getDefinition();
+    }
+    throw new Error('Unsupported change object');
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.getFlexChangeList = getFlexChangeList;
+  __exports.getFlexXMLChangeList = getFlexXMLChangeList;
+  __exports.getChangeDefinition = getChangeDefinition;
+  return __exports;
+});
+//# sourceMappingURL=changes.js.map

package/dist/client/utils/changes.ts

@@ -0,0 +1,60 @@
+import FlexChange, { ChangeDefinition } from 'sap/ui/fl/Change';
+import FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import { AddXMLChangeContent } from '../cpe/additional-change-info/add-xml-additional-info.js';
+import { ADD_XML_CHANGE } from '../cpe/changes/generic-change';
+
+type FlexXMLChange = FlexChange<AddXMLChangeContent>;
+type FlexBaseChange = Omit<FlexChange<unknown>, 'setContent'>;
+interface FlexLegacyBaseChange {
+    getDefinition: () => ChangeDefinition;
+}
+
+/**
+ * Extracts the list of changes from a flex command.
+ *
+ * @param command - The flex command from which to extract changes.
+ * @returns An array of flex changes associated with the command, or an empty array if no changes are available.
+ */
+export function getFlexChangeList(command?: FlexCommand): FlexBaseChange[] {
+    const changes = command?.getPreparedChange?.();
+    if (!changes) {
+        return [];
+    }
+    return Array.isArray(changes) ? changes : [changes];
+}
+
+/**
+ * Extracts the list of XML changes from a flex command, filtering only changes of type 'addXML'.
+ *
+ * @param command - The flex command from which to extract XML changes.
+ * @returns An array of flex XML changes associated with the command.
+ */
+export function getFlexXMLChangeList(command?: FlexCommand): FlexXMLChange[] {
+    return getFlexChangeList(command).filter(
+        (change): change is FlexXMLChange => change.getChangeType?.() === ADD_XML_CHANGE
+    );
+}
+
+/**
+ * Retrieves the change definition from a flex change object, supporting both modern and legacy UI5 APIs.
+ *
+ * In UI5 2.x, the change base class is a FlexObject exposing `convertToFileContent()`.
+ * In older UI5 versions (e.g. 1.96.x), the base class is `Change` which uses the now-deprecated
+ * `getDefinition()` method and lacks `convertToFileContent`. This function falls back to
+ * `getDefinition()` for backward compatibility with those older versions.
+ *
+ * @param change - The flex change object (modern FlexObject or legacy Change instance).
+ * @returns The change definition.
+ * @throws Error if the change object supports neither API.
+ */
+export function getChangeDefinition(change: FlexBaseChange | FlexLegacyBaseChange): ChangeDefinition {
+    if ('convertToFileContent' in change) {
+        return change.convertToFileContent();
+    }
+
+    if ('getDefinition' in change) {
+        return change.getDefinition();
+    }
+
+    throw new Error('Unsupported change object');
+}

package/dist/types/index.d.ts

@@ -98,7 +98,7 @@ export type TestConfigDefaults = {
     opa5: {
         path: '/test/opaTests.qunit.html';
         init: '/test/opaTests.qunit.js';
-        pattern: '/test/**/*Journey.{js,ts}';
+        pattern: '/test/**/*Journey{,.gen}.{js,ts}';
         framework: 'OPA5';
     };
     testsuite: {

package/package.json

@@ -10,7 +10,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "1.0.18",
+  "version": "1.0.21",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
     "mem-fs-editor": "9.4.0",
     "qrcode": "1.5.4",
     "@sap/bas-sdk": "3.13.7",
-    "@sap-ux/adp-tooling": "1.0.14",
+    "@sap-ux/adp-tooling": "1.0.15",
     "@sap-ux/btp-utils": "2.0.2",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@1.0.5",
     "@sap-ux/feature-toggle": "1.0.2",
@@ -54,7 +54,7 @@
     "nock": "14.0.11",
     "npm-run-all2": "8.0.4",
     "supertest": "7.2.2",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@1.0.18",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@1.0.21",
     "@sap-ux-private/playwright": "1.0.2",
     "@sap-ux/axios-extension": "2.0.3",
     "@sap-ux/store": "2.0.1",