Diff View #1: UI & Logic

[NghiaTranUIT]

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:

CleanShot.2023-07-13.at.13.45.28.mp4

Acceptance Criteria

1. Right Menu Context

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

2. Menu UI

• 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:

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)

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:

CleanShot.2023-07-13.at.13.50.11.mp4

• Do not need to implement the Highlight Color

[NghiaTranUIT]

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]

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