OpenAPI 3.1.: examples in webhooks are being overwritten by the examples in schema

[glowcloud]

Q&A (please complete the following information)

• OS: macOS
• Browser: chrome
• Version: 124.0.6367.156
• Swagger-UI version: 5.17.9
• Swagger/OpenAPI version: OpenAPI 3.1

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.1.0
info:
  version: 1.0.0
  title: Examples
  description: ''

webhooks:
  test-webhook:
    post:
      operationId: test-webhook
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/TestSchema'
            examples:
              TestExample:
                $ref: '#/components/examples/TestExample'
      responses:
        '200':
          description: OK

paths:
  /test-path:
    get:
      operationId: 'test-path'
      responses:
        '200':
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/TestSchema'
              examples:
                TestExample:
                  $ref: '#/components/examples/TestExample'

components:
  schemas:
    TestSchema:
      type: object
      properties:
        userId:
          type: string
          examples: ['userId example from schema']
        orders:
          type: array
          items:
            type: object
            properties:
              orderId:
                type: string
                examples: ['orderId example from schema']

  examples:
    TestExample:
      value:
        userId: 'userId example from examples'
        orders:
          - orderId: 'orderId example from examples'

Describe the bug you're encountering

In webhooks the specified examples are being overwritten by the examples from the schema defined in the same content type, despite the example chosen in the dropdown:

This does not happen for paths - the example values are correctly rendered from the chosen example and not from the schema:

Additionally, if I first expand the webhook, I will see the example from the schema. Expanding the path after that will show the correct example there and also overwrite the example in webhook to the correct one:

This will not happen if I first expand the path and then the webhook:

Also, expanding, collapsing and then expanding the webhook again will show the correct example as well.

To reproduce...

Steps to reproduce the behavior:

1. Load the attached specification
2. Expand the webhook
3. See that the example is the one defined in the schema
4. Expand the path
5. See that the example is the one defined in the example selected in the dropdown
6. Scroll down to the webhook and see that the incorrect example was overwritten by the correct example

Expected behavior

The displayed example should be the one defined in examples / selected in the dropdown.

[glowcloud]

It looks like the examples in responses work fine for webhooks:

so the issue might lie with the request body, which works correctly in paths:

[glowcloud]

We're not getting the new activeExamplesKey passed to the component when using webhooks, which is why we don't get the correct example here:

swagger-ui/src/core/plugins/oas3/components/request-body.jsx

Line 8 in 9037acf

export const getDefaultRequestBodyValue = (requestBody, mediaType, activeExamplesKey, fn) => {

It looks like a problem with not re-rendering the parent component - I could see that the path re-renders Parameters where we get the examples key:

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

Lines 245 to 249 in 9037acf

	activeExamplesKey={oas3Selectors.activeExamplesMember(
	...pathMethod,
	"requestBody",
	"requestBody", // RBs are currently not stored per-mediaType
	)}

but I could not find why it doesn't do so for the webhook.

A fix for this could be to get the examples key in getDefaultRequestBodyValue , ex.:

const examplesKey = activeExamplesKey || mediaTypeValue.get("examples")?.keySeq().first()
 const mediaTypeExample = hasExamplesKey
   ? mediaTypeValue.getIn([
     "examples",
     examplesKey,
     "value"
   ])
   : exampleSchema

but this might only be patching over the actual issue.

I've also noticed while testing that choosing examples does not work for webhooks, both in request body and in response.
The issues might be related as it looks like the example not changing on select is also caused by not re-rendering - collapsing and expanding the webhook causes the example to change. I will be investigate this further.

[char0n]

The issues is here:

swagger-ui/src/core/plugins/oas31/components/webhooks.jsx

Line 28 in 872e382

specPath={operationDTO.specPath}

SpecPath always needs to be unstable to always trigger the re-render of OperationContainer.

[glowcloud]

Addressed in #9938