chore: ln support modules constants #6428
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request introduces significant internationalization (i18n) enhancements across various components and files. The changes focus on updating module-related components to support dynamic translation of labels, statuses, and layout options. Modifications include adding new export statements, integrating the Changes
Sequence DiagramsequenceDiagram
participant User
participant Component
participant TranslationHook
participant TranslationFile
User->>Component: Interact with module
Component->>TranslationHook: Request translation
TranslationHook->>TranslationFile: Fetch translation key
TranslationFile-->>TranslationHook: Return translated text
TranslationHook-->>Component: Provide translated label
Component->>User: Display localized content
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: 3
🔭 Outside diff range comments (1)
web/core/components/modules/dropdowns/order-by.tsx (1)
Line range hint
62-77: Add translation for sort order labelsThe "Ascending" and "Descending" strings should be translated for consistency with other labels.
- Ascending + {t("common.sort_order.ascending")} - Descending + {t("common.sort_order.descending")}
🧹 Nitpick comments (5)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx (1)
Line range hint
31-32: Use strict equality comparison.Replace loose equality (
==) with strict equality (===) for type-safe comparisons.- if (layout.key == "gantt") return; + if (layout.key === "gantt") return;web/core/components/modules/module-status-dropdown.tsx (1)
33-33: Improve operator precedence clarityThe parentheses grouping could be clearer. Consider restructuring for better readability:
- {(moduleStatus && t(moduleStatus?.label)) ?? t("project_modules.status.backlog")} + {moduleStatus ? t(moduleStatus.label) : t("project_modules.status.backlog")}web/core/components/modules/select/status.tsx (1)
40-42: Simplify conditional renderingThe nested ternary with optional chaining could be simplified for better readability:
- {(selectedValue && t(selectedValue?.label)) ?? ( - <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span> - )} + {selectedValue ? t(selectedValue.label) : ( + <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span> + )}web/core/components/modules/sidebar-select/select-status.tsx (1)
41-42: Simplify color styling logicThe find operation could be stored in a variable to avoid repetition and improve readability.
+ const selectedStatus = MODULE_STATUS?.find((option) => option.value === value); <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ - backgroundColor: MODULE_STATUS?.find((option) => option.value === value)?.color, + backgroundColor: selectedStatus?.color, }} />packages/i18n/src/locales/en/translations.json (1)
320-342: LGTM! Well-structured translation keys for module-related content.The translation structure is well-organized and follows a logical hierarchy. The translations are clear and match the keys used in the constants.
However, consider adding descriptions or context for translators to better understand where and how these strings are used.
Add translator comments like this:
"project_modules": { + // @context: These are the different states a project module can be in "status": { "backlog": "Backlog", "planned": "Planned",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
packages/constants/src/index.ts(1 hunks)packages/constants/src/module.ts(2 hunks)packages/i18n/src/locales/en/translations.json(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx(2 hunks)web/core/components/modules/analytics-sidebar/root.tsx(5 hunks)web/core/components/modules/applied-filters/status.tsx(3 hunks)web/core/components/modules/dropdowns/filters/status.tsx(3 hunks)web/core/components/modules/dropdowns/order-by.tsx(4 hunks)web/core/components/modules/gantt-chart/blocks.tsx(1 hunks)web/core/components/modules/module-card-item.tsx(1 hunks)web/core/components/modules/module-list-item-action.tsx(1 hunks)web/core/components/modules/module-status-dropdown.tsx(1 hunks)web/core/components/modules/module-view-header.tsx(4 hunks)web/core/components/modules/select/status.tsx(2 hunks)web/core/components/modules/sidebar-select/select-status.tsx(2 hunks)web/core/components/stickies/layout/stickies-list.tsx(1 hunks)web/core/constants/empty-state.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- web/core/constants/empty-state.tsx
- web/core/components/stickies/layout/stickies-list.tsx
🔇 Additional comments (13)
packages/constants/src/index.ts (1)
17-17: LGTM! Clean addition of module exports.The new export maintains the file's alphabetical ordering pattern and follows the established re-export structure.
web/core/components/modules/applied-filters/status.tsx (1)
6-7: Add fallback for missing translation keys.The translation implementation looks good, but consider adding a fallback for missing translation keys to prevent displaying raw keys to users.
- {t(statusDetails.label)} + {t(statusDetails.label, { defaultValue: statusDetails.label })}Let's verify that all status label translation keys exist:
Also applies to: 19-19, 30-30
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx (1)
40-40: Add fallback for missing translation keys.Consider adding a fallback for missing translation keys:
- <div className="text-custom-text-300">{t(layout.title)}</div> + <div className="text-custom-text-300">{t(layout.title, { defaultValue: layout.title })}</div>Let's verify that all layout title translation keys exist:
web/core/components/modules/gantt-chart/blocks.tsx (1)
7-7: LGTM! Import path updated correctly.The change to import MODULE_STATUS from @plane/constants aligns with the centralization of constants.
web/core/components/modules/module-list-item-action.tsx (1)
9-9: LGTM! Import path updated correctly.The change to import MODULE_STATUS from @plane/constants maintains consistency with the centralized constants approach.
web/core/components/modules/module-view-header.tsx (1)
8-8: LGTM! Import updates and i18n integration look good.The changes successfully:
- Update the import path for MODULE_VIEW_LAYOUTS
- Add i18n support for layout titles in tooltips
Also applies to: 11-11, 47-47, 169-169
web/core/components/modules/module-card-item.tsx (1)
9-9: LGTM! Import statement updated correctly.The change properly imports both MODULE_STATUS and PROGRESS_STATE_GROUPS_DETAILS from @plane/constants, maintaining consistency with the centralized constants approach.
web/core/components/modules/analytics-sidebar/root.tsx (2)
21-22: LGTM! Import changes for i18n support.The imports are correctly updated to use the centralized constants and i18n packages.
89-89: LGTM! Proper implementation of translations.The translation hook is correctly initialized and used to translate module status labels.
Also applies to: 379-379, 392-392
packages/constants/src/module.ts (4)
3-7: LGTM! Improved type imports organization.The type imports are now properly organized for better readability.
17-17: LGTM! Consistent translation keys for module statuses.The status labels are correctly updated to use translation keys that match the structure in translations.json.
Also applies to: 24-24, 31-31, 38-38, 45-45, 52-52
60-64: LGTM! Layout titles updated for i18n support.The layout titles are properly updated to use translation keys.
Also applies to: 68-68, 73-73, 78-78
82-85: LGTM! Order by options updated for i18n support.The order by options are correctly updated to use translation keys.
Also applies to: 88-88, 92-92, 96-96, 100-100, 104-104, 108-108
| import { MODULE_STATUS } from "@plane/constants"; | ||
| import { useTranslation } from "@plane/i18n"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Translate "No matches found" message.
For consistency, the "No matches found" message should also be translated.
- <p className="text-xs italic text-custom-text-400">No matches found</p>
+ <p className="text-xs italic text-custom-text-400">{t("no_matches_found")}</p>Also, consider adding a fallback for missing translation keys:
- title={t(status.label)}
+ title={t(status.label, { defaultValue: status.label })}Also applies to: 22-22, 43-43, 46-46
| import { MODULE_VIEW_LAYOUTS } from "@plane/constants"; | ||
| import { useTranslation } from "@plane/i18n"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Translate "Layout" text.
For consistency, the "Layout" text should also be translated.
- <span>Layout</span>
+ <span>{t("layout")}</span>Also applies to: 13-13, 23-23
| backgroundColor: MODULE_STATUS?.find((option) => option.value === value)?.color, | ||
| }} | ||
| /> | ||
| {watch("status")} |
There was a problem hiding this comment.
Fix status label translation
The status value is being displayed directly without translation. This should use the translated label from MODULE_STATUS.
- {watch("status")}
+ {value ? t(MODULE_STATUS.find((option) => option.value === value)?.label ?? "") : "Status"}Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
web/core/components/modules/dropdowns/filters/status.tsx (1)
43-46: 🛠️ Refactor suggestionComplete the internationalization implementation.
The "No matches found" message is still hardcoded and translation keys lack fallbacks.
- title={t(status.i18n_label)} + title={t(status.i18n_label, { defaultValue: status.value })} )) ) : ( - <p className="text-xs italic text-custom-text-400">No matches found</p> + <p className="text-xs italic text-custom-text-400"> + {t("common.no_matches_found", { defaultValue: "No matches found" })} + </p>
🧹 Nitpick comments (2)
web/core/components/modules/module-layout-icon.tsx (1)
14-38: Consider performance optimization opportunities.The component could benefit from:
- Adding prop validation for the
sizeprop to ensure positive numbers- Memoizing the component to prevent unnecessary re-renders
-export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => { +export const ModuleLayoutIcon: React.FC<ILayoutIcon> = React.memo((props) => { const { layoutType, className = "", containerClassName = "", size = 14, withContainer = false } = props; + + if (size <= 0) { + console.warn('ModuleLayoutIcon: size prop must be positive'); + return null; + } // rest of the implementation... -}; +}); + +ModuleLayoutIcon.displayName = 'ModuleLayoutIcon';packages/constants/src/module.ts (1)
65-73: Consider more specific translation keys for layouts.The layout translation keys could be more specific to differentiate between title and description.
- i18n_title: "project_modules.layout.list", + i18n_title: "project_modules.layout.list.title", - i18n_title: "project_modules.layout.board", + i18n_title: "project_modules.layout.board.title", - i18n_title: "project_modules.layout.timeline", + i18n_title: "project_modules.layout.timeline.title",This change would allow for adding descriptions later without key conflicts:
// Future addition example: i18n_description: "project_modules.layout.list.description"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
packages/constants/src/module.ts(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx(2 hunks)web/core/components/modules/analytics-sidebar/root.tsx(5 hunks)web/core/components/modules/applied-filters/status.tsx(3 hunks)web/core/components/modules/dropdowns/filters/status.tsx(3 hunks)web/core/components/modules/dropdowns/order-by.tsx(4 hunks)web/core/components/modules/index.ts(1 hunks)web/core/components/modules/module-layout-icon.tsx(1 hunks)web/core/components/modules/module-status-dropdown.tsx(1 hunks)web/core/components/modules/module-view-header.tsx(5 hunks)web/core/components/modules/select/status.tsx(2 hunks)web/core/components/modules/sidebar-select/select-status.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- web/core/components/modules/module-status-dropdown.tsx
- web/core/components/modules/select/status.tsx
- web/core/components/modules/analytics-sidebar/root.tsx
- web/core/components/modules/module-view-header.tsx
- web/core/components/modules/sidebar-select/select-status.tsx
- web/core/components/modules/applied-filters/status.tsx
- web/core/components/modules/dropdowns/order-by.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: lint-admin
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (3)
web/core/components/modules/index.ts (1)
17-17: LGTM! Export statement follows existing pattern.The new export for module-layout-icon is correctly placed and maintains consistency with the existing export structure.
web/core/components/modules/module-layout-icon.tsx (1)
6-12: LGTM! Well-structured interface with clear prop types.The interface is well-defined with appropriate optional properties and type safety.
packages/constants/src/module.ts (1)
16-56: LGTM! Consistent i18n implementation for module statuses.The translation keys follow a clear hierarchical structure and maintain type safety while preserving the existing color schemes.
Description
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
Internationalization
Constants Refactoring
@plane/constantspackage.Localization
New Features
ModuleLayoutIconcomponent for flexible layout icon rendering.