admin: remove inline JS, add CodeMirror widget for jinja and yaml

passbook/admin/fields.py

@@ -4,6 +4,27 @@ from django import forms
 from django.utils.translation import gettext_lazy as _
 
 
+class CodeMirrorWidget(forms.Textarea):
+    """Custom Textarea-based Widget that triggers a CodeMirror editor"""
+
+    # CodeMirror mode to enable
+    mode: str
+
+    def __init__(self, *args, mode="yaml", **kwargs):
+        super().__init__(*args, **kwargs)
+        self.mode = mode
+
+    def render(self, *args, **kwargs):
+        if "attrs" not in kwargs:
+            kwargs["attrs"] = {}
+        attrs = kwargs["attrs"]
+        if "class" not in attrs:
+            attrs["class"] = ""
+        attrs["class"] += " codemirror"
+        attrs["data-cm-mode"] = self.mode
+        return super().render(*args, **kwargs)
+
+
 class InvalidYAMLInput(str):
     """Invalid YAML String type"""
 

passbook/admin/forms/users.py

@@ -2,7 +2,7 @@
 
 from django import forms
 
-from passbook.admin.fields import YAMLField
+from passbook.admin.fields import CodeMirrorWidget, YAMLField
 from passbook.core.models import User
 
 
@@ -15,6 +15,7 @@ class UserForm(forms.ModelForm):
         fields = ["username", "name", "email", "is_staff", "is_active", "attributes"]
         widgets = {
             "name": forms.TextInput,
+            "attributes": CodeMirrorWidget,
         }
         field_classes = {
             "attributes": YAMLField,

passbook/admin/templates/administration/base.html

@@ -66,6 +66,12 @@
                                     {% trans 'Flows' %}
                                 </a>
                             </li>
+                            <li class="pf-c-nav__item">
+                                <a href="{% url 'passbook_admin:stage-bindings' %}"
+                                    class="pf-c-nav__link {% is_active 'passbook_admin:stage-bindings' 'passbook_admin:stage-binding-create' 'passbook_admin:stage-binding-update' 'passbook_admin:stage-binding-delete' %}">
+                                    {% trans 'Bindings' %}
+                                </a>
+                            </li>
                             <li class="pf-c-nav__item">
                                 <a href="{% url 'passbook_admin:stages' %}"
                                     class="pf-c-nav__link {% is_active 'passbook_admin:stages' 'passbook_admin:stage-create' 'passbook_admin:stage-update' 'passbook_admin:stage-delete' %}">
@@ -84,12 +90,6 @@
                                     {% trans 'Invitations' %}
                                 </a>
                             </li>
-                            <li class="pf-c-nav__item">
-                                <a href="{% url 'passbook_admin:stage-bindings' %}"
-                                    class="pf-c-nav__link {% is_active 'passbook_admin:stage-bindings' 'passbook_admin:stage-binding-create' 'passbook_admin:stage-binding-update' 'passbook_admin:stage-binding-delete' %}">
-                                    {% trans 'Bindings' %}
-                                </a>
-                            </li>
                         </ul>
                     </section>
                 </li>

passbook/admin/templates/generic/form.html

@@ -48,28 +48,6 @@
         </div>
     </div>
 </section>
-<script>
-    const attributes = document.getElementsByName('attributes');
-    if (attributes.length > 0) {
-        // https://github.com/codemirror/CodeMirror/issues/5092
-        attributes[0].removeAttribute("required");
-        const attributesCM = CodeMirror.fromTextArea(attributes[0], {
-            mode: 'yaml',
-            theme: 'monokai',
-            lineNumbers: true,
-        });
-    }
-    const expressions = document.getElementsByName('expression');
-    if (expressions.length > 0) {
-        // https://github.com/codemirror/CodeMirror/issues/5092
-        expressions[0].removeAttribute("required");
-        const expressionCM = CodeMirror.fromTextArea(expressions[0], {
-            mode: 'jinja2',
-            theme: 'monokai',
-            lineNumbers: true,
-        });
-    }
-</script>
 {% endblock %}
 
 {% block scripts %}