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>
SAP · Jun 3, 2024 · 81026f9 · 81026f9
1 parent 82df5f2
commit 81026f9
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/.changeset/ten-snakes-occur.md 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
@@ -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
@@ -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
@@ -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;
 }
-