feat: add lingui/no-unlocalized-strings ESLint rule and fix translations (#16610)
## Summary
This PR adds the `lingui/no-unlocalized-strings` ESLint rule to detect
untranslated strings and fixes translation issues across multiple
components.
## Changes
### ESLint Configuration (`eslint.config.react.mjs`)
- Added comprehensive `ignore` patterns for non-translatable strings
(CSS values, HTML attributes, technical identifiers)
- Added `ignoreNames` for props that don't need translation (className,
data-*, aria-*, etc.)
- Added `ignoreFunctions` for console methods, URL APIs, and other
non-user-facing functions
- Disabled rule for debug files, storybook, and test files
### Components Fixed (~19 files)
- Object record components (field inputs, pickers, merge dialogs)
- Settings components (accounts, admin panel)
- Serverless function components
- Record table and title cell components
## Status
🚧 **Work in Progress** - ~124 files remaining to fix
This PR is being submitted as draft to allow progressive fixing of
remaining translation issues.
## Testing
- Run `npx eslint "src/**/*.tsx"` in `packages/twenty-front` to check
remaining issues
This commit is contained in:
+2
-1
@@ -2,6 +2,7 @@ import { InformationBannerComponentInstanceContext } from '@/information-banner/
|
||||
import { informationBannerIsOpenComponentState } from '@/information-banner/states/informationBannerIsOpenComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import styled from '@emotion/styled';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import {
|
||||
Banner,
|
||||
type BannerVariant,
|
||||
@@ -83,7 +84,7 @@ export const InformationBanner = ({
|
||||
size="small"
|
||||
variant="tertiary"
|
||||
onClick={onClose}
|
||||
ariaLabel="Close banner"
|
||||
ariaLabel={t`Close banner`}
|
||||
/>
|
||||
)}
|
||||
</Banner>
|
||||
|
||||
+3
-2
@@ -1,6 +1,7 @@
|
||||
import { InformationBanner } from '@/information-banner/components/InformationBanner';
|
||||
import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
|
||||
import styled from '@emotion/styled';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { IconRefresh } from 'twenty-ui/display';
|
||||
|
||||
const StyledInformationBannerDeletedRecord = styled.div`
|
||||
@@ -28,8 +29,8 @@ export const InformationBannerDeletedRecord = ({
|
||||
<InformationBanner
|
||||
componentInstanceId="information-banner-deleted-record"
|
||||
variant="danger"
|
||||
message={`This record has been deleted`}
|
||||
buttonTitle="Restore"
|
||||
message={t`This record has been deleted`}
|
||||
buttonTitle={t`Restore`}
|
||||
buttonIcon={IconRefresh}
|
||||
buttonOnClick={() => restoreManyRecords({ idsToRestore: [recordId] })}
|
||||
/>
|
||||
|
||||
+5
-2
@@ -3,6 +3,7 @@ import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToRe
|
||||
import { useDismissReconnectAccountBanner } from '@/information-banner/hooks/useDismissReconnectAccountBanner';
|
||||
import { InformationBannerKeys } from '@/information-banner/types/InformationBannerKeys';
|
||||
import { useTriggerProviderReconnect } from '@/settings/accounts/hooks/useTriggerProviderReconnect';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { IconRefresh } from 'twenty-ui/display';
|
||||
|
||||
const COMPONENT_INSTANCE_ID =
|
||||
@@ -26,11 +27,13 @@ export const InformationBannerReconnectAccountEmailAliases = () => {
|
||||
await dismissReconnectAccountBanner(accountToReconnect.id);
|
||||
};
|
||||
|
||||
const mailboxHandle = accountToReconnect.handle;
|
||||
|
||||
return (
|
||||
<InformationBanner
|
||||
componentInstanceId={COMPONENT_INSTANCE_ID}
|
||||
message={`Please reconnect your mailbox ${accountToReconnect.handle} to update your email aliases:`}
|
||||
buttonTitle="Reconnect"
|
||||
message={t`Please reconnect your mailbox ${mailboxHandle} to update your email aliases:`}
|
||||
buttonTitle={t`Reconnect`}
|
||||
buttonIcon={IconRefresh}
|
||||
buttonOnClick={() =>
|
||||
triggerProviderReconnect(
|
||||
|
||||
+5
-3
@@ -3,6 +3,7 @@ import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToRe
|
||||
import { useDismissReconnectAccountBanner } from '@/information-banner/hooks/useDismissReconnectAccountBanner';
|
||||
import { InformationBannerKeys } from '@/information-banner/types/InformationBannerKeys';
|
||||
import { useTriggerProviderReconnect } from '@/settings/accounts/hooks/useTriggerProviderReconnect';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { IconRefresh } from 'twenty-ui/display';
|
||||
|
||||
const COMPONENT_INSTANCE_ID =
|
||||
@@ -26,12 +27,13 @@ export const InformationBannerReconnectAccountInsufficientPermissions = () => {
|
||||
await dismissReconnectAccountBanner(accountToReconnect.id);
|
||||
};
|
||||
|
||||
const mailboxHandle = accountToReconnect.handle;
|
||||
|
||||
return (
|
||||
<InformationBanner
|
||||
componentInstanceId={COMPONENT_INSTANCE_ID}
|
||||
message={`Sync lost with mailbox ${accountToReconnect.handle}. Please
|
||||
reconnect for updates:`}
|
||||
buttonTitle="Reconnect"
|
||||
message={t`Sync lost with mailbox ${mailboxHandle}. Please reconnect for updates:`}
|
||||
buttonTitle={t`Reconnect`}
|
||||
buttonIcon={IconRefresh}
|
||||
buttonOnClick={() =>
|
||||
triggerProviderReconnect(
|
||||
|
||||
Reference in New Issue
Block a user