feat: support for showExtensions on Response objects (#6535)

Author: shelbys

docs/usage/configuration.md

@@ -56,7 +56,7 @@ Parameter name | Docker variable | Description
 <a name="filter"></a>`filter` | `FILTER` | `Boolean=false OR String`. If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be Boolean to enable or disable, or a string, in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.
 <a name="maxDisplayedTags"></a>`maxDisplayedTags` | `MAX_DISPLAYED_TAGS` | `Number`. If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
 <a name="operationsSorter"></a>`operationsSorter` | _Unavailable_ | `Function=(a => a)`. Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
-<a name="showExtensions"></a>`showExtensions` | `SHOW_EXTENSIONS` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
+<a name="showExtensions"></a>`showExtensions` | `SHOW_EXTENSIONS` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, Responses, and Schema.
 <a name="showCommonExtensions"></a>`showCommonExtensions` | `SHOW_COMMON_EXTENSIONS` | `Boolean=false`. Controls the display of extensions (`pattern`, `maxLength`, `minLength`, `maximum`, `minimum`) fields and values for Parameters.
 <a name="tagSorter"></a>`tagsSorter` | _Unavailable_ | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger UI.
 <a name="useUnsafeMarkdown"></a>`useUnsafeMarkdown` | `USE_UNSAFE_MARKDOWN` | `Boolean=false`. When enabled, sanitizer will leave `style`, `class` and `data-*` attributes untouched on all HTML Elements declared inside markdown strings. This parameter is **Deprecated** and will be removed in `4.0.0`.

src/core/components/response-extension.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const ResponseExtension = ({ xKey, xVal }) => {
+    return <div className="response__extension">{ xKey }: { String(xVal) }</div>
+}
+ResponseExtension.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default ResponseExtension

src/core/components/response.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import cx from "classnames"
 import { fromJS, Seq, Iterable, List, Map } from "immutable"
-import { getSampleSchema, fromJSOrdered, stringify } from "core/utils"
+import { getExtensions, getSampleSchema, fromJSOrdered, stringify } from "core/utils"
 import { isFunc } from "../utils"
 
 const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
@@ -88,9 +88,12 @@ export default class Response extends React.Component {
 
     let { inferSchema } = fn
     let isOAS3 = specSelectors.isOAS3()
+    const { showExtensions } = getConfigs()
 
+    let extensions = showExtensions ? getExtensions(response) : null
     let headers = response.get("headers")
     let links = response.get("links")
+    const ResponseExtension = getComponent("ResponseExtension")
     const Headers = getComponent("headers")
     const HighlightCode = getComponent("highlightCode")
     const ModelExample = getComponent("modelExample")
@@ -188,6 +191,8 @@ export default class Response extends React.Component {
             <Markdown source={ response.get( "description" ) } />
           </div>
 
+          { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ResponseExtension key={`${key}-${v}`} xKey={key} xVal={v} /> )}
+
           {isOAS3 && response.get("content") ? (
             <section className="response-controls">
               <div

src/core/presets/base.js

@@ -43,6 +43,7 @@ import OperationExtRow from "core/components/operation-extension-row"
 import HighlightCode from "core/components/highlight-code"
 import Responses from "core/components/responses"
 import Response from "core/components/response"
+import ResponseExtension from "core/components/response-extension"
 import ResponseBody from "core/components/response-body"
 import { Parameters } from "core/components/parameters"
 import ParameterExt from "core/components/parameter-extension"
@@ -119,6 +120,7 @@ export default function() {
       highlightCode: HighlightCode,
       responses: Responses,
       response: Response,
+      ResponseExtension: ResponseExtension,
       responseBody: ResponseBody,
       parameters: Parameters,
       parameterRow: ParameterRow,

src/style/_table.scss

@@ -184,3 +184,11 @@ table
 .response-col_links {
     min-width: 6em;
 }
+
+.response__extension
+{
+    font-size: 12px;
+    font-style: italic;
+
+    @include text_code($table-parameter-in-font-color);
+}

test/e2e-cypress/static/documents/features/response-extension.openapi.yaml

@@ -0,0 +1,19 @@
+openapi: "3.0.0"
+
+paths:
+  /:
+    get:
+      operationId: "myOperation"
+      tags: ["myTag"]
+      summary: an operation
+      responses:
+        '200':
+          description: a pet to be returned
+          content:
+            application/json:
+              schema:
+                type: object
+        '404':
+          x-error: true
+          x-error-codes: [NOT_FOUND]
+          description: Not found

test/e2e-cypress/static/documents/features/response-extension.swagger.yaml

@@ -0,0 +1,15 @@
+swagger: "2.0"
+
+paths:
+  /:
+    get:
+      operationId: "myOperation"
+      tags: ["myTag"]
+      summary: an operation
+      responses:
+        "200":
+          description: ok
+        '404':
+          x-error: true
+          x-error-codes: [NOT_FOUND]
+          description: Not found

test/e2e-cypress/tests/features/response-extension.js

@@ -0,0 +1,49 @@
+describe("Response extension feature", () => {
+  describe("in Swagger 2", () => {
+    const swagger2BaseUrl = "/?showExtensions=true&docExpansion=full&url=/documents/features/response-extension.swagger.yaml"
+
+    describe("without x- values", () => {
+      it("should omit response extensions section", () => {
+        cy.visit(swagger2BaseUrl)
+          .get("tr.response[data-code='200'] td.response-col_description div.response__extension")
+          .should("not.exist")
+      })
+    })
+
+    describe("with x- values", () => {
+      it("should list each value", () => {
+        const page = cy.visit(swagger2BaseUrl)
+
+        page.get("tr.response[data-code='404'] td.response-col_description div.response__extension:nth-child(2)")
+          .should("have.text", "x-error: true")
+
+        page.get("tr.response[data-code='404'] td.response-col_description div.response__extension:nth-child(3)")
+        .should("have.text", "x-error-codes: List [ \"NOT_FOUND\" ]")
+      })
+    })
+  })
+
+  describe("in OpenAPI 3", () => {
+    const openAPI3BaseUrl = "/?showExtensions=true&docExpansion=full&url=/documents/features/response-extension.openapi.yaml"
+
+    describe("without x- values", () => {
+      it("should omit response extensions section", () => {
+        cy.visit(openAPI3BaseUrl)
+          .get("tr.response[data-code='200'] td.response-col_description div.response__extension")
+          .should("not.exist")
+      })
+    })
+
+    describe("with x- values", () => {
+      it("should list each value", () => {
+        const page = cy.visit(openAPI3BaseUrl)
+
+        page.get("tr.response[data-code='404'] td.response-col_description div.response__extension:nth-child(2)")
+          .should("have.text", "x-error: true")
+
+        page.get("tr.response[data-code='404'] td.response-col_description div.response__extension:nth-child(3)")
+        .should("have.text", "x-error-codes: List [ \"NOT_FOUND\" ]")
+      })
+    })
+  })
+})

test/unit/components/response.jsx

@@ -17,6 +17,9 @@ describe("<Response />", function () {
   }
   const props = {
     getComponent: c => components[c],
+    getConfigs: () => {
+      return {}
+    },
     specSelectors: {
       isOAS3() {
         return false