Fixes #21124: Fix rear port selection when creating front ports on a module type

Fixes #21102: Fix GraphiQL explorer UI

docs/features/change-logging.md

@@ -10,9 +10,11 @@ Change records are exposed in the API via the read-only endpoint `/api/extras/ob
 
 ## User Messages
 
-!!! info "This feature was introduced in NetBox v4.4."
+When creating, modifying, or deleting an object in NetBox, a user has the option of recording an arbitrary message (up to 200 characters) that will appear in the change record. This can be helpful to capture additional context, such as the reason for a change or a reference to an external ticket.
 
-When creating, modifying, or deleting an object in NetBox, a user has the option of recording an arbitrary message that will appear in the change record. This can be helpful to capture additional context, such as the reason for the change.
+When editing an object via the web UI, the "Changelog message" field appears at the bottom of the form. This field is optional. The changelog message field is available in object create forms, object edit forms, delete confirmation dialogs, and bulk operations.
+
+For information on including changelog messages when making changes via the REST API, see [Changelog Messages](../integrations/rest-api.md#changelog-messages).
 
 ## Correlating Changes by Request
 

docs/integrations/rest-api.md

@@ -610,9 +610,7 @@ http://netbox/api/dcim/sites/ \
 
 ## Changelog Messages
 
-!!! info "This feature was introduced in NetBox v4.4."
-
-Most objects in NetBox support [change logging](../features/change-logging.md), which generates a detailed record each time an object is created, modified, or deleted. Beginning in NetBox v4.4, users can attach a message to the change record as well. This is accomplished via the REST API by including a `changelog_message` field in the object representation.
+Most objects in NetBox support [change logging](../features/change-logging.md), which generates a detailed record each time an object is created, modified, or deleted. Additionally, users can attach a message to the change record as well. This is accomplished via the REST API by including a `changelog_message` field in the object representation.
 
 For example, the following API request will create a new site and record a message in the resulting changelog entry:
 
@@ -628,7 +626,7 @@ http://netbox/api/dcim/sites/ \
 }'
 ```
 
-This approach works when creating, modifying, or deleting objects, either individually or in bulk.
+This approach works when creating, modifying, or deleting objects, either individually or in bulk. For more information about change logging, see [Change Logging](../features/change-logging.md).
 
 ## Uploading Files
 

netbox/dcim/forms/mixins.py

@@ -140,9 +140,6 @@ class FrontPortFormMixin(forms.Form):
         widget=forms.SelectMultiple(attrs={'size': 8})
     )
 
-    port_mapping_model = PortMapping
-    parent_field = 'device'
-
     def clean(self):
         super().clean()
 
@@ -203,3 +200,22 @@ class FrontPortFormMixin(forms.Form):
                 using=connection,
                 update_fields=None
             )
+
+    def _get_rear_port_choices(self, parent_filter, front_port):
+        """
+        Return a list of choices representing each available rear port & position pair on the parent object (identified
+        by a Q filter), excluding those assigned to the specified instance.
+        """
+        occupied_rear_port_positions = [
+            f'{mapping.rear_port_id}:{mapping.rear_port_position}'
+            for mapping in self.port_mapping_model.objects.filter(parent_filter).exclude(front_port=front_port.pk)
+        ]
+
+        choices = []
+        for rear_port in self.rear_port_model.objects.filter(parent_filter):
+            for i in range(1, rear_port.positions + 1):
+                pair_id = f'{rear_port.pk}:{i}'
+                if pair_id not in occupied_rear_port_positions:
+                    pair_label = f'{rear_port.name}:{i}'
+                    choices.append((pair_id, pair_label))
+        return choices

netbox/dcim/forms/model_forms.py

@@ -1124,9 +1124,8 @@ class FrontPortTemplateForm(FrontPortFormMixin, ModularComponentTemplateForm):
         ),
     )
 
-    # Override FrontPortFormMixin attrs
     port_mapping_model = PortTemplateMapping
-    parent_field = 'device_type'
+    rear_port_model = RearPortTemplate
 
     class Meta:
         model = FrontPortTemplate
