JSON Tree View Filter View

[NghiaTranUIT]

Description

A lot of users are working with JSON every day, we should improve how we filter the JSON Content.

• Beta build: https://download.proxyman.io/beta/Proxyman_4.3.1_New_Search_and_filter_json_v3.dmg
• Sample Test: api.producthunt.com_03-02-2023-21-24-41.proxymanlogv2.zip

Acceptance Criteria

• Implement the Filter UI as the macOS Beta:

• Implement JSON Path, Filter, and Search. (These are new UI from Proxyman 4.4.0)

• Use https://www.npmjs.com/package/jsonpath for the JSON Path

• Show the Help View if the result is empty

Search Mode

• Expand the entire JSON Tree -> Highlight the matching word on the matched JSON Node. The point of search is that the user can see other keys/values from the entire JSON View.
• Show the Gray background for all matching
• For the selected Node -> Use the Yellow Blackground + Black Text Color
• Can Enter to move the selected matched word (Yellow) forward
• Go back to the start position if it runs out of the loop
• Show the Counter
• Click < or > can jump to the Next or the Previous matching

See the GIF:

https://user-images.githubusercontent.com/5878421/222456852-de0786e9-b4bc-48a7-bcb2-668d133aef7d.mp4

Filter Mode

• Filter Mode: Recursively filter the JSON Tree, find a matched note, and return a new JSON Tree. See the screenshot.

General Behavior

• Search on Key and Value
• Filter on Key and Value
• Case-insensitive
• CMD+F will always show the FIlter view and focus on the Text View
• ESC will "select all" the text, ESC again will close the Filter Bar (Similar to the Main Table Filter View)
• Select different requests, and the JSON TreeView will perform the Search/Filter if the Search Bar is appeared (See the GIF)
• JSON Path, Search, and Filter Mode are persisted for the next launch. Don't save the Text Field.
• If we select different Select Mode, if there search text is not empty, we should perform the Search Operation

https://user-images.githubusercontent.com/5878421/222457995-7a6eac01-556e-4107-815a-6f8eeee962ae.mp4

The JSON will filter if we select the next flow

https://user-images.githubusercontent.com/5878421/222457550-e605d79a-e6ce-445b-b0f5-707c228703bc.mp4

Implement Suggestion

1. Add JSONNodeSearcher class
2. Add an enum to represent 3 types of filter
3. Implement APIs to filter the JSON Object and return the new JSON Object -> THis JSON Object can be passed to the TreeView to render.
4. Use async to make sure the heavy work (Filter) is off the main thread.

Unit Tests

• Write some Unit Tests to cover all happy cases of the JSON Path, Search and Filter

[NghiaTranUIT]

Update requirement for the Search JSON

It's quite tricky because we don't filter the matching node, we just search and jump to the matched point

1. Expand all JSON nodes
2. Start searching all matching -> Set Gray Background
3. Enter to jump to the next matching
4. If it ends of the list -> Jump back to the begin position (See the Video)

You can use the Xcode or VS Code to understand how it works

https://user-images.githubusercontent.com/5878421/222306136-4568fd6d-fc75-464e-97fd-10a493deb962.mp4

[NghiaTranUIT]

Update 3

@kics223w1 I've updated new UI + UIUX Behavior 👍