feat(ui): add "dependencies" tab and integrate Health Insights into Search results - #3214
feat(ui): add "dependencies" tab and integrate Health Insights into Search results#3214Mopsgamer wants to merge 52 commits into
Conversation
Thanks for opening this pull request! 🎉We really appreciate you taking the time to contribute, @Mopsgamer. A maintainer will take a look as soon as they can. In the meantime, please make sure that:
If anything needs adjusting we'll leave comments here. Thanks again! |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review. 📝 SummarySummary by CodeRabbit
WalkthroughThe PR adds a version-specific package dependencies page. It groups dependencies by type, fetches dependency health data, supports filtering, sorting, keyboard navigation, cards and tables, and adds dependency navigation. It also updates related package views, translations, schemas, and tests. ChangesPackage dependencies feature
Sequence Diagram(s)sequenceDiagram
participant Browser
participant DependenciesPage
participant RegistryAPI
participant InsightComposables
participant DependencyList
Browser->>DependenciesPage: Open version-specific dependencies route
DependenciesPage->>RegistryAPI: Load package and dependency metadata
DependenciesPage->>InsightComposables: Request outdated, replacement, and vulnerability data
InsightComposables-->>DependenciesPage: Return dependency insights and statuses
DependenciesPage->>DependencyList: Pass grouped, filtered, and sorted items
DependencyList-->>Browser: Render table or card view
Merge Risk: 🟡 Moderate · up to The new dependency insights and search integrations can return 500 errors for malformed package paths and may perform repeated health-analysis requests for ordinary package listings, creating avoidable production load; insight labels also remain in English for non-English locales. These issues should be fixed or explicitly accepted before merge. 🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
Full details: Linked Issues checkExplanation The implementation satisfies issue Full details: Out of Scope Changes checkExplanation The core code matches the linked objective, but many locale changes add placeholder translations for unrelated features such as sponsors, noodles, leaderboard, vacations, themes, and changelog updates. These changes are outside the stated dependencies-tab scope. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
|
Instead of a new tab I'd maybe do it the same way the versions page is done? |
Mopsgamer
changed the title
We have the "versions" drop-down on every page, but for dependencies we don't have anything. @gameroman |
graphieros
left a comment
graphieros
left a comment
There was a problem hiding this comment.
Looks great!
A horizontal scroll is present on the insights section.
The main table also shows a horizontal scroll, perhaps there is a way for this page to use more of the available horizontal real estate ?
This comment was marked as resolved.
This comment was marked as resolved.
this was the original idea for 'latest' version specifier for dependencies - make it green and say patch is available. except class wasn't here
…, make such elements larger. also add icons before versions if updates available for cards
rename insights to dependency health add health checkmark make 0 non-interactive replace '0 / 0' with just checkmark and 0
Dismissing the approval for now as the code changed quite lot since then and I'm AFK
graphieros
left a comment
graphieros
left a comment
There was a problem hiding this comment.
Noticed some inconsistent behavior with the insights (here with Nuxt):
- Some metrics are clickable but should not (patch behind 0 / 3)
- Some metrics are invalid (replacements available 1 / 0, should be 1 / 1)
Other remarks:
- The insights act as additional filters, and only do so on the dependencies page, which is great. I would recommend to add extra information in the i tooltip of the dependency health block when on the dependencies page to indicate that metrics can act as additional filters, otherwise the feature might be too confidential.
3 participants
🔗 Linked issue
Resolves #29
🧭 Context
The dependencies section in the main tab's right column was too crowded and basic. To better track package health, it needs its own dedicated tab with sorting, filtering, and insights.
📚 Description
This PR introduces a new Dependencies tab y for packages at
/package-deps/{{package}}/v/{{version}}(also accessible via /package-deps/{{package}}) and removes the old dependencies section from the main tab's right column.Dependencies provide Insights section, toolbar and the list of dependencies, similar to Search page Cards/Table.
Insights provide data for direct dependencies on Dependencies and Stats pages. They are also clickable "OR" filters. Every insight has 2 numbers: urgent (prod and bundled dependencies) and other (dev, peer, optional). They show updatable, vulnerable, deprecated and replaceable dependencies. Insights' header element provides this information in the
(i)tooltip.