fix(oas3): reset request body values in try it out (#9717)

Author: glowcloud

src/core/containers/OperationContainer.jsx

@@ -123,7 +123,26 @@ export default class OperationContainer extends PureComponent {
 
   onResetClick = (pathMethod) => {
     const defaultRequestBodyValue = this.props.oas3Selectors.selectDefaultRequestBodyValue(...pathMethod)
-    this.props.oas3Actions.setRequestBodyValue({ value: defaultRequestBodyValue, pathMethod })
+    const contentType = this.props.oas3Selectors.requestContentType(...pathMethod)
+
+    if (contentType === "application/x-www-form-urlencoded" || contentType === "multipart/form-data") {
+      const jsonRequestBodyValue = JSON.parse(defaultRequestBodyValue)
+      Object.entries(jsonRequestBodyValue).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          jsonRequestBodyValue[key] = jsonRequestBodyValue[key].map((val) => {
+            if (typeof val === "object") {
+              return JSON.stringify(val, null, 2)
+            } 
+            return val
+          })
+        } else if (typeof value === "object") {
+          jsonRequestBodyValue[key] = JSON.stringify(jsonRequestBodyValue[key], null, 2)
+        }
+      })
+      this.props.oas3Actions.setRequestBodyValue({ value: fromJS(jsonRequestBodyValue), pathMethod })
+    } else {
+      this.props.oas3Actions.setRequestBodyValue({ value: defaultRequestBodyValue, pathMethod })
+    }
   }
 
   onExecute = () => {

src/core/plugins/oas3/reducers.js

@@ -29,15 +29,13 @@ export default {
       // context: user switch from application/json to application/x-www-form-urlencoded
       currentVal = Map()
     }
-    let newVal
+    let newVal = currentVal
     const [...valueKeys] = value.keys()
     valueKeys.forEach((valueKey) => {
       let valueKeyVal = value.getIn([valueKey])
-      if (!currentVal.has(valueKey)) {
-        newVal = currentVal.setIn([valueKey, "value"], valueKeyVal)
-      } else if (!Map.isMap(valueKeyVal)) {
-        // context: user input will be received as String
-        newVal = currentVal.setIn([valueKey, "value"], valueKeyVal)
+      // there is no previous value for this key or the new value is received from user input as a string
+      if (!newVal.has(valueKey) || !Map.isMap(valueKeyVal)) {
+        newVal = newVal.setIn([valueKey, "value"], valueKeyVal)
       }
     })
     return state.setIn(["requestData", path, method, "bodyValue"], newVal)

test/e2e-cypress/e2e/features/try-it-out-reset.cy.js

@@ -0,0 +1,33 @@
+/**
+ * @prettier
+ */
+
+describe("Reset button in try it out", () => {
+  it("should reset the edited request body value and execute try it out with the default value", () => {
+    cy.visit("?url=/documents/features/try-it-out-reset.yaml")
+      .get("#operations-default-post_users")
+      .click()
+      .get(".try-out__btn")
+      .click()
+      .get(`.parameters[data-property-name="name"] input[type=text]`)
+      .type("{selectall}not the default name value")
+      .get(`.parameters[data-property-name="badgeid"] input[type=text]`)
+      .type("{selectall}not the default badge value")
+      .get(`.parameters[data-property-name="email"] input[type=text]`)
+      .type("{selectall}not the default email value")
+      .get(".btn.execute")
+      .click()
+      .get(".curl-command")
+      .contains(
+        "name=not%20the%20default%20name%20value&badgeid=not%20the%20default%20badge%20value&email=not%20the%20default%20email%20value"
+      )
+      .should("exist")
+      .get(".try-out__btn.reset")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".curl-command")
+      .contains("name=default%20name&badgeid=12345&email=jsmith%40business.com")
+      .should("exist")
+  })
+})

test/e2e-cypress/static/documents/features/try-it-out-reset.yaml

@@ -0,0 +1,46 @@
+openapi: 3.0.3
+info:
+  title: Test API
+  version: 1.0.0
+paths:
+  /users:
+    post:
+      summary: Create a user
+      description: Create a user, one of various ways
+      requestBody:
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/UserSource'
+      responses:
+        '204':
+          description: Successfully opened document
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                properties:
+                  output:
+                    type: string
+                    example: "Invalid request"
+components:
+  schemas:
+    UserSource:
+      type: object
+      properties:
+        name:
+          description: Full name
+          type: string
+          example: "default name"
+        badgeid:
+          description: Badge number
+          type: integer
+          format: uint32
+          example: 12345
+        email:
+          description: E-mail
+          type: string
+          example: "jsmith@business.com"
+      minProperties: 1
+      maxProperties: 3