[Feat(i18n)]: add translations for productivity table #3617
Conversation
- Add new translation keys for productivity table headers and messages - Implement translations in ProductivityTable component - Add translations in all supported languages (ar, bg, de, en, es, fr, he, it, nl, pl, pt, ru, zh) - Improve UI by making progress bar full width - Replace hardcoded English text with translation keys
WalkthroughThis pull request integrates internationalization support in the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant PT as ProductivityTable
participant TT as useTranslations (next-intl)
participant L as Localization File
U->>PT: Load dashboard
PT->>TT: Request localized strings
TT->>L: Fetch translation keys for current locale
L-->>TT: Return translation data
TT-->>PT: Provide localized strings
PT->>U: Render table with dynamic text and full-width loader
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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/hooks/features/useReportActivity.tsOops! 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. ✨ Finishing Touches
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 (
|
Innocent-Akim
changed the title
![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
🔭 Outside diff range comments (1)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx (1)
106-107: 🛠️ Refactor suggestionHardcoded English text needs translation.
The message "No activities recorded for this day" should use a translation key for consistency.
Apply this diff to fix the hardcoded text:
- No activities recorded for this day + {t('common.NO_ACTIVITIES_RECORDED')}
🧹 Nitpick comments (2)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx (1)
141-141: Hardcoded project name needs dynamic value.The project name "Ever Teams" is hardcoded. Consider making it dynamic based on the actual project.
Apply this diff to make the project name dynamic:
- <TableCell>Ever Teams</TableCell> + <TableCell>{project?.name || t('common.DEFAULT_PROJECT_NAME')}</TableCell>apps/web/locales/nl.json (1)
22-26: New Dutch Translation Keys Added – Minor Grammar Nitpick
The keys"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"have been added appropriately to the"common"section. The Dutch translations are well aligned with the PR objectives. As a minor note, consider revising the phrase in"SELECT_DIFFERENT_DATE"from"Selecteer een andere datumbereik of probeer later opnieuw"to
"Selecteer een ander datumbereik of probeer later opnieuw"to better match the neuter noun "datumbereik."
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx(6 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.
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (17)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx (5)
10-10: LGTM! Proper i18n setup.The useTranslations hook is correctly imported and initialized.
Also applies to: 20-20
27-31: LGTM! Consistent translation key usage in loading state.The table headers in the loading state correctly use translation keys from common and sidebar namespaces.
59-60: LGTM! Clear no-data messaging with translations.The no-data state messages are properly internationalized using appropriate translation keys.
71-75: LGTM! Consistent translation key usage in data view.The table headers in the data view match the loading state translations, maintaining consistency.
46-46:❓ Verification inconclusive
Consider the impact of full-width skeleton.
The skeleton loader width change from w-24 to w-full might cause layout shifts. Ensure this matches the actual content width.
Run this script to check the actual content width in the codebase:
🏁 Script executed:
#!/bin/bash # Search for width-related classes in the component rg -A 2 'w-\d+|w-full' apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsxLength of output: 962
Review: Verify Full-Width Skeleton Consistency
It appears that most table cells in this component use fixed-width skeletons (e.g.,
w-24orw-16), while one cell still uses a full-width skeleton (w-full). This discrepancy may lead to layout shifts if the actual content does not span the full width. Please ensure that the full-width skeleton is intentional—if the cell’s content should not be full width, adjust the skeleton width accordingly for consistency.
- Confirm that the intended content width in this table cell aligns with using
w-full.- If not, consider using a fixed width that matches the other cells to prevent layout shifts.
apps/web/locales/zh.json (1)
22-26: LGTM! Accurate Chinese translations.The new translations are semantically correct and maintain consistency with the existing translations.
apps/web/locales/he.json (1)
22-26: LGTM! Accurate Hebrew translations.The new translations are semantically correct and maintain consistency with the existing translations.
apps/web/locales/ar.json (1)
4-8: New Arabic Translation Keys Added
The new keys for"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"have been correctly inserted into the"common"block. The Arabic translations accurately reflect the intended meanings and align with the PR objectives to support the productivity table's internationalization.apps/web/locales/en.json (1)
22-26: New English Translation Keys Added
The addition of the keys"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"in the"common"section is implemented correctly. The English values are clear and consistent with the intended changes for replacing hardcoded strings, ensuring dynamic rendering in the ProductivityTable component.apps/web/locales/bg.json (1)
22-26: New Bulgarian Translation Keys Added
The five translation keys ("APPLICATION", "TIME_SPENT", "PERCENT_USED", "NO_ACTIVITY_DATA", and "SELECT_DIFFERENT_DATE") have been correctly added in the "common" section. Please verify that the translations reflect the intended tone and context used in similar locales across the application.apps/web/locales/pl.json (1)
22-26: Polish Localization Enhancements
The new keys for Polish—"APPLICATION": "Aplikacja", "TIME_SPENT": "Czas spędzony", "PERCENT_USED": "Procent wykorzystany", "NO_ACTIVITY_DATA": "Brak dostępnych danych o aktywności", and "SELECT_DIFFERENT_DATE": "Wybierz inny zakres dat lub sprawdź później"—are added appropriately in the "common" section. Ensure these translations are consistent with terminology used elsewhere in the product.apps/web/locales/it.json (1)
22-26: Italian Translation Keys Addition
The new Italian entries ("APPLICATION", "TIME_SPENT", "PERCENT_USED", "NO_ACTIVITY_DATA", and "SELECT_DIFFERENT_DATE") have been incorporated correctly into the "common" section with accurate translations. Please double-check that these strings align with the product’s style guidelines and the context provided by components such as the ProductivityTable.apps/web/locales/ru.json (1)
22-26: Translation Keys Addition Verified
The new keys in the"common"section (i.e."APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE") have been correctly added with intuitive Russian translations. They are consistent with the overall i18n strategy.apps/web/locales/pt.json (1)
22-26: Portuguese Translation Keys Added
The five new keys have been properly inserted in the"common"section using precise Portuguese translations. The wording aligns well with the intended meanings and mirrors the updates made across other locale files.apps/web/locales/es.json (1)
22-26: Spanish Translation Keys Addition Checked
The additions of"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"in the"common"section are correctly translated and consistent with similar updates in other localization files (ar, bg, de, en, fr, he, it, nl, pl, pt, ru, zh). This ensures a uniform i18n experience across the application.apps/web/locales/de.json (1)
22-26: New German Translation Keys Added.
The new keys"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"have been correctly added to the"common"section with appropriate German translations. These entries are in line with the updated internationalization requirements for the ProductivityTable component and maintain the key naming consistency across locale files.apps/web/locales/fr.json (1)
22-26: New French Translation Keys Added.
The keys"APPLICATION","TIME_SPENT","PERCENT_USED","NO_ACTIVITY_DATA", and"SELECT_DIFFERENT_DATE"have been accurately integrated into the"common"section with proper French translations. These modifications ensure that the ProductivityTable component can dynamically render the French locale and maintain synchronicity with other language files across the application.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/hooks/features/useReportActivity.ts (1)
55-56: Consider using a more robust date formatting approach.While the current implementation works, consider using
toLocaleDateStringor a date formatting library to ensure consistent formatting across different locales, which would better align with the i18n focus of this PR.Example implementation:
- startDate: firstDayOfMonth.toISOString().split('T')[0], - endDate: lastDayOfMonth.toISOString().split('T')[0], + startDate: firstDayOfMonth.toLocaleDateString('en-CA'), // en-CA produces YYYY-MM-DD format + endDate: lastDayOfMonth.toLocaleDateString('en-CA'),Or using a date formatting library like
date-fns:+import { format } from 'date-fns'; + - startDate: firstDayOfMonth.toISOString().split('T')[0], - endDate: lastDayOfMonth.toISOString().split('T')[0], + startDate: format(firstDayOfMonth, 'yyyy-MM-dd'), + endDate: format(lastDayOfMonth, 'yyyy-MM-dd'),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/app/hooks/features/useReportActivity.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (1)
apps/web/app/hooks/features/useReportActivity.ts (1)
36-38: LGTM! Clean implementation of month boundaries.The implementation uses a reliable technique to calculate the first and last day of the current month.
Description
Please include a summary of the changes and the related issues.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of the previous status
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit
New Features
Style