feat: web addon breakpoint frontend

addon/web/client/src/App.js

@@ -4,6 +4,8 @@ import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
 import './App.css'
 
+import BreakPoint from './components/BreakPoint'
+
 import { FlowManager } from './flow'
 import { isTextResponse, getSize } from './utils'
 import { parseMessage, sendMessageEnum, buildMessageEdit, buildMessageMeta } from './message'
@@ -20,10 +22,6 @@ class App extends React.Component {
       flow: null,
 
       flowTab: 'Headers', // Headers, Preview, Response
-
-      // TODO: change to rules
-      interceptUriInputing: '',
-      interceptUri: '',
     }
 
     this.ws = null
@@ -195,7 +193,7 @@ class App extends React.Component {
   }
   
   render() {
-    const { flows, interceptUriInputing, interceptUri } = this.state
+    const { flows } = this.state
     return (
       <div className="main-table-wrap">
         <div className="top-control">
@@ -216,23 +214,10 @@ class App extends React.Component {
             </Form.Control>
           </div>
 
-          <div style={{ display: 'flex', alignItems: 'center' }}>
+          <BreakPoint onSave={rules => {
-            <Form.Control size="sm" placeholder="Set interpect" value={interceptUriInputing} onChange={e => {
+            const msg = buildMessageMeta(sendMessageEnum.changeBreakPointRules, rules)
-              this.setState({ interceptUriInputing: e.target.value || '' })
+            this.ws.send(msg)
-            }}></Form.Control>
+          }} />
-            <Button size="sm" onClick={() => {
-              this.setState({ interceptUri: interceptUriInputing })
-              const rules = []
-              if (interceptUriInputing) {
-                rules.push({ method: 'ALL', url: interceptUriInputing, action: 1 })
-              }
-              const msg = buildMessageMeta(sendMessageEnum.changeBreakPointRules, rules)
-              this.ws.send(msg)
-             }}>Set</Button>
-            {
-              interceptUri ? <span>{`Intercept:${interceptUri}`}</span> : null
-            }
-          </div>
         </div>
 
         <Table striped bordered size="sm">

addon/web/client/src/components/BreakPoint.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+import Modal from 'react-bootstrap/Modal'
+import Form from 'react-bootstrap/Form'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+
+class BreakPoint extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      show: false,
+
+      rule: {
+        method: 'ALL',
+        url: '',
+        action: '1',
+      }
+    }
+
+    this.handleClose = this.handleClose.bind(this)
+    this.handleShow = this.handleShow.bind(this)
+    this.handleSave = this.handleSave.bind(this)
+  }
+
+  handleClose() {
+    this.setState({ show: false })
+  }
+
+  handleShow() {
+    this.setState({ show: true })
+  }
+
+  handleSave() {
+    const { rule } = this.state
+    const rules = []
+    if (rule.url) {
+      rules.push({
+        method: rule.method === 'ALL' ? '' : rule.method,
+        url: rule.url,
+        action: parseInt(rule.action)
+      })
+    }
+
+    this.props.onSave(rules)
+    this.handleClose()
+  }
+
+  render() {
+    const { rule } = this.state
+
+    return (
+      <div>
+        <Button size="sm" onClick={this.handleShow}>BreakPoint</Button>
+
+        <Modal show={this.state.show} onHide={this.handleClose}>
+          <Modal.Header closeButton>
+            <Modal.Title>Set BreakPoint</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Body>
+            <Form>
+              <Form.Group as={Row}>
+                <Form.Label column sm={2}>Method</Form.Label>
+                <Col sm={10}>
+                  <Form.Control as="select" value={rule.method} onChange={e => { this.setState({ rule: { ...rule, method: e.target.value } }) }}>
+                    <option>ALL</option>
+                    <option>GET</option>
+                    <option>POST</option>
+                    <option>PUT</option>
+                    <option>DELETE</option>
+                  </Form.Control>
+                </Col>
+              </Form.Group>
+
+              <Form.Group as={Row}>
+                <Form.Label column sm={2}>URL</Form.Label>
+                <Col sm={10}><Form.Control value={rule.url} onChange={e => { this.setState({ rule: { ...rule, url: e.target.value } }) }} /></Col>
+              </Form.Group>
+
+              <Form.Group as={Row}>
+                <Form.Label column sm={2}>Action</Form.Label>
+                <Col sm={10}>
+                  <Form.Control as="select" value={rule.action} onChange={e => { this.setState({ rule: { ...rule, action: e.target.value } }) }}>
+                    <option value="1">Request</option>
+                    <option value="2">Response</option>
+                    <option value="3">Both</option>
+                  </Form.Control>
+                </Col>
+              </Form.Group>
+            </Form>
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button variant="secondary" onClick={this.handleClose}>
+              Close
+            </Button>
+            <Button variant="primary" onClick={this.handleSave}>
+              Save Changes
+            </Button>
+        </Modal.Footer>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default BreakPoint