swagger-api / swagger-api/swagger-ui
Custom wrapComponents operation does not work as expected when not using $ref to load path data into doc json
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
OS: macOS
Browser: Chrome, Safari, Firefox (all)
Version: latest
Method of installation: standalone
Swagger-UI version: 5.7.2 (also test other previous versions with same results)
Swagger/OpenAPI version: OpenAPI 3.0.1
When docs are generated without using $ref to include paths docs using wrapComponents to show, for example, a Beta tag does not work as expected.
- Docs that use a $ref to load paths, the beta tag will show on page load of the docs (expected).
- Docs where the path objects are directly in the json rather than loaded via $ref, you have to click the item in the docs before the Beta tag will show (unexpected).
This is the code used to add the Beta tag:
wrapComponents: {
operation: (Ori, system) => (props) => {
const host = window.location.host;
const isBeta = !!props.operation.get("op").get("x-beta")
console.error("is beta", isBeta)
if (isBeta) {
return system.React.createElement(
"div",
{style:{position: 'relative', overflow: 'hidden'}},
[
system.React.createElement('div', { className: 'beta' }, 'beta'),
system.React.createElement(Ori, props)
]
)
}
return system.React.createElement(Ori, props)
}
}
When I manually create the docs using $ref, it works as expected (the beta tag will show on load of the docs):
"/articles/works": {
$ref: "https://codepen.io/nightshiftc/pen/bGzdaRW.js"
}
When I do not use $ref to load paths since I am using https://github.com/go-openapi/swag which generates docs json from godoc notation, it does not work as expected. You have to click the item in the docs before the Beta tag will actually show.
This is how the doc json is produced:
"/articles/does_not_work": {
"get": {
"x-beta": true,
"summary": "Get a list of articles",
"operationId": "listArticles",
"tags": [
"Article API"
],
"parameters": [],
"responses": {
"200": {
"description": "Success",
"content": {
"application/json": {
"schema": {}
}
}
}
}
}
}
Both of the API docs are identical have the x-beta set to true, but only the one loaded using $ref shows on load:
In this example the beta tag should show on load of the page. As you can see it shows on the first (paths loaded via $ref from here https://codepen.io/nightshiftc/pen/bGzdaRW), but not the other (path objects directly in doc json file).
If you click on the one that does not have the beta tag on page load, you will see that then the beta tag will show.
https://codepen.io/nightshiftc/pen/RwEdEMw
Does something need to be configured differently for this case where $ref is not used to load paths or is this a bug?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the custom wrapComponents operation shown in the issue and compare its initial rendering for inline path objects with paths loaded through $ref. Reproduce the two CodePen examples, then verify that the beta tag appears on initial page load in both cases without requiring the operation to be clicked.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100