Implement "no matching checks" message when searching/filtering

(instead of showing a table with a header row and no data rows)

hc/front/views.py

@@ -314,6 +314,7 @@ def checks(request: AuthenticatedHttpRequest, code: UUID) -> HttpResponse:
         "selected_statuses": selected_statuses,
         "search": search,
         "hidden_checks": hidden_checks,
+        "num_visible": len(checks) - len(hidden_checks),
         "ambiguous": ambiguous,
         "show_last_duration": show_last_duration,
     }

static/css/checks.css

@@ -164,3 +164,10 @@
         width: 650px;
     }
 }
+
+#no-checks {
+    padding: 1em;
+    text-align: center;
+    font-size: 36px;
+    opacity: 0.3;
+}

static/js/checks.js

@@ -128,44 +128,50 @@ $(function () {
             a.setAttribute("href", url.toString());
         });
 
-        // No checked tags, no search string, no status filters: show all
         if (checked.length == 0 && !search && statuses.length == 0) {
+            // No checked tags, no search string, no status filters: show all
             $("#checks-table tr.checks-row").show();
-            return;
+            var numVisible = $("#checks-table tr.checks-row").length;
-        }
+        } else {
-
+            var numVisible = 0;
-        function applySingle(index, element) {
+            function applySingle(index, element) {
-            var nameData = element.querySelector(".my-checks-name").dataset;
+                var nameData = element.querySelector(".my-checks-name").dataset;
-            if (search) {
+                if (search) {
-                var haystack = [nameData.name, nameData.slug, element.id].join("\n");
+                    var parts = [nameData.name, nameData.slug, element.id];
-                if (haystack.toLowerCase().indexOf(search) == -1) {
+                    var haystack = parts.join("\n").toLowerCase();
-                    $(element).hide();
+                    if (haystack.indexOf(search) == -1) {
-                    return;
-                }
-            }
-
-            if (checked.length) {
-                var tags = nameData.tags.split(" ");
-                for (var i = 0, checkedTag; (checkedTag = checked[i]); i++) {
-                    if (tags.indexOf(checkedTag) == -1) {
                         $(element).hide();
                         return;
                     }
                 }
-            }
 
-            if (statuses.length) {
+                if (checked.length) {
-                if (!statusMatch(element, statuses)) {
+                    var tags = nameData.tags.split(" ");
-                    $(element).hide();
+                    for (var i = 0, checkedTag; (checkedTag = checked[i]); i++) {
-                    return;
+                        if (tags.indexOf(checkedTag) == -1) {
+                            $(element).hide();
+                            return;
+                        }
+                    }
                 }
+
+                if (statuses.length) {
+                    if (!statusMatch(element, statuses)) {
+                        $(element).hide();
+                        return;
+                    }
+                }
+
+                $(element).show();
+                numVisible += 1;
             }
 
-            $(element).show();
+            // For each row, see if it needs to be shown or hidden
+            $("#checks-table tr.checks-row").each(applySingle);
         }
 
-        // For each row, see if it needs to be shown or hidden
+        $("#checks-table").toggle(numVisible > 0);
-        $("#checks-table tr.checks-row").each(applySingle);
+        $("#no-checks").toggle(numVisible == 0);
     }
 
     // User clicks on tags: apply filters

templates/front/checks.html

@@ -70,7 +70,8 @@
         <input
             id="search"
             type="text"
-            class="form-control">
+            class="form-control"
+            value="{{ search }}">
         <div id="filters" class="input-group-btn">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                 <span class="caret"></span>
@@ -146,17 +147,38 @@
         </button>
     {% endif %}
 </div>
-{% endif %}
+
 
 <div class="row">
     <div class="col-sm-12">
-    {% if checks %}
         {% include "front/checks_table.html" %}
-    {% else %}
+        <div id="no-checks" {% if num_visible > 0 %}style="display: none"{% endif %}>
-    <div class="alert alert-info">The project <strong>{{ project }}</strong> does not have any checks yet.</div>
+            no matching checks found
-    {% endif %}
+        </div>
     </div>
 </div>
+{% else %}
+<div class="row">
+    <div class="col-sm-12">
+        <div class="alert alert-info">
+            The project <strong>{{ project }}</strong> does not have any checks yet.
+            {% if rw and num_available > 0 %}
+            <br><br>
+            <button
+                class="btn btn-primary"
+                data-toggle="modal"
+                data-target="#add-check-modal"
+                {% if num_available <= 0 %}disabled{% endif %}>
+                    Add Check
+            </button>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% endif %}
+
+
 
 {% if num_available == 0 %}
 <div id="my-checks-bottom-actions" class="row">

templates/front/checks_table.html

@@ -2,6 +2,7 @@
 <table
     id="checks-table"
     class="table {% if rw %}rw{% endif%}"
+    {% if num_visible == 0 %}style="display: none"{% endif %}
     data-status-url="{% url 'hc-status' project.code %}">
     <tr>
         <th></th>
@@ -132,7 +133,6 @@
         </td>
     </tr>
     {% endfor %}
-
 </table>
 
 {% for channel in channels %}