OAS3: Rendering

package.json

@@ -58,6 +58,7 @@
     "react-height": "^2.0.0",
     "react-hot-loader": "1.3.1",
     "react-immutable-proptypes": "2.1.0",
+    "react-markdown": "^2.5.0",
     "react-motion": "0.4.4",
     "react-object-inspector": "0.2.1",
     "react-redux": "^4.x.x",

src/core/components/content-type.jsx

@@ -8,7 +8,7 @@ const noop = ()=>{}
 export default class ContentType extends React.Component {
 
   static propTypes = {
-    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set]),
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
     value: PropTypes.string,
     onChange: PropTypes.func,
     className: PropTypes.string
@@ -22,7 +22,9 @@ export default class ContentType extends React.Component {
 
   componentDidMount() {
     // Needed to populate the form, initially
-    this.props.onChange(this.props.contentTypes.first())
+    if(this.props.contentTypes) {
+      this.props.onChange(this.props.contentTypes.first())
+    }
   }
 
   onChangeWrapper = e => this.props.onChange(e.target.value)

src/core/components/info.jsx

@@ -88,12 +88,13 @@ export default class Info extends React.Component {
     const { url:externalDocsUrl, description:externalDocsDescription } = (externalDocs || fromJS({})).toJS()
 
     const Markdown = getComponent("Markdown")
+    const VersionStamp = getComponent("VersionStamp")
 
     return (
       <div className="info">
         <hgroup className="main">
           <h2 className="title" >{ title }
-            { version && <small><pre className="version"> { version } </pre></small> }
+            { version && <VersionStamp version={version}></VersionStamp> }
           </h2>
           { host || basePath ? <Path host={ host } basePath={ basePath } /> : null }
           { url && <a target="_blank" href={ url }><span className="url"> { url } </span></a> }

src/core/components/model-example.jsx

@@ -35,9 +35,9 @@ export default class ModelExample extends React.Component {
         <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
           <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
         </li>
-        <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
+        { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
           <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
-        </li>
+        </li> : null }
       </ul>
       <div>
         {

src/core/components/model.jsx

@@ -17,6 +17,9 @@ export default class Model extends Component {
     if ( ref.indexOf("#/definitions/") !== -1 ) {
       return ref.replace(/^.*#\/definitions\//, "")
     }
+    if ( ref.indexOf("#/components/schemas/") !== -1 ) {
+      return ref.replace("#/components/schemas/", "")
+    }
   }
 
   getRefSchema =( model )=> {
@@ -26,14 +29,16 @@ export default class Model extends Component {
   }
 
   render () {
-    let { schema, getComponent, required, name, isRef } = this.props
+    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
     let ObjectModel = getComponent("ObjectModel")
     let ArrayModel = getComponent("ArrayModel")
     let PrimitiveModel = getComponent("PrimitiveModel")
     let $$ref = schema && schema.get("$$ref")
     let modelName = $$ref && this.getModelName( $$ref )
     let modelSchema, type
 
+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+
     if ( schema && (schema.get("type") || schema.get("properties")) ) {
       modelSchema = schema
     } else if ( $$ref ) {
@@ -47,17 +52,30 @@ export default class Model extends Component {
 
     switch(type) {
       case "object":
-        return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
-                                              name={ name || modelName } required={ required }
-                                              isRef={ isRef!== undefined ? isRef : !!$$ref }/>
+        return <ObjectModel
+          className="object" { ...this.props }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          isRef={ isRef!== undefined ? isRef : !!$$ref } />
       case "array":
-        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
+        return <ArrayModel
+          className="array" { ...this.props }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          required={ required } />
       case "string":
       case "number":
       case "integer":
       case "boolean":
       default:
-        return <PrimitiveModel getComponent={ getComponent } schema={ modelSchema } required={ required }/>
-    }
+        return <PrimitiveModel
+          { ...this.props }
+          getComponent={ getComponent }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          required={ required }/>    }
   }
-}
+}

src/core/components/operation.jsx

@@ -210,6 +210,7 @@ export default class Operation extends PureComponent {
               }
               <Parameters
                 parameters={parameters}
+                operation={operation}
                 onChangeKey={onChangeKey}
                 onTryoutClick = { this.onTryoutClick }
                 onCancelClick = { this.onCancelClick }

src/core/components/parameters.jsx

@@ -72,7 +72,9 @@ export default class Parameters extends Component {
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
-          <h4 className="opblock-title">Parameters</h4>
+          <div className="tab-header">
+            <h4 className="opblock-title">Parameters</h4>
+          </div>
             { allowTryItOut ? (
               <TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
             ) : null }

src/core/components/providers/markdown.jsx

@@ -3,15 +3,8 @@ import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"
 
-const sanitizeOptions = {
-  textFilter: function(text) {
-    return text
-      .replace(/"/g, "\"")
-  }
-}
-
 function Markdown({ source }) {
-  const sanitized = sanitize(source, sanitizeOptions)
+  const sanitized = sanitizer(source)
 
   // sometimes the sanitizer returns "undefined" as a string
   if(!source || !sanitized || sanitized === "undefined") {
@@ -31,3 +24,14 @@ Markdown.propTypes = {
 }
 
 export default Markdown
+
+const sanitizeOptions = {
+  textFilter: function(text) {
+    return text
+      .replace(/"/g, "\"")
+  }
+}
+
+export function sanitizer(str) {
+  return sanitize(str, sanitizeOptions)
+}

src/core/components/response.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS } from "immutable"
+import { fromJS, Seq } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -31,6 +31,13 @@ const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
 }
 
 export default class Response extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      responseContentType: ""
+    }
+  }
 
   static propTypes = {
     code: PropTypes.string.isRequired,
@@ -59,16 +66,29 @@ export default class Response extends React.Component {
     } = this.props
 
     let { inferSchema } = fn
+    let { isOAS3 } = specSelectors
 
-    let schema = inferSchema(response.toJS())
     let headers = response.get("headers")
     let examples = response.get("examples")
+    let links = response.get("links")
     const Headers = getComponent("headers")
     const HighlightCode = getComponent("highlightCode")
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent( "Markdown" )
-
-    let sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+    const OperationLink = getComponent("operationLink")
+    const ContentType = getComponent("contentType")
+
+    var sampleResponse
+    var schema
+
+    if(isOAS3()) {
+      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
+      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
+      schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
+    } else {
+      sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+      schema = inferSchema(response.toJS())
+    }
     let example = getExampleComponent( sampleResponse, examples, HighlightCode )
 
     return (
@@ -82,6 +102,12 @@ export default class Response extends React.Component {
             <Markdown source={ response.get( "description" ) } />
           </div>
 
+          { isOAS3 ? <ContentType
+              value={this.state.responseContentType}
+              contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
+              onChange={(val) => this.setState({ responseContentType: val })}
+              className="response-content-type" /> : null }
+
           { example ? (
             <ModelExample
               getComponent={ getComponent }
@@ -94,8 +120,15 @@ export default class Response extends React.Component {
             <Headers headers={ headers }/>
           ) : null}
 
-        </td>
 
+        </td>
+        {specSelectors.isOAS3() ? <td>
+          { links ?
+            links.toSeq().map((link, key) => {
+              return <OperationLink key={key} name={key} link={ link }/>
+            })
+          : <i>No links</i>}
+        </td> : null}
       </tr>
     )
   }

src/core/components/responses.jsx

@@ -42,13 +42,13 @@ export default class Responses extends React.Component {
       <div className="responses-wrapper">
         <div className="opblock-section-header">
           <h4>Responses</h4>
-            <label>
+            { specSelectors.isOAS3() ? null : <label>
               <span>Response content type</span>
               <ContentType value={producesValue}
                          onChange={this.onChangeProducesWrapper}
                          contentTypes={produces}
                          className="execute-content-type"/>
-                     </label>
+                     </label> }
         </div>
         <div className="responses-inner">
           {
@@ -68,6 +68,7 @@ export default class Responses extends React.Component {
               <tr className="responses-header">
                 <td className="col col_header response-col_status">Code</td>
                 <td className="col col_header response-col_description">Description</td>
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
               </tr>
             </thead>
             <tbody>

src/core/components/version-stamp.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const VersionStamp = ({ version }) => {
+  return <small><pre className="version"> { version } </pre></small>
+}
+
+VersionStamp.propTypes = {
+  version: PropTypes.string.isRequired
+}
+
+export default VersionStamp

src/core/plugins/oas3/components/callbacks.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Callbacks = (props) => {
+  let { callbacks, getComponent } = props
+  // const Markdown = getComponent("Markdown")
+  const Operation = getComponent("operation", true)
+
+  if(!callbacks) {
+    return <span>No callbacks</span>
+  }
+
+  let callbackElements = callbacks.map((callback, callbackName) => {
+    return <div key={callbackName}>
+      <h2>{callbackName}</h2>
+      { callback.map((pathItem, pathItemName) => {
+        return <div key={pathItemName}>
+          { pathItem.map((operation, method) => {
+            return <Operation
+              operation={operation}
+              key={method}
+              method={method}
+              isShownKey={["callbacks", operation.get("id"), callbackName]}
+              path={pathItemName}
+              allowTryItOut={false}
+              {...props}></Operation>
+            // return <pre>{JSON.stringify(operation)}</pre>
+          }) }
+        </div>
+      }) }
+    </div>
+    // return <div>
+    //   <h2>{name}</h2>
+    //   {callback.description && <Markdown source={callback.description}/>}
+    //   <pre>{JSON.stringify(callback)}</pre>
+    // </div>
+  })
+  return <div>
+    {callbackElements}
+  </div>
+}
+
+Callbacks.propTypes = {
+  getComponent: PropTypes.function.isRequired,
+  callbacks: PropTypes.array.isRequired
+
+}
+
+export default Callbacks

src/core/plugins/oas3/components/index.js

@@ -0,0 +1,9 @@
+import Callbacks from "./callbacks"
+import RequestBody from "./request-body"
+import OperationLink from "./operation-link.jsx"
+
+export default {
+  Callbacks,
+  RequestBody,
+  operationLink: OperationLink
+}