[Console Monaco Migration] Handle editor resize

[ElenaStoeva]

Closes #180216

Summary

This PR adds resize handling for the editor and the output panel in Console Monaco.

Screen.Recording.2024-04-10.at.16.49.18.mov

[ElenaStoeva]

/ci

[ElenaStoeva]

/ci

[yuliacech]

Thanks a lot for working on this, @ElenaStoeva!
As discussed, I had a look at your solution and I was wondering if you have tried using automaticLayout: true mentioned in this StackOverflow question? Could you please check if that could work for our use case? If not, we can use editor.layout but maybe we could put the code for both input and output editors in a reusable function? Also for both solutions, we need to check for performance: for example, add debounce for editor.layout calls, as it is implemented right now, it's being called many times while the user is still resizing the window.

[ElenaStoeva]

Thanks a lot for working on this, @ElenaStoeva! As discussed, I had a look at your solution and I was wondering if you have tried using automaticLayout: true mentioned in this StackOverflow question? Could you please check if that could work for our use case? If not, we can use editor.layout but maybe we could put the code for both input and output editors in a reusable function? Also for both solutions, we need to check for performance: for example, add debounce for editor.layout calls, as it is implemented right now, it's being called many times while the user is still resizing the window.

Thanks for the review @yuliacech! Yes, I tried using this option alone but it didn't work well - as the resizer is being moved, it bounces back and forth:

Screen.Recording.2024-04-16.at.10.43.28.mov

I played around using the automaticLayout option or the resize checker and I think it works best when we use the resize checker only in the editor and both the resize checker and the automaticLayout option in the output panel.

[yuliacech]

Thanks a lot for the explanation, @ElenaStoeva! The resizer works as expected 👍

[elasticmachine]

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

[ElenaStoeva]

/ci

[Dosant]

suggest to check if there is already a resizeChecker.current and destroy it if there is one

[ElenaStoeva]

Thanks for the review @Dosant! Added this check with f02739b.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: f02739b

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
console	247	248	+1

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/code-editor	15	16	+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	440.6KB	441.2KB	+624.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/code-editor	38	39	+1

History

• 💚 Build #202821 succeeded d8e484e
• 💔 Build #202602 failed eeb808e

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

cc @ElenaStoeva