Skip to content

refactor(oas3): improve servers component layout and structure#10832

Open
hariswhdn wants to merge 1 commit intoswagger-api:masterfrom
hariswhdn:refactor/oas3-servers-layout
Open

refactor(oas3): improve servers component layout and structure#10832
hariswhdn wants to merge 1 commit intoswagger-api:masterfrom
hariswhdn:refactor/oas3-servers-layout

Conversation

@hariswhdn
Copy link
Copy Markdown
Contributor

Description

Refactored the OAS3 servers component to improve layout structure and user interface consistency.

Changes:

  • Reorganized servers component JSX structure by wrapping the select label and variables UI in a shared container div for improved semantic grouping
  • Redesigned visual hierarchy of server selection controls with proper spacing and alignment
  • Added comprehensive styling for .schemes-server-container with flexbox layout
  • Enhanced computed URL display with improved typography and spacing
  • Improved server variables table styling with better padding and visual hierarchy
  • Added responsive styling for server selection dropdowns with vendor-consistent appearance

Motivation and Context

The previous server component layout lacked proper visual grouping between the server selector, computed URL, and server variables. This change improves the user interface by:

  • Creating visual relationship between related controls
  • Improving accessibility through better semantic HTML structure
  • Enhancing readability of server variable configurations
  • Providing consistent styling across different screen sizes

Relates to OAS3 server handling improvements.

How Has This Been Tested?

Manual testing in development environment:

  • Tested with Petstore API spec containing server variables
  • Verified server selection dropdown functionality
  • Confirmed server variable inputs (enum select and text input) work correctly
  • Tested computed URL display with variable substitution
  • Validated responsive layout on various screen sizes (desktop, tablet)
  • Confirmed no visual regressions in browser console

Screenshots (if appropriate):

Before After
FireShot Capture 027 - Swagger UI -  localhost FireShot Capture 032 - Swagger UI -  localhost

Checklist

My PR contains...

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

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 and should be tested by unit and/or integration tests.
  • My changes can not or do not need to be tested.
  • 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.

- Reorganize servers JSX: wrap label and variables UI in container div
- Improve visual hierarchy and spacing of server selection controls
- Add comprehensive styles for .schemes-server-container
- Implement flex layout with proper spacing and alignment
- Style server variables table for better readability
- Enhance computed URL display and form input styling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant