From 46e97986f5ad3385bf6d731f19974fceac39ea20 Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Tue, 9 May 2023 02:59:59 +0300
Subject: [PATCH] Attach a tooltip to the action control button (#24595)

The first time I saw the big red X button I thought something failed but
apparently, it was just a "Cancel" button

# Before

![image](https://user-images.githubusercontent.com/20454870/236889564-3729926a-cfb3-4e47-a8ed-51389c4f193f.png)

![image](https://user-images.githubusercontent.com/20454870/236886259-b0ab0d55-28c3-41f5-8709-8cfc6819423f.png)

![image](https://user-images.githubusercontent.com/20454870/236886081-b7a97f01-6108-4c18-9adb-11cbafd8c19c.png)

# After

![image](https://user-images.githubusercontent.com/20454870/236889690-d1dfd74d-ad7d-4571-b712-69f0dc630c6e.png)

![image](https://user-images.githubusercontent.com/20454870/236885823-0734216d-b450-4a43-bfe3-e88525a8822a.png)

![image](https://user-images.githubusercontent.com/20454870/236903320-3b415619-8aff-4e5d-994e-6faa671990db.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
---
 options/locale/locale_en-US.ini          |  1 +
 templates/repo/actions/view.tmpl         | 10 +++++++++-
 web_src/js/components/RepoActionView.vue | 12 +++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 573ddcf6f0..9bfc0033b4 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -79,6 +79,7 @@ milestones = Milestones
 
 ok = OK
 cancel = Cancel
+rerun = Re-run
 save = Save
 add = Add
 add_all = Add All
diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl
index 0c04671153..85e6f736d8 100644
--- a/templates/repo/actions/view.tmpl
+++ b/templates/repo/actions/view.tmpl
@@ -2,7 +2,15 @@
 
 <div class="page-content repository">
 	{{template "repo/header" .}}
-	<div id="repo-action-view" data-run-index="{{.RunIndex}}" data-job-index="{{.JobIndex}}" data-actions-url="{{.ActionsURL}}"></div>
+	<div id="repo-action-view"
+		data-run-index="{{.RunIndex}}"
+		data-job-index="{{.JobIndex}}"
+		data-actions-url="{{.ActionsURL}}"
+		data-locale-approve="{{.locale.Tr "repo.diff.review.approve"}}"
+		data-locale-cancel="{{.locale.Tr "cancel"}}"
+		data-locale-rerun="{{.locale.Tr "rerun"}}"
+	>
+	</div>
 </div>
 
 {{template "base/footer" .}}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 7389cfe114..3d44f3ef47 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -6,13 +6,13 @@
         <div class="action-title">
           {{ run.title }}
         </div>
-        <button class="action-control-button text green" @click="approveRun()" v-if="run.canApprove">
+        <button :data-tooltip-content="locale.approve" class="action-control-button text green" @click="approveRun()" v-if="run.canApprove">
           <SvgIcon name="octicon-play" :size="20"/>
         </button>
-        <button class="action-control-button text red" @click="cancelRun()" v-else-if="run.canCancel">
+        <button :data-tooltip-content="locale.cancel" class="action-control-button text red" @click="cancelRun()" v-else-if="run.canCancel">
           <SvgIcon name="octicon-x-circle-fill" :size="20"/>
         </button>
-        <button class="action-control-button text green" @click="rerun()" v-else-if="run.canRerun">
+        <button :data-tooltip-content="locale.rerun" class="action-control-button text green" @click="rerun()" v-else-if="run.canRerun">
           <SvgIcon name="octicon-sync" :size="20"/>
         </button>
       </div>
@@ -93,6 +93,7 @@ const sfc = {
     runIndex: String,
     jobIndex: String,
     actionsURL: String,
+    locale: Object,
   },
 
   data() {
@@ -314,6 +315,11 @@ export function initRepositoryActionView() {
     runIndex: el.getAttribute('data-run-index'),
     jobIndex: el.getAttribute('data-job-index'),
     actionsURL: el.getAttribute('data-actions-url'),
+    locale: {
+      approve: el.getAttribute('data-locale-approve'),
+      cancel: el.getAttribute('data-locale-cancel'),
+      rerun: el.getAttribute('data-locale-rerun'),
+    }
   });
   view.mount(el);
 }