From 81026f96e363d76f00e5f56c5e68b96fb7bbf857 Mon Sep 17 00:00:00 2001
From: Nikita B <39880364+nikmace@users.noreply.github.com>
Date: Mon, 3 Jun 2024 09:54:22 +0300
Subject: [PATCH] feat: Add explanation at the end of disabled context menu
 item due to non stable id (#1972)

* chore: add changeset

* feat: add dynamic text to context menu item

---------

Co-authored-by: GDamyanov <georgi.damyanov@sap.com>
---
 .changeset/ten-snakes-occur.md                |  6 ++++
 .../src/adp/init-dialogs.ts                   | 16 +++++++++-
 .../test/unit/adp/init-dialogs.test.ts        | 31 ++++++++++++++++++-
 .../types/sap.ui.dt.d.ts                      |  5 +--
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/ten-snakes-occur.md

diff --git a/.changeset/ten-snakes-occur.md b/.changeset/ten-snakes-occur.md
new file mode 100644
index 0000000000..b1c2dea158
--- /dev/null
+++ b/.changeset/ten-snakes-occur.md
@@ -0,0 +1,6 @@
+---
+'@sap-ux-private/preview-middleware-client': patch
+'@sap-ux/preview-middleware': patch
+---
+
+Add explanation at the end of disabled context menu item due to non stable ID
diff --git a/packages/preview-middleware-client/src/adp/init-dialogs.ts b/packages/preview-middleware-client/src/adp/init-dialogs.ts
index 18332bf65c..3b40496dd3 100644
--- a/packages/preview-middleware-client/src/adp/init-dialogs.ts
+++ b/packages/preview-middleware-client/src/adp/init-dialogs.ts
@@ -38,7 +38,7 @@ export const initDialogs = (rta: RuntimeAuthoring, syncViewsIds: string[]): void
 
     contextMenu.addMenuItem({
         id: 'ADD_FRAGMENT',
-        text: 'Add: Fragment',
+        text: getAddFragmentItemText,
         handler: async (overlays: UI5Element[]) => await handler(overlays[0], rta, DialogNames.ADD_FRAGMENT),
         enabled: isFragmentCommandEnabled,
         icon: 'sap-icon://attachment-html'
@@ -82,6 +82,20 @@ export const isFragmentCommandEnabled = (overlays: ElementOverlay[]): boolean =>
     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.
+ */
+export const getAddFragmentItemText = (overlay: ElementOverlay) => {
+    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
  *
diff --git a/packages/preview-middleware-client/test/unit/adp/init-dialogs.test.ts b/packages/preview-middleware-client/test/unit/adp/init-dialogs.test.ts
index b40b33600e..59e79ffac7 100644
--- a/packages/preview-middleware-client/test/unit/adp/init-dialogs.test.ts
+++ b/packages/preview-middleware-client/test/unit/adp/init-dialogs.test.ts
@@ -15,7 +15,8 @@ import {
     handler,
     initDialogs,
     isFragmentCommandEnabled,
-    isControllerExtensionEnabled
+    isControllerExtensionEnabled,
+    getAddFragmentItemText
 } from '../../../src/adp/init-dialogs';
 import AddFragment from '../../../src/adp/controllers/AddFragment.controller';
 import ControllerExtension from '../../../src/adp/controllers/ControllerExtension.controller';
@@ -110,6 +111,34 @@ describe('Dialogs', () => {
         });
     });
 
+    describe('getAddFragmentItemText', () => {
+        beforeEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        const overlay = {
+            getElement: () => ({})
+        } as ElementOverlay;
+
+        it('should return simple text if the control is with a stable ID', () => {
+            Utils.checkControlId.mockReturnValue(true);
+
+            const result = getAddFragmentItemText(overlay);
+
+            expect(result).toBe('Add: Fragment');
+            expect(Utils.checkControlId).toHaveBeenCalledWith({});
+        });
+
+        it('should return extra text if the control is with a unstable ID', () => {
+            Utils.checkControlId.mockReturnValue(false);
+
+            const result = getAddFragmentItemText(overlay);
+
+            expect(result).toBe('Add: Fragment (Unavailable due to unstable ID of the control or its parent control)');
+            expect(Utils.checkControlId).toHaveBeenCalledWith({});
+        });
+    });
+
     describe('isControllerExtensionEnabled', () => {
         const syncViewsIds = ['syncViewId1', 'syncViewId2'];
         const elementOverlayMock = { getElement: jest.fn() } as unknown as ElementOverlay;
diff --git a/packages/preview-middleware-client/types/sap.ui.dt.d.ts b/packages/preview-middleware-client/types/sap.ui.dt.d.ts
index e9134fef3d..f9a43ccd5f 100644
--- a/packages/preview-middleware-client/types/sap.ui.dt.d.ts
+++ b/packages/preview-middleware-client/types/sap.ui.dt.d.ts
@@ -69,9 +69,11 @@ declare module 'sap/ui/dt/OverlayUtil' {
 }
 
 declare module 'sap/ui/dt/plugin/ContextMenu' {
+    import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+
     export interface ContextMenuItem {
         id: string;
-        text: string;
+        text: string | ((overlay: ElementOverlay) => string);
         handler: Function;
         icon?: string;
         enabled?: Function;
@@ -93,4 +95,3 @@ declare module 'sap/ui/dt/Element' {
 
     export default ElementExtended;
 }
-