Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-23 00:01:36 +00:00
Code Issues Projects Releases Wiki Activity

moved editor to raw_view mode, add content_file_upload

Browse Source
This commit is contained in:
Clemens 2016-07-21 19:13:16 +02:00
parent 61f192434f
commit 70ca10b423
6 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/js/components/ContentView.jsx
View File

@ -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,

11
web/src/js/components/ContentView/ContentViews.jsx
View File

@ -29,9 +29,8 @@ ViewRaw.propTypes = {
content: React.PropTypes.string.isRequired,
}
export function ViewRaw({ content, isFlowEditorOpen, readonly }) {
let showEditor = isFlowEditorOpen && !readonly
return showEditor ? <CodeEditor content={content} onChange={content =>alert(content)}/> : <pre>{content}</pre>
export function ViewRaw({ content, readonly, onChange }) {
return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/>
}
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} />
}
}

18
web/src/js/components/FlowView/Messages.jsx
View File

@ -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>

7
web/src/js/components/FlowView/ToggleEdit.jsx
View File

@ -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,

4
web/src/js/components/common/CodeEditor.jsx
View File

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

26
web/src/js/ducks/ui/flow.js
View File

@ -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 })
})