feat: add option to disable syntax highlighting of large payloads

swagger-api · Feb 20, 2024 · f64f09e · f64f09e
1 parent f39f42f
commit f64f09e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/docs/usage/configuration.md b/docs/usage/configuration.md
@@ -226,13 +226,21 @@ Parameter name | Docker variable | Description
         </td>
     </tr>
     <tr>
-        <td><a name="user-content-syntaxhighlight.activate"></a><code>syntaxHighlight.activate</code>
+        <td><a name="user-content-syntaxhighlight.activated"></a><code>syntaxHighlight.activated</code>
         </td>
         <td><em>Unavailable</em></td>
         <td><code>Boolean=true</code>. Whether syntax highlighting should be
             activated or not.
         </td>
     </tr>
+    <tr>
+        <td><a name="user-content-syntaxhighlight.sizethreshold"></a><code>syntaxHighlight.sizeThreshold</code>
+        </td>
+        <td><em>Unavailable</em></td>
+        <td>The maximum size (in bytes) of a payload to syntax highlight.
+        Any payload above this will not be syntax highlighted. Use this to avoid long delays caused by larged payloads.
+        </td>
+    </tr>
     <tr>
         <td><a name="user-content-syntaxhighlight.theme"></a><code>syntaxHighlight.theme</code>
         </td>

diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
@@ -9,8 +9,9 @@ import { CopyToClipboard } from "react-copy-to-clipboard"
 
 const HighlightCode = ({value, fileName = "response.txt", className, downloadable, getConfigs, canCopy, language}) => {
   const config = isFunction(getConfigs) ? getConfigs() : null
-  const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true)
   const renderSizeThreshold = get(config, "renderSizeThreshold")
+  const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true)
+  const syntaxHighlightSizeThreshold = canSyntaxHighlight ? get(config, "syntaxHighlight.sizeThreshold", undefined) : undefined
   const rootRef = useRef(null)
 
   useEffect(() => {
@@ -45,14 +46,15 @@ const HighlightCode = ({value, fileName = "response.txt", className, downloadabl
   }
 
   const getRenderValues = () => {
-    if (renderSizeThreshold) {
+    if (renderSizeThreshold || syntaxHighlightSizeThreshold) {
       const valueSizeInBytes = (new TextEncoder().encode(value)).byteLength
-      const shouldRenderValue = valueSizeInBytes < renderSizeThreshold
-      return [shouldRenderValue, valueSizeInBytes]
+      const shouldRenderValue = renderSizeThreshold ? valueSizeInBytes < renderSizeThreshold : true
+      const shouldSyntaxHighlight = syntaxHighlightSizeThreshold ? valueSizeInBytes < syntaxHighlightSizeThreshold : true
+      return [shouldRenderValue, shouldSyntaxHighlight, valueSizeInBytes]
     }
-    return [true, undefined]
+    return [true, true, undefined]
   }
-  const [shouldRenderValue, valueSizeInBytes] = getRenderValues()
+  const [shouldRenderValue, shouldSyntaxHighlight, valueSizeInBytes] = getRenderValues()
 
   return (
     <div className="highlight-code" ref={rootRef}>
@@ -75,7 +77,7 @@ const HighlightCode = ({value, fileName = "response.txt", className, downloadabl
       }
 
       {shouldRenderValue && (
-        canSyntaxHighlight
+        canSyntaxHighlight && shouldSyntaxHighlight
           ? <SyntaxHighlighter
             language={language}
             className={cx(className, "microlight")}

diff --git a/test/unit/components/highlight-code.jsx b/test/unit/components/highlight-code.jsx
@@ -3,13 +3,17 @@ import expect from "expect"
 import { shallow, mount } from "enzyme"
 import HighlightCode from "core/components/highlight-code"
 
-const fakeGetConfigs = (renderSizeThreshold = undefined) => (
+const defaultSyntaxHighlightConfig = {
+  activated: true,
+  theme: "agate"
+}
+
+const fakeGetConfigs = (
+    renderSizeThreshold = undefined,
+    syntaxHighlight = defaultSyntaxHighlightConfig) => (
   {
     renderSizeThreshold: renderSizeThreshold,
-    syntaxHighlight: {
-      activated: true,
-      theme: "agate"
-    }
+    syntaxHighlight: syntaxHighlight
   })
 
 describe("<HighlightCode />", () => {
@@ -27,14 +31,29 @@ describe("<HighlightCode />", () => {
 
   it("should render values in a preformatted element", () => {
     const value = "test text"
-    const props = { value: value, getConfigs: fakeGetConfigs }
+    const syntaxHighlightConfig = {
+      activated: false
+    }
+    const props = { value: value, getConfigs: () => fakeGetConfigs(undefined, syntaxHighlightConfig) }
     const wrapper = mount(<HighlightCode {...props} />)
-    const preTag = wrapper.find("pre")
+    const highlighterTag = wrapper.find("SyntaxHighlighter")
+    expect(highlighterTag.length).toEqual(0)
 
+    const preTag = wrapper.find("pre")
     expect(preTag.length).toEqual(1)
     expect(preTag.text()).toEqual(value)
   })
 
+  it("should render values in a syntax highlighted element", () => {
+    const value = "test text"
+    const props = { value: value, getConfigs: fakeGetConfigs }
+    const wrapper = mount(<HighlightCode {...props} />)
+    const syntaxHighlighterTag = wrapper.find("SyntaxHighlighter")
+
+    expect(syntaxHighlighterTag.length).toEqual(1)
+    expect(syntaxHighlighterTag.text()).toEqual(value)
+  })
+
   it("should not render values larger than threshold", () => {
     const value = "aaaaaaaa" //8 bytes
     const props = { value: value, getConfigs: () => fakeGetConfigs(7) }
@@ -43,4 +62,20 @@ describe("<HighlightCode />", () => {
 
     expect(infoTag.text()).toEqual("Value is too large (8 bytes), rendering disabled.")
   })
+
+  it("should not highlight values larger larger than syntax highlight threshold", () => {
+    const value = "aaaaaaaa" //8 bytes
+    const syntaxHighlightConfig = {
+      defaultSyntaxHighlightConfig,
+      sizeThreshold: 8
+    }
+    const props = { value: value, getConfigs: () => fakeGetConfigs(undefined, syntaxHighlightConfig) }
+    const wrapper = mount(<HighlightCode {...props} />)
+    const highlighterTag = wrapper.find("SyntaxHighlighter")
+    expect(highlighterTag.length).toEqual(0)
+
+    const preTag = wrapper.find("pre")
+    expect(preTag.length).toEqual(1)
+    expect(preTag.text()).toEqual(value)
+  })
 })