[chores] Added hooks to AutocompleteJsonView

* Added hooks to AutocompleteJsonView
* Added custom CSS class for autocomplete filter dropdown
* Made autocomplete field empty label configurable

Author: pandafy

openwisp_utils/admin_theme/filters.py

@@ -94,6 +94,10 @@ def expected_parameters(self):
 
 class AutocompleteFilter(BaseAutocompleteFilter):
     template = 'admin/auto_filter.html'
+    widget_attrs = {
+        'data-dropdown-css-class': 'ow2-autocomplete-dropdown',
+        'data-empty-label': '-',
+    }
 
     class Media:
         css = {

openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css

@@ -24,7 +24,7 @@
 .auto-filter li {
   list-style-type: none;
 }
-.select2-dropdown,
+.ow2-autocomplete-dropdown.select2-dropdown,
 .auto-filter span.select2-selection,
 .auto-filter .select2 {
   min-width: 222px !important;

openwisp_utils/admin_theme/static/admin/js/ow-auto-filter.js

@@ -20,7 +20,7 @@ django.jQuery(document).ready(function () {
       el = django.jQuery(el);
       nullParam = el.attr("name") + "__isnull";
       if (searchHash[nullParam] !== undefined) {
-        el.append(new Option("-", "null", false, false));
+        el.append(new Option(el.data('empty-label'), "null", false, false));
         el.val("null");
         el.trigger("change");
       }

openwisp_utils/admin_theme/views.py

@@ -6,6 +6,12 @@
 class AutocompleteJsonView(BaseAutocompleteJsonView):
     admin_site = None
 
+    def get_empty_label(self):
+        return '-'
+
+    def get_allow_null(self):
+        return True
+
     def get(self, request, *args, **kwargs):
         (
             self.term,
@@ -22,13 +28,19 @@ def get(self, request, *args, **kwargs):
         context = self.get_context_data()
         # Add option for filtering objects with None field.
         results = []
+        empty_label = self.get_empty_label()
         if (
             getattr(self.source_field, 'null', False)
+            and self.get_allow_null()
             and not getattr(self.source_field, '_get_limit_choices_to_mocked', False)
             and not self.term
-            or self.term == '-'
+            or self.term == empty_label
         ):
-            results += [{'id': 'null', 'text': '-'}]
+            # The select2 library requires data in a specific format
+            # https://select2.org/data-sources/formats.
+            # select2 does not render option with blank "id" (i.e. '').
+            # Therefore, "null" is used here for "id".
+            results += [{'id': 'null', 'text': empty_label}]
         results += [
             {'id': str(obj.pk), 'text': self.display_text(obj)}
             for obj in context['object_list']

tests/test_project/tests/test_selenium.py

@@ -718,7 +718,10 @@ def test_autocomplete_shelf_filter(self):
         result_xpath = '//*[@id="result_list"]/tbody/tr/th/a[contains(text(), "{}")]'
         self.open(url)
         self.assertIn(
-            f'<select name="shelf__id" id="{select_id}" class="admin-autocomplete',
+            (
+                '<select name="shelf__id" data-dropdown-css-class="ow2-autocomplete-dropdown"'
+                f' data-empty-label="-" id="{select_id}" class="admin-autocomplete'
+            ),
             self.web_driver.page_source,
         )
         self.web_driver.find_element_by_css_selector(filter_css_selector).click()
@@ -759,7 +762,10 @@ def test_autocomplete_owner_filter(self):
         result_xpath = '//*[@id="result_list"]/tbody/tr/th/a[contains(text(), "{}")]'
         self.open(url)
         self.assertIn(
-            f'<select name="owner_id" id="{select_id}" class="admin-autocomplete',
+            (
+                '<select name="owner_id" data-dropdown-css-class="ow2-autocomplete-dropdown"'
+                f' data-empty-label="-" id="{select_id}" class="admin-autocomplete'
+            ),
             self.web_driver.page_source,
         )
         self.web_driver.find_element_by_css_selector(filter_css_selector).click()