ACM-35629 Enable i18next linting#6349
Conversation
…les for wizards and test files. This includes disabling the 'no-literal-string' rule for specific file patterns to improve localization handling. Generated-by: Cursor (Claude Opus 4.6 High) Signed-off-by: Kevin Cormier <kcormier@redhat.com>
- Introduced a new string `inputMustBeArray` in `StringContext` for localization. - Updated `WizItemSelector` to use the new string for error handling when input is not an array. - Added corresponding translation in `wizardStrings.ts`. This enhances user feedback for input validation in the wizard interface. Generated-by: Cursor (Claude Opus 4.6 High) Signed-off-by: Kevin Cormier <kcormier@redhat.com>
Assisted-by: Cursor (Claude Opus 4.6 High) Signed-off-by: Kevin Cormier <kcormier@redhat.com>
Generated-by: Cursor (Claude Opus 4.6 High) Signed-off-by: Kevin Cormier <kcormier@redhat.com>
Signed-off-by: Kevin Cormier <kcormier@redhat.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Enterprise Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds Changesi18next ESLint enforcement and component-wide string localization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
frontend/src/routes/Applications/Overview.tsx (1)
18-18: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winUse type-only import for
TFunction.Per coding guidelines, TypeScript types should use
import typesyntax to avoid runtime imports. SinceTFunctionis only used for type annotations (function parameter types), it should be imported as a type-only import.♻️ Proposed fix
-import { TFunction } from 'react-i18next' +import type { TFunction } from 'react-i18next'As per coding guidelines: "Use
import typesyntax to avoid runtime imports of TypeScript types" applies tofrontend/**/*.{ts,tsx}files.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/routes/Applications/Overview.tsx` at line 18, The import statement for TFunction from react-i18next is currently using a regular import syntax, but since TFunction is only used for type annotations (such as function parameter types) and not as a runtime value, it should be changed to a type-only import using the `import type` syntax. Update the import statement to use `import type` to follow the TypeScript coding guidelines and avoid unnecessary runtime imports.Source: Coding guidelines
frontend/src/routes/Governance/common/util.tsx (1)
4-4:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse
import typesyntax for theTFunctiontype.The
TFunctionimport should useimport typesyntax since it's only used for type annotations, not as a runtime value.📝 Suggested fix
-import { TFunction } from 'react-i18next' +import type { TFunction } from 'react-i18next'Based on learnings: In the stolostron/console frontend, when you need
TFunctionfor type-only usage (e.g., helper function signatures), import it directly fromreact-i18nextusing a type-only import:import type { TFunction } from 'react-i18next'. As per coding guidelines: Useimport typesyntax to avoid runtime imports of TypeScript types.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/routes/Governance/common/util.tsx` at line 4, The TFunction import from react-i18next is currently using regular import syntax but should use import type syntax since it is only used for type annotations in function signatures and not as a runtime value. Change the import statement for TFunction to use the type keyword before the curly braces to indicate this is a type-only import from react-i18next. This optimization helps with tree-shaking and makes the codebase alignment with TypeScript best practices.Sources: Coding guidelines, Learnings
frontend/src/lib/SimpleTimestamp.tsx (1)
18-26:⚠️ Potential issue | 🟡 MinorExternalize locale-specific strings and reconsider hardcoded 'en-US' locale.
The component hardcodes
'en-US'locale and embeds'PM'/'AM'strings directly, preventing adaptation to user locale. This contradicts the codebase pattern (seetable-row-helpers.ts) where other timestamp utilities usetoLocaleString()without specifying a locale, respecting browser defaults.Consider:
- Removing the hardcoded
'en-US'locale to use the user's browser locale, or- Externalizing the AM/PM strings via
t()calls for i18n consistency🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/lib/SimpleTimestamp.tsx` around lines 18 - 26, The SimpleTimestamp component hardcodes the 'en-US' locale in the toLocaleString call and embeds 'PM' and 'AM' strings directly, which prevents adaptation to the user's browser locale. Remove the hardcoded 'en-US' locale argument from the toLocaleString call to use the browser's default locale (matching the pattern used elsewhere in the codebase like table-row-helpers.ts), and externalize the 'PM' and 'AM' strings in the ampm variable assignment by wrapping them with i18n translation function calls (t()) instead of hardcoding them as string literals.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/packages/eslint-config/index.mjs`:
- Around line 162-163: The glob pattern `**/*.test.ts?` in the files array is
incorrect because the `?` wildcard matches exactly one optional character, which
means it only matches `.tsx` files and excludes plain `.ts` files. Fix this
pattern to properly match both `.ts` and `.tsx` test files by using the correct
glob syntax that captures both file extensions. The same issue exists on line
170 for story file patterns where `**/*.stories.ts?` also needs to be corrected
to include both `.ts` and `.tsx` files.
---
Outside diff comments:
In `@frontend/src/lib/SimpleTimestamp.tsx`:
- Around line 18-26: The SimpleTimestamp component hardcodes the 'en-US' locale
in the toLocaleString call and embeds 'PM' and 'AM' strings directly, which
prevents adaptation to the user's browser locale. Remove the hardcoded 'en-US'
locale argument from the toLocaleString call to use the browser's default locale
(matching the pattern used elsewhere in the codebase like table-row-helpers.ts),
and externalize the 'PM' and 'AM' strings in the ampm variable assignment by
wrapping them with i18n translation function calls (t()) instead of hardcoding
them as string literals.
In `@frontend/src/routes/Applications/Overview.tsx`:
- Line 18: The import statement for TFunction from react-i18next is currently
using a regular import syntax, but since TFunction is only used for type
annotations (such as function parameter types) and not as a runtime value, it
should be changed to a type-only import using the `import type` syntax. Update
the import statement to use `import type` to follow the TypeScript coding
guidelines and avoid unnecessary runtime imports.
In `@frontend/src/routes/Governance/common/util.tsx`:
- Line 4: The TFunction import from react-i18next is currently using regular
import syntax but should use import type syntax since it is only used for type
annotations in function signatures and not as a runtime value. Change the import
statement for TFunction to use the type keyword before the curly braces to
indicate this is a type-only import from react-i18next. This optimization helps
with tree-shaking and makes the codebase alignment with TypeScript best
practices.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: 1d4b889e-32cc-42b5-b74e-1f3927ba2e71
⛔ Files ignored due to path filters (3)
frontend/package-lock.jsonis excluded by!**/package-lock.jsonfrontend/public/locales/en/translation.jsonis excluded by!frontend/public/locales/**package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (29)
frontend/AGENTS.mdfrontend/packages/eslint-config/index.mjsfrontend/packages/eslint-config/package.jsonfrontend/packages/react-form-wizard/eslint.config.mjsfrontend/packages/react-form-wizard/src/contexts/StringContext.tsxfrontend/packages/react-form-wizard/src/inputs/WizItemSelector.tsxfrontend/src/App.tsxfrontend/src/lib/SimpleTimestamp.tsxfrontend/src/lib/wizardStrings.tsfrontend/src/routes/Applications/Overview.tsxfrontend/src/routes/Applications/components/DeleteResourceModal.tsxfrontend/src/routes/Governance/common/util.tsxfrontend/src/routes/Governance/discovered/DiscoveredPolicies.tsxfrontend/src/routes/Governance/discovered/details/DiscoveredPolicyDetailsPage.tsxfrontend/src/routes/Governance/policies/policy-details/PolicyTemplateDetail/PolicyTemplateDetails.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/LoginCredentials.tsxfrontend/src/routes/Infrastructure/InfraEnvironments/InfraEnvironmentsPage.tsxfrontend/src/routes/Search/Details/DetailsPage.tsxfrontend/src/routes/Search/components/Modals/SearchInfoModal.tsxfrontend/src/routes/UserManagement/Identities/ServiceAccounts/ServiceAccountDetail.tsxfrontend/src/routes/UserManagement/Identities/ServiceAccounts/ServiceAccountGroups.tsxfrontend/src/routes/UserManagement/Identities/ServiceAccounts/ServiceAccountRoleAssignments.tsxfrontend/src/routes/UserManagement/Identities/ServiceAccounts/ServiceAccountYaml.tsxfrontend/src/routes/UserManagement/Identities/ServiceAccounts/ServiceAccounts.tsxfrontend/src/ui-components/AcmErrorBoundary/AcmErrorBoundary.tsxfrontend/src/ui-components/IdentityStatus/IdentityStatus.tsxfrontend/src/wizards/Governance/Policy/PolicyWizard.tsxfrontend/src/wizards/RoleAssignment/ReviewStepContent.tsxpackage.json
Generated-by: Cursor (Claude Opus 4.6 High) Signed-off-by: Kevin Cormier <kcormier@redhat.com>
7aa2c9f to
e7c5e63
Compare
|
/test unit-tests-sonarcloud |
|
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: fxiang1, KevinFCormier The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |



📝 Summary
Ticket Summary (Title):
Add ESLint rule to flag hardcoded English strings in JSX
Ticket Link:
https://redhat.atlassian.net/browse/ACM-35629
Type of Change:
✅ Checklist
General
ACM-12340 Fix bug with...)Summary by CodeRabbit