fix: 修复密钥表单供应商分组选择时 default 不自动移除的问题#568
Conversation
- 在 add-key-form.tsx 和 edit-key-form.tsx 中添加 handleProviderGroupChange - 当选择多个分组时自动移除 default 分组 - 修复 DialogFormLayout 中输入框 focus ring 左边被裁剪的样式问题 此问题由 PR ding113#539 重构引入，原有逻辑在 key-edit-section.tsx 中存在但未迁移到新表单组件
📝 WalkthroughWalkthrough在 add-key 与 edit-key 表单中新增 handleProviderGroupChange 以在选择多个提供者组时自动移除 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro Cache: Disabled due to Reviews > Disable Cache setting 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
⏰ 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)
Comment |
Summary of ChangesHello @NieiR, 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! 此拉取请求主要修复了两个用户界面问题。首先，它恢复了密钥新增和编辑表单中供应商分组选择的预期行为，确保在选择多个分组时 "default" 分组能够被正确移除，纠正了先前重构引入的回归。其次，它调整了表单布局的样式，以解决输入框聚焦时焦点环被裁剪的视觉缺陷。这些修复旨在提升用户体验和界面一致性，且不涉及 API 变更或破坏性影响。 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
|
github-actions
bot
added
size/XS
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![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/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx (1)
141-156: 逻辑正确，但存在代码重复
handleProviderGroupChange函数的实现与add-key-form.tsx（lines 122-137）完全相同，正确实现了自动移除default的逻辑。建议：提取为共享工具函数
考虑将该函数提取到共享工具文件中（例如
@/lib/utils/provider-group.ts），以减少代码重复并便于后续维护。♻️ 可选的重构方案
创建新文件
src/lib/utils/provider-group.ts:import { PROVIDER_GROUP } from "@/lib/constants/provider.constants"; /** * 规范化供应商分组值，当有多个分组时自动移除 default */ export function normalizeProviderGroup(value: string): string { const groups = value .split(",") .map((g) => g.trim()) .filter(Boolean); if (groups.length > 1 && groups.includes(PROVIDER_GROUP.DEFAULT)) { const withoutDefault = groups.filter((g) => g !== PROVIDER_GROUP.DEFAULT); return withoutDefault.join(","); } return value; }然后在两个表单文件中使用：
- const handleProviderGroupChange = useCallback( - (newValue: string) => { - const groups = newValue - .split(",") - .map((g) => g.trim()) - .filter(Boolean); - if (groups.length > 1 && groups.includes(PROVIDER_GROUP.DEFAULT)) { - const withoutDefault = groups.filter((g) => g !== PROVIDER_GROUP.DEFAULT); - form.setValue("providerGroup", withoutDefault.join(",")); - } else { - form.setValue("providerGroup", newValue); - } - }, - [form] - ); + const handleProviderGroupChange = useCallback( + (newValue: string) => { + form.setValue("providerGroup", normalizeProviderGroup(newValue)); + }, + [form] + );
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to Reviews > Disable Cache setting
📒 Files selected for processing (3)
src/app/[locale]/dashboard/_components/user/forms/add-key-form.tsxsrc/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsxsrc/components/form/form-layout.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
No emoji characters in any code, comments, or string literals
Files:
src/components/form/form-layout.tsxsrc/app/[locale]/dashboard/_components/user/forms/add-key-form.tsxsrc/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx
**/*.{ts,tsx,jsx,js}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,jsx,js}: All user-facing strings must use i18n (5 languages supported: zh-CN, en, ja, ko, de). Never hardcode display text
Use path alias @/ to map to ./src/
Use Biome for code formatting with configuration: double quotes, trailing commas, 2-space indent, 100 character line width
Prefer named exports over default exports
Use next-intl for internationalization
Use Next.js 16 App Router with Hono for API routes
Files:
src/components/form/form-layout.tsxsrc/app/[locale]/dashboard/_components/user/forms/add-key-form.tsxsrc/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React 19, shadcn/ui, Tailwind CSS, and Recharts for the UI layer
Files:
src/components/form/form-layout.tsxsrc/app/[locale]/dashboard/_components/user/forms/add-key-form.tsxsrc/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx
🧠 Learnings (1)
📚 Learning: 2026-01-05T03:02:06.594Z
Learnt from: NieiR
Repo: ding113/claude-code-hub PR: 539
File: src/app/[locale]/dashboard/_components/user/user-key-table-row.tsx:66-66
Timestamp: 2026-01-05T03:02:06.594Z
Learning: In the claude-code-hub project, the translations.actions.addKey field in UserKeyTableRowProps is defined as optional for backward compatibility, but all actual callers in the codebase provide the complete translations object. The field has been added to all 5 locale files (messages/{locale}/dashboard.json).
Applied to files:
src/app/[locale]/dashboard/_components/user/forms/add-key-form.tsx
🧬 Code graph analysis (2)
src/app/[locale]/dashboard/_components/user/forms/add-key-form.tsx (1)
src/lib/constants/provider.constants.ts (1)
PROVIDER_GROUP(25-30)
src/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx (1)
src/lib/constants/provider.constants.ts (1)
PROVIDER_GROUP(25-30)
⏰ 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). (5)
- GitHub Check: pr-review
- GitHub Check: pr-description
- GitHub Check: 🌐 API Tests
- GitHub Check: pr-label
- GitHub Check: Docker Build Test
🔇 Additional comments (4)
src/components/form/form-layout.tsx (1)
59-59: 修复正确，改善了输入框焦点环的显示效果将右侧单向的内边距/外边距（
pr-2 -mr-2）改为对称的水平内边距/外边距（px-1 -mx-1），有效解决了在overflow-y-auto容器中输入框获得焦点时左侧边框被裁剪的问题。src/app/[locale]/dashboard/_components/user/forms/add-key-form.tsx (2)
122-137: 逻辑正确，恢复了供应商分组的自动规范化功能
handleProviderGroupChange函数正确实现了以下逻辑：
- 当用户选择多个分组且包含
default时，自动移除default- 单独的
default分组保持不变- 使用
useCallback进行优化，依赖项正确该实现与 PR #539 之前的行为一致，符合预期。
213-213: 正确应用了新的处理函数将
providerGroup字段的onChange处理器更换为handleProviderGroupChange，确保用户选择分组时自动触发规范化逻辑。src/app/[locale]/dashboard/_components/user/forms/edit-key-form.tsx (1)
236-236: 正确应用了新的处理函数与
add-key-form.tsx保持一致，正确将onChange处理器更换为handleProviderGroupChange。
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Summary
This PR successfully restores the missing provider group auto-removal logic that was inadvertently omitted during the refactoring in PR #539. The implementation is clean and consistent with the existing pattern in key-edit-section.tsx.
PR Size: XS
- Lines changed: 44 (39 additions, 5 deletions)
- Files changed: 3
Issues Found
No significant issues identified in this PR.
Review Coverage
- Logic and correctness - Clean
- Security (OWASP Top 10) - Clean
- Error handling - Clean
- Type safety - Clean
- Documentation accuracy - Clean
- Test coverage - Adequate (manual testing performed)
- Code clarity - Good
Analysis Summary
Positive aspects:
-
Consistent Implementation: The
handleProviderGroupChangelogic in both files matches the reference implementation inkey-edit-section.tsx:313-329, ensuring behavioral consistency across the codebase. -
Proper Hook Usage: Correctly uses
useCallbackwith[form]dependency, preventing unnecessary re-renders. -
Clear Business Logic: The auto-removal logic is straightforward:
- When multiple groups are selected AND "default" is included → remove "default"
- Otherwise → keep the value as-is
-
UI Fix: The
form-layout.tsxchange (pr-2 -mr-2→px-1 -mx-1) addresses a legitimate focus ring clipping issue without affecting functionality.
Validation performed:
- Verified the logic matches the existing pattern in
key-edit-section.tsx - Confirmed
PROVIDER_GROUP.DEFAULTconstant usage is consistent with codebase conventions - Checked that the change only affects NEW code (lines added in the diff)
- Validated that no error handling is needed (form state management handles validation)
No issues to report because:
- The implementation is a direct restoration of previously working code
- No security vulnerabilities introduced
- No silent failures or error swallowing
- Type safety is maintained (TypeScript will catch issues)
- No test coverage gaps for this UI interaction logic
- Code is clear and maintainable
Automated review by Claude AI
- Update biome.json schema version from 2.3.10 to 2.3.11 - Remove unused Tooltip import from session-stats.tsx
github-project-automation
bot
moved this from Backlog
to Done
in Claude Code Hub Roadmap
2 participants
Greptile Overview
Greptile Summary
Restored missing auto-removal logic for 'default' provider group when selecting multiple groups in key forms, and fixed input focus ring clipping issue.
handleProviderGroupChangecallback in bothadd-key-form.tsxandedit-key-form.tsxto automatically remove the 'default' group when users select multiple provider groupskey-edit-section.tsx(lines 313-329)form-layout.tsxby adjusting horizontal padding to preventoverflow-y-autofrom clipping the left borderConfidence Score: 5/5
useCallbackwith proper dependencies), and include a minor CSS fix that improves UI quality without affecting functionalityImportant Files Changed
File Analysis
handleProviderGroupChangecallback to automatically remove 'default' when multiple groups are selectedhandleProviderGroupChangecallback to automatically remove 'default' when multiple groups are selectedpr-2 -mr-2topx-1 -mx-1to fix focus ring clipping issueSequence Diagram
sequenceDiagram participant User participant TagInputField participant Form as Add/EditKeyForm participant Handler as handleProviderGroupChange User->>TagInputField: Select provider groups TagInputField->>Handler: onChange(newValue) Handler->>Handler: Split & trim groups alt Multiple groups & includes "default" Handler->>Handler: Filter out "default" Handler->>Form: setValue("providerGroup", withoutDefault) else Single group or no "default" Handler->>Form: setValue("providerGroup", newValue) end Form->>TagInputField: Update displayed value