[Flyout System] Add managed history controls #9003

tsullivan · 2025-09-09T17:08:47Z

Summary

Depends on #8997
Resolves #8873

This exposes tracked history to flyout sessions in contexts and exposes controls in the UI to allow users to navigate to previous flyouts.

When a user opens a flyout for the first time:

The onActive callback (optional prop) is fired.

When the user navigates to a previous flyout:

The "newer" flyout sessions are discarded from the tracked history state and their onClose callbacks are fired
The onActive callback for the flyout that becomes active is fired

Note: This PR is targeted to the feat/flyout-system feature branch.

Why are we making this change?

A requirement for the Flyout System is to allow users to navigate to previous flyout sessions. This PR achieves that, and allows consumer apps to have a local state that is synchronized with the internal state of the Flyout System.

Screenshots

A new "Multi-session example" storybook has been added to show the effects of the lifecycle callbacks being called:

Impact to users

Ability to view a list of previous flyout sessions in state, and navigate to those flyout sessions.

QA

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

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com> Co-authored-by: Timothy Sullivan <tsullivan@elastic.co> Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

…tem`

packages/eui/src/components/flyout/manager/provider.tsx

packages/eui/src/components/flyout/manager/flyout_managed.tsx

clintandrewhall

A few nits, but looks good to me. Approving to unblock.

Great work!

packages/eui/src/components/flyout/manager/flyout_managed.tsx

packages/eui/src/components/flyout/manager/types.ts

packages/eui/src/components/flyout/flyout_menu.tsx

acstll

Only a suggestion for the changelog, and translations in EuiFlyoutMenu. I tested the feature locally and it's working as expected.

acstll · 2025-09-26T13:42:52Z

packages/eui/src/components/flyout/flyout_menu.tsx

+    <EuiButtonEmpty size="xs" color="text" {...props}>
+      <EuiIcon type="editorUndo" /> Back
+    </EuiButtonEmpty>


I don't know if you'd like to add translations now, but here's a suggestion (you'd need to adjust imports) — also, the icon can be part of EuiButtonEmpty ✨

Suggested change

<EuiButtonEmpty size="xs" color="text" {...props}>

<EuiIcon type="editorUndo" /> Back

</EuiButtonEmpty>

<EuiButtonEmpty size="xs" color="text" iconType="editorUndo" {...props}>

<EuiI18n token="euiFlyoutMenu.back" default="Back" />

</EuiButtonEmpty>

acstll · 2025-09-26T13:46:02Z

packages/eui/src/components/flyout/flyout_menu.tsx

+  return (
+    <EuiPopover
+      button={
+        <EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />


Suggested change

<EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />

<EuiButtonIcon iconType="arrowDown" color="text" aria-label={useEuiI18n('euiFlyoutMenu.history', 'History')} />

acstll · 2025-09-26T14:08:18Z

packages/eui/changelogs/upcoming/9003.md

@@ -0,0 +1 @@
+[Flyout System] Added back button, history stack managed history controls. Added history navigation events.


I think this would more alined with how changelogs are written in EUI, but feel free to take it or not. I think the important bit is having at least 1 bullet point and start with either "Added" or "Updated", while also mentioning the public-facing component affected:

Suggested change

[Flyout System] Added back button, history stack managed history controls. Added history navigation events.

- Updated `EuiFlyout` with new `onActive` callback and enable stack managed history controls.

- Updated `EuiFlyoutMenu` with new prop `historyItems` and refactored props for back button.

tsullivan · 2025-09-29T17:43:25Z

@acstll This is ready for another look!

elasticmachine · 2025-09-29T18:03:29Z

💚 Build Succeeded

History

💚 Build #1403 succeeded 03b3dfa
💚 Build #1400 succeeded 4d018ff
💚 Build #1399 succeeded fbc92b6
💚 Build #1398 succeeded 6cb11fb
💚 Build #1383 succeeded 7101792
💚 Build #1382 succeeded ef5f3b7

acstll

🟢 Looks good to merge! Thanks for the updates @tsullivan

elasticmachine · 2025-09-29T18:30:00Z

💚 Build Succeeded

Buildkite Build
Commit: eeb8d2a

History

💚 Build #4827 succeeded 03b3dfa
💚 Build #4824 succeeded 4d018ff
💚 Build #4822 succeeded 6cb11fb
💚 Build #4815 succeeded 7101792
💔 Build #4814 failed ef5f3b7
💚 Build #4797 succeeded 5349112

@tsullivan

## Summary This EUI upgrade brings the new Flyout System. While all of the changes we made are opt-in, we did have to update the DOM nesting in `EuiFlyout` and `EuiFlyoutResizable`. This change includes making overlay masks a sibling of flyouts, rather than wrapping the flyouts as children, which required internal changes to the mask's z-index value. Following @tsullivan request, please run through your UIs and make sure the flyouts render as expected, especially in the areas where you override EuiFlyout styles. ## Dependency updates - `@elastic/eui`: `v110.0.0` ⏩ `v111.0.0` - `@elastic/eui-theme-borealis`: `v5.1.0` ⏩ `v5.2.0` --- ## Changes - Removed `z-index` overrides from various places across Kibana. The updated EuiFlyout logic calculates `z-index` values dynamically based on the order of opening flyouts, making the manual overrides unnecessary. - Updated types of refs passed to `EuiFlyout` and `EuiFlyoutResizable` ## Package updates ### `@elastic/eui` v111.0.0 - Added an opt-in EuiFlyout session management for creating flyout compositions and journeys effortlessly. Session management handles side-by-side flyout rendering based on parent-child grouping, simple flyout transitions with history, state sharing, and more. ([#9202](elastic/eui#9202)) - EuiFlyout session management is an optional feature that can be enabled by adding `session="start"` to EuiFlyout. Check out the [documentation](https://eui.elastic.co/docs/components/containers/flyout/session-management) to learn more. - Added a new `hasChildBackground` boolean prop (defaults to false) to `EuiFlyout` ([#9056](elastic/eui#9056)) - Updated `EuiFlyout` with new `onActive` callback and enable stack managed history controls. ([#9003](elastic/eui#9003)) - Updated `EuiFlyoutMenu` with new prop `historyItems` and refactored props for back button. ([#9003](elastic/eui#9003)) - Added a new optional `resizable` (boolean) prop to `EuiFlyout`. Resizability can now be controlled dynamically without the need to use `EuiFlyoutResizable`. ([#8999](elastic/eui#8999)) - Flyout system menu bar: require tile, support custom actions ([#8897](elastic/eui#8897)) - Added a new `EuiFlyoutMenu` component that provides a standardized top menu bar for flyouts. ([#8851](elastic/eui#8851)) **Breaking changes** - Changed the way EuiFlyout renders overlay masks to decouple the overlay mask from the flyout itself. Now, the overlay mask is a separate portalled element. ([#9202](elastic/eui#9202)) - This change does not modify the functionality or behavior of flyout overlays but might affect some custom usages when your application relies on the specific element nesting within EuiFlyout. ### `@elastic/eui-theme-borealis` v5.2.0 - Updated parameters used for `euiAnimSlightResistance` for a smoother animation ([#9202](elastic/eui#9202)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

tsullivan and others added 19 commits September 4, 2025 23:05

Add FlyoutSystemMenu component (elastic#8851)

9568ccc

[Flyout System] Support size="fill" (elastic#8982)

67b1f48

test(EuiFlyout): update failing snapshot coming from `feat/flyout-sys…

