From d01e49c6d5e474700956a9b7f1171a4229bfa750 Mon Sep 17 00:00:00 2001 From: Jason Date: Sun, 19 Jun 2016 02:53:15 +0800 Subject: [web] replace SetttingsActions.update with settings.updateSettings --- web/src/js/actions.js | 23 +---------------- web/src/js/components/Footer.jsx | 9 ++++++- web/src/js/components/Header.jsx | 9 ++----- web/src/js/components/Header/MainMenu.jsx | 39 ++++++++++++++--------------- web/src/js/components/Header/OptionMenu.jsx | 33 ++++++++++++++++-------- web/src/js/components/ProxyApp.jsx | 7 +++--- web/src/js/ducks/settings.js | 20 +++++++-------- 7 files changed, 65 insertions(+), 75 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 588245ae..bb1d0dd6 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -39,27 +39,6 @@ export var ConnectionActions = { } }; -export var SettingsActions = { - update: function (settings) { - - $.ajax({ - type: "PUT", - url: "/settings", - contentType: 'application/json', - data: JSON.stringify(settings) - }); - - /* - //Facebook Flux: We do an optimistic update on the client already. - AppDispatcher.dispatchViewAction({ - type: ActionTypes.SETTINGS_STORE, - cmd: StoreCmds.UPDATE, - data: settings - }); - */ - } -}; - export var FlowActions = { accept: function (flow) { $.post("/flows/" + flow.id + "/accept"); @@ -119,4 +98,4 @@ export var Query = { SEARCH: "s", HIGHLIGHT: "h", SHOW_EVENTLOG: "e" -}; \ No newline at end of file +}; diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 1f6de2d7..82d6d8a1 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -1,11 +1,12 @@ import React from 'react' +import { connect } from 'react-redux' import { formatSize } from '../utils.js' Footer.propTypes = { settings: React.PropTypes.object.isRequired, } -export default function Footer({ settings }) { +function Footer({ settings }) { return ( ) } + +export default connect( + state => ({ + settings: state.settings.settings, + }) +)(Footer) diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 93ca5154..ab25eb41 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -12,10 +12,6 @@ import {setActiveMenu} from '../ducks/ui.js' class Header extends Component { static entries = [MainMenu, ViewMenu, OptionMenu] - static propTypes = { - settings: PropTypes.object.isRequired, - } - handleClick(active, e) { e.preventDefault() this.props.setActiveMenu(active.title) @@ -24,7 +20,7 @@ class Header extends Component { } render() { - const { settings, updateLocation, query, selectedFlow, activeMenu} = this.props + const { updateLocation, query, selectedFlow, activeMenu} = this.props let entries = [...Header.entries] if(selectedFlow) @@ -47,10 +43,9 @@ class Header extends Component {
+ />
) diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 7b0b542c..a466a980 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import FilterInput from './FilterInput' import { Query } from '../../actions.js' -import {setInterceptPattern} from "../../ducks/settings" -import { connect } from 'react-redux' +import { updateSettings } from '../../ducks/settings' class MainMenu extends Component { @@ -10,14 +10,16 @@ class MainMenu extends Component { static route = 'flows' static propTypes = { - settings: React.PropTypes.object.isRequired, + query: PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, + updateLocation: PropTypes.func.isRequired, + onSettingsChange: PropTypes.func.isRequired, } constructor(props, context) { super(props, context) this.onSearchChange = this.onSearchChange.bind(this) this.onHighlightChange = this.onHighlightChange.bind(this) - this.onInterceptChange = this.onInterceptChange.bind(this) } onSearchChange(val) { @@ -28,16 +30,8 @@ class MainMenu extends Component { this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val }) } - onInterceptChange(val) { - this.props.setInterceptPattern(val); - } - render() { - const { query, settings } = this.props - - const search = query[Query.SEARCH] || '' - const highlight = query[Query.HIGHLIGHT] || '' - const intercept = settings.intercept || '' + const { query, settings, onSettingsChange } = this.props return (
@@ -47,7 +41,7 @@ class MainMenu extends Component { placeholder="Search" type="search" color="black" - value={search} + value={query[Query.SEARCH] || ''} onChange={this.onSearchChange} /> onSettingsChange({ intercept })} />
@@ -73,6 +67,11 @@ class MainMenu extends Component { } } -export default connect(undefined, { - setInterceptPattern -})(MainMenu); +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(MainMenu); diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 44f309fd..f871ec92 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,61 +1,72 @@ import React, { PropTypes } from 'react' +import { connect } from 'react-redux' import ToggleButton from '../common/ToggleButton' import ToggleInputButton from '../common/ToggleInputButton' -import { SettingsActions } from '../../actions.js' +import { updateSettings } from '../../ducks/settings' OptionMenu.title = 'Options' OptionMenu.propTypes = { settings: PropTypes.object.isRequired, + onSettingsChange: PropTypes.func.isRequired, } -export default function OptionMenu({ settings }) { +function OptionMenu({ settings, onSettingsChange }) { // @todo use settings.map return (
SettingsActions.update({ showhost: !settings.showhost })} + onToggle={() => onSettingsChange({ showhost: !settings.showhost })} /> SettingsActions.update({ no_upstream_cert: !settings.no_upstream_cert })} + onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })} /> SettingsActions.update({ rawtcp: !settings.rawtcp })} + onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })} /> SettingsActions.update({ http2: !settings.http2 })} + onToggle={() => onSettingsChange({ http2: !settings.http2 })} /> SettingsActions.update({ anticache: !settings.anticache })} + onToggle={() => onSettingsChange({ anticache: !settings.anticache })} /> SettingsActions.update({ anticomp: !settings.anticomp })} + onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })} /> SettingsActions.update({ stickyauth: !settings.stickyauth ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })} /> SettingsActions.update({ stickycookie: !settings.stickycookie ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })} /> SettingsActions.update({ stream: !settings.stream ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })} />
) } + +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(OptionMenu) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 39cadff5..5d795b57 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -111,11 +111,11 @@ class ProxyAppMain extends Component { } render() { - const { showEventLog, location, children, settings } = this.props + const { showEventLog, location, children } = this.props const query = this.getQuery() return (
-
+
{React.cloneElement( children, { ref: 'view', location, query, updateLocation: this.updateLocation } @@ -123,7 +123,7 @@ class ProxyAppMain extends Component { {showEventLog && ( )} -
+
) } @@ -132,6 +132,5 @@ class ProxyAppMain extends Component { export default connect( state => ({ showEventLog: state.eventLog.visible, - settings: state.settings.settings, }) )(ProxyAppMain) diff --git a/web/src/js/ducks/settings.js b/web/src/js/ducks/settings.js index 73c62120..3e6c8366 100644 --- a/web/src/js/ducks/settings.js +++ b/web/src/js/ducks/settings.js @@ -1,8 +1,8 @@ -import {fetchApi} from "../utils"; +import {fetchApi} from '../utils'; -export const REQUEST_SETTINGS = "REQUEST_SETTINGS" -export const RECEIVE_SETTINGS = "RECEIVE_SETTINGS" -export const UPDATE_SETTINGS = "UPDATE_SETTINGS" +export const REQUEST_SETTINGS = 'REQUEST_SETTINGS' +export const RECEIVE_SETTINGS = 'RECEIVE_SETTINGS' +export const UPDATE_SETTINGS = 'UPDATE_SETTINGS' const defaultState = { settings: {}, @@ -49,20 +49,20 @@ export default function reducer(state = defaultState, action) { export function updateSettings(event) { /* This action creator takes all WebSocket events */ - if (event.cmd === "update") { + if (event.cmd === 'update') { return { type: UPDATE_SETTINGS, settings: event.data } } - console.error("unknown settings update", event) + console.error('unknown settings update', event) } export function fetchSettings() { return dispatch => { dispatch({type: REQUEST_SETTINGS}) - return fetchApi("/settings") + return fetchApi('/settings') .then(response => response.json()) .then(json => dispatch({type: RECEIVE_SETTINGS, settings: json.data}) @@ -71,7 +71,7 @@ export function fetchSettings() { } } -export function setInterceptPattern(intercept) { - return dispatch => - fetchApi.put("/settings", {intercept}) +export function updateSettings(settings) { + fetchApi.put('/settings', settings) + return { type: SET_INTERCEPT } } -- cgit v1.2.3 From 79834676cbb51941b9876fe799452036cf12853f Mon Sep 17 00:00:00 2001 From: Clemens Date: Mon, 20 Jun 2016 10:20:41 +0200 Subject: added accept and revert to flowmenu --- web/src/js/components/Header/FlowMenu.jsx | 10 ++++++---- web/src/js/components/common/Button.jsx | 6 ++++-- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 96f42652..abecf0dc 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -15,10 +15,12 @@ function FlowMenu({ flow }) { return (
-
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index cc2fe9dd..574288df 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -5,9 +5,11 @@ Button.propTypes = { text: PropTypes.string.isRequired } -export default function Button({ onClick, text, icon }) { +export default function Button({ onClick, text, icon, disabled }) { return ( -
+
  {text} -- cgit v1.2.3 From 37475217bf05fa44eba1551d318e6a5f6d088d7a Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 16 Jun 2016 13:25:58 +0200 Subject: added tests for ui --- web/src/js/__tests__/ducks/ui.js | 34 ++++++++++++++++++++++++++++++++++ web/src/js/__tests__/utils.js | 8 ++++---- web/src/js/ducks/ui.js | 4 ++-- 3 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 web/src/js/__tests__/ducks/ui.js (limited to 'web/src/js') diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js new file mode 100644 index 00000000..ee1a008d --- /dev/null +++ b/web/src/js/__tests__/ducks/ui.js @@ -0,0 +1,34 @@ +jest.unmock("../../ducks/ui"); + +import reducer, {setActiveMenu, SELECT_FLOW} from '../../ducks/ui'; + + +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", () => { + expect(reducer({activeMenu: 'Flow'}, + { type: SELECT_FLOW, + currentSelection: '1', + flowId : undefined + })).toEqual({ activeMenu: 'Start'}) + }), + it("should change the state to Flow", () => { + expect(reducer({activeMenu: 'Start'}, + { type: SELECT_FLOW, + currentSelection: undefined, + flowId : '1' + })).toEqual({ activeMenu: 'Flow'}) + }), + it("should not change the state", () => { + expect(reducer({activeMenu: 'Options'}, + { type: SELECT_FLOW, + currentSelection: '1', + flowId : '2' + })).toEqual({ activeMenu: 'Options'}) + }) +}); diff --git a/web/src/js/__tests__/utils.js b/web/src/js/__tests__/utils.js index eda740a1..b216d7d4 100644 --- a/web/src/js/__tests__/utils.js +++ b/web/src/js/__tests__/utils.js @@ -1,9 +1,9 @@ -jest.unmock("../utils.js"); +jest.unmock("../utils"); -import {formatSize} from "../utils.js" +import {formatSize} from "../utils" -describe("utils", function () { - it("formatSize", function(){ +describe("utils", () => { + it("formatSize", () => { expect(formatSize(1024)).toEqual("1kb"); expect(formatSize(0)).toEqual("0"); expect(formatSize(10)).toEqual("10b"); diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index 28a13ea4..00468902 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -1,5 +1,5 @@ -import { SELECT_FLOW } from './flows' -const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU' +export const SELECT_FLOW = "SELECT_FLOW" +export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU' const defaultState = { -- cgit v1.2.3 From 65955ee45f4b5e66fd433924811f6753e996bea6 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 20 Jun 2016 21:01:24 -0700 Subject: add better description --- web/src/js/__tests__/ducks/ui.js | 11 ++++++----- web/src/js/ducks/ui.js | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js index ee1a008d..81ae852c 100644 --- a/web/src/js/__tests__/ducks/ui.js +++ b/web/src/js/__tests__/ducks/ui.js @@ -1,7 +1,8 @@ jest.unmock("../../ducks/ui"); +jest.unmock("../../ducks/flows"); -import reducer, {setActiveMenu, SELECT_FLOW} from '../../ducks/ui'; - +import reducer, {setActiveMenu} from '../../ducks/ui'; +import {SELECT_FLOW} from '../../ducks/flows'; describe("ui reducer", () => { it("should return the initial state", () => { @@ -10,21 +11,21 @@ describe("ui reducer", () => { it("should return the state for view", () => { expect(reducer(undefined, setActiveMenu('View'))).toEqual({ activeMenu: 'View'}) }), - it("should change the state to Start", () => { + 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_FLOW, currentSelection: '1', flowId : undefined })).toEqual({ activeMenu: 'Start'}) }), - it("should change the state to Flow", () => { + it("should change the state to Flow when we selected a flow and no flow was selected before", () => { expect(reducer({activeMenu: 'Start'}, { type: SELECT_FLOW, currentSelection: undefined, flowId : '1' })).toEqual({ activeMenu: 'Flow'}) }), - it("should not change the state", () => { + 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_FLOW, currentSelection: '1', diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index 00468902..c17e042b 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -1,5 +1,5 @@ -export const SELECT_FLOW = "SELECT_FLOW" -export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU' +import {SELECT_FLOW} from "./flows" +export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU'; const defaultState = { -- cgit v1.2.3