Closes #14917: Replace slim-select with tom-select (#15080)

* Experimenting

* Remove testing resources

* Replace ApiSelect with TomSelect

* Add color support

* Add clear button

* Clear cached options when searching dynamic selects

* Add support for static parameters

* Refactor TomSelect implementation

* Add dynamic parameter support

* Limit number of options to 100

* Remove redundant api_url definitions for user model

* Add support for disabled indicator

* Remove obsolete value-field attr on dynamic select widgets

* Remove obsolete fetch_trigger kwarg from dynamic model choice widgets

* Remove obsolete empty_label kwarg from dynamic model choice widgets

* Add support for API path variables

* Add support for setting a 'null' option

* Annotate depth for recursive hierarchies

* Misc cleanup

* Remove obsolete APISelect code

* Remove slim-select & just-debounce-it

* Clean up type validation

* Closes #14237: Clear child selections on change to parent selection

* Use an MD icon for the clear button

* Use an MD icon for the clear button

* Explain why noUnusedParameters is disabled

netbox/core/forms/filtersets.py

@@ -119,10 +119,7 @@ class JobFilterForm(SavedFiltersMixin, FilterForm):
     user = DynamicModelMultipleChoiceField(
         queryset=get_user_model().objects.all(),
         required=False,
-        label=_('User'),
-        widget=APISelectMultiple(
-            api_url='/api/users/users/',
-        )
+        label=_('User')
     )
 
 

netbox/dcim/forms/filtersets.py

@@ -393,10 +393,7 @@ class RackReservationFilterForm(TenancyFilterForm, NetBoxModelFilterSetForm):
     user_id = DynamicModelMultipleChoiceField(
         queryset=get_user_model().objects.all(),
         required=False,
-        label=_('User'),
-        widget=APISelectMultiple(
-            api_url='/api/users/users/',
-        )
+        label=_('User')
     )
     tag = TagFilterField(model)
 
@@ -551,8 +548,7 @@ class ModuleTypeFilterForm(NetBoxModelFilterSetForm):
     manufacturer_id = DynamicModelMultipleChoiceField(
         queryset=Manufacturer.objects.all(),
         required=False,
-        label=_('Manufacturer'),
-        fetch_trigger='open'
+        label=_('Manufacturer')
     )
     part_number = forms.CharField(
         label=_('Part number'),
@@ -828,8 +824,7 @@ class VirtualDeviceContextFilterForm(
     device = DynamicModelMultipleChoiceField(
         queryset=Device.objects.all(),
         required=False,
-        label=_('Device'),
-        fetch_trigger='open'
+        label=_('Device')
     )
     status = forms.MultipleChoiceField(
         label=_('Status'),
@@ -855,17 +850,15 @@ class ModuleFilterForm(LocalConfigContextFilterForm, TenancyFilterForm, NetBoxMo
     manufacturer_id = DynamicModelMultipleChoiceField(
         queryset=Manufacturer.objects.all(),
         required=False,
-        label=_('Manufacturer'),
-        fetch_trigger='open'
+        label=_('Manufacturer')
     )
     module_type_id = DynamicModelMultipleChoiceField(
         queryset=ModuleType.objects.all(),
         required=False,
         query_params={
             'manufacturer_id': '$manufacturer_id'
         },
-        label=_('Type'),
-        fetch_trigger='open'
+        label=_('Type')
     )
     status = forms.MultipleChoiceField(
         label=_('Status'),
@@ -1414,8 +1407,7 @@ class InventoryItemFilterForm(DeviceComponentFilterForm):
     role_id = DynamicModelMultipleChoiceField(
         queryset=InventoryItemRole.objects.all(),
         required=False,
-        label=_('Role'),
-        fetch_trigger='open'
+        label=_('Role')
     )
     manufacturer_id = DynamicModelMultipleChoiceField(
         queryset=Manufacturer.objects.all(),

netbox/extras/forms/filtersets.py

@@ -381,8 +381,7 @@ class ConfigContextFilterForm(SavedFiltersMixin, FilterForm):
     cluster_type_id = DynamicModelMultipleChoiceField(
         queryset=ClusterType.objects.all(),
         required=False,
-        label=_('Cluster types'),
-        fetch_trigger='open'
+        label=_('Cluster types')
     )
     cluster_group_id = DynamicModelMultipleChoiceField(
         queryset=ClusterGroup.objects.all(),
@@ -462,10 +461,7 @@ class JournalEntryFilterForm(NetBoxModelFilterSetForm):
     created_by_id = DynamicModelMultipleChoiceField(
         queryset=get_user_model().objects.all(),
         required=False,
-        label=_('User'),
-        widget=APISelectMultiple(
-            api_url='/api/users/users/',
-        )
+        label=_('User')
     )
     assigned_object_type_id = DynamicModelMultipleChoiceField(
         queryset=ContentType.objects.all(),
@@ -508,10 +504,7 @@ class ObjectChangeFilterForm(SavedFiltersMixin, FilterForm):
     user_id = DynamicModelMultipleChoiceField(
         queryset=get_user_model().objects.all(),
         required=False,
-        label=_('User'),
-        widget=APISelectMultiple(
-            api_url='/api/users/users/',
-        )
+        label=_('User')
     )
     changed_object_type_id = DynamicModelMultipleChoiceField(
         queryset=ContentType.objects.all(),

netbox/project-static/package.json

@@ -31,16 +31,16 @@
     "gridstack": "^7.2.3",
     "html-entities": "^2.3.3",
     "htmx.org": "^1.8.0",
-    "just-debounce-it": "^3.1.1",
     "query-string": "^7.1.1",
     "sass": "^1.55.0",
-    "slim-select": "^1.27.1",
+    "tom-select": "^2.3.1",
     "typeface-inter": "^3.18.1",
     "typeface-roboto-mono": "^1.1.13"
   },
   "devDependencies": {
     "@types/bootstrap": "5.2.10",
     "@types/cookie": "^0.5.1",
+    "@types/node": "^20.11.16",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "esbuild": "^0.13.15",

netbox/project-static/src/htmx.ts

@@ -1,11 +1,11 @@
 import { getElements, isTruthy } from './util';
 import { initButtons } from './buttons';
-import { initSelect } from './select';
+import { initSelects } from './select';
 import { initObjectSelector } from './objectSelector';
 import { initBootstrap } from './bs';
 
 function initDepedencies(): void {
-  for (const init of [initButtons, initSelect, initObjectSelector, initBootstrap]) {
+  for (const init of [initButtons, initSelects, initObjectSelector, initBootstrap]) {
     init();
   }
 }

netbox/project-static/src/index.ts

@@ -1,4 +1,5 @@
 import '@popperjs/core';
 import 'bootstrap';
 import 'htmx.org';
+import 'tom-select';
 import './netbox';

netbox/project-static/src/netbox.ts

@@ -1,7 +1,7 @@
 import { initForms } from './forms';
 import { initBootstrap } from './bs';
 import { initQuickSearch } from './search';
-import { initSelect } from './select';
+import { initSelects } from './select';
 import { initButtons } from './buttons';
 import { initColorMode } from './colorMode';
 import { initMessages } from './messages';
@@ -22,7 +22,7 @@ function initDocument(): void {
     initMessages,
     initForms,
     initQuickSearch,
-    initSelect,
+    initSelects,
     initDateSelector,
     initButtons,
     initClipboard,