[ML] Standardize Add embeddable flow from the Anomaly Explorer page

[darnautov]

Summary

Standardizes the workflow for adding an embeddable swim lane or anomaly charts from the Anomaly Explorer to Dashboard so that it is aligned with that used in other places in Kibana. Users are now always redirected to Dashboard app after adding the embeddable so that they can modify and save their changes inside Dashboard.

Resolves #122300 and #122271

Updates the user flow of adding ML embeddables to dashboards from the Anomaly Explorer page by utilizing the embeddable transfer state service. Due to the lack of alternative solutions, we used to manipulate dashboards saved objects directly. Now the user is redirected to the dashboard in edit mode and should save changes explicitly.

Important differences with the previous version:

• It's not possible anymore to quickly add embeddable to a dashboard in the background. Also manipulating multiple dashboards isn't allowed.
• It's not possible anymore to add multiple embeddables at the time, i.e. the user must select Overall or View By swim lane, but not both.
• Each row in the "Add to dashboard" dialog got an action to navigate to the dashboard in edit mode with pending changes that contain the embeddable config

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
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[peteharverson]

Tested and LGTM

[peteharverson]

This icon implies more of an 'edit' action to me than 'add', but can't find anything better! You are redirected to Dashboard to allow more 'editing', so maybe it's ok?

[darnautov]

listAdd icon (take a look in https://elastic.github.io/eui/#/display/icons) might also work 🤔

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 06bfc05
• Storybooks Preview

Metrics [docs]

Async chunks

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

id	before	after	diff
ml	3.5MB	3.5MB	-1.7KB

Page load bundle

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

id	before	after	diff
ml	38.5KB	38.5KB	+22.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
ml	63	67	+4

History

• 💔 Build #17924 failed bf390f7

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

cc @darnautov

[ThomThomson]

Tested this locally on chrome, everything works as expected! The user is redirected to the dashboard, and the swimlane embeddable works as expected.

I also looked through the diff, and it's great to see the last usage of the URL generator getting removed, very exciting!

I am approving, but I think there are many UX improvements to be made in the future to better align this with how other Kibana apps add their embeddables to a dashboard.

• Redirecting to a dashboard is a pretty major action, so using such a small action button per-row seems jarring from a UX POV. Additionally, there is no description stating that you will be redirected.
• There is no way to add the swimlane embeddable directly to a new dashboard
• The inline dashboard selection table causes layout shifting in the modal depending on how many dashboards are available.

If we eventually re-think the UX of this window, we should look at the way Visualize / Lens accomplishes this:

We would need to remove the None / add to Library radio buttons, but the rest of the UI could be retained.

[darnautov]

Thanks for the review @ThomThomson! Agree, we need to rethink the UX here because originally it was possible to change multiple dashboards at once. Visualize / Lens approach seems sensible! Merged it to remove the blocker, but we'll get back to it.

[ThomThomson]

Amazing, thanks again for doing this!