feat: group / sort parameters by location (#6745)

src/core/components/parameters/parameters.jsx

@@ -1,18 +1,15 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import Im, { Map, List } from "immutable"
+import { Map, List } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
 
-// More readable, just iterate over maps, only
-const eachMap = (iterable, fn) => iterable.valueSeq().filter(Im.Map.isMap).map(fn)
-
 export default class Parameters extends Component {
 
   constructor(props) {
     super(props)
     this.state = {
       callbackVisible: false,
-     parametersVisible: true
+      parametersVisible: true,
     }
   }
 
@@ -57,7 +54,7 @@ export default class Parameters extends Component {
   onChangeConsumesWrapper = (val) => {
     let {
       specActions: { changeConsumesValue },
-      onChangeKey
+      onChangeKey,
     } = this.props
 
     changeConsumesValue(onChangeKey, val)
@@ -67,12 +64,12 @@ export default class Parameters extends Component {
     if (tab === "parameters") {
       return this.setState({
         parametersVisible: true,
-        callbackVisible: false
+        callbackVisible: false,
       })
     } else if (tab === "callbacks") {
       return this.setState({
         callbackVisible: true,
-        parametersVisible: false
+        parametersVisible: false,
       })
     }
   }
@@ -110,7 +107,7 @@ export default class Parameters extends Component {
       pathMethod,
       oas3Actions,
       oas3Selectors,
-      operation
+      operation,
     } = this.props
 
     const ParameterRow = getComponent("parameterRow")
@@ -124,17 +121,29 @@ export default class Parameters extends Component {
 
 
     const requestBody = operation.get("requestBody")
+
+    const groupedParametersArr = Object.values(parameters
+      .reduce((acc, x) => {
+        const key = x.get("in")
+        acc[key] ??= []
+        acc[key].push(x)
+        return acc
+      }, {}))
+      .reduce((acc, x) => acc.concat(x), [])
+
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
           {isOAS3 ? (
             <div className="tab-header">
-              <div onClick={() => this.toggleTab("parameters")} className={`tab-item ${this.state.parametersVisible && "active"}`}>
+              <div onClick={() => this.toggleTab("parameters")}
+                   className={`tab-item ${this.state.parametersVisible && "active"}`}>
                 <h4 className="opblock-title"><span>Parameters</span></h4>
               </div>
               {operation.get("callbacks") ?
                 (
-                  <div onClick={() => this.toggleTab("callbacks")} className={`tab-item ${this.state.callbackVisible && "active"}`}>
+                  <div onClick={() => this.toggleTab("callbacks")}
+                       className={`tab-item ${this.state.callbackVisible && "active"}`}>
                     <h4 className="opblock-title"><span>Callbacks</span></h4>
                   </div>
                 ) : null
@@ -150,7 +159,7 @@ export default class Parameters extends Component {
           ) : null}
         </div>
         {this.state.parametersVisible ? <div className="parameters-container">
-        { !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
+          {!groupedParametersArr.length ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
             <div className="table-container">
               <table className="parameters">
                 <thead>
@@ -161,7 +170,7 @@ export default class Parameters extends Component {
                 </thead>
                 <tbody>
                 {
-                  eachMap(parameters, (parameter, i) => (
+                  groupedParametersArr.map((parameter, i) => (
                     <ParameterRow
                       fn={fn}
                       specPath={specPath.push(i.toString())}
@@ -178,7 +187,7 @@ export default class Parameters extends Component {
                       oas3Selectors={oas3Selectors}
                       pathMethod={pathMethod}
                       isExecute={isExecute} />
-                  )).toArray()
+                  ))
                 }
                 </tbody>
               </table>
@@ -196,7 +205,8 @@ export default class Parameters extends Component {
           isOAS3 && requestBody && this.state.parametersVisible &&
           <div className="opblock-section opblock-section-request-body">
             <div className="opblock-section-header">
-              <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request body</h4>
+              <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request
+                body</h4>
               <label>
                 <ContentType
                   value={oas3Selectors.requestContentType(...pathMethod)}
@@ -219,14 +229,14 @@ export default class Parameters extends Component {
                 activeExamplesKey={oas3Selectors.activeExamplesMember(
                   ...pathMethod,
                   "requestBody",
-                  "requestBody" // RBs are currently not stored per-mediaType
+                  "requestBody", // RBs are currently not stored per-mediaType
                 )}
                 updateActiveExamplesKey={key => {
                   this.props.oas3Actions.setActiveExamplesMember({
                     name: key,
                     pathMethod: this.props.pathMethod,
                     contextType: "requestBody",
-                    contextName: "requestBody" // RBs are currently not stored per-mediaType
+                    contextName: "requestBody", // RBs are currently not stored per-mediaType
                   })
                 }
                 }
@@ -236,7 +246,7 @@ export default class Parameters extends Component {
                     const usableValue = Map.isMap(lastValue) ? lastValue : Map()
                     return oas3Actions.setRequestBodyValue({
                       pathMethod,
-                      value: usableValue.setIn(path, value)
+                      value: usableValue.setIn(path, value),
                     })
                   }
                   oas3Actions.setRequestBodyValue({ value, pathMethod })

test/e2e-cypress/static/documents/features/parameter-order.yaml

@@ -0,0 +1,63 @@
+openapi: 3.0.1
+info:
+ title: Example Swagger
+ version: '1.0'
+servers:
+ - url: /api/v1
+paths:
+  /test/{id}/related/{relatedId}:
+      post:
+        parameters:
+          - in: path
+            name: relatedId
+            required: true
+            schema:
+              type: integer
+              default: 1
+            description: The related ID
+          - in: header
+            name: TRACE-ID
+            required: true
+            schema:
+              type: integer
+              default: 1
+            description: The trace ID
+          - in: cookie
+            name: debug
+            required: true
+            schema:
+              type: number
+              enum: 
+                - 0
+                - 1
+            description: debug flag
+          - in: header
+            name: USER-ID
+            required: true
+            schema:
+              type: integer
+              default: 1
+            description: The user ID
+          - in: query
+            name: asc
+            required: true
+            schema:
+              type: boolean
+              default: true
+            description: sort asc
+          - in: path
+            name: id
+            required: true
+            schema:
+              type: integer
+              default: 1
+            description: The ID
+        requestBody:
+          description: Some
+          content:
+            application/json:
+             schema:
+               type: string
+        responses:
+          200:
+            description: Some

test/e2e-cypress/tests/features/parameter-order.js

@@ -0,0 +1,30 @@
+describe("Parameter order", () => {
+
+  it("should be well ordered", () => {
+    cy.visit("/?url=/documents/features/parameter-order.yaml")
+      .get("#operations-default-post_test__id__related__relatedId_")
+      .click()
+      .get(".parameters > tbody")
+      .children()
+      .each((tr, i, arr) => {
+        const parameterTableRows = Array.from(arr)
+        expect(tr).to.have.attr("data-param-in")
+        if (i === 0) {
+          return
+        }
+        const inValue = tr[0].getAttribute("data-param-in")
+        if (!inValue) {
+          return
+        }
+        const beforeInValue = parameterTableRows[i - 1].getAttribute("data-param-in")
+        const sameAsBefore = beforeInValue === inValue
+        if (sameAsBefore) {
+          expect(parameterTableRows[i - 1]).to.have.attr("data-param-in", inValue)
+          return
+        }
+        for (let x = i + 1; x < parameterTableRows.length; x++) {
+          expect(parameterTableRows[x]).to.not.have.attr("data-param-in", beforeInValue)
+        }
+      })
+  })
+})