holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: support for sending xml and text request body (resolves #10)

Browse Source
This commit is contained in:
Anoop M D 2022-10-02 04:58:43 +05:30
parent 6e926f0ba6
commit 7f0f496bb4
8 changed files with 156 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
renderer/components/CodeEditor/index.js
View File

@ -31,7 +31,7 @@ export default class QueryEditor extends React.Component {
lineNumbers: true,
lineWrapping: true,
tabSize: 2,
mode: 'application/ld+json',
mode: this.props.mode || 'application/ld+json',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
@ -89,6 +89,7 @@ export default class QueryEditor extends React.Component {
) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
this.editor.setOption("mode", this.props.mode);
}
this.ignoreChangeEvent = false;
}

2
renderer/components/RequestPane/HttpRequestPane/index.js
View File

@ -67,7 +67,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
{/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</div> */}
{focusedTab.requestPaneTab === 'body' ? (
<div className="flex flex-grow justify-end items-center">
<RequestBodyMode />
<RequestBodyMode item={item} collection={collection}/>
</div>
) : null }
</div>

25
renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js
View File

@ -1,20 +1,35 @@
import React, { useRef, forwardRef } from 'react';
import get from 'lodash/get';
import { IconCaretDown } from '@tabler/icons';
import Dropdown from 'components/Dropdown';
import { useDispatch } from 'react-redux';
import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
import { humanizeRequestBodyMode } from 'utils/collections';
import StyledWrapper from './StyledWrapper';
const RequestBodyMode = () => {
const RequestBodyMode = ({item, collection}) => {
const dispatch = useDispatch();
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
const Icon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
JSON <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
{humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
</div>
);
});
const onModeChange = (value) => {
dispatch(updateRequestBodyMode({
itemUid: item.uid,
collectionUid: collection.uid,
mode: value
}));
};
return(
<StyledWrapper>
<div className="inline-flex items-center cursor-pointer body-mode-selector">
@ -24,11 +39,13 @@ const RequestBodyMode = () => {
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('multipartForm');
}}>
Multipart Form
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('formUrlEncoded');
}}>
Form Url Encoded
</div>
@ -37,16 +54,19 @@ const RequestBodyMode = () => {
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('json');
}}>
JSON
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('xml');
}}>
XML
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('text');
}}>
TEXT
</div>
@ -55,6 +75,7 @@ const RequestBodyMode = () => {
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
onModeChange('none');
}}>
No Body
</div>

34
renderer/components/RequestPane/RequestBody/index.js
View File

