[GH-ISSUE #206] [Map Local] #2 Editor View #206

New issue

Open

opened 2026-03-03 19:49:10 +03:00 by kerem · 0 comments

kerem commented

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

Owner

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

Originally assigned to: @kics223w1 on GitHub.

Description

⚠️ Please book a video call with @NghiaTranUIT for the demonstration and explanation for each criteria 👍

⚠️ If you're not sure, please don't assume, just ask 👍

Acceptance Criteria

When clicking on the Map Rule Rule -> Open the Editor View -> Display the Matching Rule data and the Raw data in the Editor.
Use Monaco Editor with JSON Highlight

Matching Rule View

Implement the UI: Make sure this view is reusable ✅ We will use this view in different debugging tools.
As soon as the Name, Rule text field is ended editing -> Save immediately to the disk -> The Rule takes effect immediately. The reason is: On the Map Local Editor, we don't have the Save button like other Rules.
If it's a Regex Matching Mode -> Check whether or not the Regex syntax is correct -> Show 🔴 label if need
Show the GraphQL UI if it's enabled
Make sure all data is saved properly: Name, Rule, Include Subpath, GraphQL, Matching mode (Wildcard, Regex), and HTTP Method ✅

Editor View

In the main view -> CMD+N or New button -> Create a Rule and open the Editor View immediately.
Default Rule data is:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

{
  "status": "ok"
}

Always "Auto Save": The Editor will use the Debouncer to make sure the content is saved after 0.5s.
Don't implement the Manual Save.

When the file is saved -> Check whether or not the Content is correct. Use this http-parser-js. Make sure we create a class for it on the Main, so we can reuse it.

Local File Mode

Support 2 Modes: The user can click on "Select Local File" and select a file. The default location is the Desktop.
After selecting a file, we try to parse and see what mode is:

HTTP Message:

If it's HTTP Message (Write a simple logic to check, e.g The Content has the prefixHTTP/) -> Verify the HTTP Message Syntax

Map Local File
Otherwise, it's a Map Local File -> Load the content -> If it's text-based -> Show it

Text-based => Allow editing the text -> When the auto-saved is triggered -> Make sure you save the new content to a local file.

Binary: Disable the Editing.

Originally created by @NghiaTranUIT on GitHub (Mar 5, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/206 Originally assigned to: @kics223w1 on GitHub. ## Description ![Screenshot 2023-03-05 at 08 27 35](https://user-images.githubusercontent.com/5878421/222937263-492cf5e2-b5e2-4bf5-af9f-d1289919b144.jpg) ⚠️ Please book a video call with @NghiaTranUIT for the demonstration and explanation for each criteria 👍 ⚠️ If you're not sure, please don't assume, just ask 👍 ## Acceptance Criteria - When clicking on the Map Rule Rule -> Open the Editor View -> Display the Matching Rule data and the Raw data in the Editor. - Use Monaco Editor with JSON Highlight ### Matching Rule View - Implement the UI: Make sure this view is reusable ✅ We will use this view in different debugging tools. <img width="930" alt="Screenshot 2023-03-05 at 08 52 24" src="https://user-images.githubusercontent.com/5878421/222937366-ef4ddb66-4be6-4393-8229-94e85ee26922.png"> - As soon as the Name, Rule text field **is ended editing** -> Save immediately to the disk -> The Rule takes effect immediately. The reason is: On the Map Local Editor, we don't have the Save button like other Rules. - If it's a Regex Matching Mode -> Check whether or not the Regex syntax is correct -> Show 🔴 label if need - Show the GraphQL UI if it's enabled - Make sure all data is saved properly: Name, Rule, Include Subpath, GraphQL, Matching mode (Wildcard, Regex), and HTTP Method ✅ ### Editor View - In the main view -> CMD+N or New button -> Create a Rule and open the Editor View immediately. - Default Rule data is: ```json HTTP/1.1 200 OK Content-Type: application/json; charset=utf-8 { "status": "ok" } ``` - Always "Auto Save": The Editor will use the Debouncer to make sure the content is saved after 0.5s. - Don't implement the Manual Save. <img width="209" alt="Screenshot 2023-03-05 at 08 59 44" src="https://user-images.githubusercontent.com/5878421/222937553-47be09c3-7d59-4178-ad19-83541c039e41.png"> - When the file is saved -> Check whether or not the Content is correct. Use this [http-parser-js](https://www.npmjs.com/package/http-parser-js). Make sure we create a class for it on the Main, so we can reuse it. <img width="819" alt="Screenshot 2023-03-05 at 08 59 08" src="https://user-images.githubusercontent.com/5878421/222937627-7d1139d6-dd10-428f-a0bd-bbee76583700.png"> ### Local File Mode - Support 2 Modes: The user can click on "Select Local File" and select a file. The default location is the Desktop. - After selecting a file, we try to parse and see what mode is: 1. HTTP Message: - If it's HTTP Message (Write a simple logic to check, e.g The Content has the prefix`HTTP/`) -> Verify the HTTP Message Syntax <img width="437" alt="Screenshot 2023-03-05 at 09 04 19" src="https://user-images.githubusercontent.com/5878421/222937728-3263532e-26fb-49da-bb99-d8569a33b682.png"> 2. Map Local File Otherwise, it's a Map Local File -> Load the content -> If it's text-based -> Show it - Text-based => Allow editing the text -> When the auto-saved is triggered -> Make sure you save the new content to a local file. <img width="348" alt="Screenshot 2023-03-05 at 09 03 58" src="https://user-images.githubusercontent.com/5878421/222937705-f11c6da5-b643-4c58-8e46-a74d88a5bd49.png"> - Binary: Disable the Editing. <img width="500" alt="Screenshot 2023-03-05 at 09 07 52" src="https://user-images.githubusercontent.com/5878421/222937796-f2ddcf3b-da01-4e64-9b4f-e1a54bac4ba8.png">