search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.71k stars 8.13k forks source link

Migrate instances of `EuiCodeEditor` to `CodeEditor` #106931

Open thompsongl opened 3 years ago

thompsongl commented 3 years ago

The EUI team has deprecated the EuiCodeEditor component and requires that instances in Kibana be migrated to an alternative solution before it can be removed from the codebase. The current recommendations can be found here, but generally consist of:

The main driver behind removing EuiCodeEditor is its reliance on a dependency that violates Kibana's CSP.

Instances requiring migration:

elasticmachine commented 3 years ago

Pinging @elastic/eui-design (EUI)

timroes commented 3 years ago

@thompsongl We currently use in a lot of of places that CodeEditor is already in place custom options and basically every place looks slightly different (we even don't have a shared fontSize between those instance). Since we're now heavily start using it in more places, could Design please take a pass on that, and make sure that the CodeEditor component itself has reasonable default stylings and not every consumer does an (unaligned) styling in their application?

thompsongl commented 3 years ago

@cchaos Have we worked with any teams on code editor designs?

cchaos commented 3 years ago

I'll check in with @ryankeairns and his team, but no there hasn't been any designs done for a code editor that I know of. Since this lives in Kibana, it makes sense for the Kibana Design team to handle this one and may be a good on-boarding task but would likely need a team or person to pair with a designer to implement changes.

ryankeairns commented 3 years ago

I'll check in with @ryankeairns and his team, but no there hasn't been any designs done for a code editor that I know of. Since this lives in Kibana, it makes sense for the Kibana Design team to handle this one and may be a good on-boarding task but would likely need a team or person to pair with a designer to implement changes.

Regarding the Monaco / CodeEditor, it was originally swapped in to replace the Canvas expression editor input then later pulled out for wider re-use. As far as I'm aware, no design team effort has been put into that shared component, and it does sound like something we could take a pass at. I've not seen the code, but can take a look and assess what can be done for default styles.

ryankeairns commented 3 years ago

We currently use in a lot of of places that CodeEditor is already in place custom options and basically every place looks slightly different (we even don't have a shared fontSize between those instance). Since we're now heavily start using it in more places, could Design please take a pass on that, and make sure that the CodeEditor component itself has reasonable default stylings and not every consumer does an (unaligned) styling in their application?

@timroes we currently generate themes that utilize EUI colors, and I'm looking at adding defaults for fontFamily, fontSize, and lineHeight to the root editor options. Are there any styles, aside from this, that you've encountered?

Looking over the Monaco editor options, nothing else jumped out at me (I tried padding, but that was not of use in this case).

timroes commented 3 years ago

Just a note for everyone migrating to CodeEditor. We have currently no syntax highlighting for JSON (see https://github.com/elastic/kibana/issues/107733). Don't use XJsonLang if you actually only support JSON, since it means your code editor will highlight as XJson (e.g. support for tripple quotes), while you behind the scenes are only handling JSON values. This can become confusing for users (e.g. see https://github.com/elastic/kibana/issues/107723). If you're needing a non read-only editor for JSON, please make sure to upvote and leave a comment in https://github.com/elastic/kibana/issues/107733 to get support for JSON highlighting.

cjcenizal commented 3 years ago

EuiCodeEditor is now available directly within Kibana. See https://github.com/elastic/kibana/pull/108318 for more details. This allows plugin maintainers to continue to consume EuiCodeEditor, but importing it from the es_ui_shared plugin instead of from EUI.

elasticmachine commented 3 years ago

Pinging @elastic/kibana-design (Team:Kibana-Design)

thompsongl commented 2 years ago

Thanks y'all for making great progress on the migration!

EUI will be moving forward with removing EuiCodeEditor in the coming weeks: https://github.com/elastic/eui/pull/5323 Any remaining instances in Kibana will be moved to use the es_ui_shared plugin in the subsequent upgrade pull request (to be handled by the EUI team).