[Dashboard] Add panel flyout opens 2 flyouts

[cchaos]

Kibana version: At least master, but most likely also 7.7 and possibly even earlier

Describe the bug:

There's an EuiFlyout inception that is happening when opening the "Add panel" flyout from Dashboard.

Steps to reproduce:

1. Open or create a new Dashboard
2. Click the "New" button in the menu
3. Watch as you see two levels of flyouts appear during the animation.

Once they're fully open it's hard to tell until you search the rendered dom.

Expected behavior:

One flyout please. The two flyouts can cause the animation to be sluggish and stutter. It will also cause problems with the EUI upgrade that pushes the panel below the header. Nested flyouts will double that amount.

Screenshots (if relevant):

cc @stacey-gammon

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[Dosant]

I'll pick it up because had similar issue with drilldowns flyout

[cchaos]

This issue seems to be back. It happens when using the "Replace panel" function in dashboards. Here is a video you can scrub through to see the problem.

[Dosant]

Thanks @cchaos,

• Opened [bugfix] Replace panel flyout opens 2 flyouts #76931 to address this
• Also reviewed code base, found at least 1 other example where this appears: [ML] Edit swim lane on a dashboard opens two flyouts #76932.
• @elastic/kibana-platform, since this is so easy mistake to make when using overlays.openFlyout, what do you think about adding a runtime check that would through in development in case <EuiFlyout/> is passed as a child in a component tree? Or @cchaos, maybe this is something where eui should throw?

[cchaos]

I think it's hard for EUI to know what is "intended" for this kind of behavior. For instance, it is possibly valid to have two flyouts where one flyout triggers another. So I'd suggest the validator be part of the overlays service. I'd even recommend, if you can trying to get more plugins to use this service because it then provides a single place to be able to adjust for any other overlays as well. Not sure the best way of doing this except for trying to provide a warning message somewhere when using EuiFlyout directly. (Like maybe a custom lint message)

[pgayvallet]

since this is so easy mistake to make when using overlays.openFlyout, what do you think about adding a runtime check that would through in development in case is passed as a child in a component tree

I'm not sure that is really doable, due to the fact that the API is agnostic and just accepts a MountPoint

kibana/src/core/public/overlays/flyout/flyout_service.tsx

Line 85 in 360b9c1

open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;

[Dosant]

@pgayvallet, bummer... alternatively we probably could actually check DOM inside that method?