From 9d92265c09f77f75dc3cf2207e931c5d45f70943 Mon Sep 17 00:00:00 2001
From: lqqyt2423 <974923609@qq.com>
Date: Tue, 23 Nov 2021 18:14:57 +0800
Subject: [PATCH] support preview request body

---
 addon/web/client/src/App.css                 | 11 ++++++
 addon/web/client/src/components/ViewFlow.tsx | 40 +++++++++++++++++---
 addon/web/client/src/message.ts              | 32 +++++++++++++---
 3 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/addon/web/client/src/App.css b/addon/web/client/src/App.css
index a88a705..ca3d8dc 100644
--- a/addon/web/client/src/App.css
+++ b/addon/web/client/src/App.css
@@ -90,3 +90,14 @@
   margin-left: 20px;
   line-height: 1.5;
 }
+
+.flow-detail .request-body-detail span {
+  display: inline-block;
+  line-height: 1;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.flow-detail .request-body-detail .selected {
+  border-bottom: 2px rgb(35, 118, 229) solid;
+}
diff --git a/addon/web/client/src/components/ViewFlow.tsx b/addon/web/client/src/components/ViewFlow.tsx
index 47bb759..1b8b88a 100644
--- a/addon/web/client/src/components/ViewFlow.tsx
+++ b/addon/web/client/src/components/ViewFlow.tsx
@@ -18,6 +18,7 @@ interface Iprops {
 interface IState {
   flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'
   copied: boolean
+  requestBodyViewTab: 'Raw' | 'Preview'
 }
 
 class ViewFlow extends React.Component<Iprops, IState> {
@@ -27,6 +28,7 @@ class ViewFlow extends React.Component<Iprops, IState> {
     this.state = {
       flowTab: 'Headers',
       copied: false,
+      requestBodyViewTab: 'Raw',
     }
   }
 
@@ -53,6 +55,23 @@ class ViewFlow extends React.Component<Iprops, IState> {
     return <div style={{ color: 'gray' }}>Not support preview</div>
   }
 
+  requestBodyPreview() {
+    const { flow } = this.props
+    if (!flow) return null
+
+    const pv = flow.previewRequestBody()
+    if (!pv) return <div style={{ color: 'gray' }}>Not support preview</div>
+
+    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>
+    }
+    else if (pv.type === 'binary') {
+      return <div><pre>{pv.data}</pre></div>
+    }
+
+    return <div style={{ color: 'gray' }}>Not support preview</div>
+  }
+
   hexview() {
     const { flow } = this.props
     if (!flow) return null
@@ -203,12 +222,23 @@ class ViewFlow extends React.Component<Iprops, IState> {
                       <p>Request Body</p>
                       <div className="header-block-content">
                         <div>
+                          <div className="request-body-detail" style={{ marginBottom: '15px' }}>
+                            <span className={this.state.requestBodyViewTab === 'Raw' ? 'selected' : undefined} onClick={() => { this.setState({ requestBodyViewTab: 'Raw' }) }}>Raw</span>
+                            <span className={this.state.requestBodyViewTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ requestBodyViewTab: 'Preview' }) }}>Preview</span>
+                          </div>
+
+                          {
+                            !(this.state.requestBodyViewTab === 'Raw') ? null :
+                              <div>
+                                {
+                                  !(flow.isTextRequest()) ? <span style={{ color: 'gray' }}>Not text Request</span> : flow.requestBody()
+                                }
+                              </div>
+                          }
+
                           {
-                            !(flow.isTextRequest()) ? <div>
-                              <p><span style={{ color: 'gray' }}>Hex:</span></p>
-                              <div><pre>{flow.hexviewRequestBody()}</pre></div>
-                            </div> :
-                              flow.requestBody()
+                            !(this.state.requestBodyViewTab === 'Preview') ? null :
+                              <div>{this.requestBodyPreview()}</div>
                           }
                         </div>
                       </div>
diff --git a/addon/web/client/src/message.ts b/addon/web/client/src/message.ts
index dcdf2a0..ba58444 100644
--- a/addon/web/client/src/message.ts
+++ b/addon/web/client/src/message.ts
@@ -43,9 +43,9 @@ export interface IFlowPreview {
   contentType: string
 }
 
-interface IPreviewResponseBody {
-  type: 'image' | 'json'
-  data: string
+interface IPreviewBody {
+  type: 'image' | 'json' | 'binary'
+  data: string | null
 }
 
 export class Flow {
@@ -76,7 +76,8 @@ export class Flow {
   private _hexviewRequestBody: string | null = null
   private _responseBody: string | null
 
-  private _previewResponseBody: IPreviewResponseBody | null = null
+  private _previewResponseBody: IPreviewBody | null = null
+  private _previewRequestBody: IPreviewBody | null = null
   private _hexviewResponseBody: string | null = null
 
   constructor(msg: IMessage) {
@@ -195,7 +196,7 @@ export class Flow {
     return this._responseBody
   }
 
-  public previewResponseBody(): IPreviewResponseBody | null {
+  public previewResponseBody(): IPreviewBody | null {
     if (this._previewResponseBody) return this._previewResponseBody
 
     if (this.status < MessageType.RESPONSE_BODY) return null
@@ -221,6 +222,27 @@ export class Flow {
     return this._previewResponseBody
   }
 
+  public previewRequestBody(): IPreviewBody | null {
+    if (this._previewRequestBody) return this._previewRequestBody
+
+    if (this.status < MessageType.REQUEST_BODY) return null
+    if (!(this.request.body?.byteLength)) return null
+
+    if (!this.isTextRequest()) {
+      this._previewRequestBody = {
+        type: 'binary',
+        data: this.hexviewRequestBody(),
+      }
+    } else if (/json/.test(this.request.header['Content-Type'].join(''))) {
+      this._previewRequestBody = {
+        type: 'json',
+        data: this.requestBody(),
+      }
+    }
+
+    return this._previewRequestBody
+  }
+
   public hexviewResponseBody(): string | null {
     if (this._hexviewResponseBody !== null) return this._hexviewResponseBody