@sap/ux-ui5-tooling 1.20.4 → 1.22.0

package/dist/preview-middleware/dist/client/cpe/control-data.ts

@@ -0,0 +1,400 @@
+import type { Control, ControlProperty } from '@sap-ux-private/control-property-editor-common';
+import {
+    BOOLEAN_VALUE_TYPE,
+    CHECKBOX_EDITOR_TYPE,
+    DROPDOWN_EDITOR_TYPE,
+    FLOAT_VALUE_TYPE,
+    INPUT_EDITOR_TYPE,
+    INTEGER_VALUE_TYPE,
+    PropertyType,
+    STRING_VALUE_TYPE,
+    convertCamelCaseToPascalCase
+} from '@sap-ux-private/control-property-editor-common';
+
+import Utils from 'sap/ui/fl/Utils';
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import type { MergedSetting, ManagedObjectMetadataProperties } from './utils';
+import { getManifestProperties } from './utils';
+import type { UI5ControlProperty } from './types';
+import DataType from 'sap/ui/base/DataType';
+import { getV4PageType } from '../utils/fe-v4';
+import type { ChangeService } from './changes';
+import type { TemplateType } from 'sap/ui/dt/DesignTimeMetadata';
+
+type AnalyzedType = Pick<UI5ControlProperty, 'isArray' | 'primitiveType' | 'ui5Type' | 'enumValues'>;
+
+/**
+ * A property is disabled if it is an array or the type is 'any'
+ * - since  we currently don't have a good editor for it Otherwise, it is enabled.
+ *
+ * @param analyzedType - analyzed property type
+ * @returns boolean
+ */
+function isPropertyEnabled(analyzedType: AnalyzedType): boolean {
+    return !(analyzedType.isArray || analyzedType.primitiveType === 'any');
+}
+
+/**
+ * Return if a control is enabled or not.
+ *
+ * @param analyzedType - analyzed property type
+ * @param hasStableId - given control has stable id.
+ * @param ignore - property that is ignored during design time
+ * @param controlOverlay - element overlay
+ * @returns boolean
+ */
+function isControlEnabled(
+    analyzedType: AnalyzedType,
+    hasStableId: boolean,
+    ignore: boolean,
+    controlOverlay?: ElementOverlay
+): boolean {
+    return (controlOverlay?.isSelectable() ?? false) && isPropertyEnabled(analyzedType) && hasStableId && !ignore;
+}
+
+/**
+ * Match 'src' or any string starting or ending with 'icon' (case insensitive;).
+ *
+ * @param name icon name
+ * @returns boolean
+ */
+function testIconPattern(name: string): boolean {
+    // replace `/src|.*icon$|^icon.*/i`.test(property.name);
+    // match 'src' or any string starting or ending with 'icon' (case insensitive;)
+    const nameLc = (name || '').toLowerCase();
+    return nameLc.indexOf('src') >= 0 || nameLc.startsWith('icon') || nameLc.endsWith('icon');
+}
+
+/**
+ * Analyze property type string | boolean | enum.
+ *
+ * @param property control property
+ * @returns AnalyzedType|undefined
+ */
+function analyzePropertyType(property: ManagedObjectMetadataProperties): AnalyzedType | undefined {
+    const analyzedType: AnalyzedType = {
+        primitiveType: 'any',
+        ui5Type: null,
+        enumValues: undefined,
+        isArray: false
+    };
+    const propertyType = property?.getType();
+    const typeName = propertyType?.getName();
+
+    if (!property || !propertyType || !typeName) {
+        return undefined;
+    }
+
+    // Check if array and determine property type (or component type)
+    if (typeName.indexOf('[]') > 0) {
+        analyzedType.primitiveType = typeName.substring(0, typeName.indexOf('[]'));
+        analyzedType.isArray = true;
+    }
+    // Return if object or void type
+    else if (['object', 'void', 'any'].includes(typeName)) {
+        analyzedType.primitiveType = typeName;
+    }
+    // Type of control property is an elementary simple type
+    else if (['boolean', 'string', 'int', 'float'].includes(typeName)) {
+        analyzedType.primitiveType = typeName;
+    }
+    // Control type is a sap.ui.base.DataType or an enumeration type
+    else {
+        // Determine type from iFrame
+        const propertyDataType = DataType.getType(typeName);
+
+        // type which is not a DataType such as Control is not supported
+        if (propertyDataType && !(propertyDataType instanceof DataType)) {
+            return analyzedType;
+        }
+        // enum values are created differently and use DataType as prototype, which only has stubs for instance functions -> getName returns undefined
+        // array and base types also return undefined, but we have already handled those above
+        // https://github.com/SAP/openui5/blob/203ce22763a76e28b7a422f6c635a42480f733f1/src/sap.ui.core/src/sap/ui/base/DataType.js#L430
+         
+        const name = (Object.getPrototypeOf(propertyDataType) as DataType).getName();
+        if (!name) {
+            analyzedType.primitiveType = 'enum';
+        } else {
+            analyzedType.primitiveType = name;
+        }
+        analyzedType.ui5Type = typeName;
+
+        // Determine base type for SAP types
+        if (analyzedType.primitiveType === 'enum' && typeof propertyDataType?.getEnumValues === 'function') {
+            analyzedType.enumValues = propertyDataType.getEnumValues();
+        }
+    }
+
+    return analyzedType;
+}
+
+function analyzeManifestProperty(property: MergedSetting): AnalyzedType | undefined {
+    const analyzedType: AnalyzedType = {
+        primitiveType: 'any',
+        ui5Type: null,
+        enumValues: undefined,
+        isArray: false
+    };
+
+    const propertyType = property.type;
+
+    if (!propertyType) {
+        return undefined;
+    }
+
+    if (['boolean', 'string', 'int', 'float'].includes(propertyType)) {
+        analyzedType.primitiveType = propertyType;
+    }
+
+    if (property.enums) {
+        analyzedType.primitiveType = 'enum';
+        analyzedType.enumValues = property.enums.reduce<Record<string, string>>((acc, item) => {
+            acc[item.id] = item.name;
+            return acc;
+        }, {});
+    }
+
+    return analyzedType;
+}
+
+/**
+ * If rawValue is anything except an object like {} or a function, return it as-is,
+ * If it is an object, stringify it.
+ * If it is a function, return empty string.
+ *
+ * @param rawValue property value
+ * @returns string
+ */
+function normalizeObjectPropertyValue(rawValue: unknown): unknown {
+    if (typeof rawValue === 'object' && rawValue instanceof Object && !Array.isArray(rawValue)) {
+        try {
+            return JSON.stringify(rawValue);
+        } catch (e) {
+            if (e instanceof Error && e.message.toLowerCase().includes('converting circular structure to json')) {
+                // some objects can be circular, e.g.:
+                // var obj = {
+                //    key1: value,
+                //    key2: obj
+                // }
+                // and JSON.stringify can't handle that so we reach here.
+                // however, postMessage can't handle that either, and throws:
+                // "Failed to execute 'postMessage' on 'Window': An object could not be cloned".
+                // so we need to check whether this is the failure and if so, don't return the rawValue,
+                // but some default string to act as the property value.
+                return '<Circular JSON cannot be displayed>';
+            }
+
+            return rawValue;
+        }
+    } else if (typeof rawValue === 'function') {
+        return '';
+    } else {
+        return rawValue;
+    }
+}
+
+interface NewControlData {
+    id: string;
+    name: string;
+    newValue: unknown;
+}
+
+/**
+ * Build control data.
+ *
+ * @param control - ui5 control
+ * @param changeService - Changeservice for change stack event handling.
+ * @param controlOverlay - element overlay
+ * @param includeDocumentation - include documentation flag
+ * @returns Promise<Control>
+ */
+export function buildControlData(
+    control: ManagedObject,
+    changeService: ChangeService,
+    controlOverlay?: ElementOverlay
+): Control {
+    const controlMetadata = control.getMetadata();
+    const selectedControlName = controlMetadata.getName();
+    const hasStableId = Utils.checkControlId(control);
+    const overlayData = controlOverlay?.getDesignTimeMetadata().getData();
+
+    const controlProperties = controlOverlay ? overlayData?.properties : undefined;
+    const manifestProperties = getManifestProperties(control, changeService, controlOverlay);
+    // Add the control's properties/manifest properties
+    const allProperties = {
+        ...(controlMetadata.getAllProperties() as unknown as {
+            [name: string]: ManagedObjectMetadataProperties;
+        }),
+        ...manifestProperties
+    };
+    let propertyType;
+    const propertyNames = Object.keys(allProperties);
+    const properties: ControlProperty[] = [];
+    for (const propertyName of propertyNames) {
+        const property = allProperties[propertyName];
+        let analyzedType;
+        let isEnabled = false;
+        let value: unknown;
+        if (property && 'configuration' in property) {
+            propertyType = PropertyType.Configuration;
+            analyzedType = analyzeManifestProperty(property);
+            if (
+                !analyzedType ||
+                (property?.restrictedTo?.length &&
+                    !property?.restrictedTo?.includes(getV4PageType(control) as TemplateType))
+            ) {
+                continue;
+            }
+            isEnabled = true;
+            value = property.value;
+        } else {
+            propertyType = PropertyType.ControlProperty;
+            // the default behavior is that the property is enabled
+            // meaning it's not ignored during design time
+            analyzedType = analyzePropertyType(property);
+            if (!analyzedType) {
+                continue;
+            }
+            let ignore = false;
+            if (controlProperties?.[property.name]) {
+                // check whether the property should be ignored in design time or not
+                // if it's 'undefined' then it's not considered when building isEnabled because it's 'true'
+                ignore = controlProperties[property.name].ignore;
+            }
+
+            //updating i18n text for the control if bindingInfo has bindingString
+            const controlNewData: NewControlData = {
+                id: control.getId(),
+                name: property.name,
+                newValue: control.getProperty(property.name)
+            };
+            const bindingInfo: { bindingString?: string } = control.getBindingInfo(controlNewData.name) as {
+                bindingString?: string;
+            };
+            if (bindingInfo?.bindingString !== undefined) {
+                controlNewData.newValue = bindingInfo.bindingString;
+            }
+
+            // A property is enabled if:
+            // 1. The property supports changes
+            // 2. The control has stable ID
+            // 3. It is not configured to be ignored in design time
+            // 4. And control overlay is selectable
+            isEnabled = isControlEnabled(analyzedType, hasStableId, ignore, controlOverlay);
+
+            value = normalizeObjectPropertyValue(controlNewData.newValue);
+        }
+        const isIcon =
+            testIconPattern(property.name) &&
+            selectedControlName !== 'sap.m.Image' &&
+            analyzedType.ui5Type === 'sap.ui.core.URI';
+        const ui5Type = analyzedType.ui5Type || undefined;
+        const readableName = convertCamelCaseToPascalCase(property.name);
+        let docu:
+            | {
+                  defaultValue: string;
+                  description: string;
+                  propertyName: string;
+                  type?: string;
+                  propertyType?: string;
+              }
+            | undefined;
+        if ('configuration' in property) {
+            const defValue = ['undefined', 'null'].includes(String(property.defaultValue))
+                ? '-'
+                : String(property.defaultValue);
+            docu = {
+                description: property.description,
+                propertyName: property.id,
+                type: property.type,
+                defaultValue: defValue || '-'
+            };
+        }
+        switch (analyzedType.primitiveType) {
+            case 'enum': {
+                const values = analyzedType.enumValues ?? {};
+                const options: { key: string; text: string }[] = Object.keys(values).map((key) => ({
+                    key,
+                    text: values[key]
+                }));
+                properties.push({
+                    type: STRING_VALUE_TYPE,
+                    editor: DROPDOWN_EDITOR_TYPE,
+                    propertyType,
+                    name: property.name,
+                    readableName,
+                    value: value as string,
+                    isEnabled,
+                    ui5Type,
+                    options,
+                    ...(docu && { documentation: docu })
+                });
+                break;
+            }
+            case 'string': {
+                properties.push({
+                    type: STRING_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    propertyType,
+                    name: property.name,
+                    readableName,
+                    value: value as string,
+                    isEnabled,
+                    isIcon,
+                    ui5Type,
+                    ...(docu && { documentation: docu })
+                });
+                break;
+            }
+            case 'int': {
+                properties.push({
+                    type: INTEGER_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    propertyType,
+                    name: property.name,
+                    readableName,
+                    value: value as number,
+                    isEnabled,
+                    ui5Type,
+                    ...(docu && { documentation: docu })
+                });
+                break;
+            }
+            case 'float': {
+                properties.push({
+                    type: FLOAT_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    propertyType,
+                    name: property.name,
+                    readableName,
+                    value: value as number,
+                    isEnabled,
+                    ui5Type,
+                    ...(docu && { documentation: docu })
+                });
+                break;
+            }
+            case 'boolean': {
+                properties.push({
+                    type: BOOLEAN_VALUE_TYPE,
+                    editor: CHECKBOX_EDITOR_TYPE,
+                    propertyType,
+                    name: property.name,
+                    readableName,
+                    value: value as boolean,
+                    isEnabled,
+                    ui5Type,
+                    ...(docu && { documentation: docu })
+                });
+                break;
+            }
+        }
+    }
+    return {
+        id: control.getId(), //the id of the underlying control/aggregation
+        type: selectedControlName, //the name of the ui5 class of the control/aggregation
+        properties: [...properties].sort((a, b) => (a.name > b.name ? 1 : -1)),
+        name: selectedControlName
+    };
+}

