Omit saved filters from 'applied filters'; clean up form widget

netbox/project-static/src/appliedFilter.ts

@@ -1,18 +0,0 @@
-import { isTruthy } from './util';
-
-/**
- * Initialize the applied filter display.
- *
- */
-export function initAppliedFilter(): void {
-  const appliedFilter = document.getElementById('appliedfilters');
-  if (isTruthy(appliedFilter)) {
-    const divResults = document.getElementById('results');
-    if (isTruthy(divResults)) {
-      const savedFilterSelect = divResults.getElementsByTagName('select')[0];
-      if (savedFilterSelect.selectedOptions.length > 0) {
-        appliedFilter.hidden = true;
-      }
-    }
-  }
-}

netbox/project-static/src/netbox.ts

@@ -14,7 +14,6 @@ import { initDashboard } from './dashboard';
 import { initRackElevation } from './racks';
 import { initHtmx } from './htmx';
 import { initSavedFilterSelect } from './forms/savedFiltersSelect';
-import { initAppliedFilter } from './appliedFilter';
 
 function initDocument(): void {
   for (const init of [
@@ -34,7 +33,6 @@ function initDocument(): void {
     initRackElevation,
     initHtmx,
     initSavedFilterSelect,
-    initAppliedFilter,
   ]) {
     init();
   }

netbox/project-static/styles/netbox.scss

@@ -7,6 +7,7 @@
 // Overrides of external libraries
 @import 'overrides/bootstrap';
 @import 'overrides/tabler';
+@import 'overrides/tomselect';
 
 // Transitional styling to ease migration of templates from NetBox v3.x
 @import 'transitional/badges';

netbox/project-static/styles/overrides/_tomselect.scss

@@ -0,0 +1,8 @@
+.ts-wrapper.multi {
+  .ts-control {
+    padding: 7px 7px 3px 7px;
+    div {
+      margin: 0 4px 4px 0;
+    }
+  }
+}

netbox/templates/inc/table_controls_htmx.html

@@ -4,8 +4,7 @@
 <div class="row mb-3" id="results">
   <div class="col-auto d-print-none">
     <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">
-      <input type="search" results="5" name="q" id="quicksearch" class="form-control"
-             placeholder="Quick search"
+      <input type="search" results="5" name="q" id="quicksearch" class="form-control" placeholder="{% trans "Quick search" %}"
           hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search"/>
       <span class="input-group-text py-1">
         <a href="#" id="quicksearch_clear" class="invisible text-secondary"><i class="mdi mdi-close-circle"></i></a>
@@ -15,12 +14,13 @@
   </div>
 
   <div class="col-auto d-print-none">
-    <label class="my-2" for="id_filter_id">{% trans "Saved Filter" %}</label>
+    <div class="input-group">
+      <div class="input-group-text">
+        <i class="mdi mdi-filter" title="{% trans "Saved filter" %}"></i>
       </div>
-
-  <div class="col-sm-4 d-print-none">
       {{ filter_form.filter_id }}
     </div>
+  </div>
 
   <div class="col-auto ms-auto d-print-none">
     {% if request.user.is_authenticated and table_modal %}

netbox/utilities/templates/helpers/applied_filters.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if applied_filters %}
-  <div class="mb-3" id="appliedfilters">
+  <div class="mb-3">
     {% for filter in applied_filters %}
       <a href="{{ filter.link_url }}" class="badge rounded-pill text-bg-primary text-decoration-none me-1">
         <i class="mdi mdi-close"></i> {{ filter.link_text }}

netbox/utilities/templatetags/helpers.py

@@ -281,6 +281,10 @@ def applied_filters(context, model, form, query_params):
         if filter_name not in querydict:
             continue
 
+        # Skip saved filters, as they're displayed alongside the quick search widget
+        if filter_name == 'filter_id':
+            continue
+
         bound_field = form.fields[filter_name].get_bound_field(form, filter_name)
         querydict.pop(filter_name)
         display_value = ', '.join([str(v) for v in get_selected_values(form, filter_name)])