Merge pull request mitmproxy#2608 from mhils/web

[web] minor improvements, move options editor
Oliver-Fish · Oct 29, 2017 · 731b40c · 731b40c
2 parents b32dff7 + 9d51433
commit 731b40c
Show file tree

Hide file tree

Showing 23 changed files with 1,371 additions and 1,075 deletions.
diff --git a/web/package.json b/web/package.json
@@ -27,44 +27,43 @@
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
     "mock-xmlhttprequest": "^1.1.0",
-    "prop-types": "^15.5.10",
-    "react": "16.0.0-beta.3",
+    "prop-types": "^15.6.0",
+    "react": "16.0.0",
     "react-codemirror": "^1.0.0",
-    "react-dom": "16.0.0-beta.3",
-    "react-redux": "^5.0.5",
-    "react-test-renderer": "16.0.0-beta.3",
-    "redux": "^3.6.0",
+    "react-dom": "16.0.0",
+    "react-redux": "^5.0.6",
+    "react-test-renderer": "16.0.0",
+    "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
-    "redux-mock-store": "^1.2.3",
+    "redux-mock-store": "^1.3.0",
     "redux-thunk": "^2.2.0",
-    "shallowequal": "^1.0.1"
+    "shallowequal": "^1.0.2"
   },
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.2.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^14.4.0",
-    "envify": "^4.0.0",
-    "eslint": "^4.0.0",
+    "babelify": "^8.0.0",
+    "browserify": "^14.5.0",
+    "envify": "^4.1.0",
+    "eslint": "^4.9.0",
     "gulp": "^3.9.1",
-    "gulp-clean-css": "^3.4.1",
-    "gulp-eslint": "^3.0.1",
-    "gulp-less": "^3.3.0",
+    "gulp-clean-css": "^3.9.0",
+    "gulp-eslint": "^4.0.0",
+    "gulp-less": "^3.3.2",
     "gulp-livereload": "^3.8.1",
     "gulp-notify": "^3.0.0",
     "gulp-peg": "^0.2.0",
     "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sourcemaps": "^2.6.0",
+    "gulp-sourcemaps": "^2.6.1",
     "gulp-util": "^3.0.8",
-    "jest": "^20.0.4",
-    "react-addons-test-utils": "^15.5.1",
-    "uglifyify": "^3.0.4",
+    "jest": "^21.2.1",
+    "uglifyify": "^4.0.4",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.9.0"

diff --git a/web/src/css/app.less b/web/src/css/app.less
@@ -14,7 +14,6 @@ html {
 @import (less) "flowtable.less";
 @import (less) "flowdetail.less";
 @import (less) "flowview.less";
-@import (less) "prompt.less";
 @import (less) "eventlog.less";
 @import (less) "footer.less";
 @import (less) "codemirror.less";

diff --git a/web/src/css/prompt.less b/web/src/css/prompt.less
diff --git a/web/src/js/__tests__/components/FlowTableSpec.js b/web/src/js/__tests__/components/FlowTableSpec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import FlowTable from '../../components/FlowTable'
+import {PureFlowTable as FlowTable} from '../../components/FlowTable'
 import TestUtils from 'react-dom/test-utils'
 import { TFlow, TStore } from '../ducks/tutils'
 import { Provider } from 'react-redux'

diff --git a/web/src/js/__tests__/components/Header/FileMenuSpec.js b/web/src/js/__tests__/components/Header/FileMenuSpec.js
@@ -49,10 +49,4 @@ describe('FileMenu Component', () => {
         a.props.onClick(mockEvent)
         expect(saveFn).toBeCalled()
     })
-
-    it('should open optionModal', () => {
-        let a = ul.children[3].children[1]
-        a.props.onClick(mockEvent)
-        expect(openModalFn).toBeCalled()
-    })
 })
diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
@@ -63,15 +63,6 @@ exports[`FileMenu Component should render correctly 1`] = `
     </li>
     <li>
        
-      <a
-        href="#"
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-fw fa-cog"
-        />
-         Options
-      </a>
       <hr
         className="divider"
       />

diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap
@@ -33,7 +33,7 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={false}
+        onClick={undefined}
         title="revert changes to flow [V]"
       >
         <i
@@ -92,7 +92,7 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={false}
+        onClick={undefined}
         title="[a]ccept intercepted flow"
       >
         <i
@@ -103,7 +103,7 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={false}
+        onClick={undefined}
         title="kill intercepted flow [x]"
       >
         <i

diff --git a/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap
@@ -9,46 +9,24 @@ exports[`OptionMenu Component should render correctly 1`] = `
       className="menu-content"
     >
       <div
