Skip to content

[Flyouts Example Plugin] Use historyKey for flyout demos #260557

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

Closed
tsullivan wants to merge 19 commits into from
Closed

[Flyouts Example Plugin] Use historyKey for flyout demos #260557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b1e32f0
Update EUI to v114.0.0
acstll Mar 25, 2026
6188286
Update @elastic/eslint-plugin-eui
acstll Mar 25, 2026
0835cd5
[Security Plugin] Update snapshots
acstll Mar 25, 2026
19a0b33
[Discover][Scout] Fix flyout tests related to new scoped history
acstll Mar 25, 2026
1e7c214
Revert "[Discover][Scout] Fix flyout tests related to new scoped hist…
tsullivan Mar 25, 2026
9a9528e
wiring of historyKey for Traces Waterfall flyout
tsullivan Mar 25, 2026
e3dcf9f
Move cascade-close flyout stability test to Traces in Discover
tsullivan Mar 25, 2026
bbb1ddd
Fix for 'Explore from APM › Errors page - "Open in Discover"' test
tsullivan Mar 25, 2026
038cf56
Changes from node scripts/eslint_all_files --no-cache --fix
kibanamachine Mar 26, 2026
b019a02
Fix lint error in 'Explore from APM › Errors page - Open in Discover'…
acstll Mar 29, 2026
eedd32f
Merge branch 'main' into eui/v114.0.0
weronikaolejniczak Mar 31, 2026
5f43e9d
TO FIX: Run node 'scripts/yarn_deduplicate && yarn kbn bootstrap' loc…
kibanamachine Mar 31, 2026
6bec361
Changes from node scripts/eslint_all_files --no-cache --fix
kibanamachine Mar 31, 2026
6fb8bbd
remove strictness from useFlyoutHistoryKey hook
tsullivan Mar 31, 2026
7df0c06
fix ts error
tsullivan Mar 31, 2026
95cd705
add historyKey
tsullivan Mar 31, 2026
e283709
refactor non-session flyouts
tsullivan Mar 31, 2026
2401e61
clean up filler text
tsullivan Mar 31, 2026
3a1903b
page sections tweak
tsullivan Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 24 additions & 100 deletions examples/flyout_system/public/components/_flyout_with_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,20 @@ import {
} from '../utils';

interface SessionFlyoutProps {
historyKey: symbol;
title: string;
mainSize: 's' | 'm' | 'l' | 'fill';
mainMaxWidth?: number;
childSize: 's' | 'm' | 'fill';
childMaxWidth?: number;
}

interface FlyoutFromComponentsProps {
historyKey: symbol;
}

const SessionFlyout: React.FC<SessionFlyoutProps> = React.memo((props) => {
const { title, mainSize, childSize, mainMaxWidth, childMaxWidth } = props;
const { title, mainSize, childSize, mainMaxWidth, childMaxWidth, historyKey } = props;

const [flyoutType, setFlyoutType] = useState<'overlay' | 'push'>('overlay');
const [flyoutOwnFocus, setFlyoutOwnFocus] = useState<boolean>(false);
Expand Down Expand Up @@ -155,6 +160,7 @@ const SessionFlyout: React.FC<SessionFlyoutProps> = React.memo((props) => {
<EuiFlyout
id={`mainFlyout-${title}`}
session="start"
historyKey={historyKey}
aria-labelledby="sessionFlyoutTitle"
size={mainSize}
maxWidth={mainMaxWidth}
Expand Down Expand Up @@ -256,6 +262,7 @@ const SessionFlyout: React.FC<SessionFlyoutProps> = React.memo((props) => {
<EuiFlyout
id={`childFlyout-${title}-a`}
session="inherit"
historyKey={historyKey}
aria-labelledby="childFlyoutATitle"
size={childSize}
hasChildBackground={true}
Expand Down Expand Up @@ -299,6 +306,7 @@ const SessionFlyout: React.FC<SessionFlyoutProps> = React.memo((props) => {
<EuiFlyout
id={`childFlyout-${title}-b`}
session="inherit"
historyKey={historyKey}
aria-labelledby="childFlyoutBTitle"
size={childSize}
hasChildBackground={true}
Expand Down Expand Up @@ -344,84 +352,7 @@ const SessionFlyout: React.FC<SessionFlyoutProps> = React.memo((props) => {

SessionFlyout.displayName = 'SessionFlyoutFromComponents';

const GlobalFlyout: React.FC = React.memo(() => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

// Refs for manual focus management
const triggerRef = useRef<HTMLButtonElement>(null);

const handleOpenFlyout = () => {
setIsFlyoutVisible(true);
};

// BUG: EuiFlyout does not call onActive when session={false}
const flyoutOnActive = useCallback(() => {
console.log('activate non-session flyout'); // eslint-disable-line no-console
}, []);

const flyoutOnClose = useCallback(() => {
console.log('close non-session flyout'); // eslint-disable-line no-console
setIsFlyoutVisible(false);

// Return focus to trigger button after closing flyout
setTimeout(() => {
triggerRef.current?.focus();
}, 100);
}, []);

return (
<>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiText>
<EuiButton buttonRef={triggerRef} disabled={isFlyoutVisible} onClick={handleOpenFlyout}>
Open Global Flyout
</EuiButton>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
{isFlyoutVisible && (
<EuiFlyout
aria-labelledby="nonSessionFlyoutTitle"
onActive={flyoutOnActive}
onClose={flyoutOnClose}
type="overlay"
container={null}
size="m"
ownFocus={true}
session="never"
>
<EuiFlyoutHeader hasBorder>
<EuiText>
<h2 id="nonSessionFlyoutTitle">Global flyout</h2>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
This flyout is rendered using <EuiCode>EuiFlyout</EuiCode> directly without session
management.
</p>
</EuiText>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={flyoutOnClose} aria-label="Close">
Close
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
)}
</>
);
});

GlobalFlyout.displayName = 'GlobalFlyoutFromComponents';

export const FlyoutWithComponent: React.FC = () => (
export const FlyoutWithComponent: React.FC<FlyoutFromComponentsProps> = ({ historyKey }) => (
<>
<EuiTitle>
<h2>
Expand All @@ -441,33 +372,26 @@ export const FlyoutWithComponent: React.FC = () => (
listItems={[
{
title: 'Session J: main size = s, child size = s',
description: <SessionFlyout title="Session J" mainSize="s" childSize="s" />,
description: (
<SessionFlyout title="Session J" mainSize="s" childSize="s" historyKey={historyKey} />
),
},
{
title: 'Session K: main size = m, child size = s',
description: <SessionFlyout title="Session K" mainSize="m" childSize="s" />,
description: (
<SessionFlyout title="Session K" mainSize="m" childSize="s" historyKey={historyKey} />
),
},
{
title: 'Session L: main size = m, child size = fill',
description: <SessionFlyout title="Session L" mainSize="m" childSize="fill" />,
},
]}
/>

<EuiSpacer size="m" />

<EuiTitle size="s">
<h3>
With <EuiCode>{'session="never"'}</EuiCode>
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiDescriptionList
type="column"
listItems={[
{
title: 'Global flyout: size = m',
description: <GlobalFlyout />,
description: (
<SessionFlyout
title="Session L"
mainSize="m"
childSize="fill"
historyKey={historyKey}
/>
),
},
]}
/>
Expand Down
Loading
Loading