[GH-ISSUE #221] [Breakpoint] #4 Request / Response Editor & Breakpoint View (UI Only) #220

New issue

Open

opened 2026-03-03 19:49:15 +03:00 by kerem · 6 comments

kerem commented 2026-03-03 19:49:15 +03:00

Owner

Copy link

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

Originally assigned to: @kics223w1 on GitHub.

Description

⚠️ Ping @NghiaTranUIT to get the BreakpointData class from macOS. It's responsible to handle all data changes from the Request/Response Editor.

⚠️ This ticket only works on the UI and BreakpointData. We don't actually do the breakpoint to modify the Request/Response (It's for the next ticket)

Waiting Breakpoint List View

• Implement the DataGrid as the Flow Main Table View, which basic columns (See the screenshot)
• No need to support the Customize Columns.
• Show all waiting breakpoints in the Grid
• Select a breakpoint -> Update the Request / Response Editor
• Can select multiple breakpoints, but render the first item in the selected array.

Bottom Bar

• Execute button with dropdown menu
• Cancel button with dropdown menu
• Continue button with dropdown menu
• Work with single or multiple breakpoints
• Disable buttons and menu if there is no selection

Request & Response Editor

• ⚠️ Important: Write a Request Editor in a way that we can reuse it later (For the Compose View)
  

⚠️ Important: Each Tab: Header, Query, Body, ... can be reused in the Request & Response.

• Select a breakpoint -> If it's a Request Breakpoint -> Show the Request Editor (Hide the Response Editor)
• Select a breakpoint -> If it's a Response Response -> Show the Request View (Read-only), and show the Response Editor
  

Header Tab

