From 640e2df3cdb1d019f7302aa24cd98373eba69bcf Mon Sep 17 00:00:00 2001
From: cherrie-k <80851202+cherrie-k@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:33:13 +0900
Subject: [PATCH] [ZEPPELIN-6072] Unify tooltips across action bar buttons, and
 add tooltips to paragraph controller

### What is this PR for?
I noticed that only some buttons in the first group of the action bar (highlighted in the red box in the image below) had tooltips, while others did not. To improve consistency and enhance user experience, I ensured that all buttons in the first group of the action bar display tooltips on hover.
<img width="500" alt="image" src="https://github.com/user-attachments/assets/cc89a350-fa2e-42b8-9cd2-b153ddc7431c">
I also considered adding tooltips to the other groups of the action bar (outside the red box), but due to the complexity of implementing this with the ng-zorro UI library, more time and investigation are needed. I aim to address this in a future update.

In addition, the paragraph controller currently lacks tooltips on its icons, which may be confusing for new users unfamiliar with Zeppelin (like myself). Without tooltips, it's unclear what each button does, leading to potential usability issues. I added tooltips to all icons in the paragraph controller to improve clarity and guide users of the functionality of each button.
<img width="300" alt="image" src="https://github.com/user-attachments/assets/fb9f7bb7-5940-416f-9c02-8c45b1e7ad6a">

These changes aim to enhance the overall usability of the interface, making it more intuitive and consistent for all users.


**Before**
Some buttons show no tooltips.
![before](https://github.com/user-attachments/assets/a75ba087-c4a9-4ad0-97d8-5c6732592164)


**After**
Missing tooltips are now displayed.
![after](https://github.com/user-attachments/assets/1e2bf1fa-361b-45ea-92ef-a27d3557ff88)


### What type of PR is it?
Improvement


### Todos
* [x] - Add tooltips to action bar
* [x] - Add tooltips to paragraph controller

### What is the Jira issue?
[ZEPPELIN-6072](https://issues.apache.org/jira/browse/ZEPPELIN-6072)


### How should this be tested?
* Build and test - check if tooltips are visible


### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No


Closes #4832 from cherrie-k/feat/tooltip.

Signed-off-by: Cheng Pan <chengpan@apache.org>
---
 .../action-bar/action-bar.component.html         |  8 ++++++--
 .../paragraph/control/control.component.html     | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 1972a1e7dc9..56c52dc6616 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -22,7 +22,9 @@
     <nz-button-group nzSize="small">
       <button nz-button
               nz-popconfirm
-              nzTitle="Run all paragraphs?"
+              nzPopconfirmTitle="Run all paragraphs?"
+              nz-tooltip
+              nzTooltipTitle="Run all paragraphs"
               (nzOnConfirm)="runAllParagraphs()"
               [disabled]="revisionView || isNoteParagraphRunning">
         <i nz-icon nzType="play-circle" nzTheme="outline"></i>
@@ -45,9 +47,11 @@
       </button>
       <button nz-button
               nz-popconfirm
+              nzPopconfirmTitle="Do you want to clear all output?"
+              nz-tooltip
+              nzTooltipTitle="Clear all output"
               *ngIf="!viewOnly"
               [disabled]="revisionView"
-              nzTitle="Do you want to clear all output?"
               (nzOnConfirm)="clearAllParagraphOutput()">
         <i nz-icon nzType="fire" nzTheme="outline"></i>
       </button>
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
index 5ec5f52fccf..b21dc8a49d6 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
@@ -28,22 +28,28 @@
        (click)="runParagraph.emit()"
        nzType="play-circle"
        class="run-para"
-       nzTheme="outline"></i>
+       nzTheme="outline"
+       nz-tooltip
+       nzTooltipTitle="Run paragraph"></i>
     <i nz-icon
        *ngIf="status=='RUNNING' || status=='PENDING'"
        (click)="cancelParagraph.emit()"
        class="cancel-para"
        nzType="pause-circle"
-       nzTheme="outline"></i>
+       nzTheme="outline"
+       nz-tooltip
+       nzTooltipTitle="Cancel paragraph"></i>
   </a>
-  <a (click)="toggleEditor()">
+  <a (click)="toggleEditor()" nz-tooltip nzTooltipTitle="Show/hide the code">
     <i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'" nzTheme="outline"></i>
   </a>
-  <a (click)="toggleOutput()">
+  <a (click)="toggleOutput()" nz-tooltip nzTooltipTitle="Show/hide the output">
     <i nz-icon [nzType]="tableHide ? 'book' : 'read'" nzTheme="outline"></i>
   </a>
   <a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzClickHide]="false" [(nzVisible)]="dropdownVisible">
-    <i nz-icon nzType="setting" nzTheme="outline"></i>
+    <span nz-tooltip nzTooltipTitle="More">
+      <i nz-icon nzType="setting" nzTheme="outline"></i>
+    </span>
   </a>
   <nz-dropdown-menu #menu="nzDropdownMenu">
     <ul nz-menu class="setting-menu">