From a887e7236801acde76e814df147b211ba6678c5f Mon Sep 17 00:00:00 2001
From: Timothy Lai <timothy.lai@gmail.com>
Date: Mon, 19 Apr 2021 16:15:28 -0700
Subject: [PATCH 1/5] fix(oas2): syntax highlighting with json values

* param-body
* response
---
 src/core/components/param-body.jsx | 15 +++++++++++++--
 src/core/components/response.jsx   | 15 +++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
index 6ee9e76de03..146247abc47 100644
--- a/src/core/components/param-body.jsx
+++ b/src/core/components/param-body.jsx
@@ -112,6 +112,16 @@ 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
+
+    try {
+      let testValueForJson = JSON.parse(value)
+      if (testValueForJson) {
+        language = "json"
+      }
+    } catch(e) {
+      // do nothing
+    }
 
     return (
       <div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
@@ -119,8 +129,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">
           {
diff --git a/src/core/components/response.jsx b/src/core/components/response.jsx
index 356e3d0e96f..dcabdd31295 100644
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -10,8 +10,19 @@ const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
   if (
     sampleResponse !== undefined &&
     sampleResponse !== null
-  ) { return <div>
-      <HighlightCode className="example" getConfigs={ getConfigs } value={ stringify(sampleResponse) } />
+  ) {
+    let language = null
+
+    try {
+      let testValueForJson = JSON.parse(sampleResponse)
+      if (testValueForJson) {
+        language = "json"
+      }
+    } catch (e) {
+      // do nothing
+    }
+     return <div>
+      <HighlightCode className="example" getConfigs={ getConfigs } language={language} value={ stringify(sampleResponse) } />
     </div>
   }
   return null

From 8949f70341e2add6f21aaf1f8258f72e37b4b237 Mon Sep 17 00:00:00 2001
From: Timothy Lai <timothy.lai@gmail.com>
Date: Mon, 19 Apr 2021 16:37:09 -0700
Subject: [PATCH 2/5] test: oas2 syntax highlighting for json cases

---
 .../syntax-highlighting-json-oas2.yaml        | 97 +++++++++++++++++++
 .../features/syntax-highlighting-json.js      | 24 +++++
 2 files changed, 121 insertions(+)
 create mode 100644 test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas2.yaml
 create mode 100644 test/e2e-cypress/tests/features/syntax-highlighting-json.js

diff --git a/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas2.yaml b/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas2.yaml
new file mode 100644
index 00000000000..6b93d85a947
--- /dev/null
+++ b/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas2.yaml
@@ -0,0 +1,97 @@
+swagger: '2.0'
+info:
+  description: sample OAS 2 definition to test syntax highlighting
+  version: 1.0.0
+  title: json syntax highlighting
+host: "localhost:3200"
+basePath: /v1
+schemes:
+  - https
+  - http
+paths:
+  /setServices:
+    post:
+      summary: "simple service"
+      produces:
+      - application/json
+      parameters:
+      - in: body
+        name: body
+        required: true
+        schema:
+         $ref: '#/definitions/setServicesBody' 
+      responses:
+        200:
+          description: OK
+          schema:
+           $ref: '#/definitions/setServicesResponse'
+        404:
+          description: "Page not found"
+definitions:
+  setServicesBody:
+    type: object
+    required:
+      - appid
+      - key
+      - userid
+      - station_objectid
+      - details
+    properties:
+      appid:
+        type: string
+        example: "Website"
+        description: "application ID"
+      userid:
+        type: integer
+        example: "79daf5b4-aa4b-1452-eae5-42c231477ba7"
+        description: "user id available to test"
+      station_objectid:
+        type: string
+        example: "22a124b4-594b-4452-bdf5-fc3ef1477ba7"
+        description: "station id available to test"
+      details:
+        type: array
+        items:
+          type: object
+          properties:
+            station_serviceid:
+              type: integer
+              example: "34"
+              description: "optional service id"
+            name:
+              type: string
+              example: "hooray"
+            amount:
+              type: string
+              example: "0.00"
+            quantity:
+              type: integer
+              example: "999999"
+            date:
+              type: string
+              format: date-time
+              example: "2020-11-12 18:52:29"
+  setServicesResponse:
+    type: object
+    properties:
+      status:
+        type: boolean
+        example: true
+      count:
+        type: boolean
+        example: 1
+      response:
+        type: object
+        properties:
+          status:
+            type: integer
+            example: 200
+          station_serviceid:
+            type: integer
+            example: "3"
+          userid:
+            type: integer
+            example: "5ff06f632bb165394501b05d3a833355"
+          statusId:
+            type: string
+            example: "f0009babde9dbe204540d79cf754408e"
diff --git a/test/e2e-cypress/tests/features/syntax-highlighting-json.js b/test/e2e-cypress/tests/features/syntax-highlighting-json.js
new file mode 100644
index 00000000000..b5886c51527
--- /dev/null
+++ b/test/e2e-cypress/tests/features/syntax-highlighting-json.js
@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ */
+describe("Syntax Highlighting for JSON content", () => {
+  // expect span contains entire string sample
+  // fail case is if the string sample gets broken up into segments
+  // due syntax highlighting attempting to escape characters
+  describe("OAS 2", () => {
+    it("param body: should use json language if content is json", () => {
+      cy.visit("/?url=/documents/features/syntax-highlighting-json-oas2.yaml")
+      .get("#operations-default-post_setServices")
+      .click()
+      .get(".body-param__example > .language-json > :nth-child(10)")
+      .should("have.text", "\"79daf5b4-aa4b-1452-eae5-42c231477ba7\"")
+    })
+    it("response: should use json language if content is json", () => {
+      cy.visit("/?url=/documents/features/syntax-highlighting-json-oas2.yaml")
+      .get("#operations-default-post_setServices")
+      .click()
+      .get(".example > .language-json > :nth-child(28)")
+        .should("have.text", "\"5ff06f632bb165394501b05d3a833355\"") // span contains entire long string
+    })
+  })
+})

From 616158879938bbaf2e3d976fd87cba19d18d5ff8 Mon Sep 17 00:00:00 2001
From: Timothy Lai <timothy.lai@gmail.com>
Date: Mon, 19 Apr 2021 17:03:10 -0700
Subject: [PATCH 3/5] fix(oas3): syntax highlighting for json value in
 ModelExample

---
 src/core/plugins/oas3/components/request-body.jsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
index 530abfc2c44..0a5cbf2fe91 100644
--- a/src/core/plugins/oas3/components/request-body.jsx
+++ b/src/core/plugins/oas3/components/request-body.jsx
@@ -235,6 +235,16 @@ const RequestBody = ({
     contentType,
     activeExamplesKey,
   )
+  let language = null
+
+  try {
+    let testValueForJson = JSON.parse(sampleRequestBody)
+    if (testValueForJson) {
+      language = "json"
+    }
+  } catch (e) {
+    // do nothing
+  }
 
   return <div>
     { requestBodyDescription &&
@@ -279,6 +289,7 @@ const RequestBody = ({
             <HighlightCode
               className="body-param__example"
               getConfigs={getConfigs}
+              language={language}
               value={stringify(requestBodyValue) || sampleRequestBody}
             />
           }

From af0fac30ded249410921c0dbcb26f9917a5d9198 Mon Sep 17 00:00:00 2001
From: Timothy Lai <timothy.lai@gmail.com>
Date: Mon, 19 Apr 2021 17:14:36 -0700
Subject: [PATCH 4/5] test: oas3 syntax highlighting for json cases

---
 .../syntax-highlighting-json-oas3.yaml        | 94 +++++++++++++++++++
 .../features/syntax-highlighting-json.js      | 26 ++++-
 2 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas3.yaml

diff --git a/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas3.yaml b/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas3.yaml
new file mode 100644
index 00000000000..183fa07264a
--- /dev/null
+++ b/test/e2e-cypress/static/documents/features/syntax-highlighting-json-oas3.yaml
@@ -0,0 +1,94 @@
+openapi: 3.0.1
+info:
+  title: json syntax highlighting
+  description: sample OAS 3 definition to test syntax highlighting
+  version: 1.0.0
+servers:
+- url: https://localhost:3200/v1
+- url: http://localhost:3200/v1
+paths:
+  /setServices:
+    post:
+      summary: simple service
+      requestBody:
+        content:
+          '*/*':
+            schema:
+              $ref: '#/components/schemas/setServicesBody'
+        required: true
+      responses:
+        200:
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/setServicesResponse'
+        404:
+          description: Page not found
+          content: {}
+      x-codegen-request-body-name: body
+components:
+  schemas:
+    setServicesBody:
+      required:
+      - appid
+      - details
+      - station_objectid
+      - userid
+      type: object
+      properties:
+        appid:
+          type: string
+          description: application ID
+          example: Website
+        userid:
+          type: integer
+          description: user id available to test
+        station_objectid:
+          type: string
+          description: station id available to test
+          example: 22a124b4-594b-4452-bdf5-fc3ef1477ba7
+        details:
+          type: array
+          items:
+            type: object
+            properties:
+              station_serviceid:
+                type: integer
+                description: optional service id
+                example: 34
+              name:
+                type: string
+                example: hooray
+              amount:
+                type: string
+                example: "0.00"
+              quantity:
+                type: integer
+                example: 999999
+              date:
+                type: string
+                format: date-time
+    setServicesResponse:
+      type: object
+      properties:
+        status:
+          type: boolean
+          example: true
+        count:
+          type: boolean
+          example: false
+        response:
+          type: object
+          properties:
+            status:
+              type: integer
+              example: 200
+            station_serviceid:
+              type: integer
+              example: 3
+            userid:
+              type: integer
+            statusId:
+              type: string
+              example: f0009babde9dbe204540d79cf754408e
diff --git a/test/e2e-cypress/tests/features/syntax-highlighting-json.js b/test/e2e-cypress/tests/features/syntax-highlighting-json.js
index b5886c51527..236aabaa761 100644
--- a/test/e2e-cypress/tests/features/syntax-highlighting-json.js
+++ b/test/e2e-cypress/tests/features/syntax-highlighting-json.js
@@ -1,24 +1,40 @@
 /**
  * @prettier
  */
-describe("Syntax Highlighting for JSON content", () => {
+describe("Syntax Highlighting for JSON value cases", () => {
   // expect span contains entire string sample
   // fail case is if the string sample gets broken up into segments
-  // due syntax highlighting attempting to escape characters
+  // due react-syntax-highlighter attempting to escape characters into multiple segments
   describe("OAS 2", () => {
-    it("param body: should use json language if content is json", () => {
+    it("should render full syntax highlighted string in Request (param body) example", () => {
       cy.visit("/?url=/documents/features/syntax-highlighting-json-oas2.yaml")
       .get("#operations-default-post_setServices")
       .click()
       .get(".body-param__example > .language-json > :nth-child(10)")
       .should("have.text", "\"79daf5b4-aa4b-1452-eae5-42c231477ba7\"")
     })
-    it("response: should use json language if content is json", () => {
+    it("should render full syntax highlighted string in Response example", () => {
       cy.visit("/?url=/documents/features/syntax-highlighting-json-oas2.yaml")
       .get("#operations-default-post_setServices")
       .click()
       .get(".example > .language-json > :nth-child(28)")
-        .should("have.text", "\"5ff06f632bb165394501b05d3a833355\"") // span contains entire long string
+        .should("have.text", "\"5ff06f632bb165394501b05d3a833355\"")
+    })
+  })
+  describe("OAS 3", () => {
+    it("should render full syntax highlighted string in Request example", () => {
+      cy.visit("/?url=/documents/features/syntax-highlighting-json-oas3.yaml")
+        .get("#operations-default-post_setServices")
+        .click()
+        .get(".body-param__example > .language-json > :nth-child(15)")
+        .should("have.text", "\"22a124b4-594b-4452-bdf5-fc3ef1477ba7\"")
+    })
+    it("should render full syntax highlighted string in Response example", () => {
+      cy.visit("/?url=/documents/features/syntax-highlighting-json-oas3.yaml")
+        .get("#operations-default-post_setServices")
+        .click()
+        .get(".example > .language-json > :nth-child(33)")
+        .should("have.text", "\"f0009babde9dbe204540d79cf754408e\"")
     })
   })
 })

From 17dd0bb68c211db5ac34ce72dcf82d6d40dc6ba6 Mon Sep 17 00:00:00 2001
From: Timothy Lai <timothy.lai@gmail.com>
Date: Tue, 20 Apr 2021 11:00:00 -0700
Subject: [PATCH 5/5] feat: jsonParse utils for syntax highlighting

---
 src/core/components/param-body.jsx               | 12 ++++--------
 src/core/components/response-body.jsx            |  6 +++++-
 src/core/components/response.jsx                 | 16 ++++++----------
 .../plugins/oas3/components/request-body.jsx     | 12 ++++--------
 src/core/utils/jsonParse.js                      | 15 +++++++++++++++
 5 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 src/core/utils/jsonParse.js

diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
index 146247abc47..c440ebfb823 100644
--- a/src/core/components/param-body.jsx
+++ b/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
 
@@ -113,14 +114,9 @@ export default class ParamBody extends PureComponent {
 
     let { value, isEditBox } = this.state
     let language = null
-
-    try {
-      let testValueForJson = JSON.parse(value)
-      if (testValueForJson) {
-        language = "json"
-      }
-    } catch(e) {
-      // do nothing
+    let testValueForJson = getKnownSyntaxHighlighterLanguage(value)
+    if (testValueForJson) {
+      language = "json"
     }
 
     return (
diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 14d3e5cfbd4..5af8dc4fb63 100644
--- a/src/core/components/response-body.jsx
+++ b/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
       }
diff --git a/src/core/components/response.jsx b/src/core/components/response.jsx
index dcabdd31295..767382a6abe 100644
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -4,6 +4,7 @@ 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 ) => {
@@ -12,17 +13,12 @@ const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
     sampleResponse !== null
   ) {
     let language = null
-
-    try {
-      let testValueForJson = JSON.parse(sampleResponse)
-      if (testValueForJson) {
-        language = "json"
-      }
-    } catch (e) {
-      // do nothing
+    let testValueForJson = getKnownSyntaxHighlighterLanguage(sampleResponse)
+    if (testValueForJson) {
+      language = "json"
     }
-     return <div>
-      <HighlightCode className="example" getConfigs={ getConfigs } language={language} value={ stringify(sampleResponse) } />
+    return <div>
+      <HighlightCode className="example" getConfigs={ getConfigs } language={ language } value={ stringify(sampleResponse) } />
     </div>
   }
   return null
diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
index 0a5cbf2fe91..defe4f00e41 100644
--- a/src/core/plugins/oas3/components/request-body.jsx
+++ b/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])
@@ -236,14 +237,9 @@ const RequestBody = ({
     activeExamplesKey,
   )
   let language = null
-
-  try {
-    let testValueForJson = JSON.parse(sampleRequestBody)
-    if (testValueForJson) {
-      language = "json"
-    }
-  } catch (e) {
-    // do nothing
+  let testValueForJson = getKnownSyntaxHighlighterLanguage(sampleRequestBody)
+  if (testValueForJson) {
+    language = "json"
   }
 
   return <div>
diff --git a/src/core/utils/jsonParse.js b/src/core/utils/jsonParse.js
new file mode 100644
index 00000000000..fda5cb9476e
--- /dev/null
+++ b/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
+}