diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/index.js index e99cc0576..47cc74cd7 100644 --- a/packages/bruno-app/src/components/RequestPane/WsBody/index.js +++ b/packages/bruno-app/src/components/RequestPane/WsBody/index.js @@ -1,4 +1,4 @@ -import { get } from 'lodash'; +import { get, invert } from 'lodash'; import { updateRequestBody } from 'providers/ReduxStore/slices/collections'; import { saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import { useTheme } from 'providers/Theme'; @@ -8,11 +8,20 @@ import { IconChevronDown, IconChevronUp, IconPlus, IconTrash, IconWand } from '@ import CodeEditor from 'components/CodeEditor/index'; import ToolHint from 'components/ToolHint/index'; import { applyEdits, format } from 'jsonc-parser'; +import xmlFormat from 'xml-formatter'; import { toastError } from 'utils/common/error'; import StyledWrapper from './StyledWrapper'; import WSRequestBodyMode from './BodyMode/index'; import { autoDetectLang } from 'utils/codemirror/lang-detect'; +const TYPE_BY_DECODER = { + base64: 'binary', + json: 'json', + xml: 'xml' +}; + +const DECODER_BY_TYPE = invert(TYPE_BY_DECODER) + const SingleWSMessage = ({ message, item, @@ -29,7 +38,7 @@ const SingleWSMessage = ({ const preferences = useSelector((state) => state.app.preferences); const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); - const { name, content } = message; + const { name, content, decoder } = message; const [messageFormat, setMessageFormat] = useState(autoDetectLang(content)); const onEdit = (value) => { @@ -37,6 +46,7 @@ const SingleWSMessage = ({ currentMessages[index] = { name: name ? name : `message ${index + 1}`, + decoder: DECODER_BY_TYPE[messageFormat], content: value }; @@ -65,30 +75,13 @@ const SingleWSMessage = ({ ); }; - const onPrettify = () => { - try { - const edits = format(content, undefined, { tabSize: 2, insertSpaces: true }); - const prettyBodyJson = applyEdits(content, edits); - - const currentMessages = [...(body.ws || [])]; - currentMessages[index] = { - name: name ? name : `message ${index + 1}`, - content: prettyBodyJson - }; - dispatch( - updateRequestBody({ - content: currentMessages, - itemUid: item.uid, - collectionUid: collection.uid - }) - ); - } catch (e) { - toastError(new Error('Unable to prettify. Invalid JSON format.')); - } - }; - const getContainerHeight = canClientSendMultipleMessages && body.ws.length > 1 ? `${isCollapsed ? '' : 'h-80'}` : 'h-full'; + + let codeType = messageFormat; + if (TYPE_BY_DECODER[decoder]){ + codeType = TYPE_BY_DECODER[decoder]; + } const codemirrorMode = { text: 'application/text', @@ -96,6 +89,54 @@ const SingleWSMessage = ({ json: 'application/ld+json' }; + + const onPrettify = () => { + if(codeType === "json"){ + try { + const edits = format(content, undefined, { tabSize: 2, insertSpaces: true }); + const prettyBodyJson = applyEdits(content, edits); + + const currentMessages = [...(body.ws || [])]; + currentMessages[index] = { + name: name ? name : `message ${index + 1}`, + content: prettyBodyJson + }; + dispatch( + updateRequestBody({ + content: currentMessages, + itemUid: item.uid, + collectionUid: collection.uid + }) + ); + } catch (e) { + toastError(new Error('Unable to prettify. Invalid JSON format.')); + } + } + + if (codeType === "xml") { + try { + const prettyBodyXML = xmlFormat(content, { collapseContent: true }); + + const currentMessages = [...(body.ws || [])]; + currentMessages[index] = { + name: name ? name : `message ${index + 1}`, + content: prettyBodyXML + }; + + dispatch( + updateRequestBody({ + content: currentMessages, + itemUid: item.uid, + collectionUid: collection.uid + }) + ); + } catch (e) { + toastError(new Error('Unable to prettify. Invalid XML format.')); + } + } + }; + + return (