Render Server Variables in API Overview and Update Proposals Hook

[mnaumanali94]

User Story

As a user, I want the API Overview to render variable information for each server so that I can quickly understand dynamic elements in server URLs.

Description of Work

Enhance the documentation rendering in Stoplight Studio to display server variable information on the API Overview. The server URL should visually differentiate variables, and a UI control should be available for users to view detailed variable attributes.

Requirements

• Render variable information for each server on the API Overview:

  • Server URLs with variables, e.g., https://demo.server.com/{version}, should have the variable {version} displayed in a distinct color to indicate it's dynamic.
  • Each server should display a caret icon next to it for expanding variable details.

• Display detailed variable attributes upon expanding the server's caret:

  • Name: string

  • Default Value: string (Required)

  • Description: string (Optional and displayed below the name)

  • Allowed Values

    Design for Expanded Server Variable Details
    

• Update the proposals hook (If needed):

  • Changes to server variables should reflect in the proposals UI.
  • Types of changes include: Variable added/deleted/modified.
  • Modified server (Server variable added/deleted/modified) should have a yellow line beside it in the UI to signify that a change occurred.

Acceptance Criteria

• As a user, when I view the API Overview, I expect to see the server URL with variables (e.g., https://demo.server.com/{version}) distinctly colored to differentiate from static portions of the URL.

• As a user, I want to see a caret next to each server, with the first server's caret expanded by default.

• As a user, when I click on a server's caret, I expect to view detailed information about the variables, including their Name, Default Value, Description, and Allowed Values using the JSE UI.

Documentation

• Update OpenAPI support matrix maintained internally.

Design

• The work needs to be reviewed by the Design Team. They should be added to the PR as reviewers.

Test Plan

• Validate that the server URL in the API Overview correctly displays and colors variables.
• Ensure that each server in the API Overview has a caret, with the first server's caret expanded by default.
• Validate that clicking on a server's caret reveals detailed variable information using the JSE UI.

[ ] Link to E2E Ticket: [Placeholder for ticket link]
[ ] Update Existing elements tests

Monitoring & Metrics

• No metrics needed

[mnaumanali94]

Hey team! Please add your planning poker estimate with Zenhub @Amjcraft @billiegoose @cjlanzo @dotslashderek @matty-v @P0lip