(Actually) display callbacks

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

@@ -0,0 +1,31 @@
+import React from "react"
+
+export default ({ callbacks, getComponent }) => {
+  const Markdown = getComponent("Markdown")
+
+  if(!callbacks) {
+    return <span>No callbacks</span>
+  }
+
+  let callbackElements = callbacks.map((callback, callbackName) => {
+    return <div>
+      <h2>{callbackName}</h2>
+      { callback.map((pathItem, pathItemName) => {
+        return <div>
+          <h4>{pathItemName}</h4>
+          { pathItem.map((operation, method) => {
+            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>
+}

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

@@ -0,0 +1,7 @@
+import Callbacks from "./callbacks"
+import RequestBody from "./request-body"
+
+export default {
+  Callbacks,
+  RequestBody
+}

src/core/plugins/oas3/components/request-body.jsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { OrderedMap } from "immutable"
+
+
+export default ({ requestBody, getComponent, specSelectors }) => {
+  const Markdown = getComponent("Markdown")
+  const Model = getComponent("model")
+
+  const requestBodyDescription = (requestBody && requestBody.get("description")) || null
+  const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
+
+  return <div>
+    { requestBodyDescription &&
+      <p>{requestBodyDescription}</p>
+    }
+    { !requestBodyContent.count() ? <p>No content</p> :
+      requestBodyContent.map((mediaTypeValue, key) => (
+        <div>
+          <h4>{key}</h4>
+          <Model
+            getComponent={ getComponent }
+            specSelectors={ specSelectors }
+            expandDepth={1}
+            schema={mediaTypeValue.get("schema")} />
+        </div>
+      )).toArray()
+    }
+  </div>
+}

src/core/plugins/oas3/index.js

@@ -1,13 +1,12 @@
 // import reducers from "./reducers"
 // import * as actions from "./actions"
 import * as wrapSelectors from "./wrap-selectors"
+import components from "./components"
 import wrapComponents from "./wrap-components"
 
 export default function() {
   return {
-    components: {
-
-    },
+    components,
     wrapComponents,
     statePlugins: {
       spec: {

src/core/plugins/oas3/wrap-components/parameters.jsx

@@ -94,22 +94,20 @@ class Parameters extends Component {
 
     const ParameterRow = getComponent("parameterRow")
     const TryItOutButton = getComponent("TryItOutButton")
-    const Model = getComponent("model")
+    const Callbacks = getComponent("Callbacks", true)
+    const RequestBody = getComponent("RequestBody", true)
 
     const isExecute = tryItOutEnabled && allowTryItOut
 
     const requestBody = operation.get("requestBody")
-    const requestBodyDescription = (requestBody && requestBody.get("description")) || null
-    const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
-
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
           <div className="tab-header">
-            <div onClick={() => this.toggleTab("parameters")} className={this.state.parametersVisible ? "tab-item active" : "tab-item"}>
+            <div onClick={() => this.toggleTab("parameters")} className={`tab-item ${this.state.parametersVisible && "active"}`}>
               <h4 className="opblock-title"><span>Parameters</span></h4>
             </div>
-            <div onClick={() => this.toggleTab("callbacks")} className="tab-item">
+            <div onClick={() => this.toggleTab("callbacks")} className={`tab-item ${this.state.callbackVisible && "active"}`}>
               <h4 className="opblock-title"><span>Callbacks</span></h4>
             </div>
           </div>
@@ -147,31 +145,17 @@ class Parameters extends Component {
           }
         </div> : "" }
 
-        {this.state.callbackVisible ? <div className="callbacks-container">
-          covfefe
+        {this.state.callbackVisible ? <div className="callbacks-container opblock-description-wrapper">
+          <Callbacks callbacks={operation.get("callbacks")} />
         </div> : "" }
         {
-          requestBody &&
+          requestBody && this.state.parametersVisible &&
           <div className="opblock-section">
             <div className="opblock-section-header">
               <h4 className="opblock-title">Request body</h4>
             </div>
             <div className="opblock-description-wrapper">
-              { requestBodyDescription &&
-                <p>{requestBodyDescription}</p>
-              }
-              { !requestBodyContent.count() ? <p>No content</p> :
-                requestBodyContent.map((mediaTypeValue, key) => (
-                  <div>
-                    <h4>{key}</h4>
-                    <Model
-                      getComponent={ getComponent }
-                      specSelectors={ specSelectors }
-                      expandDepth={1}
-                      schema={mediaTypeValue.get("schema")} />
-                  </div>
-                )).toArray()
-              }
+              <RequestBody requestBody={requestBody} />
             </div>
           </div>
         }