mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
## 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: https://github.com/elastic/kibana/issues/180244) - [x] Fix jest tests using rendered `Provider` - [x] Remove no longer valid i18n packages documentation (tracker: https://github.com/elastic/kibana/issues/180259) Closes https://github.com/elastic/kibana/issues/178968 Closes https://github.com/elastic/kibana/issues/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> |
||
---|---|---|
.. | ||
__fixtures__ | ||
helpers | ||
rules | ||
index.js | ||
jest.config.js | ||
kibana.jsonc | ||
lib.js | ||
package.json | ||
README.mdx |
--- id: kibDevDocsOpsEslintPluginEslint slug: /kibana-dev-docs/ops/eslint-plugin-eslint title: "@kbn/eslint-plugin-eslint" description: A package holding an eslint plugin with custom rules used on Kibana date: 2022-05-17 tags: ['kibana', 'dev', 'contributor', 'operations', 'eslint', 'plugin'] --- An ESLint plugin exposing custom rules used and built specifically for development within Kibana. Next you can find information on each on. ## disallow-license-headers Disallows a given group of license header texts on a group of files. ```javascript module.exports = { overrides: [ { files: ['**/*.{js,mjs,ts,tsx}'], rules: { '@kbn/eslint/disallow-license-headers': [ 'error', { licenses: [ "LICENSE_TEXT" ], }, ], } } ] } ``` ## module_migration Offers a way to force a migration from a given node module into another as an alternative. ```javascript module.exports = { overrides: [ { files: ['**/*.{js,mjs,ts,tsx}'], rules: { '@kbn/eslint/module_migration': [ 'error', [ { from: 'expect.js', to: '@kbn/expect', } ], ], } } ] } ``` ## no_async_foreach Disallows passing an async function to .forEach which will avoid promise rejections from being handled. asyncForEach() or a similar helper from "@kbn/std" should be used instead. ## no_async_promise_body Disallows the usage of an async function as a constructor for a Promise function without a try catch in place. ## no_constructor_args_in_property_initializers Disallows the usage of constructor arguments into class property initializers. ## no_export_all Disables the usage of `export *`. ## no_this_in_property_initializers Disallows the usage of `this` into class property initializers and enforce to define the property value into the constructor. ## no_trailing_import_slash Disables the usage of a trailing slash in a node module import. ## require-license-header Requires a given license header text on a group of files. ```javascript module.exports = { overrides: [ { files: ['**/*.{js,mjs,ts,tsx}'], rules: { '@kbn/eslint/require-license-header': [ 'error', { license: "LICENSE_TEXT" }, ], } } ] } ``` ## no_unsafe_console Disables the usage of kbn-security-hardening/console/unsafeConsole.