@sap/ux-ui5-tooling 1.20.4 → 1.22.0

package/dist/preview-middleware/dist/client/adp/utils.ts

@@ -0,0 +1,200 @@
+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';
+import type { Manifest } from 'sap/ui/rta/RuntimeAuthoring';
+import RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+
+import { isLowerThanMinimalUi5Version, Ui5VersionInfo } from '../utils/version';
+
+export interface Deferred<T> {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: unknown) => void;
+}
+
+export interface FragmentChange {
+    content: {
+        fragmentPath: string;
+    };
+}
+
+export type ReuseComponentChecker = (controlId: string) => boolean;
+
+let reuseComponentChecker: ReuseComponentChecker | undefined;
+
+/**
+ * Resets the reuse component checker.
+ */
+export function resetReuseComponentChecker(): void {
+    reuseComponentChecker = undefined;
+}
+
+/**
+ * Defers the resolution of the promise, stores resolve/reject functions so that they can be accessed at a later stage.
+ *
+ * @description A Deferred object contains an unresolved promise along with the functions to resolve or reject that promise.
+ *
+ * @returns {Deferred} Deferred object
+ */
+export function createDeferred<T>(): Deferred<T> {
+    let resolve: Deferred<T>['resolve'] | null = null;
+    let reject: Deferred<T>['reject'] | null = null;
+
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    if (resolve === null || reject === null) {
+        throw new Error('Failed to initialize resolve and reject functions.');
+    }
+
+    return { promise, resolve, reject };
+}
+
+/**
+ * Checks for the existence of a change associated with a specific fragment name in the RTA command stack.
+ *
+ * @param {RuntimeAuthoring} rta - The RuntimeAuthoring instance to check for existing changes.
+ * @param {string} commandName - The name of the fragment to check for existing changes.
+ * @param {string} propertyPath - The path to the property as string separated by dot in the change definition to check.
+ * @param {string} propertyValue - The value to match against the specified property.
+ * @returns {Promise<boolean>} A promise that resolves to `true` if a matching change is found, otherwise `false`.
+ */
+export function checkForExistingChange(
+    rta: RuntimeAuthoring,
+    commandName: string,
+    propertyPath: string,
+    propertyValue: string
+): boolean {
+    const allCommands = rta.getCommandStack().getCommands();
+
+    return allCommands.some((command: FlexCommand) => {
+        if (typeof command.getCommands === 'function') {
+            const subCommand = command.getCommands().find((c: FlexCommand) => c?.getProperty('name') === commandName);
+
+            return subCommand && matchesChangeProperty(subCommand, propertyPath, propertyValue);
+        } else {
+            return matchesChangeProperty(command, propertyPath, propertyValue);
+        }
+    });
+}
+
+/**
+ * Retrieves the value of a nested property from an object based on a dot-separated path.
+ *
+ * @param obj - The object from which to retrieve the nested property.
+ * @param path - A dot-separated string representing the path to the desired property.
+ *               For example, "a.b.c" will attempt to access `obj.a.b.c`.
+ * @returns The value of the nested property if it exists, or `undefined` if any part of the path is invalid.
+ */
+export function getNestedProperty(obj: object, path: string): unknown {
+    return path.split('.').reduce((acc: unknown, key) => {
+        return (acc as Record<string, unknown>)?.[key];
+    }, obj);
+}
+
+/**
+ * Checks if a specific property in the command's change matches the given value.
+ *
+ * @param {FlexCommand} command - The command object containing the prepared change to be examined.
+ * @param {string} propertyPath - The path to the property in the change definition to check.
+ * @param {string} propertyValue - The value to match against the specified property.
+ * @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;
+}
+interface ControllerInfo {
+    controllerName: string;
+    viewId: string;
+}
+
+/**
+ * Gets controller name and view ID for the given UI5 control.
+ *
+ * @param control UI5 control.
+ * @returns The controller name and view ID.
+ */
+export function getControllerInfoForControl(control: ManagedObject): ControllerInfo {
+    const view = FlexUtils.getViewForControl(control);
+    const moduleName = view?.getControllerModuleName?.();
+    const controllerName = moduleName ? `module:${moduleName}` : view.getController()?.getMetadata().getName();
+    const viewId = view.getId();
+    return { controllerName, viewId };
+}
+
+/**
+ * Gets controller name and view ID for the given overlay control.
+ *
+ * @param overlayControl The overlay control.
+ * @returns The controller name and view ID.
+ */
+
+export function getControllerInfo(overlayControl: ElementOverlay): ControllerInfo {
+    const control = overlayControl.getElement();
+    return getControllerInfoForControl(control);
+}
+
+/**
+ * Gets the reuse component checker function.
+ *
+ * @param ui5VersionInfo UI5 version information.
+ * @returns The reuse component checker function.
+ */
+export async function getReuseComponentChecker(ui5VersionInfo: Ui5VersionInfo): Promise<ReuseComponentChecker> {
+    if (reuseComponentChecker) {
+        return reuseComponentChecker;
+    }
+
+    let reuseComponentApi: typeof IsReuseComponentApi;
+    if (!isLowerThanMinimalUi5Version(ui5VersionInfo, { major: 1, minor: 134 })) {
+        reuseComponentApi = (await import('sap/ui/rta/util/isReuseComponent')).default;
+    }
+
+    reuseComponentChecker = function isReuseComponent(controlId: string): boolean {
+        const ui5Control = getControlById(controlId);
+        if (!ui5Control) {
+            return false;
+        }
+
+        const component = FlexUtils.getComponentForControl(ui5Control);
+
+        if (reuseComponentApi) {
+            return reuseComponentApi(component);
+        }
+
+        if (!component) {
+            return false;
+        }
+
+        const appComponent = FlexUtils.getAppComponentForControl(component);
+        if (!appComponent) {
+            return false;
+        }
+
+        const manifest = component.getManifest() as Manifest;
+        const appManifest = appComponent.getManifest() as Manifest;
+        const componentName = manifest?.['sap.app']?.id;
+
+        // Look for component name in component usages of app component manifest
+        const componentUsages = appManifest?.['sap.ui5']?.componentUsages;
+        return Object.values(componentUsages || {}).some((componentUsage) => {
+            return componentUsage.name === componentName;
+        });
+    };
+
+    return reuseComponentChecker;
+}

