feat(ux): separate server response and possible responses into distinct panels#10932
Open
yscialom wants to merge 2 commits into
Open
feat(ux): separate server response and possible responses into distinct panels#10932yscialom wants to merge 2 commits into
yscialom wants to merge 2 commits into
Conversation
…ct panels
After executing a Try It Out request, the actual server response and the
documented possible responses were visually indistinguishable, forcing
users to mentally parse the layout on every use.
This change introduces clear visual separation:
- Rename the "Responses" label to "Possible Responses" when a server
response is present, to distinguish it from the actual response
- Wrap each section's table in its own panel with a light grey background
- Increase h4 title size from 12px to 14px so section titles ("Server
response", "Possible Responses") stand out from table content
- Add a dark mode override for the panel backgrounds
Fixes swagger-api#6548
- Fix label casing: "Possible Responses" → "Possible responses" for consistency with sentence-case convention - Add SCSS comment documenting that .responses-inner h4 intentionally applies to all section headings including "Request URL" - Fix legacy Selenium selector in test/e2e-selenium/scenarios/oas3/pet.js: the wrapper <div> around LiveResponse was removed in the parent commit, shifting the DOM depth by one level - Add unit tests for Responses component covering conditional rendering of the "Possible responses" heading and the .possible-responses-wrapper Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
After executing a "Try It Out" request, the actual server response and the documented possible responses were visually indistinguishable, forcing users to mentally parse the layout on every use.
This PR introduces clear visual separation between the two:
.server-response-paneland.possible-responses-wrapper)..responses-innerh4title size from 12px to 14px so section titles ("Server response", "Possible responses") stand out from table content.Motivation and Context
Fixes #6548
The issue requested making the "Server response" / "Responses" titles more prominent and visually grouping the documented responses into their own sub-panel, so users can immediately tell apart what the server actually returned from what the API documents as possible.
Note on scope: the
.responses-inner h4size bump also applies to the "Request URL" heading inside the live response. This is intentional and kept consistent — documented inline in_layout.scss.How Has This Been Tested?
npm run test:unit— all suites pass, including new unit tests for theResponsescomponent covering the conditional "Possible responses" heading and the.possible-responses-wrapper.npm run lint-errors— zero errors.npm run build— all bundles compile.A legacy Selenium selector in
test/e2e-selenium/scenarios/oas3/pet.jswas updated to account for the removed wrapper<div>aroundLiveResponse.Screenshots
Screenshot showing the separated "Server response" and "Possible responses" panels (to be attached):

Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests
Usage of AI
Claude Opus 4.8 & Sonnet 4.6 was used for the following parts of this contribution:
The core implementation was written by hand by the author.