-
+ {selected ?
+
+ : null}
{flow.intercepted
?
: null}
diff --git a/web/src/js/components/FlowTable/FlowRow.jsx b/web/src/js/components/FlowTable/FlowRow.jsx
index c3973d515..7c2b14ba2 100644
--- a/web/src/js/components/FlowTable/FlowRow.jsx
+++ b/web/src/js/components/FlowTable/FlowRow.jsx
@@ -4,7 +4,6 @@ import classnames from 'classnames'
import {defaultColumnNames} from './FlowColumns'
import { pure } from '../../utils'
import {getDisplayColumns} from './FlowTableHead'
-import HoverMenu from './HoverMenu'
import { connect } from 'react-redux'
FlowRow.propTypes = {
@@ -28,9 +27,8 @@ function FlowRow({ flow, selected, highlighted, onSelect, displayColumnNames })
return (
onSelect(flow.id)}>
{displayColumns.map(Column => (
-
+
))}
-
)
}
diff --git a/web/src/js/components/FlowTable/HoverMenu.jsx b/web/src/js/components/FlowTable/HoverMenu.jsx
index 8016c9471..f3e531041 100644
--- a/web/src/js/components/FlowTable/HoverMenu.jsx
+++ b/web/src/js/components/FlowTable/HoverMenu.jsx
@@ -1,16 +1,12 @@
-import React, { Component } from 'react'
+import React, { Component, useCallback } from 'react'
import { connect } from 'react-redux'
import { update as updateSettings } from "../../ducks/settings"
import Dropdown from '../common/Dropdown'
+import DropdownSubMenu from '../common/DropdownSubMenu'
-class HoverMenu extends Component {
- constructor(props, context) {
- super(props, context)
- }
-
- onClick(e, example) {
+let SubMenu = ({flow, intercept, updateSettings}) => {
+ const onClick = useCallback((e, example) => {
e.preventDefault();
- let intercept = this.props.intercept
if (intercept && intercept.includes(example)) {
return
}
@@ -19,7 +15,46 @@ class HoverMenu extends Component {
} else {
intercept = `${intercept} | ${example}`
}
- this.props.updateSettings({ intercept })
+ updateSettings({ intercept })
+ }, [intercept])
+
+ return (
+
+ {
+ onClick(e, flow.request.host)
+ }}>
+
+ Intercept {flow.request.host}
+
+ { flow.request.path != "/" ? {
+ onClick(e, flow.request.host + flow.request.path)
+ }}>
+
+ Intercept {flow.request.host + flow.request.path}
+ : null }
+ {
+ onClick(e, `~m POST & ${flow.request.host}`)
+ }}>
+
+ Intercept all POST requests from this host
+
+
+ )
+}
+
+SubMenu = connect(
+ state => ({
+ flow: state.flows.byId[state.flows.selected[0]],
+ intercept: state.settings.intercept,
+ }),
+ {
+ updateSettings,
+ }
+)(SubMenu)
+
+class HoverMenu extends Component {
+ constructor(props, context) {
+ super(props, context)
}
render() {
@@ -28,24 +63,18 @@ class HoverMenu extends Component {
return null
}
return (
-
+ }>
{
- this.onClick(e, flow.request.host)
+ e.preventDefault()
}}>
- Intercept {flow.request.host}
+ Copy as Curl
- { flow.request.path != "/" ? {
- this.onClick(e, flow.request.host + flow.request.path)
- }}>
-
- Intercept {flow.request.host + flow.request.path}
- : null }
{
- this.onClick(e, `~m POST & ${flow.request.host}`)
+ e.preventDefault()
}}>
- Intercept all POST requests from this host
+ Download HAR
)
@@ -55,9 +84,6 @@ class HoverMenu extends Component {
export default connect(
state => ({
flow: state.flows.byId[state.flows.selected[0]],
- intercept: state.settings.intercept,
}),
- {
- updateSettings,
- }
+ null
)(HoverMenu)
\ No newline at end of file
diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx
index 4999b420b..f339bcea0 100644
--- a/web/src/js/components/common/Dropdown.jsx
+++ b/web/src/js/components/common/Dropdown.jsx
@@ -39,15 +39,17 @@ export default class Dropdown extends Component {
}
render() {
- const {dropup, className, btnClass, text, children} = this.props
+ const {dropup, className, btnClass, text, icon, children, submenu} = this.props
return (
)
diff --git a/web/src/js/components/common/DropdownSubMenu.jsx b/web/src/js/components/common/DropdownSubMenu.jsx
new file mode 100644
index 000000000..c1c7656de
--- /dev/null
+++ b/web/src/js/components/common/DropdownSubMenu.jsx
@@ -0,0 +1,73 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Manager, Reference, Popper } from 'react-popper';
+import classnames from 'classnames'
+
+export const Divider = () =>
+
+export default class DropdownSubMenu extends Component {
+
+ static propTypes = {
+ dropup: PropTypes.bool,
+ className: PropTypes.string,
+ }
+
+ static defaultProps = {
+ dropup: false
+ }
+
+ constructor(props, context) {
+ super(props, context)
+ this.state = {open: false}
+ this.close = this.close.bind(this)
+ this.open = this.open.bind(this)
+ }
+
+ close() {
+ this.setState({open: false})
+ document.removeEventListener('click', this.close)
+ }
+
+ open(e) {
+ e.preventDefault()
+ if (this.state.open) {
+ return
+ }
+ e.stopPropagation();
+ this.setState({open: !this.state.open})
+ document.addEventListener('click', this.close)
+ }
+
+ render() {
+ const {text, children} = this.props
+
+ return (
+
+
+
+ {({ ref }) => (
+ {text}
+ )}
+
+
+ {({ ref, style, placement, arrowProps }) => (
+
+ {children.map((item, i) => - {item}
)}
+
+ )}
+
+
+
+ )
+ }
+}