Add FlyoutSystemMenu component #8851

tsullivan · 2025-07-08T22:37:58Z

~~Closes #8873~~

Summary

Adds a new EuiFlyoutMenu component that provides a standardized top menu bar for flyouts. Key features:

Replaces the standard close button with a menu bar containing title, navigation, and close button
Integrates with both EuiFlyout and EuiFlyoutChild components
Adds support for back navigation and history through a dropdown menu

Enhances the flyout session API with:

New openSystemFlyout method for creating flyouts designed for flyout-to-flyout navigation (flyout sessions).
History filtering capability via a new historyFilter prop in EuiFlyoutSessionProvider
Support for titles in all flyout types (main, child, and group)
Improved navigation with GO_TO_HISTORY_ITEM action for direct history access

Other changes:

cb105a6: Fix an issue in flyoutReducer where the meta data from incoming actions needed to be merged with the past state. Caused by #8857

Why are we making this change?

Part of https://github.com/elastic/kibana-team/issues/1606 - SharedUX Flyout System

Screenshots

Demonstrating navigating deeply through history

The "popover" showing history allows the user to return back to a flyout screen they'd seen an arbitrary number of steps in history

Demonstrating the historyFilter

After confirming the order, the "Order Confirmation" flyout does not have a "Back" button.
Clicking "Close / Go Back" triggers the "Close" behavior, because history in the state can no longer be accessed.

Impact to users

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)

tsullivan · 2025-07-08T23:55:30Z

packages/eui/src/components/flyout/sessions/flyout_reducer.ts

      const newHistory = [...state.history];

      if (state.activeFlyoutGroup) {
-        newHistory.push(state.activeFlyoutGroup);
+        newHistory.unshift(state.activeFlyoutGroup);


Changed the ordering of history items to be reversed (newest in the front) to simplify the rendering of the history popover.

ryankeairns · 2025-07-16T19:20:19Z

@tsullivan I think the answer is 'yes' but will EuiFlyoutMenu be available on any EuiFlyout?
Spoiler alert: that was the expected outcome :)

tsullivan · 2025-07-16T22:27:44Z

@tsullivan I think the answer is 'yes' but will EuiFlyoutMenu be available on any EuiFlyout?
Spoiler alert: that was the expected outcome :)

@ryankeairns, yes there aren't any limitations against putting an EuiFlyoutMenu in any EuiFlyout.

If you are rendering the components declaratively, you can compose them this way:

  <EuiFlyout>
    <EuiFlyoutMenu />
    <EuiFlyoutHeader />
    <EuiFlyoutBody />
    <EuiFlyoutFooter />
  </EuiFlyout>

The EuiFlyout should be smart about where to place the "close" button: it has to either go into the flyout itself or the top bar (EuiFlyoutMenu). The intention is for the EuiFlyout to check if one of the child components is an EuiFlyoutMenu, and then defer rendering the "close" button to allow it to be rendered in the EuiFlyoutMenu component.

This PR currently updates the API for state management: if you want to open a "basic" flyout and have a flyout that looks exactly the way flyouts look in the current version, then you would call openFlyout. If your use case will have flyout-to-flyout navigation flyouts and child flyouts, then you would call openSystemFlyout. The main difference is: the latter method is intended for "session" use cases and all flyouts in the session will automatically get an EuiFlyoutMenu.

Note that this PR is still in draft mode because the API decisions may need to change.

cc @clintandrewhall

ryankeairns · 2025-07-16T23:22:30Z

Thanks @tsullivan .
For tracking purposes, I went ahead and created an issue

Added the 'Closes [issue]' text to the PR description. Feel free to remove that if you feel it is not needed here.

tsullivan · 2025-07-16T23:58:33Z

Updated the description, added screenshots.

tsullivan · 2025-07-17T17:57:08Z

@ryankeairns from that issue, I see:

