added flow_content update

web/src/js/components/ContentView.jsx

@@ -5,9 +5,8 @@ import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
-import { setContentView, setDisplayLarge } from '../ducks/ui'
+import { setContentView, setDisplayLarge, setModifiedFlowContent } from '../ducks/ui'
 import CodeEditor from './common/CodeEditor'
-import {setModifiedFlowContent} from '../ducks/flows'
 
 ContentView.propTypes = {
     // It may seem a bit weird at the first glance:
@@ -20,7 +19,7 @@ ContentView.propTypes = {
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
-    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props
 
     if (message.contentLength === 0) {
         return <MetaViews.ContentEmpty {...props}/>
@@ -37,6 +36,12 @@ function ContentView(props) {
     const View = ContentViews[contentView]
 
     return (
+        <div>
+            {isFlowEditorOpen ? (
+                <ContentLoader flow={flow} message={message}>
+                        <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
+                    </ContentLoader>
+            ): (
                 <div>
                     {View.textView ? (
                         <ContentLoader flow={flow} message={message}>
@@ -48,11 +53,28 @@ function ContentView(props) {
                     <div className="view-options text-center">
                         <ViewSelector onSelectView={selectView} active={View} message={message}/>
                         &nbsp;
-                <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
+                        <a className="btn btn-default btn-xs"
+                           href={MessageUtils.getContentURL(flow, message)}
+                           title="Download the content of the flow.">
                             <i className="fa fa-download"/>
                         </a>
+                        &nbsp;
+                        <a  className="btn btn-default btn-xs"
+                            onClick={() => ContentView.fileInput.click()}
+                            title="Upload a file to replace the content."
+                        >
+                            <i className="fa fa-upload"/>
+                        </a>
+                        <input
+                            ref={ref => ContentView.fileInput = ref}
+                            className="hidden"
+                            type="file"
+                            onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}}
+                        />
                     </div>
                 </div>
+            )}
+        </div>
     )
 }
 
@@ -60,9 +82,11 @@ export default connect(
     state => ({
         contentView: state.ui.contentView,
         displayLarge: state.ui.displayLarge,
+        isFlowEditorOpen : state.ui.isFlowEditorOpen
     }),
     {
         selectView: setContentView,
         setDisplayLarge,
+        setModifiedFlowContent
     }
 )(ContentView)

web/src/js/components/FlowView/FlowEditorButton.jsx

@@ -4,21 +4,13 @@ import { connect } from 'react-redux'
 import {closeFlowEditor} from '../../ducks/ui.js'
 import {openFlowEditor} from '../../ducks/ui.js'
 
-// FlowEditorButton.propTypes = {
+FlowEditorButton.propTypes = {
-//     isFlowEditorOpen: PropTypes.bool.isRequired,
-//     content: PropTypes.string.isRequired,
-//     onContentChange: PropTypes.func.isRequired
-// }
-
-class FlowEditorButton extends Component{
-     static propTypes = {
     isFlowEditorOpen: PropTypes.bool.isRequired,
     content: PropTypes.string.isRequired,
     onContentChange: PropTypes.func.isRequired
-     }
+}
 
-    render(){
+function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor,  onContentChange, content }) {
-        let { isFlowEditorOpen, closeFlowEditor, openFlowEditor,  onContentChange, content } = this.props
     return (
         <div className="edit-flow-container">
             {isFlowEditorOpen ?
@@ -32,13 +24,12 @@ class FlowEditorButton extends Component{
             }
         </div>
     )
-    }
 }
 
 export default connect(
     state => ({
         isFlowEditorOpen: state.ui.isFlowEditorOpen,
-        content: state.flows.modifiedFlow.content
+        content: state.ui.modifiedFlow.content
     }),
     {
         closeFlowEditor,

web/src/js/components/FlowView/Messages.jsx

@@ -7,7 +7,7 @@ import ContentView from '../ContentView'
 import ValueEditor from '../ValueEditor'
 import Headers from './Headers'
 import * as flowActions  from '../../ducks/flows'
-import FlowEditorButton from './FlowEditorButton.jsx'
+import FlowEditorButton from './FlowEditorButton'
 
 
 class RequestLine extends Component {

web/src/js/ducks/ui.js

@@ -9,6 +9,9 @@ export const UPDATE_QUERY = 'UI_UPDATE_QUERY'
 export const SELECT_TAB = 'UI_SELECT_TAB'
 export const SET_PROMPT = 'UI_SET_PROMPT'
 export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE'
+export const OPEN_FLOW_EDITOR= 'UI_OPEN_FLOW_EDITOR'
+export const CLOSE_FLOW_EDITOR = 'UI_CLOSE_FLOW_EDITOR'
+export const SET_MODIFIED_FLOW_CONTENT = 'UI_SET_MODIFIED_FLOW'
 
 const defaultState = {
     activeMenu: 'Start',
@@ -18,7 +21,9 @@ const defaultState = {
     promptOpen: false,
     contentView: 'ViewAuto',
     query: {},
-    panel: 'request'
+    panel: 'request',
+    modifiedFlow: {headers: "", content: ""},
+    isFlowEditorOpen: false
 }
 
 export default function reducer(state = defaultState, action) {
@@ -31,9 +36,10 @@ export default function reducer(state = defaultState, action) {
             }
 
         case flowsActions.SELECT:
+            let s = {...state, isFlowEditorOpen: false}
             if (action.flowIds.length && !state.isFlowSelected) {
                 return {
-                    ...state,
+                    ...s,
                     displayLarge: false,
                     activeMenu: 'Flow',
                     isFlowSelected: true,
@@ -46,14 +52,14 @@ export default function reducer(state = defaultState, action) {
                     activeMenu = 'Start'
                 }
                 return {
-                    ...state,
+                    ...s,
                     activeMenu,
                     isFlowSelected: false,
                 }
             }
 
             return {
-                ...state,
+                ...s,
                 displayLarge: false,
             }
 
@@ -78,6 +84,7 @@ export default function reducer(state = defaultState, action) {
         case SELECT_TAB:
             return {
                 ...state,
+                isFlowEditorOpen: false,
                 panel: action.panel
             }
 
@@ -92,7 +99,21 @@ export default function reducer(state = defaultState, action) {
                 ...state,
                 displayLarge: action.displayLarge,
             }
-
+        case OPEN_FLOW_EDITOR:
+            return {
+                ...state,
+                isFlowEditorOpen: true
+            }
+        case CLOSE_FLOW_EDITOR:
+            return {
+                ...state,
+                isFlowEditorOpen: false
+            }
+        case SET_MODIFIED_FLOW_CONTENT:
+            return{
+                ...state,
+                modifiedFlow: {...state.modifiedFlow, content: action.content}
+            }
         default:
             return state
     }
@@ -126,6 +147,18 @@ export function setDisplayLarge(displayLarge) {
     return { type: SET_DISPLAY_LARGE, displayLarge }
 }
 
+export function openFlowEditor(){
+    return { type: OPEN_FLOW_EDITOR }
+}
+
+export function closeFlowEditor(){
+    return { type: CLOSE_FLOW_EDITOR }
+}
+
+export function setModifiedFlowContent(content) {
+    return { type: SET_MODIFIED_FLOW_CONTENT, content }
+}
+
 export function onKeyDown(e) {
     if (e.ctrlKey) {
         return () => {