Show an icon when some child TPs not shown on Search Test Plans page

to let the user know what parent-child hierarchies shown on the page
may be incomplete because the data has been filtered out by their search
criteria.

Closes #3313

tcms/testplans/static/testplans/js/search.js

@@ -48,6 +48,7 @@ export function pageTestplansSearchReadyHandler () {
     initializeDateTimePicker('#id_before')
     initializeDateTimePicker('#id_after')
 
+    const rowsNotShownMessage = $('#main-element').data('trans-some-rows-not-shown')
     const table = $('#resultsTable').DataTable({
         pageLength: $('#navbar').data('defaultpagesize'),
         ajax: function (data, callbackF, settings) {
@@ -108,6 +109,7 @@ export function pageTestplansSearchReadyHandler () {
                 data: null,
                 render: function (data, type, full, meta) {
                     let result = '<a href="/plan/' + data.id + '/">' + escapeHTML(data.name) + '</a>'
+                    result = result + ` <span class="pficon pficon-rebalance children-not-shown-message" title="${rowsNotShownMessage}"></span>`
                     if (!data.is_active) {
                         result = '<strike>' + result + '</strike>'
                     }
@@ -136,6 +138,16 @@ export function pageTestplansSearchReadyHandler () {
                 // very easy to display child rows afterwards! Not a big issue for now.
             }
         },
+        drawCallback: function (settings) {
+            const data = this.api().data()
+            $('.children-not-shown-message').hide()
+
+            data.each(function (row) {
+                if (row.children__count && row.children__count > hiddenChildRows[row.id].length) {
+                    $(`.test-plan-row-${row.id} .children-not-shown-message`).show()
+                }
+            })
+        },
         dom: 'Bptp',
         buttons: exportButtons,
         language: {

tcms/testplans/templates/testplans/search.html

@@ -6,7 +6,11 @@
 {% block page_id %}page-testplans-search{% endblock %}
 
 {% block contents %}
-<div class="container-fluid container-cards-pf">
+<div
+    class="container-fluid container-cards-pf"
+    id="main-element"
+    data-trans-some-rows-not-shown="{% trans 'Some child test plans do not match search criteria'%}"
+>
     <form class="form-horizontal" method="get">
         {% csrf_token %}