fix(admin): improve provider management UX - #446
Conversation
Summary of ChangesHello @miraserver, 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 significantly enhances the user experience of the administrator's provider management section by introducing robust filtering capabilities for provider status and groups, improving the visual presentation of provider groups with dynamic coloring, and ensuring consistent and refined translations across multiple languages. These changes aim to make provider management more intuitive and efficient for administrators. 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
enhancement
![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 primarily focuses on enhancing the provider management section with new filtering capabilities and improved internationalization. Key changes include adding status and group filters to the provider list, allowing users to filter providers by their active/inactive status and assigned group tags. The group tags are now dynamically styled with unique background and contrasting text colors. Internationalization updates were made across English, Japanese, Russian, Simplified Chinese, and Traditional Chinese language files, introducing translations for the new 'MCP Passthrough Configuration' and the enhanced provider filtering options. The 'Add server' button was also internationalized. A review comment highlighted a code duplication issue in provider-manager.tsx concerning the parsing of groupTag and suggested refactoring it into a shared utility function for better maintainability.
| const providerGroups = | ||
| p.groupTag | ||
| ?.split(",") | ||
| .map((t) => t.trim()) | ||
| .filter(Boolean) || []; |
There was a problem hiding this comment.
Логика для разбора groupTag дублируется. Похожий код находится в useMemo для allGroups (строки 71-74). Рекомендую вынести эту логику в отдельную вспомогательную функцию, чтобы избежать дублирования и улучшить поддерживаемость кода. Например, можно создать функцию const getProviderGroups = (provider: ProviderDisplay) => provider.groupTag?.split(',').map(t => t.trim()).filter(Boolean) || []; и использовать её в обоих местах.
![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
No significant issues identified in this PR. The changes add well-implemented status and group filtering functionality to the provider management UI, with proper i18n support across all 5 locales.
PR Size: S
- Lines changed: 417 (394 additions, 23 deletions)
- Files changed: 9
Review Coverage
- Logic and correctness - Clean
- Security (OWASP Top 10) - Clean
- Error handling - Clean
- Type safety - Clean
- Documentation accuracy - Clean
- Test coverage - N/A (UI components, follows existing patterns)
- Code clarity - Good
Notes
- New filter implementation follows existing codebase patterns
- Color utilities (
getGroupColor,getContrastTextColor) reused from existing implementations - Translation keys consistently added across all 5 locales (en, ja, ru, zh-CN, zh-TW)
- MCP passthrough translations added as part of this PR are consistent across locales
Automated review by Claude AI
|
The changes to |
7956507 to
8f7408f
Compare
Enhancements to settings/providers interface: **Features:** - Add status filter (All/Active/Inactive) - Add group filter with multiselect - Add "default" group for providers without assigned groups - Apply colored badges to provider groups (using color utils) **Translations:** - Fix Russian translations (shorter labels for compact UI) - "Первый байт" → "1 байт" - "Интервал потока" → "поток" - "Непотоковая" → "не поток" - "Использование сегодня" → "Сегодня" - "Множитель стоимости" → "Коэф цены" - "Управление поставщиками" → "Поставщики" - Update button translations (en: "Add server", ru: "Добавить") - Change status filter "All" → "Any status" in English - Add filter translations to all 5 locales (en, ru, ja, zh-CN, zh-TW) - Add "default" group translation key **Implementation:** - provider-manager.tsx: Filter UI and logic - provider-rich-list-item.tsx: Colored group badges - add-provider-dialog.tsx: Fix hardcoded Chinese text - Sort groups: "default" first, then alphabetically 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove unused Badge import from provider-manager.tsx - Auto-fix line endings (CRLF -> LF) across 559 files - Resolves lint check failures in CI
8f7408f to
0b92bc1
Compare
done |
github-project-automation
Bot
moved this from Backlog
to Done
in Claude Code Hub Roadmap
2 participants
Summary
Improves the admin provider management UX by adding status and group filters, applying colored badges to provider groups, and making translations more compact in Russian.
Problem
When managing providers in the admin settings page, administrators lacked the ability to filter providers by status (active/inactive) or by group, making it difficult to manage large numbers of providers. Additionally, the Russian translations used overly long labels that cluttered the UI.
Solution
1. Status Filter
Added a dropdown filter to show providers by status:
2. Group Filter with Multi-Select
Added a group filter with badge-style buttons:
3. Colored Group Badges
Applied consistent colored badges to provider groups in the list view:
getGroupColor()utility for stable colors based on group name hash4. Translation Improvements
Russian (compact labels for better UI fit):
English:
All locales (en, ja, ru, zh-CN, zh-TW):
5. MCP Passthrough Configuration (i18n)
Added translations for the new MCP passthrough configuration feature across all locales:
Changes
Core Changes
provider-manager.tsx: Added status filter dropdown, group filter buttons with multi-select, filtering logicprovider-rich-list-item.tsx: Applied colored badges with contrast text colors usinggetGroupColorandgetContrastTextColorutilitiesadd-provider-dialog.tsx: Fixed hardcoded Chinese text to use i18nSupporting Changes
messages/en/settings.json: Filter translations, MCP passthrough i18nmessages/ja/settings.json: Filter translations, MCP passthrough i18nmessages/ru/settings.json: Compact labels, filter translations, MCP passthrough i18nmessages/zh-CN/settings.json: Filter translationsmessages/zh-TW/settings.json: Filter translations, MCP passthrough i18nCHANGELOG.md: Updated for v0.3.37 releaseRelated Issues & PRs
Testing
Automated
bun run build)Manual Testing
Checklist
Description enhanced by Claude AI