package/dist/preview-middleware/dist/client/cpe/additional-change-info/add-xml-additional-info.js

@@ -0,0 +1,85 @@
+"use strict";
+
+sap.ui.define(["../../utils/core", "../../adp/quick-actions/control-types"], function (____utils_core, ____adp_quick_actions_control_types) {
+  "use strict";
+
+  const getControlBySelector = ____utils_core["getControlBySelector"];
+  const findViewByControl = ____utils_core["findViewByControl"];
+  const ANALYTICAL_TABLE_TYPE = ____adp_quick_actions_control_types["ANALYTICAL_TABLE_TYPE"];
+  const GRID_TABLE_TYPE = ____adp_quick_actions_control_types["GRID_TABLE_TYPE"];
+  const MDC_TABLE_TYPE = ____adp_quick_actions_control_types["MDC_TABLE_TYPE"];
+  const TREE_TABLE_TYPE = ____adp_quick_actions_control_types["TREE_TABLE_TYPE"];
+  function getAddXMLAdditionalInfo(change, appComponent) {
+    const selector = change.getSelector();
+    const targetAggregation = change.getContent()?.targetAggregation ?? '';
+    const targetControl = getControlBySelector(selector, appComponent);
+    const controlType = targetControl?.getMetadata().getName() ?? '';
+    const templateName = getFragmentTemplateName(selector, targetAggregation, appComponent);
+    const viewName = targetControl ? findViewByControl(targetControl)?.getViewName() ?? '' : '';
+    const result = {};
+    if (templateName) {
+      result.templateName = templateName;
+    }
+    if (controlType && targetAggregation && viewName) {
+      result.targetAggregation = targetAggregation;
+      result.controlType = controlType;
+      result.viewName = viewName;
+    }
+    return Object.keys(result).length > 0 ? result : undefined;
+  }
+  function getFragmentTemplateName(selector, targetAggregation, appComponent) {
+    const control = getControlBySelector(selector, appComponent);
+    if (!control) {
+      return '';
+    }
+    const controlName = control.getMetadata().getName();
+    if (controlName === 'sap.uxap.ObjectPageLayout' && targetAggregation === 'sections') {
+      return 'OBJECT_PAGE_CUSTOM_SECTION';
+    } else if (isCustomAction(controlName, targetAggregation)) {
+      return 'CUSTOM_ACTION';
+    } else if (isObjectPageHeaderField(control, controlName, targetAggregation)) {
+      return 'OBJECT_PAGE_HEADER_FIELD';
+    } else if (targetAggregation === 'columns') {
+      switch (controlName) {
+        case MDC_TABLE_TYPE:
+          return 'V4_MDC_TABLE_COLUMN';
+        case TREE_TABLE_TYPE:
+        case GRID_TABLE_TYPE:
+          return 'GRID_TREE_TABLE_COLUMN';
+        case ANALYTICAL_TABLE_TYPE:
+          return 'ANALYTICAL_TABLE_COLUMN';
+        default:
+          return '';
+      }
+    } else if (controlName === 'sap.ui.mdc.Table' && targetAggregation === 'actions') {
+      return 'TABLE_ACTION';
+    }
+    return '';
+  }
+  function isCustomAction(controlName, targetAggregation) {
+    if (['sap.f.DynamicPageTitle', 'sap.uxap.ObjectPageHeader', 'sap.uxap.ObjectPageDynamicHeaderTitle'].includes(controlName)) {
+      return targetAggregation === 'actions';
+    } else if (controlName === 'sap.m.OverflowToolbar' || controlName === 'sap.m.Toolbar') {
+      return targetAggregation === 'content';
+    }
+    return false;
+  }
+  function isObjectPageHeaderField(control, controlName, targetAggregation) {
+    if (controlName === 'sap.uxap.ObjectPageLayout') {
+      return targetAggregation === 'headerContent';
+    } else if (controlName === 'sap.m.FlexBox') {
+      const parentName = control.getParent()?.getMetadata().getName();
+      if (parentName === 'sap.uxap.ObjectPageDynamicHeaderContent' || parentName === 'sap.uxap.ObjectPageLayout') {
+        return targetAggregation === 'items';
+      }
+    }
+    return false;
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.getAddXMLAdditionalInfo = getAddXMLAdditionalInfo;
+  __exports.getFragmentTemplateName = getFragmentTemplateName;
+  return __exports;
+});
+//# sourceMappingURL=add-xml-additional-info.js.map

package/dist/preview-middleware/dist/client/cpe/additional-change-info/add-xml-additional-info.ts

@@ -0,0 +1,107 @@
+import FlexChange from 'sap/ui/fl/Change';
+import { getControlBySelector, findViewByControl } from '../../utils/core';
+import {
+    ANALYTICAL_TABLE_TYPE,
+    GRID_TABLE_TYPE,
+    MDC_TABLE_TYPE,
+    TREE_TABLE_TYPE
+} from '../../adp/quick-actions/control-types';
+import Element from 'sap/ui/core/Element';
+import type Component from 'sap/ui/core/Component';
+import type Selector from 'sap/ui/fl/Selector';
+
+export type AddXMLAdditionalInfo = {
+    templateName?: string;
+    targetAggregation?: string;
+    controlType?: string;
+    viewName?: string;
+};
+
+export type AddXMLChangeContent = {
+    targetAggregation?: string;
+};
+
+export function getAddXMLAdditionalInfo(
+    change: FlexChange<AddXMLChangeContent>,
+    appComponent?: Component
+): AddXMLAdditionalInfo | undefined {
+    const selector = change.getSelector();
+    const targetAggregation = change.getContent()?.targetAggregation ?? '';
+    const targetControl = getControlBySelector(selector, appComponent);
+    const controlType = targetControl?.getMetadata().getName() ?? '';
+    const templateName = getFragmentTemplateName(selector, targetAggregation, appComponent);
+    const viewName = targetControl ? (findViewByControl(targetControl)?.getViewName() ?? '') : '';
+
+    const result: AddXMLAdditionalInfo = {};
+    if (templateName) {
+        result.templateName = templateName;
+    }
+    if (controlType && targetAggregation && viewName) {
+        result.targetAggregation = targetAggregation;
+        result.controlType = controlType;
+        result.viewName = viewName;
+    }
+    
+    return Object.keys(result).length > 0 ? result : undefined;
+}
+
+export function getFragmentTemplateName(
+    selector: Selector | undefined,
+    targetAggregation: string,
+    appComponent?: Component
+): string {
+    const control = getControlBySelector(selector, appComponent);
+
+    if (!control) {
+        return '';
+    }
+
+    const controlName = control.getMetadata().getName();
+    if (controlName === 'sap.uxap.ObjectPageLayout' && targetAggregation === 'sections') {
+        return 'OBJECT_PAGE_CUSTOM_SECTION';
+    } else if (isCustomAction(controlName, targetAggregation)) {
+        return 'CUSTOM_ACTION';
+    } else if (isObjectPageHeaderField(control, controlName, targetAggregation)) {
+        return 'OBJECT_PAGE_HEADER_FIELD';
+    } else if (targetAggregation === 'columns') {
+        switch (controlName) {
+            case MDC_TABLE_TYPE:
+                return 'V4_MDC_TABLE_COLUMN';
+            case TREE_TABLE_TYPE:
+            case GRID_TABLE_TYPE:
+                return 'GRID_TREE_TABLE_COLUMN';
+            case ANALYTICAL_TABLE_TYPE:
+                return 'ANALYTICAL_TABLE_COLUMN';
+            default:
+                return '';
+        }
+    } else if (controlName === 'sap.ui.mdc.Table' && targetAggregation === 'actions') {
+        return 'TABLE_ACTION';
+    }
+    return '';
+}
+
+function isCustomAction(controlName: string, targetAggregation: string): boolean {
+    if (
+        ['sap.f.DynamicPageTitle', 'sap.uxap.ObjectPageHeader', 'sap.uxap.ObjectPageDynamicHeaderTitle'].includes(
+            controlName
+        )
+    ) {
+        return targetAggregation === 'actions';
+    } else if (controlName === 'sap.m.OverflowToolbar' || controlName === 'sap.m.Toolbar') {
+        return targetAggregation === 'content';
+    }
+    return false;
+}
+
+function isObjectPageHeaderField(control: Element, controlName: string, targetAggregation: string): boolean {
+    if (controlName === 'sap.uxap.ObjectPageLayout') {
+        return targetAggregation === 'headerContent';
+    } else if (controlName === 'sap.m.FlexBox') {
+        const parentName = control.getParent()?.getMetadata().getName();
+        if (parentName === 'sap.uxap.ObjectPageDynamicHeaderContent' || parentName === 'sap.uxap.ObjectPageLayout') {
+            return targetAggregation === 'items';
+        }
+    }
+    return false;
+}

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

@@ -0,0 +1,66 @@
+"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"], function (CommandFactory, ___sap_ux_private_control_property_editor_common, ___validator, ____utils_fe_v4) {
+  "use strict";
+
+  const PropertyType = ___sap_ux_private_control_property_editor_common["PropertyType"];
+  const validateBindingModel = ___validator["validateBindingModel"];
+  const createManifestPropertyChange = ____utils_fe_v4["createManifestPropertyChange"];
+  /**
+   * 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/app descriptor property  of a control
+   */
+  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) {
+        await 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 command = await createManifestPropertyChange(modifiedControl, flexSettings, {
+        [change.propertyName]: change.value
+      });
+      if (command) {
+        await rta.getCommandStack().pushAndExecute(command);
+      } else {
+        return;
+      }
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.applyChange = applyChange;
+  return __exports;
+});
+//# sourceMappingURL=flex-change.js.map

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

@@ -0,0 +1,66 @@
+import type FlexCommand from 'sap/ui/rta/command/FlexCommand';
+import CommandFactory from 'sap/ui/rta/command/CommandFactory';
+import { PropertyType, type PropertyChange } from '@sap-ux-private/control-property-editor-common';
+import type { UI5AdaptationOptions } from '../types';
+import { validateBindingModel } from './validator';
+import { createManifestPropertyChange } from '../../utils/fe-v4';
+/**
+ * Function to check a give value is a binding expression.
+ *
+ * @param value value to be checked.
+ * @returns boolean
+ */
+function isBindingExpression(value: string): boolean {
+    return value.includes('{') && value.includes('}') && value.indexOf('{') < value.indexOf('}');
+}
+
+/**
+ *
+ * @param options UI5 adaptation options
+ * @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;
+    }
+
+    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) {
+            await 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 command = await createManifestPropertyChange(modifiedControl, flexSettings, {
+            [change.propertyName]: change.value
+        });
+        if (command) {
+            await rta.getCommandStack().pushAndExecute(command);
+        } else {
+            return;
+        }
+    }
+}