Merge branch 'master' into ft/map-state-to-props-for-components

2017-08-14 18:46:11 -06:00
parent d9918f9f31 c88c8c32f3
commit c0185ca6e2
56 changed files with 2904 additions and 172 deletions
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -15,7 +15,7 @@ export default class ArrayModel extends Component {
  }

  render(){
-    let { getComponent, required, schema, depth, expandDepth, name } = this.props
+    let { getComponent, schema, depth, expandDepth, name } = 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 )
@@ -31,7 +31,7 @@ export default class ArrayModel extends Component {
    return <span className="model">
      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
        [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
        ]
        {
          properties.size ? <span>
@@ -41,7 +41,6 @@ export default class ArrayModel extends Component {
            : null
        }
      </ModelCollapse>
-      { required && <span style={{ color: "red" }}>*</span>}
    </span>
  }
 }
--- a/src/core/components/auth/authorization-popup.jsx
+++ b/src/core/components/auth/authorization-popup.jsx
@@ -23,7 +23,7 @@ export default class AuthorizationPopup extends React.Component {
                <h3>Available authorizations</h3>
                <button type="button" className="close-modal" onClick={ this.close }>
                  <svg width="20" height="20">
-                    <use xlinkHref="#close" />
+                    <use href="#close" xlinkHref="#close" />
                  </svg>
                </button>
              </div>
--- a/src/core/components/auth/authorize-btn.jsx
+++ b/src/core/components/auth/authorize-btn.jsx
@@ -25,7 +25,7 @@ export default class AuthorizeBtn extends React.Component {
        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
          <span>Authorize</span>
          <svg width="20" height="20">
-            <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+            <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
          </svg>
        </button>
      { showPopup && <AuthorizationPopup /> }
--- a/src/core/components/auth/authorize-operation-btn.jsx
+++ b/src/core/components/auth/authorize-operation-btn.jsx
@@ -24,7 +24,7 @@ export default class AuthorizeOperationBtn extends React.Component {
    return (
      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
        <svg width="20" height="20">
-          <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+          <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
        </svg>
      </button>

--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -69,7 +69,10 @@ export default class BaseLayout extends React.Component {
              <div className="scheme-container">
                <Col className="schemes wrapper" mobile={12}>
                  { schemes && schemes.size ? (
-                    <Schemes schemes={ schemes } specActions={ specActions } />
+                    <Schemes
+                      currentScheme={specSelectors.operationScheme()}
+                      schemes={ schemes }
+                      specActions={ specActions } />
                  ) : null }

                  { securityDefinitions ? (
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -55,14 +55,14 @@ export default class Model extends Component {
        return <ObjectModel
          className="object" { ...this.props }
          schema={ modelSchema }
-          name={ name || modelName }
+          name={ modelName || name }
          deprecated={deprecated}
          isRef={ isRef!== undefined ? isRef : !!$$ref } />
      case "array":
        return <ArrayModel
          className="array" { ...this.props }
          schema={ modelSchema }
-          name={ name || modelName }
+          name={ modelName || name }
          deprecated={deprecated}
          required={ required } />
      case "string":
@@ -74,8 +74,8 @@ export default class Model extends Component {
          { ...this.props }
          getComponent={ getComponent }
          schema={ modelSchema }
-          name={ name || modelName }
+          name={ modelName || name }
          deprecated={deprecated}
-          required={ required }/>    }
+          required={ required }/> }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -24,7 +24,7 @@ export default class Models extends Component {
    return <section className={ showModels ? "models is-open" : "models"}>
      <h4 onClick={() => layoutActions.show("models", !showModels)}>
        <span>Models</span>
-        <svg className="arrow" width="20" height="20">
+        <svg width="20" height="20">
          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
        </svg>
      </h4>
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -17,9 +17,10 @@ export default class ObjectModel extends Component {
  }

  render(){
-    let { schema, name, isRef, getComponent, depth, ...props } = this.props
-    let { expandDepth, specSelectors } = this.props
+    let { schema, name, isRef, getComponent, depth, expandDepth, ...otherProps } = this.props
+    let { specSelectors } = otherProps
    let { isOAS3 } = specSelectors
+
    let description = schema.get("description")
    let properties = schema.get("properties")
    let additionalProperties = schema.get("additionalProperties")
@@ -59,7 +60,7 @@ export default class ObjectModel extends Component {
          }
          <span className="inner-object">
            {
-              <table className="model" style={{ marginLeft: "2em" }}><tbody>
+              <table className="model"><tbody>
              {
                !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
                    <td>description:</td>
@@ -82,7 +83,7 @@ export default class ObjectModel extends Component {
                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
                        </td>
                        <td style={{ verticalAlign: "top" }}>
-                          <Model key={ `object-${name}-${key}_${value}` } { ...props }
+                          <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                 required={ isRequired }
                                 getComponent={ getComponent }
                                 schema={ value }
@@ -96,7 +97,7 @@ export default class ObjectModel extends Component {
                  : <tr>
                    <td>{ "< * >:" }</td>
                    <td>
-                      <Model { ...props } required={ false }
+                      <Model { ...otherProps } required={ false }
                             getComponent={ getComponent }
                             schema={ additionalProperties }
                             depth={ depth + 1 } />
@@ -109,7 +110,7 @@ export default class ObjectModel extends Component {
                    <td>{ "anyOf ->" }</td>
                    <td>
                      {anyOf.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></div>
@@ -123,7 +124,7 @@ export default class ObjectModel extends Component {
                    <td>{ "oneOf ->" }</td>
                    <td>
                      {oneOf.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></div>
@@ -137,7 +138,7 @@ export default class ObjectModel extends Component {
                    <td>{ "not ->" }</td>
                    <td>
                      {not.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></div>
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -186,7 +186,7 @@ export default class Operation extends PureComponent {
            }
          </div>

-          <Collapse isOpened={shown} animated>
+          <Collapse isOpened={shown}>
            <div className="opblock-body">
              { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
              { description &&
@@ -229,7 +229,7 @@ export default class Operation extends PureComponent {
                             path={ path }
                             method={ method }
                             specActions={ specActions }
-                             operationScheme={ operationScheme } />
+                             currentScheme={ operationScheme } />
                  </div> : null
              }

--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -109,7 +109,7 @@ export default class Operations extends React.Component {

                    <button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
                      <svg className="arrow" width="20" height="20">
-                        <use xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
+                        <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
                      </svg>
                    </button>
                  </h4>
--- a/src/core/components/param-body.jsx
+++ b/src/core/components/param-body.jsx
@@ -69,7 +69,9 @@ export default class ParamBody extends PureComponent {
    let { param, fn:{inferSchema} } = this.props
    let schema = inferSchema(param.toJS())

-    return getSampleSchema(schema, xml)
+    return getSampleSchema(schema, xml, {
+      includeWriteOnly: true
+    })
  }

  onChange = (value, { isEditBox, isXml }) => {
--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -58,6 +58,8 @@ export default class ParameterRow extends Component {
  render() {
    let {param, onChange, getComponent, isExecute, fn, onChangeConsumes, specSelectors, pathMethod} = this.props

+    let { isOAS3 } = specSelectors
+
    // const onChangeWrapper = (value) => onChange(param, value)
    const JsonSchemaForm = getComponent("JsonSchemaForm")
    const ParamBody = getComponent("ParamBody")
@@ -80,10 +82,11 @@ export default class ParameterRow extends Component {

    let schema = param.get("schema")

+    let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
    let isFormData = inType === "formData"
    let isFormDataSupported = "FormData" in win
    let required = param.get("required")
-    let itemType = param.getIn(["items", "type"])
+    let itemType =  param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
    let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
    let value = parameter ? parameter.get("value") : ""

@@ -94,7 +97,10 @@ export default class ParameterRow extends Component {
            { param.get("name") }
            { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
          </div>
-          <div className="parameter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">{ type } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__deprecated">
+            { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
+          </div>
          <div className="parameter__in">({ param.get("in") })</div>
        </td>

--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -7,11 +7,12 @@ export default class Primitive extends Component {
  static propTypes = {
    schema: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
-    required: PropTypes.bool
+    name: PropTypes.string,
+    depth: PropTypes.number
  }

  render(){
-    let { schema, getComponent, required } = this.props
+    let { schema, getComponent, name, depth } = this.props

    if(!schema || !schema.get) {
      // don't render if schema isn't correctly formed
@@ -24,32 +25,34 @@ export default class Primitive extends Component {
    let enumArray = schema.get("enum")
    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")
    const EnumModel = getComponent("EnumModel")

-    return <span className="prop">
-      <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
-      { format && <span className="prop-format">(${format})</span>}
-      {
-        properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-          <br />{ key }: { String(v) }</span>)
-          : null
-      }
-      {
-        !description ? null :
-          <Markdown source={ description } />
-      }
-      {
-        xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
-          {
-            xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
-          }
-        </span>): null
-      }
-      {
-        enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
-      }
+    return <span className="model">
+      <span className="prop">
+        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ name }</span> }
+        <span className="prop-type">{ type }</span>
+        { format && <span className="prop-format">(${format})</span>}
+        {
+          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
+            <br />{ key }: { String(v) }</span>)
+            : null
+        }
+        {
+          !description ? null :
+            <Markdown source={ description } />
+        }
+        {
+          xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
+            {
+              xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
+            }
+          </span>): null
+        }
+        {
+          enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
+        }
+      </span>
    </span>
  }
 }
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -83,11 +83,16 @@ export default class Response extends React.Component {

    if(isOAS3()) {
      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
-      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
+      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
+        includeReadOnly: true
+      }) : null
      schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
    } else {
      schema = inferSchema(response.toJS())
-      sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+      sampleResponse = schema ? getSampleSchema(schema, contentType, {
+        includeReadOnly: true,
+        includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
+       }) : null
    }
    let example = getExampleComponent( sampleResponse, examples, HighlightCode )

@@ -122,10 +127,10 @@ export default class Response extends React.Component {


        </td>
-        {specSelectors.isOAS3() ? <td>
+        {specSelectors.isOAS3() ? <td className="col response-col_links">
          { links ?
            links.toSeq().map((link, key) => {
-              return <OperationLink key={key} name={key} link={ link }/>
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
            })
          : <i>No links</i>}
        </td> : null}
--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -68,7 +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 }
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
              </tr>
            </thead>
            <tbody>
--- a/src/core/components/schemes.jsx
+++ b/src/core/components/schemes.jsx
@@ -6,9 +6,9 @@ export default class Schemes extends React.Component {
  static propTypes = {
    specActions: PropTypes.object.isRequired,
    schemes: PropTypes.object.isRequired,
+    currentScheme: PropTypes.string.isRequired,
    path: PropTypes.string,
    method: PropTypes.string,
-    operationScheme: PropTypes.string
  }

  componentWillMount() {
@@ -19,8 +19,8 @@ export default class Schemes extends React.Component {
  }

  componentWillReceiveProps(nextProps) {
-    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
-      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+    if ( !this.props.currentScheme || !nextProps.schemes.includes(this.props.currentScheme) ) {
+      // if we don't have a selected currentScheme or if our selected scheme is no longer an option,
      // then fire 'change' event and select the first scheme in the list of options
      this.setScheme(nextProps.schemes.first())
    }
--- a/src/core/curlify.js
+++ b/src/core/curlify.js
@@ -20,7 +20,7 @@ export default function curl( request ){
  if ( request.get("body") ){

    if(type === "multipart/form-data" && request.get("method") === "POST") {
-      for( let [ k,v ] of request.get("body").values()) {
+      for( let [ k,v ] of request.get("body").entrySeq()) {
        curlified.push( "-F" )
        if (v instanceof win.File) {
          curlified.push( `"${k}=@${v.name};type=${v.type}"` )
--- a/src/core/plugins/oas3/components/operation-link.jsx
+++ b/src/core/plugins/oas3/components/operation-link.jsx
@@ -4,19 +4,24 @@ import ImPropTypes from "react-immutable-proptypes"

 class OperationLink extends Component {
  render() {
-    const { link, name } = this.props
+    const { link, name, getComponent } = this.props
+
+    const Markdown = getComponent("Markdown")

    let targetOp = link.get("operationId") || link.get("operationRef")
    let parameters = link.get("parameters") && link.get("parameters").toJS()
    let description = link.get("description")

-    return <span>
-      <div style={{ padding: "5px 2px" }}>{name}{description ? `: ${description}` : ""}</div>
+    return <div style={{ marginBottom: "1.5em" }}>
+      <div style={{ marginBottom: ".5em" }}>
+        <b><code>{name}</code></b>
+        { description ? <Markdown source={description}></Markdown> : null }
+      </div>
      <pre>
        Operation `{targetOp}`<br /><br />
        Parameters {padString(0, JSON.stringify(parameters, null, 2)) || "{}"}<br />
      </pre>
-    </span>
+    </div>
  }

 }
@@ -30,6 +35,7 @@ function padString(n, string) {
 }

 OperationLink.propTypes = {
+  getComponent: PropTypes.func.isRequired,
  link: ImPropTypes.orderedMap.isRequired,
  name: PropTypes.String
 }
--- a/src/core/plugins/oas3/components/request-body.jsx
+++ b/src/core/plugins/oas3/components/request-body.jsx
@@ -16,7 +16,9 @@ const RequestBody = ({ requestBody, getComponent, specSelectors, contentType })

  const mediaTypeValue = requestBodyContent.get(contentType)

-  const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType)
+  const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType, {
+    includeWriteOnly: true
+  })

  return <div>
    { requestBodyDescription &&
--- a/src/core/plugins/oas3/wrap-components/model.jsx
+++ b/src/core/plugins/oas3/wrap-components/model.jsx
@@ -3,7 +3,6 @@ import PropTypes from "prop-types"
 import { OAS3ComponentWrapFactory } from "../helpers"
 import { Model } from "core/components/model"

-
 class ModelComponent extends Component {
  static propTypes = {
    schema: PropTypes.object.isRequired,
--- a/src/core/plugins/samples/fn.js
+++ b/src/core/plugins/samples/fn.js
@@ -9,7 +9,7 @@ const primitives = {
  "number": () => 0,
  "number_float": () => 0.0,
  "integer": () => 0,
-  "boolean": (schema) => typeof schema.default === "boolean" ? schema.default : true 
+  "boolean": (schema) => typeof schema.default === "boolean" ? schema.default : true
 }

 const primitive = (schema) => {
@@ -27,7 +27,7 @@ const primitive = (schema) => {

 export const sampleFromSchema = (schema, config={}) => {
  let { type, example, properties, additionalProperties, items } = objectify(schema)
-  let { includeReadOnly } = config
+  let { includeReadOnly, includeWriteOnly } = config

  if(example !== undefined)
    return example
@@ -46,16 +46,20 @@ export const sampleFromSchema = (schema, config={}) => {
    let props = objectify(properties)
    let obj = {}
    for (var name in props) {
-      if ( !props[name].readOnly || includeReadOnly ) {
-        obj[name] = sampleFromSchema(props[name], { includeReadOnly: includeReadOnly })
+      if ( props[name].readOnly && !includeReadOnly ) {
+        continue
      }
+      if ( props[name].writeOnly && !includeWriteOnly ) {
+        continue
+      }
+      obj[name] = sampleFromSchema(props[name], config)
    }

    if ( additionalProperties === true ) {
      obj.additionalProp1 = {}
    } else if ( additionalProperties ) {
      let additionalProps = objectify(additionalProperties)
-      let additionalPropVal = sampleFromSchema(additionalProps, { includeReadOnly: includeReadOnly })
+      let additionalPropVal = sampleFromSchema(additionalProps, config)

      for (let i = 1; i < 4; i++) {
        obj["additionalProp" + i] = additionalPropVal
@@ -65,7 +69,7 @@ export const sampleFromSchema = (schema, config={}) => {
  }

  if(type === "array") {
-    return [ sampleFromSchema(items, { includeReadOnly: includeReadOnly }) ]
+    return [ sampleFromSchema(items, config) ]
  }

  if(schema["enum"]) {
@@ -96,7 +100,7 @@ export const inferSchema = (thing) => {
 export const sampleXmlFromSchema = (schema, config={}) => {
  let objectifySchema = objectify(schema)
  let { type, properties, additionalProperties, items, example } = objectifySchema
-  let { includeReadOnly } = config
+  let { includeReadOnly, includeWriteOnly } = config
  let defaultValue = objectifySchema.default
  let res = {}
  let _attr = {}
@@ -177,27 +181,32 @@ export const sampleXmlFromSchema = (schema, config={}) => {
    example = example || {}

    for (let propName in props) {
-      if ( !props[propName].readOnly || includeReadOnly ) {
-        props[propName].xml = props[propName].xml || {}
+      if ( props[propName].readOnly && !includeReadOnly ) {
+        continue
+      }
+      if ( props[propName].writeOnly && !includeWriteOnly ) {
+        continue
+      }

-        if (props[propName].xml.attribute) {
-          let enumAttrVal = Array.isArray(props[propName].enum) && props[propName].enum[0]
-          let attrExample = props[propName].example
-          let attrDefault = props[propName].default
-          _attr[props[propName].xml.name || propName] = attrExample!== undefined && attrExample
-            || example[propName] !== undefined && example[propName] || attrDefault !== undefined && attrDefault
-            || enumAttrVal || primitive(props[propName])
+      props[propName].xml = props[propName].xml || {}
+
+      if (props[propName].xml.attribute) {
+        let enumAttrVal = Array.isArray(props[propName].enum) && props[propName].enum[0]
+        let attrExample = props[propName].example
+        let attrDefault = props[propName].default
+        _attr[props[propName].xml.name || propName] = attrExample!== undefined && attrExample
+          || example[propName] !== undefined && example[propName] || attrDefault !== undefined && attrDefault
+          || enumAttrVal || primitive(props[propName])
+      } else {
+        props[propName].xml.name = props[propName].xml.name || propName
+        props[propName].example = props[propName].example !== undefined ? props[propName].example : example[propName]
+        let t = sampleXmlFromSchema(props[propName])
+        if (Array.isArray(t)) {
+          res[displayName] = res[displayName].concat(t)
        } else {
-          props[propName].xml.name = props[propName].xml.name || propName
-          props[propName].example = props[propName].example !== undefined ? props[propName].example : example[propName]
-          let t = sampleXmlFromSchema(props[propName])
-          if (Array.isArray(t)) {
-            res[displayName] = res[displayName].concat(t)
-          } else {
-            res[displayName].push(t)
-          }
-
+          res[displayName].push(t)
        }
+
      }
    }

--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -1,21 +1,3 @@
-html
-{
-    box-sizing: border-box;
-}
-*,
-*:before,
-*:after
-{
-    box-sizing: inherit;
-}
-
-body
-{
-    margin: 0;
-
-    background: #fafafa;
-}
-
 .wrapper
 {
    width: 100%;
@@ -540,6 +522,22 @@ body
    }
 }

+.response-col_links
+{
+    padding-left: 2em;
+    max-width: 40em;
+    font-size: 14px;
+
+    @include text_body();
+
+    .response-undocumented
+    {
+        font-size: 11px;
+
+        @include text_code(#999);
+    }
+}
+
 .response-col_description__inner
 {
    span
@@ -699,7 +697,6 @@ body
 .renderedMarkdown {
  p {
    @include text_body();
-    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -227,8 +227,6 @@ span
 {
    > span.model
    {
-        padding: 0 0 0 10px;
-
        .brace-close
        {
            padding: 0 0 0 10px;
@@ -236,6 +234,12 @@ span
    }
 }

+.prop-name
+{
+    display: inline-block;
+    width: 100px;
+}
+
 .prop-type
 {
    color: #55a;
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -19,8 +19,8 @@ table

                    &:first-of-type
                    {
-                        width: 100px;
-                        padding: 0;
+                        width: 124px;
+                        padding: 0 0 0 2em;
                    }
                }
            }
@@ -52,7 +52,8 @@ table

                &:first-of-type
                {
-                    width: 20%;
+                    max-width: 20%;
+                    min-width: 6em;
                    padding: 10px 0;
                }
            }
@@ -138,6 +139,14 @@ table
    @include text_code(#888);
 }

+.parameter__deprecated
+{
+    font-size: 12px;
+    font-style: italic;
+
+    @include text_code(#f00);
+}
+

 .table-container
 {
--- a/src/style/_topbar.scss
+++ b/src/style/_topbar.scss
@@ -43,6 +43,7 @@
            margin: 0;

            border: 2px solid #547f00;
+            border-radius: 4px 0 0 4px;
            outline: none;
        }

--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -14,5 +14,6 @@
    @import 'information';
    @import 'authorize';
    @import 'errors';
+    @include text_body();
    @import 'split-pane-mode';
 }