[Console] Add theme and more lexer rules

[yuliacech]

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

Ace editor

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

Known issues that will be addressed in follow up PRs

• SQL highlighting needs to be re-implemented (added to the follow up list in [Console Monaco Migration] Implement language definition #176926)
• Strings inside triple quotes are not using italics (added to the follow up list in [Console Monaco Migration] Implement language definition #176926)
• Font size needs to be set via settings and the default value provided (fixed via [Console] Apply console settings to new monaco editor #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 [Console Monaco Migration] Implement language definition #176926)
• In the future, we might want to use the same theme for xjson and Console (added to the follow up list in [Console Monaco Migration] Implement language definition #176926)

[yuliacech]

/ci

[yuliacech]

/ci

[elasticmachine]

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

[drewdaemon]

Vis changes look good to me!

[ElenaStoeva]

Great work @yuliacech! I tested locally and the highlighting works as expected. Code changes also LGTM.

I left a small comment about the colors but it's not that important IMO - just something to think about.

[ElenaStoeva]

I was wondering whether we could use the already defined euiTheme colors for consistency, like it is done for the code editor theme (which I think is used in Painless lab). For example, the method color could be euiTheme.euiColorAccentText. But this decision depends on whether we want to keep the theme as close to the ace editor theme as possible.

[yuliacech]

Indeed, the hard coded values are not great, but we can't currently map them one-to-one without changing the colors. I think there are 2 ways to improve this code: either re-use the already existing json code editor theme, but that changes the look of console. Or alternatively, we try to keep the original look but re-use the built-in colors from EUI as much as possible.
I added a section to #176926 with follow up work once the initial language definition is implemented.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: c241b76

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	106	107	+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	430.7KB	430.8KB	+26.0B

Page load bundle

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

id	before	after	diff
kbnUiSharedDeps-srcJs	2.9MB	2.9MB	+2.3KB

Unknown metric groups

API count

id	before	after	diff
@kbn/monaco	106	107	+1

References to deprecated APIs

id	before	after	diff
@kbn/monaco	2	4	+2

History

• 💔 Build #199509 failed 1b567e0
• 💔 Build #199094 failed 946f0c9
• 💔 Build #198981 failed 1e4d2b4
• 💔 Build #198948 failed c2f4393
• 💔 Build #198248 failed 3d1b6a6779e0f57b9ccffd7095375a4dfc98440c

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