webapi: Use raw whitespace to format JSON.

No need to manually construct HTML in this formatting func, it can simply deal with whitespace and then use <pre> tags to display.

Add some tests to validate behaviour.

webapi/formatting.go

@@ -4,7 +4,6 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"html/template"
 	"strings"
 	"time"
 
@@ -40,16 +39,19 @@ func stripWss(input string) string {
 	return input
 }
 
-func indentJSON(log slog.Logger) func(string) template.HTML {
+// indentJSON returns a func which uses whitespace to format a provided JSON
-	return func(input string) template.HTML {
+// string. If the parameter is invalid JSON, an error will be logged and the
+// param will be returned unaltered.
+func indentJSON(log slog.Logger) func(string) string {
+	return func(input string) string {
 		var indented bytes.Buffer
-		err := json.Indent(&indented, []byte(input), "<br/>", "&nbsp;&nbsp;&nbsp;&nbsp;")
+		err := json.Indent(&indented, []byte(input), "", "    ")
 		if err != nil {
 			log.Errorf("Failed to indent JSON: %w", err)
-			return template.HTML(input)
+			return input
 		}
 
-		return template.HTML(indented.String())
+		return indented.String()
 	}
 }
 

webapi/formatting_test.go

@@ -0,0 +1,51 @@
+package webapi
+
+import (
+	"testing"
+
+	"github.com/decred/slog"
+)
+
+func TestIndentJSON(t *testing.T) {
+	t.Parallel()
+
+	// Get the actual invokable func by passing a noop logger.
+	indentJSONFunc := indentJSON(slog.Disabled)
+
+	tests := map[string]struct {
+		input    string
+		expected string
+	}{
+		"nothing": {
+			input:    "",
+			expected: "",
+		},
+		"empty": {
+			input:    "{}",
+			expected: "{}",
+		},
+		"one line JSON": {
+			input:    "{\"key\":\"value\"}",
+			expected: "{\n    \"key\": \"value\"\n}",
+		},
+		"nested JSON": {
+			input:    "{\"key\":{\"key2\":\"value\"}}",
+			expected: "{\n    \"key\": {\n        \"key2\": \"value\"\n    }\n}",
+		},
+		"invalid JSON": {
+			input:    "this is not valid json",
+			expected: "this is not valid json",
+		},
+	}
+
+	for testName, test := range tests {
+		test := test
+		t.Run(testName, func(t *testing.T) {
+			t.Parallel()
+			actual := indentJSONFunc(test.input)
+			if actual != test.expected {
+				t.Fatalf("expected %q, got %q", test.expected, actual)
+			}
+		})
+	}
+}

webapi/public/css/vspd.css

@@ -158,6 +158,12 @@ footer .code {
     font-size: 12px;
 }
 
+#ticket-table pre {
+    color: #3D5873;
+    font-size: 12px;
+    white-space: pre-wrap;
+}
+
 .vsp-status {
     padding: 10px;
 }

webapi/templates/ticket-search-result.html

@@ -128,7 +128,7 @@
                         <table class="my-2">
                             <tr>
                                 <th>Request</th>
-                                <td>{{ indentJSON $value.Request }}</td>
+                                <td><pre>{{ indentJSON $value.Request }}</pre></td>
                             </tr>
                             <tr>
                                 <th>Request<br />Signature</th>
@@ -136,7 +136,7 @@
                             </tr>
                             <tr>
                                 <th>Response</th>
-                                <td>{{ indentJSON $value.Response }}</td>
+                                <td><pre>{{ indentJSON $value.Response }}</pre></td>
                             </tr>
                             <tr>
                                 <th>Response<br />Signature</th>
@@ -172,7 +172,7 @@
                         <table class="my-2">
                             <tr>
                                 <th>Request</th>
-                                <td>{{ indentJSON .AltSignAddrData.Req }}</td>
+                                <td><pre>{{ indentJSON .AltSignAddrData.Req }}</pre></td>
                             </tr>
                             <tr>
                                 <th>Request<br />Signature</th>
@@ -180,7 +180,7 @@
                             </tr>
                             <tr>
                                 <th>Response</th>
-                                <td>{{ indentJSON .AltSignAddrData.Resp }}</td>
+                                <td><pre>{{ indentJSON .AltSignAddrData.Resp }}</pre></td>
                             </tr>
                             <tr>
                                 <th>Response<br />Signature</th>