@sap-ux/preview-middleware 0.8.7 → 0.10.0

package/dist/client/adp/extension-point.ts

@@ -0,0 +1,103 @@
+import type View from 'sap/ui/core/mvc/View';
+import type UI5Element from 'sap/ui/core/Element';
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import AddXMLAtExtensionPoint from 'sap/ui/rta/plugin/AddXMLAtExtensionPoint';
+import CommandFactory from 'sap/ui/rta/command/CommandFactory';
+
+import { ExternalAction, addExtensionPoint } from '@sap-ux-private/control-property-editor-common';
+
+import { Deferred, createDeferred } from './utils';
+
+import { SubscribeFunction } from '../cpe/types';
+import { DialogNames, handler } from './init-dialogs';
+
+type ActionService = {
+    execute: (controlId: string, actionId: string) => void;
+};
+
+type DeferredExtPointData = {
+    fragmentPath: string;
+    extensionPointName: string | undefined;
+};
+
+export interface ExtensionPointData {
+    name: string;
+    deffered: Deferred<DeferredExtPointData>;
+    index?: number;
+    view?: View;
+    createdControls?: [];
+    fragmentId?: string;
+    aggregation?: string[];
+    aggregationName?: string;
+    defaultContent?: string[];
+    targetControl?: UI5Element;
+}
+
+export default class ExtensionPointService {
+    private readonly actionId = 'CTX_ADDXML_AT_EXTENSIONPOINT';
+
+    /**
+     * @param rta Runtime Authoring
+     */
+    constructor(private readonly rta: RuntimeAuthoring) {}
+
+    /**
+     * Initializes communication with CPE, and the extension point plugin.
+     *
+     * @param subscribe Handles actions from CPE
+     */
+    public init(subscribe: SubscribeFunction) {
+        this.initPlugin();
+        subscribe(async (action: ExternalAction): Promise<void> => {
+            if (addExtensionPoint.match(action)) {
+                try {
+                    const { controlId } = action.payload;
+
+                    const service = await this.rta.getService<ActionService>('action');
+
+                    service.execute(controlId, this.actionId);
+                } catch (e) {
+                    throw new Error(`Failed to execute service with actionId: ${this.actionId}`);
+                }
+            }
+        });
+    }
+
+    /**
+     * Initializes Add XML at Extension Point plugin and adds it to the default RTA plugins.
+     */
+    public initPlugin() {
+        const flexSettings = this.rta.getFlexSettings();
+        const commandFactory = new CommandFactory({
+            flexSettings
+        });
+
+        const plugin = new AddXMLAtExtensionPoint({
+            commandFactory,
+            fragmentHandler: async (overlay: UI5Element, info: ExtensionPointData[]) =>
+                await this.fragmentHandler(overlay, info[0])
+        });
+
+        const defaultPlugins = this.rta.getDefaultPlugins();
+        defaultPlugins.addXMLAtExtensionPoint = plugin;
+        this.rta.setPlugins(defaultPlugins);
+    }
+
+    /**
+     * Handler function for AddXMLAtExtensionPoint plugin.
+     *
+     * @param overlay UI5 Element overlay
+     * @param info Extension point data from the plugin
+     * @returns Deffered extension point data that is provided to the plugin
+     */
+    public async fragmentHandler(overlay: UI5Element, info: ExtensionPointData): Promise<DeferredExtPointData> {
+        let deffered = createDeferred<DeferredExtPointData>();
+
+        await handler(overlay, this.rta, DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT, {
+            name: info.name,
+            deffered
+        } as ExtensionPointData);
+
+        return deffered.promise;
+    }
+}

package/dist/client/adp/init-dialogs.js

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller", "./controllers/ControllerExtension.controller"], function (XMLView, __AddFragment, __ControllerExtension) {
+sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller", "./controllers/ControllerExtension.controller", "./controllers/ExtensionPoint.controller"], function (XMLView, __AddFragment, __ControllerExtension, __ExtensionPoint) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -8,9 +8,11 @@ sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller"
   }
   const AddFragment = _interopRequireDefault(__AddFragment);
   const ControllerExtension = _interopRequireDefault(__ControllerExtension);
