From 7d40e85e64762db8d420a33ed352f707edd7a9ba Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Sat, 3 Oct 2020 00:13:53 +0200
Subject: Add json viewer feature

---
 frontend/src/components/ConnectionContent.js   | 19 +++++++++++++++++--
 frontend/src/components/ConnectionContent.scss |  4 ++++
 frontend/src/utils.js                          |  7 +++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 8667886..11b8617 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -6,6 +6,8 @@ import backend from "../backend";
 import ButtonField from "./fields/ButtonField";
 import ChoiceField from "./fields/ChoiceField";
 import DOMPurify from 'dompurify';
+import ReactJson from 'react-json-view'
+import {getHeaderValue} from "../utils";
 
 const classNames = require('classnames');
 
@@ -83,10 +85,21 @@ class ConnectionContent extends Component {
                     {unrollMap(m.trailers)}
                 </span>;
             case "http-response":
+                const contentType = getHeaderValue(m, "Content-Type");
+                let body = m.body;
+                if (contentType && contentType.includes("application/json")) {
+                    try {
+                        const json = JSON.parse(m.body);
+                        body = <ReactJson src={json} theme="grayscale" collapsed={false} displayDataTypes={false} />;
+                    } catch (e) {
+                        console.log(e);
+                    }
+                }
+
                 return <span className="type-http-response">
                     <p style={{"marginBottom": "7px"}}>{m.protocol} <strong>{m.status}</strong></p>
                     {unrollMap(m.headers)}
-                    <div style={{"margin": "20px 0"}}>{m.body}</div>
+                    <div style={{"margin": "20px 0"}}>{body}</div>
                     {unrollMap(m.trailers)}
                 </span>;
             default:
@@ -114,7 +127,9 @@ class ConnectionContent extends Component {
                     }} />
                 );
             case "http-response":
-                if (m.headers && m.headers["Content-Type"].includes("text/html")) {
+                const contentType = getHeaderValue(m, "Content-Type");
+
+                if (contentType && contentType.includes("text/html")) {
                     return <ButtonField small name="render_html" onClick={() => {
                         let w;
                         if (this.state.renderWindow && !this.state.renderWindow.closed) {
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index c97a4b0..de4d699 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -48,6 +48,10 @@
 
     .message-content {
       padding: 10px;
+
+      .react-json-view {
+        background-color: inherit !important;
+      }
     }
 
     &:hover .connection-message-actions {
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 8c7fe0f..fb0e5d9 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -111,3 +111,10 @@ export function formatSize(size) {
 export function randomClassName() {
     return Math.random().toString(36).slice(2);
 }
+
+export function getHeaderValue(request, key) {
+    if (request && request.headers) {
+        return request.headers[Object.keys(request.headers).find(k => k.toLowerCase() === key.toLowerCase())];
+    }
+    return undefined;
+}
-- 
cgit v1.2.3-70-g09d2