Originally created by @NghiaTranUIT on GitHub (Apr 10, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/221 Originally assigned to: @kics223w1 on GitHub. ## Description  ⚠️ Ping @NghiaTranUIT to get the `BreakpointData` class from macOS. It's responsible to handle all data changes from the Request/Response Editor. ⚠️ This ticket only works on the UI and `BreakpointData`. We don't actually do the breakpoint to modify the Request/Response (It's for the next ticket) ## Waiting Breakpoint List View - Implement the DataGrid as the Flow Main Table View, which basic columns (See the screenshot) - No need to support the Customize Columns. - Show all waiting breakpoints in the Grid - Select a breakpoint -> Update the Request / Response Editor - Can select multiple breakpoints, but render the first item in the selected array. ## Bottom Bar - Execute button with dropdown menu - Cancel button with dropdown menu - Continue button with dropdown menu - Work with single or multiple breakpoints - Disable buttons and menu if there is no selection ## Request & Response Editor - ⚠️ Important: Write a Request Editor in a way that we can reuse it later (For the Compose View)  ⚠️ Important: Each Tab: Header, Query, Body, ... can be reused in the Request & Response. - Select a breakpoint -> If it's a Request Breakpoint -> Show the Request Editor (Hide the Response Editor) - Select a breakpoint -> If it's a Response Response -> Show the Request View (Read-only), and show the Response Editor  ### Header Tab

kerem added the

✅ Done

enhancement

labels 2026-03-03 19:49:15 +03:00

kerem referenced this issue 2026-03-03 19:49:15 +03:00

[GH-ISSUE #220] [Breakpoint] #3 Breakpoint Server logic #222

kerem commented 2026-03-03 19:49:16 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Header Tab

• When select a Breakpoint, Header Tab Request will render the header of the Request or Response
• Make sure it can be reused in the Request Editor, Response Editor in the Breakpoint, and the Compose View
• It can be reused with other similar tabs, such as Query and Form
  
• Tab to jump to the next field: Left -> Right -> Top -> Down -> Jump to the start when it ends

https://user-images.githubusercontent.com/5878421/230845905-fa5d2bee-0bd9-4b4d-a7bc-102394b7b836.mp4

• Click on the Trash Icon to delete the row
• No Need to implement the auto-completion (We implement it later)
• When the text field is ended editing -> Update the BreakpointData model

On Request Breakpoint

• Make sure the Header is editable

On Response Breakpoint

• Header Tab in the Request is Readonly
• Header Tab in the Response is editable

<!-- gh-comment-id:1501473764 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ### Header Tab - When select a Breakpoint, Header Tab Request will render the header of the Request or Response - Make sure it can be reused in the Request Editor, Response Editor in the Breakpoint, and the Compose View - It can be reused with other similar tabs, such as Query and Form  - Tab to jump to the next field: Left -> Right -> Top -> Down -> Jump to the start when it ends https://user-images.githubusercontent.com/5878421/230845905-fa5d2bee-0bd9-4b4d-a7bc-102394b7b836.mp4 - Click on the Trash Icon to delete the row - No Need to implement the auto-completion (We implement it later) - When the text field is ended editing -> Update the `BreakpointData` model ### On Request Breakpoint - Make sure the Header is editable ### On Response Breakpoint - Header Tab in the Request is Readonly - Header Tab in the Response is editable

kerem commented 2026-03-03 19:49:16 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Query Tab on the Request

• Must Subclass the Header Tab so we can reuse all Header tab logic and behavior.
• When the URL is updated -> It also updates the Query Table
• When the Query is updated (The text field is ended editing) -> Update the URL

https://user-images.githubusercontent.com/5878421/230846518-284cca6d-16da-4197-88cf-209314a9608f.mp4

• Make sure the Query is updated with the BreakpointData model

<!-- gh-comment-id:1501478226 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ### Query Tab on the Request - Must Subclass the Header Tab so we can reuse all Header tab logic and behavior. - When the URL is updated -> It also updates the Query Table - When the Query is updated (The text field is ended editing) -> Update the URL https://user-images.githubusercontent.com/5878421/230846518-284cca6d-16da-4197-88cf-209314a9608f.mp4 - Make sure the Query is updated with the `BreakpointData` model

kerem commented 2026-03-03 19:49:16 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Method and URL

• If it's a Request Breakpoint -> The Method dropdown and URL are editable.
• If it's a Response Breakpoint -> The method and URL are read-only

• Update the URL will update the Query Tab (When the text field is end editing, don't change every time the user is typing)

• Able to select the HTTP Method

• Validate the URL -> Disable the Execute button and show the error icon
  

• Make sure the URL, Method are updated to the BreakpointData model

<!-- gh-comment-id:1501484618 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ## Method and URL - If it's a Request Breakpoint -> The Method dropdown and URL are editable. - If it's a Response Breakpoint -> The method and URL are read-only   - Update the URL will update the Query Tab (When the text field is end editing, don't change every time the user is typing) - Able to select the HTTP Method - Validate the URL -> Disable the Execute button and show the error icon  - Make sure the URL, Method are updated to the `BreakpointData` model

kerem commented 2026-03-03 19:49:16 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Body tab

• The body tab can be reused in the Request Editor and Response Editor
• Show the correct syntax highlighting, maybe JSON, Text, or HTML, ... We can reuse the same logic from the Main Table View
• If it's a Request Breakpoint -> Body tab is read-only
• If it's a Response Breakpoint -> Body Tab is Editable
• Make sure we update the Body to the BreakpointData model

<!-- gh-comment-id:1501487489 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ## Body tab - The body tab can be reused in the Request Editor and Response Editor - Show the correct syntax highlighting, maybe JSON, Text, or HTML, ... We can reuse the same logic from the Main Table View - If it's a Request Breakpoint -> Body tab is read-only - If it's a Response Breakpoint -> Body Tab is Editable - Make sure we update the Body to the `BreakpointData` model

kerem commented 2026-03-03 19:49:16 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Form Tab

• Reuse the Header Tab -> Have all logic + behavior from the Header Tab

• If the Body of the Request is a form format (ContentType = application/x-www-form-urlencoded), show the Form tab
  
  

• Update the Form entry will update the Body Tab

• Update the Body will update the form entry if need

https://user-images.githubusercontent.com/5878421/230848697-4ce2af9e-5f04-4e2a-8f6c-19f2f89adfb5.mp4

<!-- gh-comment-id:1501491270 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ## Form Tab - Reuse the Header Tab -> Have all logic + behavior from the Header Tab - If the Body of the Request is a form format (ContentType = application/x-www-form-urlencoded), show the Form tab   - Update the Form entry will update the Body Tab - Update the Body will update the form entry if need https://user-images.githubusercontent.com/5878421/230848697-4ce2af9e-5f04-4e2a-8f6c-19f2f89adfb5.mp4

kerem commented 2026-03-03 19:49:17 +03:00

Author

Owner

Copy link

@NghiaTranUIT commented on GitHub (Apr 10, 2023):

Other Tab

• If it's a Response Breakpoint -> Show the Other Tab
• Allow the user to change the Status Code
• Show the Reason-Phrase when end editing

https://user-images.githubusercontent.com/5878421/230849154-20171b3f-8b04-4df4-a49e-82e939f5cca4.mp4

• We can use this lib: https://www.npmjs.com/package/http-status to get the Status code Reason Phrase
• Make sure it updates the Breakpoint model

<!-- gh-comment-id:1501493632 --> @NghiaTranUIT commented on GitHub (Apr 10, 2023): ## Other Tab - If it's a Response Breakpoint -> Show the Other Tab - Allow the user to change the Status Code - Show the Reason-Phrase when end editing https://user-images.githubusercontent.com/5878421/230849154-20171b3f-8b04-4df4-a49e-82e939f5cca4.mp4 - We can use this lib: https://www.npmjs.com/package/http-status to get the Status code Reason Phrase - Make sure it updates the `Breakpoint` model

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

feat/new-version

3.12.0

3.11.0

3.10.0

3.4.0

3.5.0

3.6.0

3.7.0

3.8.0

3.9.0

3.3.0

2.25.0

2.24.0

3.2.0

3.0.0

3.1.0

2.26.0

2.27.0

2.23.0

2.22.0

2.21.0

2.20.0

2.19.0

2.18.0

2.17.0

2.16.0

2.15.0

2.14.0

2.13.0

2.12.0

2.11.1

2.11.0

2.10.0

2.9.0

2.8.0

2.7.0

2.6.0

2.5.0

2.4.0

2.3.0

1.9.2

2.0.0

1.9.1

1.8.1

1.9.0

1.8.0

1.7.0

1.6.0

1.5.0

1.4.0

1.3.0

1.2.0

1.1.0

1.0.0

0.10.0

0.9.0

0.8.0

0.6.0

0.5.0

0.4.2

0.4.1

0.4.0

0.3.0

0.1.1

0.2.0

0.1.0

Labels

Clear labels   

Linux

  

bug

  

enhancement

  

enhancement

  

pull-request

Mirrored from GitHub Pull Request

  

question

  

✅ Done

No labels

Linux

bug

enhancement

enhancement

pull-request

question

✅ Done

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/proxyman-windows-linux#220

No description provided.