From 51d3fb8ea14423331f39dcf615493dab34ee81a8 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 25 Oct 2017 13:34:41 +0200 Subject: [web] minor fixes --- web/src/js/components/Modal/OptionModal.jsx | 2 +- web/src/js/components/common/Button.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index 82ef8350..fed0048d 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -53,7 +53,7 @@ class PureOptionModal extends Component { } componentWillUnmount(){ - this.props.save() + // this.props.save() } render() { diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index e02ae010..02dab305 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -12,7 +12,7 @@ Button.propTypes = { export default function Button({ onClick, children, icon, disabled, className, title }) { return (
{icon && ( )} -- cgit v1.2.3 From f870ccd949ca46e6a1ca48a6d5e40589fad41ce2 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 25 Oct 2017 14:00:33 +0200 Subject: [web] remove prompt --- web/src/js/components/FlowView.jsx | 3 +- web/src/js/components/Header/FileMenu.jsx | 6 +-- web/src/js/components/Prompt.jsx | 67 ------------------------------- 3 files changed, 4 insertions(+), 72 deletions(-) delete mode 100755 web/src/js/components/Prompt.jsx (limited to 'web/src/js/components') diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx index d03d681a..fbdbb049 100644 --- a/web/src/js/components/FlowView.jsx +++ b/web/src/js/components/FlowView.jsx @@ -5,7 +5,6 @@ import _ from 'lodash' import Nav from './FlowView/Nav' import { Request, Response, ErrorView as Error } from './FlowView/Messages' import Details from './FlowView/Details' -import Prompt from './Prompt' import { selectTab } from '../ducks/ui/flow' @@ -80,7 +79,7 @@ class FlowView extends Component { /> this.tabComponent = tab } flow={flow} updateFlow={updateFlow} /> {this.props.promptOpen && ( - +
fixme
)}
) diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 5cb8e507..1e3b9268 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -20,7 +20,7 @@ FileMenu.onNewClick = (e, clearFlows) => { clearFlows() } -export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) { +export function FileMenu ({clearFlows, loadFlows, saveFlows, openOptions}) { return ( FileMenu.onNewClick(e, clearFlows)}> @@ -38,7 +38,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) { - { e.preventDefault(); openModal(); }}> + { e.preventDefault(); openOptions(); }}>  Options @@ -59,6 +59,6 @@ export default connect( clearFlows: flowsActions.clear, loadFlows: flowsActions.upload, saveFlows: flowsActions.download, - openModal: () => modalActions.setActiveModal('OptionModal'), + openOptions: () => modalActions.setActiveModal('OptionModal'), } )(FileMenu) diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx deleted file mode 100755 index 77b07027..00000000 --- a/web/src/js/components/Prompt.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import ReactDOM from 'react-dom' -import _ from 'lodash' - -import {Key} from '../utils.js' - -Prompt.propTypes = { - options: PropTypes.array.isRequired, - done: PropTypes.func.isRequired, - prompt: PropTypes.string, -} - -export default function Prompt({ prompt, done, options }) { - const opts = [] - - for (let i = 0; i < options.length; i++) { - let opt = options[i] - if (_.isString(opt)) { - let str = opt - while (str.length > 0 && keyTaken(str[0])) { - str = str.substr(1) - } - opt = { text: opt, key: str[0] } - } - if (!opt.text || !opt.key || keyTaken(opt.key)) { - throw 'invalid options' - } - opts.push(opt) - } - - function keyTaken(k) { - return _.map(opts, 'key').includes(k) - } - - function onKeyDown(event) { - event.stopPropagation() - event.preventDefault() - const key = opts.find(opt => Key[opt.key.toUpperCase()] === event.keyCode) - if (!key && event.keyCode !== Key.ESC && event.keyCode !== Key.ENTER) { - return - } - done(key.key || false) - } - - return ( -
-
- {prompt || Select: } - {opts.map(opt => { - const idx = opt.text.indexOf(opt.key) - function onClick(event) { - done(opt.key) - event.stopPropagation() - } - return ( - - {idx !== -1 ? opt.text.substring(0, idx) : opt.text + '('} - {opt.key} - {idx !== -1 ? opt.text.substring(idx + 1) : ')'} - - ) - })} -
-
- ) -} -- cgit v1.2.3 From 42895f4fec0f914d2ca3696c6962830140610e6e Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 25 Oct 2017 15:25:41 +0200 Subject: [web] minor fixes and cleanup --- web/src/js/components/FlowTable.jsx | 20 +++++- web/src/js/components/FlowView.jsx | 100 ++++++++-------------------- web/src/js/components/FlowView/Messages.jsx | 46 ------------- web/src/js/components/MainView.jsx | 55 ++++----------- web/src/js/components/ProxyApp.jsx | 2 +- 5 files changed, 59 insertions(+), 164 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx index 24c1f3a1..e3e3d505 100644 --- a/web/src/js/components/FlowTable.jsx +++ b/web/src/js/components/FlowTable.jsx @@ -1,17 +1,20 @@ import React from 'react' import PropTypes from 'prop-types' import ReactDOM from 'react-dom' +import { connect } from 'react-redux' import shallowEqual from 'shallowequal' import AutoScroll from './helpers/AutoScroll' import { calcVScroll } from './helpers/VirtualScroll' import FlowTableHead from './FlowTable/FlowTableHead' import FlowRow from './FlowTable/FlowRow' import Filt from "../filt/filt" +import * as flowsActions from '../ducks/flows' + class FlowTable extends React.Component { static propTypes = { - onSelect: PropTypes.func.isRequired, + selectFlow: PropTypes.func.isRequired, flows: PropTypes.array.isRequired, rowHeight: PropTypes.number, highlight: PropTypes.string, @@ -107,7 +110,7 @@ class FlowTable extends React.Component { flow={flow} selected={flow === selected} highlighted={isHighlighted(flow)} - onSelect={this.props.onSelect} + onSelect={this.props.selectFlow} /> ))} @@ -118,4 +121,15 @@ class FlowTable extends React.Component { } } -export default AutoScroll(FlowTable) +FlowTable = AutoScroll(FlowTable) + +export default connect( + state => ({ + flows: state.flows.view, + highlight: state.flows.highlight, + selected: state.flows.byId[state.flows.selected[0]], + }), + { + selectFlow: flowsActions.select, + } +)(FlowTable) diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx index fbdbb049..25e7bb9f 100644 --- a/web/src/js/components/FlowView.jsx +++ b/web/src/js/components/FlowView.jsx @@ -3,93 +3,47 @@ import { connect } from 'react-redux' import _ from 'lodash' import Nav from './FlowView/Nav' -import { Request, Response, ErrorView as Error } from './FlowView/Messages' +import { ErrorView as Error, Request, Response } from './FlowView/Messages' import Details from './FlowView/Details' import { selectTab } from '../ducks/ui/flow' -class FlowView extends Component { +export const allTabs = { Request, Response, Error, Details } - static allTabs = { Request, Response, Error, Details } +function FlowView({ flow, tabName, selectTab }) { - constructor(props, context) { - super(props, context) - this.onPromptFinish = this.onPromptFinish.bind(this) - } + // only display available tab names + const tabs = ['request', 'response', 'error'].filter(k => flow[k]) + tabs.push("details") - onPromptFinish(edit) { - this.props.setPrompt(false) - if (edit && this.tabComponent) { - this.tabComponent.edit(edit) + if (tabs.indexOf(tabName) < 0) { + if (tabName === 'response' && flow.error) { + tabName = 'error' + } else if (tabName === 'error' && flow.response) { + tabName = 'response' + } else { + tabName = tabs[0] } } - getPromptOptions() { - switch (this.props.tab) { - - case 'request': - return [ - 'method', - 'url', - { text: 'http version', key: 'v' }, - 'header' - ] - break - - case 'response': - return [ - { text: 'http version', key: 'v' }, - 'code', - 'message', - 'header' - ] - break - - case 'details': - return - - default: - throw 'Unknown tab for edit: ' + this.props.tab - } - } - - render() { - 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) { - active = 'error' - } else if (active === 'error' && flow.response) { - active = 'response' - } else { - active = tabs[0] - } - } - - const Tab = FlowView.allTabs[_.capitalize(active)] - - return ( -
-
- ) - } + const Tab = allTabs[_.capitalize(tabName)] + + return ( +
+
+ ) } export default connect( state => ({ - promptOpen: state.ui.promptOpen, - tab: state.ui.flow.tab + flow: state.flows.byId[state.flows.selected[0]], + tabName: state.ui.flow.tab, }), { selectTab, diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index b69dfb69..c1af36c5 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -120,30 +120,6 @@ export class Request extends Component { ) } - - - edit(k) { - throw "unimplemented" - /* - switch (k) { - case 'm': - this.refs.requestLine.refs.method.focus() - break - case 'u': - this.refs.requestLine.refs.url.focus() - break - case 'v': - this.refs.requestLine.refs.httpVersion.focus() - break - case 'h': - this.refs.headers.edit() - break - default: - throw new Error(`Unimplemented: ${k}`) - } - */ - } - } Request = Message(Request) @@ -189,28 +165,6 @@ export class Response extends Component { ) } - - edit(k) { - throw "unimplemented" - /* - switch (k) { - case 'c': - this.refs.responseLine.refs.status_code.focus() - break - case 'm': - this.refs.responseLine.refs.msg.focus() - break - case 'v': - this.refs.responseLine.refs.httpVersion.focus() - break - case 'h': - this.refs.headers.edit() - break - default: - throw new Error(`'Unimplemented: ${k}`) - } - */ - } } Response = Message(Response) diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index e2bedc88..03bfce7f 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -1,54 +1,27 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import Splitter from './common/Splitter' import FlowTable from './FlowTable' import FlowView from './FlowView' -import * as flowsActions from '../ducks/flows' -class MainView extends Component { - - static propTypes = { - highlight: PropTypes.string, - sort: PropTypes.object, - } +MainView.propTypes = { + hasSelection: PropTypes.bool.isRequired, +} - render() { - const { flows, selectedFlow, highlight } = this.props - return ( -
- - {selectedFlow && [ - , - this.props.updateFlow(selectedFlow, data)} - flow={selectedFlow} - /> - ]} -
- ) - } +function MainView({ hasSelection }) { + return ( +
+ + {hasSelection && } + {hasSelection && } +
+ ) } export default connect( state => ({ - flows: state.flows.view, - filter: state.flows.filter, - highlight: state.flows.highlight, - selectedFlow: state.flows.byId[state.flows.selected[0]], - tab: state.ui.flow.tab, + hasSelection: !!state.flows.byId[state.flows.selected[0]] }), - { - selectFlow: flowsActions.select, - updateFlow: flowsActions.update, - } + {} )(MainView) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 8c3970bc..15384e02 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -20,7 +20,7 @@ class ProxyAppMain extends Component { } render() { - const { showEventLog, location, filter, highlight } = this.props + const { showEventLog } = this.props return (
-- cgit v1.2.3 From c2401e35f4483e68116b8e90bb58b70659ace682 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 25 Oct 2017 15:57:16 +0200 Subject: [web] move options editor from file menu to options menu ultimately we probably want to open the options editor immediately if someone presses "Options". This still requires us to 1. have a nicer editors for common settings. 2. Add a "view event log" button somewhere else, for example in the footer. For now, the options editor is marked as beta, as there are some options you clearly do not want to edit (e.g. wfile). --- web/src/js/components/Header/FileMenu.jsx | 9 +--- web/src/js/components/Header/OptionMenu.jsx | 84 ++++++++++++----------------- 2 files changed, 34 insertions(+), 59 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 1e3b9268..c88efcd8 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -11,7 +11,6 @@ FileMenu.propTypes = { clearFlows: PropTypes.func.isRequired, loadFlows: PropTypes.func.isRequired, saveFlows: PropTypes.func.isRequired, - openModal: PropTypes.func.isRequired, } FileMenu.onNewClick = (e, clearFlows) => { @@ -20,7 +19,7 @@ FileMenu.onNewClick = (e, clearFlows) => { clearFlows() } -export function FileMenu ({clearFlows, loadFlows, saveFlows, openOptions}) { +export function FileMenu ({clearFlows, loadFlows, saveFlows}) { return ( FileMenu.onNewClick(e, clearFlows)}> @@ -38,12 +37,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openOptions}) { - { e.preventDefault(); openOptions(); }}> - -  Options - -  Install Certificates... @@ -59,6 +53,5 @@ export default connect( clearFlows: flowsActions.clear, loadFlows: flowsActions.upload, saveFlows: flowsActions.download, - openOptions: () => modalActions.setActiveModal('OptionModal'), } )(FileMenu) diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index c41c9d99..765129ed 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,74 +1,56 @@ -import React from "react" -import PropTypes from 'prop-types' +import React from "react" import { connect } from "react-redux" -import { SettingsToggle, EventlogToggle } from "./MenuToggle" +import { EventlogToggle, SettingsToggle } from "./MenuToggle" +import Button from "../common/Button" import DocsLink from "../common/DocsLink" import HideInStatic from "../common/HideInStatic"; +import * as modalActions from "../../ducks/ui/modal" OptionMenu.title = 'Options' -export default function OptionMenu() { +function OptionMenu({ openOptions }) { return (
-
-
- HTTP/2.0 - WebSockets - Raw TCP +
+
+ +
+
Options Editor
-
Protocol Support
-
-
-
- - Disable Caching - - - Disable Compression - +
+
+ + Strip cache headers + + + Use host header for display + + + Verify server certificates + +
+
Quick Options
-
HTTP Options
-
- - - Use Host Header - - -
View Options
- { /* - updateSettings({ no_upstream_cert: !settings.no_upstream_cert })} - /> - updateSettings({ stickyauth: !settings.stickyauth ? txt : null })} - /> - updateSettings({ stickycookie: !settings.stickycookie ? txt : null })} - /> - updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })} - /> - */}
) } + +export default connect( + null, + { + openOptions: () => modalActions.setActiveModal('OptionModal') + } +)(OptionMenu) -- cgit v1.2.3 From 9d514330cad64e589987b5e539809ae95d14e137 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 26 Oct 2017 16:34:24 +0200 Subject: [web] adjust tests --- web/src/js/components/FlowTable.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx index e3e3d505..a6381d0d 100644 --- a/web/src/js/components/FlowTable.jsx +++ b/web/src/js/components/FlowTable.jsx @@ -121,7 +121,7 @@ class FlowTable extends React.Component { } } -FlowTable = AutoScroll(FlowTable) +export const PureFlowTable = AutoScroll(FlowTable) export default connect( state => ({ @@ -132,4 +132,4 @@ export default connect( { selectFlow: flowsActions.select, } -)(FlowTable) +)(PureFlowTable) -- cgit v1.2.3