From 1513c3972533261258fb32f5bebbdce59bccfead Mon Sep 17 00:00:00 2001
From: lqqyt2423 <974923609@qq.com>
Date: Mon, 17 May 2021 14:55:38 +0800
Subject: [PATCH] addon web json preview

---
 addon/web/client/package.json                | 1 +
 addon/web/client/src/components/ViewFlow.tsx | 4 ++++
 addon/web/client/src/message.ts              | 8 +++++++-
 addon/web/client/yarn.lock                   | 7 +++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/addon/web/client/package.json b/addon/web/client/package.json
index c2a7b46..644e328 100644
--- a/addon/web/client/package.json
+++ b/addon/web/client/package.json
@@ -14,6 +14,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-json-pretty": "^2.2.0",
     "react-scripts": "4.0.3",
     "scrollmonitor": "^1.2.4",
     "typescript": "^4.1.2",
diff --git a/addon/web/client/src/components/ViewFlow.tsx b/addon/web/client/src/components/ViewFlow.tsx
index 4d99554..83dc386 100644
--- a/addon/web/client/src/components/ViewFlow.tsx
+++ b/addon/web/client/src/components/ViewFlow.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import JSONPretty from 'react-json-pretty'
 import { Flow, IResponse } from '../message'
 import { isTextBody } from '../utils'
 
@@ -40,6 +41,9 @@ class ViewFlow extends React.Component<Iprops, IState> {
     if (pv.type === 'image') {
       return <img src={`data:image/png;base64,${pv.data}`} />
     }
+    else if (pv.type === 'json') {
+      return <div><JSONPretty data={pv.data} keyStyle={'color: rgb(130,40,144);'} stringStyle={'color: rgb(153,68,60);'} valueStyle={'color: rgb(25,1,199);'} booleanStyle={'color: rgb(94,105,192);'} /></div>
+    }
 
     return <div style={{ color: 'gray' }}>Not support preview</div>
   }
diff --git a/addon/web/client/src/message.ts b/addon/web/client/src/message.ts
index bdd9981..573b934 100644
--- a/addon/web/client/src/message.ts
+++ b/addon/web/client/src/message.ts
@@ -44,7 +44,7 @@ export interface IFlowPreview {
 }
 
 interface IPreviewResponseBody {
-  type: 'image'
+  type: 'image' | 'json'
   data: string
 }
 
@@ -200,6 +200,12 @@ export class Flow {
         data: arrayBufferToBase64(this.response.body),
       }
     }
+    else if (contentType.includes('application/json')) {
+      this._previewResponseBody = {
+        type: 'json',
+        data: this.responseBody(),
+      }
+    }
 
     return this._previewResponseBody
   }
diff --git a/addon/web/client/yarn.lock b/addon/web/client/yarn.lock
index cb2e1cf..92bede1 100644
--- a/addon/web/client/yarn.lock
+++ b/addon/web/client/yarn.lock
@@ -9175,6 +9175,13 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-json-pretty@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-json-pretty/-/react-json-pretty-2.2.0.tgz#9ba907d2b08d87e90456d87b6025feeceb8f63cf"
+  integrity sha512-3UMzlAXkJ4R8S4vmkRKtvJHTewG4/rn1Q18n0zqdu/ipZbUPLVZD+QwC7uVcD/IAY3s8iNVHlgR2dMzIUS0n1A==
+  dependencies:
+    prop-types "^15.6.2"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"