Closes https://github.com/elastic/kibana/issues/190379
## Summary
This PR switches the example grid layout app to render embeddables as
panels rather than the simplified mock panel we were using previously.
In doing so, I had to add the ability for custom panels to add a custom
drag handle via the `renderPanelContents` callback - this required
adding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that
could be passed down to the `PresentationPanel` component.
https://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2
#### New scroll behaviour
In https://github.com/elastic/kibana/pull/201867, I introduced a small
"ease" to the auto-scroll effect that happens when you drag a panel to
the top or bottom of the window. However, in that PR, I was using the
`smooth` scrolling behaviour, which unfortunately became **very**
jittery once I switched to embeddables rather than simple panels
(specifically in Chrome - it worked fine in Firefox).
The only way to prevent this jittery scroll was to switch to the default
scroll behaviour, but this lead to a very **abrupt** stop when the
scrollbar reached the top and/or bottom of the page - so, to give the
same "gentle" stop that the `smooth` scroll had, I decided to recreate
this effect by adding a slow down "ease" when close to the top or bottom
of the page:
https://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac
This effect is accomplished via the parabola formula `y = a(x-h)2 + k`
and can be roughly visualized with the following, which shows that the
"speed up" ease happens at a much slower pace than the "slow down" ease:
#### Notes about parent changes
As I investigated improving the efficiency of the grid layout with
embeddables, one of the main things I noticed was that the grid panel
was **always** remounted when moving a panel from one collapsible
section to another. This lead me (and @ThomThomson) down a rabbit hole
of React-reparenting, and we explored a few different options to see if
we could change the parent of a component **without** having it remount.
In summary, after various experiments and a whole bunch of research, we
determined that, due to the reconciliation of the React tree, this is
unfortunately impossible. So our priorities will instead have to move to
making the remount of `ReactEmbeddableRenderer` **as efficient as
possible** via caching, since the remount is inevitable.
### Checklist
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
### Identify risks
There are no risks to this PR, since the most significant work is
contained in the `examples` plugin. Some changes were made to the
presentation panel to allow for custom drag handles, but this isn't
actually used in Dashboard - so for now, this code is only called in the
example plugin, as well.
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
PR does the following
1. removes legacy example embeddables
2. Replaces FilterDebugger legacy embeddable with react embeddable
3. Moves FilterDebugger react embeddable to portable_dashboards_example
since that is where its used
4. Fixes DashboardContainer.addNewPanel to return ApiType for react
embeddables.
### test instructions
1. start kibana `yarn start --run-examples`
2. Open kibana menu and click "Developer examples"
3. Use developer examples search bar to find "Portable Dashboards"
example and click on the card
4. Verify first example that shows control filters works
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
These examples are outdated and don't show recent embeddable best
practices. They also use client-side saved object client and block
making `SavedObjectFinder` backward compatible
https://github.com/elastic/kibana/pull/162904 as the `foobar` saved
objects need to be added to content management. We decided that it is
better to clean them up, as fixing them is not a small effort and it is
not worth it on this point as a large embeddable refactor is coming.
Added an attribute service to embeddable start contract which provides a higher level abstraction for embeddables that can be by reference OR by value. Added an example that uses this service.
Added example for using dashboard container by value
1.1 Refactored embeddable explorer e2e test to use new example, removed not needed kbn_tp_embeddable_explorer plugin.
For embeddable explorer examples went away from using getFactoryById() to improve type checks
There is new component a replacement for EmbeddableFactoryRenderer with slightly more flexible api: EmbeddableRenderer.
3.1 We can improve it going forward to support more use case
* Add embeddable via saved object example
* give todoRefEmbed a different name from the by value one
* fix types
* fix order of unmounting
Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>
* add plugin own contract as third element of getStartServices result
* adapt plugins code
* update tests
* revert unknown to use void again
* update generated doc
* fix UT
* update mock to allow non-object `pluginStartContract`
* add @typeParam documentation
* Add a new platform embeddable example plugin
* Remove extra hello world test impl.
* cleanup
* code review updates
* Change example to highlight and have parent filter out children
* Fix deep comparison of embeddable prop
* adjust help text