+  const ExtensionPoint = _interopRequireDefault(__ExtensionPoint);
   var DialogNames = /*#__PURE__*/function (DialogNames) {
     DialogNames["ADD_FRAGMENT"] = "AddFragment";
     DialogNames["CONTROLLER_EXTENSION"] = "ControllerExtension";
+    DialogNames["ADD_FRAGMENT_AT_EXTENSION_POINT"] = "ExtensionPoint";
     return DialogNames;
   }(DialogNames || {});
   /**
@@ -40,12 +42,26 @@ sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller"
    * @param overlays Control overlays
    * @param rta Runtime Authoring
    * @param dialogName Dialog name
+   * @param extensionPointData Control ID
    */
-  async function handler(overlays, rta, dialogName) {
-    const controller = dialogName === DialogNames.ADD_FRAGMENT ? new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta) : new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+  async function handler(overlays, rta, dialogName, extensionPointData) {
+    let controller;
+    switch (dialogName) {
+      case DialogNames.ADD_FRAGMENT:
+        controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+        break;
+      case DialogNames.CONTROLLER_EXTENSION:
+        controller = new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+        break;
+      case DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT:
+        controller = new ExtensionPoint(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta, extensionPointData);
+        break;
+    }
+    const id = dialogName === DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT ? `dialog--${dialogName}` : undefined;
     await XMLView.create({
       viewName: `open.ux.preview.client.adp.ui.${dialogName}`,
-      controller
+      controller,
+      id
     });
   }
   var __exports = {

package/dist/client/adp/init-dialogs.ts

@@ -7,12 +7,17 @@ import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
 
 import AddFragment from './controllers/AddFragment.controller';
 import ControllerExtension from './controllers/ControllerExtension.controller';
+import { ExtensionPointData } from './extension-point';
+import ExtensionPoint from './controllers/ExtensionPoint.controller';
 
 export const enum DialogNames {
     ADD_FRAGMENT = 'AddFragment',
-    CONTROLLER_EXTENSION = 'ControllerExtension'
+    CONTROLLER_EXTENSION = 'ControllerExtension',
+    ADD_FRAGMENT_AT_EXTENSION_POINT = 'ExtensionPoint'
 }
 
+type Controller = AddFragment | ControllerExtension | ExtensionPoint;
+
 /**
  * Adds a new item to the context menu
  *
@@ -42,15 +47,38 @@ export const initDialogs = (rta: RuntimeAuthoring): void => {
  * @param overlays Control overlays
  * @param rta Runtime Authoring
  * @param dialogName Dialog name
+ * @param extensionPointData Control ID
  */
-export async function handler(overlays: UI5Element, rta: RuntimeAuthoring, dialogName: DialogNames): Promise<void> {
-    const controller =
-        dialogName === DialogNames.ADD_FRAGMENT
-            ? new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta)
-            : new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+export async function handler(
+    overlays: UI5Element,
+    rta: RuntimeAuthoring,
+    dialogName: DialogNames,
+    extensionPointData?: ExtensionPointData
+): Promise<void> {
+    let controller: Controller;
+
+    switch (dialogName) {
+        case DialogNames.ADD_FRAGMENT:
+            controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+            break;
+        case DialogNames.CONTROLLER_EXTENSION:
+            controller = new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+            break;
+        case DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT:
+            controller = new ExtensionPoint(
+                `open.ux.preview.client.adp.controllers.${dialogName}`,
+                overlays,
+                rta,
+                extensionPointData!
+            );
+            break;
+    }
+
+    const id = dialogName === DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT ? `dialog--${dialogName}` : undefined;
 
     await XMLView.create({
         viewName: `open.ux.preview.client.adp.ui.${dialogName}`,
-        controller
+        controller,
+        id
     });
 }

package/dist/client/adp/init.js

@@ -1,20 +1,38 @@
-"use strict";
-
-sap.ui.define(["sap/base/Log", "../cpe/init", "./init-dialogs"], function (log, __init, ___init_dialogs) {
-  "use strict";
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
-  }
-  const init = _interopRequireDefault(__init);
-  const initDialogs = ___init_dialogs["initDialogs"];
-  var __exports = function (rta) {
-    // initialize fragment content menu entry
-    initDialogs(rta);
-    // also initialize the editor
-    init(rta);
-    log.debug('ADP init executed.');
-  };
-  return __exports;
-});
-//# sourceMappingURL=init.js.map
+'use strict';
+sap.ui.define([
+    'sap/base/Log',
+    '../cpe/init',
+    './init-dialogs',
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './extension-point'
+], function (log, __init, ___init_dialogs, ___sap_ux_private_control_property_editor_common, __ExtensionPointService) {
+    'use strict';
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule && typeof obj.default !== 'undefined' ? obj.default : obj;
+    }
+    const init = _interopRequireDefault(__init);
+    const initDialogs = ___init_dialogs['initDialogs'];
+    const startPostMessageCommunication = ___sap_ux_private_control_property_editor_common['startPostMessageCommunication'];
+    const ExtensionPointService = _interopRequireDefault(__ExtensionPointService);
+    var __exports = function (rta) {
+        const extPointService = new ExtensionPointService(rta);
+        const actionHandlers = [];
+        function subscribe(handler) {
+            actionHandlers.push(handler);
+        }
+        startPostMessageCommunication(window.parent, async function onAction(action) {
+            for (const handler of actionHandlers) {
+                try {
+                    await handler(action);
+                } catch (error) {
+                    log.error('Handler Failed: ', error);
+                }
+            }
+        });
+        initDialogs(rta);
+        extPointService.init(subscribe);
+        init(rta);
+        log.debug('ADP init executed.');
+    };
+    return __exports;
+});

