Propagate the specPath prop through most model components

src/core/components/array-model.jsx

@@ -12,11 +12,12 @@ export default class ArrayModel extends Component {
     name: PropTypes.string,
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
+    specPath: PropTypes.array.isRequired,
     depth: PropTypes.number
   }
 
   render(){
-    let { getComponent, getConfigs, schema, depth, expandDepth, name } = this.props
+    let { getComponent, getConfigs, schema, depth, expandDepth, name, specPath } = this.props
     let description = schema.get("description")
     let items = schema.get("items")
     let title = schema.get("title") || name
@@ -47,7 +48,7 @@ export default class ArrayModel extends Component {
             !description ? null :
               <Markdown source={ description } />
           }
-          <span><Model { ...this.props } getConfigs={ getConfigs } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } getConfigs={ getConfigs } specPath={[...specPath, "items"]} name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
         ]
       </ModelCollapse>
     </span>

src/core/components/model-example.jsx

@@ -8,7 +8,8 @@ export default class ModelExample extends React.Component {
     schema: PropTypes.object.isRequired,
     example: PropTypes.any.isRequired,
     isExecute: PropTypes.bool,
-    getConfigs: PropTypes.func.isRequired
+    getConfigs: PropTypes.func.isRequired,
+    specPath: PropTypes.array.isRequired,
   }
 
   constructor(props, context) {
@@ -32,7 +33,7 @@ export default class ModelExample extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors, schema, example, isExecute, getConfigs } = this.props
+    let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath } = this.props
     let { defaultModelExpandDepth } = getConfigs()
     const ModelWrapper = getComponent("ModelWrapper")
 
@@ -54,7 +55,8 @@ export default class ModelExample extends React.Component {
                                                      getComponent={ getComponent }
                                                      getConfigs={ getConfigs }
                                                      specSelectors={ specSelectors }
-                                                     expandDepth={ defaultModelExpandDepth } />
+                                                     expandDepth={ defaultModelExpandDepth }
+                                                     specPath={specPath} />
 
 
         }

src/core/components/model.jsx

