@sap-ux/preview-middleware 0.16.8 → 0.16.11

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

@@ -1,140 +1,140 @@
-"use strict";
-
-sap.ui.define(["sap/ui/model/json/JSONModel", "../api-handler", "./BaseDialog.controller", "../utils"], function (JSONModel, ___api_handler, __BaseDialog, ___utils) {
-  "use strict";
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
-  }
-  const getFragments = ___api_handler["getFragments"];
-  const BaseDialog = _interopRequireDefault(__BaseDialog);
-  const notifyUser = ___utils["notifyUser"];
-  /**
-   * @namespace open.ux.preview.client.adp.controllers
-   */
-  const ExtensionPoint = BaseDialog.extend("open.ux.preview.client.adp.controllers.ExtensionPoint", {
-    constructor: function _constructor(name, _overlays, rta, data) {
-      BaseDialog.prototype.constructor.call(this, name);
-      this.model = new JSONModel();
-      this.data = data;
-      this.rta = rta;
-    },
-    /**
-     * Setups the Dialog and the JSON Model
-     *
-     * @param {Dialog} dialog - Dialog instance
-     */
-    setup: async function _setup(dialog) {
-      this.dialog = dialog;
-      this.setEscapeHandler();
-      await this.buildDialogData();
-      this.dialog.setModel(this.model);
-      this.dialog.open();
-    },
-    /**
-     * Handles create button press
-     *
-     * @param event Event
-     */
-    onCreateBtnPress: function _onCreateBtnPress(event) {
-      const source = event.getSource();
-      source.setEnabled(false);
-      const fragmentName = this.model.getProperty('/newFragmentName');
-      this.createExtensionPointFragmentChange(fragmentName);
-      notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
-      this.handleDialogClose();
-    },
-    /**
-     * Handler for extension point select control
-     *
-     * @param event Select control change event
-     */
-    onExtensionPointHandler: function _onExtensionPointHandler(event) {
-      const source = event.getSource();
-      const selectedItem = source.getSelectedItem();
-      let extensionPointName = '';
-      if (selectedItem) {
-        extensionPointName = selectedItem.getText();
-      }
-      this.model.setProperty('/extensionPointName', extensionPointName);
-      const hasDefaultContent = this.hasDefaultContentForName(extensionPointName);
-      this.model.setProperty('/hasDefaultContent', hasDefaultContent);
-    },
-    /**
-     * Determines whether there is default content associated with the given name.
-     *
-     * @param {string} name - The name to check for associated default content.
-     * @returns {boolean} - True if there is non-empty default content associated with the name, false otherwise.
-     */
-    hasDefaultContentForName: function _hasDefaultContentForName(name) {
-      const defaultContent = this.data?.info.find(v => v.name === name)?.defaultContent;
-      return defaultContent ? defaultContent.length > 0 : false;
-    },
-    /**
-     * Builds data that is used in the dialog
-     */
-    buildDialogData: async function _buildDialogData() {
-      const name = this.data?.name;
-      if (name) {
-        const hasDefaultContent = this.hasDefaultContentForName(name);
-        const extensionPointList = [{
-          key: 0,
-          value: name
-        }];
-        this.updateModel(name, 0, extensionPointList, false, hasDefaultContent);
-      } else {
-        // In this case we are selecting from the application. There can be many extension points under one control.
-        const extensionPointList = this.data.info.map((v, idx) => {
-          return {
-            key: idx,
-            value: v.name
-          };
-        });
-        const firstElName = extensionPointList[0].value;
-        const enabled = extensionPointList.length > 1;
-        const hasDefaultContent = this.hasDefaultContentForName(firstElName);
-        this.updateModel(firstElName, 0, extensionPointList, enabled, hasDefaultContent);
-      }
-      try {
-        const {
-          fragments
-        } = await getFragments();
-        this.model.setProperty('/fragmentList', fragments);
-      } catch (e) {
-        this.handleError(e);
-      }
-    },
-    /**
-     * Updates the Select control according to provided values
-     *
-     * @param name Extension point name
-     * @param key Selected extension point key
-     * @param list All of the extension points that are under a view
-     * @param enabled Enables the select control
-     * @param hasDefaultContent Whether there is default content associated with the extension name
-     */
-    updateModel: function _updateModel(name, key, list, enabled, hasDefaultContent) {
-      this.model.setProperty('/extensionPointName', name);
-      this.model.setProperty('/extensionPointKey', key);
-      this.model.setProperty('/extensionPointList', list);
-      this.model.setProperty('/extensionListEnabled', enabled);
-      this.model.setProperty('/hasDefaultContent', hasDefaultContent);
-    },
-    /**
-     * Creates add xml at extension point changes
-     *
-     * @param fragmentName Fragment name
-     */
-    createExtensionPointFragmentChange: function _createExtensionPointFragmentChange(fragmentName) {
-      const extensionPointName = this.model.getProperty('/extensionPointName');
-      const modifiedValue = {
-        fragment: `<core:FragmentDefinition xmlns:core='sap.ui.core'></core:FragmentDefinition>`,
-        fragmentPath: `fragments/${fragmentName}.fragment.xml`,
-        extensionPointName
-      };
-      this.data.deferred.resolve(modifiedValue);
-    }
-  });
-  return ExtensionPoint;
+"use strict";
+
+sap.ui.define(["sap/ui/model/json/JSONModel", "../api-handler", "./BaseDialog.controller", "../utils"], function (JSONModel, ___api_handler, __BaseDialog, ___utils) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const getFragments = ___api_handler["getFragments"];
+  const BaseDialog = _interopRequireDefault(__BaseDialog);
+  const notifyUser = ___utils["notifyUser"];
+  /**
+   * @namespace open.ux.preview.client.adp.controllers
+   */
+  const ExtensionPoint = BaseDialog.extend("open.ux.preview.client.adp.controllers.ExtensionPoint", {
+    constructor: function _constructor(name, _overlays, rta, data) {
+      BaseDialog.prototype.constructor.call(this, name);
+      this.model = new JSONModel();
+      this.data = data;
+      this.rta = rta;
+    },
+    /**
+     * Setups the Dialog and the JSON Model
+     *
+     * @param {Dialog} dialog - Dialog instance
+     */
+    setup: async function _setup(dialog) {
+      this.dialog = dialog;
+      this.setEscapeHandler();
+      await this.buildDialogData();
+      this.dialog.setModel(this.model);
+      this.dialog.open();
+    },
+    /**
+     * Handles create button press
+     *
+     * @param event Event
+     */
+    onCreateBtnPress: function _onCreateBtnPress(event) {
+      const source = event.getSource();
+      source.setEnabled(false);
+      const fragmentName = this.model.getProperty('/newFragmentName');
+      this.createExtensionPointFragmentChange(fragmentName);
+      notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
+      this.handleDialogClose();
+    },
+    /**
+     * Handler for extension point select control
+     *
+     * @param event Select control change event
+     */
+    onExtensionPointHandler: function _onExtensionPointHandler(event) {
+      const source = event.getSource();
+      const selectedItem = source.getSelectedItem();
+      let extensionPointName = '';
+      if (selectedItem) {
+        extensionPointName = selectedItem.getText();
+      }
+      this.model.setProperty('/extensionPointName', extensionPointName);
+      const hasDefaultContent = this.hasDefaultContentForName(extensionPointName);
+      this.model.setProperty('/hasDefaultContent', hasDefaultContent);
+    },
+    /**
+     * Determines whether there is default content associated with the given name.
+     *
+     * @param {string} name - The name to check for associated default content.
+     * @returns {boolean} - True if there is non-empty default content associated with the name, false otherwise.
+     */
+    hasDefaultContentForName: function _hasDefaultContentForName(name) {
+      const defaultContent = this.data?.info.find(v => v.name === name)?.defaultContent;
+      return defaultContent ? defaultContent.length > 0 : false;
+    },
+    /**
+     * Builds data that is used in the dialog
+     */
+    buildDialogData: async function _buildDialogData() {
+      const name = this.data?.name;
+      if (name) {
+        const hasDefaultContent = this.hasDefaultContentForName(name);
+        const extensionPointList = [{
+          key: 0,
+          value: name
+        }];
+        this.updateModel(name, 0, extensionPointList, false, hasDefaultContent);
+      } else {
+        // In this case we are selecting from the application. There can be many extension points under one control.
+        const extensionPointList = this.data.info.map((v, idx) => {
+          return {
+            key: idx,
+            value: v.name
+          };
+        });
+        const firstElName = extensionPointList[0].value;
+        const enabled = extensionPointList.length > 1;
+        const hasDefaultContent = this.hasDefaultContentForName(firstElName);
+        this.updateModel(firstElName, 0, extensionPointList, enabled, hasDefaultContent);
+      }
+      try {
+        const {
+          fragments
+        } = await getFragments();
+        this.model.setProperty('/fragmentList', fragments);
+      } catch (e) {
+        this.handleError(e);
+      }
+    },
+    /**
+     * Updates the Select control according to provided values
+     *
+     * @param name Extension point name
+     * @param key Selected extension point key
+     * @param list All of the extension points that are under a view
+     * @param enabled Enables the select control
+     * @param hasDefaultContent Whether there is default content associated with the extension name
+     */
+    updateModel: function _updateModel(name, key, list, enabled, hasDefaultContent) {
+      this.model.setProperty('/extensionPointName', name);
+      this.model.setProperty('/extensionPointKey', key);
+      this.model.setProperty('/extensionPointList', list);
+      this.model.setProperty('/extensionListEnabled', enabled);
+      this.model.setProperty('/hasDefaultContent', hasDefaultContent);
+    },
+    /**
+     * Creates add xml at extension point changes
+     *
+     * @param fragmentName Fragment name
+     */
+    createExtensionPointFragmentChange: function _createExtensionPointFragmentChange(fragmentName) {
+      const extensionPointName = this.model.getProperty('/extensionPointName');
+      const modifiedValue = {
+        fragment: `<core:FragmentDefinition xmlns:core='sap.ui.core'></core:FragmentDefinition>`,
+        fragmentPath: `fragments/${fragmentName}.fragment.xml`,
+        extensionPointName
+      };
+      this.data.deferred.resolve(modifiedValue);
+    }
+  });
+  return ExtensionPoint;
 });
 //# sourceMappingURL=ExtensionPoint.controller.js.map

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

