Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[i18n][system upgrade] Change pseudolocale implementation #180244

Open
Bamieh opened this issue Apr 7, 2024 · 1 comment
Open

[i18n][system upgrade] Change pseudolocale implementation #180244

Bamieh opened this issue Apr 7, 2024 · 1 comment
Labels
Project:i18n Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc

Comments

@Bamieh
Copy link
Member

Bamieh commented Apr 7, 2024

With the i18n packages upgrade, our current pseudo locale implementation is very limited and has obvious drawbacks:

  1. Only en-xa is supported from the psuedo locale suite.
  2. Runtime check at the react Provider level checking if the language is en-xa
  3. Will break with the newly supported ICU syntax, needs to update the regexp

The new formatJS library support psuedo localization at 'compile' time. Where a new psuedo localized translation file is generated and supplied to kibana like other languages.
If we switch from switching alphabets at runtime to this static file we gain multiple benefits:

  1. Remove our custom implementation
  2. No more runtime check in production for a dev only feature.
  3. Support all ICU syntax supported by formatJS
  4. Supports all psuedo localizations:
locale description
xx-LS my name is {name}SSSSSSSSSSSSSSSSSSSSSSSSS
xx-AC MY NAME IS {name}
xx-HA [javascript]my name is {name}
en-XA [ḿẏ ƞȧȧḿḗḗ īş {name}]
en-XB ‮ɯʎ uɐɯǝ ıs {name}

The new work flow runs as follows:

  1. Extract pseudo localized version of the code by running: node scripts/i18n_pseudo --pseudo-locale <pseudoLocale>
  2. Running kibana with the created pseudo locale yarn start --i18n.locale="en-xa"

Note that the extracted psuedo locales are git ignored and must be generated when needed, this is to guarantee that we are have full messages coverage everytime.

We can also run this script when yarn start is called and the locale is set to a pseudo locale so people who need this will not need to run the new extra step.

@Bamieh Bamieh added Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc Project:i18n labels Apr 7, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-core (Team:Core)

Bamieh added a commit that referenced this issue Jun 2, 2024
## Summary

Upgrading intl packages from v2 to v6

### Packages upgrade:

- [x] Add @formatjs packages
- [x] `react-intl` Upgraded
- [x] `intl-messageformat` Upgraded
- [x] `intl-format-cache` removed
- [x] `intl-relativeformat` removed
- [x] `intl-messageformat-parser` removed

### Todo list:
- [x] Refactor HTML tags
- [x] Refactor Upgrade tags
- [x] Refactor `kbn-i18n`
- [x] Refactor `kbn-i18n-react`
- [x] Refactor `FormattedRelative` to `FormattedRelativeTime`
- [x] Refactor polyfills
- [x] Refactor IntlShape types
- [x] Rewrite Providers
- [x] Rewrite tests using i18n
- [x] Removed current pseudolocale implementation (tracker:
#180244)
- [x] Fix jest tests using rendered `Provider`
- [x] Remove no longer valid i18n packages documentation (tracker:
#180259)

Closes #178968
Closes #38642


## Notes to code reviewers
For team other than the core team, please review your plugins code
changes by filtering files by codeowners.


### Test Snapshot updates
Most of the changes are refactors of renamed functions and changed ICU
syntax.

The main updates are snapshot changes where `FormattedMessage` is now
memoized so snapshots capturing the html tree needed to be updated to
use `<Memo(MemoizedFormattedMessage)` instead of `<FormattedMessage`


### ICU now supports HTML tags:
before:
```
<FormattedMessage
  defaultMessage="To buy a shoe, { link } and { cta }"
  values={{
    link: (
      <a class="external_link" target="_blank" href="https://www.shoe.com/">
        visit our website
      </a>
    ),
    cta: <strong class="important">eat a shoe</strong>,
  }}
/>
```
after:
```
<FormattedMessage
  defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>eat a shoe</cta>"
  values={{
    a: msg => (
      <a class="external_link" target="_blank" href="https://www.shoe.com/">
        {msg}
      </a>
    ),
    cta: msg => <strong class="important">{msg}</strong>,
  }}
/>
```

### Escape character to prevent ICU parsing changed from double slashes
to single quotes:
before: `\\{escaped\\}`
after: `'{escaped}'`

### No need for Intl Shape
the new packages under formatJS are written in typescript and come with
types support out of the box so no need to set types when using i18n.

Renamed `InjectedIntlProps` with `WrappedComponentProps`.
Removed `prop-types` and `intlShape` in favor of `IntlShape`.

### FormattedRelative has been renamed to FormattedRelativeTime and its
API has changed significantly. See
[FormattedRelativeTime](https://formatjs.io/docs/react-intl/upgrade-guide-3x#formattedrelativetime)
for more details.

### All tags specified must have corresponding values and will throw
error if it's missing
All tags are now parsed and expected to be formatted properly (all
opened tags must be closed).

To skip this check you can use the `ignoreTag: true` property

```
i18n.translate('xpack.apm.agentConfig.captureJmxMetrics.description', {
      defaultMessage: 'This is not an HTML tag <JMX object name pattern>' +
      ignoreTag: true,
    }),
```

**When do I use ignore tags?**

If your message has HTML tags, it is preferred not to ignore the Tag to
have some string verification that the html tags you are adding are
properly formatted and closed.

If it the text between brackets is not an HTML tag and it is just a
fomat preference then using `ignoreTag` makes sense.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Project:i18n Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc
Projects
None yet
Development

No branches or pull requests

2 participants