mirror of https://github.com/grafana/grafana
I18n: Move eslint rule to package (#105860)
Tom Ratcliffe
4 weeks ago
committed by
GitHub
parent
1de0cd5d68
commit
abb885c585
@ -0,0 +1,185 @@ |
||||
# Grafana Internationalization ESLint Rules |
||||
|
||||
This package also contains custom i18n eslint rules for use within the Grafana codebase and plugins. |
||||
|
||||
## Rules |
||||
|
||||
### `no-untranslated-strings` |
||||
|
||||
Check if strings are marked for translation inside JSX Elements, in certain JSX props, and in certain object properties. |
||||
|
||||
### Options |
||||
|
||||
#### `forceFix` |
||||
|
||||
Allows specifying directories that, if the file is present within, then the rule will automatically fix the errors. This is primarily a workaround to allow for automatic mark up of new violations as the rule evolves. |
||||
|
||||
#### Example: |
||||
|
||||
```ts |
||||
{ |
||||
'@grafana/i18n/no-untranslated-strings': ['error', { forceFix: ['app/features/some-feature'] }], |
||||
} |
||||
``` |
||||
|
||||
#### `calleesToIgnore` |
||||
|
||||
Allows specifying regexes for methods that should be ignored when checking if object properties are untranslated. |
||||
|
||||
This is particularly useful to exclude references to properties such as `label` inside `css()` calls. |
||||
|
||||
#### Example: |
||||
|
||||
```ts |
||||
{ |
||||
'@grafana/i18n/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$'] }], |
||||
} |
||||
|
||||
// The below would not be reported as an error |
||||
const foo = css({ |
||||
label: 'test', |
||||
}); |
||||
|
||||
// The below would still be reported as an error |
||||
const bar = { |
||||
label: 'test', |
||||
}; |
||||
``` |
||||
|
||||
#### JSXText |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
<InlineToast placement="top" referenceElement={buttonRef.current}> |
||||
Copied |
||||
</InlineToast> |
||||
|
||||
// Good ✅ |
||||
<InlineToast placement="top" referenceElement={buttonRef.current}> |
||||
<Trans i18nKey="clipboard-button.inline-toast.success">Copied</Trans> |
||||
</InlineToast> |
||||
``` |
||||
|
||||
#### JSXAttributes |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
<div title="foo bar" /> |
||||
|
||||
// Good ✅ |
||||
<div title={t('some.key.foo-bar', 'foo bar')} /> |
||||
``` |
||||
|
||||
#### Object properties |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
const someConfig = { |
||||
label: 'Some label', |
||||
}; |
||||
|
||||
// Good ✅ |
||||
const getSomeConfig = () => ({ |
||||
label: t('some.key.label', 'Some label'), |
||||
}); |
||||
``` |
||||
|
||||
#### Passing variables to translations |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
const SearchTitle = ({ term }) => <div>Results for {term}</div>; |
||||
|
||||
// Good ✅ |
||||
const SearchTitle = ({ term }) => <Trans i18nKey="search-page.results-title">Results for {{ term }}</Trans>; |
||||
|
||||
// Good ✅ (if you need to interpolate variables inside nested components) |
||||
const SearchTerm = ({ term }) => <Text color="success">{term}</Text>; |
||||
const SearchTitle = ({ term }) => ( |
||||
<Trans i18nKey="search-page.results-title"> |
||||
Results for <SearchTerm term={term} /> |
||||
</Trans> |
||||
); |
||||
|
||||
// Good ✅ (if you need to interpolate variables and additional translated strings inside nested components) |
||||
const SearchTitle = ({ term }) => ( |
||||
<Trans i18nKey="search-page.results-title" values={{ myVariable: term }}> |
||||
Results for <Text color="success">{'{{ myVariable }}'} and this translated text is also in green</Text> |
||||
</Trans> |
||||
); |
||||
``` |
||||
|
||||
#### How to translate props or attributes |
||||
|
||||
This rule checks if a string is wrapped up by the `Trans` tag, or if certain props contain untranslated strings. |
||||
We ask for such props to be translated with the `t()` function. |
||||
|
||||
The below props are checked for untranslated strings: |
||||
|
||||
- `label` |
||||
- `description` |
||||
- `placeholder` |
||||
- `aria-label` |
||||
- `title` |
||||
- `subTitle` |
||||
- `text` |
||||
- `tooltip` |
||||
- `message` |
||||
- `name` |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
<input type="value" placeholder={'Username'} />; |
||||
|
||||
// Good ✅ |
||||
const placeholder = t('form.username-placeholder', 'Username'); |
||||
return <input type="value" placeholder={placeholder} />; |
||||
``` |
||||
|
||||
Check more info about how translations work in Grafana in [Internationalization.md](https://github.com/grafana/grafana/blob/main/contribute/internationalization.md) |
||||
|
||||
### `no-translation-top-level` |
||||
|
||||
Ensure that `t()` translation method is not used at the top level of a file, outside of a component of method. |
||||
This is to prevent calling the translation method before it's been instantiated. |
||||
|
||||
This does not cause an error if a file is lazily loaded, but refactors can cause errors, and it can cause problems in tests. |
||||
|
||||
```tsx |
||||
// Bad ❌ |
||||
const someTranslatedText = t('some.key', 'Some text'); |
||||
const SomeComponent = () => { |
||||
return <div title={someTranslatedText} />; |
||||
}; |
||||
|
||||
// Good ✅ |
||||
const SomeComponent = () => { |
||||
const someTranslatedText = t('some.key', 'Some text'); |
||||
return <div title={someTranslatedText} />; |
||||
}; |
||||
|
||||
// Bad ❌ |
||||
const someConfigThatHasToBeShared = [{ foo: t('some.key', 'Some text') }]; |
||||
const SomeComponent = () => { |
||||
return ( |
||||
<div> |
||||
{someConfigThatHasToBeShared.map((cfg) => { |
||||
return <div>{cfg.foo}</div>; |
||||
})} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
// Good ✅ |
||||
const getSomeConfigThatHasToBeShared = () => [{ foo: t('some.key', 'Some text') }]; |
||||
const SomeComponent = () => { |
||||
const configs = getSomeConfigThatHasToBeShared(); |
||||
return ( |
||||
<div> |
||||
{configs.map((cfg) => { |
||||
return <div>{cfg.foo}</div>; |
||||
})} |
||||
</div> |
||||
); |
||||
}; |
||||
``` |
||||
@ -0,0 +1,9 @@ |
||||
const noUntranslatedStrings = require('./no-untranslated-strings/no-untranslated-strings.cjs'); |
||||
const noTranslationTopLevel = require('./no-translation-top-level/no-translation-top-level.cjs'); |
||||
|
||||
module.exports = { |
||||
rules: { |
||||
'no-untranslated-strings': noUntranslatedStrings, |
||||
'no-translation-top-level': noTranslationTopLevel, |
||||
}, |
||||
}; |
||||
Loading…
Reference in new issue