@sap-ux/preview-middleware 0.6.2 → 0.7.0

package/dist/client/cpe/selection.js

@@ -0,0 +1,169 @@
+'use strict';
+sap.ui.define([
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './control-data',
+    './utils',
+    'sap/base/Log',
+    './documentation'
+], function (___sap_ux_private_control_property_editor_common, ___control_data, ___utils, Log, ___documentation) {
+    'use strict';
+    const controlSelected = ___sap_ux_private_control_property_editor_common['controlSelected'];
+    const propertyChanged = ___sap_ux_private_control_property_editor_common['propertyChanged'];
+    const selectControl = ___sap_ux_private_control_property_editor_common['selectControl'];
+    const reportTelemetry = ___sap_ux_private_control_property_editor_common['reportTelemetry'];
+    const buildControlData = ___control_data['buildControlData'];
+    const getRuntimeControl = ___utils['getRuntimeControl'];
+    const getDocumentation = ___documentation['getDocumentation'];
+    function propertyChangeId(controlId, propertyName) {
+        return [
+            controlId,
+            propertyName
+        ].join(',');
+    }
+    function getPropertyDocument(property, ui5Type, document) {
+        return document?.[property.name] ? document[property.name] : {
+            defaultValue: property.defaultValue ?? '-',
+            description: '',
+            propertyName: property.name,
+            type: ui5Type ?? '-',
+            propertyType: ui5Type ?? '-'
+        };
+    }
+    async function addDocumentationForProperties(control, controlData) {
+        try {
+            const controlMetadata = control.getMetadata();
+            const allProperties = controlMetadata.getAllProperties();
+            const selectedControlName = controlMetadata.getName();
+            const selContLibName = controlMetadata.getLibraryName();
+            const document = await getDocumentation(selectedControlName, selContLibName);
+            controlData.properties.forEach(controlProp => {
+                const property = allProperties[controlProp.name];
+                controlProp.documentation = getPropertyDocument(property, controlProp.ui5Type, document);
+            });
+        } catch (e) {
+            Log.error('Document loading failed', e);
+        }
+    }
+    class SelectionService {
+        appliedChangeCache = new Map();
+        activeChangeHandlers = new Set();
+        constructor(rta, ui5) {
+            this.rta = rta;
+            this.ui5 = ui5;
+        }
+        async init(sendAction, subscribe) {
+            const eventOrigin = new Set();
+            const onselectionChange = this.createOnSelectionChangeHandler(sendAction, eventOrigin);
+            this.rta.attachSelectionChange(event => {
+                onselectionChange(event).catch(error => Log.error('Event interrupted: ', error));
+            });
+            subscribe(async action => {
+                if (selectControl.match(action)) {
+                    const id = action.payload;
+                    const control = this.ui5.getControlById(id);
+                    if (!control) {
+                        const component = this.ui5.getComponent(id);
+                        if (component) {
+                            const controlData = buildControlData(component);
+                            await addDocumentationForProperties(component, controlData);
+                            const controlSelectedAction = controlSelected(controlData);
+                            sendAction(controlSelectedAction);
+                        }
+                        return;
+                    }
+                    eventOrigin.add('outline');
+                    let controlOverlay = this.ui5.getOverlay(control);
+                    const selectedOverlayControls = this.rta.getSelection() ?? [];
+                    for (const selectedOverlayControl of selectedOverlayControls) {
+                        selectedOverlayControl.setSelected(false);
+                    }
+                    if (!controlOverlay?.getDomRef()) {
+                        controlOverlay = this.ui5.getClosestOverlayFor(control);
+                    }
+                    if (controlOverlay?.isSelectable()) {
+                        controlOverlay.setSelected(true);
+                    } else {
+                        const controlData = buildControlData(control);
+                        await addDocumentationForProperties(control, controlData);
+                        const controlSelectedAction = controlSelected(controlData);
+                        sendAction(controlSelectedAction);
+                    }
+                }
+            });
+        }
+        applyControlPropertyChange(controlId, propertyName) {
+            const changeId = propertyChangeId(controlId, propertyName);
+            this.appliedChangeCache.set(changeId, Date.now());
+        }
+        createOnSelectionChangeHandler(sendAction, eventOrigin) {
+            return async event => {
+                const selection = event.getParameter('selection');
+                for (const dispose of this.activeChangeHandlers) {
+                    dispose();
+                }
+                this.activeChangeHandlers.clear();
+                if (Array.isArray(selection) && selection.length === 1) {
+                    const overlayControl = this.ui5.getControlById(selection[0].getId());
+                    if (overlayControl) {
+                        const runtimeControl = getRuntimeControl(overlayControl);
+                        const controlName = runtimeControl.getMetadata().getName();
+                        this.handlePropertyChanges(runtimeControl, sendAction);
+                        try {
+                            const isOutline = eventOrigin.has('outline');
+                            const name = controlName.toLowerCase().startsWith('sap') ? controlName : 'Other Control Types';
+                            if (isOutline) {
+                                reportTelemetry({
+                                    category: 'Outline Selection',
+                                    controlName: name
+                                });
+                            } else {
+                                reportTelemetry({
+                                    category: 'Overlay Selection',
+                                    controlName: name
+                                });
+                            }
+                        } catch (error) {
+                            Log.error('Failed to report telemetry', error);
+                        } finally {
+                            const controlData = buildControlData(runtimeControl, overlayControl);
+                            await addDocumentationForProperties(runtimeControl, controlData);
+                            const action = controlSelected(controlData);
+                            sendAction(action);
+                            eventOrigin.delete('outline');
+                        }
+                    }
+                }
+            };
+        }
+        handlePropertyChanges(runtimeControl, sendAction) {
+            const handler = e => {
+                const propertyName = e.getParameter('name');
+                const controlId = e.getParameter('id');
+                const changeId = propertyChangeId(controlId, propertyName);
+                const timestamp = this.appliedChangeCache.get(changeId);
+                if (timestamp) {
+                    this.appliedChangeCache.delete(changeId);
+                    return;
+                }
+                const info = runtimeControl.getBindingInfo(propertyName);
+                const newValue = info?.path ?? e.getParameter('newValue');
+                const change = propertyChanged({
+                    controlId,
+                    propertyName,
+                    newValue
+                });
+                sendAction(change);
+            };
+            runtimeControl.attachEvent('_change', handler);
+            this.activeChangeHandlers.add(() => {
+                try {
+                    runtimeControl.detachEvent('_change', handler);
+                } catch {
+                }
+            });
+        }
+    }
+    var __exports = { __esModule: true };
+    __exports.SelectionService = SelectionService;
+    return __exports;
+});

