Merge pull request #196 from mirkogolze/main

check response type for ResponsePane CodeEditor

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -35,7 +35,7 @@ const EnvironmentSelector = ({ collection }) => {
  toast.success(`No Environments are active now`);
  }
  })
- .catch((err) => console.log(err) && toast.error('An error occured while selecting the environment'));
+ .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
  };
 
  return (
@@ -64,7 +64,7 @@ const EnvironmentSelector = ({ collection }) => {
  }}
  >
  <IconDatabaseOff size={18} strokeWidth={1.5} />
- <span className='ml-2'>No Environment</span>
+ <span className="ml-2">No Environment</span>
  </div>
  <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
  <div className="pr-2 text-gray-600">

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -6,14 +6,12 @@ import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 
 import StyledWrapper from './StyledWrapper';
 
-const QueryResult = ({ item, collection, value, width, disableRunEventListener }) => {
- const {
- storedTheme
- } = useTheme();
+const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
+ const { storedTheme } = useTheme();
  const dispatch = useDispatch();
 
  const onRun = () => {
- if(disableRunEventListener) {
+ if (disableRunEventListener) {
  return;
  }
  dispatch(sendRequest(item, collection.uid));
@@ -22,7 +20,7 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener }
  return (
  <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
  <div className="h-full">
- <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} readOnly />
+ <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} mode={mode} readOnly />
  </div>
  </StyledWrapper>
  );

packages/bruno-app/src/components/ResponsePane/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import find from 'lodash/find';
 import classnames from 'classnames';
 import { safeStringifyJSON } from 'utils/common';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryResult from './QueryResult';
 import Overlay from './Overlay';
@@ -36,18 +36,21 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
  const getTabPanel = (tab) => {
  switch (tab) {
  case 'response': {
- return <QueryResult
- item={item}
- collection={collection}
- width={rightPaneWidth}
- value={response.data ? safeStringifyJSON(response.data, true) : ''}
- />;
+ return (
+ <QueryResult
+ item={item}
+ collection={collection}
+ width={rightPaneWidth}
+ value={response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''}
+ mode={getContentType(response.headers)}
+ />
+ );
  }
  case 'headers': {
  return <ResponseHeaders headers={response.headers} />;
  }
  case 'timeline': {
- return <Timeline request={item.requestSent} response={item.response}/>;
+ return <Timeline request={item.requestSent} response={item.response} />;
  }
  case 'tests': {
  return <TestResults results={item.testResults} assertionResults={item.assertionResults} />;
@@ -81,7 +84,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
 
  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
  if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
- return <div className="pb-4 px-4">An error occured!</div>;
+ return <div className="pb-4 px-4">An error occurred!</div>;
  }
 
  const getTabClassname = (tabName) => {
@@ -90,6 +93,28 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
  });
  };
 
+ const getContentType = (headers) => {
+ if (headers && headers.length) {
+ let contentType = headers
+ .filter((header) => header[0].toLowerCase() === 'content-type')
+ .map((header) => {
+ return header[1];
+ });
+ if (contentType && contentType.length) {
+ if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?json/.test(contentType[0])) {
+ return 'application/ld+json';
+ } else if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?xml/.test(contentType[0])) {
+ return 'application/xml';
+ }
+ }
+ }
+ return '';
+ };
+
+ const isJson = (headers) => {
+ return getContentType(headers) === 'application/ld+json';
+ };
+
  return (
  <StyledWrapper className="flex flex-col h-full relative">
  <div className="flex items-center px-3 tabs" role="tablist">

packages/bruno-cli/src/runner/prepare-request.js

@@ -2,9 +2,13 @@ const { get, each, filter } = require('lodash');
 
 const prepareRequest = (request) => {
  const headers = {};
+ let contentTypeDefined = false;
  each(request.headers, (h) => {
  if (h.enabled) {
  headers[h.name] = h.value;
+ if (h.name.toLowerCase() === 'content-type') {
+ contentTypeDefined = true;
+ }
  }
  });
 
@@ -17,7 +21,9 @@ const prepareRequest = (request) => {
  request.body = request.body || {};
 
  if (request.body.mode === 'json') {
- axiosRequest.headers['content-type'] = 'application/json';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'application/json';
+ }
  try {
  axiosRequest.data = JSON.parse(request.body.json);
  } catch (ex) {
@@ -26,12 +32,16 @@ const prepareRequest = (request) => {
  }
 
  if (request.body.mode === 'text') {
- axiosRequest.headers['content-type'] = 'text/plain';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'text/plain';
+ }
  axiosRequest.data = request.body.text;
  }
 
  if (request.body.mode === 'xml') {
- axiosRequest.headers['content-type'] = 'text/xml';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'text/xml';
+ }
  axiosRequest.data = request.body.xml;
  }
 
@@ -56,7 +66,9 @@ const prepareRequest = (request) => {
  query: get(request, 'body.graphql.query'),
  variables: JSON.parse(get(request, 'body.graphql.variables') || '{}')
  };
- axiosRequest.headers['content-type'] = 'application/json';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'application/json';
+ }
  axiosRequest.data = graphqlQuery;
  }
 

packages/bruno-electron/src/ipc/network/prepare-request.js

@@ -2,9 +2,13 @@ const { get, each, filter } = require('lodash');
 
 const prepareRequest = (request) => {
  const headers = {};
+ let contentTypeDefined = false;
  each(request.headers, (h) => {
  if (h.enabled) {
  headers[h.name] = h.value;
+ if (h.name.toLowerCase() === 'content-type') {
+ contentTypeDefined = true;
+ }
  }
  });
 
@@ -15,7 +19,9 @@ const prepareRequest = (request) => {
  };
 
  if (request.body.mode === 'json') {
- axiosRequest.headers['content-type'] = 'application/json';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'application/json';
+ }
  try {
  axiosRequest.data = JSON.parse(request.body.json);
  } catch (ex) {
@@ -24,12 +30,16 @@ const prepareRequest = (request) => {
  }
 
  if (request.body.mode === 'text') {
- axiosRequest.headers['content-type'] = 'text/plain';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'text/plain';
+ }
  axiosRequest.data = request.body.text;
  }
 
  if (request.body.mode === 'xml') {
- axiosRequest.headers['content-type'] = 'text/xml';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'text/xml';
+ }
  axiosRequest.data = request.body.xml;
  }
 
@@ -54,7 +64,9 @@ const prepareRequest = (request) => {
  query: get(request, 'body.graphql.query'),
  variables: JSON.parse(get(request, 'body.graphql.variables') || '{}')
  };
- axiosRequest.headers['content-type'] = 'application/json';
+ if (!contentTypeDefined) {
+ axiosRequest.headers['content-type'] = 'application/json';
+ }
  axiosRequest.data = graphqlQuery;
  }