@sap-ux/preview-middleware 0.6.3 → 0.7.1

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

@@ -0,0 +1,304 @@
+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,
+    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 { ManagedObjectMetadataProperties } from './utils';
+import { UI5ControlProperty } from './types';
+import DataType from 'sap/ui/base/DataType';
+
+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: null,
+        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;
+        }
+        const name = Object.getPrototypeOf(propertyDataType).getName();
+        if (!name) {
+            analyzedType.primitiveType = 'enum';
+        } else {
+            analyzedType.primitiveType = name;
+        }
+        analyzedType.ui5Type = typeName;
+
+        // Determine base type for SAP types
+        if (analyzedType.primitiveType === 'enum') {
+            analyzedType.enumValues = sap.ui.require(analyzedType.ui5Type.split('.').join('/'));
+        }
+    }
+
+    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 controlOverlay - element overlay
+ * @param includeDocumentation - include documentation flag
+ * @returns Promise<Control>
+ */
+export function buildControlData(control: ManagedObject, controlOverlay?: ElementOverlay): Control {
+    const controlMetadata = control.getMetadata();
+    const selectedControlName = controlMetadata.getName();
+    const hasStableId = Utils.checkControlId(control);
+    const controlProperties = controlOverlay ? controlOverlay.getDesignTimeMetadata().getData().properties : undefined;
+
+    // Add the control's properties
+    const allProperties = controlMetadata.getAllProperties() as unknown as {
+        [name: string]: ManagedObjectMetadataProperties;
+    };
+    const propertyNames = Object.keys(allProperties);
+    const properties: ControlProperty[] = [];
+    for (const propertyName of propertyNames) {
+        const property = allProperties[propertyName];
+
+        const analyzedType = analyzePropertyType(property);
+        if (!analyzedType) {
+            continue;
+        }
+        // the default behavior is that the property is enabled
+        // meaning it's not ignored during design time
+        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
+        const isEnabled = isControlEnabled(analyzedType, hasStableId, ignore, controlOverlay);
+
+        const 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);
+        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,
+                    name: property.name,
+                    readableName,
+                    value: value as string,
+                    isEnabled,
+                    ui5Type,
+                    options
+                });
+                break;
+            }
+            case 'string': {
+                properties.push({
+                    type: STRING_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    name: property.name,
+                    readableName,
+                    value: value as string,
+                    isEnabled,
+                    isIcon,
+                    ui5Type
+                });
+                break;
+            }
+            case 'int': {
+                properties.push({
+                    type: INTEGER_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    name: property.name,
+                    readableName,
+                    value: value as number,
+                    isEnabled,
+                    ui5Type
+                });
+                break;
+            }
+            case 'float': {
+                properties.push({
+                    type: FLOAT_VALUE_TYPE,
+                    editor: INPUT_EDITOR_TYPE,
+                    name: property.name,
+                    readableName,
+                    value: value as number,
+                    isEnabled,
+                    ui5Type
+                });
+                break;
+            }
+            case 'boolean': {
+                properties.push({
+                    type: BOOLEAN_VALUE_TYPE,
+                    editor: CHECKBOX_EDITOR_TYPE,
+                    name: property.name,
+                    readableName,
+                    value: value as boolean,
+                    isEnabled,
+                    ui5Type
+                });
+                break;
+            }
+            default:
+        }
+    }
+    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/client/cpe/documentation.js

@@ -0,0 +1,166 @@
+"use strict";
+
+sap.ui.define(["./utils", "sap/base/Log"], function (___utils, Log) {
+  "use strict";
+
+  const getLibrary = ___utils["getLibrary"];
+  /**
+   * 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';
+    return fetch(libUrl).then(res => res.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 (err) {
+      Log.error(`Error in getting documentation for ${contLibName}`);
+    }
+    return doc;
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.getUi5ApiDtMetadata = getUi5ApiDtMetadata;
+  __exports.loadDefaultLibraries = loadDefaultLibraries;
+  __exports.getDocumentation = getDocumentation;
+  return __exports;
+});
+//# sourceMappingURL=documentation.js.map

package/dist/client/cpe/documentation.ts

@@ -0,0 +1,166 @@
+import { getLibrary } from './utils';
+import type { SchemaForApiJsonFiles, Ui5Property } from './api-json';
+import type { Properties } from './utils';
+import Log from 'sap/base/Log';
+import { PropertiesInfo } from '@sap-ux-private/control-property-editor-common';
+
+export interface ControlMetadata {
+    baseType: string | undefined;
+    doc: string;
+    properties: Properties;
+}
+
+/**
+ * Get ui5 metadata of given library name.
+ *
+ * @param libName library name for eg: sap.m
+ * @returns Promise<SchemaForApiJsonFiles>
+ */
+export async function getUi5ApiDtMetadata(libName: string): Promise<SchemaForApiJsonFiles> {
+    const libUrl = '/test-resources/' + libName.split('.').join('/') + '/designtime/api.json';
+    return fetch(libUrl).then((res) => res.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: Map<string, SchemaForApiJsonFiles> = new Map();
+export function loadDefaultLibraries(): void {
+    const allData = Promise.all([
+        getUi5ApiDtMetadata('sap.m'),
+        getUi5ApiDtMetadata('sap.ui.comp'),
+        getUi5ApiDtMetadata('sap.ui.core'),
+        getUi5ApiDtMetadata('sap.f')
+    ]);
+    allData
+        .then((res) => {
+            res.forEach((api: SchemaForApiJsonFiles) => {
+                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: string): string {
+    // 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: SchemaForApiJsonFiles, controlName: string): ControlMetadata {
+    const controlInfo: ControlMetadata = {
+        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: Ui5Property & PropertiesInfo) => {
+                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: string, contLibName: string): Promise<ControlMetadata | undefined> {
+    let result: ControlMetadata | undefined;
+    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: string,
+    contLibName: string
+): Promise<Properties | undefined> {
+    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>
+ */
+export async function getDocumentation(controlName: string, contLibName: string): Promise<Properties | undefined> {
+    let doc: Properties | undefined;
+    try {
+        doc = await getControlPropertyDocumentation(controlName, contLibName);
+    } catch (err) {
+        Log.error(`Error in getting documentation for ${contLibName}`);
+    }
+    return doc;
+}