I want to place a common actions atop several flyotuts (e.g. back, share, settings, chat, close)

👍🏻

This PR does support custom actions that implementors want to show in the menu bar, if the developers render the flyout structure declaratively. But for developers that use state management system API:

~~openSystemFlyout~~ openManagedFlyout: Shows menu bar automatically, with history controls, flyout title, and close button. No option for custom actions in the menu bar.
openFlyout: No automatic menu bar.

I think this is good for now, as I need to avoid making the state management system too polished in this phase. Some API design changes are forthcoming to meet a set of refined Kibana developer requirements. Some terminology changes will come in through that as well.

cc @clintandrewhall @ThomThomson

ryankeairns · 2025-07-17T18:02:29Z

Understood.

For those following along, we understand that the current Security flyout does have custom actions that we'll ultimately need to support in the managed setup.

tsullivan · 2025-07-17T19:50:54Z

Added a storybook specifically for the flyout menu, showing a custom action. For now, the layout and styling for the custom action buttons works best with when the buttons are icons, and have a customized block-size CSS.

tsullivan · 2025-07-22T14:16:11Z

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

+  /**
+   * Title to display in top menu bar and in the options of the history popover
+   */
+  title: string;


@clintandrewhall just want to point this field out specifically, because we will have to think about how titles will be displayed in the top menu bar and in the history popover with the replacement API.

tsullivan · 2025-07-22T17:19:47Z

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

+  historyFilter?: (
+    history: EuiFlyoutSessionHistoryState<FlyoutMeta>['history'],
+    activeFlyoutGroup?: EuiFlyoutSessionGroup<FlyoutMeta> | null
+  ) => EuiFlyoutSessionHistoryState<FlyoutMeta>['history'];


