UX improvements of DAG tag filtering

airflow/www/templates/airflow/dags.html

@@ -46,15 +46,16 @@ <h2>DAGs</h2>
           </div>
         </div>
         <div class="col-sm-4">
-          <form id="filter_form" class="form-inline" style="width: 100%; text-align: left;">
-            <div class="form-group" style="width: 100%;">
-              <select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 60%;">
+          <form id="tags_form" class="form-inline" style="width: 100%; text-align: left;">
+            <div class="form-group search-input" style="width: 80%;">
+              <select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 100%;">
                 {% for tag in tags %}
                   <option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
                 {% endfor %}
               </select>
-              <input type="submit" value="Filter tags" class="btn btn-default">
-              <input type="submit" value="Reset" class="btn btn-default" name="reset_tags">
+              {% if tags_filter|length > 0 %}
+                <button type="reset" aria-label="Clear all tags" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
+              {% endif %}
             </div>
           </form>
         </div>
@@ -233,6 +234,31 @@ <h2>DAGs</h2>
       allowClear: true
     });
 
+    $('#tags_filter').on('change', function (e) {
+      e.preventDefault();
+      var query = new URLSearchParams(window.location.search);
+      if (!!e.val.length) {
+        if (query.has('tags')) query.delete('tags');
+        e.val.map(function(value) {
+          query.append('tags', value);
+        })
+      } else {
+        query.delete('tags');
+        query.set('reset_tags', 'reset')
+      }
+      if (query.has('page')) query.delete('page');
+      window.location = `${DAGS_INDEX}?${query.toString()}`;
+    });
+
+    $('#tags_form').on('reset', function(e) {
+      e.preventDefault();
+      var query = new URLSearchParams(window.location.search);
+      query.delete('tags');
+      if (query.has('page')) query.delete('page');
+      query.set('reset_tags', 'reset')
+      window.location = `${DAGS_INDEX}?${query.toString()}`;
+    });
+
     $('#dag_query').on('keypress', function (e) {
       // check for key press on ENTER (key code 13) to trigger the search
       if (e.which === ENTER_KEY_CODE) {

airflow/www/views.py

@@ -417,13 +417,15 @@ def get_int_arg(value, default=0):
 
         if request.args.get('reset_tags') is not None:
             flask_session[FILTER_TAGS_COOKIE] = None
-            arg_tags_filter = None
-        else:
-            cookie_val = flask_session.get(FILTER_TAGS_COOKIE)
-            if arg_tags_filter:
-                flask_session[FILTER_TAGS_COOKIE] = ','.join(arg_tags_filter)
-            elif cookie_val:
-                arg_tags_filter = cookie_val.split(',')
+            # Remove the reset_tags=reset from the URL
+            return redirect(url_for('Airflow.index'))
+
+        cookie_val = flask_session.get(FILTER_TAGS_COOKIE)
+        if arg_tags_filter:
+            flask_session[FILTER_TAGS_COOKIE] = ','.join(arg_tags_filter)
+        elif cookie_val:
+            # If tags exist in cookie, but not URL, add them to the URL
+            return redirect(url_for('Airflow.index', tags=cookie_val.split(',')))
 
         if arg_status_filter is None:
             cookie_val = flask_session.get(FILTER_STATUS_COOKIE)
@@ -536,7 +538,8 @@ def get_int_arg(value, default=0):
             status_filter=arg_status_filter,
             status_count_all=all_dags_count,
             status_count_active=status_count_active,
-            status_count_paused=status_count_paused)
+            status_count_paused=status_count_paused,
+            tags_filter=arg_tags_filter)
 
     @expose('/dag_stats', methods=['POST'])
     @has_access