[Console Monaco Migration] Fix issue with different themes

[ElenaStoeva]

Fixes #180218

Summary

This PR fixes the highlighting issue in the Monaco editor that is caused when using a theme in the output panel that is different from the theme in the editor. This fix is implemented by unifying the themes for both editors into one.

The PR also fixes the issue with Console theme overwriting theme in other code editors (e.g. embeddable Console in the index detail tabs) by reusing the euiTheme.

Note: This solution changes some of the original highlighting colors in Console (e.g. comments were green and now they are grey, background color is also different now). We might be able to fix the text colors by specifying unique token names in the Console language (e.g. using consoleComment instead of comment token name). cc: @yuliacech

Screen.Recording.2024-04-22.at.15.31.47.mov

Screen.Recording.2024-04-22.at.15.33.39.mov

[ElenaStoeva]

/ci

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[ElenaStoeva]

@elasticmachine merge upstream

[yuliacech]

Thanks a lot for fixing the theme issue, @ElenaStoeva!
The new colors look great and the embeddable console doesn't seem to affect other code editors.
The circular dependency might need to be resolved before merging this PR though, I'm not sure the CI will let us otherwise.

[ElenaStoeva]

/ci

[MichaelMarcialis]

LGTM! Approving.

On the topic of code highlighting, have there been any previous discussions on adopting the same colors used for the EUI code block component's code highlighting? Doing so would be nice for consistency. I'm mentioning it because it's a topic that came up lately for the ES|QL editor as well, which @stratoula kindly changed to adopt those colors. Is it worth opening a separate issue to do the same here?

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 8af72f6

Failed CI Steps

• FTR Configs #37
• FTR Configs #74

Test Failures

• [job] [logs] FTR Configs #74 / dashboard app - group 1 dashboard embeddable data grid are added when a cell filter is clicked
• [job] [logs] FTR Configs #37 / lens app - group 4 lens show underlying data from dashboard should bring both dashboard context and visualization context to discover

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/monaco	124	123	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
console	441.2KB	441.1KB	-32.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
console	32.9KB	33.0KB	+50.0B
kbnUiSharedDeps-srcJs	3.1MB	3.1MB	-487.0B
total			-437.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/monaco	124	123	-1

History

• 💚 Build #206072 succeeded e59d6c3
• 💔 Build #206019 failed b62e85b
• 💔 Build #205008 failed 4155d1a
• 💔 Build #204625 failed 94299dd

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @ElenaStoeva

[ElenaStoeva]

LGTM! Approving.

On the topic of code highlighting, have there been any previous discussions on adopting the same colors used for the EUI code block component's code highlighting? Doing so would be nice for consistency. I'm mentioning it because it's a topic that came up lately for the ES|QL editor as well, which @stratoula kindly changed to adopt those colors. Is it worth opening a separate issue to do the same here?

Thanks for the review @MichaelMarcialis!
In the Console Monaco editor, specifying text highlighting colors is trickier as we figured that a limitation in Monaco causes multiple editors on the same page to overwrite each other's themes. For example, since Console is embedded in Index Management details page, now that we have two Monaco editors on the same page, if we change the Console highlighting colors to the ones from the EUI code block component, these colors would also be applied to code editor in the Index Management setting details page, which is a behavior we try to avoid. Thankfully, the ES|QL editor seems to be a single Monaco editor on the page, so it doesn't have theme-related issues.

Still, we can investigate further whether we can implement some workaround so that we can apply the colors that you suggested to Console - I opened #182142 to track this work.