With multiple callbacks defined on the same URL, you can not expand one callback box

[jmini]

Q&A (please complete the following information)

• OS: macOS
• Browser: chrome
• Version: 76.0.3809.100 (Official Build) (64-bit)
• Method of installation: online
• Swagger-UI version: -
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
info:
  version: 1.0.0
  title: test
  description: example with 2 callbacks
paths:
  /subscribe:
    post:
      summary: Subscribe to a webhook
      requestBody:
        required: true
        content:
          application/json:
            schema:
              type: object
              properties:
                callbackUrl:
                  type: string
                  format: uri
                  example: https://myserver.com/send/callback/here
              required:
                - callbackUrl
      callbacks:
        myEvent:
          '{$request.body#/callbackUrl}':
            post:
              requestBody:
                required: true
                content:
                  application/json:
                    schema:
                      type: object
                      properties:
                        message:
                          type: string
                          example: Some event happened
                      required:
                        - message
              responses:
                '200':
                  description: Your server returns this code if it accepts the callback
        otherEvent:
          '{$request.body#/callbackUrl}':
            post:
              requestBody:
                required: true
                content:
                  application/json:
                    schema:
                      type: object
                      properties:
                        id:
                          type: integer
                          format: int32
                          example: 42
                      required:
                        - id
              responses:
                '200':
                  description: Your server returns this code if it accepts the callback
      responses:
        '201':
          description: Webhook created

In this git repo: callbackMultiple.yaml

Try it online: https://petstore.swagger.io/?url=https://raw.githubusercontent.com/jmini/openapi-experiments/master/OpenAPI-specs/callbackMultiple.yaml#/

To reproduce...

When you open the spec using Swagger-UI, you see the expected callbacks:

There are 2 box:

• myEvent
• otherEvent

When you click to expand one callback "[POST] {$request.body#​/callbackUrl}" box under "myEvent", then:

Current result

Both callbacks boxes are expanded

Expected result

Only the box that was clicked gets expanded.

This is important, especially when a lot of events are present

[shockey]

If anyone wants to debug this, a good place to start is inspecting the Callbacks -> OperationContainer props:

swagger-ui/src/core/plugins/oas3/components/callbacks.jsx

Lines 30 to 38 in a86fcf3

	return <OperationContainer
	{...props}
	op={op}
	key={method}
	tag={""}
	method={method}
	path={pathItemName}
	specPath={specPath.push(callbackName, pathItemName, method)}
	allowTryItOut={false}

and then how OperationContainer calculates isShown for the Callback:

swagger-ui/src/core/containers/OperationContainer.jsx

Line 62 in 3f06bb5

const isShownKey = ["operations", props.tag, operationId]

swagger-ui/src/core/containers/OperationContainer.jsx

Line 77 in 3f06bb5

isShown: layoutSelectors.isShown(isShownKey, docExpansion === "full" ),

...which is then passed to Operation:

swagger-ui/src/core/containers/OperationContainer.jsx

Line 225 in 3f06bb5

isShown={isShown}

---

The situation likely boils down to the fact that the isShownKeys for both Callbacks are identical.

[jmini]

@shockey this is great feedback.

Having unique operationId for my callbacks operation is not requested, but if it helps the display in Swagger-UI, I can definitively add them.

---

When operationId is null, I think a hash of the callback name (myEvent, otherEvent in my demo spec) + the path ({$request.body#​/callbackUrl} in my example) would be ideal.

[edipoReboucas]

In the last swagger version, using the operationId workaround cause some fail to render the callback "box".

The workaround that works to me is add spaces at the end of callbackUrl like this:

openapi: 3.0.0
info:
  version: 1.0.0
  title: test
  description: example with 2 callbacks
paths:
  /subscribe:
    post:
      summary: Subscribe to a webhook
      requestBody:
        required: true
        content:
          application/json:
            schema:
              type: object
              properties:
                callbackUrl:
                  type: string
                  format: uri
                  example: https://myserver.com/send/callback/here
              required:
                - callbackUrl
      callbacks:
        myEvent:
          '{$request.body#/callbackUrl} ':
            post:
              requestBody:
                required: true
                content:
                  application/json:
                    schema:
                      type: object
                      properties:
                        message:
                          type: string
                          example: Some event happened
                      required:
                        - message
              responses:
                '200':
                  description: Your server returns this code if it accepts the callback
        otherEvent:
          '{$request.body#/callbackUrl}  ':
            post:
              requestBody:
                required: true
                content:
                  application/json:
                    schema:
                      type: object
                      properties:
                        id:
                          type: integer
                          format: int32
                          example: 42
                      required:
                        - id
              responses:
                '200':
                  description: Your server returns this code if it accepts the callback
      responses:
        '201':
          description: Webhook created