@@ -12,7 +12,8 @@ export default class Model extends PureComponent {
     isRef: PropTypes.bool,
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
-    depth: PropTypes.number
+    depth: PropTypes.number,
+    specPath: PropTypes.array.isRequired,
   }
 
   getModelName =( ref )=> {
@@ -31,7 +32,7 @@ export default class Model extends PureComponent {
   }
 
   render () {
-    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef } = this.props
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
@@ -55,6 +56,7 @@ export default class Model extends PureComponent {
       case "object":
         return <ObjectModel
           className="object" { ...this.props }
+          specPath={specPath}
           getConfigs={ getConfigs }
           schema={ schema }
           name={ name }

src/core/components/models.jsx

@@ -15,6 +15,7 @@ export default class Models extends Component {
     let definitions = specSelectors.definitions()
     let { docExpansion, defaultModelExpandDepth } = getConfigs()
     let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" )
+    const specPathBase = specSelectors.isOAS3() ? ["components", "schemas"] : ["definitions"]
 
     const ModelWrapper = getComponent("ModelWrapper")
     const Collapse = getComponent("Collapse")
@@ -35,6 +36,7 @@ export default class Models extends Component {
               <ModelWrapper name={ name }
                      expandDepth={ defaultModelExpandDepth }
                      schema={ model }
+                     specPath={[...specPathBase, name]}
                      getComponent={ getComponent }
                      getConfigs={ getConfigs }
                      specSelectors={ specSelectors }/>

src/core/components/object-model.jsx

@@ -14,13 +14,15 @@ export default class ObjectModel extends Component {
     name: PropTypes.string,
     isRef: PropTypes.bool,
     expandDepth: PropTypes.number,
-    depth: PropTypes.number
+    depth: PropTypes.number,
+    specPath: PropTypes.object.isRequired
   }
 
   render(){
-    let { schema, name, isRef, getComponent, getConfigs, depth, expandDepth, ...otherProps } = this.props
+    let { schema, name, isRef, getComponent, getConfigs, depth, specPath, expandDepth, ...otherProps } = this.props
     let { specSelectors } = otherProps
-    let { isOAS3 } = specSelectors
+
+    const { isOAS3 } = specSelectors
 
     if(!schema) {
       return null
@@ -39,14 +41,13 @@ export default class ObjectModel extends Component {
     const Model = getComponent("Model")
     const ModelCollapse = getComponent("ModelCollapse")
 
-    const JumpToPathSection = ({ name }) => {
-      const path = isOAS3 && isOAS3() ? `components.schemas.${name}` : `definitions.${name}`
-      return <span className="model-jump-to-path"><JumpToPath path={path} /></span>
+    const JumpToPathSection = () => {
+      return <span className="model-jump-to-path"><JumpToPath specPath={specPath} /></span>
     }
     const collapsedContent = (<span>
         <span>{ braceOpen }</span>...<span>{ braceClose }</span>
         {
-        isRef ? <JumpToPathSection name={ name }/> : ""
+          isRef ? <JumpToPathSection /> : ""
         }
     </span>)
 
@@ -63,7 +64,7 @@ export default class ObjectModel extends Component {
       <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
          <span className="brace-open object">{ braceOpen }</span>
           {
-            !isRef ? null : <JumpToPathSection name={ name }/>
+            !isRef ? null : <JumpToPathSection />
           }
           <span className="inner-object">
             {
@@ -94,6 +95,7 @@ export default class ObjectModel extends Component {
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
+                                 specPath={[...specPath, "properties", key]}
                                  getConfigs={ getConfigs }
                                  schema={ value }
                                  depth={ depth + 1 } />
@@ -132,6 +134,7 @@ export default class ObjectModel extends Component {
                     <td>
                       <Model { ...otherProps } required={ false }
                              getComponent={ getComponent }
+                             specPath={[...specPath, "additionalProperties"]}
                              getConfigs={ getConfigs }
                              schema={ additionalProperties }
                              depth={ depth + 1 } />
@@ -146,6 +149,7 @@ export default class ObjectModel extends Component {
                       {anyOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 specPath={[...specPath, "anyOf", k]}
                                  getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
@@ -161,6 +165,7 @@ export default class ObjectModel extends Component {
                       {oneOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 specPath={[...specPath, "oneOf", k]}
                                  getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
@@ -177,6 +182,7 @@ export default class ObjectModel extends Component {
                         <Model { ...otherProps }
                                required={ false }
                                getComponent={ getComponent }
+                               specPath={[...specPath, "not"]}
                                getConfigs={ getConfigs }
                                schema={ not }
                                depth={ depth + 1 } />

src/core/components/operation.jsx

@@ -6,6 +6,7 @@ import { Iterable } from "immutable"
 
 export default class Operation extends PureComponent {
   static propTypes = {
+    specPath: PropTypes.array.isRequired,
     operation: PropTypes.instanceOf(Iterable).isRequired,
     response: PropTypes.instanceOf(Iterable),
     request: PropTypes.instanceOf(Iterable),
@@ -36,6 +37,7 @@ export default class Operation extends PureComponent {
 
   render() {
     let {
+      specPath,
       response,
       request,
       toggleShown,
@@ -57,7 +59,6 @@ export default class Operation extends PureComponent {
     let {
       isShown,
       isAuthorized,
-      jumpToKey,
       path,
       method,
       op,
@@ -112,8 +113,10 @@ export default class Operation extends PureComponent {
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
     return (
+      <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
+        {/*TODO: convert this into a component, that can be wrapped
+          and pulled in with getComponent */}
         <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
               <a
@@ -122,7 +125,7 @@ export default class Operation extends PureComponent {
                 href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
                 <span>{path}</span>
               </a>
-                <JumpToPath path={jumpToKey} />
+                <JumpToPath path={specPath} /> {/*TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
               </span>
 
             { !showSummary ? null :
@@ -170,6 +173,7 @@ export default class Operation extends PureComponent {
 
               <Parameters
                 parameters={parameters}
+                specPath={[...specPath, "parameters"]}
                 operation={operation}
                 onChangeKey={onChangeKey}
                 onTryoutClick = { onTryoutClick }
@@ -243,6 +247,7 @@ export default class Operation extends PureComponent {
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
+                    specPath={[...specPath, "responses"]}
                     path={ path }
                     method={ method }
                     displayRequestDuration={ displayRequestDuration }

src/core/components/operations.jsx

@@ -119,6 +119,8 @@ export default class Operations extends React.Component {
                       operations.map( op => {
                         const path = op.get("path")
                         const method = op.get("method")
+                        const specPath = ["paths", path, method]
+
 
                         // FIXME: (someday) this logic should probably be in a selector,
                         // but doing so would require further opening up
@@ -134,6 +136,7 @@ export default class Operations extends React.Component {
 
                         return <OperationContainer
                           key={`${path}-${method}`}
+                          specPath={specPath}
                           op={op}
                           path={path}
                           method={method}

src/core/components/parameter-row.jsx

@@ -14,7 +14,8 @@ export default class ParameterRow extends Component {
     onChangeConsumes: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     pathMethod: PropTypes.array.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    getConfigs: PropTypes.func.isRequired,
+    specPath: PropTypes.array.isRequired,
   }
 
   constructor(props, context) {
@@ -69,7 +70,7 @@ export default class ParameterRow extends Component {
   }
 
   render() {
-    let {param, onChange, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, pathMethod} = this.props
+    let {param, onChange, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, pathMethod, specPath} = this.props
 
     let { isOAS3 } = specSelectors
 
@@ -138,6 +139,7 @@ export default class ParameterRow extends Component {
 
           {
             bodyParam && schema ? <ModelExample getComponent={ getComponent }
+                                                specPath={[...specPath, "schema"]}
                                                 getConfigs={ getConfigs }
                                                 isExecute={ isExecute }
                                                 specSelectors={ specSelectors }

src/core/components/parameters.jsx

@@ -20,7 +20,8 @@ export default class Parameters extends Component {
     onCancelClick: PropTypes.func,
     onChangeKey: PropTypes.array,
     pathMethod: PropTypes.array.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    getConfigs: PropTypes.func.isRequired,
+    specPath: PropTypes.array.isRequired,
   }
 
 
@@ -30,6 +31,7 @@ export default class Parameters extends Component {
     tryItOutEnabled: false,
     allowTryItOut: true,
     onChangeKey: [],
+    specPath: [],
   }
 
   onChange = ( param, value, isXml ) => {
@@ -58,6 +60,7 @@ export default class Parameters extends Component {
       parameters,
       allowTryItOut,
       tryItOutEnabled,
+      specPath,
 
       fn,
       getComponent,
@@ -92,8 +95,10 @@ export default class Parameters extends Component {
               </thead>
               <tbody>
                 {
-                  eachMap(parameters, (parameter) => (
-                    <ParameterRow fn={ fn }
+                  eachMap(parameters, (parameter, i) => (
+                    <ParameterRow
+                      fn={ fn }
+                      specPath={[...specPath, i]}
                       getComponent={ getComponent }
                       getConfigs={ getConfigs }
                       param={ parameter }

src/core/components/response.jsx

@@ -47,6 +47,7 @@ export default class Response extends React.Component {
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    specPath: PropTypes.array.isRequired,
     fn: PropTypes.object.isRequired,
     contentType: PropTypes.string,
     controlsAcceptHeader: PropTypes.bool,
@@ -72,6 +73,7 @@ export default class Response extends React.Component {
       code,
       response,
       className,
+      specPath,
       fn,
       getComponent,
       getConfigs,
@@ -94,16 +96,19 @@ export default class Response extends React.Component {
     const ContentType = getComponent("contentType")
 
     var sampleResponse
-    var schema
+    var schema, specPathWithPossibleSchema
 
     if(isOAS3()) {
-      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
+      const schemaPath = ["content", this.state.responseContentType, "schema"]
+      const oas3SchemaForContentType = response.getIn(schemaPath)
       sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
         includeReadOnly: true
       }) : null
       schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
+      specPathWithPossibleSchema = oas3SchemaForContentType ? schemaPath : specPath
     } else {
-      schema = inferSchema(response.toJS())
+      schema = inferSchema(response.toJS()) // TODO: don't convert back and forth. Lets just stick with immutable for inferSchema
+      specPathWithPossibleSchema = response.has("schema") ? [...specPath, "schema"] : specPath
       sampleResponse = schema ? getSampleSchema(schema, contentType, {
         includeReadOnly: true,
         includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
@@ -145,6 +150,7 @@ export default class Response extends React.Component {
 
           { example ? (
             <ModelExample
+              specPath={specPathWithPossibleSchema}
               getComponent={ getComponent }
               getConfigs={ getConfigs }
               specSelectors={ specSelectors }