fix(syntaxHighlighter): request and response examples for json cases (#7199)

* OAS 2 request and response examples for json cases
* OAS 3 request and response examples for json cases
* OAS2 and OAS3 tests
* jsonParse utils for syntax highlighting

src/core/components/param-body.jsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { fromJS, List } from "immutable"
 import { getSampleSchema } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
 
 const NOOP = Function.prototype
 
@@ -112,6 +113,11 @@ export default class ParamBody extends PureComponent {
     let consumes = this.props.consumes && this.props.consumes.size ? this.props.consumes : ParamBody.defaultProp.consumes
 
     let { value, isEditBox } = this.state
+    let language = null
+    let testValueForJson = getKnownSyntaxHighlighterLanguage(value)
+    if (testValueForJson) {
+      language = "json"
+    }
 
     return (
       <div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
@@ -119,8 +125,9 @@ export default class ParamBody extends PureComponent {
           isEditBox && isExecute
             ? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>
             : (value && <HighlightCode className="body-param__example"
-                               getConfigs={ getConfigs }
-                               value={ value }/>)
+                          language={ language }
+                          getConfigs={ getConfigs }
+                          value={ value }/>)
         }
         <div className="body-param-options">
           {

src/core/components/response-body.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import formatXml from "xml-but-prettier"
 import toLower from "lodash/toLower"
 import { extractFileNameFromContentDispositionHeader } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
 import win from "core/window"
 
 export default class ResponseBody extends React.PureComponent {
@@ -95,9 +96,12 @@ export default class ResponseBody extends React.PureComponent {
     } else if (/json/i.test(contentType)) {
       // JSON
       let language = null
+      let testValueForJson = getKnownSyntaxHighlighterLanguage(content)
+      if (testValueForJson) {
+        language = "json"
+      }
       try {
         body = JSON.stringify(JSON.parse(content), null, "  ")
-        language = "json"
       } catch (error) {
         body = "can't parse JSON.  Raw result:\n\n" + content
       }

src/core/components/response.jsx

@@ -4,14 +4,21 @@ import ImPropTypes from "react-immutable-proptypes"
 import cx from "classnames"
 import { fromJS, Seq, Iterable, List, Map } from "immutable"
 import { getExtensions, getSampleSchema, fromJSOrdered, stringify } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
 
 
 const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
   if (
     sampleResponse !== undefined &&
     sampleResponse !== null
-  ) { return <div>
-      <HighlightCode className="example" getConfigs={ getConfigs } value={ stringify(sampleResponse) } />
+  ) {
+    let language = null
+    let testValueForJson = getKnownSyntaxHighlighterLanguage(sampleResponse)
+    if (testValueForJson) {
+      language = "json"
+    }
+    return <div>
+      <HighlightCode className="example" getConfigs={ getConfigs } language={ language } value={ stringify(sampleResponse) } />
     </div>
   }
   return null

src/core/plugins/oas3/components/request-body.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { Map, OrderedMap, List } from "immutable"
 import { getCommonExtensions, getSampleSchema, stringify, isEmptyValue } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
 
 export const getDefaultRequestBodyValue = (requestBody, mediaType, activeExamplesKey) => {
   const mediaTypeValue = requestBody.getIn(["content", mediaType])
@@ -235,6 +236,11 @@ const RequestBody = ({
     contentType,
     activeExamplesKey,
   )
+  let language = null
+  let testValueForJson = getKnownSyntaxHighlighterLanguage(sampleRequestBody)
+  if (testValueForJson) {
+    language = "json"
+  }
 
   return <div>
     { requestBodyDescription &&
@@ -279,6 +285,7 @@ const RequestBody = ({
             <HighlightCode
               className="body-param__example"
               getConfigs={getConfigs}
+              language={language}
               value={stringify(requestBodyValue) || sampleRequestBody}
             />
           }

src/core/utils/jsonParse.js

@@ -0,0 +1,15 @@
+export function canJsonParse(str) {
+  try {
+    let testValueForJson = JSON.parse(str)
+    return testValueForJson ? true : false
+  } catch (e) {
+    // exception: string is not valid json
+    return null
+  }
+}
+
+export function getKnownSyntaxHighlighterLanguage(val) {
+  // to start, only check for json. can expand as needed in future
+  const isValidJson = canJsonParse(val)
+  return isValidJson ? "json" : null
+}