typescript.react.portability.i18next.jsx-label-not-i18n.jsx-label-not-i18n
semgrep
Author
unknown
Download Count*
License
JSX Component label not internationalized: '$MESSAGE'
Run Locally
Run in CI
Defintion
rules:
- id: jsx-label-not-i18n
patterns:
- pattern-either:
- pattern: <TextField ... label="$MESSAGE" ... />
- pattern: <Tab ... label="$MESSAGE" ... />
- metavariable-regex:
metavariable: $MESSAGE
regex: (.*[a-zA-Z]+.*)
- pattern-not: <$ELEMENT ... label="" ... />
- pattern-not: <$ELEMENT ... label={t($KEY, ...)} ... />
message: "JSX Component label not internationalized: '$MESSAGE'"
languages:
- typescript
- javascript
severity: WARNING
metadata:
category: portability
technology:
- react
- mui
- i18next
references:
- https://www.notion.so/hendyirawan/Internationalization-Localization-Policy-318c21674e5f44c48d6f136a6eb2e024
- https://mui.com/
- https://react.i18next.com/
license: Commons Clause License Condition v1.0[LGPL-2.1-only]
Examples
jsx-label-not-i18n.tsx
// ruleid: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label="Add extra amount"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ruleid: jsx-label-not-i18n
return <Tab label="Organization" value="1" />;
// ok: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label={t('extra-amount')}
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label=""
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label="13"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label="13200.34"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok
return <TextField
id="outlined-basic"
label="13200,34"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok
return <TextField
id="outlined-basic"
label="13200-34"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok: jsx-label-not-i18n
return <TextField
id="outlined-basic"
label="14%"
variant="outlined"
sx={{ width: '100%' }}
value={text}
onChange={e => setText(e.target.value)}
/>;
// ok: jsx-label-not-i18n
return <Tab label={t('fundraising.organization')} value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="" value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="123" value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="123.50" value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="123,50" value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="123-50" value="1" />;
// ok: jsx-label-not-i18n
return <Tab label="123%" value="1" />;
Short Link: https://sg.run/6kv6