fix: update antd dependencies and snapshot tests#11604
Conversation
dosubot
Bot
added
the
size:XS
|
😭 Deploy PR Preview failed.
|
|
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. Walkthrough更新依赖版本；将 ProTable 列的表单渲染钩子从 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 @afc163, 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 focuses on updating core Ant Design related dependencies to their latest versions. Specifically, Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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 dependencies for @ant-design/pro-components and antd-style, along with the corresponding snapshot tests. The update for @ant-design/pro-components is to a pre-release version, which introduces potential stability risks. I have added a comment in package.json regarding this. The snapshot test updates appear to be a direct result of these dependency changes and seem correct.
| "dependencies": { | ||
| "@ant-design/icons": "^6.1.0", | ||
| "@ant-design/pro-components": "^2.8.9", | ||
| "@ant-design/pro-components": "3.1.0-0", |
There was a problem hiding this comment.
The version for @ant-design/pro-components is being updated to 3.1.0-0, which is a pre-release version. Using pre-release versions in dependencies can introduce instability and unexpected breaking changes. It is generally recommended to use stable releases for production code. If this change is not for temporary testing, consider using the latest stable version to ensure the project's stability.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Deploying ant-design-pro with
|
| Latest commit: |
fdc3157
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e541540a.ant-design-pro-nd3.pages.dev |
| Branch Preview URL: | https://fix-update-antd-deps.ant-design-pro-nd3.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/pages/user/login/__snapshots__/login.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
package.json
⏰ 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). (2)
- GitHub Check: build-preview
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
package.json (2)
39-41: 快照测试已在此 PR 中更新，无需进一步操作验证显示快照文件
src/pages/user/login/__snapshots__/login.test.tsx.snap已在同一提交中被修改，该提交同时更新了 antd 和 antd-style 的版本。快照包含了 antd 组件的完整渲染输出，已反映了新依赖版本的变化。
41-41: 该升级已确认兼容安全antd-style 从
^3.7.0升级到^4.1.0虽然是主版本升级，但已确认与当前项目配置兼容：
- antd 已升级至
^6.0.0（满足 antd-style v4 的依赖要求）- 项目中仅使用
createStylesAPI，无兼容性问题- v4.1.0 是 npm 上的最新稳定版本
升级可继续进行。
| "dependencies": { | ||
| "@ant-design/icons": "^6.1.0", | ||
| "@ant-design/pro-components": "^2.8.9", | ||
| "@ant-design/pro-components": "3.1.0-0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 查询 @ant-design/pro-components 在 npm 上的版本信息
curl -s "https://registry.npmjs.org/@ant-design/pro-components" | jq -r '.versions | keys[]' | grep -E "^3\.1\.0" | head -20Repository: ant-design/ant-design-pro
Length of output: 76
🌐 Web query:
@ant-design/pro-components 3.1.0 release breaking changes
💡 Result:
There is no published @ant-design/pro-components 3.1.0 release. The package on npm is currently in the 2.x line (latest stable 2.8.x) and there are pre-release 3.0.x tags (e.g. 3.0.1-0) — but no 3.1.0 release or changelog entry exists for the main pro-components package. [1][2]
If you meant a different package in the Ant Design Pro family (for example @ant-design/pro-field is at 3.1.0), tell me which package and I’ll fetch that release’s breaking changes. [3]
Sources:
- npm @ant-design/pro-components (package page showing versions). [1]
- GitHub releases for ant-design/pro-components (releases/tags list). [2]
- npm @ant-design/pro-field (example package at 3.1.0). [3]
🌐 Web query:
@ant-design/pro-components version 3.0 migration guide
💡 Result:
Here’s a concise migration checklist for @ant-design/pro-components → v3.0.
- Upgrade packages
- Update antd to v5 (recommended >= 5.11.2) and install ProComponents 3.x:
npm install antd@^5.11.2 @ant-design/pro-components@^3.0.0
(or use your package manager). [1][3]
- Read the official ProComponents v3 migration doc
- Follow the project migration guide for component-level breaking changes and examples. [1]
- Key breaking changes / things to check
- AntD v5 CSS-in-JS: antd removed Less-based theming; adapt any Less-based theme/customizations to the new CSS-in-JS approach (@ant-design/cssinjs / antd v5 token API). [4]
- PageHeader and some pro-specific helpers moved/changed; update imports that referenced moved components (check usages like PageHeader, ProTable, ProForm fields). [1][2]
- Replace removed/renamed antd APIs per the antd v4→v5 migration notes (codemods available for many changes). Run antd codemods where helpful and manually adjust remaining incompatibilities. [4]
- Date libs / internals: check for moment → dayjs or other date-library differences if your project depended on moment behaviors. [4]
- Run tests and fix TypeScript types
- v3 may expose stricter types; run your build/tsc and address type errors (ProComponents repo and docs include typedef examples). [2][1]
- Helpful commands/tools
- Try antd codemod for broad API changes: npx -p @ant-design/codemod-v4 antd4-codemod src (adapt as needed), then manual fixes for remaining items. [4]
- If you need the exact package versions or release notes, check the ProComponents GitHub releases/changelog and npm package page. [2][3]
If you want, I can:
- fetch the ProComponents v3 migration doc page and list the exact import/rename changes for ProTable/ProForm/PageHeader in your codebase (paste a few example files or the errors you see).
需要验证主版本升级的稳定性和兼容性
该依赖升级到 3.1.0-0 存在以下问题：
- 预发布版本：
3.1.0-0后缀表示这是预发布版本，不适合用于生产环境 - 主版本升级（2.x → 3.x）：根据迁移指南，需要将 antd 升级至 v5，涉及多项破坏性变更：
- 组件 API 变更（PageHeader、ProTable、ProForm 等）
- antd v5 CSS-in-JS 主题系统，不再支持 Less
- 类型定义更新
- 版本锁定：移除了
^符号，固定在这个预发布版本上，增加了维护风险
建议：
- 确认是否需要使用预发布版本，考虑等待正式版本发布
- 验证整个依赖树中 antd 是否已升级至 v5（涉及广泛的兼容性变更）
- 运行完整的测试套件（包括快照测试）以验证所有组件兼容性
|
procomponents 有个报错： |
dosubot
Bot
added
size:S
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/table-list/index.tsx (1)
153-164:formItemRenderAPI 迁移已正确实现。代码已成功从旧 API 迁移至
formItemRender，函数签名和类型定义都是有效的：
- ✓
formItemRender是@ant-design/pro-components中的正确 API- ✓ 函数签名
(item, {defaultRender, ...rest}, form) => React.ReactNode符合文档规范- ✓ 参数类型定义完整，
FormInstance来自antd，ProColumns从库正确导入需要关注：依赖版本
3.1.0-0是预发布版本。建议在升级至正式版本（如3.1.0）后发布到生产环境，以确保长期稳定性。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/table-list/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). (4)
- GitHub Check: build (20, windows-latest)
- GitHub Check: build-preview
- GitHub Check: build (20, windows-latest)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
src/pages/table-list/index.tsx (1)
13-13: 正确添加了类型导入。添加
FormInstance类型导入是必要的，用于formItemRender函数的类型注解。使用type关键字进行类型导入符合最佳实践。
dosubot
Bot
added
size:M
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #11604 +/- ##
=======================================
Coverage 53.60% 53.60%
=======================================
Files 84 84
Lines 597 597
Branches 81 81
=======================================
Hits 320 320
Misses 277 277 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/setupTests.jsx (1)
30-66: 实现合理，可选择性增强 API 完整性。MessageChannel polyfill 的实现逻辑正确，能够满足基本的测试环境需求。使用
setTimeout模拟异步消息传递是合适的做法。如果后续测试中需要更完整的 MessageChannel API，可以考虑以下可选改进：
- 为 port 对象初始化
onmessage属性为null，使其更接近原生 API- 添加
start()和close()方法（尽管在大多数测试场景中可能用不到）🔎 可选的 API 完整性增强
this.port1 = { + onmessage: null, postMessage(msg) { setTimeout(() => { if ( channel.port2 && typeof channel.port2.onmessage === 'function' ) { channel.port2.onmessage({ data: msg }); } }, 0); }, + start() {}, + close() {}, }; this.port2 = { + onmessage: null, postMessage(msg) { setTimeout(() => { if ( channel.port1 && typeof channel.port1.onmessage === 'function' ) { channel.port1.onmessage({ data: msg }); } }, 0); }, + start() {}, + close() {}, };
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
tests/setupTests.jsx
⏰ 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). (4)
- GitHub Check: build (20, windows-latest)
- GitHub Check: build-preview
- GitHub Check: build (20, windows-latest)
- GitHub Check: Cloudflare Pages
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/user/login/index.tsx (1)
102-110: Alert 组件使用了无效的 propantd v6 中的 Alert 组件使用
message属性（不是title）来传入主要内容。当前代码使用了不存在的title属性，应改为message属性。修复示例
<Alert style={{ marginBottom: 24, }} message={content} type="error" showIcon />
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/HeaderDropdown/index.tsxsrc/pages/Admin.tsxsrc/pages/table-list/index.tsxsrc/pages/user/login/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). (4)
- GitHub Check: build-preview
- GitHub Check: build (20, windows-latest)
- GitHub Check: build (20, windows-latest)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
src/pages/Admin.tsx (1)
17-30: Alert API 变更与登录页保持一致此变更与
src/pages/user/login/index.tsx中的 Alert API 更新保持一致（从message改为title）。请确保这一变更在整个项目中得到一致应用。src/pages/table-list/index.tsx (3)
13-13: 正确引入 FormInstance 类型添加
FormInstance类型导入以支持formItemRender的类型标注，这很好地解决了 PR 中提到的 TypeScript 类型错误。
314-322: Drawer 组件 size 属性已确认有效在 antd v6 中，
size属性既接受预定义常量（'default'、'large'），也接受数字值。当前使用size={600}是正确且有效的做法。width属性已在 v6 中废弃，改用size属性是正确的做法。代码无需修改。
153-181: formItemRender 是 @ant-design/pro-components v3 的正确 API已验证确认：
formItemRender是@ant-design/pro-componentsv3（当前项目版本 3.1.0-0）中ProColumns的正确 API，替代了 v2 中的renderFormItem。参数签名(item: ProColumns<T>, {defaultRender, ...rest}, form: FormInstance)与官方文档一致。通过添加完整的类型标注，可修复 TS7006（参数隐含 any 类型）和 TS7031（绑定元素隐含 any 类型）等错误。
|
@afc163 @chenshuai2144 请问这个问题解决了吗？ |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @.github/workflows/preview-build.yml:
- Around line 19-21: The workflow uses oven-sh/setup-bun@v2 and runs "bun
install" and "bun run build" but the repository is missing the bun.lockb
lockfile, so run "bun install" locally to generate bun.lockb, add/commit
bun.lockb to the repo (and ensure it's not ignored by .gitignore), then push so
CI workflows that invoke "bun install" will install deterministic versions; keep
the workflow steps (uses: oven-sh/setup-bun@v2, run: bun install, run: bun run
build) as-is so CI uses the committed bun.lockb.
♻️ Duplicate comments (1)
package.json (1)
39-39: 预发布版本依赖问题已在之前的评审中提出之前的评审已经指出
3.1.0-0是预发布版本，且移除了^前缀会固定在此版本上。请确认是否有意使用此预发布版本进行测试，或考虑等待正式版本发布。
| - uses: oven-sh/setup-bun@v2 | ||
| - run: bun install | ||
| - run: bun run build |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# 检查工作流文件是否存在并查看相关行数
if [ -f ".github/workflows/preview-build.yml" ]; then
echo "=== 工作流文件存在，查看第19-21行 ==="
sed -n '15,25p' .github/workflows/preview-build.yml
echo ""
echo "=== 完整工作流文件 ==="
cat -n .github/workflows/preview-build.yml
else
echo "工作流文件不存在"
fiRepository: ant-design/ant-design-pro
Length of output: 1480
🏁 Script executed:
# 检查 bun.lockb 是否存在
echo "=== 检查 bun.lockb 文件 ==="
if [ -f "bun.lockb" ]; then
echo "✅ bun.lockb 存在"
ls -lh bun.lockb
else
echo "⚠️ bun.lockb 不存在"
fi
echo ""
echo "=== 检查其他锁文件 ==="
ls -la | grep -E '\.(lock|lockb|lock\.json)' || echo "未找到其他锁文件"
echo ""
echo "=== 检查是否存在 bunfig.toml 或其他 Bun 配置 ==="
find . -maxdepth 2 -name "bunfig.toml" -o -name "package.json" | head -5 | xargs -I {} sh -c 'echo "=== {} ===" && head -20 {}'Repository: ant-design/ant-design-pro
Length of output: 909
🏁 Script executed:
# 检查 git 中是否存在 bun.lockb（可能在 .gitignore 中）
echo "=== 检查 .gitignore 中的 Bun 相关条目 ==="
if [ -f ".gitignore" ]; then
grep -E "bun|lock" .gitignore || echo "未找到 bun 或 lock 相关条目"
fi
echo ""
echo "=== 检查 Git 中跟踪的文件 ==="
git ls-files | grep -E "bun|lock" || echo "Git 中未跟踪到 bun/lock 相关文件"Repository: ant-design/ant-design-pro
Length of output: 177
需要生成并提交 bun.lockb 锁文件以确保构建的可重复性
虽然 oven-sh/setup-bun@v2 和 Bun 命令替代 yarn 是合理的现代化改进，但当前工作流存在严重问题：
- ❌ 仓库中 不存在
bun.lockb锁文件 - ❌ 工作流运行
bun install时无法锁定依赖版本 - ❌ 构建不具备可重复性，不同时期的 CI 运行可能使用不同的依赖版本
需要在本地运行 bun install 生成 bun.lockb，并将其提交到仓库，以确保所有 CI 运行都基于一致的依赖版本。
🤖 Prompt for AI Agents
In @.github/workflows/preview-build.yml around lines 19 - 21, The workflow uses
oven-sh/setup-bun@v2 and runs "bun install" and "bun run build" but the
repository is missing the bun.lockb lockfile, so run "bun install" locally to
generate bun.lockb, add/commit bun.lockb to the repo (and ensure it's not
ignored by .gitignore), then push so CI workflows that invoke "bun install" will
install deterministic versions; keep the workflow steps (uses:
oven-sh/setup-bun@v2, run: bun install, run: bun run build) as-is so CI uses the
committed bun.lockb.
There was a problem hiding this comment.
Pull request overview
This PR updates antd and related UI dependencies from v6.0.0 to v6.2.0, along with corresponding code changes to adapt to new API interfaces. The changes include updating component props that were renamed or restructured in the newer antd version, adding a MessageChannel polyfill for test environments, and switching the CI build tool from yarn to bun.
Changes:
- Updated antd (^6.0.0 → ^6.2.0), @ant-design/pro-components (^2.8.9 → 3.1.0-0), and antd-style (^3.7.0 → ^4.1.0)
- Migrated Alert components from
messagetotitleprop, Drawer fromwidthtosize, Dropdown fromoverlayClassNametoclassNamesstructure, and ProTable column fromrenderFormItemtoformItemRender - Added MessageChannel polyfill for Jest/JSDOM test environments
- Updated snapshot tests to reflect new CSS class naming
- Switched CI workflow from yarn to bun for builds
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated antd ecosystem dependencies to newer versions |
| src/pages/user/login/index.tsx | Changed Alert component to use title instead of message prop |
| src/pages/Admin.tsx | Changed Alert component to use title instead of message prop |
| src/components/HeaderDropdown/index.tsx | Updated Dropdown to use classNames object structure instead of overlayClassName |
| src/pages/table-list/index.tsx | Changed renderFormItem to formItemRender, updated Drawer width to size, and added FormInstance type import |
| tests/setupTests.jsx | Added MessageChannel polyfill implementation for test environments |
| src/pages/user/login/snapshots/login.test.tsx.snap | Updated snapshot to reflect new CSS variable hashing |
| .github/workflows/preview-build.yml | Migrated build pipeline from yarn to bun |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Dropdown | ||
| overlayClassName={classNames(styles.dropdown, cls)} | ||
| classNames={{ | ||
| root: classNames(styles.dropdown, cls), |
There was a problem hiding this comment.
The mapping of overlayClassName to classNames.root may be incorrect for the Dropdown component in antd v6. The Dropdown component uses classNames to style different parts, but the overlay is typically styled using classNames.dropdown or popupClassName. Please verify the correct property name for styling the dropdown overlay in the version of antd being used.
| root: classNames(styles.dropdown, cls), | |
| dropdown: classNames(styles.dropdown, cls), |
| }: { | ||
| defaultRender: ( | ||
| item: ProColumns<API.RuleListItem>, | ||
| ) => React.ReactNode; |
There was a problem hiding this comment.
The type definition for the second parameter is incomplete. The rest object contains additional properties that are being spread into the Input component, but the type only explicitly includes defaultRender. Consider using a more complete type from @ant-design/pro-components or adding appropriate typing for all properties in the rest parameter to ensure type safety.
| ) => React.ReactNode; | |
| ) => React.ReactNode; | |
| [key: string]: any; |
|
|
||
| <Drawer | ||
| width={600} | ||
| size={600} |
There was a problem hiding this comment.
The Drawer size prop should accept predefined values like 'default' or 'large', not numeric values. For custom widths like 600, continue using the width prop instead. Consider reverting to width={600} or using a predefined size value like size="large".
| size={600} | |
| width={600} |
|
期待早日更新 |
|
还差什么没改了? 能先把这个合并了吗 后面再提新的PR |
|
ProComponents 在样式上有点问题，我记得是 ProTable 的筛选框样式在箭头处有重合，没来得及细看。 |
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.