Merge pull request #3543 from shockey/bug/oas3-link-display-issues

Correct funky CSS for links

Author: shockey

src/core/components/response.jsx

@@ -122,10 +122,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}

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>

src/core/plugins/oas3/components/operation-link.jsx

@@ -4,14 +4,19 @@ 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>
+      <div style={{ marginTop: "1.5em", 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 />
@@ -30,6 +35,7 @@ function padString(n, string) {
 }
 
 OperationLink.propTypes = {
+  getComponent: PropTypes.func.isRequired,
   link: ImPropTypes.orderedMap.isRequired,
   name: PropTypes.String
 }

src/style/_layout.scss

@@ -522,6 +522,22 @@
     }
 }
 
+.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

src/style/_table.scss

@@ -52,7 +52,8 @@ table
 
                 &:first-of-type
                 {
-                    width: 20%;
+                    max-width: 20%;
+                    min-width: 6em;
                     padding: 10px 0;
                 }
             }