elements icon indicating copy to clipboard operation
elements copied to clipboard

feat: show strikethrough on deprecated endpoints in sidebar

Open cetevolte opened this issue 8 months ago β€’ 4 comments

Elements Default PR Template

In general, make sure you have: (check the boxes to acknowledge you've followed this template)

  • [ x] Read CONTRIBUTING.md

Summary

This PR enhances the Table of Contents (sidebar) to visually indicate deprecated API endpoints by applying a strikethrough style to their titles.

Why

Currently, the only way to see if an endpoint is deprecated is to click into its detail view. This change improves visibility and helps developers quickly identify deprecated operations from the sidebar.

Changes

  • Propagate the deprecated flag into the TableOfContentsNode data
  • Extend TableOfContentsNode type to include a data.deprecated boolean
  • Add UI logic to apply line-through style when deprecated is true

Related issue

Implements the idea suggested in an existing issue:

β€œA suggested solution is for example to strikethrough the text on the sidebar to show that it is deprecated.”

image

Other Available PR Templates:

  • Release: https://github.com/stoplightio/elements/compare?template=release.md
    • [ ] Read the release section of CONTRIBUTING.md

cetevolte avatar May 09 '25 08:05 cetevolte

Hi! πŸ‘‹ This PR addresses the issue with identifying deprecated endpoints in the sidebar by visually striking through the titles of deprecated operations. The deprecated flag is now extracted from the operation data and passed into the TableOfContentsNode, and the UI adjusts styling accordingly.

cetevolte avatar May 09 '25 08:05 cetevolte

Deploy Preview for stoplight-elements-demo ready!

Name Link
Latest commit 28cc399fb10e161d70c3a29ae1e5c2c0914f2ae2
Latest deploy log https://app.netlify.com/sites/stoplight-elements-demo/deploys/6821deb3e01c7500089068b9
Deploy Preview https://deploy-preview-2795--stoplight-elements-demo.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar May 09 '25 08:05 netlify[bot]

Deploy Preview for stoplight-elements ready!

Name Link
Latest commit 28cc399fb10e161d70c3a29ae1e5c2c0914f2ae2
Latest deploy log https://app.netlify.com/sites/stoplight-elements/deploys/6821deb32c4fb70008035c55
Deploy Preview https://deploy-preview-2795--stoplight-elements.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar May 09 '25 08:05 netlify[bot]

Hi @Relionnn, In my local setup ESLint doesn’t show any errors (simple-import-sort/imports passes fine), so I’m not sure what needs to be changed to fix the CI failure. Let me know if you spot anything specific I should adjust β€” happy to update it!

Thanks in advance!

cetevolte avatar May 12 '25 13:05 cetevolte