Merge pull request #2392 from mhils/web-fixes

[web] Update dependencies, minor fixes

web/.eslintrc.yml

@@ -1,3 +1,6 @@
 {
-    "parser": "babel-eslint"
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "sourceType": "module",
+    }
 }

web/package.json

@@ -27,32 +27,32 @@
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
     "mock-xmlhttprequest": "^1.1.0",
-    "prop-types": "^15.5.0",
-    "react": "^15.4.2",
-    "react-codemirror": "^0.3.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-codemirror": "^1.0.0",
     "react-dom": "^15.4.2",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.0.5",
     "react-test-renderer": "^15.5.4",
     "redux": "^3.6.0",
-    "redux-logger": "^2.8.1",
+    "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.2.3",
     "redux-thunk": "^2.2.0",
-    "shallowequal": "^0.2.2"
+    "shallowequal": "^1.0.1"
   },
   "devDependencies": {
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^19.0.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-jest": "^20.0.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",
-    "browserify": "^14.1.0",
+    "browserify": "^14.4.0",
     "envify": "^4.0.0",
-    "eslint": "^3.16.0",
+    "eslint": "^4.0.0",
     "gulp": "^3.9.1",
-    "gulp-clean-css": "^3.0.3",
+    "gulp-clean-css": "^3.4.1",
     "gulp-eslint": "^3.0.1",
     "gulp-less": "^3.3.0",
     "gulp-livereload": "^3.8.1",
@@ -60,10 +60,10 @@
     "gulp-peg": "^0.2.0",
     "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sourcemaps": "^2.4.1",
+    "gulp-sourcemaps": "^2.6.0",
     "gulp-util": "^3.0.8",
-    "jest": "^19.0.0",
-    "react-addons-test-utils": "^15.4.2",
+    "jest": "^20.0.4",
+    "react-addons-test-utils": "^15.5.1",
     "uglifyify": "^3.0.4",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",

web/src/js/__tests__/components/FlowView/ToggleEditSpec.js

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux'
 import { startEdit, stopEdit } from '../../../ducks/ui/flow'
 import { TFlow, TStore } from '../../ducks/tutils'
 
+global.fetch = jest.fn()
 let tflow = new TFlow()
 
 describe('ToggleEdit Component', () => {
@@ -24,7 +25,7 @@ describe('ToggleEdit Component', () => {
 
     it('should handle click on stopEdit', () => {
         tree.children[0].props.onClick()
-        expect(store.getActions()).toEqual([stopEdit(tflow, true)])
+        expect(fetch).toBeCalled()
     })
 
     it('should handle click on startEdit', () => {

web/src/js/__tests__/ducks/ui/flowSpec.js

@@ -11,7 +11,7 @@ import reducer, {
                     displayLarge
                 } from '../../../ducks/ui/flow'
 
-import { select, updateFlow } from '../../../ducks/flows'
+import * as flowActions from '../../../ducks/flows'
 
 describe('flow reducer', () => {
     it('should return initial state', () => {
@@ -61,11 +61,11 @@ describe('flow reducer', () => {
     })
 
     it('should not change the contentview mode', () => {
-        expect(reducer({contentView: 'foo'}, select(1)).contentView).toEqual('foo')
+        expect(reducer({contentView: 'foo'}, flowActions.select(1)).contentView).toEqual('foo')
     })
 
     it('should change the contentview mode to auto after editing when a new flow will be selected', () => {
-        expect(reducer({contentView: 'foo', modifiedFlow : 'test_flow'}, select(1)).contentView).toEqual('Auto')
+        expect(reducer({contentView: 'foo', modifiedFlow : 'test_flow'}, flowActions.select(1)).contentView).toEqual('Auto')
     })
 
     it('should set update and merge the modifiedflow with the update values', () => {
@@ -84,7 +84,11 @@ describe('flow reducer', () => {
     it('should stop editing when the selected flow is updated', () => {
         let modifiedFlow = {id: 1}
         let updatedFlow = {id: 1}
-        expect(reducer({modifiedFlow}, stopEdit(updatedFlow, modifiedFlow)).modifiedFlow).toBeFalsy()
+        expect(reducer(
+            { modifiedFlow },
+            {type: flowActions.UPDATE, data: modifiedFlow}
+            ).modifiedFlow
+        ).toBeFalsy()
     })
 
     it('should set content view', () => {

web/src/js/app.jsx

@@ -9,13 +9,13 @@ import rootReducer from './ducks/index'
 import { add as addLog } from './ducks/eventLog'
 import useUrlState from './urlState'
 import WebSocketBackend from './backends/websocket'
+import { logger } from 'redux-logger'
 
 
 const middlewares = [thunk];
 
 if (process.env.NODE_ENV !== 'production') {
-  const createLogger = require('redux-logger');
-  middlewares.push(createLogger());
+  middlewares.push(logger);
 }
 
 // logger must be last

web/src/js/components/ContentView.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import * as ContentViews from './ContentView/ContentViews'
+import { Edit, ViewServer, ViewImage } from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ShowFullContentButton from './ContentView/ShowFullContentButton'
 
@@ -16,7 +16,7 @@ ContentView.propTypes = {
     message: PropTypes.object.isRequired,
 }
 
-ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
     const { flow, message, contentView, isDisplayLarge, displayLarge, onContentChange, readonly } = props
@@ -33,10 +33,15 @@ function ContentView(props) {
         return <MetaViews.ContentTooLarge {...props} onClick={displayLarge}/>
     }
 
-    const View = ContentViews[contentView] || ContentViews['ViewServer']
+    let view;
+    if(contentView === "Edit") {
+        view = <Edit flow={flow} message={message} onChange={onContentChange}/>
+    } else {
+        view = <ViewServer flow={flow} message={message} contentView={contentView}/>
+    }
     return (
         <div className="contentview">
-            <View flow={flow} message={message} contentView={contentView} readonly={readonly} onChange={onContentChange}/>
+            {view}
             <ShowFullContentButton/>
         </div>
     )

web/src/js/components/ContentView/ContentLoader.jsx

@@ -55,7 +55,7 @@ export default function withContentLoader(View) {
                 return this.setState({request: undefined, content: ""})
             }
 
-            let requestUrl = MessageUtils.getContentURL(props.flow, props.message, (View.name == 'ViewServer' ? props.contentView : undefined))
+            let requestUrl = MessageUtils.getContentURL(props.flow, props.message, props.contentView)
 
             // We use XMLHttpRequest instead of fetch() because fetch() is not (yet) abortable.
             let request = new XMLHttpRequest();

web/src/js/components/ContentView/ContentViews.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { setContentViewDescription, setContent } from '../../ducks/ui/flow'
-import ContentLoader from './ContentLoader'
+import withContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils'
 import CodeEditor from './CodeEditor'
 
@@ -28,7 +28,7 @@ Edit.propTypes = {
 function Edit({ content, onChange }) {
     return <CodeEditor content={content} onChange={onChange}/>
 }
-Edit = ContentLoader(Edit)
+Edit = withContentLoader(Edit)
 
 export class PureViewServer extends Component {
     static propTypes  = {
@@ -94,6 +94,6 @@ const ViewServer = connect(
         setContentViewDescription,
         setContent
     }
-)(ContentLoader(PureViewServer))
+)(withContentLoader(PureViewServer))
 
 export { Edit, ViewServer, ViewImage }

web/src/js/ducks/ui/flow.js

@@ -148,7 +148,6 @@ export function setContent(content){
     return { type: SET_CONTENT, content }
 }
 
-export function stopEdit(data, modifiedFlow) {
-    let diff = getDiff(data, modifiedFlow)
-    return {type: flowsActions.UPDATE, data, diff }
+export function stopEdit(flow, modifiedFlow) {
+    return flowsActions.update(flow, getDiff(flow, modifiedFlow))
 }