From d0199e29005c371d79cb044b212a5b0b4a94ab8d Mon Sep 17 00:00:00 2001
From: Kristian Samuelsson <kristian.samuelsson@hotmail.com>
Date: Mon, 19 Feb 2024 19:37:54 +0000
Subject: [PATCH 1/3] feat: add option to disable rendering of large payloads

---
 docs/usage/configuration.md             |  9 ++++++
 src/core/components/highlight-code.jsx  | 38 ++++++++++++++++++-------
 test/unit/components/highlight-code.jsx | 24 +++++++++++++---
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/docs/usage/configuration.md b/docs/usage/configuration.md
index 1722c25c573..214f1f83c6a 100644
--- a/docs/usage/configuration.md
+++ b/docs/usage/configuration.md
@@ -206,6 +206,15 @@ Parameter name | Docker variable | Description
             Swagger UI has finished rendering a newly provided definition.
         </td>
     </tr>
+    <tr>
+        <td>
+            <a name="user-content-renderSizeThreshold"></a><code>renderSizeThreshold</code>
+        </td>
+        <td><em>Unavailable</em></td>
+        <td>The maximum size (in bytes) of a payload to render.
+        Any payload above this will not be rendered, but may be available for copy or download.
+        </td>
+    </tr>
     <tr>
         <td>
             <a name="user-content-syntaxhighlight"></a><code>syntaxHighlight</code>
diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 29f075e374f..8487f8079f0 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -10,6 +10,7 @@ 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 rootRef = useRef(null)
 
   useEffect(() => {
@@ -43,8 +44,24 @@ const HighlightCode = ({value, fileName = "response.txt", className, downloadabl
     }
   }
 
+  const getRenderValues = () => {
+    if (renderSizeThreshold) {
+      const valueSizeInBytes = (new TextEncoder().encode(value)).byteLength
+      const shouldRenderValue = valueSizeInBytes < renderSizeThreshold
+      return [shouldRenderValue, valueSizeInBytes]
+    }
+    return [true, undefined]
+  }
+  const [shouldRenderValue, valueSizeInBytes] = getRenderValues()
+
   return (
     <div className="highlight-code" ref={rootRef}>
+      {!shouldRenderValue && (
+        <div className={cx(className, "microlight")}>
+          Value is too large ({valueSizeInBytes} bytes), rendering disabled.
+        </div>
+      )}
+
       {canCopy && (
         <div className="copy-to-clipboard">
           <CopyToClipboard text={value}><button/></CopyToClipboard>
@@ -57,16 +74,17 @@ const HighlightCode = ({value, fileName = "response.txt", className, downloadabl
         </button>
       }
 
-      {canSyntaxHighlight
-        ? <SyntaxHighlighter
-          language={language}
-          className={cx(className, "microlight")}
-          style={getStyle(get(config, "syntaxHighlight.theme", "agate"))}
-        >
-          {value}
-        </SyntaxHighlighter>
-        : <pre className={cx(className, "microlight")}>{value}</pre>
-      }
+      {shouldRenderValue && (
+        canSyntaxHighlight
+          ? <SyntaxHighlighter
+            language={language}
+            className={cx(className, "microlight")}
+            style={getStyle(get(config, "syntaxHighlight.theme", "agate"))}
+          >
+            {value}
+          </SyntaxHighlighter>
+          : <pre className={cx(className, "microlight")}>{value}</pre>
+      )}
 
     </div>
   )
diff --git a/test/unit/components/highlight-code.jsx b/test/unit/components/highlight-code.jsx
index 1df14e788d5..86f9f32a969 100644
--- a/test/unit/components/highlight-code.jsx
+++ b/test/unit/components/highlight-code.jsx
@@ -3,28 +3,44 @@ import expect from "expect"
 import { shallow, mount } from "enzyme"
 import HighlightCode from "core/components/highlight-code"
 
-const fakeGetConfigs = () => ({syntaxHighlight: {activated: true, theme: "agate"}})
+const fakeGetConfigs = (renderSizeThreshold = undefined) => (
+  {
+    renderSizeThreshold: renderSizeThreshold,
+    syntaxHighlight: {
+      activated: true,
+      theme: "agate"
+    }
+  })
 
 describe("<HighlightCode />", () => {
   it("should render a Download button if downloadable", () => {
-    const props = {downloadable: true, getConfigs: fakeGetConfigs }
+    const props = { downloadable: true, getConfigs: fakeGetConfigs }
     const wrapper = shallow(<HighlightCode {...props} />)
     expect(wrapper.find(".download-contents").length).toEqual(1)
   })
 
   it("should render a Copy To Clipboard button if copyable", () => {
-    const props = {canCopy: true, getConfigs: fakeGetConfigs }
+    const props = { canCopy: true, getConfigs: fakeGetConfigs }
     const wrapper = shallow(<HighlightCode {...props} />)
     expect(wrapper.find("CopyToClipboard").length).toEqual(1)
   })
 
   it("should render values in a preformatted element", () => {
     const value = "test text"
-    const props = {value: value, getConfigs: fakeGetConfigs}
+    const props = { value: value, getConfigs: fakeGetConfigs }
     const wrapper = mount(<HighlightCode {...props} />)
     const preTag = wrapper.find("pre")
 
     expect(preTag.length).toEqual(1)
     expect(preTag.text()).toEqual(value)
   })
+
+  it("should not render values larger than threshold", () => {
+    const value = "aaaaaaaa" //8 bytes
+    const props = { value: value, getConfigs: () => fakeGetConfigs(7) }
+    const wrapper = mount(<HighlightCode {...props} />)
+    const infoTag = wrapper.find("div.microlight")
+
+    expect(infoTag.text()).toEqual("Value is too large (8 bytes), rendering disabled.")
+  })
 })

From 9b2e3f25999c4f6f1a1e1a9a92ffad0ba97adb96 Mon Sep 17 00:00:00 2001
From: Kristian Samuelsson <kristian.samuelsson@hotmail.com>
Date: Mon, 19 Feb 2024 20:47:40 +0000
Subject: [PATCH 2/3] feat: add option to disable syntax highlighting of large
 payloads

---
 docs/usage/configuration.md             | 10 ++++-
 src/core/components/highlight-code.jsx  | 16 ++++----
 test/unit/components/highlight-code.jsx | 49 +++++++++++++++++++++----
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/docs/usage/configuration.md b/docs/usage/configuration.md
index 214f1f83c6a..2032274695b 100644
--- 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
index 8487f8079f0..9549fe48a53 100644
--- 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
index 86f9f32a969..84794bc3a04 100644
--- 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)
+  })
 })

