moved editor to raw_view mode, add content_file_upload

web/src/js/components/ContentView.jsx

@@ -18,7 +18,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, onContentChange, readonly, isFlowEditorOpen } = props
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, uploadContent, onContentChange, readonly } = props
 
     if (message.contentLength === 0) {
         return <MetaViews.ContentEmpty {...props}/>
@@ -38,10 +38,10 @@ function ContentView(props) {
         <div>
             {View.textView ? (
                 <ContentLoader flow={flow} message={message}>
-                    <View readonly={readonly} isFlowEditorOpen={isFlowEditorOpen} content="" />
+                    <View readonly={readonly} onChange={onContentChange} content="" />
                 </ContentLoader>
             ) : (
-                <View flow={flow} message={message} />
+                <View flow={flow} readonly={readonly} message={message} />
             )}
             <div className="view-options text-center">
                 <ViewSelector onSelectView={selectView} active={View} message={message}/>
@@ -62,7 +62,7 @@ function ContentView(props) {
                     ref={ref => ContentView.fileInput = ref}
                     className="hidden"
                     type="file"
-                    onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}}
+                    onChange={e => {if(e.target.files.length > 0) uploadContent(e.target.files[0])}}
                 />
             </div>
         </div>
@@ -73,7 +73,6 @@ export default connect(
     state => ({
         contentView: state.ui.flow.contentView,
         displayLarge: state.ui.flow.displayLarge,
-        isFlowEditorOpen : !!state.ui.flow.modifiedFlow // FIXME
     }),
     {
         selectView: setContentView,

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

@@ -29,9 +29,8 @@ ViewRaw.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
 
-export function ViewRaw({ content, isFlowEditorOpen, readonly }) {
+export function ViewRaw({ content, readonly, onChange }) {
-    let showEditor = isFlowEditorOpen && !readonly
+    return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/>
-    return showEditor ? <CodeEditor content={content} onChange={content =>alert(content)}/> : <pre>{content}</pre>
 }
 
 ViewJSON.textView = true
@@ -61,12 +60,12 @@ ViewAuto.propTypes = {
     flow: React.PropTypes.object.isRequired,
 }
 
-export function ViewAuto({ message, flow }) {
+export function ViewAuto({ message, flow, readonly }) {
     const View = ViewAuto.findView(message)
     if (View.textView) {
-        return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader>
+        return <ContentLoader message={message} flow={flow}><View readonly={readonly}  content="" /></ContentLoader>
     } else {
-        return <View message={message} flow={flow} />
+        return <View readonly={readonly} message={message} flow={flow} />
     }
 }
 

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

@@ -9,7 +9,7 @@ import ValidateEditor from '../ValueEditor/ValidateEditor'
 import ValueEditor from '../ValueEditor/ValueEditor'
 
 import Headers from './Headers'
-import { startEdit, updateEdit } from '../../ducks/ui/flow'
+import { startEdit, updateEdit, uploadContent } from '../../ducks/ui/flow'
 import ToggleEdit from './ToggleEdit'
 
 function RequestLine({ flow, readonly, updateFlow }) {
@@ -68,17 +68,18 @@ function ResponseLine({ flow, readonly, updateFlow }) {
 
 const Message = connect(
     state => ({
-        flow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
+        flow: state.flows.byId[state.flows.selected[0]],
         isEdit: !!state.ui.flow.modifiedFlow,
     }),
     {
         updateFlow: updateEdit,
+        uploadContent: uploadContent
     }
 )
 
 export class Request extends Component {
     render() {
-        const { flow, isEdit, updateFlow } = this.props
+        const { flow, isEdit, updateFlow, uploadContent } = this.props
 
         return (
             <section className="request">
@@ -94,7 +95,12 @@ export class Request extends Component {
                 />
 
                 <hr/>
-                <ContentView flow={flow} message={flow.request}/>
+                <ContentView
+                    readonly={!isEdit}
+                    flow={flow}
+                    onContentChange={content => updateFlow({ request: {content}})}
+                    uploadContent={content => uploadContent(flow, content, "request")}
+                    message={flow.request}/>
             </section>
         )
     }
@@ -129,7 +135,7 @@ Request = Message(Request)
 
 export class Response extends Component {
     render() {
-        const { flow, isEdit, updateFlow } = this.props
+        const { flow, isEdit, updateFlow, uploadContent } = this.props
 
         return (
             <section className="response">
@@ -147,6 +153,8 @@ export class Response extends Component {
                 <ContentView
                     readonly={!isEdit}
                     flow={flow}
+                    onContentChange={content => updateFlow({ response: {content}})}
+                    uploadContent={content => uploadContent(flow, content, "response")}
                     message={flow.response}
                 />
             </section>

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

@@ -10,11 +10,11 @@ ToggleEdit.propTypes = {
     stopEdit: PropTypes.func.isRequired,
 }
 
-function ToggleEdit({ isEdit, startEdit, stopEdit, flow }) {
+function ToggleEdit({ isEdit, startEdit, stopEdit, flow, old_flow }) {
     return (
         <div className="edit-flow-container">
             {isEdit ?
-                <a className="edit-flow" onClick={() => stopEdit(flow)}>
+                <a className="edit-flow" onClick={() => stopEdit(flow, old_flow)}>
                     <i className="fa fa-check"/>
                 </a>
                 :
@@ -29,7 +29,8 @@ function ToggleEdit({ isEdit, startEdit, stopEdit, flow }) {
 export default connect(
     state => ({
         isEdit: !!state.ui.flow.modifiedFlow,
-        flow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]]
+        flow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
+        old_flow: state.flows.byId[state.flows.selected[0]]
     }),
     {
         startEdit,

web/src/js/components/common/CodeEditor.jsx

@@ -13,10 +13,6 @@ export default class CodeEditor extends Component{
         super(props)
     }
 
-    componentWillMount(){
-        this.props.onChange(this.props.content)
-    }
-
     render() {
         let options = {
             lineNumbers: true

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

@@ -88,9 +88,31 @@ export function updateEdit(update) {
     return { type: UPDATE_EDIT, update }
 }
 
-export function stopEdit(flow) {
+export function uploadContent(flow, content, type){
     return (dispatch) => {
-        dispatch(flowsActions.update(flow, flow)).then(() => {
+            dispatch(flowsActions.updateContent(flow, content, type)).then( () => {
+            dispatch(flowsActions.updateFlow(flow))
+            dispatch({ type: STOP_EDIT })
+        })
+    }
+}
+
+export function stopEdit(modified_flow, old_flow) {
+    //make diff of modified_flow and old_flow
+    return (dispatch) => {
+        let flow = {...modified_flow}
+
+        if (flow.response.content) {
+            dispatch(flowsActions.updateContent(flow, flow.response.content, "response"))
+            flow.response = _.omit(flow.response, "content")
+        }
+        if (flow.request.content) {
+            dispatch(flowsActions.updateContent(flow, flow.request.content, "request"))
+            flow.request = _.omit(flow.request, "content")
+        }
+
+
+        dispatch(flowsActions.update(flow)).then(() => {
             dispatch(flowsActions.updateFlow(flow))
             dispatch({ type: STOP_EDIT })
         })