[Feat]: Add Multi-language Translations #3418
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThis pull request introduces extensive localization enhancements across multiple components in the Ever Teams application. Key modifications include dynamic translations for titles and labels in various components such as Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (12)
apps/web/components/sidebar-opt-in-form.tsx (1)
Line range hint
102-102: Missing translation for loading state textThe loading state text 'Subscribing...' and 'Subscribe' are still hardcoded. These should be internationalized for consistency.
Apply this diff to fix the issue:
- {isLoading ? 'Subscribing...' : 'Subscribe'} + {isLoading ? t('common.SUBSCRIBING') : t('common.SUBSCRIBE')}apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx (1)
Line range hint
54-54: Update default fallback statusThe fallback to
buttonsConfig.Deniedshould be updated to use the new uppercase convention.Apply this diff:
- return (buttonsConfig[status] || buttonsConfig.Denied).map((button, index) => ( + return (buttonsConfig[status] || buttonsConfig.DENIED).map((button, index) => (apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx (3)
63-63: Simplify the title string templateWhile the translation implementation is correct, the string concatenation can be simplified.
- title={`+ ${t('common.ADD_TIME_ENTRY')}`} + title={t('common.ADD_TIME_ENTRY')}The
+symbol can be included in the translation strings themselves for better flexibility across languages.
Line range hint
71-82: Localize the input placeholderThe placeholder text is hardcoded in English, which is inconsistent with the localization efforts.
- placeholder='Bug for creating calendar view' + placeholder={t('common.TASK_INPUT_PLACEHOLDER')}
Line range hint
154-156: Localize the character count formatThe character count display format should be localized to support different language conventions.
- {notes.length}/{120} + {t('common.CHARACTER_COUNT', { current: notes.length, max: 120 })}Add the following to your translation files:
{ "common": { "CHARACTER_COUNT": "{current}/{max}" } }apps/web/locales/pt.json (1)
25-25: Consider using gender-neutral term for "MEN_HOURS"The current translation "Horas Homem" is a literal translation that maintains gender-specific language. Consider using a more inclusive term like "Horas Trabalhadas" (Worked Hours) or "Horas de Trabalho" (Work Hours), similar to the approach taken in the Russian translation.
- "MEN_HOURS": "Horas Homem", + "MEN_HOURS": "Horas de Trabalho",apps/web/locales/es.json (1)
22-34: Spanish translations look good with a minor suggestion.The translations are accurate and well-formatted. However, consider using sentence case consistently for user interface elements (e.g., "Tareas pendientes" instead of "PENDING_TASKS") to align with Spanish language conventions.
apps/web/locales/de.json (1)
22-34: Consider using gender-neutral language in German translations.The translations are accurate, but "Mannstunden" (MEN_HOURS) could be replaced with a more inclusive term like "Arbeitsstunden" or "Personenstunden" to maintain gender neutrality.
apps/web/locales/fr.json (1)
22-34: French translations are well done with one suggestion for inclusivity.The translations are accurate and maintain a consistent formal tone. However, consider replacing "Heures Homme" with a more inclusive term like "Heures de Travail" or "Heures Personne" to maintain gender neutrality.
apps/web/components/pages/task/details-section/blocks/task-progress.tsx (2)
103-105: Consider simplifying the null/undefined checksThe multiple condition checks for
task?.estimatecould be simplified using the nullish coalescing operator.- task?.estimate === null || - task?.estimate === 0 || - task?.estimate === undefined || + !task?.estimate ||
124-124: Remove commented codeThe commented code
// memberInfo={memberInfo}should be removed as it's not being used.- // memberInfo={memberInfo}apps/web/locales/bg.json (1)
22-34: Consider adding translation comments for context.To improve maintainability, consider adding comments to describe the context where these translations are used. This would help future translators understand the proper usage and context of each string.
Example format:
{ "common": { + // Used in the task list header to show pending tasks count "PENDING_TASKS": "Чакащи задачи", + // Used in expandable sections to show more content "SHOW_MORE": "Покажи още",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx(1 hunks)apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx(2 hunks)apps/web/app/[locale]/timesheet/[memberId]/page.tsx(2 hunks)apps/web/components/nav-projects.tsx(2 hunks)apps/web/components/pages/task/details-section/blocks/task-progress.tsx(5 hunks)apps/web/components/sidebar-opt-in-form.tsx(2 hunks)apps/web/lib/components/Kanban.tsx(2 hunks)apps/web/locales/ar.json(1 hunks)apps/web/locales/bg.json(1 hunks)apps/web/locales/de.json(1 hunks)apps/web/locales/en.json(1 hunks)apps/web/locales/es.json(1 hunks)apps/web/locales/fr.json(1 hunks)apps/web/locales/he.json(1 hunks)apps/web/locales/it.json(1 hunks)apps/web/locales/nl.json(1 hunks)apps/web/locales/pl.json(1 hunks)apps/web/locales/pt.json(1 hunks)apps/web/locales/ru.json(1 hunks)apps/web/locales/zh.json(1 hunks)
🧰 Additional context used
📓 Learnings (1)
apps/web/locales/es.json (1)
Learnt from: CREDO23
PR: ever-co/ever-teams#3309
File: apps/web/locales/es.json:335-337
Timestamp: 2024-11-12T14:06:02.202Z
Learning: When reviewing additions of new translation keys in `apps/web/locales/`, ensure to verify whether the keys have been added to all relevant locale files before suggesting they are missing.
🔇 Additional comments (20)
apps/web/locales/en.json (3)
27-29: LGTM!
The UI action translations follow consistent naming conventions and proper capitalization.
30-31: Verify GDPR compliance for newsletter-related translations.
Please ensure that the opt-in message and newsletter subscription text comply with GDPR requirements by:
- Making it clear that consent is being given
- Specifying how the data will be used
- Including information about unsubscribing
Consider expanding the text to be more explicit about data usage and rights:
- "OPT_IN_UPDATES": "Opt-in to receive updates and news about Ever Teams.",
- "SUBSCRIBE_NEWSLETTER": "Subscribe to our newsletter",
+ "OPT_IN_UPDATES": "I consent to receive updates and news about Ever Teams. You can unsubscribe at any time.",
+ "SUBSCRIBE_NEWSLETTER": "Subscribe to our newsletter (optional)",32-34: LGTM!
The project action translations are consistent and properly formatted.
apps/web/locales/it.json (1)
22-34: LGTM! The translations look accurate and well-integrated.
The new Italian translations are grammatically correct and maintain consistency with the existing translations. The keys follow the established naming convention.
Let's verify the usage of these translations in the components:
✅ Verification successful
The translations are properly integrated and used across the codebase
The search results confirm that all the new Italian translations are actively used in the codebase:
- Task management translations in
Kanban.tsx - Newsletter opt-in translations in
sidebar-opt-in-form.tsx - Project action translations in
nav-projects.tsx - Timesheet-related translations in
timesheet/[memberId]/page.tsxandAddTaskModal.tsx
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the usage of the new translation keys in components
# Test: Search for translation key usage in components. Expect: Keys being used in UI components.
echo "Checking translation key usage in components..."
rg -t tsx -t jsx "('|\")(common\.(PENDING_TASKS|SHOW_MORE|TASKS|MEN_HOURS|MEMBERS_WORKED|COLLAPSE_COLUMN|EDIT_STATUS|ADD_TIME_ENTRY|OPT_IN_UPDATES|SUBSCRIBE_NEWSLETTER|VIEW_PROJECT|SHARE_PROJECT|DELETE_PROJECT))('|\")"
Length of output: 357
Script:
#!/bin/bash
# Let's try a different approach by searching for these translation keys without file type restrictions
echo "Searching for translation key usage..."
rg "('|\")common\.(PENDING_TASKS|SHOW_MORE|TASKS|MEN_HOURS|MEMBERS_WORKED|COLLAPSE_COLUMN|EDIT_STATUS|ADD_TIME_ENTRY|OPT_IN_UPDATES|SUBSCRIBE_NEWSLETTER|VIEW_PROJECT|SHARE_PROJECT|DELETE_PROJECT)('|\")" --type-add 'web:*.{tsx,jsx,ts,js}' -t web
# Also let's check what file types are available in the apps/web directory
echo -e "\nChecking available file types in apps/web..."
fd . apps/web -t f -x file {} | grep -i "script\|typescript\|javascript"
Length of output: 42189
apps/web/components/nav-projects.tsx (2)
70-70: Verify translation completeness for dropdown actions
The dropdown menu items have been properly internationalized. However, let's verify that all required translations are present in the locale files.
Also applies to: 74-74, 79-79
✅ Verification successful
Let me try a different approach to check the translations.
Let me check the specific translation keys in each locale file.
All required translations are present and properly configured
The verification shows that all three translation keys (common.VIEW_PROJECT, common.SHARE_PROJECT, and common.DELETE_PROJECT) are present and properly translated in all locale files (ar, bg, de, en, es, fr, he, it, nl, pl, pt, ru, and zh). Each translation is appropriately localized for its respective language.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if translation keys exist in all locale files
for key in "common.VIEW_PROJECT" "common.SHARE_PROJECT" "common.DELETE_PROJECT"; do
echo "Checking key: $key"
fd -e json . apps/web/locales/ -x jq ".. | objects | select(has(\"$key\")) | .[\"$key\"]"
done
Length of output: 842
Script:
#!/bin/bash
# List all locale files and check their content
echo "Available locale files:"
fd -e json . apps/web/locales/
echo "\nChecking translations in each file:"
fd -e json . apps/web/locales/ -x cat {}
Length of output: 121546
Script:
#!/bin/bash
# Check specific translation keys in each locale file
for file in $(fd -e json . apps/web/locales/); do
echo "=== Checking file: $file ==="
jq '.common | select(.VIEW_PROJECT != null, .SHARE_PROJECT != null, .DELETE_PROJECT != null) | {VIEW_PROJECT, SHARE_PROJECT, DELETE_PROJECT}' "$file"
done
Length of output: 8710
44-44: Verify translation key consistency
The translation key 'sidebar.PROJECTS' follows a different namespace pattern ('sidebar') compared to other keys that use 'common'. Consider standardizing the namespace usage across the application.
apps/web/components/sidebar-opt-in-form.tsx (1)
78-80: LGTM: Form title and description properly internationalized
The card title and description have been correctly internationalized using the translation hook.
apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx (1)
39-47:
Update status object keys for consistency
The status object keys have been updated, but 'Denied' key remains inconsistent with the uppercase pattern.
Apply this diff to maintain consistency:
APPROVED: [
{ icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Denied" },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
],
- Denied: [
+ DENIED: [
{ icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
]Likely invalid or redundant comment.
apps/web/app/[locale]/timesheet/[memberId]/page.tsx (1)
148-148: LGTM! Proper use of translations.
The strings have been correctly internationalized using the translation function.
Also applies to: 156-156, 167-167
apps/web/lib/components/Kanban.tsx (1)
302-302: LGTM! Proper use of translations.
The strings have been correctly internationalized using the translation function.
Also applies to: 308-308, 426-426, 429-429
apps/web/locales/zh.json (1)
22-34: Chinese translations look good!
The translations are well-structured and follow proper Chinese language conventions. All necessary keys for the AddTaskModal component are present.
apps/web/locales/he.json (1)
22-34: Hebrew translations look good!
The translations are well-structured and properly consider Hebrew language conventions and RTL (Right-to-Left) text direction requirements. All necessary keys for the AddTaskModal component are present.
apps/web/locales/pl.json (1)
22-23: LGTM! Polish translations are accurate and consistent
The translations maintain proper grammar, gender agreement, and formal tone appropriate for a business application.
Also applies to: 25-34
apps/web/locales/ru.json (1)
22-23: LGTM! Russian translations are well-adapted
The translations are accurate and show good cultural adaptation, particularly the neutral translation of "MEN_HOURS" to "Часы работы" (Work Hours) which avoids gender-specific terminology.
Also applies to: 25-34
apps/web/locales/pt.json (2)
22-24: LGTM! Portuguese translations are accurate
The translations are grammatically correct and follow Brazilian Portuguese conventions appropriately.
Also applies to: 26-34
22-34: Verify duplicate keys across all localization files
Let's check for any other duplicate keys in the localization files to ensure consistency.
✅ Verification successful
No duplicate keys found in localization files
After analyzing all localization files in both web and desktop applications, no duplicate keys were detected. The translation files appear to be properly structured with unique keys.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for duplicate keys in all localization files
# Expected results: List of duplicate keys if any exist
echo "Checking for duplicate keys in localization files..."
for file in $(find . -name "*.json"); do
echo "Analyzing $file..."
jq -r 'path(..|select(type == "string")) | join(".")' "$file" | sort | uniq -d
done
Length of output: 131070
Script:
#!/bin/bash
# Let's try a different approach to check for duplicate keys in localization files
# using a more targeted search in the locales directory
echo "Checking for duplicate keys in web locales..."
for file in $(find ./apps/web/locales -name "*.json"); do
echo "Analyzing $file..."
jq -r 'to_entries | group_by(.key) | map(select(length > 1)) | map(.[0].key)[]' "$file" 2>/dev/null
done
echo -e "\nChecking for duplicate keys in desktop locales..."
for file in $(find ./apps/desktop/i18n -name "*.json"); do
echo "Analyzing $file..."
jq -r 'to_entries | group_by(.key) | map(select(length > 1)) | map(.[0].key)[]' "$file" 2>/dev/null
done
Length of output: 7217
apps/web/components/pages/task/details-section/blocks/task-progress.tsx (2)
78-79: LGTM! Code formatting improvements
The code formatting changes improve readability while maintaining the same functionality.
Also applies to: 84-85, 204-205
172-172: LGTM! Proper internationalization
The "Show More" text has been correctly internationalized using the translation key.
apps/web/locales/bg.json (2)
22-34: LGTM! New translations follow consistent patterns.
The added translations maintain consistent naming conventions and provide appropriate Bulgarian translations for the new UI elements.
22-34: Verify translation key usage in components.
Let's verify that these translation keys are correctly used in the mentioned components.
✅ Verification successful
Translation keys are correctly used across components
The verification shows that all translation keys are actively used in the codebase:
PENDING_TASKS,MEN_HOURS,MEMBERS_WORKEDin timesheet pageCOLLAPSE_COLUMN,EDIT_STATUSin Kanban componentSUBSCRIBE_NEWSLETTER,OPT_IN_UPDATESin sidebar opt-in formVIEW_PROJECT,SHARE_PROJECT,DELETE_PROJECTin nav-projects componentSHOW_MOREin task progress blockADD_TIME_ENTRYin AddTaskModal component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the new translation keys are used in the components
# mentioned in the AI summary.
# Search for translation key usage in components
echo "Checking translation key usage in components..."
rg -l "common\.(PENDING_TASKS|SHOW_MORE|MEN_HOURS|MEMBERS_WORKED|COLLAPSE_COLUMN|EDIT_STATUS|ADD_TIME_ENTRY|OPT_IN_UPDATES|SUBSCRIBE_NEWSLETTER|VIEW_PROJECT|SHARE_PROJECT|DELETE_PROJECT)" --type tsx
Length of output: 333
Script:
#!/bin/bash
# Let's try a different approach by searching for these translation keys
# without specifying the file type, as the extension might be different
echo "Searching for translation key usage..."
rg "common\.(PENDING_TASKS|SHOW_MORE|MEN_HOURS|MEMBERS_WORKED|COLLAPSE_COLUMN|EDIT_STATUS|ADD_TIME_ENTRY|OPT_IN_UPDATES|SUBSCRIBE_NEWSLETTER|VIEW_PROJECT|SHARE_PROJECT|DELETE_PROJECT)" -A 1
# Also search for potential usage without 'common.' prefix
echo -e "\nSearching for direct key usage..."
rg "'(PENDING_TASKS|SHOW_MORE|MEN_HOURS|MEMBERS_WORKED|COLLAPSE_COLUMN|EDIT_STATUS|ADD_TIME_ENTRY|OPT_IN_UPDATES|SUBSCRIBE_NEWSLETTER|VIEW_PROJECT|SHARE_PROJECT|DELETE_PROJECT)'" -A 1
Length of output: 3050
apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
Show resolved
Hide resolved
Description
Please include a summary of the changes and the related issue.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of previous status
Current screenshots
Please add here videos or images of previous status
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Chores