@sap-ux/preview-middleware 0.5.7 → 0.6.0

package/dist/client/adp/api-handler.js

@@ -0,0 +1,96 @@
+"use strict";
+
+sap.ui.define([], function () {
+  "use strict";
+
+  var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
+    ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
+    ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
+    ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
+    return ApiEndpoints;
+  }(ApiEndpoints || {});
+  var RequestMethod = /*#__PURE__*/function (RequestMethod) {
+    RequestMethod["GET"] = "GET";
+    RequestMethod["PUT"] = "PUT";
+    RequestMethod["POST"] = "POST";
+    RequestMethod["PATCH"] = "PATCH";
+    RequestMethod["DELETE"] = "DELETE";
+    return RequestMethod;
+  }(RequestMethod || {});
+  /**
+   * Requests a given endpoint
+   *
+   * @param endpoint API Endpoint
+   * @param method RequestMethod
+   * @param data Data to be sent to the server
+   * @returns Data from the server request
+   */
+  async function request(endpoint, method, data) {
+    const config = {
+      method,
+      body: JSON.stringify(data),
+      headers: {
+        'content-type': 'application/json'
+      }
+    };
+    try {
+      const response = await fetch(endpoint, config);
+      if (!response.ok) {
+        throw new Error(`Request failed, status: ${response.status}.`);
+      }
+      switch (method) {
+        case RequestMethod.GET:
+          return response.json();
+        case RequestMethod.POST:
+          /**
+           * Since POST usually creates something
+           * and returns nothing (or a message) we just parse the text from res.send(msg)
+           */
+          return response.text();
+        default:
+          return response.json();
+      }
+    } catch (e) {
+      throw new Error(e.message);
+    }
+  }
+
+  /**
+   * Retrieves all XML fragments from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getFragments() {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.GET);
+  }
+
+  /**
+   * Writes an XML fragment to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeFragment(data) {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
+  }
+
+  /**
+   * Retrieves manifest.appdescr_variant from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getManifestAppdescr() {
+    return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ApiEndpoints = ApiEndpoints;
+  __exports.RequestMethod = RequestMethod;
+  __exports.request = request;
+  __exports.getFragments = getFragments;
+  __exports.writeFragment = writeFragment;
+  __exports.getManifestAppdescr = getManifestAppdescr;
+  return __exports;
+});
+//# sourceMappingURL=api-handler.js.map

package/dist/client/adp/api-handler.ts

@@ -0,0 +1,102 @@
+import type { Layer } from 'sap/ui/fl';
+
+export const enum ApiEndpoints {
+    FRAGMENT = '/adp/api/fragment',
+    CONTROLLER = '/adp/api/controller',
+    MANIFEST_APP_DESCRIPTOR = '/manifest.appdescr_variant'
+}
+
+export const enum RequestMethod {
+    GET = 'GET',
+    PUT = 'PUT',
+    POST = 'POST',
+    PATCH = 'PATCH',
+    DELETE = 'DELETE'
+}
+
+type Fragments = { fragmentName: string }[];
+
+export interface FragmentsResponse {
+    fragments: Fragments;
+    message: string;
+}
+
+export interface ManifestAppdescr {
+    fileName: string;
+    layer: Layer;
+    fileType: string;
+    reference: string;
+    id: string;
+    namespace: string;
+    version: string;
+    content: object[];
+}
+
+/**
+ * Requests a given endpoint
+ *
+ * @param endpoint API Endpoint
+ * @param method RequestMethod
+ * @param data Data to be sent to the server
+ * @returns Data from the server request
+ */
+export async function request<T>(endpoint: ApiEndpoints, method: RequestMethod, data?: unknown): Promise<T> {
+    const config: RequestInit = {
+        method,
+        body: JSON.stringify(data),
+        headers: {
+            'content-type': 'application/json'
+        }
+    };
+
+    try {
+        const response: Response = await fetch(endpoint, config);
+
+        if (!response.ok) {
+            throw new Error(`Request failed, status: ${response.status}.`);
+        }
+
+        switch (method) {
+            case RequestMethod.GET:
+                return response.json();
+            case RequestMethod.POST:
+                /**
+                 * Since POST usually creates something
+                 * and returns nothing (or a message) we just parse the text from res.send(msg)
+                 */
+                return response.text() as T;
+            default:
+                return response.json();
+        }
+    } catch (e) {
+        throw new Error(e.message);
+    }
+}
+
+/**
+ * Retrieves all XML fragments from the project's workspace
+ *
+ * @returns Generic Promise<T>
+ */
+export async function getFragments(): Promise<FragmentsResponse> {
+    return request<FragmentsResponse>(ApiEndpoints.FRAGMENT, RequestMethod.GET);
+}
+
+/**
+ * Writes an XML fragment to the project's workspace
+ *
+ * @param data Data to be send to the server
+ * @returns Generic Promise<T>
+ */
+export async function writeFragment<T>(data: T): Promise<T> {
+    return request<T>(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
+}
+
+/**
+ * Retrieves manifest.appdescr_variant from the project's workspace
+ *
+ * @returns Generic Promise<T>
+ */
+export async function getManifestAppdescr(): Promise<ManifestAppdescr> {
+    return request<ManifestAppdescr>(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
+}

package/dist/client/adp/command-executor.js

@@ -0,0 +1,43 @@
+"use strict";
+
+sap.ui.define(["sap/m/MessageToast", "sap/ui/rta/command/CommandFactory"], function (MessageToast, CommandFactory) {
+  "use strict";
+
+  /**
+   * Class responsible for handling rta calls
+   */
+  class CommandExecutor {
+    /**
+     *
+     * @param rta Runtime Authoring
+     */
+    constructor(rta) {
+      this.rta = rta;
+    }
+
+    /**
+     * Generates command based on given values and executes it
+     *
+     * @param runtimeControl Managed object
+     * @param commandName Command name
+     * @param modifiedValue Modified value/s
+     * @param designMetadata Design time metadata
+     * @param flexSettings Additional flex settings
+     */
+    async generateAndExecuteCommand(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings) {
+      try {
+        const command = await CommandFactory.getCommandFor(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings);
+
+        /**
+         * The change will have pending state and will only be saved to the workspace when the user clicks save icon
+         */
+        await this.rta.getCommandStack().pushAndExecute(command);
+      } catch (e) {
+        MessageToast.show(e.message);
+        throw new Error(e.message);
+      }
+    }
+  }
+  return CommandExecutor;
+});
+//# sourceMappingURL=command-executor.js.map

package/dist/client/adp/command-executor.ts

@@ -0,0 +1,52 @@
+import MessageToast from 'sap/m/MessageToast';
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+import CommandFactory from 'sap/ui/rta/command/CommandFactory';
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import type { FlexSettings } from 'sap/ui/rta/RuntimeAuthoring';
+import type DesignTimeMetadata from 'sap/ui/dt/DesignTimeMetadata';
+
+/**
+ * Class responsible for handling rta calls
+ */
+export default class CommandExecutor {
+    /**
+     *
+     * @param rta Runtime Authoring
+     */
+    constructor(private readonly rta: RuntimeAuthoring) {}
+
+    /**
+     * Generates command based on given values and executes it
+     *
+     * @param runtimeControl Managed object
+     * @param commandName Command name
+     * @param modifiedValue Modified value/s
+     * @param designMetadata Design time metadata
+     * @param flexSettings Additional flex settings
+     */
+    public async generateAndExecuteCommand(
+        runtimeControl: ManagedObject,
+        commandName: 'addXML',
+        modifiedValue: object,
+        designMetadata: DesignTimeMetadata,
+        flexSettings: FlexSettings
+    ): Promise<void> {
+        try {
+            const command = await CommandFactory.getCommandFor(
+                runtimeControl,
+                commandName,
+                modifiedValue,
+                designMetadata,
+                flexSettings
+            );
+
+            /**
+             * The change will have pending state and will only be saved to the workspace when the user clicks save icon
+             */
+            await this.rta.getCommandStack().pushAndExecute(command);
+        } catch (e) {
+            MessageToast.show(e.message);
+            throw new Error(e.message);
+        }
+    }
+}

package/dist/client/adp/control-utils.js

@@ -0,0 +1,46 @@
+"use strict";
+
+sap.ui.define([], function () {
+  "use strict";
+
+  /**
+   * Handles calling control specific functions for retrieving control data
+   */
+  class ControlUtils {
+    /**
+     * Returns ManagedObject runtime control
+     *
+     * @param overlayControl Overlay
+     * @returns {ManagedObject} Managed Object instance
+     */
+    static getRuntimeControl(overlayControl) {
+      let runtimeControl;
+      if (overlayControl.getElementInstance) {
+        runtimeControl = overlayControl.getElementInstance();
+      } else {
+        runtimeControl = overlayControl.getElement();
+      }
+      return runtimeControl;
+    }
+
+    /**
+     * Returns control aggregation names in an array
+     *
+     * @param control Managed Object runtime control
+     * @param name Aggregation name
+     * @returns Array of control aggregations
+     */
+    static getControlAggregationByName(control, name) {
+      let result = [];
+      const aggregation = (control ? control.getMetadata().getAllAggregations() : {})[name];
+      if (aggregation) {
+        // This executes a _sGetter function that can vary from control to control (_sGetter can be: getContent, getItems, etc)
+        const names = aggregation._sGetter && control[aggregation._sGetter]() || [];
+        result = Array.isArray(names) ? names : [names];
+      }
+      return result;
+    }
+  }
+  return ControlUtils;
+});
+//# sourceMappingURL=control-utils.js.map

package/dist/client/adp/control-utils.ts

@@ -0,0 +1,48 @@
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+
+/**
+ * Handles calling control specific functions for retrieving control data
+ */
+export default class ControlUtils {
+    /**
+     * Returns ManagedObject runtime control
+     *
+     * @param overlayControl Overlay
+     * @returns {ManagedObject} Managed Object instance
+     */
+    public static getRuntimeControl(overlayControl: ElementOverlay): ManagedObject {
+        let runtimeControl;
+        if (overlayControl.getElementInstance) {
+            runtimeControl = overlayControl.getElementInstance();
+        } else {
+            runtimeControl = overlayControl.getElement();
+        }
+        return runtimeControl;
+    }
+
+    /**
+     * Returns control aggregation names in an array
+     *
+     * @param control Managed Object runtime control
+     * @param name Aggregation name
+     * @returns Array of control aggregations
+     */
+    public static getControlAggregationByName(control: ManagedObject, name: string): unknown[] {
+        let result: unknown[] = [];
+        const aggregation = (control ? control.getMetadata().getAllAggregations() : {})[name] as unknown as object & {
+            _sGetter: string;
+        };
+
+        if (aggregation) {
+            // This executes a _sGetter function that can vary from control to control (_sGetter can be: getContent, getItems, etc)
+            const names =
+                (aggregation._sGetter &&
+                    (control as ManagedObject & { [key: string]: () => unknown })[aggregation._sGetter]()) ||
+                [];
+
+            result = Array.isArray(names) ? names : [names];
+        }
+        return result;
+    }
+}

package/dist/client/adp/controllers/AddFragment.controller.js

@@ -0,0 +1,253 @@
+"use strict";
+
+sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "../control-utils", "../command-executor", "../api-handler"], function (MessageToast, sap_ui_core_library, Controller, JSONModel, OverlayRegistry, __ControlUtils, __CommandExecutor, ___api_handler) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  /** sap.ui.core */
+  const ValueState = sap_ui_core_library["ValueState"];
+  const ControlUtils = _interopRequireDefault(__ControlUtils);
+  const CommandExecutor = _interopRequireDefault(__CommandExecutor);
+  const getFragments = ___api_handler["getFragments"];
+  const getManifestAppdescr = ___api_handler["getManifestAppdescr"];
+  const writeFragment = ___api_handler["writeFragment"];
+  /**
+   * @namespace open.ux.preview.client.adp.controllers
+   */
+  const AddFragment = Controller.extend("open.ux.preview.client.adp.controllers.AddFragment", {
+    constructor: function _constructor(name, overlays, rta) {
+      Controller.prototype.constructor.call(this, name);
+      this.rta = rta;
+      this.overlays = overlays;
+      this.commandExecutor = new CommandExecutor(this.rta);
+    },
+    onInit: async function _onInit() {
+      this.model = new JSONModel();
+      this.dialog = this.byId('addNewFragmentDialog');
+      await this.buildDialogData();
+      this.getView()?.setModel(this.model);
+      this.dialog.open();
+    },
+    onAggregationChanged: function _onAggregationChanged(event) {
+      const source = event.getSource();
+      const selectedKey = source.getSelectedKey();
+      const selectedItem = source.getSelectedItem();
+      let selectedItemText = '';
+      if (selectedItem) {
+        selectedItemText = selectedItem.getText();
+      }
+      this.model.setProperty('/selectedAggregation/key', selectedKey);
+      this.model.setProperty('/selectedAggregation/value', selectedItemText);
+      let newSelectedControlChildren = Object.keys(ControlUtils.getControlAggregationByName(this.runtimeControl, selectedItemText));
+      newSelectedControlChildren = newSelectedControlChildren.map(key => {
+        return parseInt(key);
+      });
+      const updatedIndexArray = this.fillIndexArray(newSelectedControlChildren);
+      this.model.setProperty('/index', updatedIndexArray);
+      this.model.setProperty('/selectedIndex', updatedIndexArray.length - 1);
+    },
+    onIndexChanged: function _onIndexChanged(event) {
+      const source = event.getSource();
+      const selectedIndex = source.getSelectedItem()?.getText();
+      this.model.setProperty('/selectedIndex', selectedIndex);
+    },
+    onFragmentNameInputChange: function _onFragmentNameInputChange(event) {
+      const source = event.getSource();
+      const fragmentName = source.getValue().trim();
+      const fragmentList = this.model.getProperty('/fragmentList');
+      if (fragmentName.length <= 0) {
+        this.dialog.getBeginButton().setEnabled(false);
+        source.setValueState(ValueState.None);
+        this.model.setProperty('/newFragmentName', null);
+      } else {
+        const fileExists = fragmentList.find(f => {
+          return f.fragmentName === `${fragmentName}.fragment.xml`;
+        });
+        const isValidName = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(fragmentName);
+        if (fileExists) {
+          source.setValueState(ValueState.Error);
+          source.setValueStateText('Enter a different name. The fragment name that you entered already exists in your project.');
+          this.dialog.getBeginButton().setEnabled(false);
+        } else if (!isValidName) {
+          source.setValueState(ValueState.Error);
+          source.setValueStateText('A Fragment Name cannot contain white spaces or special characters.');
+          this.dialog.getBeginButton().setEnabled(false);
+        } else {
+          this.dialog.getBeginButton().setEnabled(true);
+          source.setValueState(ValueState.None);
+          this.model.setProperty('/newFragmentName', fragmentName);
+        }
+      }
+    },
+    onCreateBtnPress: async function _onCreateBtnPress(event) {
+      const source = event.getSource();
+      source.setEnabled(false);
+      const fragmentName = this.model.getProperty('/newFragmentName');
+      const index = parseInt(this.model.getProperty('/selectedIndex'));
+      const targetAggregation = this.model.getProperty('/selectedAggregation/value');
+      const fragmentData = {
+        index,
+        fragmentName,
+        targetAggregation
+      };
+      await this.createNewFragment(fragmentData);
+      this.handleDialogClose();
+    },
+    closeDialog: function _closeDialog() {
+      this.handleDialogClose();
+    },
+    handleDialogClose: function _handleDialogClose() {
+      this.dialog.close();
+      this.getView()?.destroy();
+    },
+    buildDialogData: async function _buildDialogData() {
+      const selectorId = this.overlays.getId();
+      let controlMetadata;
+      const overlayControl = sap.ui.getCore().byId(selectorId);
+      if (overlayControl) {
+        this.runtimeControl = ControlUtils.getRuntimeControl(overlayControl);
+        controlMetadata = this.runtimeControl.getMetadata();
+      } else {
+        throw new Error('Cannot get overlay control');
+      }
+      const allAggregations = Object.keys(controlMetadata.getAllAggregations());
+      const hiddenAggregations = ['customData', 'layoutData', 'dependents'];
+      const targetAggregation = allAggregations.filter(item => {
+        if (hiddenAggregations.indexOf(item) === -1) {
+          return item;
+        }
+        return false;
+      });
+      const defaultAggregation = controlMetadata.getDefaultAggregationName();
+      const selectedControlName = controlMetadata.getName();
+      let selectedControlChildren = Object.keys(ControlUtils.getControlAggregationByName(this.runtimeControl, defaultAggregation));
+      selectedControlChildren = selectedControlChildren.map(key => {
+        return parseInt(key);
+      });
+      this.model.setProperty('/selectedControlName', selectedControlName);
+      this.model.setProperty('/selectedAggregation', {});
+      const indexArray = this.fillIndexArray(selectedControlChildren);
+      const controlAggregation = targetAggregation.map((elem, index) => {
+        return {
+          key: index,
+          value: elem
+        };
+      });
+      if (defaultAggregation !== null) {
+        controlAggregation.forEach(obj => {
+          if (obj.value === defaultAggregation) {
+            obj.key = 'default';
+            this.model.setProperty('/selectedAggregation/key', obj.key);
+            this.model.setProperty('/selectedAggregation/value', obj.value);
+          }
+        });
+      } else {
+        this.model.setProperty('/selectedAggregation/key', controlAggregation[0].key);
+        this.model.setProperty('/selectedAggregation/value', controlAggregation[0].value);
+      }
+      try {
+        const {
+          fragments
+        } = await getFragments();
+        this.model.setProperty('/fragmentList', fragments);
+      } catch (e) {
+        throw new Error(e.message);
+      }
+      this.model.setProperty('/selectedIndex', indexArray.length - 1);
+      this.model.setProperty('/targetAggregation', controlAggregation);
+      this.model.setProperty('/index', indexArray);
+    },
+    fillIndexArray: function _fillIndexArray(selectedControlChildren) {
+      let indexArray = [];
+      if (selectedControlChildren.length === 0) {
+        indexArray.push({
+          key: 0,
+          value: 0
+        });
+      } else {
+        indexArray = selectedControlChildren.map((elem, index) => {
+          return {
+            key: index + 1,
+            value: elem + 1
+          };
+        });
+        indexArray.unshift({
+          key: 0,
+          value: 0
+        });
+        indexArray.push({
+          key: selectedControlChildren.length + 1,
+          value: selectedControlChildren.length + 1
+        });
+      }
+      return indexArray;
+    },
+    createNewFragment: async function _createNewFragment(fragmentData) {
+      const {
+        fragmentName,
+        index,
+        targetAggregation
+      } = fragmentData;
+      try {
+        await writeFragment({
+          fragmentName
+        });
+        MessageToast.show(`Fragment with name '${fragmentName}' was created.`);
+      } catch (e) {
+        // In case of error when creating a new fragment, we should not create a change file
+        MessageToast.show(e.message);
+        throw new Error(e.message);
+      }
+      await this.createFragmentChange({
+        fragmentName,
+        index,
+        targetAggregation
+      });
+    },
+    createFragmentChange: async function _createFragmentChange(fragmentData) {
+      const {
+        fragmentName,
+        index,
+        targetAggregation
+      } = fragmentData;
+      let manifest;
+      try {
+        manifest = await getManifestAppdescr();
+        if (!manifest) {
+          // Highly unlikely since adaptation projects are required to have manifest.appdescr_variant
+          throw new Error('Could not retrieve manifest');
+        }
+      } catch (e) {
+        MessageToast.show(e.message);
+        throw new Error(e.message);
+      }
+      const {
+        id,
+        reference,
+        namespace,
+        layer
+      } = manifest;
+      const flexSettings = {
+        baseId: reference,
+        developerMode: true,
+        layer: layer,
+        namespace: namespace,
+        projectId: id,
+        rootNamespace: namespace.split('/').slice(0, 2).join('/'),
+        scenario: undefined
+      };
+      const overlay = OverlayRegistry.getOverlay(this.runtimeControl);
+      const designMetadata = overlay.getDesignTimeMetadata();
+      const modifiedValue = {
+        fragmentPath: `fragments/${fragmentName}.fragment.xml`,
+        index: index ?? 0,
+        targetAggregation: targetAggregation ?? 'content'
+      };
+      await this.commandExecutor.generateAndExecuteCommand(this.runtimeControl, 'addXML', modifiedValue, designMetadata, flexSettings);
+    }
+  });
+  return AddFragment;
+});
+//# sourceMappingURL=AddFragment.controller.js.map