3 files changed, 23 insertions, 8 deletions
diff --git a/web/src/js/components/FlowView/Headers.jsx b/web/src/js/components/FlowView/Headers.jsx
index 706dd404..2e181383 100644
--- a/web/src/js/components/FlowView/Headers.jsx
+++ b/web/src/js/components/FlowView/Headers.jsx
@@ -126,7 +126,8 @@ export default class Headers extends Component {
                                 onDone={val => this.onChange(i, 0, val)}
                                 onRemove={event => this.onRemove(i, 0, event)}
                                 onTab={event => this.onTab(i, 0, event)}
-                            />:
+                            />
+                            <span className="header-colon">:</span>
                         </td>
                         <td className="header-value">
                             <HeaderEditor
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 133b2883..9de25b5b 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -10,6 +10,7 @@ import ValueEditor from '../ValueEditor/ValueEditor'
 
 import Headers from './Headers'
 import { startEdit, updateEdit } from '../../ducks/ui/flow'
+import * as FlowActions from '../../ducks/flows'
 import ToggleEdit from './ToggleEdit'
 
 function RequestLine({ flow, readonly, updateFlow }) {
@@ -73,12 +74,13 @@ const Message = connect(
     }),
     {
         updateFlow: updateEdit,
+        uploadContent: FlowActions.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 +96,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 +136,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">
@@ -144,7 +151,13 @@ export class Response extends Component {
                     onChange={headers => updateFlow({ response: { headers } })}
                 />
                 <hr/>
-                <ContentView flow={flow} message={flow.response}/>
+                <ContentView
+                    readonly={!isEdit}
+                    flow={flow}
+                    onContentChange={content => updateFlow({ response: {content}})}
+                    uploadContent={content => uploadContent(flow, content, "response")}
+                    message={flow.response}
+                />
             </section>
         )
     }
diff --git a/web/src/js/components/FlowView/ToggleEdit.jsx b/web/src/js/components/FlowView/ToggleEdit.jsx
index 0c8cbbd8..9016348e 100644
--- a/web/src/js/components/FlowView/ToggleEdit.jsx
+++ b/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, modifiedFlow }) {
     return (
         <div className="edit-flow-container">
             {isEdit ?
-                <a className="edit-flow" onClick={() => stopEdit(flow)}>
+                <a className="edit-flow" onClick={() => stopEdit(flow, modifiedFlow)}>
                     <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]]
+        modifiedFlow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
+        flow: state.flows.byId[state.flows.selected[0]]
     }),
     {
         startEdit,