@sap/ux-ui5-tooling 1.20.4 → 1.22.0

package/dist/preview-middleware/dist/client/cpe/changes/service.js

@@ -0,0 +1,527 @@
+"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();
+    configPropertyPath = new Set();
+    /**
+     *
+     * @param options ui5 adaptation options.
+     * @param ui5 facade for ui5 framework methods.
+     * @param selectionService selection service instance.
+     */
+    constructor(options) {
+      super();
+      this.options = options;
+    }
+
+    /**
+     * 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);
+            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));
+        }
+      });
+      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 {
+          // 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;
+        }
+      }))).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;
+        }
+        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();
+    }
+
+    /**
+     * 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));
+          }
+        }
+        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();
+        }
+
+        // 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;
+              }, [])
+            }
+          });
+          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;
+    }
+
+    /**
+     * Get all pending configuration changes.
+     *
+     * @returns array of pending generic changes
+     */
+    getAllPendingConfigPropertyPath() {
+      return this.configPropertyPath ?? new Set();
+    }
+
+    /**
+     * 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?.(), this.options.rta.getRootControlInstance());
+      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, []);
+        }
+        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') {
+          const configChangePath = changeDefinition.content.entityPropertyChange.propertyPath;
+          if (genericChange.isActive) {
+            this.configPropertyPath.add(configChangePath);
+          } else {
+            // remove value from set if change is undone
+            this.configPropertyPath.delete(configChangePath);
+          }
+          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;
+      }
+    }
+
+    /**
+     * 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 {
+          continue;
+        }
+      }
+      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();
+    }
+    onStackChange(handler) {
+      this.addEventListener(STACK_CHANGE_EVENT, handler);
+    }
+  }
+  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