[Breakpoint] #4 Request / Response Editor & Breakpoint View (UI Only)

NghiaTranUIT commented 1 year ago

Description

CleanShot 2023-04-10 at 13 41 30@2x

⚠️ 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

NghiaTranUIT commented 1 year ago

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

NghiaTranUIT commented 1 year ago

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

NghiaTranUIT commented 1 year ago

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

CleanShot 2023-04-10 at 14 05 43@2x CleanShot 2023-04-10 at 14 06 15@2x

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

NghiaTranUIT commented 1 year ago

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

NghiaTranUIT commented 1 year ago

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