Updated requestBody restores to example after closing endpoint view and openning again

[yarsanich]

Q&A (please complete the following information)

• OS: macOS
• Browser: Firefox
• Version: 84
• Method of installation: editor.swagger.io
• Swagger-UI version: 3.39.0
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.1
info:
  title: Swagger Petstore
  description: This is a sample server Petstore server
  version: 1.0.0
paths:
  /pet:
    post:
      tags:
      - pet
      summary: Add a new pet to the store
      operationId: addPet
      requestBody:
        description: Pet object that needs to be added to the store
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/Pet'
        required: true
      responses:
        405:
          description: Invalid input
          content: {}
      x-codegen-request-body-name: body
components:
  schemas:
    Pet:
      required:
      - name
      - photoUrls
      type: object
      properties:
        id:
          type: integer
          format: int64
        name:
          type: string
          example: doggie
        photoUrls:
          type: array
          xml:
            name: photoUrl
            wrapped: true
          items:
            type: string
        status:
          type: string
          description: pet status in the store
          enum:
          - available
          - pending
          - sold
      xml:
        name: Pet

Describe the bug you're encountering

Updated value in requestBody is cleared after closing endpoint.

To reproduce...

Steps to reproduce the behavior:

1. Click POST /pet.
2. Click 'Try it out'.
3. Change one parameter in the text editing area. E.G 'id' from 0 to 2.
4. Click POST /pet.
5. Click POSt /pet one more time.
6. Check text editing area.

Expected behavior

The updated value should be present after closing and opening endpoint

Screenshots

swagger-ui-bug.mov

Additional context or thoughts

After adding one more supported schema to requestBody.contents for example application/xml. The updated value is still present after closing and opening again.

swagger.ui.bug.workaround.mov

After small investigation(downgrading from 3.39.0 to 3.35.0 gradually) an issue was found in 3.35.1

After code check the possible issue might be in next changes:

• parameter-row: rendering of default/example values of 0 (fix(parameter-row): rendering of default/example values of 0 #6454) (797929f)

• examples multipart array sample generation for items (Fix multipart array sample generation for items. #6461) (f4bdf2f)

[mathis-m]

Currently analyzing this issue. Actually this was introduced by #6518 (3905fad) in v3.35.2.
@tim-lai This is caused by Parameters Component onChangeMediaType calling oas3Actions.clearRequestBodyValue.

swagger-ui/src/core/components/parameters/parameters.jsx

Lines 80 to 93 in 3905fad

	onChangeMediaType = ( { value, pathMethod } ) => {
	let { specSelectors, specActions, oas3Selectors, oas3Actions } = this.props
	let targetMediaType = value
	let currentMediaType = oas3Selectors.requestContentType(...pathMethod)
	let schemaPropertiesMatch = specSelectors.isMediaTypeSchemaPropertiesEqual(pathMethod, currentMediaType, targetMediaType)
	if (!schemaPropertiesMatch) {
	oas3Actions.clearRequestBodyValue({ pathMethod })
	specActions.clearResponse(...pathMethod)
	specActions.clearRequest(...pathMethod)
	specActions.clearValidateParams(pathMethod)
	}
	oas3Actions.setRequestContentType({ value, pathMethod })
	oas3Actions.initRequestBodyValidateError({ pathMethod })
	}

This is because of specSelectors.isMediaTypeSchemaPropertiesEqual does not take into account that incase of currentMediaType and targetMediaType are the same it should return true.

swagger-ui/src/core/plugins/spec/selectors.js

Lines 517 to 526 in 3905fad

	export const isMediaTypeSchemaPropertiesEqual = ( state, pathMethod, currentMediaType, targetMediaType) => {
	let requestBodyContent = state.getIn(["resolvedSubtrees", "paths", ...pathMethod, "requestBody", "content"], fromJS([]))
	if (requestBodyContent.size < 2 || !currentMediaType || !targetMediaType) {
	// nothing to compare
	return false
	}
	let currentMediaTypeSchemaProperties = requestBodyContent.getIn([currentMediaType, "schema", "properties"], fromJS([]))
	let targetMediaTypeSchemaProperties = requestBodyContent.getIn([targetMediaType, "schema", "properties"], fromJS([]))
	return currentMediaTypeSchemaProperties.equals(targetMediaTypeSchemaProperties) ? true: false
	}

Going to fix this via PR by adding following check:

export const isMediaTypeSchemaPropertiesEqual = ( state, pathMethod, currentMediaType, targetMediaType) => { 
  if((currentMediaType || targetMediaType) && currentMediaType === targetMediaType ) {
    return true
  }

[yarsanich]

@mathis-m thanks for the quick response. Sorry for wrong assumptions about the root cause.

[mathis-m]

@yarsanich Thank you for leading me in the right direction and for reporting this issue!