Required Header Param Resets State without Executing

[calmdev]

Q&A (please complete the following information)

• OS: macOS High Sierra
• Browser: Google Chrome
• Version: Version 68.0.3440.106 (Official Build) (64-bit)
• Method of installation: npm
• Swagger-UI version: 3.18.2
• Swagger/OpenAPI version: OpenAPI 3.0.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: "3.0.0"
info:
  version: 1.0.0
  title: Required Header State Reset Example
  description: Required header resets state when executing with try it out button.
  termsOfService: http://swagger.io/terms/
  contact:
    name: Swagger API Team
    email: [email protected]
    url: http://swagger.io
  license:
    name: Apache 2.0
    url: https://www.apache.org/licenses/LICENSE-2.0.html
servers:
  - url: '....'
security:
  - ApiKeyAuth: []
paths:
  /tags:
    get:
      description: Returns all tags.
      operationId: getTags
      parameters:
        - name: workspace
          in: header
          description: workspace identifier
          required: true
          schema:
            type: string
        - name: startIndex
          in: query
          description: offset to start from
          required: false
          schema:
            type: integer
            format: int32
        - name: stopIndex
          in: query
          description: maximum number of results to return
          required: false
          schema:
            type: integer
            format: int32
      responses:
        '200':
          description: tags response
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Tag'
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'
components:
  securitySchemes:
    ApiKeyAuth:
      type: apiKey
      in: header
      name: Authorization

  schemas:
    Tag:
      allOf:
        - $ref: '#/components/schemas/TagModel'
        - required:
          - id
          properties:
            id:
              type: integer
              format: int32

    TagModel:
      required:
        - name
      properties:
        name:
          type: string

    Error:
      required:
        - code
        - message
      properties:
        code:
          type: integer
          format: int32
        message:
          type: string

Swagger-UI configuration options:

const ui = SwaggerUI({
  url: `${axios.defaults.baseURL}/endpoints`,
  domNode: this.swaggerUI.current,
  // Using this: https://github.com/swagger-api/swagger-ui/blob/master/docs/customization/custom-layout.md
  plugins: [ OperationsLayoutPlugin ],
  layout: "OperationsLayout",
  onComplete: () => {
    ui.preauthorizeApiKey('ApiKeyAuth', sessionStorage.getItem('token'))
   },
})

Describe the bug you're encountering

When a required header is added to list of parameters the state is reset when Execute is clicked.

To reproduce...

Steps to reproduce the behavior:

1. Go to endpoints with a required header.
2. Click on Try It Out
3. Provide values for the params.
4. Click on Execute
5. See the state reset and no request executed.

Expected behavior

The request is executed and includes use of the required header.

Screenshots

Additional context or thoughts

Setting the header param to required: false executes the request, but doesn't include the header.

[calmdev]

It actually looks like none of the params are being used. Even optional ones. The params appear in the UI, but don't get used in the CURL request. It's really strange, maybe I'm doing something wrong. Still trying to troubleshoot this.

[calmdev]

My issue must be related to #4745

I was using iframes with swagger 2, but hoped I'd be able to move away from it since I'm using react and this is built with react now.... I'll try with the old iframe approach though.

[calmdev]

I'm using react 16, but since this requires 15, i guess there isn't a clean way to provide my custom layout component from within my project. Seems best solution is using an iframe with the dist bundle and css to hide all the unwanted pieces of the UI.

[shockey]

@calmdev, you're correct - React 16 currently has some problems with Swagger UI.

Check back in a couple of months: we're currently having some internal discussions about creating a specific flavor of the UI/Editor module for React users, which exposes a component that you can use regardless of your React version.

[calmdev]

That'd be great. I'll keep any eye out for it. For now, I've forked the repo to create a custom standalone build that's loaded using an iframe.