From 00ea45655d05770e983018a2d2c503eeecb2f69e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Mon, 20 Apr 2020 17:09:48 +0300
Subject: [PATCH] In checks list, the pause button asks for confirmation. Fixes
 #356

---
 CHANGELOG.md                           |  1 +
 static/css/my_checks_desktop.css       |  5 +++++
 static/js/checks.js                    | 26 ++++++++++++++++++++++++--
 templates/front/my_checks_desktop.html |  2 +-
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2841b32e..68402b37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Use Slack V2 OAuth flow
 - Users can edit their existing webhook integrations (#176)
 - Add a "Transfer Ownership" feature in Project Settings
+- In checks list, the pause button asks for confirmation (#356)
 
 ### Bug Fixes
 - "Get a single check" API call now supports read-only API keys (#346)
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index 941d9a86..fe28748e 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -154,3 +154,8 @@ tr:hover .copy-link {
     opacity: 0;
 }
 
+#checks-table tr:hover .pause.confirm:hover {
+    background: #0091ea;
+    color: #FFF;
+    outline: none;
+}
diff --git a/static/js/checks.js b/static/js/checks.js
index 907ba46e..e6577bf6 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -141,8 +141,25 @@ $(function () {
         return false;
     });
 
-    $(".pause").click(function(e) {
-        var code = $(this).closest("tr.checks-row").attr("id");
+
+    $(".pause").tooltip({
+        title: "Pause this check?<br />Click again to confirm.",
+        trigger: "manual",
+        html: true
+    });
+
+    $(".pause").click(function() {
+        var btn = $(this);
+
+        // First click: show a confirmation tooltip
+        if (!btn.hasClass("confirm")) {
+            btn.addClass("confirm").tooltip("show");
+            return false;
+        }
+
+        // Second click: update UI and pause the check
+        btn.removeClass("confirm").tooltip("hide");
+        var code = btn.closest("tr.checks-row").attr("id");
         $("#" + code + " span.status").attr("class", "status icon-paused");
 
         var url = base + "/checks/" + code + "/pause/";
@@ -156,6 +173,11 @@ $(function () {
         return false;
     });
 
+    $(".pause").mouseleave(function() {
+        $(this).removeClass("confirm").tooltip("hide");
+    });
+
+
     $('[data-toggle="tooltip"]').tooltip({
         html: true,
         container: "body",
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index b2a1d35f..aa2e662f 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -121,7 +121,7 @@
             </div>
         </td>
         <td class="actions">
-            <button title="Pause" class="btn btn-default pause" type="button">
+            <button class="btn btn-default pause" type="button">
                 <span class="icon-paused" />
             </button>