From 7ec679353526f32d071846d66c515ea4d72253d3 Mon Sep 17 00:00:00 2001
From: Amedeo Lepore <23027333+alep85@users.noreply.github.com>
Date: Tue, 21 May 2024 11:41:00 +0200
Subject: [PATCH] AAE-22467 Add tooltip on datatable row context menu list
 (#9682)

Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
---
 .../context-menu-list.component.html          |  1 +
 .../context-menu-list.component.ts            |  3 +-
 .../src/lib/context-menu/context-menu.spec.ts | 48 ++++++++++++++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.html b/lib/core/src/lib/context-menu/context-menu-list.component.html
index 2aa2ddfd37..bf877cb7d5 100644
--- a/lib/core/src/lib/context-menu/context-menu-list.component.html
+++ b/lib/core/src/lib/context-menu/context-menu-list.component.html
@@ -5,6 +5,7 @@
                     [attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
                     mat-menu-item
                     [disabled]="link.model?.disabled"
+                    [matTooltip]="link.model?.tooltip | translate"
                     (click)="onMenuItemClick($event, link)">
                 <mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
                 <span>{{ link.title || link.model?.title | translate }}</span>
diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.ts b/lib/core/src/lib/context-menu/context-menu-list.component.ts
index b01248df04..202c33f9ff 100644
--- a/lib/core/src/lib/context-menu/context-menu-list.component.ts
+++ b/lib/core/src/lib/context-menu/context-menu-list.component.ts
@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { contextMenuAnimation } from './animations';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { CONTEXT_MENU_DATA } from './context-menu.tokens';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'adf-context-menu',
@@ -36,7 +37,7 @@ import { CONTEXT_MENU_DATA } from './context-menu.tokens';
         class: 'adf-context-menu'
     },
     encapsulation: ViewEncapsulation.None,
-    imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
+    imports: [MatIconModule, MatMenuModule, MatTooltipModule, NgForOf, NgIf, TranslateModule],
     animations: [trigger('panelAnimation', contextMenuAnimation)]
 })
 export class ContextMenuListComponent implements AfterViewInit {
diff --git a/lib/core/src/lib/context-menu/context-menu.spec.ts b/lib/core/src/lib/context-menu/context-menu.spec.ts
index ce4aec10a1..8a392d31d0 100644
--- a/lib/core/src/lib/context-menu/context-menu.spec.ts
+++ b/lib/core/src/lib/context-menu/context-menu.spec.ts
@@ -21,6 +21,7 @@ import { ContextMenuModule } from './context-menu.module';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { MatIconHarness } from '@angular/material/icon/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
 @Component({
@@ -75,6 +76,29 @@ describe('ContextMenuDirective', () => {
             subject: {
                 next: jasmine.createSpy('next')
             }
+        },
+        {
+            model: {
+                visible: true,
+                disabled: false,
+                title: 'action-5',
+                icon: 'action-icon-5',
+                tooltip: 'Action 5 tooltip'
+            },
+            subject: {
+                next: jasmine.createSpy('next')
+            }
+        },
+        {
+            model: {
+                visible: true,
+                disabled: false,
+                title: 'action-6',
+                icon: 'action-icon-6'
+            },
+            subject: {
+                next: jasmine.createSpy('next')
+            }
         }
     ];
 
@@ -134,7 +158,7 @@ describe('ContextMenuDirective', () => {
         });
 
         it('should not render item with visibility property set to false', () => {
-            expect(contextMenu?.querySelectorAll('button').length).toBe(3);
+            expect(contextMenu?.querySelectorAll('button').length).toBe(5);
         });
 
         it('should render item as disabled when `disabled` property is set to true', async () => {
@@ -173,5 +197,27 @@ describe('ContextMenuDirective', () => {
                 ).length
             ).toBe(0);
         });
+
+        it('should show tooltip if is set', async () => {
+            const expectedTooltipText = 'Action 5 tooltip';
+            const tooltip = await loader.getHarness(
+                MatTooltipHarness.with({
+                    selector: '[data-automation-id="context-action-5"]'
+                })
+            );
+            await tooltip.show();
+            expect(await tooltip.isOpen()).toBeTrue();
+            expect(await tooltip.getTooltipText()).toEqual(expectedTooltipText);
+        });
+
+        it('should not show tooltip if is not set', async () => {
+            const tooltip = await loader.getHarness(
+                MatTooltipHarness.with({
+                    selector: '[data-automation-id="context-action-6"]'
+                })
+            );
+            await tooltip.show();
+            expect(await tooltip.isOpen()).toBeFalse();
+        });
     });
 });