@sap-ux/preview-middleware 0.11.35 → 0.12.0

package/dist/client/flp/initRta.js

@@ -0,0 +1,180 @@
+"use strict";
+
+sap.ui.define(["sap/base/util/merge", "sap/ui/core/Control", "sap/ui/core/UIComponent", "sap/ui/fl/Utils", "sap/ui/fl/write/api/FeaturesAPI", "sap/ui/rta/RuntimeAuthoring"], function (merge, Control, UIComponent, Utils, FeaturesAPI, RuntimeAuthoring) {
+  "use strict";
+
+  const defaultOptions = {
+    flexSettings: {
+      developerMode: false,
+      layer: 'CUSTOMER'
+    }
+  };
+  const layers = {
+    BASE: 'BASE',
+    CUSTOMER: 'CUSTOMER',
+    CUSTOMER_BASE: 'CUSTOMER_BASE',
+    PARTNER: 'PARTNER',
+    PUBLIC: 'PUBLIC',
+    USER: 'USER',
+    VENDOR: 'VENDOR'
+  };
+
+  /**
+   * Checks if the given layer is a valid layer.
+   *
+   * @param {string} layer - The layer name to be validated.
+   * @returns {boolean} Returns true if the layer is valid, otherwise false.
+   */
+  function isValidLayer(layer) {
+    return Object.keys(layers).some(existingLayer => existingLayer === layer);
+  }
+
+  /**
+   * Validates a given layer and throws an error if it is invalid.
+   *
+   * @param {string} layer - The layer name to be checked.
+   * @throws {Error} Throws an error if the layer is not valid.
+   */
+  function checkLayer(layer) {
+    if (!isValidLayer(layer)) {
+      throw new Error('An invalid layer is passed');
+    }
+  }
+
+  /**
+   * Checks if the given root control is an instance of Control or UIComponent.
+   *
+   * @param {Control | UIComponent} rootControl - The root control to be checked.
+   * @throws {Error} Throws an error if the root control is not an instance of Control or UIComponent.
+   */
+  function checkRootControl(rootControl) {
+    if (!(rootControl instanceof Control) && !(rootControl instanceof UIComponent)) {
+      throw new Error('An invalid root control was passed');
+    }
+  }
+
+  /**
+   * Checks if key user adaptation is enabled for the specified component.
+   * Fiori tools mode is considered a developer scenario where the `flexEnabled` flag should not be evaluated.
+   *
+   * @param {Control} component - The UI5 control component to check for flex (key user adaptation) enabled status.
+   * @throws {Error} Throws an error if key user adaptation is explicitly disabled in the component's manifest.
+   */
+  function checkFlexEnabled(component) {
+    // fiori tools is always a developer scenario where the flexEnabled flag should not be evaluated
+    const fioriToolsMode = new URLSearchParams(window.location.search).get('fiori-tools-rta-mode');
+    if (!fioriToolsMode || fioriToolsMode === 'false') {
+      const manifest = component.getManifest() || {};
+      const flexEnabled = manifest['sap.ui5']?.flexEnabled;
+      if (flexEnabled === false) {
+        throw new Error('This app is not enabled for key user adaptation');
+      }
+    }
+  }
+
+  /**
+   * Checks if the current user is a key user for the given layer.
+   * Specifically, it checks for key user rights if the layer is the CUSTOMER layer.
+   * If the user is not a key user and the layer is CUSTOMER, an error is thrown.
+   *
+   * Note: The function assumes the presence of 'layers.CUSTOMER'. In case of non-CUSTOMER layers,
+   * it simply resolves the promise without any additional checks.
+   *
+   * @param {string} layer - The layer for which to check key user rights.
+   * @returns {Promise<void>} A promise that resolves if the user is a key user or the layer is not CUSTOMER.
+   *                          Rejects with an error if the user is not a key user for the CUSTOMER layer.
+   * @throws {Error} Throws an error with the message 'No key user rights found' if the user lacks key user rights.
+   */
+  async function checkKeyUser(layer) {
+    if (layers.CUSTOMER === layer) {
+      const isKeyUser = await FeaturesAPI.isKeyUser();
+      if (!isKeyUser) {
+        throw new Error('No key user rights found');
+      }
+    }
+  }
+
+  /**
+   * Checks the validity of the specified layer and root control.
+   * It ensures that the layer is valid and the root control is an instance of Control or UIComponent.
+   * Additionally, it checks key user permissions for the specified layer.
+   *
+   * @param {Control} rootControl - The root control to be validated.
+   * @param {string} layer - The layer name to be validated.
+   * @returns {Promise<void>} A promise that resolves when all checks pass without errors.
+   * @throws {Error} Throws an error if any of the checks fail.
+   */
+  async function checkLayerAndControl(rootControl, layer) {
+    checkLayer(layer);
+    checkRootControl(rootControl);
+    await checkKeyUser(layer);
+  }
+
+  /**
+   * Retrieves the first HTML element with the specified title attribute.
+   *
+   * @param {string} title - The title attribute value to search for in the HTML elements.
+   * @param {Element | null} element - The target element that will be searched.
+   * @returns {Element | null} The first HTML element that matches the given title attribute value, or null if no such element is found.
+   */
+  function getElementByTitle(title, element) {
+    const selector = `[title="${title}"]`;
+    return element ? element.querySelector(selector) : document.querySelector(selector);
+  }
+
+  /**
+   * Hides a UI5 Button control with the specified ID.
+   *
+   * This function attempts to find a UI5 Button control by its ID and then sets its visibility to false.
+   *
+   * @param {string | undefined} buttonId - The ID of the Button control to hide. If undefined, no action is taken.
+   * @returns {void}
+   */
+  function hideButtonById(buttonId) {
+    const button = sap.ui.getCore().byId(buttonId);
+    button?.setVisible(false);
+  }
+
+  /**
+   * Hides specific buttons by ID from the RTA toolbar.
+   * This function specifically targets buttons 'Reset' and 'Publish'.
+   */
+  function removeExtraBtnsFromToolbar() {
+    const rtaToolbarEl = document.querySelector('.sapUiRtaToolbar');
+    const resetEl = getElementByTitle('Reset', rtaToolbarEl);
+    const publishEl = getElementByTitle('Publish', rtaToolbarEl);
+    hideButtonById(resetEl?.id);
+    hideButtonById(publishEl?.id);
+  }
+
+  /**
+   * Initializes custom RuntimeAuthoring for UI5 Versions < 1.72 and start UI Adaptation.
+   * Ensures that the passed options are valid.
+   *
+   * @param {RTAOptions} options - Options Options that are passed to RuntimeAuthoring upon initialization.
+   * @param {RTAPlugin} loadPlugins - Script that needs to be executed after rta is initialized.
+   * @returns {Promise<void>} A promise that resolves when all the checks have passed and RuntimeAuthoring is started.
+   */
+  var __exports = async function (options, loadPlugins) {
+    options = merge(defaultOptions, options);
+    const layer = options.flexSettings.layer;
+    const rootControl = options.rootControl;
+    await checkLayerAndControl(rootControl, layer);
+    options.rootControl = Utils.getAppComponentForControl(rootControl);
+    checkFlexEnabled(options.rootControl);
+    const rta = new RuntimeAuthoring(options);
+    rta.attachEvent('stop', () => rta.destroy());
+    if (loadPlugins) {
+      await loadPlugins(rta);
+    }
+    await rta.start();
+    removeExtraBtnsFromToolbar();
+  };
+  __exports.isValidLayer = isValidLayer;
+  __exports.checkLayer = checkLayer;
+  __exports.checkRootControl = checkRootControl;
+  __exports.checkFlexEnabled = checkFlexEnabled;
+  __exports.checkKeyUser = checkKeyUser;
+  return __exports;
+});
+//# sourceMappingURL=initRta.js.map

