From 13fea13397db4617f4539ae468503502f4581bbd Mon Sep 17 00:00:00 2001
From: Nicolas <abramlujan@gmail.com>
Date: Wed, 3 Feb 2021 17:56:29 -0300
Subject: [PATCH] fix(responseBody): json response highlighting (#6871)

Refs #6508

* Add language prop to HighlightCode component

* Use language prop for JSON HighlightCode responses in response-body.jsx
---
 src/core/components/highlight-code.jsx | 4 +++-
 src/core/components/response-body.jsx  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 2d888c75699..414180cb94a 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -12,6 +12,7 @@ export default class HighlightCode extends Component {
     className: PropTypes.string,
     downloadable: PropTypes.bool,
     fileName: PropTypes.string,
+    language: PropTypes.string,
     canCopy: PropTypes.bool
   }
 
@@ -39,7 +40,7 @@ export default class HighlightCode extends Component {
   }
 
   render () {
-    let { value, className, downloadable, getConfigs, canCopy } = this.props
+    let { value, className, downloadable, getConfigs, canCopy, language } = this.props
 
     const config = getConfigs ? getConfigs() : {syntaxHighlight: {activated: true, theme: "agate"}}
 
@@ -47,6 +48,7 @@ export default class HighlightCode extends Component {
 
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
+          language={language}
           className={className + " microlight"}
           onWheel={this.preventYScrollingBeyondElement}
           style={getStyle(get(config, "syntaxHighlight.theme"))}
diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 013425e1992..88587321261 100644
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -94,13 +94,15 @@ export default class ResponseBody extends React.PureComponent {
       // Anything else (CORS)
     } else if (/json/i.test(contentType)) {
       // JSON
+      let language = null
       try {
         body = JSON.stringify(JSON.parse(content), null, "  ")
+        language = "json"
       } catch (error) {
         body = "can't parse JSON.  Raw result:\n\n" + content
       }
 
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
 
       // XML
     } else if (/xml/i.test(contentType)) {