add JSON pretty printing to Installation admin change form (#112)

Author: joshuadavidthomas

CHANGELOG.md

@@ -20,7 +20,7 @@ and this project attempts to adhere to [Semantic Versioning](https://semver.org/
 
 ### Added
 
-- Added custom admin change form for `EventLog` with JSON pretty printing and copy functionality for webhook payloads.
+- Added JSON pretty printing and copy functionality to `EventLog` and `Installation` admin change forms
 
 ## [0.9.0]
 

src/django_github_app/templates/admin/django_github_app/eventlog/change_form.html

@@ -1,94 +1,5 @@
-{# inspired by https://til.simonwillison.net/django/pretty-print-json-admin #}
 {% extends "admin/change_form.html" %}
 {% block admin_change_form_document_ready %}
     {{ block.super }}
-    <script>
-// Recursively sort object keys (case-insensitive)
-const sortObject = (obj, depth = 0) => {
-    if (depth > 100) return obj;
-
-    if (obj === null || typeof obj !== 'object') {
-        return obj;
-    }
-
-    if (Array.isArray(obj)) {
-        return obj.map(item => sortObject(item, depth + 1));
-    }
-
-    return Object.keys(obj)
-        .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
-        .reduce((sorted, key) => {
-            sorted[key] = sortObject(obj[key], depth + 1);
-            return sorted;
-        }, {});
-};
-
-Array.from(document.querySelectorAll('div.readonly')).forEach(div => {
-    let data;
-    try {
-        data = JSON.parse(div.textContent || div.innerText);
-    } catch {
-        return;
-    }
-
-    Object.assign(div.style, {
-        backgroundColor: 'var(--darkened-bg, #f5f5f5)',
-        border: '1px solid var(--border-color, #ddd)',
-        borderRadius: '0.25rem',
-        fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
-        fontSize: '.75rem',
-        lineHeight: '1.4',
-        padding: '0.75rem',
-        overflow: 'auto',
-        maxHeight: '600px',
-        whiteSpace: 'pre'
-    });
-    div.textContent = JSON.stringify(sortObject(data), null, 2);
-
-    const label = div.previousElementSibling;
-    if (label && label.tagName === 'LABEL') {
-        label.style.display = 'flex';
-        label.style.flexDirection = 'column';
-        label.style.alignItems = 'flex-start';
-        label.style.gap = '0.5rem';
-
-        const copyBtn = document.createElement('button');
-        copyBtn.textContent = 'Copy';
-        copyBtn.type = 'button';
-        Object.assign(copyBtn.style, {
-            backgroundColor: 'var(--button-bg, var(--body-bg, #fff))',
-            border: '1px solid var(--border-color, #ddd)',
-            borderRadius: '0.2rem',
-            color: 'var(--body-fg, #333)',
-            cursor: 'pointer',
-            opacity: '0.8',
-            padding: '0.2rem 0.5rem',
-            transition: 'opacity 0.2s',
-        });
-
-        copyBtn.onmouseover = () => copyBtn.style.opacity = '1';
-        copyBtn.onmouseout = () => copyBtn.style.opacity = '0.8';
-        copyBtn.onclick = async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            try {
-                await navigator.clipboard.writeText(div.textContent);
-                const originalText = copyBtn.textContent;
-                copyBtn.textContent = 'Copied!';
-                setTimeout(() => copyBtn.textContent = originalText, 1500);
-            } catch {
-                const selection = window.getSelection();
-                const range = document.createRange();
-                range.selectNodeContents(div);
-                selection.removeAllRanges();
-                selection.addRange(range);
-                document.execCommand('copy');
-                selection.removeAllRanges();
-            }
-        };
-
-        label.appendChild(copyBtn);
-    }
-});
-    </script>
+    {% include "admin/django_github_app/includes/json_prettify_script.html" %}
 {% endblock %}

src/django_github_app/templates/admin/django_github_app/includes/json_prettify_script.html

@@ -0,0 +1,93 @@
+{# inspired by https://til.simonwillison.net/django/pretty-print-json-admin #}
+<script>
+    // Recursively sort object keys (case-insensitive)
+    const sortObject = (obj, depth = 0) => {
+        if (depth > 100) return obj;
+
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+
+        if (Array.isArray(obj)) {
+            return obj.map(item => sortObject(item, depth + 1));
+        }
+
+        return Object.keys(obj)
+            .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+            .reduce((sorted, key) => {
+                sorted[key] = sortObject(obj[key], depth + 1);
+                return sorted;
+            }, {});
+    };
+
+    // Make sure to only target the two fields we care about:
+    // - EventLog.payload
+    // - Installation.data
+    Array.from(document.querySelectorAll('.field-data div.readonly, .field-payload div.readonly')).forEach(div => {
+        let data;
+        try {
+            data = JSON.parse(div.textContent || div.innerText);
+        } catch {
+            return;
+        }
+
+        Object.assign(div.style, {
+            backgroundColor: 'var(--darkened-bg, #f5f5f5)',
+            border: '1px solid var(--border-color, #ddd)',
+            borderRadius: '0.25rem',
+            fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
+            fontSize: '.75rem',
+            lineHeight: '1.4',
+            padding: '0.75rem',
+            overflow: 'auto',
+            maxHeight: '600px',
+            whiteSpace: 'pre'
+        });
+        div.textContent = JSON.stringify(sortObject(data), null, 2);
+
+        const label = div.previousElementSibling;
+        if (label && label.tagName === 'LABEL') {
+            label.style.display = 'flex';
+            label.style.flexDirection = 'column';
+            label.style.alignItems = 'flex-start';
+            label.style.gap = '0.5rem';
+
+            const copyBtn = document.createElement('button');
+            copyBtn.textContent = 'Copy';
+            copyBtn.type = 'button';
+            Object.assign(copyBtn.style, {
+                backgroundColor: 'var(--button-bg, var(--body-bg, #fff))',
+                border: '1px solid var(--border-color, #ddd)',
+                borderRadius: '0.2rem',
+                color: 'var(--body-fg, #333)',
+                cursor: 'pointer',
+                opacity: '0.8',
+                padding: '0.2rem 0.5rem',
+                transition: 'opacity 0.2s',
+            });
+
+            copyBtn.onmouseover = () => copyBtn.style.opacity = '1';
+            copyBtn.onmouseout = () => copyBtn.style.opacity = '0.8';
+            copyBtn.onclick = async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                try {
+                    await navigator.clipboard.writeText(div.textContent);
+                    const originalText = copyBtn.textContent;
+                    copyBtn.textContent = 'Copied!';
+                    setTimeout(() => copyBtn.textContent = originalText, 1500);
+                } catch {
+                    const selection = window.getSelection();
+                    const range = document.createRange();
+                    range.selectNodeContents(div);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    document.execCommand('copy');
+                    selection.removeAllRanges();
+                }
+            };
+
+            label.appendChild(copyBtn);
+        }
+    });
+</script>

src/django_github_app/templates/admin/django_github_app/installation/change_form.html

@@ -0,0 +1,5 @@
+{% extends "admin/change_form.html" %}
+{% block admin_change_form_document_ready %}
+    {{ block.super }}
+    {% include "admin/django_github_app/includes/json_prettify_script.html" %}
+{% endblock %}