package/dist/client/flp/initRta.ts

@@ -0,0 +1,193 @@
+import Button from 'sap/m/Button';
+
+import merge from 'sap/base/util/merge';
+
+import Control from 'sap/ui/core/Control';
+import UIComponent from 'sap/ui/core/UIComponent';
+
+import Utils from 'sap/ui/fl/Utils';
+import FeaturesAPI from 'sap/ui/fl/write/api/FeaturesAPI';
+
+import type { RTAPlugin } from 'sap/ui/rta/api/startAdaptation';
+import RuntimeAuthoring, { Manifest, type RTAOptions } from 'sap/ui/rta/RuntimeAuthoring';
+
+const defaultOptions = {
+    flexSettings: {
+        developerMode: false,
+        layer: 'CUSTOMER'
+    }
+};
+
+const layers = {
+    BASE: 'BASE',
+    CUSTOMER: 'CUSTOMER',
+    CUSTOMER_BASE: 'CUSTOMER_BASE',
+    PARTNER: 'PARTNER',
+    PUBLIC: 'PUBLIC',
+    USER: 'USER',
+    VENDOR: 'VENDOR'
+};
+
+/**
+ * Checks if the given layer is a valid layer.
+ *
+ * @param {string} layer - The layer name to be validated.
+ * @returns {boolean} Returns true if the layer is valid, otherwise false.
+ */
+export function isValidLayer(layer: string): boolean {
+    return Object.keys(layers).some((existingLayer) => existingLayer === layer);
+}
+
+/**
+ * Validates a given layer and throws an error if it is invalid.
+ *
+ * @param {string} layer - The layer name to be checked.
+ * @throws {Error} Throws an error if the layer is not valid.
+ */
+export function checkLayer(layer: string): void {
+    if (!isValidLayer(layer)) {
+        throw new Error('An invalid layer is passed');
+    }
+}
+
+/**
+ * Checks if the given root control is an instance of Control or UIComponent.
+ *
+ * @param {Control | UIComponent} rootControl - The root control to be checked.
+ * @throws {Error} Throws an error if the root control is not an instance of Control or UIComponent.
+ */
+export function checkRootControl(rootControl: Control | UIComponent): void {
+    if (!(rootControl instanceof Control) && !(rootControl instanceof UIComponent)) {
+        throw new Error('An invalid root control was passed');
+    }
+}
+
+/**
+ * Checks if key user adaptation is enabled for the specified component.
+ * Fiori tools mode is considered a developer scenario where the `flexEnabled` flag should not be evaluated.
+ *
+ * @param {Control} component - The UI5 control component to check for flex (key user adaptation) enabled status.
+ * @throws {Error} Throws an error if key user adaptation is explicitly disabled in the component's manifest.
+ */
+export function checkFlexEnabled(component: Control): void {
+    // fiori tools is always a developer scenario where the flexEnabled flag should not be evaluated
+    const fioriToolsMode = new URLSearchParams(window.location.search).get('fiori-tools-rta-mode');
+    if (!fioriToolsMode || fioriToolsMode === 'false') {
+        const manifest = (component as Control & { getManifest: () => Manifest }).getManifest() || {};
+        const flexEnabled = manifest['sap.ui5']?.flexEnabled;
+
+        if (flexEnabled === false) {
+            throw new Error('This app is not enabled for key user adaptation');
+        }
+    }
+}
+
+/**
+ * Checks if the current user is a key user for the given layer.
+ * Specifically, it checks for key user rights if the layer is the CUSTOMER layer.
+ * If the user is not a key user and the layer is CUSTOMER, an error is thrown.
+ *
+ * Note: The function assumes the presence of 'layers.CUSTOMER'. In case of non-CUSTOMER layers,
+ * it simply resolves the promise without any additional checks.
+ *
+ * @param {string} layer - The layer for which to check key user rights.
+ * @returns {Promise<void>} A promise that resolves if the user is a key user or the layer is not CUSTOMER.
+ *                          Rejects with an error if the user is not a key user for the CUSTOMER layer.
+ * @throws {Error} Throws an error with the message 'No key user rights found' if the user lacks key user rights.
+ */
+export async function checkKeyUser(layer: string): Promise<void> {
+    if (layers.CUSTOMER === layer) {
+        const isKeyUser = await FeaturesAPI.isKeyUser();
+        if (!isKeyUser) {
+            throw new Error('No key user rights found');
+        }
+    }
+}
+
+/**
+ * Checks the validity of the specified layer and root control.
+ * It ensures that the layer is valid and the root control is an instance of Control or UIComponent.
+ * Additionally, it checks key user permissions for the specified layer.
+ *
+ * @param {Control} rootControl - The root control to be validated.
+ * @param {string} layer - The layer name to be validated.
+ * @returns {Promise<void>} A promise that resolves when all checks pass without errors.
+ * @throws {Error} Throws an error if any of the checks fail.
+ */
+async function checkLayerAndControl(rootControl: Control, layer: string): Promise<void> {
+    checkLayer(layer);
+
+    checkRootControl(rootControl);
+
+    await checkKeyUser(layer);
+}
+
+/**
+ * Retrieves the first HTML element with the specified title attribute.
+ *
+ * @param {string} title - The title attribute value to search for in the HTML elements.
+ * @param {Element | null} element - The target element that will be searched.
+ * @returns {Element | null} The first HTML element that matches the given title attribute value, or null if no such element is found.
+ */
+function getElementByTitle(title: string, element?: Element | null): Element | null {
+    const selector = `[title="${title}"]`;
+    return element ? element.querySelector(selector) : document.querySelector(selector);
+}
+
+/**
+ * Hides a UI5 Button control with the specified ID.
+ *
+ * This function attempts to find a UI5 Button control by its ID and then sets its visibility to false.
+ *
+ * @param {string | undefined} buttonId - The ID of the Button control to hide. If undefined, no action is taken.
+ * @returns {void}
+ */
+function hideButtonById(buttonId: string | undefined): void {
+    const button = sap.ui.getCore().byId(buttonId) as Button;
+    button?.setVisible(false);
+}
+
+/**
+ * Hides specific buttons by ID from the RTA toolbar.
+ * This function specifically targets buttons 'Reset' and 'Publish'.
+ */
+function removeExtraBtnsFromToolbar(): void {
+    const rtaToolbarEl = document.querySelector('.sapUiRtaToolbar');
+    const resetEl = getElementByTitle('Reset', rtaToolbarEl);
+    const publishEl = getElementByTitle('Publish', rtaToolbarEl);
+
+    hideButtonById(resetEl?.id);
+    hideButtonById(publishEl?.id);
+}
+
+/**
+ * Initializes custom RuntimeAuthoring for UI5 Versions < 1.72 and start UI Adaptation.
+ * Ensures that the passed options are valid.
+ *
+ * @param {RTAOptions} options - Options Options that are passed to RuntimeAuthoring upon initialization.
+ * @param {RTAPlugin} loadPlugins - Script that needs to be executed after rta is initialized.
+ * @returns {Promise<void>} A promise that resolves when all the checks have passed and RuntimeAuthoring is started.
+ */
+export default async function (options: RTAOptions, loadPlugins: RTAPlugin): Promise<void> {
+    options = merge(defaultOptions, options) as RTAOptions;
+
+    const layer = options.flexSettings.layer;
+    const rootControl = options.rootControl;
+
+    await checkLayerAndControl(rootControl, layer);
+
+    options.rootControl = Utils.getAppComponentForControl(rootControl);
+
+    checkFlexEnabled(options.rootControl);
+
+    const rta = new RuntimeAuthoring(options);
+    rta.attachEvent('stop', () => rta.destroy());
+
+    if (loadPlugins) {
+        await loadPlugins(rta);
+    }
+
+    await rta.start();
+
+    removeExtraBtnsFromToolbar();
+}

