SwaggerUI crashing with incorrectly placed $ref

[plavski]

Q&A (please complete the following information)

• OS: macOS
• Browser: opera (chrome)
• Version: 58
• Method of installation: editor.swagger.io
• Swagger-UI version: editor.swagger.io
• Swagger/OpenAPI version: OpenAPI 3.0.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
servers: []
info:
  description: sdf
  version: "1.0.0"
  title: Swagger Petstore
paths:
  /pet:
    get:
      tags:
        - pet
      summary: 
        $ref: 
      operationId: addPet
      responses:
        '405':
          description: Invalid input

Describe the bug you're encountering

With a $ref placed under a summary tag in an oas3 definition, swagger-ui crashes rendering. Resolving the issue by removing the tag and filling out the summary correctly does not allow validation to continue working.

To reproduce...

Steps to reproduce the behavior:

1. Go to editor.swagger.io
2. Paste yaml

Expected behavior

Rendered to continue to work and not crash allowing validation to reassert itself.

[shockey]

Yeah, looks like it blows up the whole app. Not good. 💥

[shockey]

Unminified error:

Invariant Violation: Objects are not valid as a React child (found: object with keys {$ref}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `OperationSummary`.
    at invariant (webpack-internal:///7:42:15)
    at traverseAllChildrenImpl (webpack-internal:///690:142:39)
    at traverseAllChildren (webpack-internal:///690:170:10)
    at Object.instantiateChildren (webpack-internal:///846:68:7)
    at ReactDOMComponent._reconcilerInstantiateChildren (webpack-internal:///845:183:41)
    at ReactDOMComponent.mountChildren (webpack-internal:///845:222:27)
    at ReactDOMComponent._createInitialChildren (webpack-internal:///830:701:32)
    at ReactDOMComponent.mountComponent (webpack-internal:///830:520:12)
    at Object.mountComponent (webpack-internal:///178:43:35)
    at ReactDOMComponent.mountChildren (webpack-internal:///845:234:44)

Looks like the core of the problem is (you guessed it!) we're passing the summary as a React child:

swagger-ui/src/core/components/operation-summary.jsx

Line 66 in cb2fc20

{resolvedSummary || summary}

[shockey]

Fixed! Thanks for the report, @plavski 👍