Fix i18n translation in AI settings page #1661
Conversation
WalkthroughThe changes consolidate translation entries for the AI settings feature and convert from dynamic template-based translations with variable substitution to static translation strings, removing the placeholder pattern. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
There was a problem hiding this comment.
Pull request overview
This PR fixes an i18n translation issue in the AI settings page by simplifying the translation string to avoid nested translation calls. The change removes the dynamic interpolation of "OpenOps Assistant" and embeds it directly into the translation string.
Key Changes:
- Simplified the translation call by removing nested
t()function usage for the assistantName parameter - Reorganized translation.json entries by moving "OpenOps Assistant" and its description to appear earlier in the file
- Removed the unused "OpenOps Agent" translation entry
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react-ui/src/app/features/ai/ai-settings-form.tsx | Simplified translation call by removing nested translation and parameter interpolation |
| packages/react-ui/public/locales/en/translation.json | Reorganized translation entries and removed unused "OpenOps Agent" entry |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Greptile OverviewGreptile SummarySimplified i18n translation implementation in the AI settings page by removing nested translation interpolation. Changed from using
Confidence Score: 5/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant AiSettingsForm
participant i18n as i18n Translation System
participant TranslationJSON as translation.json
User->>AiSettingsForm: View AI Settings Page
AiSettingsForm->>i18n: t('Enables OpenOps Assistant...')
i18n->>TranslationJSON: Lookup translation key
TranslationJSON-->>i18n: Return translated string
i18n-->>AiSettingsForm: 'Enables OpenOps Assistant and other AI-powered features...'
AiSettingsForm-->>User: Display description text
Note over AiSettingsForm,i18n: Previous implementation (removed):<br/>t('Enables {assistantName}...', { assistantName: t('OpenOps Assistant') })<br/>Now simplified to direct translation
|
![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: 1
♻️ Duplicate comments (1)
packages/react-ui/public/locales/en/translation.json (1)
19-19: Consider using a semantic translation key.This line uses the full sentence as both the key and value, which mirrors the non-idiomatic pattern in
ai-settings-form.tsx. See the review comment on that file for refactoring suggestions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/react-ui/public/locales/en/translation.json(1 hunks)packages/react-ui/src/app/features/ai/ai-settings-form.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx,js,jsx}: Indentation: 2 spaces for TypeScript/JavaScript
Braces required for all control blocks, even single-line
One space between keywords and parentheses:if (condition) {
Use camelCase for variables and functions
Use PascalCase for classes and types
Use UPPER_SNAKE_CASE for constants
Use lowercase with hyphens for file names (e.g.,user-profile.ts)
Preferconstoverletorvarin TypeScript/JavaScript
Prefer arrow functions for callbacks and functional components in TypeScript/JavaScript
Files:
packages/react-ui/src/app/features/ai/ai-settings-form.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Use types and interfaces where appropriate in TypeScript
Use explicit return types for exported functions in TypeScript
Files:
packages/react-ui/src/app/features/ai/ai-settings-form.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{tsx,ts}: Frontend tech stack must strictly use: React 18, Zustand, react-query v5, shadcn, and Axios withqspackage for query strings
Follow best practices for React hooks
Prefer small, composable components and extract helper functions where possible
Usecnutility to group tailwind classnames in React components
Files:
packages/react-ui/src/app/features/ai/ai-settings-form.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 App Image for arm64
- GitHub Check: Build Engine Image for arm64
- GitHub Check: Build Engine Image for amd64
- GitHub Check: Build App Image for amd64
🔇 Additional comments (1)
packages/react-ui/public/locales/en/translation.json (1)
18-18: The "OpenOps Assistant" translation key is actively used in the codebase.The search results show the key is referenced in multiple components:
no-ai-enabled-popover.tsx:22ai-assistant-button.tsx:19ai-chat-resizable-panel.tsx:74No action is required; the translation entry is not orphaned.
Likely an incorrect or invalid review comment.
| const descriptionText = t( | ||
| 'Enables {assistantName} and other AI-powered features such as the CLI command generation.', | ||
| { | ||
| assistantName: t('OpenOps Assistant'), | ||
| }, | ||
| 'Enables OpenOps Assistant and other AI-powered features such as the CLI command generation.', | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use semantic translation keys instead of full sentences.
Using the entire sentence as the translation key is not idiomatic for i18next and reduces maintainability. If the text needs minor adjustments, the key must be updated everywhere it's referenced.
Apply this pattern instead:
- const descriptionText = t(
- 'Enables OpenOps Assistant and other AI-powered features such as the CLI command generation.',
- );
+ const descriptionText = t('ai.settings.enableDescription');Then update the translation file to use a semantic key:
{
"ai": {
"settings": {
"enableDescription": "Enables OpenOps Assistant and other AI-powered features such as the CLI command generation."
}
}
}Alternatively, if flat keys are preferred:
- const descriptionText = t(
- 'Enables OpenOps Assistant and other AI-powered features such as the CLI command generation.',
- );
+ const descriptionText = t('aiSettingsEnableDescription');{
"aiSettingsEnableDescription": "Enables OpenOps Assistant and other AI-powered features such as the CLI command generation."
}🤖 Prompt for AI Agents
packages/react-ui/src/app/features/ai/ai-settings-form.tsx lines 87-89:
currently the full sentence is used as the i18next key; replace that literal
string with a semantic key (e.g. t('ai.settings.enableDescription')) and update
your translation files to include the corresponding entry ("ai": { "settings": {
"enableDescription": "Enables OpenOps Assistant and other AI-powered features
such as the CLI command generation." } }) or, if you prefer flat keys, use a
single flat key (e.g. t('aiSettingsEnableDescription')) and add that key to the
translations; ensure any other usages are updated to the new key and remove the
sentence-as-key usage.
Part of OPS-3104.
Additional Notes
I'll override this value in the enterprise-translation.json in internal. Because the string is slightly different in internal.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.