package/dist/client/cpe/selection.ts

@@ -0,0 +1,237 @@
+import type { Control, ExternalAction } from '@sap-ux-private/control-property-editor-common';
+import {
+    controlSelected,
+    propertyChanged,
+    selectControl,
+    reportTelemetry,
+    Properties
+} from '@sap-ux-private/control-property-editor-common';
+import { buildControlData } from './control-data';
+import { getRuntimeControl, ManagedObjectMetadataProperties, PropertiesInfo } from './utils';
+import type { ActionSenderFunction, Service, SubscribeFunction, UI5Facade } from './types';
+
+import type Event from 'sap/ui/base/Event';
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+import type { SelectionChangeEvent } from 'sap/ui/rta/RuntimeAuthoring';
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import Log from 'sap/base/Log';
+import { getDocumentation } from './documentation';
+
+export interface PropertyChangeParams {
+    name: string;
+    id: string;
+    newValue: string;
+}
+export type PropertyChangeEvent = Event<PropertyChangeParams>;
+
+/**
+ * Change id is a combination of controlId and propertyName.
+ *
+ * @param controlId unique identifier for a control.
+ * @param propertyName name of the control property.
+ * @returns string
+ */
+function propertyChangeId(controlId: string, propertyName: string): string {
+    return [controlId, propertyName].join(',');
+}
+
+/**
+ * Return document of a property.
+ *
+ * @param property - control metadata props.
+ * @param ui5Type - ui5 type
+ * @param document - property that is ignored during design time
+ * @returns PropertiesInfo
+ */
+function getPropertyDocument(
+    property: ManagedObjectMetadataProperties,
+    ui5Type?: string,
+    document?: Properties
+): PropertiesInfo {
+    return document?.[property.name]
+        ? document[property.name]
+        : ({
+              defaultValue: (property.defaultValue as string) ?? '-',
+              description: '',
+              propertyName: property.name,
+              type: ui5Type ?? '-',
+              propertyType: ui5Type ?? '-'
+          } as PropertiesInfo);
+}
+
+async function addDocumentationForProperties(control: ManagedObject, controlData: Control): Promise<void> {
+    try {
+        const controlMetadata = control.getMetadata();
+        const allProperties = controlMetadata.getAllProperties() as unknown as {
+            [name: string]: ManagedObjectMetadataProperties;
+        };
+        const selectedControlName = controlMetadata.getName();
+        const selContLibName = controlMetadata.getLibraryName();
+        // Add the control's properties
+        const document = await getDocumentation(selectedControlName, selContLibName);
+        controlData.properties.forEach((controlProp) => {
+            const property = allProperties[controlProp.name];
+            controlProp.documentation = getPropertyDocument(property, controlProp.ui5Type, document);
+        });
+    } catch (e) {
+        Log.error('Document loading failed', e);
+    }
+}
+
+/**
+ *
+ */
+export class SelectionService implements Service {
+    private appliedChangeCache = new Map<string, number>();
+    private activeChangeHandlers = new Set<() => void>();
+    /**
+     *
+     * @param rta - rta object.
+     * @param ui5 - facade for ui5 framework methods
+     */
+    constructor(private readonly rta: RuntimeAuthoring, private readonly ui5: UI5Facade) {}
+
+    /**
+     * Initialize selection service.
+     *
+     * @param sendAction action sender function
+     * @param subscribe subscriber function
+     */
+    public async init(sendAction: ActionSenderFunction, subscribe: SubscribeFunction): Promise<void> {
+        const eventOrigin: Set<string> = new Set();
+        const onselectionChange = this.createOnSelectionChangeHandler(sendAction, eventOrigin);
+        this.rta.attachSelectionChange((event) => {
+            onselectionChange(event).catch((error) => Log.error('Event interrupted: ', error));
+        });
+        subscribe(async (action: ExternalAction): Promise<void> => {
+            if (selectControl.match(action)) {
+                const id = action.payload;
+                const control = this.ui5.getControlById(id);
+                if (!control) {
+                    const component = this.ui5.getComponent(id);
+                    if (component) {
+                        const controlData = buildControlData(component);
+
+                        // add document
+                        await addDocumentationForProperties(component, controlData);
+                        const controlSelectedAction = controlSelected(controlData);
+                        sendAction(controlSelectedAction);
+                    }
+                    return;
+                }
+                eventOrigin.add('outline');
+                let controlOverlay = this.ui5.getOverlay(control);
+                const selectedOverlayControls = this.rta.getSelection() ?? [];
+                //remove previous selection
+                for (const selectedOverlayControl of selectedOverlayControls) {
+                    selectedOverlayControl.setSelected(false); //deselect previously selected control
+                }
+
+                if (!controlOverlay?.getDomRef()) {
+                    //look for closest control in order to highlight in UI the (without firing the selection event)
+                    controlOverlay = this.ui5.getClosestOverlayFor(control);
+                }
+
+                if (controlOverlay?.isSelectable()) {
+                    controlOverlay.setSelected(true); //highlight without firing event only if the layer is selectable
+                } else {
+                    const controlData = buildControlData(control);
+                    await addDocumentationForProperties(control, controlData);
+                    const controlSelectedAction = controlSelected(controlData);
+                    sendAction(controlSelectedAction);
+                }
+            }
+        });
+    }
+
+    /**
+     *
+     * @param controlId unique identifier for a control
+     * @param propertyName name of the control property.
+     */
+    public applyControlPropertyChange(controlId: string, propertyName: string): void {
+        const changeId = propertyChangeId(controlId, propertyName);
+        this.appliedChangeCache.set(changeId, Date.now());
+    }
+
+    /**
+     * Create handler for onSelectionChange.
+     *
+     * @param sendAction sending action method
+     * @param eventOrigin origin of the event.
+     * @returns (event: Event) => Promise<void>
+     */
+    private createOnSelectionChangeHandler(
+        sendAction: (action: ExternalAction) => void,
+        eventOrigin: Set<string>
+    ): (event: SelectionChangeEvent) => Promise<void> {
+        return async (event: SelectionChangeEvent): Promise<void> => {
+            const selection = event.getParameter('selection');
+            for (const dispose of this.activeChangeHandlers) {
+                dispose();
+            }
+            this.activeChangeHandlers.clear();
+            if (Array.isArray(selection) && selection.length === 1) {
+                const overlayControl = this.ui5.getControlById<ElementOverlay>(selection[0].getId());
+                if (overlayControl) {
+                    const runtimeControl = getRuntimeControl(overlayControl);
+                    const controlName = runtimeControl.getMetadata().getName();
+                    this.handlePropertyChanges(runtimeControl, sendAction);
+                    try {
+                        const isOutline = eventOrigin.has('outline');
+                        const name = controlName.toLowerCase().startsWith('sap') ? controlName : 'Other Control Types';
+                        if (isOutline) {
+                            reportTelemetry({ category: 'Outline Selection', controlName: name });
+                        } else {
+                            reportTelemetry({ category: 'Overlay Selection', controlName: name });
+                        }
+                    } catch (error) {
+                        Log.error('Failed to report telemetry', error);
+                    } finally {
+                        const controlData = buildControlData(runtimeControl, overlayControl);
+                        await addDocumentationForProperties(runtimeControl, controlData);
+                        const action = controlSelected(controlData);
+                        sendAction(action);
+                        eventOrigin.delete('outline');
+                    }
+                }
+            }
+        };
+    }
+
+    /**
+     *
+     * @param runtimeControl sap/ui/base/ManagedObject
+     * @param sendAction send action method.
+     */
+    private handlePropertyChanges(runtimeControl: ManagedObject, sendAction: (action: ExternalAction) => void): void {
+        const handler = (e: PropertyChangeEvent) => {
+            const propertyName = e.getParameter('name');
+            const controlId = e.getParameter('id');
+            const changeId = propertyChangeId(controlId, propertyName);
+            const timestamp = this.appliedChangeCache.get(changeId);
+            if (timestamp) {
+                // Change originated from control property editor, we do not need to notify it
+                this.appliedChangeCache.delete(changeId);
+                return;
+            }
+            const info: { path?: string } = runtimeControl.getBindingInfo(propertyName);
+            const newValue = info?.path ?? e.getParameter('newValue');
+            const change = propertyChanged({
+                controlId,
+                propertyName,
+                newValue
+            });
+            sendAction(change);
+        };
+        runtimeControl.attachEvent('_change', handler);
+        this.activeChangeHandlers.add(() => {
+            try {
+                runtimeControl.detachEvent('_change', handler);
+            } catch {
+                // control has already been cleaned up, nothing to do here
+            }
+        });
+    }
+}