package/dist/preview-middleware/dist/client/cpe/documentation.js

@@ -0,0 +1,191 @@
+"use strict";
+
+sap.ui.define(["./utils", "sap/base/Log", "open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "../utils/info-center-message", "../utils/error"], function (___utils, Log, ___sap_ux_private_control_property_editor_common, ___utils_info_center_message, ___utils_error) {
+  "use strict";
+
+  const getLibrary = ___utils["getLibrary"];
+  const MessageBarType = ___sap_ux_private_control_property_editor_common["MessageBarType"];
+  const sendInfoCenterMessage = ___utils_info_center_message["sendInfoCenterMessage"];
+  const FetchError = ___utils_error["FetchError"];
+  /**
+   * Get ui5 metadata of given library name.
+   *
+   * @param libName library name for eg: sap.m
+   * @returns Promise<SchemaForApiJsonFiles>
+   */
+  async function getUi5ApiDtMetadata(libName) {
+    const libUrl = '/test-resources/' + libName.split('.').join('/') + '/designtime/api.json';
+    const response = await fetch(libUrl);
+    if (!response.ok) {
+      throw new FetchError(response);
+    }
+    return response.json();
+  }
+
+  /**
+   * load ui5 controls design time metadata api.json for following libraries
+   * sap.m, sap.ui.comp, sap.f, sap.ui.core
+   * loading libraries(more in file size) in parallel during initialization.
+   * Others (less in file size) are loaded dynamically in getControlMetadata method
+   */
+  const ui5ApiDtMetadata = new Map();
+  function loadDefaultLibraries() {
+    const allData = Promise.all([getUi5ApiDtMetadata('sap.m'), getUi5ApiDtMetadata('sap.ui.comp'), getUi5ApiDtMetadata('sap.ui.core'), getUi5ApiDtMetadata('sap.f')]);
+    allData.then(res => {
+      res.forEach(api => {
+        if (api.library) {
+          ui5ApiDtMetadata.set(api.library, api);
+        }
+      });
+    }).catch(reason => {
+      Log.error('Loading Library Failed: ' + reason);
+    });
+  }
+
+  /**
+   * Format html text.
+   *
+   * @param sHtml - html string
+   * @returns string
+   */
+  function formatHtmlText(sHtml) {
+    // replaced "sHtml.replace(new RegExp('<[^>]*>', 'g')" due to regex runtime vulnerability
+    const parts = (sHtml || '').split('<');
+    let result = '';
+    for (const part of parts) {
+      if (!result) {
+        result = part;
+      } else {
+        const indexClosingBracket = part.indexOf('>');
+        result += indexClosingBracket >= 0 ? part.substring(indexClosingBracket + 1) : `<${part}`;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Method to parse ui5 control metadata.
+   *
+   * @param controlLibMetadata control library metadata
+   * @param controlName name of the control
+   * @returns ControlMetadata
+   */
+  function parseControlMetaModel(controlLibMetadata, controlName) {
+    const controlInfo = {
+      baseType: '',
+      doc: '',
+      properties: {}
+    };
+    const selectedControlMetadata = (controlLibMetadata.symbols ?? []).find(control => control.name === controlName);
+    if (selectedControlMetadata) {
+      // base type info of control is available on property 'extends'
+      controlInfo.baseType = selectedControlMetadata.extends;
+      controlInfo.doc = selectedControlMetadata.description ?? '';
+      const properties = selectedControlMetadata['ui5-metadata'].properties;
+      if (properties) {
+        properties.forEach(prop => {
+          prop.description = formatHtmlText(prop.description || '');
+          prop.propertyName = prop.name;
+          prop.propertyType = prop.type;
+          if (prop.defaultValue === null || prop.defaultValue === '') {
+            prop.defaultValue = '-';
+          }
+          controlInfo.properties[prop.name] = {
+            ...prop
+          };
+        });
+      }
+    }
+    return controlInfo;
+  }
+
+  /**
+   * Get control metadata for a given control.
+   *
+   * @param controlName name of the control
+   * @param contLibName library name of the control
+   * @returns Promise<ControlMetadata | undefined>
+   */
+  async function getControlMetadata(controlName, contLibName) {
+    let result;
+    let controlLibMetadata = ui5ApiDtMetadata.get(contLibName);
+    if (controlLibMetadata) {
+      result = parseControlMetaModel(controlLibMetadata, controlName);
+    } else {
+      controlLibMetadata = await getUi5ApiDtMetadata(contLibName);
+      ui5ApiDtMetadata.set(contLibName, controlLibMetadata);
+      result = parseControlMetaModel(controlLibMetadata, controlName);
+    }
+    return result;
+  }
+
+  /**
+   * Get Control Property Documentation for a give control name and control library.
+   *
+   * @param controlName name of the control
+   * @param contLibName library name of the control
+   * @returns Promise<Properties | undefined>
+   */
+  async function getControlPropertyDocumentation(controlName, contLibName) {
+    const doc = await getControlMetadata(controlName, contLibName);
+    if (doc) {
+      const baseControlType = doc.baseType;
+      if (baseControlType) {
+        const baseContLibName = await getLibrary(baseControlType);
+        if (baseContLibName) {
+          const baseControlProps = await getControlPropertyDocumentation(baseControlType, baseContLibName);
+          return {
+            ...baseControlProps,
+            ...doc.properties
+          };
+        }
+      }
+      return {
+        ...doc.properties
+      };
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * Get documentation of a given control of a ui5 library.
+   *
+   * @param controlName name of the control.
+   * @param contLibName library name of the control
+   * @returns Promise<Properties | undefined>
+   */
+  async function getDocumentation(controlName, contLibName) {
+    let doc;
+    try {
+      doc = await getControlPropertyDocumentation(controlName, contLibName);
+    } catch (error) {
+      Log.error(`Error in getting documentation for ${contLibName}`);
+      // For some UI5 components we do not have an api.json provided instead 404, not found,
+      // response is retuned from the server. For such components we do not want to
+      // flood the info center with errors.
+      if (error instanceof FetchError && error.status === 404) {
+        return undefined;
+      }
+      await sendInfoCenterMessage({
+        title: {
+          key: 'DOCUMENTATION_ERROR_TITLE'
+        },
+        description: {
+          key: 'DOCUMENTATION_ERROR_DESCRIPTION',
+          params: [contLibName]
+        },
+        type: MessageBarType.error
+      });
+    }
+    return doc;
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.getUi5ApiDtMetadata = getUi5ApiDtMetadata;
+  __exports.loadDefaultLibraries = loadDefaultLibraries;
+  __exports.getDocumentation = getDocumentation;
+  return __exports;
+});
+//# sourceMappingURL=documentation.js.map