[Flyout system] Dynamic z-index calculation

[tkajtoch]

Summary

Resolves #9160
Resolves #9237

This PR fixes stacking of managed and unmanaged flyouts by dynamically calculating z-index values for each new flyout. The added z-index value gets reset to 0 when no more flyouts are open to avoid too high values in long-running runtimes.

This PR has skip-changelog label applied as it brings back the expected flyouts "stacking" behavior to the Flyout System. There should be no differences in rendering multiple flyouts one on top of another compared to main.

Why are we making this change?

Part of the Flyout System project; fixing remaining bugs before merging the feature branch to main

Screenshots #

Impact to users

No negative impact to users. They'll see the overlays applied properly, no matter the DOM injection order or the managed and unmanaged flyouts combinations.

QA

Remove or strikethrough items that do not apply to your PR.

[tsullivan]

Relatively simple fix, addresses two important issues. LGTM!

I tested by changing the Non-Session flyout in the layout-euiflyout-flyout-manager--multi-session-example storybook: I changed side from left to right. Now, when we open the non-session flyout after a managed flyout is open, the non-session flyout appears correctly on top.

One suggestion I might give is to put into the code the test I did:

diff --git packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
index dafa9ee68..35162e47d 100644
--- packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
+++ packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
@@ -313,7 +313,6 @@ const NonSessionFlyout: React.FC<{ size: string }> = ({ size }) => {
           ownFocus={flyoutOwnFocus}
           pushAnimation={true}
           onClose={flyoutOnClose}
-          side="left"
         >
           <EuiFlyoutHeader>
             <EuiTitle size="m">

[tkajtoch]

@tsullivan I removed the side="left" in 9179b58 and updated reducer.test.ts to cover all of the added logic.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 668560d
• Documentation website
• Storybook

History

• 💚 Build #2074 succeeded efd1fa7
• 💔 Build #2073 failed 6542510

cc @tkajtoch

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 668560d

History

• 💚 Build #5321 succeeded efd1fa7
• 💔 Build #5320 failed 6542510

cc @tkajtoch