From 72e70325f5d925f1394f7c3b87f5e41e8c7e3b89 Mon Sep 17 00:00:00 2001
From: Kristian Samuelsson <kristian.samuelsson@hotmail.com>
Date: Wed, 6 Mar 2024 21:13:25 +0000
Subject: [PATCH 3/3] refactor: change name of render size threshold config

---
 docs/usage/configuration.md             |  2 +-
 src/core/components/highlight-code.jsx  |  2 +-
 test/unit/components/highlight-code.jsx | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/usage/configuration.md b/docs/usage/configuration.md
index 2032274695b..b481e8ebd3a 100644
--- a/docs/usage/configuration.md
+++ b/docs/usage/configuration.md
@@ -208,7 +208,7 @@ Parameter name | Docker variable | Description
     </tr>
     <tr>
         <td>
-            <a name="user-content-renderSizeThreshold"></a><code>renderSizeThreshold</code>
+            <a name="user-content-payload.render.sizeThreshold"></a><code>payload.render.sizeThreshold</code>
         </td>
         <td><em>Unavailable</em></td>
         <td>The maximum size (in bytes) of a payload to render.
diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 9549fe48a53..3702c748608 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -9,7 +9,7 @@ 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 renderSizeThreshold = get(config, "renderSizeThreshold")
+  const renderSizeThreshold = get(config, "payload.render.sizeThreshold")
   const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true)
   const syntaxHighlightSizeThreshold = canSyntaxHighlight ? get(config, "syntaxHighlight.sizeThreshold", undefined) : undefined
   const rootRef = useRef(null)
diff --git a/test/unit/components/highlight-code.jsx b/test/unit/components/highlight-code.jsx
index 84794bc3a04..f0cbaf35a32 100644
--- a/test/unit/components/highlight-code.jsx
+++ b/test/unit/components/highlight-code.jsx
@@ -9,10 +9,14 @@ const defaultSyntaxHighlightConfig = {
 }
 
 const fakeGetConfigs = (
-    renderSizeThreshold = undefined,
-    syntaxHighlight = defaultSyntaxHighlightConfig) => (
+  renderSizeThreshold = undefined,
+  syntaxHighlight = defaultSyntaxHighlightConfig) => (
   {
-    renderSizeThreshold: renderSizeThreshold,
+    payload: {
+      render: {
+        sizeThreshold: renderSizeThreshold,
+      }
+    },
     syntaxHighlight: syntaxHighlight
   })