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,6 +125,7 @@ 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"
+                          language={ language }
                           getConfigs={ getConfigs }
                           value={ value }/>)
         }

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
+}

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"

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

test/e2e-cypress/tests/features/syntax-highlighting-json.js

@@ -0,0 +1,40 @@
+/**
+ * @prettier
+ */
+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 react-syntax-highlighter attempting to escape characters into multiple segments
+  describe("OAS 2", () => {
+    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("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\"")
+    })
+  })
+  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\"")
+    })
+  })
+})