fix(try-it-out): reset of oas3 requestBody should use default values (#8265)

Co-authored-by: Mathias Spanhove <[email protected]>

Author: MathiasSpanhove

src/core/components/operation.jsx

@@ -17,6 +17,7 @@ export default class Operation extends PureComponent {
 
     toggleShown: PropTypes.func.isRequired,
     onTryoutClick: PropTypes.func.isRequired,
+    onResetClick: PropTypes.func.isRequired,
     onCancelClick: PropTypes.func.isRequired,
     onExecute: PropTypes.func.isRequired,
 
@@ -48,6 +49,7 @@ export default class Operation extends PureComponent {
       request,
       toggleShown,
       onTryoutClick,
+      onResetClick,
       onCancelClick,
       onExecute,
       fn,
@@ -152,6 +154,7 @@ export default class Operation extends PureComponent {
                   operation={operation}
                   onChangeKey={onChangeKey}
                   onTryoutClick = { onTryoutClick }
+                  onResetClick = { onResetClick }
                   onCancelClick = { onCancelClick }
                   tryItOutEnabled = { tryItOutEnabled }
                   allowTryItOut={allowTryItOut}

src/core/components/parameters/parameters.jsx

@@ -25,6 +25,7 @@ export default class Parameters extends Component {
     tryItOutEnabled: PropTypes.bool,
     allowTryItOut: PropTypes.bool,
     onTryoutClick: PropTypes.func,
+    onResetClick: PropTypes.func,
     onCancelClick: PropTypes.func,
     onChangeKey: PropTypes.array,
     pathMethod: PropTypes.array.isRequired,
@@ -73,7 +74,7 @@ export default class Parameters extends Component {
       })
     }
   }
-
+  
   onChangeMediaType = ({ value, pathMethod }) => {
     let { specActions, oas3Selectors, oas3Actions } = this.props
     const userHasEditedBody = oas3Selectors.hasUserEditedBody(...pathMethod)
@@ -94,6 +95,7 @@ export default class Parameters extends Component {
 
     let {
       onTryoutClick,
+      onResetClick,
       parameters,
       allowTryItOut,
       tryItOutEnabled,
@@ -161,7 +163,7 @@ export default class Parameters extends Component {
               enabled={tryItOutEnabled}
               onCancelClick={this.props.onCancelClick}
               onTryoutClick={onTryoutClick}
-              onResetClick={() => oas3Actions.setRequestBodyValue({ value: undefined, pathMethod })}/>
+              onResetClick={() => onResetClick(pathMethod)}/>
           ) : null}
         </div>
         {this.state.parametersVisible ? <div className="parameters-container">
@@ -220,7 +222,7 @@ export default class Parameters extends Component {
                   onChange={(value) => {
                     this.onChangeMediaType({ value, pathMethod })
                   }}
-                  className="body-param-content-type" 
+                  className="body-param-content-type"
                   ariaLabel="Request content type" />
               </label>
             </div>

src/core/containers/OperationContainer.jsx

@@ -122,6 +122,11 @@ export default class OperationContainer extends PureComponent {
     this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
   }
 
+  onResetClick = (pathMethod) => {
+    const defaultRequestBodyValue = this.props.oas3Selectors.selectDefaultRequestBodyValue(...pathMethod)
+    this.props.oas3Actions.setRequestBodyValue({ value: defaultRequestBodyValue, pathMethod })
+  }
+
   onExecute = () => {
     this.setState({ executeInProgress: true })
   }
@@ -225,6 +230,7 @@ export default class OperationContainer extends PureComponent {
 
         toggleShown={this.toggleShown}
         onTryoutClick={this.onTryoutClick}
+        onResetClick={this.onResetClick}
         onCancelClick={this.onCancelClick}
         onExecute={this.onExecute}
         specPath={specPath}

src/core/plugins/oas3/selectors.js

@@ -61,6 +61,26 @@ export const shouldRetainRequestBodyValue = onlyOAS3((state, path, method) => {
   }
 )
 
+export const selectDefaultRequestBodyValue = (state, path, method) => (system) => {
+  const {oas3Selectors, specSelectors} = system.getSystem()
+  const spec = specSelectors.specJson()
+  if(isOAS3Helper(spec)) {
+    const currentMediaType = oas3Selectors.requestContentType(path, method)
+    if (currentMediaType) {
+      return getDefaultRequestBodyValue(
+        specSelectors.specResolvedSubtree(["paths", path, method, "requestBody"]),
+        currentMediaType,
+        oas3Selectors.activeExamplesMember(
+          path, method,
+          "requestBody",
+          "requestBody",
+        )
+      )
+    }
+  }
+  return null
+}
+
 export const hasUserEditedBody = (state, path, method) => (system) => {
   const {oas3Selectors, specSelectors} = system.getSystem()
   const spec = specSelectors.specJson()

test/e2e-cypress/static/documents/bugs/8217.yaml

@@ -0,0 +1,28 @@
+openapi: 3.0.1
+info:
+  title: Example Swagger with required default body parameter
+  version: 1.0.0
+paths:
+  /pet:
+    post:
+      operationId: addPet
+      requestBody:
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/BodyParameter'
+        required: true
+      responses:
+        405:
+          description: Invalid input
+          content: {}
+components:
+  schemas:
+    BodyParameter:
+      required:
+        - bodyParameter
+      type: object
+      properties:
+        bodyParameter:
+          type: string
+          default: default

test/e2e-cypress/tests/bugs/8217.js

@@ -0,0 +1,24 @@
+describe("#8217: Reset Request Body not using default values", () => {
+  it("it reset the user edited value and executes with the default value in case of try out reset. (#6517)", () => {
+    cy
+      .visit("?url=/documents/bugs/8217.yaml")
+      .get("#operations-default-addPet")
+      .click()
+      // Expand Try It Out
+      .get(".try-out__btn")
+      .click()
+      // replace default sample with bad value
+      .get(`.parameters[data-property-name="bodyParameter"] input`)
+      .type("{selectall}not the default value")
+      // Reset Try It Out
+      .get(".try-out__btn.reset")
+      .click()
+      // Submit using default value
+      .get(".btn.execute")
+      .click()
+      // No required validation error on body parameter
+      .get(`.parameters[data-property-name="bodyParameter"] input`)
+      .should("have.value", "default")
+      .and("not.have.class", "invalid")
+  })
+})