@@ -1,123 +1,140 @@
-"use strict";
-
-sap.ui.define(["sap/ui/core/Fragment", "sap/ui/fl/Utils", "./controllers/AddFragment.controller", "./controllers/ControllerExtension.controller", "./controllers/ExtensionPoint.controller"], function (Fragment, FlUtils, __AddFragment, __ControllerExtension, __ExtensionPoint) {
-  "use strict";
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
-  }
-  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 || {});
-  /**
-  * Handler for enablement of Extend With Controller context menu entry
-  *
-  * @param overlays Control overlays
-  * @param syncViewsIds Runtime Authoring
-  *
-  * @returns boolean
-  */
-  const isControllerExtensionEnabled = (overlays, syncViewsIds) => {
-    const clickedControlId = FlUtils.getViewForControl(overlays[0].getElement()).getId();
-    return overlays.length <= 1 && !syncViewsIds.includes(clickedControlId);
-  };
-
-  /**
-   * Determines whether the fragment command should be enabled based on the provided overlays.
-   *
-   * @param {ElementOverlay[]} overlays - An array of ElementOverlay objects representing the UI overlays.
-   * @returns {boolean} True if the fragment command is enabled, false otherwise.
-   */
-  const isFragmentCommandEnabled = overlays => {
-    if (overlays.length === 0) {
-      return false;
-    }
-    const control = overlays[0].getElement();
-    const hasStableId = FlUtils.checkControlId(control);
-    return hasStableId && overlays.length <= 1;
-  };
-
-  /**
-   * Determines the text that should be displayed for the Add Fragment context menu item.
-   *
-   * @param {ElementOverlay} overlay - An ElementOverlay object representing the UI overlay.
-   * @returns {string} The text of the Add Fragment context menu item.
-   */
-  const getAddFragmentItemText = overlay => {
-    if (!isFragmentCommandEnabled([overlay])) {
-      return 'Add: Fragment (Unavailable due to unstable ID of the control or its parent control)';
-    }
-    return 'Add: Fragment';
-  };
-
-  /**
-   * Handler for new context menu entry
-   *
-   * @param overlay Control overlays
-   * @param rta Runtime Authoring
-   * @param dialogName Dialog name
-   * @param extensionPointData Control ID
-   */
-  async function handler(overlay, rta, dialogName, extensionPointData) {
-    let controller;
-    switch (dialogName) {
-      case DialogNames.ADD_FRAGMENT:
-        controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta);
-        break;
-      case DialogNames.CONTROLLER_EXTENSION:
-        controller = new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta);
-        break;
-      case DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT:
-        controller = new ExtensionPoint(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta, extensionPointData);
-        break;
-    }
-    const id = dialogName === DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT ? `dialog--${dialogName}` : undefined;
-    const dialog = await Fragment.load({
-      name: `open.ux.preview.client.adp.ui.${dialogName}`,
-      controller,
-      id
-    });
-    await controller.setup(dialog);
-  }
-
-  /**
-   * Adds a new item to the context menu
-   *
-   * @param rta Runtime Authoring
-   * @param syncViewsIds Ids of all application sync views
-   */
-  const initDialogs = (rta, syncViewsIds) => {
-    const contextMenu = rta.getDefaultPlugins().contextMenu;
-    contextMenu.addMenuItem({
-      id: 'ADD_FRAGMENT',
-      text: getAddFragmentItemText,
-      handler: async overlays => await handler(overlays[0], rta, DialogNames.ADD_FRAGMENT),
-      enabled: isFragmentCommandEnabled,
-      icon: 'sap-icon://attachment-html'
-    });
-    contextMenu.addMenuItem({
-      id: 'EXTEND_CONTROLLER',
-      text: 'Extend With Controller',
-      handler: async overlays => await handler(overlays[0], rta, DialogNames.CONTROLLER_EXTENSION),
-      icon: 'sap-icon://create-form',
-      enabled: overlays => isControllerExtensionEnabled(overlays, syncViewsIds)
-    });
-  };
-  var __exports = {
-    __esModule: true
-  };
-  __exports.DialogNames = DialogNames;
-  __exports.isControllerExtensionEnabled = isControllerExtensionEnabled;
-  __exports.isFragmentCommandEnabled = isFragmentCommandEnabled;
-  __exports.getAddFragmentItemText = getAddFragmentItemText;
-  __exports.handler = handler;
-  __exports.initDialogs = initDialogs;
-  return __exports;
+"use strict";
+
+sap.ui.define(["sap/ui/core/Fragment", "sap/ui/fl/Utils", "./controllers/AddFragment.controller", "./controllers/ControllerExtension.controller", "./controllers/ExtensionPoint.controller", "../cpe/outline/utils"], function (Fragment, FlUtils, __AddFragment, __ControllerExtension, __ExtensionPoint, ___cpe_outline_utils) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const AddFragment = _interopRequireDefault(__AddFragment);
+  const ControllerExtension = _interopRequireDefault(__ControllerExtension);
+  const ExtensionPoint = _interopRequireDefault(__ExtensionPoint);
+  const isReuseComponent = ___cpe_outline_utils["isReuseComponent"];
+  var DialogNames = /*#__PURE__*/function (DialogNames) {
+    DialogNames["ADD_FRAGMENT"] = "AddFragment";
+    DialogNames["CONTROLLER_EXTENSION"] = "ControllerExtension";
+    DialogNames["ADD_FRAGMENT_AT_EXTENSION_POINT"] = "ExtensionPoint";
+    return DialogNames;
+  }(DialogNames || {});
+  /**
+   * Handler for enablement of Extend With Controller context menu entry
+   *
+   * @param overlays Control overlays
+   * @param syncViewsIds Runtime Authoring
+   * @param minorUI5Version minor UI5 version
+   *
+   * @returns boolean whether menu item is enabled or not
+   */
+  const isControllerExtensionEnabled = (overlays, syncViewsIds, minorUI5Version) => {
+    if (overlays.length === 0 || overlays.length > 1) {
+      return false;
+    }
+    const clickedControlId = FlUtils.getViewForControl(overlays[0].getElement()).getId();
+    const isClickedControlReuseComponent = isReuseComponent(clickedControlId, minorUI5Version);
+    return !syncViewsIds.includes(clickedControlId) && !isClickedControlReuseComponent;
+  };
+
+  /**
+   * Determines whether the fragment command should be enabled based on the provided overlays.
+   *
+   * @param {ElementOverlay[]} overlays - An array of ElementOverlay objects representing the UI overlays.
+   * @param minorUI5Version minor UI5 version
+   * @returns {boolean} True if the fragment command is enabled, false otherwise.
+   */
+  const isFragmentCommandEnabled = (overlays, minorUI5Version) => {
+    if (overlays.length === 0 || overlays.length > 1) {
+      return false;
+    }
+    const control = overlays[0].getElement();
+    return hasStableId(control) && !isReuseComponent(control.getId(), minorUI5Version);
+  };
+
+  /**
+   * Determines whether control has stable id
+   * @param {ManagedObject} control - ManagedObject object representing the UI control.
+   * @returns {boolean} True if control has stable Id, false otherwise
+   */
+  const hasStableId = control => {
+    return FlUtils.checkControlId(control);
+  };
+
+  /**
+   * Determines the text that should be displayed for the Add Fragment context menu item.
+   *
+   * @param {ElementOverlay} overlay - An ElementOverlay object representing the UI overlay.
+   * @returns {string} The text of the Add Fragment context menu item.
+   */
+  const getAddFragmentItemText = overlay => {
+    const control = overlay.getElement();
+    if (control && !hasStableId(control)) {
+      return 'Add: Fragment (Unavailable due to unstable ID of the control or its parent control)';
+    }
+    return 'Add: Fragment';
+  };
+
+  /**
+   * Handler for new context menu entry
+   *
+   * @param overlay Control overlays
+   * @param rta Runtime Authoring
+   * @param dialogName Dialog name
+   * @param extensionPointData Control ID
+   */
+  async function handler(overlay, rta, dialogName, extensionPointData) {
+    let controller;
+    switch (dialogName) {
+      case DialogNames.ADD_FRAGMENT:
+        controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta);
+        break;
+      case DialogNames.CONTROLLER_EXTENSION:
+        controller = new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta);
+        break;
+      case DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT:
+        controller = new ExtensionPoint(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta, extensionPointData);
+        break;
+    }
+    const id = dialogName === DialogNames.ADD_FRAGMENT_AT_EXTENSION_POINT ? `dialog--${dialogName}` : undefined;
+    const dialog = await Fragment.load({
+      name: `open.ux.preview.client.adp.ui.${dialogName}`,
+      controller,
+      id
+    });
+    await controller.setup(dialog);
+  }
+
+  /**
+   * Adds a new item to the context menu
+   *
+   * @param rta Runtime Authoring
+   * @param syncViewsIds Ids of all application sync views
+   * @param minorUI5Version minor UI5 version
+   */
+  const initDialogs = (rta, syncViewsIds, minorUI5Version) => {
+    const contextMenu = rta.getDefaultPlugins().contextMenu;
+    contextMenu.addMenuItem({
+      id: 'ADD_FRAGMENT',
+      text: getAddFragmentItemText,
+      handler: async overlays => await handler(overlays[0], rta, DialogNames.ADD_FRAGMENT),
+      icon: 'sap-icon://attachment-html',
+      enabled: overlays => isFragmentCommandEnabled(overlays, minorUI5Version)
+    });
+    contextMenu.addMenuItem({
+      id: 'EXTEND_CONTROLLER',
+      text: 'Extend With Controller',
+      handler: async overlays => await handler(overlays[0], rta, DialogNames.CONTROLLER_EXTENSION),
+      icon: 'sap-icon://create-form',
+      enabled: overlays => isControllerExtensionEnabled(overlays, syncViewsIds, minorUI5Version)
+    });
+  };
+  var __exports = {
+    __esModule: true
+  };
+  __exports.DialogNames = DialogNames;
+  __exports.isControllerExtensionEnabled = isControllerExtensionEnabled;
+  __exports.isFragmentCommandEnabled = isFragmentCommandEnabled;
+  __exports.getAddFragmentItemText = getAddFragmentItemText;
+  __exports.handler = handler;
+  __exports.initDialogs = initDialogs;
+  return __exports;
 });
 //# sourceMappingURL=init-dialogs.js.map

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

