feat: change deps table pagination to 50 rows per page#120
Conversation
🤖 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.
|
WalkthroughUpdated pagination configuration for three dependency tables in the dependencies view by explicitly setting Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes
Possibly related PRs
Suggested reviewers
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 enhances the user experience when viewing dependency lists by increasing the default number of items displayed per page in the dependency tables. This change applies to the main dependencies, development dependencies, and optional dependencies, ensuring that users can see more relevant information at a glance without needing to navigate through multiple pages as frequently. 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 updates the pagination for dependency tables to show 50 rows per page. The change is applied correctly to all three dependency tables (dependencies, devDependencies, and optionalDependencies). However, the pagination configuration is duplicated, and the page size 50 is a magic number. I've suggested refactoring this to use a constant for better maintainability, following the DRY principle.
| rowKey={'package'} | ||
| columns={columns} | ||
| pagination={{ size: 'small' }} | ||
| pagination={{ size: 'small', pageSize: 50 }} |
There was a problem hiding this comment.
The pagination configuration {{ size: 'small', pageSize: 50 }} is duplicated for the dependencies, devDependencies, and optionalDependencies tables. This use of a 'magic number' and repeated code can make future updates more difficult and error-prone.
To improve maintainability and adhere to the DRY (Don't Repeat Yourself) principle, I recommend extracting this configuration into a constant. You can define it once and reuse it for all three tables.
For example, you could add this inside your component:
const paginationConfig = { size: 'small' as const, pageSize: 50 };And then apply it to each table like this:
<Table
// ... other props
pagination={paginationConfig}
/>This would make the code cleaner and easier to update in the future.
![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.tsx (1)
68-68: LGTM! Pagination configuration looks good.The explicit
pageSize: 50is a reasonable choice for dependency tables and improves UX by showing more rows per page. The configuration is applied consistently across all three tables.Optional: Consider extracting pagination config to reduce duplication.
The same pagination object is repeated three times. You could extract it to a constant for easier maintenance.
🔎 Optional refactor to extract pagination config
const columns: TableColumnsType<DepRecord> = [ { title: '名称', dataIndex: 'package', render: (pkg: string, record: DepRecord) => { return ( <Link href={`/package/${pkg}?version=${encodeURIComponent(record.spec)}`} target="_blank"> {pkg} </Link> ); }, }, { title: '版本范围', dataIndex: 'spec', }, ]; + +const paginationConfig = { size: 'small' as const, pageSize: 50 }; export default function Deps({ manifest, version }: PageProps) {Then use
pagination={paginationConfig}on lines 68, 78, and 88.Also applies to: 78-78, 88-88
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/slugs/deps/index.tsx
⏰ 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: Node.js / Test (ubuntu-latest, 24)
- GitHub Check: Node.js / Test (ubuntu-latest, 22)
- GitHub Check: Agent
There was a problem hiding this comment.
Pull request overview
This PR updates the pagination settings for dependency tables to display 50 rows per page instead of using the default page size.
Key Changes:
- Added
pageSize: 50to pagination configuration for all three dependency tables (dependencies, devDependencies, and optionalDependencies)
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| rowKey={'package'} | ||
| columns={columns} | ||
| pagination={{ size: 'small' }} | ||
| pagination={{ size: 'small', pageSize: 50 }} |
There was a problem hiding this comment.
Consider extracting the pagination configuration to a constant to avoid repetition across all three tables. This would make future changes easier to maintain. For example, you could define const PAGINATION_CONFIG = { size: 'small' as const, pageSize: 50 } at the module level and reuse it for all three Table components.
🤖 Generated with Claude Code
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.