[Console] Migrate output editor to Monaco

[ElenaStoeva]

Closes #178941

Summary

This PR migrates the output editor from Ace editor to Monaco editor.

How to test:

1. Create a config/kibana.dev.yml file (if one doesn't exist already) and add the line: console.dev.enableMonaco: true
2. Change the condition in

   kibana/src/plugins/console/public/application/containers/editor/editor.tsx

   Line 76 in b8c13ba

   ) : isMonacoEnabled ? (

   to !isMonacoEnabled to display the old Ace editor in the request panel for now so that we can test sending a request.
3. Send a request and verify the output panel displays the response correctly in json format and that the highlighting is the same as in the original output panel. Also test sending multiple requests at once.

JSON output screenshots:

Ace editor:

Now:

When multiple requests are sent:

4. Send a request with ?format=yaml parameter (e.g. GET _all?format=yaml) and verify that the output panel displays the response correctly in yaml format.

YAML output screenshot:

5. The output also supports text output data. To test this format, delete line 29 and add the following code in line 34 in src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx:

const data = [
      {
        response: { value: 'Hello World!' },
      },
    ];

Then reload the Console page and verify the data is correctly displayed and highlighted.

TEXT output screenshot:

[yuliacech]

Hi @ElenaStoeva, thanks a lot for working on this!
I did an initial review and I think there are a couple things to address before merging this:

• I think we should try to keep the same highlighting as the original ace output panel, for this we could probably re-use some of the code from [Console] Add theme and more lexer rules #178757
• The output panel needs to be set to a "readonly" mode
• When several requests are sent, there are comments with status badges between the different output results. We need to highlight those as well, but potentially this could be addressed in a separate PR
• According to the function modeForContentType in the file https://github.com/elastic/kibana/blob/9d193779dd82d89b539e0b8fe8148918fd19f90e/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx, there are 3 modes that are supported 'txt', 'hjson' and 'yaml', so we need to handle those 3 in the migrated version as well

[ElenaStoeva]

Thank you for the feedback @yuliacech! I added a theme, made the editor readonly, and added support for the three different modes. I also added a follow-up task in #176723 for supporting multiple request responses.

Regarding the highlighting, I only added a theme for when the output data is a json so that the highlighting is the same as in the existing Ace editor. However, when the output data is in yaml format, the highlighting is different from the one in the Ace editor since I haven't added a theme for yaml language. Given that output data in yaml format is probably not that common (I'm wondering in what situation we would get a yaml response?), do you think we should still add a theme for it so that it is highlighted exactly as in Ace?

[ElenaStoeva]

/ci

[elasticmachine]

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

[ElenaStoeva]

/ci

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 259361d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
console	236	240	+4

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	105	107	+2

Async chunks

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

id	before	after	diff
console	431.4KB	432.5KB	+1.1KB

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	+455.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/monaco	105	107	+2

History

• 💚 Build #199707 succeeded 727e1a6
• 💔 Build #199667 failed a155fd0

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

cc @ElenaStoeva

[yuliacech]

Thanks a lot for addressing my feedback, @ElenaStoeva!
Tested locally and the output panel works as expected 👍

[sebelga]

LGTM 👍