Attach a tooltip to the action control button

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

Signed-off-by: Yarden Shoham <git@yardenshoham.com>

Author: yardenshoham

options/locale/locale_en-US.ini

@@ -3389,6 +3389,7 @@ management = Secrets Management
 
 [actions]
 actions = Actions
+rerun = Rerun
 
 unit.desc = Manage actions
 

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 "actions.rerun"}}"
+		>
+	</div>
 </div>
 
 {{template "base/footer" .}}

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