aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js/components')
-rw-r--r--web/src/js/components/FlowView.jsx53
-rw-r--r--web/src/js/components/Header.jsx3
-rw-r--r--web/src/js/components/Header/MainMenu.jsx17
-rw-r--r--web/src/js/components/MainView.jsx135
-rw-r--r--web/src/js/components/ProxyApp.jsx80
5 files changed, 60 insertions, 228 deletions
diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx
index 0ef6e5cd..1a04c915 100644
--- a/web/src/js/components/FlowView.jsx
+++ b/web/src/js/components/FlowView.jsx
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
+import { connect } from 'react-redux'
import _ from 'lodash'
import Nav from './FlowView/Nav'
@@ -6,47 +7,29 @@ import { Request, Response, ErrorView as Error } from './FlowView/Messages'
import Details from './FlowView/Details'
import Prompt from './Prompt'
+import { setPrompt, selectTab } from '../ducks/ui'
+
export default class FlowView extends Component {
static allTabs = { Request, Response, Error, Details }
constructor(props, context) {
super(props, context)
-
- this.state = { prompt: false }
-
- this.closePrompt = this.closePrompt.bind(this)
- this.selectTab = this.selectTab.bind(this)
- }
-
- getTabs() {
- return ['request', 'response', 'error'].filter(k => this.props.flow[k]).concat(['details'])
- }
-
- nextTab(increment) {
- const tabs = this.getTabs()
- // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
- this.selectTab(tabs[(tabs.indexOf(this.props.tab) + increment + tabs.length) % tabs.length])
+ this.onPromptFinish = this.onPromptFinish.bind(this)
}
- selectTab(panel) {
- this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`)
- }
-
- closePrompt(edit) {
- this.setState({ prompt: false })
+ onPromptFinish(edit) {
+ this.props.setPrompt(false)
if (edit && this.tabComponent) {
this.tabComponent.edit(edit)
}
}
- promptEdit() {
- let options
-
+ getPromptOptions() {
switch (this.props.tab) {
case 'request':
- options = [
+ return [
'method',
'url',
{ text: 'http version', key: 'v' },
@@ -55,7 +38,7 @@ export default class FlowView extends Component {
break
case 'response':
- options = [
+ return [
{ text: 'http version', key: 'v' },
'code',
'message',
@@ -69,13 +52,11 @@ export default class FlowView extends Component {
default:
throw 'Unknown tab for edit: ' + this.props.tab
}
-
- this.setState({ prompt: { options, done: this.closePrompt } })
}
render() {
- const tabs = this.getTabs()
let { flow, tab: active, updateFlow } = this.props
+ const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details'])
if (tabs.indexOf(active) < 0) {
if (active === 'response' && flow.error) {
@@ -95,13 +76,23 @@ export default class FlowView extends Component {
flow={flow}
tabs={tabs}
active={active}
- onSelectTab={this.selectTab}
+ onSelectTab={this.props.selectTab}
/>
<Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} />
{this.state.prompt && (
- <Prompt {...this.state.prompt}/>
+ <Prompt options={this.getPromptOptions()} done={this.onPromptFinish} />
)}
</div>
)
}
}
+
+export default connect(
+ state => ({
+ needEdit: state.ui.needEdit,
+ }),
+ {
+ setPrompt,
+ selectTab,
+ }
+)(FlowView)
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index b6ef1cc7..7f1fa69f 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -17,7 +17,7 @@ class Header extends Component {
}
render() {
- const { updateLocation, query, selectedFlow, activeMenu} = this.props
+ const { query, selectedFlow, activeMenu} = this.props
let entries = [...Header.entries]
if(selectedFlow)
@@ -41,7 +41,6 @@ class Header extends Component {
<div className="menu">
<Active
ref="active"
- updateLocation={updateLocation}
query={query}
/>
</div>
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 48fea5a2..27a4be60 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
import FilterInput from './FilterInput'
import { Query } from '../../actions.js'
import { update as updateSettings } from '../../ducks/settings'
+import { updateQuery, setSelectedInput } from '../../ducks/ui'
class MainMenu extends Component {
@@ -12,8 +13,8 @@ class MainMenu extends Component {
static propTypes = {
query: PropTypes.object.isRequired,
settings: PropTypes.object.isRequired,
- updateLocation: PropTypes.func.isRequired,
updateSettings: PropTypes.func.isRequired,
+ updateQuery: PropTypes.func.isRequired,
}
constructor(props, context) {
@@ -22,12 +23,19 @@ class MainMenu extends Component {
this.onHighlightChange = this.onHighlightChange.bind(this)
}
+ componentWillReceiveProps(nextProps) {
+ if(this.refs[nextProps.selectedInput]) {
+ this.refs[nextProps.selectedInput].select()
+ }
+ this.props.setSelectedInput(undefined)
+ }
+
onSearchChange(val) {
- this.props.updateLocation(undefined, { [Query.SEARCH]: val })
+ this.props.updateQuery({ [Query.SEARCH]: val })
}
onHighlightChange(val) {
- this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val })
+ this.props.updateQuery({ [Query.HIGHLIGHT]: val })
}
render() {
@@ -70,9 +78,12 @@ class MainMenu extends Component {
export default connect(
state => ({
settings: state.settings.settings,
+ selectedInput: state.ui.selectedInput
}),
{
updateSettings,
+ updateQuery,
+ setSelectedInput
},
null,
{
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 93f7b299..7bb6f196 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -20,10 +20,6 @@ class MainView extends Component {
* @todo replace with mapStateToProps
*/
componentWillReceiveProps(nextProps) {
- // Update redux store with route changes
- if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) {
- this.props.selectFlow(nextProps.routeParams.flowId)
- }
if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) {
this.props.updateFilter(nextProps.location.query[Query.SEARCH], false)
}
@@ -32,127 +28,6 @@ class MainView extends Component {
}
}
- /**
- * @todo move to actions
- */
- selectFlow(flow) {
- if (flow) {
- this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
- } else {
- this.props.updateLocation('/flows')
- }
- }
-
- /**
- * @todo move to actions
- */
- selectFlowRelative(shift) {
- const { flows, routeParams, selectedFlow } = this.props
- let index = 0
- if (!routeParams.flowId) {
- if (shift < 0) {
- index = flows.length - 1
- }
- } else {
- index = Math.min(
- Math.max(0, flows.indexOf(selectedFlow) + shift),
- flows.length - 1
- )
- }
- this.selectFlow(flows[index])
- }
-
- /**
- * @todo move to actions
- */
- onMainKeyDown(e) {
- var flow = this.props.selectedFlow
- if (e.ctrlKey) {
- return
- }
- switch (e.keyCode) {
- case Key.K:
- case Key.UP:
- this.selectFlowRelative(-1)
- break
- case Key.J:
- case Key.DOWN:
- this.selectFlowRelative(+1)
- break
- case Key.SPACE:
- case Key.PAGE_DOWN:
- this.selectFlowRelative(+10)
- break
- case Key.PAGE_UP:
- this.selectFlowRelative(-10)
- break
- case Key.END:
- this.selectFlowRelative(+1e10)
- break
- case Key.HOME:
- this.selectFlowRelative(-1e10)
- break
- case Key.ESC:
- this.selectFlow(null)
- break
- case Key.H:
- case Key.LEFT:
- if (this.refs.flowDetails) {
- this.refs.flowDetails.nextTab(-1)
- }
- break
- case Key.L:
- case Key.TAB:
- case Key.RIGHT:
- if (this.refs.flowDetails) {
- this.refs.flowDetails.nextTab(+1)
- }
- break
- case Key.C:
- if (e.shiftKey) {
- this.props.clearFlows()
- }
- break
- case Key.D:
- if (flow) {
- if (e.shiftKey) {
- this.props.duplicateFlow(flow)
- } else {
- this.props.removeFlow(flow)
- }
- }
- break
- case Key.A:
- if (e.shiftKey) {
- this.props.acceptAllFlows()
- } else if (flow && flow.intercepted) {
- this.props.acceptFlow(flow)
- }
- break
- case Key.R:
- if (!e.shiftKey && flow) {
- this.props.replayFlow(flow)
- }
- break
- case Key.V:
- if (e.shiftKey && flow && flow.modified) {
- this.props.revertFlow(flow)
- }
- break
- case Key.E:
- if (this.refs.flowDetails) {
- this.refs.flowDetails.promptEdit()
- }
- break
- case Key.SHIFT:
- break
- default:
- console.debug('keydown', e.keyCode)
- return
- }
- e.preventDefault()
- }
-
render() {
const { flows, selectedFlow, highlight } = this.props
return (
@@ -162,7 +37,7 @@ class MainView extends Component {
flows={flows}
selected={selectedFlow}
highlight={highlight}
- onSelect={flow => this.selectFlow(flow)}
+ onSelect={flow => this.props.selectFlow(flow.id)}
/>
{selectedFlow && [
<Splitter key="splitter"/>,
@@ -171,7 +46,6 @@ class MainView extends Component {
ref="flowDetails"
tab={this.props.routeParams.detailTab}
query={this.props.query}
- updateLocation={this.props.updateLocation}
updateFlow={data => this.props.updateFlow(selectedFlow, data)}
flow={selectedFlow}
/>
@@ -193,13 +67,6 @@ export default connect(
updateFilter,
updateHighlight,
updateFlow: flowsActions.update,
- clearFlows: flowsActions.clear,
- duplicateFlow: flowsActions.duplicate,
- removeFlow: flowsActions.remove,
- acceptAllFlows: flowsActions.acceptAll,
- acceptFlow: flowsActions.accept,
- replayFlow: flowsActions.replay,
- revertFlow: flowsActions.revert,
},
undefined,
{ withRef: true }
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 1ac979bc..e8c0e6d6 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -4,6 +4,7 @@ import _ from 'lodash'
import { connect } from 'react-redux'
import { init as appInit, destruct as appDestruct } from '../ducks/app'
+import { onKeyDown } from '../ducks/ui'
import Header from './Header'
import EventLog from './EventLog'
import Footer from './Footer'
@@ -24,13 +25,23 @@ class ProxyAppMain extends Component {
this.focus = this.focus.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
- this.updateLocation = this.updateLocation.bind(this)
}
componentWillMount() {
this.props.appInit()
}
+ componentWillReceiveProps(nextProps) {
+ if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) {
+ return
+ }
+ if(nextProps.flowId) {
+ this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query })
+ } else {
+ this.context.router.replace({ pathname: '/flows', query: nextProps.query })
+ }
+ }
+
/**
* @todo listen to window's key events
*/
@@ -63,72 +74,21 @@ class ProxyAppMain extends Component {
* @todo bind on window
*/
onKeyDown(e) {
- let name = null
-
- switch (e.keyCode) {
- case Key.I:
- name = 'intercept'
- break
- case Key.L:
- name = 'search'
- break
- case Key.H:
- name = 'highlight'
- break
- default:
- let main = this.refs.view
- if (this.refs.view.refs.wrappedInstance) {
- main = this.refs.view.refs.wrappedInstance
- }
- if (main.onMainKeyDown) {
- main.onMainKeyDown(e)
- }
- return // don't prevent default then
+ if (e.ctrlKey) {
+ return
}
-
- if (name) {
- const headerComponent = this.refs.header.refs.wrappedInstance || this.refs.header
- headerComponent.setState({ active: Header.entries[0] }, () => {
- const active = headerComponent.refs.active.refs.wrappedInstance || headerComponent.refs.active
- active.refs[name].select()
- })
- }
-
+ this.props.onKeyDown(e.keyCode)
e.preventDefault()
}
- /**
- * @todo move to actions
- */
- updateLocation(pathname, queryUpdate) {
- if (pathname === undefined) {
- pathname = this.props.location.pathname
- }
- const query = this.props.location.query
- for (const key of Object.keys(queryUpdate || {})) {
- query[key] = queryUpdate[key] || undefined
- }
- this.context.router.replace({ pathname, query })
- }
-
- /**
- * @todo pass in with props
- */
- getQuery() {
- // For whatever reason, react-router always returns the same object, which makes comparing
- // the current props with nextProps impossible. As a workaround, we just clone the query object.
- return _.clone(this.props.location.query)
- }
-
render() {
- const { showEventLog, location, children } = this.props
- const query = this.getQuery()
+ const { showEventLog, location, children, query } = this.props
return (
<div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
- <Header ref="header" updateLocation={this.updateLocation} query={query} />
+ <Header ref="header" query={query} />
{React.cloneElement(
children,
- { ref: 'view', location, query, updateLocation: this.updateLocation }
+ { ref: 'view', location, query }
)}
{showEventLog && (
<EventLog key="eventlog"/>
@@ -143,9 +103,13 @@ export default connect(
state => ({
showEventLog: state.eventLog.visible,
settings: state.settings.settings,
+ query: state.ui.query,
+ panel: state.ui.panel,
+ flowId: state.flows.views.main.selected[0]
}),
{
appInit,
appDestruct,
+ onKeyDown
}
)(ProxyAppMain)