Missing i18n Translation Keys Causing UI Inconsistencies

[rajku-dev]

Describe the bug
Several translation keys used in the t function throughout the codebase are missing from the en.json file. This results in inconsistencies in the UI, where untranslated strings may appear instead of the expected localized text.

Example

Expected behavior
All translation keys used in the codebase should have corresponding values in en.json to ensure a consistent and fully localized UI.

Click here to reproduce

Desktop (please complete the following information):

• Windows 11
• Chrome Version 132.0.6834.160

[rajku-dev]

If valid, I would like to take this issue up,
I have made most changes

[rithviknishad]

@rajku-dev can we add a lint rule to error out if there are missing i18n translations? so that the build fails if key is not found.

[rajku-dev]

@rajku-dev can we add a lint rule to error out if there are missing i18n translations? so that the build fails if key is not found.

got it!
i found a plugin for that
https://www.npmjs.com/package/eslint-plugin-i18next-no-undefined-translation-keys

[AdityaJ2305]

@rajku-dev , I think there is already a plugin configured for i18 in eslint config file and missing translation as warning. Could you check with that . I am not 100% sure btw

[rajku-dev]

@rajku-dev , I think there is already a plugin configured for i18 in eslint config file and missing translation as warning. Could you check with that . I am not 100% sure btw

yeah but i think it doesn't offer that particular check we need?

[rithviknishad]

why not? all i had to do was change from warn to error, and it converts those warnings to errors

[AdityaJ2305]

why not? all i had to do was change from warn to error, and it converts those warnings to errors

Exactly 💯

[rithviknishad]

one additional thing pending would be to get incorrect key usages. t('a_key_that_does_not_exist') should also throw an error ideally.

[rajku-dev]

We can definitely track the errors like that but,

these errors are for the "hardcoded-strings"
it is not including the translation keys that are undefined in en.json

Refer : https://www.npmjs.com/package/eslint-plugin-i18next

1. without undefined check - only hardcode string errors - count 1429

2. with undefined check - include undefined keys errors - count 1453 (24 extra)

3. only undefined check - count 24

24 undefined strings output using a script

to solve the issue before build we should be doing the third check only right, because first check has no significance because it is also checking for hardcode strings inside className, variant, size, href etc.

so should we use the no-undefined-translation-keys plugin or both? @rithviknishad