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 75 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: 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 ?
gameroman
added
the
needs review
a83d610 to
87ebd8e
Compare
fix: clipping for version in cards and rows fix: some html spec warns and class dupes
|
Updated the description with the newest screenshots. It is good to go in my opinion, unless there are HTML spec, code style, or performance issues you want to address. |
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 health 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.Additionally, the Search page has also been improved - fixed vertical alignment and added health icons.
All tooltips for icons are accessible on mobile devices.
Dependencies provide Health Insights section, toolbar and the list of dependencies, similar to Search page Cards/Table.
Health Insights are visible on Dependencies and Stats tab pages. They are also clickable "OR" filters; every insight has 2 numbers: urgent (prod and bundled dependencies) and total (all - urgent + dev, peer, optional). They show updatable, vulnerable, deprecated and replaceable dependencies. Insights' header element provides this information in the
(i)tooltip.