fc0c507

…tem`

Make title required

d3ff0a9

Ideal flyout_managed structure

ed75f1e

Merge-friendly structure

912dfc6

Updte flyout_menu: showCustomActions, showBackButton and historyItems

5f67e89

Show flyout manager context on the Multi-session example

a67e1fe

Show past flyouts from manager state in the history popover

83171b2

GoBackAction and GoToFlyoutAction

ff841a0

Add onUnregister

244164c

Update tests to use new title param in addFlyout

a02cc8b

changelog

b84bca8

Move changes into TODOs for next PR

9231f54

add unit tests

861da92

add changelog

c5169f6

[Flyout System] Add managed history controls

8a862a4

handle lifecycle callbacks

3331dce

tsullivan force-pushed the session-flyouts/track-history branch 2 times, most recently from 1dac84e to 3331dce Compare September 11, 2025 16:10

tsullivan changed the base branch from main to feat/flyout-system September 11, 2025 16:24

tsullivan commented Sep 11, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/provider.tsx Outdated Show resolved Hide resolved

tsullivan commented Sep 11, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/flyout_managed.tsx Outdated Show resolved Hide resolved

tsullivan requested a review from clintandrewhall September 15, 2025 17:51

tsullivan and others added 5 commits September 15, 2025 15:54

fix lint

fe67206

[Flyout System] Support resizing flyouts (elastic#8999)

228aef4

[Flyout system] Improve flyout animations (elastic#9025)

2c31f4f

--wip-- [skip ci]

9231390

Merge branch 'feat/flyout-system' into session-flyouts/improve-menu-bar

065f1b1

tsullivan added 10 commits September 25, 2025 11:13

Merge branch 'feat/flyout-system' into session-flyouts/track-history

4500f38

Fix an auto-close issue

3c3551b

Fix multi-session stories for isOpen

ef5f3b7

Close button should go back

9a3890f

Optimize storybook

774a68b

Fix back button bug: should call onClose

7172f79

Fix some edge cases

cf70846

Storybook

fd8b026

Improve tests

c8134bd

Remove test of implementation details

6cb11fb

clintandrewhall approved these changes Sep 26, 2025

View reviewed changes

acstll self-requested a review September 26, 2025 07:57

acstll requested changes Sep 26, 2025

View reviewed changes

tsullivan force-pushed the session-flyouts/track-history branch from 7101792 to 6cb11fb Compare September 26, 2025 21:30

tsullivan added 8 commits September 28, 2025 14:16

clean up handlers in storybook

576dcb5

feedback: replace handling of state with selector

fbc92b6

mainFlyoutId: string; childFlyoutId: string;

4d018ff

consolidate EuiFlyoutCloseEvent export

03b3dfa

feedback: clean up interface declaration

274bda3

feedback: update changelog message

9c0fc33

add translations

20b0cdc

fix "Open Session E" button in multi-session example

eeb8d2a

tsullivan requested a review from acstll September 29, 2025 17:43

acstll approved these changes Sep 29, 2025

View reviewed changes

tsullivan merged commit faf365c into elastic:feat/flyout-system Sep 29, 2025
4 checks passed

tkajtoch mentioned this pull request Dec 8, 2025

Upgrade EUI to v111.0.0 elastic/kibana#245515

Merged

	<EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />
	<EuiButtonIcon iconType="arrowDown" color="text" aria-label={useEuiI18n('euiFlyoutMenu.history', 'History')} />

		@@ -0,0 +1 @@
		[Flyout System] Added back button, history stack managed history controls. Added history navigation events.

	[Flyout System] Added back button, history stack managed history controls. Added history navigation events.
	- Updated `EuiFlyout` with new `onActive` callback and enable stack managed history controls.
	- Updated `EuiFlyoutMenu` with new prop `historyItems` and refactored props for back button.

[Flyout System] Add managed history controls #9003

[Flyout System] Add managed history controls #9003

Uh oh!

Conversation

tsullivan commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

clintandrewhall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Sep 29, 2025

Uh oh!

elasticmachine commented Sep 29, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 29, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tsullivan commented Sep 9, 2025 •

edited

Loading