Skip to content

[wip] flyout manager #8876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 3 commits into from
Closed

[wip] flyout manager #8876

wants to merge 3 commits into from

Conversation

@clintandrewhall
Copy link
Contributor

@clintandrewhall clintandrewhall commented Jul 17, 2025

Summary

WIP

tsullivan
tsullivan reviewed Jul 17, 2025
View reviewed changes
tsullivan
tsullivan reviewed Jul 17, 2025
View reviewed changes
tsullivan
tsullivan reviewed Jul 17, 2025
View reviewed changes
clintandrewhall
clintandrewhall commented Jul 18, 2025
View reviewed changes
tkajtoch
tkajtoch reviewed Jul 18, 2025
View reviewed changes
@clintandrewhall clintandrewhall requested a review from Copilot July 19, 2025 12:48
Copilot AI reviewed Jul 19, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This is a work-in-progress pull request that introduces a flyout manager system to the EUI component library. The changes implement a managed flyout system that allows multiple flyouts to be stacked and coordinated through a centralized context provider.

  • Adds a new ManagedFlyoutProvider to the main EuiProvider for global flyout management
  • Implements a complete flyout management system with context, reducer, and hooks
  • Creates a new managed flyout API that can be used alongside the existing unmanaged flyouts

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
packages/eui/src/components/provider/provider.tsx Integrates ManagedFlyoutProvider into the main EuiProvider component tree
packages/eui/src/components/provider/component_defaults/component_defaults.tsx Adds commented-out type definitions for future managed flyout component defaults
packages/eui/src/components/flyout/managed/types.ts Defines TypeScript interfaces and types for the managed flyout system
packages/eui/src/components/flyout/managed/reducer.ts Implements the state management reducer for flyout operations
packages/eui/src/components/flyout/managed/managed_flyouts.stories.tsx Provides Storybook examples demonstrating managed flyout usage
packages/eui/src/components/flyout/managed/index.ts Exports the public API for the managed flyout system
packages/eui/src/components/flyout/managed/hooks.ts Implements React hooks for interacting with the flyout manager
packages/eui/src/components/flyout/managed/eui_flyout_managed.tsx Core managed flyout component with registration and lifecycle management
packages/eui/src/components/flyout/managed/eui_flyout.tsx Unified flyout component that supports both managed and unmanaged modes
packages/eui/src/components/flyout/managed/context.tsx React context provider and related components for flyout state management
packages/eui/src/components/flyout/index.ts Updates flyout exports with commented references to managed flyouts
packages/eui/src/components/flyout/flyout.tsx Exports internal props interface for use in managed flyouts
packages/eui/src/components/flyout/flyout.stories.tsx Adds commented-out examples for component defaults integration

packages/eui/src/components/flyout/managed/eui_flyout_managed.tsx Outdated
isOpen.current = true;
}
if (isOpen.current && !isRegistered) {
onClose?.({ type: 'external', flyoutId } as any);
Copy link

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using 'as any' bypasses TypeScript's type checking. Define a proper type for the onClose event parameter instead of using type assertion.

Suggested change
onClose?.({ type: 'external', flyoutId } as any);
onClose?.({ type: 'external', flyoutId });

Copilot uses AI. Check for mistakes.
packages/eui/src/components/flyout/managed/context.tsx Outdated
setRenderedManagedFlyouts((prev) => prev.filter((f) => f.id !== id));
dispatch({ type: 'CLOSE_FLYOUT', id });
if (userOnClose) {
userOnClose({ type: 'internal', flyoutId: id } as any);
Copy link

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using 'as any' bypasses TypeScript's type checking. Define a proper type for the onClose event parameter instead of using type assertion.

Copilot uses AI. Check for mistakes.
@clintandrewhall clintandrewhall force-pushed the exploration/flyout_manager branch 3 times, most recently from 579f17f to 50291ee Compare July 23, 2025 14:43
@tkajtoch tkajtoch mentioned this pull request Jul 24, 2025
Closed
@tsullivan
Copy link
Member

tsullivan commented Jul 25, 2025

@clintandrewhall you'll want to retarget this to feat/flyout-system. Draft PR for that feature branch: #8914

@clintandrewhall clintandrewhall force-pushed the exploration/flyout_manager branch from 50291ee to 68b8592 Compare July 27, 2025 16:36
@clintandrewhall clintandrewhall changed the base branch from main to feat/flyout-system July 27, 2025 16:37
@elasticmachine
Copy link
Collaborator

elasticmachine commented Aug 1, 2025

💔 Build Failed

Failed CI Steps

History

@elasticmachine
Copy link
Collaborator

elasticmachine commented Aug 1, 2025

💔 Build Failed

Failed CI Steps

History

@clintandrewhall clintandrewhall force-pushed the feat/flyout-system branch 3 times, most recently from 1fb4398 to 10b6549 Compare August 6, 2025 18:34
@tsullivan tsullivan force-pushed the feat/flyout-system branch 2 times, most recently from d199818 to 32edff0 Compare October 27, 2025 20:19
@tkajtoch tkajtoch deleted the branch elastic:feat/flyout-system October 30, 2025 16:10
@tkajtoch tkajtoch closed this Oct 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tsullivan tsullivan tsullivan left review comments

@tkajtoch tkajtoch tkajtoch left review comments

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@clintandrewhall @tsullivan @elasticmachine @tkajtoch