feat: consolidate syntax highlighting code into standalone plugin (#9783)

test/unit/components/highlight-code.jsx

@@ -1,26 +1,39 @@
 import React from "react"
 import expect from "expect"
 import { shallow, mount } from "enzyme"
-import HighlightCode from "core/components/highlight-code"
+import HighlightCode from "core/plugins/syntax-highlighting/components/HighlightCode"
+import SyntaxHighlighter from "core/plugins/syntax-highlighting/components/SyntaxHighlighter"
 
-const fakeGetConfigs = () => ({syntaxHighlight: {activated: true, theme: "agate"}})
+const fakeGetConfigs = () => ({ syntaxHighlight: { activated: true, theme: "agate" }})
+const fakeGetComponent = (name, isContainer) => {
+  const components = { HighlightCode, SyntaxHighlighter }
+  const Component = components[name]
+
+  if (isContainer) {
+    return ({ ...props }) => {
+      return <Component getConfigs={fakeGetConfigs} getComponent={fakeGetComponent} {...props} />
+    }
+  }
+
+  return Component
+}
 
 describe("<HighlightCode />", () => {
   it("should render a Download button if downloadable", () => {
-    const props = {downloadable: true, getConfigs: fakeGetConfigs }
+    const props = { downloadable: true, getConfigs: fakeGetConfigs, getComponent: fakeGetComponent }
     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, getComponent: fakeGetComponent }
     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, getConfigs: fakeGetConfigs, getComponent: fakeGetComponent }
     const wrapper = mount(<HighlightCode {...props} />)
     const preTag = wrapper.find("pre")
 

test/unit/components/response-body.jsx

@@ -3,9 +3,8 @@ import { shallow } from "enzyme"
 import ResponseBody from "core/components/response-body"
 
 describe("<ResponseBody />", function () {
-  const highlightCodeComponent = () => null
   const components = {
-    highlightCode: highlightCodeComponent
+    HighlightCode: () => null
   }
   const props = {
     getComponent: c => components[c],
@@ -15,27 +14,27 @@ describe("<ResponseBody />", function () {
     props.contentType = "application/json"
     props.content = "{\"key\": \"a test value\"}"
     const wrapper = shallow(<ResponseBody {...props} />)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
+    expect(wrapper.find("HighlightCode").length).toEqual(1)
   })
 
   it("renders ResponseBody as 'text/html'", function () {
     props.contentType = "application/json"
     props.content = "<b>Result</b>"
     const wrapper = shallow(<ResponseBody {...props} />)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
+    expect(wrapper.find("HighlightCode").length).toEqual(1)
   })
 
   it("renders ResponseBody as 'image/svg'", function () {
     props.contentType = "image/svg"
     const wrapper = shallow(<ResponseBody {...props} />)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(0)
+    expect(wrapper.find("HighlightCode").length).toEqual(0)
   })
 
   it("should render a copyable highlightCodeComponent for text types", function () {
     props.contentType = "text/plain"
     props.content = "test text"
     const wrapper = shallow(<ResponseBody {...props} />)
-    expect(wrapper.find("highlightCodeComponent[canCopy]").length).toEqual(1)
+    expect(wrapper.find("HighlightCode[canCopy]").length).toEqual(1)
   })
 
   it("should render Download file link for non-empty Blob response", function () {