Improve downloadable HighlightCode filename (#4508)

* Update highlight-code.jsx
* improve filename no more response.txt
* use new `fileName` prop for file names
* use template strings for `fileName` prop values
* fall back to old "response.txt" file name if none is provided

Author: heldersepu

src/core/components/highlight-code.jsx

@@ -7,7 +7,8 @@ export default class HighlightCode extends Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     className: PropTypes.string,
-    downloadable: PropTypes.bool
+    downloadable: PropTypes.bool,
+    fileName: PropTypes.string
   }
 
   componentDidMount() {
@@ -23,7 +24,7 @@ export default class HighlightCode extends Component {
   }
 
   downloadText = () => {
-    saveAs(this.props.value, "response.txt")
+    saveAs(this.props.value, this.props.fileName || "response.txt")
   }
 
   preventYScrollingBeyondElement = (e) => {

src/core/components/response-body.jsx

@@ -52,6 +52,7 @@ export default class ResponseBody extends React.PureComponent {
     let { content, contentType, url, headers={}, getComponent } = this.props
     const { parsedContent } = this.state
     const HighlightCode = getComponent("highlightCode")
+    const downloadName = "response_" + new Date().getTime()
     let body, bodyEl
     url = url || ""
 
@@ -100,19 +101,19 @@ export default class ResponseBody extends React.PureComponent {
         body = "can't parse JSON.  Raw result:\n\n" + content
       }
 
-      bodyEl = <HighlightCode downloadable value={ body } />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.json`} value={ body } />
 
       // XML
     } else if (/xml/i.test(contentType)) {
       body = formatXml(content, {
         textNodesOnSameLine: true,
         indentor: "  "
       })
-      bodyEl = <HighlightCode downloadable value={ body } />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } />
 
       // HTML or Plain Text
     } else if (lowerCase(contentType) === "text/html" || /text\/plain/.test(contentType)) {
-      bodyEl = <HighlightCode downloadable value={ content } />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} value={ content } />
 
       // Image
     } else if (/^image\//i.test(contentType)) {
@@ -126,7 +127,7 @@ export default class ResponseBody extends React.PureComponent {
     } else if (/^audio\//i.test(contentType)) {
       bodyEl = <pre><audio controls><source src={ url } type={ contentType } /></audio></pre>
     } else if (typeof content === "string") {
-      bodyEl = <HighlightCode downloadable value={ content } />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } />
     } else if ( content.size > 0 ) {
       // We don't know the contentType, but there was some content returned
       if(parsedContent) {
@@ -136,7 +137,7 @@ export default class ResponseBody extends React.PureComponent {
           <p className="i">
             Unrecognized response type; displaying content as text.
           </p>
-          <HighlightCode downloadable value={ parsedContent } />
+          <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ parsedContent } />
         </div>
 
       } else {