[Embeddable] Add seamless React integration

[dokmic]

Summary

Resolves #140395.

Checklist

• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

[flash1293]

VisEditors changes LGTM, everything still works fine for the visualize embeddable

[vadimkibana]

Code LGTM, also checked dashboards on Mac/Chrome all seems to work.

[ThomThomson]

Looked through the code and left one nit / question, but otherwise this is looking great! Nicely done, and super exciting for the future of embeddables.

I also ran the storybooks and everything checks out there.

One problem I ran into, I think this PR introduces a regression in Control Error state, where it doesn't appear when running onFatalError. To test this I added this.onFatalError(new Error('FATAL ERROR TEST')); under line 167 of src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx.

On main it looks like this:

but on this branch no error is shown at all. I debugged a little bit, and found that the control frame subscription is receiving the error properly, but I didn't look into it further than that.

Will approve once the error state is fixed.

[ThomThomson]

Any way to get better typing here? Maybe it extends ReactNode?

[dokmic]

We cannot extend this type parameter from the ReactNode as I wanted to keep the base embeddable class framework agnostic. In that case, the rendering component could specify what kind of rendering it supports.
The unknown type (so as never) is not going to work here as it breaks the existing code. The only option to achieve the same without touching already existing embeddable is using any.

[dokmic]

Will approve once the error state is fixed.

@ThomThomson It is fixed and works as before. Could you please take another look?

[ThomThomson]

Re-reviewed this locally, and everything LGTM now! Thanks for fixing the error state.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: b617a68
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
embeddable	84	79	-5

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
embeddable	412	410	-2
visualizations	730	729	-1
total			-3

Async chunks

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

id	before	after	diff
controls	491.5KB	492.2KB	+706.0B
visualizations	268.2KB	268.1KB	-66.0B
total			+640.0B

Page load bundle

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

id	before	after	diff
controls	18.4KB	18.4KB	+56.0B
embeddable	70.1KB	68.9KB	-1.1KB
total			-1.1KB

Unknown metric groups

API count

id	before	after	diff
embeddable	512	510	-2
visualizations	760	759	-1
total			-3

History

• 💚 Build #81759 succeeded f6d8b25f3f91d32af3eb8841f1e260de80f1f28e
• 💚 Build #80432 succeeded e04ff7135c78a50b9b37c09aa289c7e95464d128
• 💚 Build #79917 succeeded f47f42bf3eb773e21f73989f187c0c6c64c14114
• 💔 Build #79759 failed 87dd28326ed01e7f1a48e24f094cb12d43a5d08e
• 💔 Build #79602 failed 11a8b2aaf4bf3da3149d73d9526028242dde3050

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