@@ -1137,13 +1136,14 @@ class FrontPortTemplateForm(FrontPortFormMixin, ModularComponentTemplateForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
+        # Populate rear port choices based on parent DeviceType or ModuleType
         if device_type_id := self.data.get('device_type') or self.initial.get('device_type'):
-            device_type = DeviceType.objects.get(pk=device_type_id)
+            parent_filter = Q(device_type=device_type_id)
+        elif module_type_id := self.data.get('module_type') or self.initial.get('module_type'):
+            parent_filter = Q(module_type=module_type_id)
         else:
             return
-
-        # Populate rear port choices
-        self.fields['rear_ports'].choices = self._get_rear_port_choices(device_type, self.instance)
+        self.fields['rear_ports'].choices = self._get_rear_port_choices(parent_filter, self.instance)
 
         # Set initial rear port mappings
         if self.instance.pk:
@@ -1152,27 +1152,6 @@ class FrontPortTemplateForm(FrontPortFormMixin, ModularComponentTemplateForm):
                 for mapping in PortTemplateMapping.objects.filter(front_port_id=self.instance.pk)
             ]
 
-    def _get_rear_port_choices(self, device_type, front_port):
-        """
-        Return a list of choices representing each available rear port & position pair on the device type, excluding
-        those assigned to the specified instance.
-        """
-        occupied_rear_port_positions = [
-            f'{mapping.rear_port_id}:{mapping.rear_port_position}'
-            for mapping in device_type.port_mappings.exclude(front_port=front_port.pk)
-        ]
-
-        choices = []
-        for rear_port in RearPortTemplate.objects.filter(device_type=device_type):
-            for i in range(1, rear_port.positions + 1):
-                pair_id = f'{rear_port.pk}:{i}'
-                if pair_id not in occupied_rear_port_positions:
-                    pair_label = f'{rear_port.name}:{i}'
-                    choices.append(
-                        (pair_id, pair_label)
-                    )
-        return choices
-
 
 class RearPortTemplateForm(ModularComponentTemplateForm):
     fieldsets = (
@@ -1619,6 +1598,9 @@ class FrontPortForm(FrontPortFormMixin, ModularDeviceComponentForm):
         ),
     )
 
+    port_mapping_model = PortMapping
+    rear_port_model = RearPort
+
     class Meta:
         model = FrontPort
         fields = [
@@ -1629,13 +1611,12 @@ class FrontPortForm(FrontPortFormMixin, ModularDeviceComponentForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
+        # Populate rear port choices
         if device_id := self.data.get('device') or self.initial.get('device'):
-            device = Device.objects.get(pk=device_id)
+            parent_filter = Q(device=device_id)
         else:
             return
-
-        # Populate rear port choices
-        self.fields['rear_ports'].choices = self._get_rear_port_choices(device, self.instance)
+        self.fields['rear_ports'].choices = self._get_rear_port_choices(parent_filter, self.instance)
 
         # Set initial rear port mappings
         if self.instance.pk:
@@ -1644,27 +1625,6 @@ class FrontPortForm(FrontPortFormMixin, ModularDeviceComponentForm):
                 for mapping in PortMapping.objects.filter(front_port_id=self.instance.pk)
             ]
 
-    def _get_rear_port_choices(self, device, front_port):
-        """
-        Return a list of choices representing each available rear port & position pair on the device, excluding those
-        assigned to the specified instance.
-        """
-        occupied_rear_port_positions = [
-            f'{mapping.rear_port_id}:{mapping.rear_port_position}'
-            for mapping in device.port_mappings.exclude(front_port=front_port.pk)
-        ]
-
-        choices = []
-        for rear_port in RearPort.objects.filter(device=device):
-            for i in range(1, rear_port.positions + 1):
-                pair_id = f'{rear_port.pk}:{i}'
-                if pair_id not in occupied_rear_port_positions:
-                    pair_label = f'{rear_port.name}:{i}'
-                    choices.append(
-                        (pair_id, pair_label)
-                    )
-        return choices
-
 
 class RearPortForm(ModularDeviceComponentForm):
     fieldsets = (

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/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"