In checks list, the pause button asks for confirmation. Fixes #356

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)

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

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",

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>