@sap-ux/preview-middleware 0.16.111 → 0.16.113

package/dist/client/cpe/changes/flex-change.js

@@ -1,53 +1,62 @@
-"use strict";
-
-sap.ui.define(["sap/ui/rta/command/CommandFactory", "./validator"], function (CommandFactory, ___validator) {
-  "use strict";
-
-  const validateBindingModel = ___validator["validateBindingModel"];
-  /**
-   * Function to check a give value is a binding expression.
-   *
-   * @param value value to be checked.
-   * @returns boolean
-   */
-  function isBindingExpression(value) {
-    return value.includes('{') && value.includes('}') && value.indexOf('{') < value.indexOf('}');
-  }
-
-  /**
-   *
-   * @param options UI5 adaptation options
-   * @param change changed property of a control
-   */
-  async function applyChange(options, change) {
-    const {
-      rta
-    } = options;
-    const modifiedControl = sap.ui.getCore().byId(change.controlId);
-    if (!modifiedControl) {
-      return;
+'use strict';
+sap.ui.define([
+    'sap/ui/rta/command/CommandFactory',
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './validator',
+    '../../utils/fe-v4',
+    '../utils'
+], function (CommandFactory, ___sap_ux_private_control_property_editor_common, ___validator, ____utils_fe_v4, ___utils) {
+    'use strict';
+    const PropertyType = ___sap_ux_private_control_property_editor_common['PropertyType'];
+    const validateBindingModel = ___validator['validateBindingModel'];
+    const getReference = ____utils_fe_v4['getReference'];
+    const getOverlay = ___utils['getOverlay'];
+    function isBindingExpression(value) {
+        return value.includes('{') && value.includes('}') && value.indexOf('{') < value.indexOf('}');
     }
-    const isBindingString = typeof change.value === 'string' && isBindingExpression(change.value);
-    const modifiedControlModifiedProperties = modifiedControl.getMetadata().getAllProperties()[change.propertyName];
-    const isBindingModel = isBindingString && modifiedControlModifiedProperties?.type === 'string';
-    const flexSettings = rta.getFlexSettings();
-    const changeType = isBindingString ? 'BindProperty' : 'Property';
-    if (isBindingModel) {
-      validateBindingModel(modifiedControl, change.value);
+    async function applyChange(options, change) {
+        const {rta} = options;
+        const isBindingString = typeof change.value === 'string' && isBindingExpression(change.value);
+        const flexSettings = rta.getFlexSettings();
+        const modifiedControl = sap.ui.getCore().byId(change.controlId);
+        if (!modifiedControl) {
+            return;
+        }
+        if (change.propertyType === PropertyType.ControlProperty) {
+            const modifiedControlModifiedProperties = modifiedControl.getMetadata().getAllProperties()[change.propertyName];
+            const isBindingModel = isBindingString && modifiedControlModifiedProperties?.type === 'string';
+            const changeType = isBindingString ? 'BindProperty' : 'Property';
+            if (isBindingModel) {
+                validateBindingModel(modifiedControl, change.value);
+            }
+            const property = isBindingString ? 'newBinding' : 'newValue';
+            const modifiedValue = {
+                generator: flexSettings.generator,
+                propertyName: change.propertyName,
+                [property]: change.value
+            };
+            const command = await CommandFactory.getCommandFor(modifiedControl, changeType, modifiedValue, null, flexSettings);
+            await rta.getCommandStack().pushAndExecute(command);
+        } else if (change.propertyType === PropertyType.Configuration) {
+            const overlay = getOverlay(modifiedControl);
+            if (!overlay) {
+                return;
+            }
+            const overlayData = overlay?.getDesignTimeMetadata().getData();
+            const manifestPropertyPath = overlayData.manifestPropertyPath(modifiedControl);
+            const [manifestPropertyChange] = overlayData.manifestPropertyChange({ [change.propertyName]: change.value }, manifestPropertyPath, modifiedControl);
+            const modifiedValue = {
+                reference: getReference(modifiedControl),
+                appComponent: manifestPropertyChange.appComponent,
+                changeType: manifestPropertyChange.changeSpecificData.appDescriptorChangeType,
+                parameters: manifestPropertyChange.changeSpecificData.content.parameters,
+                selector: manifestPropertyChange.selector
+            };
+            const command = await CommandFactory.getCommandFor(modifiedControl, 'appDescriptor', modifiedValue, null, flexSettings);
+            await rta.getCommandStack().pushAndExecute(command);
+        }
     }
-    const property = isBindingString ? 'newBinding' : 'newValue';
-    const modifiedValue = {
-      generator: flexSettings.generator,
-      propertyName: change.propertyName,
-      [property]: change.value
-    };
-    const command = await CommandFactory.getCommandFor(modifiedControl, changeType, modifiedValue, null, flexSettings);
-    await rta.getCommandStack().pushAndExecute(command);
-  }
-  var __exports = {
-    __esModule: true
-  };
-  __exports.applyChange = applyChange;
-  return __exports;
-});
-//# sourceMappingURL=flex-change.js.map
+    var __exports = { __esModule: true };
+    __exports.applyChange = applyChange;
+    return __exports;
+});

package/dist/client/cpe/changes/flex-change.ts

@@ -1,8 +1,10 @@
 import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
 import CommandFactory from 'sap/ui/rta/command/CommandFactory';
-import type { PropertyChange } from '@sap-ux-private/control-property-editor-common';
+import { PropertyType, type PropertyChange } from '@sap-ux-private/control-property-editor-common';
 import type { UI5AdaptationOptions } from '../types';
 import { validateBindingModel } from './validator';
+import { getReference } from '../../utils/fe-v4';
+import { getOverlay } from '../utils';
 
 /**
  * Function to check a give value is a binding expression.
@@ -17,39 +19,70 @@ function isBindingExpression(value: string): boolean {
 /**
  *
  * @param options UI5 adaptation options
- * @param change changed property of a control
+ * @param change changed property/app descriptor property  of a control
  */
 export async function applyChange(options: UI5AdaptationOptions, change: PropertyChange): Promise<void> {
     const { rta } = options;
+
+    const isBindingString = typeof change.value === 'string' && isBindingExpression(change.value);
+    const flexSettings = rta.getFlexSettings();
     const modifiedControl = sap.ui.getCore().byId(change.controlId);
     if (!modifiedControl) {
         return;
     }
 
-    const isBindingString = typeof change.value === 'string' && isBindingExpression(change.value);
-    const modifiedControlModifiedProperties = modifiedControl.getMetadata().getAllProperties()[change.propertyName];
-    const isBindingModel = isBindingString && modifiedControlModifiedProperties?.type === 'string';
-    const flexSettings = rta.getFlexSettings();
-    const changeType = isBindingString ? 'BindProperty' : 'Property';
+    if (change.propertyType === PropertyType.ControlProperty) {
+        const modifiedControlModifiedProperties = modifiedControl.getMetadata().getAllProperties()[change.propertyName];
+        const isBindingModel = isBindingString && modifiedControlModifiedProperties?.type === 'string';
+        const changeType = isBindingString ? 'BindProperty' : 'Property';
 
-    if (isBindingModel) {
-        validateBindingModel(modifiedControl, change.value as string);
-    }
+        if (isBindingModel) {
+            validateBindingModel(modifiedControl, change.value as string);
+        }
+
+        const property = isBindingString ? 'newBinding' : 'newValue';
+        const modifiedValue = {
+            generator: flexSettings.generator,
+            propertyName: change.propertyName,
+            [property]: change.value
+        };
+
+        const command = await CommandFactory.getCommandFor<FlexCommand>(
+            modifiedControl,
+            changeType,
+            modifiedValue,
+            null,
+            flexSettings
+        );
+        await rta.getCommandStack().pushAndExecute(command);
+    } else if (change.propertyType === PropertyType.Configuration) {
+        const overlay = getOverlay(modifiedControl);
+        if (!overlay) {
+            return;
+        }
+        const overlayData = overlay?.getDesignTimeMetadata().getData();
+        const manifestPropertyPath = overlayData.manifestPropertyPath(modifiedControl);
+        const [manifestPropertyChange] = overlayData.manifestPropertyChange(
+            { [change.propertyName]: change.value },
+            manifestPropertyPath,
+            modifiedControl
+        );
 
-    const property = isBindingString ? 'newBinding' : 'newValue';
-    const modifiedValue = {
-        generator: flexSettings.generator,
-        propertyName: change.propertyName,
-        [property]: change.value
-    };
-
-    const command = await CommandFactory.getCommandFor<FlexCommand>(
-        modifiedControl,
-        changeType,
-        modifiedValue,
-        null,
-        flexSettings
-    );
-
-    await rta.getCommandStack().pushAndExecute(command);
+        const modifiedValue = {
+            reference: getReference(modifiedControl),
+            appComponent: manifestPropertyChange.appComponent,
+            changeType: manifestPropertyChange.changeSpecificData.appDescriptorChangeType,
+            parameters: manifestPropertyChange.changeSpecificData.content.parameters,
+            selector: manifestPropertyChange.selector
+        };
+
+        const command = await CommandFactory.getCommandFor(
+            modifiedControl,
+            'appDescriptor',
+            modifiedValue,
+            null,
+            flexSettings
+        );
+        await rta.getCommandStack().pushAndExecute(command);
+    }
 }

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

@@ -8,8 +8,10 @@ sap.ui.define([
     '../../utils/error',
     '../../utils/version',
     'sap/m/MessageToast',
-    '../../i18n'
-], function (___sap_ux_private_control_property_editor_common, ___flex_change, Log, ___rta_service, JsControlTreeModifier, ____utils_error, ____utils_version, MessageToast, ____i18n) {
+    '../../i18n',
+    '../../utils/core',
+    '../../utils/fe-v4'
+], function (___sap_ux_private_control_property_editor_common, ___flex_change, Log, ___rta_service, JsControlTreeModifier, ____utils_error, ____utils_version, MessageToast, ____i18n, ____utils_core, ____utils_fe_v4) {
     'use strict';
     function __ui5_require_async(path) {
         return new Promise(function (resolve, reject) {
@@ -32,12 +34,21 @@ sap.ui.define([
     const reloadApplication = ___sap_ux_private_control_property_editor_common['reloadApplication'];
     const setApplicationRequiresReload = ___sap_ux_private_control_property_editor_common['setApplicationRequiresReload'];
     const save = ___sap_ux_private_control_property_editor_common['save'];
+    const CONFIGURATION_CHANGE_KIND = ___sap_ux_private_control_property_editor_common['CONFIGURATION_CHANGE_KIND'];
+    const PropertyType = ___sap_ux_private_control_property_editor_common['PropertyType'];
     const applyChange = ___flex_change['applyChange'];
     const modeAndStackChangeHandler = ___rta_service['modeAndStackChangeHandler'];
     const getError = ____utils_error['getError'];
     const isLowerThanMinimalUi5Version = ____utils_version['isLowerThanMinimalUi5Version'];
     const getUi5Version = ____utils_version['getUi5Version'];
     const getTextBundle = ____i18n['getTextBundle'];
+    const getControlById = ____utils_core['getControlById'];
+    const isA = ____utils_core['isA'];
+    const getConfigMapControlIdMap = ____utils_fe_v4['getConfigMapControlIdMap'];
+    const STACK_CHANGE_EVENT = 'STACK_CHANGED';
+    const PROPRTY_CHANGE = 'propertyChange';
+    const PROPRTY_BINDING_CHANGE = 'propertyBindingChange';
+    const MANIFEST_V4_CHANGE = 'appdescr_fe_changePageConfiguration';
     function assertProperties(properties, target) {
         for (const property of properties) {
             const value = target[property];
@@ -56,25 +67,45 @@ sap.ui.define([
         assertProperties(['id'], change.selector);
         assertProperties(['property'], change.content);
     }
+    function assertManifestChange(change) {
+        assertProperties([
+            'fileName',
+            'content',
+            'creation'
+        ], change);
+        assertProperties([
+            'page',
+            'entityPropertyChange'
+        ], change.content);
+        assertProperties([
+            'propertyPath',
+            'operation',
+            'propertyValue'
+        ], change.content.entityPropertyChange);
+    }
     function modifyRTAErrorMessage(errorMessage, id, type) {
         return errorMessage.replace('Error: Applying property changes failed:', '').replace(`${ type }#${ id }`, '');
     }
-    class ChangeService {
+    function getCompactV4ConfigPath(propertyPathSeg) {
+        return propertyPathSeg.join('/').replace(/^controlConfiguration\/(?:([^/]+\/))?@[^/]+\.v1\./, '$1');
+    }
+    class ChangeService extends EventTarget {
         savedChanges = [];
         changesRequiringReload = 0;
         pendingChanges = [];
         changedFiles = {};
         eventStack = [];
-        constructor(options, selectionService) {
+        pendingConfigChangeMap = new Map();
+        configPropertyControlIdMap = new Map();
+        constructor(options) {
+            super();
             this.options = options;
-            this.selectionService = selectionService;
         }
         async init(sendAction, subscribe) {
             this.sendAction = sendAction;
             subscribe(async action => {
                 if (changeProperty.match(action)) {
                     try {
-                        this.selectionService.applyControlPropertyChange(action.payload.controlId, action.payload.propertyName);
                         await applyChange(this.options, action.payload);
                     } catch (exception) {
                         let name = '';
@@ -111,6 +142,26 @@ sap.ui.define([
                 pending: this.pendingChanges ?? []
             }));
         }
+        getSavedConfigurationChange(change) {
+            assertManifestChange(change);
+            if ([change.content.entityPropertyChange.propertyValue].every(item => item === undefined || item === null)) {
+                throw new Error('Invalid change, missing property value on change file');
+            }
+            const propertyPathSegments = change.content.entityPropertyChange.propertyPath.split('/');
+            const propertyName = propertyPathSegments.pop();
+            const configMapKey = getConfigMapControlIdMap(change.content.page, propertyPathSegments);
+            const controlIds = this.configPropertyControlIdMap?.get(configMapKey) || [];
+            return {
+                type: 'saved',
+                kind: 'configuration',
+                fileName: change.fileName,
+                controlIds,
+                propertyPath: getCompactV4ConfigPath(propertyPathSegments) || change.content.page,
+                propertyName: propertyName ?? '',
+                value: change.content.entityPropertyChange.propertyValue,
+                timestamp: new Date(change.creation).getTime()
+            };
+        }
         async fetchSavedChanges() {
             this.changedFiles = {};
             const savedChangesResponse = await fetch(FlexChangesEndPoints.changes + `?_=${ Date.now() }`);
@@ -119,30 +170,34 @@ sap.ui.define([
                 const 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');
+                    if (change.changeType === MANIFEST_V4_CHANGE) {
+                        return this.getSavedConfigurationChange(change);
+                    } else {
+                        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() : '',
+                            changeType: change.changeType
+                        };
                     }
-                    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() : '',
-                        changeType: change.changeType
-                    };
                 } catch (error) {
                     if (change.fileName) {
                         this.changedFiles[change.fileName] = change;
@@ -182,6 +237,7 @@ sap.ui.define([
                 if (change.kind === 'control') {
                     return change.controlId === controlId;
                 }
+                return false;
             }).map(change => fetch(FlexChangesEndPoints.changes, {
                 method: 'DELETE',
                 headers: { 'Content-Type': 'application/json' },
@@ -201,6 +257,7 @@ sap.ui.define([
                 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 {
@@ -222,10 +279,7 @@ sap.ui.define([
                 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) => [
-                        'appdescr_fe_changePageConfiguration',
-                        'appdescr_ui_generic_app_changePageConfiguration'
-                    ].includes(change.changeType) ? sum + 1 : sum, 0);
+                    const changesRequiringReload = this.pendingChanges.reduce((sum, change) => change.kind === CONFIGURATION_CHANGE_KIND || change.changeType === 'appdescr_ui_generic_app_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));
@@ -235,18 +289,70 @@ sap.ui.define([
                 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(item => item.kind === 'configuration');
+                if (configurationChanges.length) {
+                    const stackChangeEvent = new CustomEvent(STACK_CHANGE_EVENT, {
+                        detail: {
+                            controls: configurationChanges.reduce((acc, item) => {
+                                const controls = (item.controlIds || []).map(id => {
+                                    return getControlById(id);
+                                }).filter(ui5Element => isA('sap.ui.core.Element', ui5Element));
+                                acc.push(...controls);
+                                return acc;
+                            }, [])
+                        }
+                    });
+                    this.dispatchEvent(stackChangeEvent);
+                }
                 this.updateStack();
                 handleStackChange();
             };
         }
+        getConfigurationPropertyValue(controlId, propertyName) {
+            const pendingChanges = this.pendingConfigChangeMap?.get(controlId);
+            return (pendingChanges || []).find(item => item.isActive && item.propertyName === propertyName)?.value;
+        }
+        async updateConfigurationProps(configPropertyControlIdMap) {
+            this.configPropertyControlIdMap = configPropertyControlIdMap;
+            await this.fetchSavedChanges();
+            this.updateStack();
+        }
         async handleCommand(command, inactiveCommandCount, index, pendingChanges) {
             const pendingChange = await this.prepareChangeType(command, inactiveCommandCount, index);
             if (pendingChange) {
                 pendingChanges.push(pendingChange);
             }
         }
+        preparev4ConfigurationChange(command, value, fileName, index, inactiveCommandCount) {
+            const {entityPropertyChange, page} = command.getProperty('parameters');
+            const controlId = this.getCommandSelectorId(command) ?? '';
+            const propertyPathSegments = entityPropertyChange.propertyPath.split('/');
+            const propName = propertyPathSegments.pop();
+            const key = getConfigMapControlIdMap(page, propertyPathSegments);
+            const isActive = index >= inactiveCommandCount;
+            const controlIds = this.configPropertyControlIdMap?.get(key) || [controlId];
+            const result = {
+                type: 'pending',
+                kind: 'configuration',
+                controlIds,
+                propertyPath: getCompactV4ConfigPath(propertyPathSegments) || page,
+                propertyName: propName,
+                isActive,
+                value,
+                fileName
+            };
+            for (const id of result.controlIds) {
+                if (!this.pendingConfigChangeMap.get(id)) {
+                    this.pendingConfigChangeMap.set(id, []);
+                }
+                const pendingChanges = this.pendingConfigChangeMap.get(id);
+                pendingChanges?.push(result);
+            }
+            return result;
+        }
         async prepareChangeType(command, inactiveCommandCount, index) {
             let result;
             let value = '';
@@ -263,6 +369,9 @@ sap.ui.define([
             case 'propertyBindingChange':
                 value = command.getProperty('newBinding');
                 break;
+            case 'appdescr_fe_changePageConfiguration':
+                value = command.getProperty('parameters').entityPropertyChange.propertyValue;
+                break;
             }
             const {fileName} = change.getDefinition();
             if ((changeType === 'propertyChange' || changeType === 'propertyBindingChange') && selectorId) {
@@ -271,12 +380,15 @@ sap.ui.define([
                     kind: 'property',
                     changeType,
                     controlId: selectorId,
+                    propertyType: PropertyType.ControlProperty,
                     propertyName: command.getProperty('propertyName'),
                     isActive: index >= inactiveCommandCount,
                     value,
                     controlName: command.getElement().getMetadata().getName().split('.').pop() ?? '',
                     fileName
                 };
+            } else if (changeType === 'appdescr_fe_changePageConfiguration') {
+                result = this.preparev4ConfigurationChange(command, value, fileName, index, inactiveCommandCount);
             } else {
                 result = {
                     type: 'pending',
@@ -359,13 +471,16 @@ sap.ui.define([
         }
         async syncOutlineChanges() {
             for (const change of this.savedChanges) {
-                if (change.kind !== 'unknown') {
+                if (change.kind !== 'unknown' && change.kind !== 'configuration') {
                     const flexObject = await this.getFlexObject(this.changedFiles[change.fileName]);
                     change.controlId = await this.getControlIdByChange(flexObject) ?? '';
                 }
             }
             this.updateStack();
         }
+        onStackChange(handler) {
+            this.addEventListener(STACK_CHANGE_EVENT, handler);
+        }
         async getFlexObject(change) {
             if (isLowerThanMinimalUi5Version(await getUi5Version(), {
                     major: 1,
@@ -379,6 +494,7 @@ sap.ui.define([
         }
     }
     var __exports = { __esModule: true };
+    __exports.STACK_CHANGE_EVENT = STACK_CHANGE_EVENT;
     __exports.ChangeService = ChangeService;
     return __exports;
 });