Response component: Set key derived from specPath on ModelExample

[Simran-B]

Add a unique key for <ModelExample> in Responses to fix interactivity in certain cases

Description

Fixes a problem with the Model/Schema tree not responding to clicks If defaultModelRendering is set to "model" and if there are multiple responses (even across paths) with the same schema structure.

Motivation and Context

The OpenAPI description of an API I work with has the same response structure for some endpoints and I want the Schema tab to show by default instead of the Example Value tab. However, changing the defaultModelRendering revealed a bug: The content of the Schema tab doesn't react to clicks (cannot expand/collapse items) unless it has a globally unique schema structure it seems.

As a workaround, one can switch back and forth the tabs. Providing a unique key seems to fix the interactivity.

If you expand items for one operation and then expand another operation that has the same response structure, the same items are expanded and I couldn't find a fix for that, unfortuntely.

How Has This Been Tested?

To serve the OpenAPI description locally, I used npm i -g http-server and http-server --cors in the directory of the JSON file.

SwaggerUI-Bug-api-docs.json

{
 "info": {
  "license": {
   "name": "Business Source License 1.1",
   "identifier": "BUSL-1.1"
  },
  "title": "HTTP API",
  "version": "1.23"
 },
 "openapi": "3.1.0",
 "paths": {
  "/foo": {
   "post": {
    "requestBody": {
     "content": {
      "application/json": {
       "schema": {
        "properties": {
          "password": {
           "description": "The password of the user.\n",
           "type": "string"
          },
          "username": {
           "description": "The name of a user.\n",
           "type": "string"
          }
         },
        "required": [
         "username",
         "password"
        ],
        "type": "object"
       }
      }
     }
    },
    "responses": {
     "200": {
      "content": {
       "application/json": {
        "schema": {
         "properties": {
          "jwt": {
           "description": "The encoded JWT session token.\n",
           "type": "string"
          }
         },
         "required": [
          "jwt"
         ],
         "type": "object"
        }
       }
      },
      "description": ""
     },
     "400": {
      "content": {
        "application/json": {
         "schema": {
          "properties": {
           "jwt": {
            "description": "The encoded JWT session token.\n",
            "type": "string"
           }
          },
          "required": [
           "jwt"
          ],
          "type": "object"
         }
        }
       }
     }
    }
   }
  },
  "/bar": {
   "post": {
    "requestBody": {
     "content": {
      "application/json": {
       "schema": {
        "properties": {
         "password": {
          "description": "The password of the user.\n",
          "type": "string"
         },
         "username": {
          "description": "The name of a user.\n",
          "type": "string"
         }
        },
        "required": [
         "username",
         "password"
        ],
        "type": "object"
       }
      }
     }
    },
    "responses": {
     "200": {
      "content": {
       "application/json": {
        "schema": {
         "properties": {
          "jwt": {
           "description": "The encoded JWT session token.\n",
           "type": "string"
          }
         },
         "required": [
          "jwt"
         ],
         "type": "object"
        }
       }
      },
      "description": ""
     },
     "400": {
      "content": {
        "application/json": {
         "schema": {
          "properties": {
           "jwt": {
            "description": "The encoded JWT session token.\n",
            "type": "string"
           }
          },
          "required": [
           "jwt"
          ],
          "type": "object"
         }
        }
       }
      }
    }
   }
  }
 }
}

dev-helpers/dev-helper-initializer.js

// ...
  const ui = SwaggerUIBundle({
    defaultModelRendering: "model",
    url: "http://localhost:8080/SwaggerUI-Bug-api-docs.json",
// ...

Then npm run dev and open http://localhost:3200 in a browser

Screenshots (if appropriate):

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.