Closes #9161: Pretty print JSON custom field data when editing

docs/release-notes/version-3.2.md

@@ -2,6 +2,8 @@
 
 ## v3.2.9 (FUTURE)
 
+* [#9161](https://github.com/netbox-community/netbox/issues/9161) - Pretty print JSON custom field data when editing
+
 ---
 
 ## v3.2.8 (2022-08-08)

netbox/extras/models/customfields.py

@@ -18,7 +18,7 @@ from netbox.models.features import ExportTemplatesMixin, WebhooksMixin
 from utilities import filters
 from utilities.forms import (
     CSVChoiceField, CSVMultipleChoiceField, DatePicker, DynamicModelChoiceField, DynamicModelMultipleChoiceField,
-    LaxURLField, StaticSelectMultiple, StaticSelect, add_blank_choice,
+    JSONField, LaxURLField, StaticSelectMultiple, StaticSelect, add_blank_choice,
 )
 from utilities.querysets import RestrictedQuerySet
 from utilities.validators import validate_regex
@@ -343,7 +343,7 @@ class CustomField(ExportTemplatesMixin, WebhooksMixin, ChangeLoggedModel):
 
         # JSON
         elif self.type == CustomFieldTypeChoices.TYPE_JSON:
-            field = forms.JSONField(required=required, initial=initial)
+            field = JSONField(required=required, initial=initial)
 
         # Object
         elif self.type == CustomFieldTypeChoices.TYPE_OBJECT:

netbox/project-static/styles/netbox.scss

@@ -714,11 +714,8 @@ textarea.form-control[rows='10'] {
   height: 18rem;
 }
 
-textarea#id_local_context_data,
 textarea.markdown,
-textarea#id_public_key,
-textarea.form-control[name='csv'],
-textarea.form-control[name='data'] {
+textarea.form-control[name='csv'] {
   font-family: $font-family-monospace;
 }
 

netbox/utilities/forms/fields/fields.py

@@ -99,6 +99,7 @@ class JSONField(_JSONField):
         if not self.help_text:
             self.help_text = 'Enter context data in <a href="https://json.org/">JSON</a> format.'
             self.widget.attrs['placeholder'] = ''
+            self.widget.attrs['class'] = 'font-monospace'
 
     def prepare_value(self, value):
         if isinstance(value, InvalidJSONInput):

netbox/utilities/forms/forms.py

@@ -136,7 +136,7 @@ class ImportForm(BootstrapMixin, forms.Form):
     Generic form for creating an object from JSON/YAML data
     """
     data = forms.CharField(
-        widget=forms.Textarea,
+        widget=forms.Textarea(attrs={'class': 'font-monospace'}),
         help_text="Enter object data in JSON or YAML format. Note: Only a single object/document is supported."
     )
     format = forms.ChoiceField(