feat: display optionalDependencies in deps page#119
Conversation
Add optionalDependencies support to the dependencies info page, displaying it alongside dependencies and devDependencies in a three-column layout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds optionalDependencies to the manifest type, surfaces optional dependencies in the Deps UI as a third column, and introduces tests and Vitest configuration to validate the new UI behavior. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
Summary of ChangesHello @fengmk2, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant enhancement to the package dependency information page by integrating and visually presenting Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces support for displaying optional dependencies. The changes include updating the NpmPackageVersion interface in src/hooks/useManifest.ts to include an optionalDependencies field. In src/slugs/deps/index.tsx, the code was modified to extract and process optionalDependencies from the package manifest, update the depsInfo object to include this new data, and adjust the UI layout by changing column spans from 12 to 8 for existing dependency cards to make space for a new card that displays the optional dependencies in a table.
There was a problem hiding this comment.
Pull request overview
This PR adds support for displaying optional dependencies in the package dependencies page by introducing a third column to show optionalDependencies alongside the existing dependencies and devDependencies columns.
Key Changes:
- Added
optionalDependenciesfield to theNpmPackageVersioninterface as an optional property - Updated the dependencies page layout from 2 columns to 3 columns (8-span each) to accommodate the new section
- Added data extraction and mapping logic for optional dependencies to match the existing pattern for dependencies and devDependencies
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/hooks/useManifest.ts | Added optionalDependencies field to the NpmPackageVersion type interface |
| src/slugs/deps/index.tsx | Added optional dependencies extraction, mapping, and rendering in a new card column |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Set up Jest with React Testing Library for Next.js - Add mocks for Ant Design browser APIs (matchMedia, getComputedStyle) - Add test cases for optionalDependencies display - Verify all three dependency types render correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace Jest with Vitest for faster test execution - Update test file to use vi.mock instead of jest.mock - Add vitest.config.ts with jsdom environment - Update package.json scripts to use vitest 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add vitest.config.ts and vitest.setup.ts to tsconfig.json exclude list to prevent build errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/slugs/deps/index.test.tsx (1)
19-44: Consider adding a fallback for consistency.The
optionalDependenciesproperty (Line 41) lacks the|| {}fallback thatdependenciesanddevDependencieshave (Lines 39-40). While the Deps component handlesundefinedcorrectly, the helper would be more consistent and maintainable with uniform handling.🔎 Proposed fix for consistency
dependencies: versionData.dependencies || {}, devDependencies: versionData.devDependencies || {}, - optionalDependencies: versionData.optionalDependencies, + optionalDependencies: versionData.optionalDependencies || {}, }, }, });
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
package.jsonsrc/slugs/deps/index.test.tsxtsconfig.jsonvitest.config.tsvitest.setup.ts
🧰 Additional context used
🧬 Code graph analysis (1)
src/slugs/deps/index.test.tsx (2)
src/hooks/useManifest.ts (1)
PackageManifest(32-47)src/slugs/deps/index.tsx (1)
Deps(32-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Agent
- GitHub Check: Node.js / Test (ubuntu-latest, 24)
- GitHub Check: Node.js / Test (ubuntu-latest, 22)
🔇 Additional comments (9)
tsconfig.json (1)
28-28: LGTM!Appropriately excludes Vitest configuration files from TypeScript compilation, aligning with the new test infrastructure added in this PR.
vitest.setup.ts (1)
1-17: LGTM!The matchMedia mock is properly configured for testing Ant Design responsive components in the jsdom environment. The implementation includes all necessary methods and follows standard patterns.
package.json (2)
10-12: LGTM!The test scripts are properly configured, and the CI script correctly sequences linting, building, and testing.
43-44: Verify vitest version 4.0.16 exists in package.jsonThe specified vitest version 4.0.16 could not be confirmed in the npm registry; the latest available 4.0.x version is 4.0.15. Confirm whether this is a typo or if a custom/pre-release version is intentionally used. All other testing dependencies (@testing-library/jest-dom 6.9.1, @testing-library/react 16.3.1, jsdom 27.3.0) are current and have no known security vulnerabilities.
vitest.config.ts (1)
1-17: LGTM!The Vitest configuration is properly set up with the React plugin, jsdom environment, and path aliases that match the TypeScript configuration. The setup file reference is correct.
src/slugs/deps/index.test.tsx (4)
7-17: LGTM!The mocks appropriately isolate the Deps component from Next.js routing and layout complexity while preserving essential behavior for testing.
46-88: LGTM!The test suite comprehensively covers optionalDependencies rendering with single, empty, and multiple dependency scenarios.
90-125: LGTM!Excellent coverage of the three-column layout and edge case handling when version data is missing.
127-140: LGTM!Correctly verifies link generation with proper URL encoding of the version spec.
## Summary - Add peerDependencies section to the dependencies page alongside existing dependency types - Follow the same display pattern as optionalDependencies (added in #119) - Adjust layout from 3 columns to 4 columns to accommodate all dependency types ## Test plan - [x] All 35 existing tests pass - [x] New tests added for peerDependencies display - [ ] Manually verify peerDependencies display on packages that have them (e.g., react-dom, eslint-plugin-react) 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Extended package metadata to include peer dependencies and added display of peer dependencies in the package view alongside other dependency types in a new dedicated column. * **Tests** * Added comprehensive test coverage for peer dependency rendering, including verification of counts, item names, versions, and integration with existing dependency displays. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Add optionalDependencies support to the dependencies info page, displaying it alongside dependencies and devDependencies in a three-column layout.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.