aboutsummaryrefslogtreecommitdiffstats
path: root/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/src')
-rw-r--r--web/src/js/components/ContentView.jsx54
-rw-r--r--web/src/js/components/FlowView/FlowEditorButton.jsx49
-rw-r--r--web/src/js/components/FlowView/Messages.jsx2
-rw-r--r--web/src/js/ducks/ui.js43
4 files changed, 98 insertions, 50 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 0b93d3f0..766de26f 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/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}/>
@@ -38,20 +37,43 @@ function ContentView(props) {
return (
<div>
- {View.textView ? (
+ {isFlowEditorOpen ? (
<ContentLoader flow={flow} message={message}>
- <View content="" />
- </ContentLoader>
- ) : (
- <View flow={flow} message={message} />
+ <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
+ </ContentLoader>
+ ): (
+ <div>
+ {View.textView ? (
+ <ContentLoader flow={flow} message={message}>
+ <View content="" />
+ </ContentLoader>
+ ) : (
+ <View flow={flow} message={message} />
+ )}
+ <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)}
+ 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 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)}>
- <i className="fa fa-download"/>
- </a>
- </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)
diff --git a/web/src/js/components/FlowView/FlowEditorButton.jsx b/web/src/js/components/FlowView/FlowEditorButton.jsx
index e9c75535..3d0d1d16 100644
--- a/web/src/js/components/FlowView/FlowEditorButton.jsx
+++ b/web/src/js/components/FlowView/FlowEditorButton.jsx
@@ -4,41 +4,32 @@ import { connect } from 'react-redux'
import {closeFlowEditor} from '../../ducks/ui.js'
import {openFlowEditor} from '../../ducks/ui.js'
-// 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
- }
+FlowEditorButton.propTypes = {
+ isFlowEditorOpen: PropTypes.bool.isRequired,
+ content: PropTypes.string.isRequired,
+ onContentChange: PropTypes.func.isRequired
+}
- render(){
- let { isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content } = this.props
- return (
- <div className="edit-flow-container">
- {isFlowEditorOpen ?
- <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}>
- <i className="fa fa-check"/>
- </a>
- :
- <a className="edit-flow" onClick={() => openFlowEditor()}>
- <i className="fa fa-pencil"/>
- </a>
- }
- </div>
- )
- }
+function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content }) {
+ return (
+ <div className="edit-flow-container">
+ {isFlowEditorOpen ?
+ <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}>
+ <i className="fa fa-check"/>
+ </a>
+ :
+ <a className="edit-flow" onClick={() => openFlowEditor()}>
+ <i className="fa fa-pencil"/>
+ </a>
+ }
+ </div>
+ )
}
export default connect(
state => ({
isFlowEditorOpen: state.ui.isFlowEditorOpen,
- content: state.flows.modifiedFlow.content
+ content: state.ui.modifiedFlow.content
}),
{
closeFlowEditor,
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 8cb918a8..2f03c712 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/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 {
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js
index f745f0af..ccd17eb6 100644
--- a/web/src/js/ducks/ui.js
+++ b/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 () => {
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-22 13:37:17 +0000