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

[NghiaTranUIT]

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

[NghiaTranUIT]

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

CleanShot.2023-04-10.at.13.56.06.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]

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

CleanShot.2023-04-10.at.14.02.47.mp4

• Make sure the Query is updated with the BreakpointData model

[NghiaTranUIT]

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

[NghiaTranUIT]

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]

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

CleanShot.2023-04-10.at.14.17.22.mp4

[NghiaTranUIT]

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

CleanShot.2023-04-10.at.14.18.39.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