package/dist/client/cpe/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/client/cpe/types.ts

@@ -0,0 +1,53 @@
+import type { ExternalAction, IconDetails } from '@sap-ux-private/control-property-editor-common';
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import type Element from 'sap/ui/core/Element';
+import type { ID } from 'sap/ui/core/library';
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import type Component from 'sap/ui/core/Component';
+
+export interface UI5AdaptationOptions {
+    rta: RuntimeAuthoring;
+}
+
+export type PrimitiveTypes = 'boolean' | 'enum' | 'float' | 'string' | 'any';
+export type PropertyValue = boolean | object | number | string;
+
+export interface UI5ControlProperty {
+    defaultValue: unknown;
+    enumValues: { [key: string]: string } | null;
+    isArray: boolean;
+    isDeprecated: boolean;
+    isEnabled: boolean;
+    isIcon: boolean;
+    name: string;
+    primitiveType: string;
+    ui5Type: string | null;
+    value: PropertyValue;
+}
+
+export interface UI5ControlData {
+    allowIndexForDefaultAggregation: boolean;
+    defaultAggregation: string;
+    id: string;
+    properties: UI5ControlProperty[];
+    selectedControlChildren: string[];
+    selectedControlName: string;
+    targetAggregation: string[];
+    type: string;
+}
+
+export type ActionHandler = (action: ExternalAction) => Promise<void>;
+export type ActionSenderFunction = (action: ExternalAction) => void;
+export type SubscribeFunction = (handler: ActionHandler) => void;
+
+export interface Service {
+    init(sendAction: ActionSenderFunction, subscribe: SubscribeFunction): void;
+}
+
+export interface UI5Facade {
+    getControlById: <T extends Element>(id: ID) => T | undefined;
+    getIcons: () => IconDetails[];
+    getComponent: <T extends Component>(id: ID) => T | undefined;
+    getOverlay: <T extends ElementOverlay>(control: Element) => T | undefined;
+    getClosestOverlayFor: <T extends ElementOverlay>(control: Element) => T | undefined;
+}

