github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/packages/kbn-plugin-generator
History
Ahmad Bamieh f1c854b9db
[i18n][system upgrade] Upgrade Intl Packages from v2 to v6 (#179506) 
## 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>
2024-06-02 16:50:33 +03:00
..
src fix(NA): do not change default encoding when using vfs to copy files (#181174) 2024-04-18 18:35:47 +01:00
template [i18n][system upgrade] Upgrade Intl Packages from v2 to v6 (#179506) 2024-06-02 16:50:33 +03:00
index.ts chore(NA): remove src folder requirement from packages (part 2) (#138476) 2022-08-30 15:57:35 +01:00
jest.config.js [jest] add *_node presets (#126192) 2022-02-23 09:36:30 -06:00
jest.integration.config.js [jest] add *_node presets (#126192) 2022-02-23 09:36:30 -06:00
kibana.jsonc Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
package.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
README.md fix(NA): build external plugins with correct bazel artifacts output mode (#159630) 2023-06-15 00:43:05 +01:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00

README.md

Kibana Plugin Generator

This package can be used to generate a Kibana plugin from the Kibana repo.

Setup

Before you can use this plugin generator you must setup your Kibana development environment. If you can successfully run yarn kbn bootstrap then you are ready to generate plugins!

Compatibility

The plugin generator became a part of the Kibana project as of Kibana 6.3. If you are targeting versions before Kibana 6.3 then use the Kibana plugin sao template.

If you are targeting Kibana 6.3 or greater then checkout the corresponding Kibana branch and run the plugin generator.

Quick Start

To target the current development version of Kibana just use the default master branch.

node scripts/generate_plugin --name my_plugin_name -y
# generates a plugin in `plugins/my_plugin_name`

To target 6.8, use the 6.8 branch.

git checkout 6.x
yarn kbn bootstrap # always bootstrap when switching branches
node scripts/generate_plugin --name my_plugin_name -y
# generates a plugin for Kibana 6.8 in `../kibana-extra/my_plugin_name`

The generate script supports a few flags; run it with the --help flag to learn more.

node scripts/generate_plugin --help

Updating

Since the Plugin Generator is now a part of the Kibana repo, when you update your local checkout of the Kibana repository and bootstrap everything should be up to date!

NOTE: These commands should be run from the Kibana repo, and upstream is our convention for the git remote that references https://github.com/elastic/kibana.git, unless you added this remote you might need to use origin.

git pull upstream master
yarn kbn bootstrap

Plugin Development Scripts

Generated plugins receive a handful of scripts that can be used during development. Those scripts are detailed in the README.md file in each newly generated plugin, and expose the scripts provided by the Kibana plugin helpers, but here is a quick reference in case you need it:

NOTE: The following scripts should be run from the generated plugin root folder.

  • yarn bootstrap

    Install dependencies both on Kibana and in your plugin.

    IMPORTANT: Use this script instead of yarn to install dependencies when switching branches, and re-run it whenever your dependencies change.

  • yarn build

    Build a distributable archive of your plugin.

  • yarn dev --watch

    Builds and starts the watch mode of your ui browser side plugin so it can be picked up by Kibana in development.

To start kibana run the following command from Kibana root.

  • yarn start

    Start kibana and, if you had previously run in another terminal yarn dev --watch at the root of your plugin, it will automatically include this plugin. You can pass any arguments that you would normally send to bin/kibana

    yarn start --elasticsearch.hosts http://localhost:9220

For more information about any of these commands run yarn ${task} --help. For a full list of tasks run yarn run or take a look in the package.json file.