AAE-22467 Add tooltip on datatable row context menu list (#9682)

Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>

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>

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 {

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();
+        });
     });
 });