Fixes #21102: Fix GraphiQL explorer UI

.gitignore

@@ -9,7 +9,8 @@ yarn-error.log*
 /netbox/netbox/configuration.py
 /netbox/netbox/ldap_config.py
 /netbox/local/*
-/netbox/media
+/netbox/media/*
+!/netbox/media/.gitkeep
 /netbox/reports/*
 !/netbox/reports/__init__.py
 /netbox/scripts/*

netbox/dcim/forms/model_forms.py

@@ -733,10 +733,9 @@ class ModuleForm(ModuleCommonForm, PrimaryModelForm):
     )
     module_bay = DynamicModelChoiceField(
         label=_('Module bay'),
-        queryset=ModuleBay.objects.order_by('name'),
+        queryset=ModuleBay.objects.all(),
         query_params={
-            'device_id': '$device',
-            'ordering': 'name',
+            'device_id': '$device'
         },
         context={
             'disabled': 'installed_module',

netbox/netbox/navigation/menu.py

@@ -232,7 +232,7 @@ VPN_MENU = Menu(
             label=_('L2VPNs'),
             items=(
                 get_model_item('vpn', 'l2vpn', _('L2VPNs')),
-                get_model_item('vpn', 'l2vpntermination', _('Terminations')),
+                get_model_item('vpn', 'l2vpntermination', _('L2VPN Terminations')),
             ),
         ),
         MenuGroup(

netbox/project-static/dist/graphiql/plugin-explorer-style.css

@@ -1 +1 @@
-.docExplorerWrap{height:unset!important;min-width:unset!important;width:unset!important}.docExplorerWrap svg{display:unset}.doc-explorer-title{font-size:var(--font-size-h2);font-weight:var(--font-weight-medium)}.doc-explorer-rhs{display:none}.graphiql-explorer-root{font-family:var(--font-family-mono)!important;font-size:var(--font-size-body)!important;padding:0!important}.graphiql-explorer-root>div>div{border-color:hsla(var(--color-neutral),var(--alpha-background-heavy))!important;padding-top:var(--px-16)}.graphiql-explorer-root input{background:unset}.graphiql-explorer-root select{background:hsl(var(--color-base))!important;border:1px solid hsla(var(--color-neutral),var(--alpha-secondary));border-radius:var(--border-radius-4);color:hsl(var(--color-neutral))!important;margin:0 var(--px-8);padding:var(--px-4) var(--px-6)}.graphiql-operation-title-bar .toolbar-button{line-height:0;margin-left:var(--px-8);color:hsla(var(--color-neutral),var(--alpha-secondary, .6));font-size:var(--font-size-h3);vertical-align:middle}.graphiql-explorer-graphql-arguments input{line-height:0}.graphiql-explorer-actions{border-color:hsla(var(--color-neutral),var(--alpha-background-heavy))!important}
+.docExplorerWrap{height:unset!important;min-width:unset!important;width:unset!important}.docExplorerWrap svg{display:unset}.doc-explorer-title{font-size:var(--font-size-h2);font-weight:var(--font-weight-medium)}.doc-explorer-rhs{display:none}.graphiql-explorer-root{font-family:var(--font-family-mono)!important;font-size:var(--font-size-body)!important;padding:0!important}.graphiql-explorer-root>div>div{padding-top:var(--px-16);border-color:hsla(var(--color-neutral),var(--alpha-background-heavy))!important}.graphiql-explorer-root>div{overflow:auto!important}.graphiql-explorer-root input{background:unset}.graphiql-explorer-root select{border:1px solid hsla(var(--color-neutral),var(--alpha-secondary));border-radius:var(--border-radius-4);margin:0 var(--px-8);padding:var(--px-4)var(--px-6);background:hsl(var(--color-base))!important;color:hsl(var(--color-neutral))!important}.toolbar-button{all:unset;cursor:pointer;margin-left:var(--px-6);color:hsl(var(--color-primary));line-height:0!important;font-size:var(--font-size-h3)!important}.graphiql-explorer-slug .toolbar-button,.graphiql-explorer-graphql-arguments .toolbar-button{font-size:inherit!important}.graphiql-explorer-graphql-arguments input{min-width:2rem;line-height:0}.graphiql-explorer-actions{border-color:hsla(var(--color-neutral),var(--alpha-background-heavy))!important}

netbox/project-static/netbox-graphiql/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@graphiql/plugin-explorer": "3.2.6",
+    "@graphiql/plugin-explorer": "4.0.6",
     "graphiql": "4.1.2",
     "graphql": "16.12.0",
     "js-cookie": "3.0.5",

netbox/project-static/src/select/classes/dynamicTomSelect.ts

@@ -75,15 +75,11 @@ export class DynamicTomSelect extends TomSelect {
   load(value: string) {
     const self = this;
 
-    const currentValue = self.getValue();
-
     // Automatically clear any cached options. (Only options included
     // in the API response should be present.)
     self.clearOptions();
 
-    // Clear user_options to prevent the pre-selected option from being treated specially
-    (self as any).user_options = {};
-
+    // Populate the null option (if any) if not searching
     if (self.nullOption && !value) {
       self.addOption(self.nullOption);
     }
@@ -97,33 +93,21 @@ export class DynamicTomSelect extends TomSelect {
     addClasses(self.wrapper, self.settings.loadingClass);
     self.loading++;
 
+    // Make the API request
     fetch(url)
       .then(response => response.json())
       .then(apiData => {
         const results: Dict[] = apiData.results;
-
-        // Add options and set $order to preserve API response order
-        results.forEach((result, index) => {
+        const options: Dict[] = [];
+        for (const result of results) {
           const option = self.getOptionFromData(result);
-          self.addOption(option);
-          const key = option[self.settings.valueField as string] as string;
-          if (self.options[key]) {
-            (self.options[key] as any).$order = index;
-          }
-        });
-
-        if (self.loading > 0) {
-          self.loading--;
-          if (self.loading === 0) {
-            self.wrapper.classList.remove(self.settings.loadingClass as string);
-          }
+          options.push(option);
         }
-
-        if (currentValue && !self.items.includes(currentValue as string)) {
-          self.items.push(currentValue as string);
-        }
-
-        self.refreshOptions(false);
+        return options;
+      })
+      // Pass the options to the callback function
+      .then(options => {
+        self.loadCallback(options, []);
       })
       .catch(() => {
         self.loadCallback([], []);

netbox/project-static/yarn.lock

@@ -294,10 +294,10 @@
     react-compiler-runtime "19.1.0-rc.1"
     zustand "^5"
 
-"@graphiql/plugin-explorer@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.npmjs.org/@graphiql/plugin-explorer/-/plugin-explorer-3.2.6.tgz"
-  integrity sha512-MXzG/zVNzZfes4Em253bHyAbD/lwwAZkPKvxCAQkjz0i3dtcv4uF3D8iqJ7214iu3SCphbORYZZUC93fik1yew==
+"@graphiql/plugin-explorer@4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-4.0.6.tgz#bec1207dc27334914590ab31f46c2e944bbf4ebf"
+  integrity sha512-TppIi92YPER3v70nlF01KTQrq9AiYqkZicSd1hpU7aqGmbqw/pLwBNLUEcfENBoJtw574Qxjswb01+GaYK0Tzw==
   dependencies:
     graphiql-explorer "^0.9.0"