Merge pull request #3967 from daniel-smartbear/feature/add-type-example-for-headers

Feature/add type example for headers

Author: shockey

src/core/components/headers.jsx

@@ -2,20 +2,24 @@ import React from "react"
 import PropTypes from "prop-types"
 import Im from "immutable"
 
+const propStyle = { color: "#999", fontStyle: "italic" }
+
 export default class Headers extends React.Component {
 
   static propTypes = {
-    headers: PropTypes.object.isRequired
+    headers: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
   };
 
   render() {
 
-    let { headers } = this.props
+    let { headers, getComponent } = this.props
+    const Property = getComponent("Property")
 
     if ( !headers || !headers.size )
       return null
 
-    return (
+      return (
       <div className="headers-wrapper">
         <h4 className="headers__title">Headers:</h4>
         <table className="headers">
@@ -32,10 +36,13 @@ export default class Headers extends React.Component {
               if(!Im.Map.isMap(header)) {
                 return null
               }
+              const type = header.getIn(["schema"]) ? header.getIn(["schema", "type"]) : header.getIn(["type"])
+              const schemaExample = header.getIn(["schema", "example"])
+
               return (<tr key={ key }>
                 <td className="header-col">{ key }</td>
                 <td className="header-col">{ header.get( "description" ) }</td>
-                <td className="header-col">{ header.get( "type" ) }</td>
+                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
               </tr>)
             }).toArray()
           }

src/core/components/response.jsx

@@ -153,7 +153,10 @@ export default class Response extends React.Component {
           ) : null}
 
           { headers ? (
-            <Headers headers={ headers }/>
+            <Headers
+              headers={ headers }
+              getComponent={ getComponent }
+            />
           ) : null}