Merge branch 'master' into ft/3135-request-duration

src/core/components/model.jsx

@@ -117,12 +117,13 @@ class ObjectModel extends Component {
 class Primitive extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     required: PropTypes.bool
   }
 
   render(){
-    let { schema, getComponent, required } = this.props
+    let { schema, getComponent, name, required } = this.props
 
     if(!schema || !schema.get) {
       // don't render if schema isn't correctly formed
@@ -133,12 +134,18 @@ class Primitive extends Component {
     let format = schema.get("format")
     let xml = schema.get("xml")
     let enumArray = schema.get("enum")
+    let title = schema.get("title") || name
     let description = schema.get("description")
     let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
     let style = required ? { fontWeight: "bold" } : {}
     const Markdown = getComponent("Markdown")
 
-    return <span className="prop">
+    return <span className="model">
+      {
+        title && <span className="model-title" style={{ marginRight: "2em" }}>
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
       { format && <span className="prop-format">(${format})</span>}
       {
@@ -176,17 +183,20 @@ class ArrayModel extends Component {
   }
 
   render(){
-    let { required, schema, depth, expandDepth } = this.props
+    let { required, schema, depth, name, expandDepth } = this.props
     let items = schema.get("items")
+    let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
-
+  
     return <span className="model">
-      <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
-      </span>
+      {
+        title && <span className="model-title">
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
         ]
         {
           properties.size ? <span>
@@ -249,13 +259,13 @@ class Model extends Component {
                                               name={ name || modelName }
                                               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 } required={ required } />
       case "string":
       case "number":
       case "integer":
       case "boolean":
       default:
-        return <Primitive getComponent={ getComponent } schema={ modelSchema } required={ required }/>
+        return <Primitive { ...this.props } getComponent={ getComponent } schema={ modelSchema } name={ name || modelName } required={ required }/>
     }
   }
 }

src/core/components/models.jsx

@@ -24,8 +24,8 @@ export default class Models extends Component {
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
-        <svg width="20" height="20">
-          <use xlinkHref="#large-arrow" />
+        <svg className="arrow" width="20" height="20">
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>
       <Collapse isOpened={showModels} animated>

src/core/components/operation.jsx

@@ -128,6 +128,7 @@ export default class Operation extends PureComponent {
     let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
     let operationId = operation.get("__originalOperationId")
+    let operationScheme = specSelectors.operationScheme(path, method)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -213,7 +214,8 @@ export default class Operation extends PureComponent {
                     <Schemes schemes={ schemes }
                              path={ path }
                              method={ method }
-                             specActions={ specActions }/>
+                             specActions={ specActions }
+                             operationScheme={ operationScheme } />
                   </div> : null
               }
 

src/core/components/schemes.jsx

@@ -6,7 +6,8 @@ export default class Schemes extends React.Component {
     specActions: PropTypes.object.isRequired,
     schemes: PropTypes.object.isRequired,
     path: PropTypes.string,
-    method: PropTypes.string
+    method: PropTypes.string,
+    operationScheme: PropTypes.string
   }
 
   componentWillMount() {
@@ -16,11 +17,18 @@ export default class Schemes extends React.Component {
     this.setScheme(schemes.first())
   }
 
+  componentWillReceiveProps(nextProps) {
+    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
+      //fire 'change' event if our selected scheme is no longer an option
+      this.setScheme(nextProps.schemes.first())
+    }
+  }
+
   onChange =( e ) => {
     this.setScheme( e.target.value )
   }
 
-  setScheme =( value ) => {
+  setScheme = ( value ) => {
     let { path, method, specActions } = this.props
 
     specActions.setScheme( value, path, method )