package/dist/client/cpe/utils.js

@@ -0,0 +1,50 @@
+"use strict";
+
+sap.ui.define([], function () {
+  "use strict";
+
+  /**
+   * Get runtime control.
+   *
+   * @param overlayControl - element overlay.
+   * @returns ManagedObject
+   */
+  function getRuntimeControl(overlayControl) {
+    let runtimeControl;
+    if (overlayControl.getElementInstance) {
+      runtimeControl = overlayControl.getElementInstance();
+    } else {
+      runtimeControl = overlayControl.getElement();
+    }
+    return runtimeControl;
+  }
+
+  /**
+   * Get library of a control name.
+   *
+   * @param controlName - name of the ui5 control eg: sap.m.Button.
+   * @returns Promise<string>
+   */
+  async function getLibrary(controlName) {
+    return new Promise(resolve => {
+      const controlPath = controlName.replace(/\./g, '/');
+      sap.ui.require([controlPath], control => {
+        const contMetadata = control.getMetadata();
+        // getLibraryName method does not exist on events
+        if (contMetadata?.getLibraryName) {
+          const contLibName = contMetadata.getLibraryName();
+          resolve(contLibName);
+        } else {
+          resolve(''); // return empty for events
+        }
+      });
+    });
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.getRuntimeControl = getRuntimeControl;
+  __exports.getLibrary = getLibrary;
+  return __exports;
+});
+//# sourceMappingURL=utils.js.map

package/dist/client/cpe/utils.ts

@@ -0,0 +1,62 @@
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+import type Control from 'sap/ui/core/Control';
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import DataType from 'sap/ui/base/DataType';
+
+export interface PropertiesInfo {
+    defaultValue: string;
+    description: string;
+    propertyName: string;
+    type: string;
+    propertyType: string | undefined;
+}
+export interface Properties {
+    [key: string]: PropertiesInfo;
+}
+
+export interface ManagedObjectMetadataProperties {
+    name: string;
+    defaultValue: string | null;
+    deprecated: boolean;
+    getType: () => DataType;
+    getName: () => string;
+    getDefaultValue: () => unknown;
+}
+
+/**
+ * Get runtime control.
+ *
+ * @param overlayControl - element overlay.
+ * @returns ManagedObject
+ */
+export function getRuntimeControl(overlayControl: ElementOverlay): ManagedObject {
+    let runtimeControl;
+    if (overlayControl.getElementInstance) {
+        runtimeControl = overlayControl.getElementInstance();
+    } else {
+        runtimeControl = overlayControl.getElement();
+    }
+    return runtimeControl;
+}
+
+/**
+ * Get library of a control name.
+ *
+ * @param controlName - name of the ui5 control eg: sap.m.Button.
+ * @returns Promise<string>
+ */
+export async function getLibrary(controlName: string): Promise<string> {
+    return new Promise((resolve) => {
+        const controlPath = controlName.replace(/\./g, '/');
+        sap.ui.require([controlPath], (control: Control) => {
+            const contMetadata = control.getMetadata();
+            // getLibraryName method does not exist on events
+            if (contMetadata?.getLibraryName) {
+                const contLibName = contMetadata.getLibraryName();
+                resolve(contLibName);
+            } else {
+                resolve(''); // return empty for events
+            }
+        });
+    });
+}

package/dist/client/flp/WorkspaceConnector.js

@@ -0,0 +1,65 @@
+"use strict";
+
+sap.ui.define(["sap/base/util/merge", "sap/ui/fl/write/api/connectors/ObjectStorageConnector", "sap/ui/fl/Layer", "sap/ui/VersionInfo"], function (merge, ObjectStorageConnector, Layer, VersionInfo) {
+  "use strict";
+
+  const path = '/preview/api/changes';
+  const connector = merge({}, ObjectStorageConnector, {
+    layers: [Layer.VENDOR, Layer.CUSTOMER_BASE],
+    storage: {
+      _itemsStoredAsObjects: true,
+      setItem: function (_key, change) {
+        return fetch(path, {
+          method: 'POST',
+          body: JSON.stringify(change, null, 2),
+          headers: {
+            'content-type': 'application/json'
+          }
+        });
+      },
+      removeItem: function (key) {
+        return fetch(path, {
+          method: 'DELETE',
+          body: JSON.stringify({
+            fileName: key
+          }),
+          headers: {
+            'content-type': 'application/json'
+          }
+        });
+      },
+      clear: function () {
+        // not implemented
+      },
+      getItem: function (_key) {
+        // not implemented
+      },
+      getItems: async function () {
+        const response = await fetch(path, {
+          method: 'GET',
+          headers: {
+            'content-type': 'application/json'
+          }
+        });
+        const changes = await response.json();
+        return changes;
+      }
+    },
+    loadFeatures: async function () {
+      const features = await ObjectStorageConnector.loadFeatures();
+      const ui5Version = await VersionInfo.load();
+      const [majorVersion, minorVersion] = ui5Version.version.split('.').map(v => parseInt(v, 10));
+      features.isVariantAdaptationEnabled = majorVersion >= 1 && minorVersion >= 90;
+      const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+      if (bootstrapConfig) {
+        const settings = bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings');
+        if (settings && JSON.parse(settings).developerMode) {
+          features.isVariantAdaptationEnabled = false;
+        }
+      }
+      return features;
+    }
+  });
+  return connector;
+});
+//# sourceMappingURL=WorkspaceConnector.js.map