package/dist/client/adp/init.ts

@@ -3,10 +3,34 @@ import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
 
 import init from '../cpe/init';
 import { initDialogs } from './init-dialogs';
+import { ExternalAction, startPostMessageCommunication } from '@sap-ux-private/control-property-editor-common';
+import { ActionHandler } from '../cpe/types';
+import ExtensionPointService from './extension-point';
 
 export default function (rta: RuntimeAuthoring) {
+    const extPointService = new ExtensionPointService(rta);
+    const actionHandlers: ActionHandler[] = [];
+    /**
+     *
+     * @param handler action handler
+     */
+    function subscribe(handler: ActionHandler): void {
+        actionHandlers.push(handler);
+    }
+
+    startPostMessageCommunication<ExternalAction>(window.parent, async function onAction(action) {
+        for (const handler of actionHandlers) {
+            try {
+                await handler(action);
+            } catch (error) {
+                log.error('Handler Failed: ', error);
+            }
+        }
+    });
     // initialize fragment content menu entry
     initDialogs(rta);
+    // initialize extension point service
+    extPointService.init(subscribe);
     // also initialize the editor
     init(rta);
     log.debug('ADP init executed.');

package/dist/client/adp/ui/ExtensionPoint.view.xml

@@ -0,0 +1,40 @@
+<mvc:View xmlns:mvc="sap.ui.core.mvc"
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:f="sap.ui.layout.form">
+        <Dialog id="addFragmentAtExtPointDialog" title="Add XML Fragment at Extension Point" contentWidth="500px" class="sapUiRTABorder">
+            <content>
+                <f:SimpleForm id="addFragmentAtExtPointDialog_Form"
+                    editable="true"
+                    layout="ResponsiveGridLayout"
+                    labelSpanS="4"
+                    singleContainerFullSize="false">
+                    <f:content>
+                        <Label text="Extension Point" />
+                        <Text text="{/extensionPointName}" />
+                        <Label text="Fragment Name" />
+                        <Input 
+                            description=".fragment.xml" 
+                            value="{/newFragmentName}" 
+                            liveChange="onFragmentNameInputChange">
+                        </Input>
+                    </f:content>
+                </f:SimpleForm>
+            </content>
+            <beginButton>
+                <Button 
+                    id="createDialogBtn" 
+                    text="Create"
+                    press="onCreateBtnPress"
+                    enabled="false"
+                    type="Emphasized" />
+            </beginButton>
+            <endButton>
+                <Button 
+                    id="closeDialogBtn" 
+                    text="Cancel"
+                    press="handleDialogClose"
+                    type="Reject" />
+            </endButton>
+        </Dialog>
+</mvc:View>

package/dist/client/adp/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+
+sap.ui.define([], function () {
+  "use strict";
+
+  /**
+   * 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
+   */
+  function createDeferred() {
+    let resolve = null;
+    let reject = null;
+    const promise = new Promise((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
+    };
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.createDeferred = createDeferred;
+  return __exports;
+});
+//# sourceMappingURL=utils.js.map

package/dist/client/adp/utils.ts

@@ -0,0 +1,28 @@
+export interface Deferred<T> {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: unknown) => void;
+}
+
+/**
+ * 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 };
+}

package/dist/client/cpe/changes/service.js

@@ -75,6 +75,9 @@ sap.ui.define([
                         ].every(item => item === undefined || item === null)) {
                         throw new Error('Invalid change, missing new value in the change file');
                     }
+                    if (change.changeType !== 'propertyChange' && change.changeType !== 'propertyBindingChange') {
+                        throw new Error('Unknown Change Type');
+                    }
                     return {
                         type: 'saved',
                         kind: 'valid',
@@ -83,14 +86,16 @@ sap.ui.define([
                         propertyName: change.content.property,
                         value: change.content.newValue ?? change.content.newBinding,
                         timestamp: new Date(change.creation).getTime(),
-                        controlName: change.selector.type.split('.').pop()
+                        controlName: change.selector.type ? change.selector.type.split('.').pop() : '',
+                        changeType: change.changeType
                     };
                 } catch (error) {
                     if (change.fileName) {
                         const unknownChange = {
                             type: 'saved',
                             kind: 'unknown',
-                            fileName: change.fileName
+                            fileName: change.fileName,
+                            controlId: change.selector?.id
                         };
                         if (change.creation) {
                             unknownChange.timestamp = new Date(change.creation).getTime();
@@ -121,41 +126,62 @@ sap.ui.define([
                 const allCommands = stack.getCommands();
                 const executedCommands = stack.getAllExecutedCommands();
                 const inactiveCommandCount = allCommands.length - executedCommands.length;
-                const activeChanges = allCommands.map((command, i) => {
-                    let result;
+                let activeChanges = [];
+                allCommands.forEach((command, i) => {
                     try {
-                        const selector = command.getProperty('selector');
-                        const changeType = command.getProperty('changeType');
-                        let value = '';
-                        switch (changeType) {
-                        case 'propertyChange':
-                            value = command.getProperty('newValue');
-                            break;
-                        case 'propertyBindingChange':
-                            value = command.getProperty('newBinding');
-                            break;
-                        default:
-                            throw new Error(`Invalid changeType ${ changeType }`);
+                        if (typeof command.getCommands === 'function') {
+                            const subCommands = command.getCommands();
+                            subCommands.forEach(command => {
+                                activeChanges.push(this.prepareChangeType(command, inactiveCommandCount, i));
+                            });
+                        } else {
+                            activeChanges.push(this.prepareChangeType(command, inactiveCommandCount, i));
                         }
-                        result = {
-                            type: 'pending',
-                            controlId: selector.id,
-                            propertyName: command.getProperty('propertyName'),
-                            isActive: i >= inactiveCommandCount,
-                            value,
-                            controlName: command.getElement().getMetadata().getName().split('.').pop() ?? ''
-                        };
                     } catch (error) {
-                        Log.error('Failed: ', error);
+                        Log.error('CPE: Change creation Failed', error);
                     }
-                    return result;
-                }).filter(change => !!change);
+                });
+                activeChanges = activeChanges.filter(change => !!change);
                 sendAction(changeStackModified({
                     saved: this.savedChanges,
                     pending: activeChanges
                 }));
             };
         }
+        prepareChangeType(command, inactiveCommandCount, index) {
+            let result;
+            let value = '';
+            const selector = command.getSelector();
+            const changeType = command.getChangeType();
+            switch (changeType) {
+            case 'propertyChange':
+                value = command.getProperty('newValue');
+                break;
+            case 'propertyBindingChange':
+                value = command.getProperty('newBinding');
+                break;
+            }
+            if (changeType === 'propertyChange' || changeType === 'propertyBindingChange') {
+                result = {
+                    type: 'pending',
+                    changeType,
+                    controlId: selector.id,
+                    propertyName: command.getProperty('propertyName'),
+                    isActive: index >= inactiveCommandCount,
+                    value,
+                    controlName: command.getElement().getMetadata().getName().split('.').pop() ?? ''
+                };
+            } else {
+                result = {
+                    type: 'pending',
+                    controlId: selector.id,
+                    changeType,
+                    isActive: index >= inactiveCommandCount,
+                    controlName: command.getElement().getMetadata().getName().split('.').pop() ?? ''
+                };
+            }
+            return result;
+        }
     }
     var __exports = { __esModule: true };
     __exports.ChangeService = ChangeService;