From d368dcbb7c1b987f7dfb70fad42ad7ebad232b77 Mon Sep 17 00:00:00 2001
From: Tatjana Dehler <tdehler@suse.com>
Date: Tue, 28 May 2019 08:33:08 +0200
Subject: [PATCH] mgr/dashboard: add a description tooltip for disabled items

Add the possibility to show a description tooltip for disabled
menu items. The description is optional. If no description is
given for a specific menu item, no tooltip will be shown.

Signed-off-by: Tatjana Dehler <tdehler@suse.com>
(cherry picked from commit 4a28b52990b6b4fa7e0f9505e4a37a2853ba620c)
---
 .../table-actions.component.html              |  3 +-
 .../table-actions.component.scss              |  4 ++
 .../table-actions.component.spec.ts           | 47 +++++++++++++++++++
 .../table-actions/table-actions.component.ts  | 13 ++++-
 .../src/app/shared/models/cd-table-action.ts  |  7 +++
 5 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 1e93b4aeceb..e0d6c209f92 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -24,7 +24,8 @@
     <ng-container *ngFor="let action of dropDownActions">
       <li role="menuitem"
           class="{{ toClassName(action['name']) }}"
-          [ngClass]="{'disabled': disableSelectionAction(action)}">
+          [ngClass]="{'disabled': disableSelectionAction(action)}"
+          data-toggle="tooltip" title="{{ useDisableDesc(action) }}">
         <a class="dropdown-item"
            (click)="useClickAction(action)"
            [routerLink]="useRouterLink(action)">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
index e69de29bb2d..e3c3492a403 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
@@ -0,0 +1,4 @@
+.dropdown-menu > .disabled > a {
+  pointer-events: auto;
+  cursor: default !important;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
index 35d8ba4933f..45fcf511841 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
@@ -284,4 +284,51 @@ describe('TableActionsComponent', () => {
     expect(component.toClassName('Mark x down')).toBe('mark-x-down');
     expect(component.toClassName('?Su*per!')).toBe('super');
   });
+
+  describe('useDisableDesc', () => {
+    it('should return a description if disableDesc is set for action', () => {
+      const deleteWithDescAction: CdTableAction = {
+        permission: 'delete',
+        icon: 'fa-times',
+        canBePrimary: (selection: CdTableSelection) => selection.hasSelection,
+        disableDesc: () => {
+          return 'Delete action disabled description';
+        },
+        name: 'DeleteDesc'
+      };
+
+      expect(component.useDisableDesc(deleteWithDescAction)).toBe(
+        'Delete action disabled description'
+      );
+    });
+
+    it('should return no description if disableDesc is not set for action', () => {
+      expect(component.useDisableDesc(deleteAction)).toBeUndefined();
+    });
+  });
+
+  describe('useClickAction', () => {
+    const editClickAction: CdTableAction = {
+      permission: 'update',
+      icon: 'fa-pencil',
+      name: 'Edit',
+      click: () => {
+        return 'Edit action click';
+      }
+    };
+
+    it('should call click action if action is not disabled', () => {
+      editClickAction.disable = () => {
+        return false;
+      };
+      expect(component.useClickAction(editClickAction)).toBe('Edit action click');
+    });
+
+    it('should not call click action if action is disabled', () => {
+      editClickAction.disable = () => {
+        return true;
+      };
+      expect(component.useClickAction(editClickAction)).toBeFalsy();
+    });
+  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
index 6b4d57eb78a..62f33acac18 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
@@ -132,6 +132,17 @@ export class TableActionsComponent implements OnInit {
   }
 
   useClickAction(action: CdTableAction) {
-    return action.click && action.click();
+    /**
+     * In order to show tooltips for deactivated menu items, the class
+     * 'pointer-events: auto;' has been added to the .scss file which also
+     * re-activates the click-event.
+     * To prevent calling the click-event on deactivated elements we also have
+     * to check here if it's disabled.
+     */
+    return !this.disableSelectionAction(action) && action.click && action.click();
+  }
+
+  useDisableDesc(action: CdTableAction) {
+    return action.disableDesc && action.disableDesc();
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-action.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-action.ts
index e266a66014c..c5c6fab131e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-action.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-table-action.ts
@@ -22,6 +22,13 @@ export class CdTableAction {
   // if one selection is made and no task is running on the selected item.
   disable?: (_: CdTableSelection) => boolean;
 
+  /**
+   * In some cases you might want to give the user a hint why a button is
+   * disabled. The specified message will be shown to the user as a button
+   * tooltip.
+   */
+  disableDesc?: Function;
+
   /**
    * Defines if the button can become 'primary' (displayed as button and not
    * 'hidden' in the menu). Only one button can be primary at a time. By
-- 
2.47.3