-        className="menu-entry"
-      >
-        <label>
-          <input
-            checked={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          HTTP/2.0
-        </label>
-      </div>
-      <div
-        className="menu-entry"
-      >
-        <label>
-          <input
-            checked={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          WebSockets
-        </label>
-      </div>
-      <div
-        className="menu-entry"
+        className="btn btn-default"
+        disabled={undefined}
+        onClick={[Function]}
+        title="Open Options"
       >
-        <label>
-          <input
-            checked={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Raw TCP
-        </label>
+        <i
+          className="fa fa-fw fa-cogs text-primary"
+        />
+        Edit Options 
+        <sup>
+          alpha
+        </sup>
       </div>
     </div>
     <div
       className="menu-legend"
     >
-      Protocol Support
+      Options Editor
     </div>
   </div>
   <div
@@ -66,7 +44,7 @@ exports[`OptionMenu Component should render correctly 1`] = `
             onChange={[Function]}
             type="checkbox"
           />
-          Disable Caching 
+          Strip cache headers 
           <a
             href="http://docs.mitmproxy.org/en/stable/features/anticache.html"
             target="_blank"
@@ -86,18 +64,26 @@ exports[`OptionMenu Component should render correctly 1`] = `
             onChange={[Function]}
             type="checkbox"
           />
-          Disable Compression 
-          <i
-            className="fa fa-question-circle"
-            title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."
+          Use host header for display
+        </label>
+      </div>
+      <div
+        className="menu-entry"
+      >
+        <label>
+          <input
+            checked={false}
+            onChange={[Function]}
+            type="checkbox"
           />
+          Verify server certificates
         </label>
       </div>
     </div>
     <div
       className="menu-legend"
     >
-      HTTP Options
+      Quick Options
     </div>
   </div>
   <div
@@ -106,22 +92,6 @@ exports[`OptionMenu Component should render correctly 1`] = `
     <div
       className="menu-content"
     >
-      <div
-        className="menu-entry"
-      >
-        <label>
-          <input
-            checked={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Use Host Header 
-          <i
-            className="fa fa-question-circle"
-            title="Use the Host header to construct URLs for display."
-          />
-        </label>
-      </div>
       <div
         className="menu-entry"
       >

diff --git a/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap
@@ -4,7 +4,7 @@ exports[`Button Component should be able to be disabled 1`] = `
 <div
   className="classname btn btn-default"
   disabled="true"
-  onClick={false}
+  onClick={undefined}
   title={undefined}
 >
   <a>

diff --git a/web/src/js/__tests__/ducks/flowsSpec.js b/web/src/js/__tests__/ducks/flowsSpec.js
@@ -157,7 +157,9 @@ describe('flows actions', () => {
         file     = new window.Blob(['foo'], { type: 'plain/text' })
         body.append('file', file)
         store.dispatch(flowActions.uploadContent(tflow, 'foo', 'foo'))
-        expect(fetchApi).toBeCalledWith('/flows/1/foo/content', { method: 'POST', body})
+        // window.Blob's lastModified is always the current time,
+        // which causes flaky tests on comparison.
+        expect(fetchApi).toBeCalledWith('/flows/1/foo/content', { method: 'POST', body: expect.anything()})
     })
 
     it('should handle clear action', () => {

diff --git a/web/src/js/__tests__/utilsSpec.js b/web/src/js/__tests__/utilsSpec.js
@@ -83,11 +83,6 @@ describe('pure', () => {
         expect(utils.pure(tFunc).displayName).toEqual('tFunc')
     })
 
-    it('should suggest when should component update', () => {
-        expect(f.shouldComponentUpdate('foo')).toBeTruthy()
-        expect(f.shouldComponentUpdate('bar')).toBeFalsy()
-    })
-
     it('should render properties', () => {
         expect(f.render()).toEqual(tFunc('bar'))
     })

diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx
@@ -1,17 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
+import { connect } from 'react-redux'
 import shallowEqual from 'shallowequal'
 import AutoScroll from './helpers/AutoScroll'
 import { calcVScroll } from './helpers/VirtualScroll'
 import FlowTableHead from './FlowTable/FlowTableHead'
 import FlowRow from './FlowTable/FlowRow'
 import Filt from "../filt/filt"
+import * as flowsActions from '../ducks/flows'
+
 
 class FlowTable extends React.Component {
 
     static propTypes = {
-        onSelect: PropTypes.func.isRequired,
+        selectFlow: PropTypes.func.isRequired,
         flows: PropTypes.array.isRequired,
         rowHeight: PropTypes.number,
         highlight: PropTypes.string,
@@ -107,7 +110,7 @@ class FlowTable extends React.Component {
                                 flow={flow}
                                 selected={flow === selected}
                                 highlighted={isHighlighted(flow)}
-                                onSelect={this.props.onSelect}
+                                onSelect={this.props.selectFlow}
                             />
                         ))}
                         <tr style={{ height: vScroll.paddingBottom }}></tr>
@@ -118,4 +121,15 @@ class FlowTable extends React.Component {
     }
 }
 
-export default AutoScroll(FlowTable)
+export const PureFlowTable = AutoScroll(FlowTable)
+
+export default connect(
+    state => ({
+        flows: state.flows.view,
+        highlight: state.flows.highlight,
+        selected: state.flows.byId[state.flows.selected[0]],
+    }),
+    {
+        selectFlow: flowsActions.select,
+    }
+)(PureFlowTable)