From 8f73dc79c073a5fc955b5d13d9eb421f38868bf9 Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 1 Jul 2016 23:43:26 +0800 Subject: [web] ui ducks for content view --- web/src/js/components/ContentView.jsx | 37 ++++++++++++-------- web/src/js/components/ContentView/ViewSelector.jsx | 2 +- web/src/js/ducks/ui.js | 40 ++++++++++++++-------- 3 files changed, 50 insertions(+), 29 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 1533684e..9d11ecd9 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -1,11 +1,13 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import { MessageUtils } from '../flow/utils.js' -import { ViewAuto, ViewImage } from './ContentView/ContentViews' +import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' +import { setContentView } from '../ducks/ui' -export default class ContentView extends Component { +class ContentView extends Component { static propTypes = { // It may seem a bit weird at the first glance: @@ -18,12 +20,7 @@ export default class ContentView extends Component { constructor(props, context) { super(props, context) - this.state = { displayLarge: false, View: ViewAuto } - this.selectView = this.selectView.bind(this) - } - - selectView(View) { - this.setState({ View }) + this.state = { displayLarge: false } } displayLarge() { @@ -31,18 +28,21 @@ export default class ContentView extends Component { } componentWillReceiveProps(nextProps) { + // @todo move to ui ducks if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false, View: ViewAuto }) + this.setState({ displayLarge: false }) } } isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2) + return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) } render() { - const { flow, message } = this.props - const { displayLarge, View } = this.state + const { flow, message, contentView, selectView } = this.props + const { displayLarge } = this.state + + const View = ContentViews[contentView] if (message.contentLength === 0) { return @@ -60,13 +60,13 @@ export default class ContentView extends Component {
{View.textView ? ( - + ) : ( )}
- +   @@ -76,3 +76,12 @@ export default class ContentView extends Component { ) } } + +export default connect( + state => ({ + contentView: state.ui.contentView, + }), + { + selectView: setContentView, + } +)(ContentView) diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index df3a5b83..9b151a5b 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -14,7 +14,7 @@ export default function ViewSelector({ active, message, onSelectView }) { {views.map(View => (
) } } + +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 {
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 && [ , @@ -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 (
-
+
{React.cloneElement( children, - { ref: 'view', location, query, updateLocation: this.updateLocation } + { ref: 'view', location, query } )} {showEventLog && ( @@ -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) diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index f513f49c..bc64ffa8 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -1,11 +1,22 @@ -import { SELECT as SELECT_FLOW } from './views/main' +import { SELECT as SELECT_FLOW, selectRelative as selectFlowRelative } from './views/main' +import { Key } from '../utils.js' +import * as flowsActions from '../ducks/flows' export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' +export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT' +export const UPDATE_QUERY = 'UPDATE_QUERY' +export const SELECT_TAB = 'SELECT_TAB' +export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE' +export const SET_PROMPT = 'SET_PROMPT' const defaultState = { activeMenu: 'Start', + selectedInput: null, + promptOpen: false, contentView: 'ViewAuto', + query: {}, + panel: 'request' } export default function reducer(state = defaultState, action) { @@ -40,6 +51,43 @@ export default function reducer(state = defaultState, action) { contentView: action.contentView, } + case SET_SELECTED_INPUT: + return { + ...state, + selectedInput: action.input + } + + case UPDATE_QUERY: + return { + ...state, + query: { ...state.query, ...action.query } + } + + case SELECT_TAB: + return { + ...state, + panel: action.panel + } + + case SELECT_TAB_RELATIVE: + if (!action.flow || action.shift === null) { + return { + ...state, + panel: 'request' + } + } + const tabs = ['request', 'response', 'error'].filter(k => action.flow[k]).concat(['details']) + return { + ...state, + panel: tabs[(tabs.indexOf(state.panel) + action.shift + tabs.length) % tabs.length] + } + + case SET_PROMPT: + return { + ...state, + promptOpen: action.open, + } + default: return state } @@ -52,3 +100,141 @@ export function setActiveMenu(activeMenu) { export function setContentView(contentView) { return { type: SET_CONTENT_VIEW, contentView } } + +export function setSelectedInput(input) { + return { type: SET_SELECTED_INPUT, input } +} + +export function updateQuery(query) { + return { type: UPDATE_QUERY, query } +} + +export function selectTab(panel) { + return { type: SELECT_TAB, panel } +} + +export function selectTabRelative(shift) { + return (dispatch, getState) => { + let flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + dispatch({ type: SELECT_TAB_RELATIVE, shift, flow }) + } +} + +export function setPrompt(open) { + return { type: SET_PROMPT, open } +} + +export function onKeyDown(key, shiftKey) { + return (dispatch, getState) => { + switch (key) { + + case Key.I: + dispatch(setSelectedInput('intercept')) + break + + case Key.L: + dispatch(setSelectedInput('search')) + break + + case Key.H: + dispatch(setSelectedInput('highlight')) + break + + case Key.K: + case Key.UP: + dispatch(selectFlowRelative(-1)) + break + + case Key.J: + case Key.DOWN: + dispatch(selectFlowRelative(+1)) + break + + case Key.SPACE: + case Key.PAGE_DOWN: + dispatch(selectFlowRelative(+10)) + break + + case Key.PAGE_UP: + dispatch(selectFlowRelative(-10)) + break + + case Key.END: + dispatch(selectFlowRelative(+1e10)) + break + + case Key.HOME: + dispatch(selectFlowRelative(-1e10)) + break + + case Key.ESC: + dispatch(selectFlowRelative(null)) + dispatch(selectTabRelative(null)) + break + + case Key.H: + case Key.LEFT: + dispatch(selectTabRelative(-1)) + break + + case Key.L: + case Key.TAB: + case Key.RIGHT: + dispatch(selectTabRelative(+1)) + break + + case Key.C: + if (shiftKey) { + dispatch(flowsActions.clear()) + } + break + + case Key.D: { + const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + if (!flow) { + return + } + if (shiftKey) { + dispatch(flowsActions.duplicate(flow)) + } else { + dispatch(flowsActions.remove(flow)) + } + break + } + + case Key.A: { + const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + if (shiftKey) { + dispatch(flowsActions.acceptAll()) + } else if (flow && flow.intercepted) { + dispatch(flowsActions.accept(flow)) + } + break + } + + case Key.R: { + const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + if (!shiftKey && flow) { + dispatch(flowsActions.replay(flow)) + } + break + } + + case Key.V: { + const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + if (!shiftKey && flow && flow.modified) { + dispatch(flowsActions.revert(flow)) + } + break + } + + case Key.E: + dispatch(setPrompt(true)) + break + + default: + return () => {} + } + event.preventDefault() + } +} diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/views/main.js index f4968de4..db9de619 100755 --- a/web/src/js/ducks/views/main.js +++ b/web/src/js/ducks/views/main.js @@ -7,6 +7,7 @@ export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER' export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT' export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT' export const SELECT = 'FLOW_VIEWS_MAIN_SELECT' +export const SELECT_RELATIVE = 'SELECT_RELATIVE' const sortKeyFuns = { @@ -52,6 +53,27 @@ export default function reduce(state = defaultState, action) { selected: [action.id] } + case SELECT_RELATIVE: + if(action.shift === null) { + return { + ...state, + selected: [] + } + } + let id = state.selected[0] + let index = 0 + if(!id && action.shift < 0) { + index = state.view.data.length - 1 + } else if(id) { + index = state.view.indexOf[id] + action.shift + index = index < 0 ? 0 : index + index = index > state.view.data.length - 1 ? state.view.data.length - 1 : index + } + return { + ...state, + selected: [state.view.data[index].id] + } + case UPDATE_FILTER: return { ...state, @@ -170,6 +192,15 @@ export function select(id) { } } +/** + * @public + */ +export function selectRelative(shift) { + return (dispatch, getState) => { + dispatch({ type: SELECT_RELATIVE, currentSelection: getState().flows.views.main.selected[0], shift }) + } +} + /** * @private */ -- cgit v1.2.3 From af2319aa6458a92caec2c09386fdf251502c03cb Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 22:28:00 +0800 Subject: [web] listen to window.onKeyDown --- web/src/js/components/Header/FilterInput.jsx | 5 --- web/src/js/components/MainView.jsx | 4 +- web/src/js/components/Prompt.jsx | 9 +---- web/src/js/components/ProxyApp.jsx | 58 ++++------------------------ web/src/js/components/ValueEditor.jsx | 12 +----- 5 files changed, 13 insertions(+), 75 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx index 5b49b788..e421f1a4 100644 --- a/web/src/js/components/Header/FilterInput.jsx +++ b/web/src/js/components/Header/FilterInput.jsx @@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs' export default class FilterInput extends Component { - static contextTypes = { - returnFocus: React.PropTypes.func, - } - constructor(props, context) { super(props, context) @@ -91,7 +87,6 @@ export default class FilterInput extends Component { blur() { ReactDOM.findDOMNode(this.refs.input).blur() - this.context.returnFocus() } select() { diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 7bb6f196..756fa22e 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -69,5 +69,7 @@ export default connect( updateFlow: flowsActions.update, }, undefined, - { withRef: true } + { + withRef: true + } )(MainView) diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index e6564896..262b5ff0 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -4,17 +4,13 @@ import _ from 'lodash' import {Key} from '../utils.js' -Prompt.contextTypes = { - returnFocus: PropTypes.func -} - Prompt.propTypes = { options: PropTypes.array.isRequired, done: PropTypes.func.isRequired, prompt: PropTypes.string, } -export default function Prompt({ prompt, done, options }, context) { +export default function Prompt({ prompt, done, options }) { const opts = [] function keyTaken(k) { @@ -35,7 +31,7 @@ export default function Prompt({ prompt, done, options }, context) { } opts.push(opt) } - + function onKeyDown(event) { event.stopPropagation() event.preventDefault() @@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) { return } done(key.key || false) - context.returnFocus() } return ( diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index e8c0e6d6..62b13932 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -12,23 +12,18 @@ import { Key } from '../utils.js' class ProxyAppMain extends Component { - static childContextTypes = { - returnFocus: PropTypes.func.isRequired, - } - static contextTypes = { router: PropTypes.object.isRequired, } - constructor(props, context) { - super(props, context) - - this.focus = this.focus.bind(this) - this.onKeyDown = this.onKeyDown.bind(this) - } - componentWillMount() { this.props.appInit() + window.addEventListener('keydown', this.props.onKeyDown); + } + + componentWillUnmount() { + this.props.appDestruct() + window.removeEventListener('keydown', this.props.onKeyDown); } componentWillReceiveProps(nextProps) { @@ -42,49 +37,10 @@ class ProxyAppMain extends Component { } } - /** - * @todo listen to window's key events - */ - componentDidMount() { - this.focus() - } - - componentWillUnmount() { - this.props.appDestruct() - } - - /** - * @todo use props - */ - getChildContext() { - return { returnFocus: this.focus } - } - - /** - * @todo remove it - */ - focus() { - document.activeElement.blur() - window.getSelection().removeAllRanges() - ReactDOM.findDOMNode(this).focus() - } - - /** - * @todo move to actions - * @todo bind on window - */ - onKeyDown(e) { - if (e.ctrlKey) { - return - } - this.props.onKeyDown(e.keyCode) - e.preventDefault() - } - render() { const { showEventLog, location, children, query } = this.props return ( -
+
{React.cloneElement( children, diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx index 0316924f..5f1bf2dc 100755 --- a/web/src/js/components/ValueEditor.jsx +++ b/web/src/js/components/ValueEditor.jsx @@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor' export default class ValueEditor extends Component { - static contextTypes = { - returnFocus: PropTypes.func, - } - static propTypes = { content: PropTypes.string.isRequired, onDone: PropTypes.func.isRequired, inline: PropTypes.bool, } - constructor(props) { - super(props) - this.focus = this.focus.bind(this) - } - render() { - var tag = this.props.inline ? "span" : 'div' + var tag = this.props.inline ? 'span' : 'div' return ( this.context.returnFocus()} tag={tag} /> ) -- cgit v1.2.3 From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 22:49:16 +0800 Subject: [web] set display large --- web/src/js/components/ContentView.jsx | 94 ++++++++++--------------- web/src/js/components/ContentView/MetaViews.jsx | 2 +- web/src/js/components/Prompt.jsx | 8 +-- web/src/js/components/ProxyApp.jsx | 13 ++-- web/src/js/ducks/ui.js | 29 ++++++-- 5 files changed, 70 insertions(+), 76 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 9d11ecd9..d6ee5497 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView } from '../ducks/ui' +import { setContentView, setDisplayLarge } from '../ducks/ui' -class ContentView extends Component { +ContentView.propTypes = { + // It may seem a bit weird at the first glance: + // Every view takes the flow and the message as props, e.g. + // + flow: React.PropTypes.object.isRequired, + message: React.PropTypes.object.isRequired, +} - static propTypes = { - // It may seem a bit weird at the first glance: - // Every view takes the flow and the message as props, e.g. - // - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, - } +ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - constructor(props, context) { - super(props, context) +function ContentView({ flow, message, contentView, selectView, displayLarge }) { - this.state = { displayLarge: false } + if (message.contentLength === 0) { + return } - displayLarge() { - this.setState({ displayLarge: true }) + if (message.contentLength === null) { + return } - componentWillReceiveProps(nextProps) { - // @todo move to ui ducks - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false }) - } + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return this.props.setDisplayLarge(true)}/> } - isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - } - - render() { - const { flow, message, contentView, selectView } = this.props - const { displayLarge } = this.state - - const View = ContentViews[contentView] + const View = ContentViews[contentView] - if (message.contentLength === 0) { - return - } - - if (message.contentLength === null) { - return - } - - if (!displayLarge && this.isContentTooLarge(message)) { - return - } - - return ( -
- {View.textView ? ( - - - - ) : ( - - )} - + return ( + + ) } export default connect( state => ({ contentView: state.ui.contentView, + displayLarge: state.ui.displayLarge, }), { selectView: setContentView, + setDisplayLarge, } )(ContentView) diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx index 83720a13..2d064b54 100644 --- a/web/src/js/components/ContentView/MetaViews.jsx +++ b/web/src/js/components/ContentView/MetaViews.jsx @@ -1,5 +1,5 @@ import React from 'react' -import {formatSize} from '../../utils.js' +import { formatSize } from '../../utils.js' export function ContentEmpty({ flow, message }) { return ( diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index 262b5ff0..1c20b1a9 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -13,10 +13,6 @@ Prompt.propTypes = { export default function Prompt({ prompt, done, options }) { const opts = [] - function keyTaken(k) { - return _.map(opts, 'key').includes(k) - } - for (let i = 0; i < options.length; i++) { let opt = options[i] if (_.isString(opt)) { @@ -32,6 +28,10 @@ export default function Prompt({ prompt, done, options }) { opts.push(opt) } + function keyTaken(k) { + return _.map(opts, 'key').includes(k) + } + function onKeyDown(event) { event.stopPropagation() event.preventDefault() diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 62b13932..f0e33330 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -17,21 +17,21 @@ class ProxyAppMain extends Component { } componentWillMount() { - this.props.appInit() + this.props.appInit(this.context.router) window.addEventListener('keydown', this.props.onKeyDown); } componentWillUnmount() { - this.props.appDestruct() + this.props.appDestruct(this.context.router) window.removeEventListener('keydown', this.props.onKeyDown); } componentWillReceiveProps(nextProps) { - if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) { + if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) { return } - if(nextProps.flowId) { - this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query }) + if (nextProps.selectedFlowId) { + this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query }) } else { this.context.router.replace({ pathname: '/flows', query: nextProps.query }) } @@ -58,10 +58,9 @@ class ProxyAppMain extends Component { 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] + selectedFlowId: state.flows.views.main.selected[0] }), { appInit, diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index bc64ffa8..8fb5b735 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -4,15 +4,17 @@ import * as flowsActions from '../ducks/flows' export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' -export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT' -export const UPDATE_QUERY = 'UPDATE_QUERY' -export const SELECT_TAB = 'SELECT_TAB' -export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE' -export const SET_PROMPT = 'SET_PROMPT' +export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT' +export const UPDATE_QUERY = 'UI_UPDATE_QUERY' +export const SELECT_TAB = 'UI_SELECT_TAB' +export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE' +export const SET_PROMPT = 'UI_SET_PROMPT' +export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' const defaultState = { activeMenu: 'Start', selectedInput: null, + displayLarge: false, promptOpen: false, contentView: 'ViewAuto', query: {}, @@ -32,6 +34,7 @@ export default function reducer(state = defaultState, action) { if (action.flowId && !action.currentSelection) { return { ...state, + displayLarge: false, activeMenu: 'Flow', } } @@ -39,11 +42,15 @@ export default function reducer(state = defaultState, action) { if (!action.flowId && state.activeMenu === 'Flow') { return { ...state, + displayLarge: false, activeMenu: 'Start', } } - return state + return { + ...state, + displayLarge: false, + } case SET_CONTENT_VIEW: return { @@ -88,6 +95,12 @@ export default function reducer(state = defaultState, action) { promptOpen: action.open, } + case SET_DISPLAY_LARGE: + return { + ...state, + displayLarge: action.displayLarge, + } + default: return state } @@ -124,6 +137,10 @@ export function setPrompt(open) { return { type: SET_PROMPT, open } } +export function setDisplayLarge(displayLarge) { + return { type: SET_DISPLAY_LARGE, displayLarge } +} + export function onKeyDown(key, shiftKey) { return (dispatch, getState) => { switch (key) { -- cgit v1.2.3 From 7b543dd95c2732be2e704400d9ed04c20d795b56 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 13:43:37 -0400 Subject: [web] bug fix --- web/src/js/components/FlowView.jsx | 4 ++-- web/src/js/components/ProxyApp.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx index 1a04c915..5ba472a5 100644 --- a/web/src/js/components/FlowView.jsx +++ b/web/src/js/components/FlowView.jsx @@ -79,7 +79,7 @@ export default class FlowView extends Component { onSelectTab={this.props.selectTab} /> this.tabComponent = tab } flow={flow} updateFlow={updateFlow} /> - {this.state.prompt && ( + {this.props.promptOpen && ( )}
@@ -89,7 +89,7 @@ export default class FlowView extends Component { export default connect( state => ({ - needEdit: state.ui.needEdit, + promptOpen: state.ui.promptOpen, }), { setPrompt, diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index e8c0e6d6..28a91ff3 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -77,7 +77,7 @@ class ProxyAppMain extends Component { if (e.ctrlKey) { return } - this.props.onKeyDown(e.keyCode) + this.props.onKeyDown(e.keyCode, e.shiftKey) e.preventDefault() } -- cgit v1.2.3 From 666017125ac9dc38200753cdbe86eeb21bd5864a Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 8 Jul 2016 21:43:18 +0800 Subject: [web] add tests for main view and ui --- web/src/js/__tests__/ducks/ui.js | 120 ++++++++++++++++++++++--------- web/src/js/__tests__/ducks/views/main.js | 82 +++++++++++++++++++++ web/src/js/components/ContentView.jsx | 9 +-- 3 files changed, 172 insertions(+), 39 deletions(-) create mode 100644 web/src/js/__tests__/ducks/views/main.js (limited to 'web/src') diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js index 2388a9ad..289192d9 100644 --- a/web/src/js/__tests__/ducks/ui.js +++ b/web/src/js/__tests__/ducks/ui.js @@ -1,36 +1,86 @@ -jest.unmock("../../ducks/ui"); -// @todo fix it ( this is why I don't like to add tests until our architecture is stable :P ) -jest.unmock("../../ducks/views/main"); - -import reducer, { setActiveMenu } from '../../ducks/ui'; -import { SELECT } from '../../ducks/views/main'; - -describe("ui reducer", () => { - it("should return the initial state", () => { - expect(reducer(undefined, {})).toEqual({ activeMenu: 'Start'}) - }), - it("should return the state for view", () => { - expect(reducer(undefined, setActiveMenu('View'))).toEqual({ activeMenu: 'View'}) - }), - it("should change the state to Start when deselecting a flow and we a currently at the flow tab", () => { - expect(reducer({activeMenu: 'Flow'}, - { type: SELECT, - currentSelection: '1', - flowId : undefined - })).toEqual({ activeMenu: 'Start'}) - }), - it("should change the state to Flow when we selected a flow and no flow was selected before", () => { - expect(reducer({activeMenu: 'Start'}, - { type: SELECT, - currentSelection: undefined, - flowId : '1' - })).toEqual({ activeMenu: 'Flow'}) - }), - it("should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before", () => { - expect(reducer({activeMenu: 'Options'}, - { type: SELECT, - currentSelection: '1', - flowId : '2' - })).toEqual({ activeMenu: 'Options'}) +jest.unmock('lodash') +jest.unmock('redux') +jest.unmock('redux-thunk') +jest.unmock('../../ducks/ui') +jest.unmock('../../ducks/views/main') + +import _ from 'lodash' +import thunk from 'redux-thunk' +import { applyMiddleware, createStore, combineReducers } from 'redux' +import reducer, { setActiveMenu, selectTabRelative } from '../../ducks/ui' +import { SELECT } from '../../ducks/views/main' + +describe('ui reducer', () => { + it('should return the initial state', () => { + expect(reducer(undefined, {}).activeMenu).toEqual('Start') }) -}); + + it('should return the state for view', () => { + expect(reducer(undefined, setActiveMenu('View')).activeMenu).toEqual('View') + }) + + it('should change the state to Start when deselecting a flow and we a currently at the flow tab', () => { + expect(reducer({ activeMenu: 'Flow' }, { + type: SELECT, + currentSelection: 1, + flowId : undefined, + }).activeMenu).toEqual('Start') + }) + + it('should change the state to Flow when we selected a flow and no flow was selected before', () => { + expect(reducer({ activeMenu: 'Start' }, { + type: SELECT, + currentSelection: undefined, + flowId : 1, + }).activeMenu).toEqual('Flow') + }) + + it('should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before', () => { + expect(reducer({activeMenu: 'Options'}, { + type: SELECT, + currentSelection: 1, + flowId : '2', + }).activeMenu).toEqual('Options') + }) + + describe('select tab relative', () => { + + it('should select tab according to flow properties', () => { + const store = createTestStore(makeState([{ id: 1 }], 1)) + store.dispatch(selectTabRelative(1)) + expect(store.getState().ui.panel).toEqual('details') + }) + + it('should select last tab when first tab is selected', () => { + const store = createTestStore(makeState([{ id: 1, request: true, response: true, error: true }], 1)) + store.dispatch(selectTabRelative(-1)) + expect(store.getState().ui.panel).toEqual('details') + }) + + }) +}) + +function createTestStore(state) { + return createStore( + combineReducers({ ui: reducer, flows: (state = {}) => state }), + state, + applyMiddleware(thunk) + ) +} + +function makeState(flows, selected) { + return { + flows: { + list: { + data: flows, + byId: _.fromPairs(flows.map(flow => [flow.id, flow])), + indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])), + }, + views: { + main: { + selected: [selected], + }, + }, + }, + } +} diff --git a/web/src/js/__tests__/ducks/views/main.js b/web/src/js/__tests__/ducks/views/main.js new file mode 100644 index 00000000..0edbf68f --- /dev/null +++ b/web/src/js/__tests__/ducks/views/main.js @@ -0,0 +1,82 @@ +jest.unmock('../../../ducks/views/main'); +jest.unmock('../../../ducks/utils/view'); +jest.unmock('redux-thunk') +jest.unmock('redux') + +import reduce, { selectRelative } from '../../../ducks/views/main'; +import thunk from 'redux-thunk' +import { applyMiddleware, createStore, combineReducers } from 'redux' + +describe('main reduce', () => { + + describe('select previous', () => { + + it('should not changed when first flow is selected', () => { + const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] + const store = createTestStore(makeState(flows, 1)) + store.dispatch(selectRelative(-1)) + expect(store.getState().flows.views.main.selected).toEqual([1]) + }) + + it('should select last flow if no flow is selected', () => { + const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] + const store = createTestStore(makeState(flows)) + store.dispatch(selectRelative(-1)) + expect(store.getState().flows.views.main.selected).toEqual([4]) + }) + + }) + + describe('select next', () => { + + it('should not change when last flow is selected', () => { + const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] + const store = createTestStore(makeState(flows, 4)) + store.dispatch(selectRelative(1)) + expect(store.getState().flows.views.main.selected).toEqual([4]) + }) + + it('should select first flow if no flow is selected', () => { + const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] + const store = createTestStore(makeState(flows, 1)) + store.dispatch(selectRelative(1)) + expect(store.getState().flows.views.main.selected).toEqual([2]) + }) + + }) +}) + +function createTestStore(defaultState) { + return createStore( + (state = defaultState, action) => ({ + flows: { + ...state.flows, + views: { + main: reduce(state.flows.views.main, action) + } + } + }), + defaultState, + applyMiddleware(thunk) + ) +} + +function makeState(flows, selected) { + const list = { + data: flows, + byId: _.fromPairs(flows.map(flow => [flow.id, flow])), + indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])), + } + + return { + flows: { + list, + views: { + main: { + selected: [selected], + view: list, + } + } + } + } +} diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index d6ee5497..6a982a5d 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -17,18 +17,19 @@ ContentView.propTypes = { ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) -function ContentView({ flow, message, contentView, selectView, displayLarge }) { +function ContentView(props) { + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props if (message.contentLength === 0) { - return + return } if (message.contentLength === null) { - return + return } if (!displayLarge && ContentView.isContentTooLarge(message)) { - return this.props.setDisplayLarge(true)}/> + return setDisplayLarge(true)}/> } const View = ContentViews[contentView] -- cgit v1.2.3 From 2624911d75670afaff8631943d567bfa2b42d7b8 Mon Sep 17 00:00:00 2001 From: Clemens Brunner Date: Tue, 12 Jul 2016 23:52:33 +0200 Subject: fixed bug (#1342) fix minor mitmweb issues --- web/src/js/components/Header/FlowMenu.jsx | 4 ++-- web/src/js/ducks/ui.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 8d13dd6a..9855cde3 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -15,11 +15,11 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev return (
-
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index f8234fdb..4de460aa 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -13,8 +13,8 @@ export default function reducer(state = defaultState, action) { activeMenu: action.activeMenu } case SELECT: - let isNewSelect = (action.flowId && !action.currentSelection) - let isDeselect = (!action.flowId && action.currentSelection) + let isNewSelect = (action.id && !action.currentSelection) + let isDeselect = (!action.id && action.currentSelection) if(isNewSelect) { return { ...state, -- cgit v1.2.3 From 5034a6232c715b332ede160babdd7e875b25ca23 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 18 Jul 2016 21:23:50 -0700 Subject: web: remove SELECT_RELATIVE --- web/src/js/__tests__/ducks/ui.js | 2 ++ web/src/js/__tests__/ducks/views/main.js | 1 + web/src/js/ducks/views/main.js | 35 +++++++++++--------------------- 3 files changed, 15 insertions(+), 23 deletions(-) (limited to 'web/src') diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js index 289192d9..ae2b75b9 100644 --- a/web/src/js/__tests__/ducks/ui.js +++ b/web/src/js/__tests__/ducks/ui.js @@ -68,6 +68,8 @@ function createTestStore(state) { ) } + +// TODO: We should not duplicate our reducer logic here. function makeState(flows, selected) { return { flows: { diff --git a/web/src/js/__tests__/ducks/views/main.js b/web/src/js/__tests__/ducks/views/main.js index 0edbf68f..0255f6ce 100644 --- a/web/src/js/__tests__/ducks/views/main.js +++ b/web/src/js/__tests__/ducks/views/main.js @@ -61,6 +61,7 @@ function createTestStore(defaultState) { ) } +// TODO: We should not duplicate our reducer logic here. function makeState(flows, selected) { const list = { data: flows, diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/views/main.js index db9de619..0c401716 100755 --- a/web/src/js/ducks/views/main.js +++ b/web/src/js/ducks/views/main.js @@ -7,7 +7,6 @@ export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER' export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT' export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT' export const SELECT = 'FLOW_VIEWS_MAIN_SELECT' -export const SELECT_RELATIVE = 'SELECT_RELATIVE' const sortKeyFuns = { @@ -53,27 +52,6 @@ export default function reduce(state = defaultState, action) { selected: [action.id] } - case SELECT_RELATIVE: - if(action.shift === null) { - return { - ...state, - selected: [] - } - } - let id = state.selected[0] - let index = 0 - if(!id && action.shift < 0) { - index = state.view.data.length - 1 - } else if(id) { - index = state.view.indexOf[id] + action.shift - index = index < 0 ? 0 : index - index = index > state.view.data.length - 1 ? state.view.data.length - 1 : index - } - return { - ...state, - selected: [state.view.data[index].id] - } - case UPDATE_FILTER: return { ...state, @@ -197,7 +175,18 @@ export function select(id) { */ export function selectRelative(shift) { return (dispatch, getState) => { - dispatch({ type: SELECT_RELATIVE, currentSelection: getState().flows.views.main.selected[0], shift }) + let currentSelection = getState().flows.views.main.selected[0] + let id + if (shift === null){ + id = null + } else if (!currentSelection) { + id = (action.shift < 0) ? 0 : state.view.data.length - 1 + } else { + id = state.view.indexOf[currentSelection] + action.shift + id = Math.max(id, 0) + id = Math.min(id, state.view.data.length - 1) + } + dispatch({ type: SELECT, currentSelection, id }) } } -- cgit v1.2.3 From f356a84430f6606b2d7157eefd8e4a100fdd5dfb Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 19 Jul 2016 03:13:39 -0700 Subject: simplify web ui ducks --- web/src/js/__tests__/ducks/flowView.js | 67 +++++++ web/src/js/__tests__/ducks/flows.js | 30 +++ web/src/js/__tests__/ducks/tutils.js | 12 ++ web/src/js/__tests__/ducks/ui.js | 82 ++------ web/src/js/__tests__/ducks/utils/list.js | 2 +- web/src/js/__tests__/ducks/utils/view.js | 14 +- web/src/js/__tests__/ducks/views/main.js | 83 -------- web/src/js/app.jsx | 2 +- web/src/js/components/FlowTable/FlowTableHead.jsx | 6 +- web/src/js/components/Header.jsx | 6 +- web/src/js/components/Header/FlowMenu.jsx | 2 +- web/src/js/components/MainView.jsx | 13 +- web/src/js/components/ProxyApp.jsx | 2 +- web/src/js/components/ValueEditor/EditorBase.jsx | 1 - web/src/js/ducks/eventLog.js | 4 +- web/src/js/ducks/flowView.js | 195 +++++++++++++++++++ web/src/js/ducks/flows.js | 68 ++++--- web/src/js/ducks/index.js | 2 + web/src/js/ducks/ui.js | 85 ++++----- web/src/js/ducks/utils/list.js | 8 +- web/src/js/ducks/utils/view.js | 24 +-- web/src/js/ducks/views.js | 40 ---- web/src/js/ducks/views/main.js | 222 ---------------------- web/src/js/ducks/websocket.js | 2 +- 24 files changed, 444 insertions(+), 528 deletions(-) create mode 100644 web/src/js/__tests__/ducks/flowView.js create mode 100644 web/src/js/__tests__/ducks/flows.js create mode 100644 web/src/js/__tests__/ducks/tutils.js delete mode 100644 web/src/js/__tests__/ducks/views/main.js create mode 100644 web/src/js/ducks/flowView.js delete mode 100755 web/src/js/ducks/views.js delete mode 100755 web/src/js/ducks/views/main.js (limited to 'web/src') diff --git a/web/src/js/__tests__/ducks/flowView.js b/web/src/js/__tests__/ducks/flowView.js new file mode 100644 index 00000000..d5d9a6d9 --- /dev/null +++ b/web/src/js/__tests__/ducks/flowView.js @@ -0,0 +1,67 @@ +jest.unmock('../../ducks/flows') +jest.unmock('../../ducks/flowView') +jest.unmock('../../ducks/utils/view') +jest.unmock('../../ducks/utils/list') +jest.unmock('./tutils') + +import { createStore } from './tutils' + +import flows, * as flowActions from '../../ducks/flows' +import flowView, * as flowViewActions from '../../ducks/flowView' + + +function testStore() { + let store = createStore({ + flows, + flowView + }) + for (let i of [1, 2, 3, 4]) { + store.dispatch( + flowActions.addFlow({ id: i }) + ) + } + return store +} + +describe('select relative', () => { + + function testSelect(start, relative, result) { + const store = testStore() + store.dispatch(flowActions.select(start)) + expect(store.getState().flows.selected).toEqual(start ? [start] : []) + store.dispatch(flowViewActions.selectRelative(relative)) + expect(store.getState().flows.selected).toEqual([result]) + } + + describe('previous', () => { + + it('should select the previous flow', () => { + testSelect(3, -1, 2) + }) + + it('should not changed when first flow is selected', () => { + testSelect(1, -1, 1) + }) + + it('should select first flow if no flow is selected', () => { + testSelect(undefined, -1, 1) + }) + + }) + + describe('next', () => { + + it('should select the next flow', () => { + testSelect(2, 1, 3) + }) + + it('should not changed when last flow is selected', () => { + testSelect(4, 1, 4) + }) + + it('should select last flow if no flow is selected', () => { + testSelect(undefined, 1, 4) + }) + + }) +}) diff --git a/web/src/js/__tests__/ducks/flows.js b/web/src/js/__tests__/ducks/flows.js new file mode 100644 index 00000000..2b261cb1 --- /dev/null +++ b/web/src/js/__tests__/ducks/flows.js @@ -0,0 +1,30 @@ +jest.unmock('../../ducks/flows'); + +import reduceFlows, * as flowActions from '../../ducks/flows' + + +describe('select flow', () => { + + let state = reduceFlows(undefined, {}) + for (let i of [1, 2, 3, 4]) { + state = reduceFlows(state, flowActions.addFlow({ id: i })) + } + + it('should be possible to select a single flow', () => { + expect(reduceFlows(state, flowActions.select(2))).toEqual( + { + ...state, + selected: [2], + } + ) + }) + + it('should be possible to deselect a flow', () => { + expect(reduceFlows({ ...state, selected: [1] }, flowActions.select())).toEqual( + { + ...state, + selected: [], + } + ) + }) +}) diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js new file mode 100644 index 00000000..90a21b78 --- /dev/null +++ b/web/src/js/__tests__/ducks/tutils.js @@ -0,0 +1,12 @@ +jest.unmock('redux') +jest.unmock('redux-thunk') + +import { combineReducers, applyMiddleware, createStore as createReduxStore } from 'redux' +import thunk from 'redux-thunk' + +export function createStore(parts) { + return createReduxStore( + combineReducers(parts), + applyMiddleware(...[thunk]) + ) +} diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js index ae2b75b9..d3242815 100644 --- a/web/src/js/__tests__/ducks/ui.js +++ b/web/src/js/__tests__/ducks/ui.js @@ -1,14 +1,8 @@ -jest.unmock('lodash') -jest.unmock('redux') -jest.unmock('redux-thunk') jest.unmock('../../ducks/ui') -jest.unmock('../../ducks/views/main') +jest.unmock('../../ducks/flows') -import _ from 'lodash' -import thunk from 'redux-thunk' -import { applyMiddleware, createStore, combineReducers } from 'redux' -import reducer, { setActiveMenu, selectTabRelative } from '../../ducks/ui' -import { SELECT } from '../../ducks/views/main' +import reducer, { setActiveMenu } from '../../ducks/ui' +import * as flowActions from '../../ducks/flows' describe('ui reducer', () => { it('should return the initial state', () => { @@ -20,69 +14,23 @@ describe('ui reducer', () => { }) it('should change the state to Start when deselecting a flow and we a currently at the flow tab', () => { - expect(reducer({ activeMenu: 'Flow' }, { - type: SELECT, - currentSelection: 1, - flowId : undefined, - }).activeMenu).toEqual('Start') + expect(reducer( + { activeMenu: 'Flow', isFlowSelected: true }, + flowActions.select(undefined)).activeMenu + ).toEqual('Start') }) it('should change the state to Flow when we selected a flow and no flow was selected before', () => { - expect(reducer({ activeMenu: 'Start' }, { - type: SELECT, - currentSelection: undefined, - flowId : 1, - }).activeMenu).toEqual('Flow') + expect(reducer( + { activeMenu: 'Start', isFlowSelected: false }, + flowActions.select(1)).activeMenu + ).toEqual('Flow') }) it('should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before', () => { - expect(reducer({activeMenu: 'Options'}, { - type: SELECT, - currentSelection: 1, - flowId : '2', - }).activeMenu).toEqual('Options') - }) - - describe('select tab relative', () => { - - it('should select tab according to flow properties', () => { - const store = createTestStore(makeState([{ id: 1 }], 1)) - store.dispatch(selectTabRelative(1)) - expect(store.getState().ui.panel).toEqual('details') - }) - - it('should select last tab when first tab is selected', () => { - const store = createTestStore(makeState([{ id: 1, request: true, response: true, error: true }], 1)) - store.dispatch(selectTabRelative(-1)) - expect(store.getState().ui.panel).toEqual('details') - }) - + expect(reducer( + { activeMenu: 'Options', isFlowSelected: true }, + flowActions.select(1) + ).activeMenu).toEqual('Options') }) }) - -function createTestStore(state) { - return createStore( - combineReducers({ ui: reducer, flows: (state = {}) => state }), - state, - applyMiddleware(thunk) - ) -} - - -// TODO: We should not duplicate our reducer logic here. -function makeState(flows, selected) { - return { - flows: { - list: { - data: flows, - byId: _.fromPairs(flows.map(flow => [flow.id, flow])), - indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])), - }, - views: { - main: { - selected: [selected], - }, - }, - }, - } -} diff --git a/web/src/js/__tests__/ducks/utils/list.js b/web/src/js/__tests__/ducks/utils/list.js index 8cae91ec..72d162f2 100644 --- a/web/src/js/__tests__/ducks/utils/list.js +++ b/web/src/js/__tests__/ducks/utils/list.js @@ -27,7 +27,7 @@ describe('list reduce', () => { { id: 1, val: 1 }, { id: 2, val: 3 } ]) - expect(reduce(state, list.update(2, { id: 2, val: 3 }))).toEqual(result) + expect(reduce(state, list.update({ id: 2, val: 3 }))).toEqual(result) }) it('should remove item', () => { diff --git a/web/src/js/__tests__/ducks/utils/view.js b/web/src/js/__tests__/ducks/utils/view.js index 1b07f723..f0b147da 100644 --- a/web/src/js/__tests__/ducks/utils/view.js +++ b/web/src/js/__tests__/ducks/utils/view.js @@ -14,7 +14,7 @@ describe('view reduce', () => { const result = createState([ { id: 1 } ]) - expect(reduce(state, view.updateFilter(state, item => item.id === 1))).toEqual(result) + expect(reduce(state, view.updateFilter(state.data, item => item.id === 1))).toEqual(result) }) it('should sort items', () => { @@ -72,7 +72,7 @@ describe('view reduce', () => { { id: 1, val: 1 }, { id: 2, val: 3 } ]) - expect(reduce(state, view.update(2, { id: 2, val: 3 }))).toEqual(result) + expect(reduce(state, view.update({ id: 2, val: 3 }))).toEqual(result) }) it('should sort updated item', () => { @@ -84,7 +84,7 @@ describe('view reduce', () => { { id: 2, val: 3 }, { id: 1, val: 1 } ]) - expect(reduce(state, view.update(2, { id: 2, val: 3 }, undefined, (a, b) => b.id - a.id))).toEqual(result) + expect(reduce(state, view.update({ id: 2, val: 3 }, undefined, (a, b) => b.id - a.id))).toEqual(result) }) it('should filter updated item', () => { @@ -96,7 +96,7 @@ describe('view reduce', () => { { id: 1, val: 1 } ]) result.indexOf[2] = null - expect(reduce(state, view.update(2, { id: 2, val: 3 }, i => i.id === i.val))).toEqual(result) + expect(reduce(state, view.update({ id: 2, val: 3 }, i => i.id === i.val))).toEqual(result) }) it('should remove item', () => { @@ -119,7 +119,7 @@ describe('view reduce', () => { const result = createState([ { id: 1 } ]) - expect(reduce(state, view.receive({ data: [{ id: 1 }] }))).toEqual(result) + expect(reduce(state, view.receive([{ id: 1 }]))).toEqual(result) }) it('should sort received items', () => { @@ -131,7 +131,7 @@ describe('view reduce', () => { { id: 2 }, { id: 1 } ]) - expect(reduce(state, view.receive({ data: [{ id: 1 }, { id: 2 }] }, undefined, (a, b) => b.id - a.id))).toEqual(result) + expect(reduce(state, view.receive([{ id: 1 }, { id: 2 }], undefined, (a, b) => b.id - a.id))).toEqual(result) }) it('should filter received', () => { @@ -142,7 +142,7 @@ describe('view reduce', () => { const result = createState([ { id: 1 } ]) - expect(reduce(state, view.receive({ data: [{ id: 1 }, { id: 2 }] }, i => i.id === 1))).toEqual(result) + expect(reduce(state, view.receive([{ id: 1 }, { id: 2 }], i => i.id === 1))).toEqual(result) }) }) diff --git a/web/src/js/__tests__/ducks/views/main.js b/web/src/js/__tests__/ducks/views/main.js deleted file mode 100644 index 0255f6ce..00000000 --- a/web/src/js/__tests__/ducks/views/main.js +++ /dev/null @@ -1,83 +0,0 @@ -jest.unmock('../../../ducks/views/main'); -jest.unmock('../../../ducks/utils/view'); -jest.unmock('redux-thunk') -jest.unmock('redux') - -import reduce, { selectRelative } from '../../../ducks/views/main'; -import thunk from 'redux-thunk' -import { applyMiddleware, createStore, combineReducers } from 'redux' - -describe('main reduce', () => { - - describe('select previous', () => { - - it('should not changed when first flow is selected', () => { - const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] - const store = createTestStore(makeState(flows, 1)) - store.dispatch(selectRelative(-1)) - expect(store.getState().flows.views.main.selected).toEqual([1]) - }) - - it('should select last flow if no flow is selected', () => { - const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] - const store = createTestStore(makeState(flows)) - store.dispatch(selectRelative(-1)) - expect(store.getState().flows.views.main.selected).toEqual([4]) - }) - - }) - - describe('select next', () => { - - it('should not change when last flow is selected', () => { - const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] - const store = createTestStore(makeState(flows, 4)) - store.dispatch(selectRelative(1)) - expect(store.getState().flows.views.main.selected).toEqual([4]) - }) - - it('should select first flow if no flow is selected', () => { - const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }] - const store = createTestStore(makeState(flows, 1)) - store.dispatch(selectRelative(1)) - expect(store.getState().flows.views.main.selected).toEqual([2]) - }) - - }) -}) - -function createTestStore(defaultState) { - return createStore( - (state = defaultState, action) => ({ - flows: { - ...state.flows, - views: { - main: reduce(state.flows.views.main, action) - } - } - }), - defaultState, - applyMiddleware(thunk) - ) -} - -// TODO: We should not duplicate our reducer logic here. -function makeState(flows, selected) { - const list = { - data: flows, - byId: _.fromPairs(flows.map(flow => [flow.id, flow])), - indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])), - } - - return { - flows: { - list, - views: { - main: { - selected: [selected], - view: list, - } - } - } - } -} diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx index bd2d3d58..726b2ae1 100644 --- a/web/src/js/app.jsx +++ b/web/src/js/app.jsx @@ -12,7 +12,7 @@ import { add as addLog } from './ducks/eventLog' const middlewares = [thunk]; -if (process.env.NODE_ENV === 'development') { +if (process.env.NODE_ENV !== 'production') { const createLogger = require('redux-logger'); middlewares.push(createLogger()); } diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx index f65369bd..50242737 100644 --- a/web/src/js/components/FlowTable/FlowTableHead.jsx +++ b/web/src/js/components/FlowTable/FlowTableHead.jsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux' import classnames from 'classnames' import columns from './FlowColumns' -import { updateSort } from '../../ducks/views/main' +import { updateSort } from '../../ducks/flowView' FlowTableHead.propTypes = { updateSort: PropTypes.func.isRequired, @@ -29,8 +29,8 @@ function FlowTableHead({ sortColumn, sortDesc, updateSort }) { export default connect( state => ({ - sortDesc: state.flows.views.main.sort.desc, - sortColumn: state.flows.views.main.sort.column, + sortDesc: state.flowView.sort.desc, + sortColumn: state.flowView.sort.column, }), { updateSort diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 7f1fa69f..5de885ae 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -17,10 +17,10 @@ class Header extends Component { } render() { - const { query, selectedFlow, activeMenu} = this.props + const { query, selectedFlowId, activeMenu} = this.props let entries = [...Header.entries] - if(selectedFlow) + if(selectedFlowId) entries.push(FlowMenu) const Active = _.find(entries, (e) => e.title == activeMenu) @@ -51,7 +51,7 @@ class Header extends Component { export default connect( state => ({ - selectedFlow: state.flows.views.main.selected[0], + selectedFlowId: state.flows.selected[0], activeMenu: state.ui.activeMenu, }), { diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 9855cde3..bdd30d5e 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -29,7 +29,7 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev export default connect( state => ({ - flow: state.flows.list.byId[state.flows.views.main.selected[0]], + flow: state.flows.byId[state.flows.selected[0]], }), { acceptFlow: flowsActions.accept, diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 756fa22e..b0bbf70e 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -1,12 +1,11 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import { Query } from '../actions.js' -import { Key } from '../utils.js' import Splitter from './common/Splitter' import FlowTable from './FlowTable' import FlowView from './FlowView' import * as flowsActions from '../ducks/flows' -import { select as selectFlow, updateFilter, updateHighlight } from '../ducks/views/main' +import { updateFilter, updateHighlight } from '../ducks/flowView' class MainView extends Component { @@ -57,13 +56,13 @@ class MainView extends Component { export default connect( state => ({ - flows: state.flows.views.main.view.data, - filter: state.flows.views.main.filter, - highlight: state.flows.views.main.highlight, - selectedFlow: state.flows.list.byId[state.flows.views.main.selected[0]] + flows: state.flowView.data, + filter: state.flowView.filter, + highlight: state.flowView.highlight, + selectedFlow: state.flows.byId[state.flows.selected[0]] }), { - selectFlow, + selectFlow: flowsActions.select, updateFilter, updateHighlight, updateFlow: flowsActions.update, diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index f0e33330..2962fc2b 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -60,7 +60,7 @@ export default connect( showEventLog: state.eventLog.visible, query: state.ui.query, panel: state.ui.panel, - selectedFlowId: state.flows.views.main.selected[0] + selectedFlowId: state.flows.selected[0] }), { appInit, diff --git a/web/src/js/components/ValueEditor/EditorBase.jsx b/web/src/js/components/ValueEditor/EditorBase.jsx index e737d2af..aa09dad5 100755 --- a/web/src/js/components/ValueEditor/EditorBase.jsx +++ b/web/src/js/components/ValueEditor/EditorBase.jsx @@ -54,7 +54,6 @@ export default class EditorBase extends Component { render() { return ( filters[log.level])), + view: reduceView(state.view, viewActions.updateFilter(state.list.data, log => filters[log.level])), } case ADD: @@ -55,7 +55,7 @@ export default function reduce(state = defaultState, action) { return { ...state, list: reduceList(state.list, listActions.receive(action.list)), - view: reduceView(state.view, viewActions.receive(list, log => state.filters[log.level])), + view: reduceView(state.view, viewActions.receive(action.list, log => state.filters[log.level])), } default: diff --git a/web/src/js/ducks/flowView.js b/web/src/js/ducks/flowView.js new file mode 100644 index 00000000..1e54fc05 --- /dev/null +++ b/web/src/js/ducks/flowView.js @@ -0,0 +1,195 @@ +import reduceView, * as viewActions from './utils/view' +import * as flowActions from './flows' +import Filt from '../filt/filt' +import { RequestUtils } from '../flow/utils' + +export const UPDATE_FILTER = 'FLOWVIEW_UPDATE_FILTER' +export const UPDATE_SORT = 'FLOWVIEW_UPDATE_SORT' +export const UPDATE_HIGHLIGHT = 'FLOWVIEW_UPDATE_HIGHLIGHT' + + +const sortKeyFuns = { + + TLSColumn: flow => flow.request.scheme, + + PathColumn: flow => RequestUtils.pretty_url(flow.request), + + MethodColumn: flow => flow.request.method, + + StatusColumn: flow => flow.response && flow.response.status_code, + + TimeColumn: flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start, + + SizeColumn: flow => { + let total = flow.request.contentLength + if (flow.response) { + total += flow.response.contentLength || 0 + } + return total + }, +} + +export function makeFilter(filter) { + if (!filter) { + return + } + return Filt.parse(filter) +} + +export function makeSort({ column, desc }) { + const sortKeyFun = sortKeyFuns[column] + if (!sortKeyFun) { + return + } + return (a, b) => { + const ka = sortKeyFun(a) + const kb = sortKeyFun(b) + if (ka > kb) { + return desc ? -1 : 1 + } + if (ka < kb) { + return desc ? 1 : -1 + } + return 0 + } +} + + +const defaultState = { + highlight: null, + filter: null, + sort: { column: null, desc: false }, + ...reduceView(undefined, {}) +} + +export default function reduce(state = defaultState, action) { + switch (action.type) { + + case UPDATE_HIGHLIGHT: + return { + ...state, + highlight: action.highlight, + } + + case UPDATE_FILTER: + return { + ...reduceView( + state, + viewActions.updateFilter( + action.flows, + makeFilter(action.filter), + makeSort(state.sort) + ) + ), + filter: action.filter, + } + + case UPDATE_SORT: + const sort = { column: action.column, desc: action.desc } + return { + ...reduceView( + state, + viewActions.updateSort( + makeSort(sort) + ) + ), + sort, + } + + case flowActions.ADD: + return { + ...reduceView( + state, + viewActions.add( + action.item, + makeFilter(state.filter), + makeSort(state.sort) + ) + ), + } + + case flowActions.UPDATE: + return { + ...reduceView( + state, + viewActions.update( + action.item, + makeFilter(state.filter), + makeSort(state.sort) + ) + ), + } + + case flowActions.REMOVE: + return { + ...reduceView( + state, + viewActions.remove( + action.id + ) + ), + } + + case flowActions.RECEIVE: + return { + ...reduceView( + state, + viewActions.receive( + action.list, + makeFilter(state.filter), + makeSort(state.sort) + ) + ), + } + + default: + return { + ...reduceView(state, action), + } + } +} + +/** + * @public + */ +export function updateFilter(filter) { + return (dispatch, getState) => { + dispatch({ type: UPDATE_FILTER, filter, flows: getState().flows.data }) + } +} + +/** + * @public + */ +export function updateHighlight(highlight) { + return { type: UPDATE_HIGHLIGHT, highlight } +} + +/** + * @public + */ +export function updateSort(column, desc) { + return { type: UPDATE_SORT, column, desc } +} + + +/** + * @public + */ +export function selectRelative(shift) { + return (dispatch, getState) => { + let currentSelectionIndex = getState().flowView.indexOf[getState().flows.selected[0]] + let minIndex = 0 + let maxIndex = getState().flowView.data.length - 1 + let newIndex + if (!currentSelectionIndex) { + newIndex = (shift < 0) ? minIndex : maxIndex + } else { + newIndex = currentSelectionIndex + shift + newIndex = Math.max(newIndex, minIndex) + newIndex = Math.min(newIndex, maxIndex) + } + let flow = getState().flowView.data[newIndex] + dispatch(flowActions.select(flow ? flow.id : undefined)) + } +} diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index f0b09530..dfcd5ba9 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -1,23 +1,24 @@ import { fetchApi } from '../utils' import reduceList, * as listActions from './utils/list' -import reduceViews, * as viewsActions from './views' + import * as msgQueueActions from './msgQueue' import * as websocketActions from './websocket' export const MSG_TYPE = 'UPDATE_FLOWS' export const DATA_URL = '/flows' -export const ADD = 'FLOWS_ADD' -export const UPDATE = 'FLOWS_UPDATE' -export const REMOVE = 'FLOWS_REMOVE' -export const RECEIVE = 'FLOWS_RECEIVE' +export const ADD = 'FLOWS_ADD' +export const UPDATE = 'FLOWS_UPDATE' +export const REMOVE = 'FLOWS_REMOVE' +export const RECEIVE = 'FLOWS_RECEIVE' export const REQUEST_ACTION = 'FLOWS_REQUEST_ACTION' -export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD' -export const FETCH_ERROR = 'FLOWS_FETCH_ERROR' +export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD' +export const FETCH_ERROR = 'FLOWS_FETCH_ERROR' +export const SELECT = 'FLOWS_SELECT' const defaultState = { - list: undefined, - views: undefined, + selected: [], + ...reduceList(undefined, {}), } export default function reduce(state = defaultState, action) { @@ -26,37 +27,37 @@ export default function reduce(state = defaultState, action) { case ADD: return { ...state, - list: reduceList(state.list, listActions.add(action.item)), - views: reduceViews(state.views, viewsActions.add(action.item)), + ...reduceList(state, listActions.add(action.item)), } case UPDATE: return { ...state, - list: reduceList(state.list, listActions.update(action.id, action.item)), - views: reduceViews(state.views, viewsActions.update(action.id, action.item)), + ...reduceList(state, listActions.update(action.item)), } case REMOVE: return { ...state, - list: reduceList(state.list, listActions.remove(action.id)), - views: reduceViews(state.views, viewsActions.remove(action.id)), + ...reduceList(state, listActions.remove(action.id)), } case RECEIVE: - const list = reduceList(state.list, listActions.receive(action.list)) return { ...state, - list, - views: reduceViews(state.views, viewsActions.receive(list)), + ...reduceList(state, listActions.receive(action.list)), + } + + case SELECT: + return { + ...state, + selected: action.flowIds } default: return { ...state, - list: reduceList(state.list, action), - views: reduceViews(state.views, action), + ...reduceList(state, action), } } } @@ -143,6 +144,15 @@ export function upload(file) { return { type: REQUEST_ACTION } } + +export function select(id) { + return { + type: SELECT, + flowIds: id ? [id] : [] + } +} + + /** * This action creater takes all WebSocket events * @@ -152,16 +162,16 @@ export function handleWsMsg(msg) { switch (msg.cmd) { case websocketActions.CMD_ADD: - return addItem(msg.data) + return addFlow(msg.data) case websocketActions.CMD_UPDATE: - return updateItem(msg.data.id, msg.data) + return updateFlow(msg.data) case websocketActions.CMD_REMOVE: - return removeItem(msg.data.id) + return removeFlow(msg.data.id) case websocketActions.CMD_RESET: - return fetchData() + return fetchFlows() default: return { type: UNKNOWN_CMD, msg } @@ -171,7 +181,7 @@ export function handleWsMsg(msg) { /** * @public websocket */ -export function fetchData() { +export function fetchFlows() { return msgQueueActions.fetchData(MSG_TYPE) } @@ -185,20 +195,20 @@ export function receiveData(list) { /** * @private */ -export function addItem(item) { +export function addFlow(item) { return { type: ADD, item } } /** * @private */ -export function updateItem(id, item) { - return { type: UPDATE, id, item } +export function updateFlow(item) { + return { type: UPDATE, item } } /** * @private */ -export function removeItem(id) { +export function removeFlow(id) { return { type: REMOVE, id } } diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js index c2488d70..16193530 100644 --- a/web/src/js/ducks/index.js +++ b/web/src/js/ducks/index.js @@ -2,6 +2,7 @@ import { combineReducers } from 'redux' import eventLog from './eventLog' import websocket from './websocket' import flows from './flows' +import flowView from './flowView' import settings from './settings' import ui from './ui' import msgQueue from './msgQueue' @@ -10,6 +11,7 @@ export default combineReducers({ eventLog, websocket, flows, + flowView, settings, ui, msgQueue, diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index 15334f88..7cfa984f 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -1,18 +1,18 @@ -import { SELECT as SELECT_FLOW, selectRelative as selectFlowRelative } from './views/main' +import { selectRelative as selectFlowRelative } from './flowView' import { Key } from '../utils.js' -import * as flowsActions from '../ducks/flows' +import * as flowsActions from './flows' export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT' export const UPDATE_QUERY = 'UI_UPDATE_QUERY' export const SELECT_TAB = 'UI_SELECT_TAB' -export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE' export const SET_PROMPT = 'UI_SET_PROMPT' export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' const defaultState = { activeMenu: 'Start', + isFlowSelected: false, selectedInput: null, displayLarge: false, promptOpen: false, @@ -30,20 +30,25 @@ export default function reducer(state = defaultState, action) { activeMenu: action.activeMenu, } - case SELECT_FLOW: - if (action.flowId && !action.currentSelection) { + case flowsActions.SELECT: + if (action.flowIds.length && !state.isFlowSelected) { return { ...state, displayLarge: false, activeMenu: 'Flow', + isFlowSelected: true, } } - if (!action.flowId && state.activeMenu === 'Flow') { + if (!action.flowIds.length && state.isFlowSelected) { + let activeMenu = state.activeMenu + if (activeMenu == 'Flow') { + activeMenu = 'Start' + } return { ...state, - displayLarge: false, - activeMenu: 'Start', + activeMenu, + isFlowSelected: false, } } @@ -76,19 +81,6 @@ export default function reducer(state = defaultState, action) { panel: action.panel } - case SELECT_TAB_RELATIVE: - if (!action.flow || action.shift === null) { - return { - ...state, - panel: 'request' - } - } - const tabs = ['request', 'response', 'error'].filter(k => action.flow[k]).concat(['details']) - return { - ...state, - panel: tabs[(tabs.indexOf(state.panel) + action.shift + tabs.length) % tabs.length] - } - case SET_PROMPT: return { ...state, @@ -126,13 +118,6 @@ export function selectTab(panel) { return { type: SELECT_TAB, panel } } -export function selectTabRelative(shift) { - return (dispatch, getState) => { - let flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] - dispatch({ type: SELECT_TAB_RELATIVE, shift, flow }) - } -} - export function setPrompt(open) { return { type: SET_PROMPT, open } } @@ -142,13 +127,17 @@ export function setDisplayLarge(displayLarge) { } export function onKeyDown(e) { - if(e.ctrlKey) { - return () => {} + if (e.ctrlKey) { + return () => { + } } var key = e.keyCode var shiftKey = e.shiftKey e.preventDefault() return (dispatch, getState) => { + + const flow = getState().flows.byId[getState().flows.selected[0]] + switch (key) { case Key.I: @@ -192,19 +181,26 @@ export function onKeyDown(e) { case Key.ESC: dispatch(selectFlowRelative(null)) - dispatch(selectTabRelative(null)) break - case Key.H: case Key.LEFT: - dispatch(selectTabRelative(-1)) + { + let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']), + currentTab = getState().ui.panel, + nextTab = tabs[(tabs.indexOf(currentTab) - 1 + tabs.length) % tabs.length] + dispatch(selectTab(nextTab)) break + } - case Key.L: case Key.TAB: case Key.RIGHT: - dispatch(selectTabRelative(+1)) + { + let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']), + currentTab = getState().ui.panel, + nextTab = tabs[(tabs.indexOf(currentTab) + 1) % tabs.length] + dispatch(selectTab(nextTab)) break + } case Key.C: if (shiftKey) { @@ -212,8 +208,8 @@ export function onKeyDown(e) { } break - case Key.D: { - const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + case Key.D: + { if (!flow) { return } @@ -225,8 +221,8 @@ export function onKeyDown(e) { break } - case Key.A: { - const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + case Key.A: + { if (shiftKey) { dispatch(flowsActions.acceptAll()) } else if (flow && flow.intercepted) { @@ -235,16 +231,16 @@ export function onKeyDown(e) { break } - case Key.R: { - const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + case Key.R: + { if (!shiftKey && flow) { dispatch(flowsActions.replay(flow)) } break } - case Key.V: { - const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]] + case Key.V: + { if (!shiftKey && flow && flow.modified) { dispatch(flowsActions.revert(flow)) } @@ -256,7 +252,8 @@ export function onKeyDown(e) { break default: - return () => {} + return () => { + } } } } diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js index 4f631590..fdeb5856 100644 --- a/web/src/js/ducks/utils/list.js +++ b/web/src/js/ducks/utils/list.js @@ -23,7 +23,7 @@ export default function reduce(state = defaultState, action) { } case UPDATE: { - const index = state.indexOf[action.id] + const index = state.indexOf[action.item.id] if (index == null) { return state @@ -36,7 +36,7 @@ export default function reduce(state = defaultState, action) { return { ...state, data, - byId: { ...state.byId, [action.id]: action.item } + byId: { ...state.byId, [action.item.id]: action.item } } } @@ -86,8 +86,8 @@ export function add(item) { /** * @public */ -export function update(id, item) { - return { type: UPDATE, id, item } +export function update(item) { + return { type: UPDATE, item } } /** diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js index 0349a398..c00f00bd 100755 --- a/web/src/js/ducks/utils/view.js +++ b/web/src/js/ducks/utils/view.js @@ -15,8 +15,9 @@ const defaultState = { export default function reduce(state = defaultState, action) { switch (action.type) { - case UPDATE_FILTER: { - const data = action.list.data.filter(action.filter).sort(action.sort) + case UPDATE_FILTER: + { + const data = action.list.filter(action.filter).sort(action.sort) return { ...state, data, @@ -24,7 +25,8 @@ export default function reduce(state = defaultState, action) { } } - case UPDATE_SORT: { + case UPDATE_SORT: + { const data = [...state.data].sort(action.sort) return { ...state, @@ -51,13 +53,13 @@ export default function reduce(state = defaultState, action) { ...sortedRemove(state, action.id), } - case UPDATE: { - if (state.indexOf[action.id] == null) { + case UPDATE: + if (state.indexOf[action.item.id] == null) { return } const nextState = { ...state, - ...sortedRemove(state, action.id), + ...sortedRemove(state, action.item.id), } if (!action.filter(action.item)) { return nextState @@ -66,10 +68,10 @@ export default function reduce(state = defaultState, action) { ...nextState, ...sortedInsert(nextState, action.item, action.sort) } - } - case RECEIVE: { - const data = action.list.data.filter(action.filter).sort(action.sort) + case RECEIVE: + { + const data = action.list.filter(action.filter).sort(action.sort) return { ...state, data, @@ -94,8 +96,8 @@ export function add(item, filter = defaultFilter, sort = defaultSort) { return { type: ADD, item, filter, sort } } -export function update(id, item, filter = defaultFilter, sort = defaultSort) { - return { type: UPDATE, id, item, filter, sort } +export function update(item, filter = defaultFilter, sort = defaultSort) { + return { type: UPDATE, item, filter, sort } } export function remove(id) { diff --git a/web/src/js/ducks/views.js b/web/src/js/ducks/views.js deleted file mode 100755 index e1e46c2e..00000000 --- a/web/src/js/ducks/views.js +++ /dev/null @@ -1,40 +0,0 @@ -import { combineReducers } from 'redux' -import * as viewActions from './utils/view' -import main from './views/main.js' - -export const ADD = 'FLOW_VIEWS_ADD' -export const UPDATE = 'FLOW_VIEWS_UPDATE' -export const REMOVE = 'FLOW_VIEWS_REMOVE' -export const RECEIVE = 'FLOW_VIEWS_RECEIVE' - -export default combineReducers({ - main, -}) - -/** - * @public - */ -export function add(item) { - return { type: ADD, item } -} - -/** - * @public - */ -export function update(id, item) { - return { type: UPDATE, id, item } -} - -/** - * @public - */ -export function remove(id) { - return { type: REMOVE, id } -} - -/** - * @public - */ -export function receive(list) { - return { type: RECEIVE, list } -} diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/views/main.js deleted file mode 100755 index 0c401716..00000000 --- a/web/src/js/ducks/views/main.js +++ /dev/null @@ -1,222 +0,0 @@ -import Filt from '../../filt/filt' -import { RequestUtils } from '../../flow/utils' -import reduceView, * as viewActions from '../utils/view' -import * as viewsActions from '../views' - -export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER' -export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT' -export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT' -export const SELECT = 'FLOW_VIEWS_MAIN_SELECT' - -const sortKeyFuns = { - - TLSColumn: flow => flow.request.scheme, - - PathColumn: flow => RequestUtils.pretty_url(flow.request), - - MethodColumn: flow => flow.request.method, - - StatusColumn: flow => flow.response && flow.response.status_code, - - TimeColumn: flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start, - - SizeColumn: flow => { - let total = flow.request.contentLength - if (flow.response) { - total += flow.response.contentLength || 0 - } - return total - }, -} - -const defaultState = { - highlight: null, - selected: [], - filter: null, - sort: { column: null, desc: false }, - view: undefined, -} - -export default function reduce(state = defaultState, action) { - switch (action.type) { - - case UPDATE_HIGHLIGHT: - return { - ...state, - highlight: action.highlight, - } - - case SELECT: - return { - ...state, - selected: [action.id] - } - - case UPDATE_FILTER: - return { - ...state, - filter: action.filter, - view: reduceView( - state.view, - viewActions.updateFilter( - action.list, - makeFilter(action.filter), - makeSort(state.sort) - ) - ), - } - - case UPDATE_SORT: - const sort = { column: action.column, desc: action.desc } - return { - ...state, - sort, - view: reduceView( - state.view, - viewActions.updateSort( - makeSort(sort) - ) - ), - } - - case viewsActions.ADD: - return { - ...state, - view: reduceView( - state.view, - viewActions.add( - action.item, - makeFilter(state.filter), - makeSort(state.sort) - ) - ), - } - - case viewsActions.UPDATE: - return { - ...state, - view: reduceView( - state.view, - viewActions.update( - action.id, - action.item, - makeFilter(state.filter), - makeSort(state.sort) - ) - ), - } - - case viewsActions.REMOVE: - return { - ...state, - view: reduceView( - state.view, - viewActions.remove( - action.id - ) - ), - } - - case viewsActions.RECEIVE: - return { - ...state, - view: reduceView( - state.view, - viewActions.receive( - action.list, - makeFilter(state.filter), - makeSort(state.sort) - ) - ), - } - - default: - return { - ...state, - view: reduceView(state.view, action) - } - } -} - -/** - * @public - */ -export function updateFilter(filter) { - return (dispatch, getState) => { - dispatch({ type: UPDATE_FILTER, filter, list: getState().flows.list }) - } -} - -/** - * @public - */ -export function updateHighlight(highlight) { - return { type: UPDATE_HIGHLIGHT, highlight } -} - -/** - * @public - */ -export function updateSort(column, desc) { - return { type: UPDATE_SORT, column, desc } -} - -/** - * @public - */ -export function select(id) { - return (dispatch, getState) => { - dispatch({ type: SELECT, currentSelection: getState().flows.views.main.selected[0], id }) - } -} - -/** - * @public - */ -export function selectRelative(shift) { - return (dispatch, getState) => { - let currentSelection = getState().flows.views.main.selected[0] - let id - if (shift === null){ - id = null - } else if (!currentSelection) { - id = (action.shift < 0) ? 0 : state.view.data.length - 1 - } else { - id = state.view.indexOf[currentSelection] + action.shift - id = Math.max(id, 0) - id = Math.min(id, state.view.data.length - 1) - } - dispatch({ type: SELECT, currentSelection, id }) - } -} - -/** - * @private - */ -function makeFilter(filter) { - if (!filter) { - return - } - return Filt.parse(filter) -} - -/** - * @private - */ -function makeSort({ column, desc }) { - const sortKeyFun = sortKeyFuns[column] - if (!sortKeyFun) { - return - } - return (a, b) => { - const ka = sortKeyFun(a) - const kb = sortKeyFun(b) - if (ka > kb) { - return desc ? -1 : 1 - } - if (ka < kb) { - return desc ? 1 : -1 - } - return 0 - } -} diff --git a/web/src/js/ducks/websocket.js b/web/src/js/ducks/websocket.js index 5ba7baef..21400bb5 100644 --- a/web/src/js/ducks/websocket.js +++ b/web/src/js/ducks/websocket.js @@ -68,7 +68,7 @@ export function onConnect() { return dispatch => { dispatch({ type: CONNECTED }) dispatch(settingsActions.fetchData()) - dispatch(flowsActions.fetchData()) + dispatch(flowsActions.fetchFlows()) dispatch(eventLogActions.fetchData()) } } -- cgit v1.2.3 From 18dd84b9081fb5552d5b5b2560405496445e2110 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 19 Jul 2016 03:23:40 -0700 Subject: web: fix flow selection --- web/src/js/ducks/flowView.js | 2 +- web/src/js/ducks/ui.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src') diff --git a/web/src/js/ducks/flowView.js b/web/src/js/ducks/flowView.js index 1e54fc05..dd5bea41 100644 --- a/web/src/js/ducks/flowView.js +++ b/web/src/js/ducks/flowView.js @@ -182,7 +182,7 @@ export function selectRelative(shift) { let minIndex = 0 let maxIndex = getState().flowView.data.length - 1 let newIndex - if (!currentSelectionIndex) { + if (currentSelectionIndex === undefined) { newIndex = (shift < 0) ? minIndex : maxIndex } else { newIndex = currentSelectionIndex + shift diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index 7cfa984f..f745f0af 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -180,7 +180,7 @@ export function onKeyDown(e) { break case Key.ESC: - dispatch(selectFlowRelative(null)) + dispatch(flowsActions.select(null)) break case Key.LEFT: -- cgit v1.2.3