package/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "0.11.35",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
   "dependencies": {
     "ejs": "3.1.9",
     "@sap-ux/logger": "0.5.0",
-    "@sap-ux/adp-tooling": "0.8.6",
+    "@sap-ux/adp-tooling": "0.8.8",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.4.13"
   },
   "devDependencies": {
@@ -39,8 +39,9 @@
     "supertest": "6.3.3",
     "@sap-ux-private/playwright": "0.0.2",
     "dotenv": "16.3.1",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.8.14",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.9.0",
     "@sap-ux/project-access": "1.17.2",
+    "@sap-ux/axios-extension": "1.11.1",
     "@sap-ux/store": "0.4.2"
   },
   "peerDependencies": {

package/templates/flp/sandbox.html

@@ -58,7 +58,13 @@
         data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.flex) { %>
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flex) %>'<% } if (locals.locateReuseLibsScript) { %>
         data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>>
-    </script><% if (locals.flex && flex?.scenario === 'ADAPTATION_PROJECT') { %>
+    </script>
+
+    <script type="text/javascript">
+        (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
+    </script>
+    
+    <% if (locals.flex && flex?.scenario === 'ADAPTATION_PROJECT') { %>
         <!-- Temporary fix until RTA provides api for enable/disable buttons in main RTA navigation menu -->
     <style>
         .sapUiRtaToolbarActionsSection button[aria-label="Exit"],

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

@@ -1,68 +0,0 @@
-<mvc:View xmlns:mvc="sap.ui.core.mvc"
-    xmlns="sap.m"
-    xmlns:core="sap.ui.core"
-    xmlns:f="sap.ui.layout.form">
-        <Dialog id="addNewFragmentDialog" title="Add XML Fragment" contentWidth="500px" class="sapUiRTABorder">
-            <content>
-                <f:SimpleForm id="addNewFragmentDialog_Form"
-                    editable="true"
-                    layout="ResponsiveGridLayout"
-                    labelSpanS="4"
-                    singleContainerFullSize="false">
-                    <f:content>
-                        <Label text="Control Type" />
-                        <Text text="{/selectedControlName}" />
-                        <Label text="Target Aggregation" />
-                        <Select
-                            change="onAggregationChanged"
-                            selectedKey="{/selectedAggregation/key}"
-                            items="{
-                                path: '/targetAggregation',
-                                sorter: { path: 'text' }
-                            }">
-                            <core:Item key="{key}" text="{value}" />
-                        </Select>
-                        <Label text="Index" />
-                        <HBox alignItems="Center">
-                            <Select
-                                enabled="{/indexHandlingFlag}"
-                                selectedKey='{/selectedIndex}'
-                                items="{
-                                    path: '/index',
-                                    sorter: { path: 'text' }
-                                }">
-                                <core:Item key="{key}" text="{value}" />
-                            </Select>
-                            <core:Icon
-                                useIconTooltip="false"
-                                visible="{/specialIndexHandlingIcon}" 
-                                src="sap-icon://message-information" 
-                                class= "sapUiTinyMarginBegin" 
-                                tooltip="{/iconTooltip}" />
-                        </HBox>
-                        <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/ui/ControllerExtension.view.xml

@@ -1,49 +0,0 @@
-<mvc:View xmlns:mvc="sap.ui.core.mvc"
-    xmlns="sap.m"
-    xmlns:core="sap.ui.core"
-    xmlns:f="sap.ui.layout.form">
-        <Dialog id="controllerExtensionDialog" title="Extend With Controller" contentWidth="450px" class="sapUiRTABorder">
-            <content>
-                <f:SimpleForm id="controllerExtensionDialog_Form"
-                    editable="true"
-                    layout="ResponsiveGridLayout"
-                    labelSpanS="4"
-                    singleContainerFullSize="false">
-                    <f:content>
-                        <Label text="Controller Name" />
-                        <Input 
-                            description=".js" 
-                            value="{/newControllerName}" 
-                            liveChange="onControllerNameInputChange">
-                        </Input>
-                    </f:content>
-                </f:SimpleForm>
-                <f:SimpleForm id="controllerExtensionDialog_Form--existingController"
-                    editable="true"
-                    layout="ResponsiveGridLayout"
-                    labelSpanS="12"
-                    visible="false"
-                    singleContainerFullSize="false">
-                    <f:content>
-                        <Label text="An existing controller extension has been found. Please use the previously created extension controller" />
-                        <Text text="{/controllerPathFromRoot}" />
-                    </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/ui/ExtensionPoint.view.xml

@@ -1,49 +0,0 @@
-<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" />
-                        <Select
-                            enabled="{/extensionListEnabled}"
-                            change="onExtensionPointHandler"
-                            selectedKey='{/extensionPointKey}'
-                            items="{
-                                path: '/extensionPointList',
-                                sorter: { path: 'text' }
-                            }">
-                            <core:Item key="{key}" text="{value}" />
-                        </Select>
-                        <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>