UX Enhancement: Add button to clear search query from DAG search (#11583)

airflow/www/static/css/main.css

@@ -416,3 +416,18 @@ label[for="timezone-other"],
   top: 15px;
   right: 15px;
 }
+
+.search-input {
+  position: relative;
+}
+
+.search-input__input {
+  padding-right: 40px;
+}
+
+.search-input__clear-btn {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  border: 0;
+}

airflow/www/templates/airflow/dags.html

@@ -60,9 +60,12 @@
         </div>
         <div class="col-sm-4">
           <form id="search_form" class="form-inline">
-            <div class="form-group" style="width: 100%;">
+            <div class="form-group search-input" style="width: 100%;">
               <label for="dag_query" class="sr-only">Search DAGs</label>
-              <input type="search" id="dag_query" class="typeahead form-control" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
+              <input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
+              {% if search_query %}
+                <button type="reset" aria-label="Clear DAG Search Term" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
+              {% endif %}
             </div>
           </form>
         </div>
@@ -313,6 +316,13 @@
       }
     });
 
+    $('#search_form').on('reset', function() {
+      var query = new URLSearchParams(window.location.search);
+      query.delete('search');
+      query.delete('page');
+      window.location = DAGS_INDEX + "?" + query;
+    });
+
     $('#main_content').show(250);
     diameter = 25;
     circle_margin = 4;