@ -7,11 +7,11 @@ import StyledWrapper from './StyledWrapper';
const RequestBody = ({item, collection}) => {
const dispatch = useDispatch();
const bodyContent = item.draft ? get(item, 'draft.request.body.content') : get(item, 'request.body.content');
const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
const onEdit = (value) => {
dispatch(updateRequestBody({
mode: 'json',
content: value,
itemUid: item.uid,
collectionUid: collection.uid,
@ -19,11 +19,37 @@ const RequestBody = ({item, collection}) => {
};
const onRun = () => dispatch(sendRequest(item, collection.uid));;
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));;
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
if(['json', 'xml', 'text'].includes(bodyMode)) {
let codeMirrorMode = {
json: 'application/ld+json',
text: 'application/text',
xml: 'application/xml'
};
let bodyContent = {
json: body.json,
text: body.text,
xml: body.xml
};
return(
<StyledWrapper className="w-full">
<CodeEditor
value={bodyContent[bodyMode] || ''}
onEdit={onEdit}
onRun={onRun}
onSave={onSave}
mode={codeMirrorMode[bodyMode]}
/>
</StyledWrapper>
);
}
return(
<StyledWrapper className="w-full">
<CodeEditor value={bodyContent || ''} onEdit={onEdit} onRun={onRun} onSave={onSave}/>
No Body
</StyledWrapper>
);
};

2
renderer/pageComponents/Index/index.js
View File

@ -9,7 +9,7 @@ import StyledWrapper from './StyledWrapper';
const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
if(!SERVER_RENDERED) {
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/xml/xml');
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/fold/brace-fold');
require('codemirror/addon/fold/foldgutter');

45
renderer/providers/ReduxStore/slices/collections.js
View File

@ -343,6 +343,20 @@ export const collectionsSlice = createSlice({
}
}
},
updateRequestBodyMode: (state, action) => {
const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
if(collection) {
const item = findItemInCollection(collection, action.payload.itemUid);
if(item && isItemARequest(item)) {
if(!item.draft) {
item.draft = cloneDeep(item);
}
item.draft.request.body.mode = action.payload.mode;
}
}
},
updateRequestBody: (state, action) => {
const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
@ -353,9 +367,27 @@ export const collectionsSlice = createSlice({
if(!item.draft) {
item.draft = cloneDeep(item);
}
item.draft.request.body = {
mode: action.payload.mode,
content: action.payload.content
switch(item.draft.request.body.mode) {
case 'json': {
item.draft.request.body.json = action.payload.content;
break;
}
case 'text': {
item.draft.request.body.text = action.payload.content;
break;
}
case 'xml': {
item.draft.request.body.xml = action.payload.content;
break;
}
case 'formUrlEncoded': {
item.draft.request.body.formUrlEncoded = action.payload.content;
break;
}
case 'multipartForm': {
item.draft.request.body.multipartForm = action.payload.content;
break;
}
}
}
}
@ -397,6 +429,7 @@ export const {
addRequestHeader,
updateRequestHeader,
deleteRequestHeader,
updateRequestBodyMode,
updateRequestBody,
updateRequestMethod
} = collectionsSlice.actions;
@ -520,7 +553,11 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
headers: [],
body: {
mode: 'none',
content: ''
json: null,
text: null,
xml: null,
multipartForm: null,
formUrlEncoded: null
}
}
};

42
renderer/utils/collections/index.js
View File

@ -147,7 +147,11 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
params: copyQueryParams(si.draft.request.params),
body: {
mode: si.draft.request.body.mode,
content: replaceTabsWithSpaces(si.draft.request.body.content)
json: si.draft.request.body.json,
text: si.draft.request.body.text,
xml: si.draft.request.body.xml,
multipartForm: si.draft.request.body.multipartForm,
xmformUrlEncodedl: si.draft.request.body.formUrlEncoded
}
};
}
@ -160,14 +164,18 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
params: copyQueryParams(si.request.params),
body: {
mode: si.request.body.mode,
content: replaceTabsWithSpaces(si.request.body.content)
json: si.request.body.json,
text: si.request.body.text,
xml: si.request.body.xml,
multipartForm: si.request.body.multipartForm,
xmformUrlEncodedl: si.request.body.formUrlEncoded
}
}
};
}
if(di.request && di.request.body.mode === 'json') {
di.request.body.content = replaceTabsWithSpaces(di.request.body.content);
di.request.body.json = replaceTabsWithSpaces(di.request.body.json);
}
destItems.push(di);
@ -214,3 +222,31 @@ export const isItemARequest = (item) => {
export const isItemAFolder = (item) => {
return !item.hasOwnProperty('request') && item.type === 'folder';
};
export const humanizeRequestBodyMode = (mode) => {
let label = 'No Body';
switch(mode) {
case 'json': {
label = 'JSON';
break;
}
case 'text': {
label = 'TEXT';
break;
}
case 'xml': {
label = 'XML';
break;
}
case 'formUrlEncoded': {
label = 'Form Url Encoded';
break;
}
case 'multipartForm': {
label = 'Multipart Form';
break;
}
}
return label;
};

21
renderer/utils/network/index.js
View File

@ -39,9 +39,26 @@ const sendHttpRequest = async (request) => {
headers: headers
};
if(request.body && request.body.mode === 'json' && request.body.content) {
options.data = JSON.parse(request.body.content);
if(request.body.mode === 'json') {
options.headers['Content-Type'] = 'application/json';
try {
options.data = JSON.parse(request.body.json);
} catch (ex) {
options.data = request.body.json;
}
}
if(request.body.mode === 'text') {
options.headers['Content-Type'] = 'text/plain';
options.data = request.body.text;
}
if(request.body.mode === 'xml') {
options.headers['Content-Type'] = 'text/xml';
options.data = request.body.xml;
}
console.log('>>> Sending Request');
console.log(request);
ipcRenderer