[Controls] [Dashboard] Allow existing controls to change type

[Heenawter]

Closes #128195

Summary

This PR introduces the ability to replace an existing control embeddable with one of a different type via the new container function replaceEmbeddable.

While the replaceEmbeddable function is designed to be a generic function that could apply to other embeddables, for the sake of keeping this PR simple, I only used it for controls for now - in future PRs, we could use this replaceEmbeddable function in other places, such as in the replacePanel code in the Dashboard container (dashboard_container.ts) to reduce duplicated code.

Video

2022-05-02_ReplaceControlType.mp4

Flaky Test Runner

Checklist

• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

This is looking great! Left one DX / style comment, and a couple questions, but I think this is overall very well done! As I said in our sync earlier, I can't wait to use this code to simplify all the other places where embeddable panels get swapped out. This could go a long way towards making our containers more responsive.

Also, it looks as though you've accomplished this while keeping the same embeddable id, which is super cool.

[tsullivan]

Is there a way to avoid mutation here?

[Heenawter]

@tsullivan Good catch! I did it this way instead:

this.updateInput({
  panels: {
      ...
      explicitInput: { ...newExplicitInput, id },
      ...

[Dosant]

embeddable Code lgtm,
I also tested in an example plugin that updating input of dashboard controller panel with a different type/input properly replaces it ( which matches internal implementation of the new replace method)

Does this replace functionality covered by functional tests? I assume so and looks like yes

[Heenawter]

@Dosant Yes, I added functional tests to test this! :) Only for controls for now, but we can expand the other replace-related functional tests and the related Jest tests in a follow up PR that will make use of this new functionality in other places, such as panel cloning - I felt as though it was best to keep all changes in this PR as contained within control as possible 👍

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 2de4834
• Storybooks Preview
• Webpack Bundle Analyzer

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
controls	201	204	+3
embeddable	388	396	+8
total			+11

Async chunks

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

id	before	after	diff
controls	420.3KB	420.8KB	+482.0B
presentationUtil	127.3KB	127.4KB	+46.0B
total			+528.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	32.0KB	31.8KB	-204.0B
embeddable	65.9KB	66.2KB	+387.0B
total			+183.0B

Unknown metric groups

API count

id	before	after	diff
controls	207	210	+3
embeddable	478	486	+8
total			+11

History

• 💔 Build #44543 failed acf92f6a46303156db74ecc9f5db04d1c02e244b
• 💚 Build #44494 succeeded 59cdde3
• 💚 Build #44197 succeeded ff64c6a
• 💚 Build #43428 succeeded 9d996cd
• 💚 Build #41848 succeeded 26f84ec
• 💔 Build #41841 failed 5bcdf06d4e2e17d5880e0b0876ad08fd059458f7

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

cc @Heenawter