diff --git a/packages/eui/src/components/flyout/flyout.test.tsx b/packages/eui/src/components/flyout/flyout.test.tsx index fac7862d66d..3d2e4de8bcf 100644 --- a/packages/eui/src/components/flyout/flyout.test.tsx +++ b/packages/eui/src/components/flyout/flyout.test.tsx @@ -438,7 +438,7 @@ describe('EuiFlyout', () => { }); describe('flyout routing logic', () => { - it('routes to child flyout when session is undefined and there is an active session', () => { + it('routes to child flyout when session is "inherit" and there is an active session', () => { // First render with just the main flyout to establish a session const { rerender, getByTestSubject } = render( @@ -463,7 +463,7 @@ describe('EuiFlyout', () => { {}} data-test-subj="child-flyout" - // session is undefined (not explicitly set) + session="inherit" /> ); @@ -514,7 +514,27 @@ describe('EuiFlyout', () => { expect(flyout).not.toHaveAttribute('data-managed-flyout-level'); }); - it('routes to child flyout when in managed context and there is an active session', () => { + it('routes to standard flyout when session undefined and there is an active session', () => { + const { getByTestSubject } = render( + + {/* Create an active session */} + {}} + session="start" + flyoutMenuProps={{ title: 'Main Flyout' }} + data-test-subj="main-flyout" + /> + {/* This flyout opted out of session management by default */} + {}} data-test-subj="standard-flyout" /> + + ); + + // Should render as standard flyout (EuiFlyoutComponent) + const flyout = getByTestSubject('standard-flyout'); + expect(flyout).not.toHaveAttribute('data-managed-flyout-level'); + }); + + it('routes to child flyout when session is "inherit" in a managed context and there is an active session', () => { // First render with just the main flyout to establish a session const { rerender, getByTestSubject } = render( @@ -539,7 +559,7 @@ describe('EuiFlyout', () => { {}} data-test-subj="child-flyout" - session={undefined} // Not explicitly set, should inherit + session="inherit" /> ); @@ -562,5 +582,35 @@ describe('EuiFlyout', () => { const flyout = getByTestSubject('flyout'); expect(flyout).not.toHaveAttribute('data-managed-flyout-level'); }); + + it('routes to standard flyout when session="inherit" but there is no active session', () => { + const { getByTestSubject } = render( + {}} + data-test-subj="flyout" + session="inherit" // Explicitly set to inherit, but no session to inherit from + /> + ); + + // Should gracefully degrade to standard flyout (EuiFlyoutComponent) when no session exists + const flyout = getByTestSubject('flyout'); + expect(flyout).not.toHaveAttribute('data-managed-flyout-level'); + }); + + it('routes to standard flyout when session="inherit" within Manager but no active session', () => { + const { getByTestSubject } = render( + + {}} + data-test-subj="flyout" + session="inherit" // Manager context exists but no main flyout has been created + /> + + ); + + // Should gracefully degrade to standard flyout when Manager exists but no session is active + const flyout = getByTestSubject('flyout'); + expect(flyout).not.toHaveAttribute('data-managed-flyout-level'); + }); }); }); diff --git a/packages/eui/src/components/flyout/flyout.tsx b/packages/eui/src/components/flyout/flyout.tsx index 23a44f1e213..52e48554311 100644 --- a/packages/eui/src/components/flyout/flyout.tsx +++ b/packages/eui/src/components/flyout/flyout.tsx @@ -38,8 +38,8 @@ export type EuiFlyoutProps = Omit< /** * Controls the way the session is managed for this flyout. * - `start`: Creates a new flyout session. Use this for the main flyout. - * - `inherit`: (default) Inherits an existing session if one is active, otherwise functions as a standard flyout. - * - `never`: Opts out of session management and always functions as a standard flyout. + * - `inherit`: Inherits an existing session if one is active, otherwise functions as a standard flyout. + * - `never`: (default) Disregards session management and always functions as a standard flyout. * * Check out [EuiFlyout session management](https://eui.elastic.co/docs/components/containers/flyout/session-management) * documentation to learn more. @@ -67,7 +67,7 @@ export const EuiFlyout = forwardRef< as, onClose, onActive, - session = SESSION_INHERIT, + session = SESSION_NEVER, ...rest } = usePropsWithComponentDefaults('EuiFlyout', props); const hasActiveSession = useRef(useHasActiveSession()); diff --git a/packages/eui/src/components/flyout/manager/const.ts b/packages/eui/src/components/flyout/manager/const.ts index af6341a2afe..b2044b611ec 100644 --- a/packages/eui/src/components/flyout/manager/const.ts +++ b/packages/eui/src/components/flyout/manager/const.ts @@ -8,9 +8,6 @@ /** * Allowed values for `session` prop to control the way the session is managed for a flyout. - * - `session="start"`: Creates a new flyout session. Use this for the main flyout. - * - `session="inherit"`: (default) Inherits an existing session if one is active, otherwise functions as a standard flyout. - * - `session="never"`: Opts out of session management and always functions as a standard flyout. */ export const SESSION_START = 'start'; export const SESSION_INHERIT = 'inherit'; diff --git a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx index 5ea91759a1d..71eb9e78cdc 100644 --- a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx +++ b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx @@ -173,7 +173,7 @@ const FlyoutSession: React.FC = React.memo((props) => { }, { title: 'session', - description: 'start', + description: start, }, ]} /> @@ -187,42 +187,42 @@ const FlyoutSession: React.FC = React.memo((props) => { )} - {childSize && isChildFlyoutVisible && ( - - - -

This is the content of the child flyout of {title}.

- - -
-
-
- )} +
+ )} + {childSize && isChildFlyoutVisible && ( + + + +

This is the content of the child flyout of {title}.

+ + inherit, + }, + ]} + /> +
+
)} @@ -252,6 +252,7 @@ const NonSessionFlyout: React.FC<{ Open non-session flyout + {/* Using default EuiFlyout session behavior of 'never' */} {isFlyoutVisible && ( @@ -272,9 +272,9 @@ const NonSessionFlyout: React.FC<{

- This is the content of a non-session flyout. We assure it will - never become a managed flyout by setting{' '} - {'session={never}'}. + This is the content of a non-session flyout. It is assured to + not be a managed flyout using the{' '} + {'session={never}'} behavior.

+ never (using default) + + ), + }, ]} />
@@ -467,6 +474,7 @@ const ExternalRootChildFlyout: React.FC<{ parentId: string }> = ({ {isOpen && ( { setIsOpenFlyoutA(false)} > - This flyout is rendered with the {'session="start"'} prop set which creates a new flyout session and marks this flyout as main. + This is Flyout A. This flyout is rendered with the {'session="start"'} prop set which created a new flyout session and marks this flyout as main. setName(e.target.value)} /> @@ -68,9 +64,9 @@ export default () => { > - This flyout is also rendered with the {'session="start"'} prop added which creates a second flyout session and marks this flyout as main in that session. + This is Flyout B. This flyout is also rendered with the {'session="start"'} prop added which creates a second flyout session and marks this flyout as main in that session.

- The first flyout still exists but is currently hidden since this one took precedence. You can jump back to it by clicking the Back button above if you'd like. + Flyout A exists but is currently hidden since this one took precedence. You can jump back to it by clicking the Back button above if you'd like.
setIsOpenFlyoutBChild((val) => !val)}> @@ -78,7 +74,12 @@ export default () => {
{isOpenFlyoutBChild && ( - setIsOpenFlyoutBChild(false)}> + setIsOpenFlyoutBChild(false)} + > This is a child flyout of Flyout B. It belongs to the same session as Flyout B because it's rendered inside of it and doesn't have the session prop set. @@ -113,8 +114,7 @@ about compatibility issues. Each time you set `session="start"`, you create a new flyout session and mark the rendered flyout as [main](#main-flyouts). To create a [child flyout](#child-flyouts) - a flyout that belongs to the same -session as the main flyout - you can set `session="inherit"` or omit the `session` prop entirely, -as "inherit" is the default behavior. +session as the main flyout - set `session="inherit"`. All bindings and configuration will be handled automatically. ### Session title @@ -134,8 +134,8 @@ field of the `flyoutMenuProps` to set the title of the flyout. I'm the main flyout - {/* Render a new child flyout - notice the lack of the `session` prop */} ``` -To prevent a flyout from being a part of the session management system, you -can set `session="never"` which will render it as a regular unmanaged flyout. +To prevent a flyout from being a part of the session management system, you can +set `session="never"`, or you can omit the `session` prop as `never` is the +default. This will will render it as a regular unmanaged flyout. ```tsx <> @@ -186,9 +187,10 @@ of an alert. ### Child flyouts -Child flyouts are directly related to a main flyout in their session. -They're created by rendering a `EuiFlyout` **without the session prop** inside -a [main flyout](#main-flyouts) - a flyout with `session="start"` prop set. +Child flyouts are directly related to a main flyout in their session. They're +created by rendering a `EuiFlyout` with the `session="inherit"` prop set while +there is an active [main flyout](#main-flyouts) - a flyout with +`session="start"` prop set. They're meant to display secondary level information like the alert visualization.