@@ -18,6 +18,8 @@ import AddFragment from './controllers/AddFragment.controller';
 import ControllerExtension from './controllers/ControllerExtension.controller';
 import { ExtensionPointData } from './extension-point';
 import ExtensionPoint from './controllers/ExtensionPoint.controller';
+import ManagedObject from 'sap/ui/base/ManagedObject';
+import { isReuseComponent } from '../cpe/outline/utils';
 
 export const enum DialogNames {
     ADD_FRAGMENT = 'AddFragment',
@@ -27,33 +29,54 @@ export const enum DialogNames {
 
 type Controller = AddFragment | ControllerExtension | ExtensionPoint;
 
- /**
+/**
  * Handler for enablement of Extend With Controller context menu entry
  *
  * @param overlays Control overlays
  * @param syncViewsIds Runtime Authoring
+ * @param minorUI5Version minor UI5 version
  *
- * @returns boolean
+ * @returns boolean whether menu item is enabled or not
  */
-export const isControllerExtensionEnabled = (overlays: ElementOverlay[], syncViewsIds: string[]): boolean => {
+export const isControllerExtensionEnabled = (
+    overlays: ElementOverlay[],
+    syncViewsIds: string[],
+    minorUI5Version: number
+): boolean => {
+    if (overlays.length === 0 || overlays.length > 1) {
+        return false;
+    }
+
     const clickedControlId = FlUtils.getViewForControl(overlays[0].getElement()).getId();
+    const isClickedControlReuseComponent = isReuseComponent(clickedControlId, minorUI5Version);
 
-    return overlays.length <= 1 && !syncViewsIds.includes(clickedControlId);
+    return !syncViewsIds.includes(clickedControlId) && !isClickedControlReuseComponent;
 };
 
 /**
  * Determines whether the fragment command should be enabled based on the provided overlays.
  *
  * @param {ElementOverlay[]} overlays - An array of ElementOverlay objects representing the UI overlays.
+ * @param minorUI5Version minor UI5 version
  * @returns {boolean} True if the fragment command is enabled, false otherwise.
  */
-export const isFragmentCommandEnabled = (overlays: ElementOverlay[]): boolean => {
-    if (overlays.length === 0) {return false;}
+export const isFragmentCommandEnabled = (overlays: ElementOverlay[], minorUI5Version: number): boolean => {
+    if (overlays.length === 0 || overlays.length > 1) {
+        return false;
+    }
 
     const control = overlays[0].getElement();
-    const hasStableId = FlUtils.checkControlId(control);
 
-    return hasStableId && overlays.length <= 1;
+    return hasStableId(control) && !isReuseComponent(control.getId(), minorUI5Version);
+};
+
+/**
+ * Determines whether control has stable id
+ * @param {ManagedObject} control - ManagedObject object representing the UI control.
+ * @returns {boolean} True if control has stable Id, false otherwise
+ */
+const hasStableId = (control: ManagedObject): boolean => {
+    return FlUtils.checkControlId(control);
 };
 
 /**
@@ -63,7 +86,8 @@ export const isFragmentCommandEnabled = (overlays: ElementOverlay[]): boolean =>
  * @returns {string} The text of the Add Fragment context menu item.
  */
 export const getAddFragmentItemText = (overlay: ElementOverlay) => {
-    if (!isFragmentCommandEnabled([overlay])) {
+    const control = overlay.getElement();
+    if (control && !hasStableId(control)) {
         return 'Add: Fragment (Unavailable due to unstable ID of the control or its parent control)';
     }
 
@@ -119,16 +143,17 @@ export async function handler(
  *
  * @param rta Runtime Authoring
  * @param syncViewsIds Ids of all application sync views
+ * @param minorUI5Version minor UI5 version
  */
-export const initDialogs = (rta: RuntimeAuthoring, syncViewsIds: string[]): void => {
+export const initDialogs = (rta: RuntimeAuthoring, syncViewsIds: string[], minorUI5Version: number): void => {
     const contextMenu = rta.getDefaultPlugins().contextMenu;
 
     contextMenu.addMenuItem({
         id: 'ADD_FRAGMENT',
         text: getAddFragmentItemText,
         handler: async (overlays: UI5Element[]) => await handler(overlays[0], rta, DialogNames.ADD_FRAGMENT),
-        enabled: isFragmentCommandEnabled,
-        icon: 'sap-icon://attachment-html'
+        icon: 'sap-icon://attachment-html',
+        enabled: (overlays: ElementOverlay[]) => isFragmentCommandEnabled(overlays, minorUI5Version)
     });
 
     contextMenu.addMenuItem({
@@ -136,6 +161,6 @@ export const initDialogs = (rta: RuntimeAuthoring, syncViewsIds: string[]): void
         text: 'Extend With Controller',
         handler: async (overlays: UI5Element[]) => await handler(overlays[0], rta, DialogNames.CONTROLLER_EXTENSION),
         icon: 'sap-icon://create-form',
-        enabled: (overlays: ElementOverlay[]) => isControllerExtensionEnabled(overlays, syncViewsIds)
+        enabled: (overlays: ElementOverlay[]) => isControllerExtensionEnabled(overlays, syncViewsIds, minorUI5Version)
     });
-};
+};