[Console] Apply console settings to new monaco editor #178982
Conversation
ElenaStoeva
added
Feature:Console
|
/ci |
|
Pinging @elastic/kibana-management (Team:Kibana Management) |
There was a problem hiding this comment.
Thanks a lot for working on this, @ElenaStoeva!
I tested locally and everything works as expected: the settings for font size, line wrapping and a11y overlay are applied to the Monaco editor in Console. I'm good with merging this, just contemplating if "overlay" is the correct wording for the prompt used in Monaco.
Thanks for the review @yuliacech! Yes, I thought about this too, but couldn't come up with a better name. I was thinking about |
|
@ElenaStoeva naming is hard :) maybe we can add this as a follow up task to #176723? because if we rename the setting completely now, it might be confusing in the UI until we switch to the migrated editor |
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: cc @ElenaStoeva |
kibanamachine
added
v8.14.0
backport:skip
## Summary This PR adds a theme for the Console language in Monaco editor and adds more lexer rules to bring the highlighting of the input closed to the original in Ace editor. ### Screenshots Monaco editor <img width="682" alt="Screenshot 2024-03-19 at 12 38 07" src="https://github.com/elastic/kibana/assets/6585477/98a1acc7-3a8a-4ad9-a79e-5236091c4c39"> Ace editor <img width="651" alt="Screenshot 2024-03-19 at 12 37 52" src="https://github.com/elastic/kibana/assets/6585477/37935a68-923b-493c-ac56-ef4982f27fdf"> ### How to test 1. Add `console.dev.enableMonaco: true` to `kibana.dev.yml`` 2. Type different requests into Console and check that the highlighting works the same as in Ace. For example, use the following requests ``` GET ${pathVariable}/_search { "query": { "match": { "${bodyNameVariable}": "${bodyValueVariable}", "number_property": 1234, "array_property": ["test1", 1234, false], "boolean_property": true, "text_property": "text_value", "triple_quote": """ inside triple quote """ // line comment /* block comment */ } } } // line comment /* block comment */ GET _sql { "query": """ SELECT "field" FROM "index-*" WHERE "column" = "value" """ } ``` 3. To check that `xjson` highlighting still works a. Navigate to Ingest pipelines and click the "create from csv" button b. Load a valid csv file, for example this [one](https://github.com/kgeller/ecs-mapper/blob/master/example/mapping.csv) #### Known issues that will be addressed in follow up PRs - SQL highlighting needs to be re-implemented (added to the follow up list in #176926) - Strings inside triple quotes are not using italics (added to the follow up list in #176926) - Font size needs to be set via settings and the default value provided (fixed via #178982) - Font family: do we want to use the same font as for other Monaco languages are use the one for Ace? (added to the follow up list in #176926) - In the future, we might want to use the same theme for `xjson` and Console (added to the follow up list in #176926) --------- Co-authored-by: kibanamachine <[email protected]>
Closes #178966
Closes #176799
Summary
This PR applies the console settings to the new Monaco editor:
fontSizewrapModeisAccessibilityOverlayEnabledIt also modifies the
CodeEditorcomponent to accept anaccessibilityOverlayEnabledprop.How to test:
config/kibana.dev.ymlfile (if one doesn't exist already) and add the line:console.dev.enableMonaco: true