starred/proxyman-windows-linux

Fork 0

mirror of https://github.com/ProxymanApp/proxyman-windows-linux.git synced 2026-04-27 00:45:55 +03:00

[GH-ISSUE #268] Diff View #1: UI & Logic #269

New issue

Open

opened 2026-03-03 19:49:31 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 19:49:31 +03:00

Owner

Originally created by @NghiaTranUIT on GitHub (Jul 13, 2023).
Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/268

Originally assigned to: @kics223w1 on GitHub.

Description

It's time to implement the built-in Diff view from Monaco Editor (Diff Mode): https://microsoft.github.io/monaco-editor/

Please play around with the Diff View in Proxyman for macOS.

Demo:

https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/54cf0d23-c0b9-4d1c-98fb-44457d654d5f

Acceptance Criteria

Able to add 1 or multiple selected flows to the Pool
Open new Tab with the Diff View

Implement the Diff View, which consists of 2 parts: The Pool Data Source and the Monaco Diff View

3. Diff Option

Diff in Request / Response
Unified or Side By Side
Default option is: Request + Side By Side
Able to switch different options -> The UI should be updated too.

4. Diff request/response

See the Demo Video to understand the behavior because it's hard to explain in words.
Diff Pool Data Source: Reuse the Table of the Main Table View with some pre-defined columns
Have 2 new columns (Left and Right) -> Able to select the position of the request
Left / Right -> Only 1 column is enabled at the time

5. How to build the Request/Response Diff data

The Diff data is:

The Raw Data (Reuse the code that generates the Raw data from the Raw Tab)
However, for the the Body part -> We must try to beautify the Body (JSON)

5. Notice

The Pool Data Source doesn't persist for the next launch. It's clear when we close the app -> No need to save to disk.
In the Diff View -> If we add Comment -> The flow on the main table view should be updated too -> It's the same instance. See the video demo below:

https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/60f5c34e-d0b1-4009-9e1c-73f182653964

Do not need to implement the Highlight Color

Originally created by @NghiaTranUIT on GitHub (Jul 13, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/268 Originally assigned to: @kics223w1 on GitHub. ## Description It's time to implement the built-in Diff view from Monaco Editor (Diff Mode): https://microsoft.github.io/monaco-editor/ Please play around with the Diff View in Proxyman for macOS. Demo: https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/54cf0d23-c0b9-4d1c-98fb-44457d654d5f ## Acceptance Criteria ### 1. Right Menu Context - Able to add 1 or multiple selected flows to the Pool - Open new Tab with the Diff View ![Screenshot 2023-07-13 at 13 35 35](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/4dcfa2a0-36da-4b80-9ace-a95cb686b771) ### 2. Menu UI - Implement the Diff View, which consists of 2 parts: The Pool Data Source and the Monaco Diff View ![Screenshot 2023-07-13 at 13 35 57](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/1661292c-2d06-423b-bb3d-7009e62b9314) #### 3. Diff Option - Diff in Request / Response - Unified or Side By Side - Default option is: Request + Side By Side - Able to switch different options -> The UI should be updated too. <img width="543" alt="Screenshot 2023-07-13 at 13 43 44" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/03fce5b3-2a58-4b0a-86dd-abc4651f6797"> #### 4. Diff request/response - See the Demo Video to understand the behavior because it's hard to explain in words. - Diff Pool Data Source: Reuse the Table of the Main Table View with some pre-defined columns - Have 2 new columns (Left and Right) -> Able to select the position of the request - Left / Right -> Only 1 column is enabled at the time <img width="368" alt="Screenshot 2023-07-13 at 13 47 05" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/9c79a24e-8874-4b49-aaad-30e70189e9d4"> #### 5. How to build the Request/Response Diff data - The Diff data is: 1. The Raw Data (Reuse the code that generates the Raw data from the Raw Tab) 2. However, for the the Body part -> We must try to beautify the Body (JSON) ![CleanShot 2023-07-13 at 13 52 16@2x](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/251f0831-f120-4a5f-a8da-90e98a210a9d) #### 5. Notice - The Pool Data Source doesn't persist for the next launch. It's clear when we close the app -> No need to save to disk. - In the Diff View -> If we add Comment -> The flow on the main table view should be updated too -> It's the same instance. See the video demo below: https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/60f5c34e-d0b1-4009-9e1c-73f182653964 - Do not need to implement the Highlight Color

kerem added the

✅ Done

enhancement

labels

2026-03-03 19:49:31 +03:00

kerem referenced this issue

2026-03-03 19:49:31 +03:00

[GH-ISSUE #269] Diff View #2 : Some Options #270

kerem commented

2026-03-03 19:49:32 +03:00

Author

Owner

@NghiaTranUIT commented on GitHub (Jul 13, 2023):

6. Empty View

Show empty view if the pool is empty

7. Auto Select Left or Right column

See the demo video
https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/c400490d-e17f-4500-a53c-398ba1dc46c5
When adding [Flow]

If the Diff pool is empty -> The first flow (flows[[0]) must select the Left Column, the second flows (flows[1]) must select the right column -> The Diff Editor will show the Diff right away -> The user no need to select the column
Otherwise, just add new flows into a pool -> No need to select Left/Right Column because it's already selected.

Code suggestion

Make sure we create a class DiffService which has the [Flow] pool data
Enum for each type: Request/Response and enum for diff option: Side by Side or Unified

@NghiaTranUIT commented on GitHub (Jul 13, 2023): ### 6. Empty View - Show empty view if the pool is empty ![CleanShot 2023-07-13 at 13 39 24@2x](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/fe91a256-2c3e-4acb-8a85-8b8ef5337cba) ### 7. Auto Select Left or Right column - See the demo video https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/c400490d-e17f-4500-a53c-398ba1dc46c5 - When adding [Flow] 1. If the Diff pool is empty -> The first flow (flows[[0]) must select the Left Column, the second flows (flows[1]) must select the right column -> The Diff Editor will show the Diff right away -> The user no need to select the column 2. Otherwise, just add new flows into a pool -> No need to select Left/Right Column because it's already selected. ### Code suggestion - Make sure we create a class DiffService which has the [Flow] pool data - Enum for each type: Request/Response and enum for diff option: Side by Side or Unified