I asked @ryankeairns about this today for clarification. When the design idea for this came up, it was to limit the number of items in the history popover visually. Old items in the history should still be accessible by scrolling down or paging back. The idea actually wasn't to give developers a way to pull items out of the history or replace a given set of history items with another, or empty the history completely. So the historyFilter mechanism as it is in this PR isn't actually needed at this point. (But maybe it doesn't hurt to leave it here).

tkajtoch · 2025-07-23T09:50:00Z

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

+}) => {
+  const { onClose } = useContext(EuiFlyoutMenuContext);
+
+  const styles = useEuiFlyoutMenuStyles();


nit: Could you please use useEuiMemoizedStyles instead? It passes euiTheme as an argument to the given styles function, so useEuiFlyoutMenuStyles could be pure.

packages/eui/src/components/flyout/sessions/managed_flyout_menu.tsx

Cherry-picked from PR elastic#8851 by tsullivan. This adds the EuiFlyoutMenu component and managed flyout menu functionality, including bug fixes, terminology updates, documentation, and stories.

ryankeairns · 2025-07-23T15:01:31Z

I see the flyout menu bar does not appear on the EuiFlyoutChild stories which leads me to clarify a requirement - the menu bar should always be present on managed flyouts, both parent and child.

In its most minimal state, it would show the close button.

elasticmachine · 2025-07-24T00:56:03Z

💚 Build Succeeded

History

💚 Build #848 succeeded 969d85e
💚 Build #804 succeeded 72c069c
💚 Build #803 succeeded 37fc2f6
💚 Build #785 succeeded b65ce43
💚 Build #783 succeeded b5a3212
💔 Build #756 failed 9891366

cc @tsullivan

elasticmachine · 2025-07-24T01:06:42Z

💚 Build Succeeded

Buildkite Build
Commit: b1cc33f

History

💚 Build #4433 succeeded 969d85e
💚 Build #4401 succeeded 72c069c
💚 Build #4400 succeeded 37fc2f6
💚 Build #4386 succeeded b65ce43
💚 Build #4384 succeeded b5a3212
💚 Build #4364 succeeded 9891366

cc @tsullivan

tkajtoch · 2025-07-25T10:26:46Z

@tsullivan I updated the base to feat/flyout-system as discussed. Considering this goes to a feature branch now, I'm happy with the current state of this PR. Let me know if you wanna add or address anything else before merging it

tsullivan force-pushed the flyout-system/add-top-menu branch from 1538889 to 2ec3f5f Compare July 8, 2025 23:52

tsullivan commented Jul 8, 2025

View reviewed changes

tsullivan force-pushed the flyout-system/add-top-menu branch 2 times, most recently from a19f9d3 to 9891366 Compare July 15, 2025 00:16

tsullivan mentioned this pull request Jul 15, 2025

[SharedUX] Global Flyout Orchestrator service elastic/kibana#227155

Closed

10 tasks

tsullivan force-pushed the flyout-system/add-top-menu branch from 9891366 to b5a3212 Compare July 16, 2025 22:05

tsullivan added 3 commits July 17, 2025 10:58

EuiFlyoutMenu

f1e4c9b

Fix bug: meta must be merged with past state

d9e62d5

fix order confirmed flyout size

4cce15d

terminology change: system flyout => managed flyout

37fc2f6

tsullivan force-pushed the flyout-system/add-top-menu branch from b65ce43 to 37fc2f6 Compare July 17, 2025 18:21

tsullivan added 2 commits July 17, 2025 12:03

add changelog

c927ffd

Add docs and flyout menu stories

72c069c

tsullivan marked this pull request as ready for review July 17, 2025 19:51

tsullivan requested a review from a team as a code owner July 17, 2025 19:51

tsullivan self-assigned this Jul 17, 2025

tsullivan requested review from clintandrewhall, ryankeairns, tkajtoch and weronikaolejniczak July 18, 2025 02:04

Merge branch 'main' into flyout-system/add-top-menu

969d85e

tsullivan commented Jul 22, 2025

View reviewed changes

tkajtoch reviewed Jul 23, 2025

View reviewed changes

packages/eui/src/components/flyout/sessions/managed_flyout_menu.tsx Outdated Show resolved Hide resolved

tsullivan added 2 commits July 23, 2025 16:01

Merge branch 'main' into flyout-system/add-top-menu

921dbcd

useEuiMemoizedStyles for flyout menu styles

210a5de

tsullivan mentioned this pull request Jul 24, 2025

EuiFlyout Add menu bar support for custom actions and links #8873

Open

switch back button to EuiButtonEmpty, fix FlexGroup issues

b1cc33f

tkajtoch changed the base branch from main to feat/flyout-system July 25, 2025 10:25

tsullivan merged commit 1fb4398 into elastic:feat/flyout-system Jul 25, 2025
5 checks passed

tsullivan deleted the flyout-system/add-top-menu branch July 25, 2025 20:10

Add FlyoutSystemMenu component #8851

Add FlyoutSystemMenu component #8851

Uh oh!

Conversation

tsullivan commented Jul 8, 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!

tsullivan Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Jul 16, 2025

Uh oh!

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

Uh oh!

Uh oh!

ryankeairns commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tsullivan commented Jul 16, 2025

Uh oh!

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

Uh oh!

Uh oh!

ryankeairns commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tsullivan commented Jul 17, 2025

Uh oh!

tsullivan Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ryankeairns commented Jul 23, 2025

Uh oh!

elasticmachine commented Jul 24, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 24, 2025

💚 Build Succeeded

History

Uh oh!

tkajtoch commented Jul 25, 2025

Uh oh!

Uh oh!

Uh oh!

tsullivan commented Jul 8, 2025 •

edited

Loading

tsullivan commented Jul 16, 2025 •

edited

Loading

ryankeairns commented Jul 16, 2025 •

edited

Loading

tsullivan commented Jul 17, 2025 •

edited

Loading

ryankeairns commented Jul 17, 2025 •

edited

Loading

tsullivan Jul 22, 2025 •

edited

Loading