Skip to content

[Discover] Fix app menu focus when closing background search flyout #250332

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

Merged
davismcphee merged 1 commit into from
Jan 26, 2026
Merged

[Discover] Fix app menu focus when closing background search flyout #250332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion src/platform/plugins/shared/data/public/search/search_service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,6 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
fieldFormats,
dataViews,
inspector,
screenshotMode,
scriptedFieldsEnabled,
share,
cps,
Expand Down
10 changes: 1 addition & 9 deletions src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const setup = () => {
render(
<IntlProvider>
<Flyout
flyoutId="test"
onClose={onClose}
api={api}
config={mockConfig}
Expand Down Expand Up @@ -85,15 +86,6 @@ describe('<Flyout />', () => {
expect(screen.getByRole('columnheader', { name: 'Status' })).toBeInTheDocument();
});

describe('when the header close button is clicked', () => {
it('calls the onClose callback', async () => {
const { onClose, user } = setup();
const closeButton = screen.getByLabelText('Close this dialog');
await user.click(closeButton);
expect(onClose).toHaveBeenCalled();
});
});
Comment on lines 88 to -95
Copy link
Copy Markdown
Contributor

@AlexGPlay AlexGPlay Jan 26, 2026

Choose a reason for hiding this comment

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

we should be able to keep this test if we still have the close button on the top right

Copy link
Copy Markdown
Contributor Author

@davismcphee davismcphee Jan 26, 2026

Choose a reason for hiding this comment

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

The top right close button is now handled through coreStart.overlays.openFlyout and doesn't appear when rendering Flyout directly, so I wasn't sure how to preserve this test. I'm going to merge this PR to get the fix in, but I can open a follow up to restore this test if you have suggestions how.


describe('when the footer close button is clicked', () => {
it('calls the onClose callback', async () => {
const { onClose, user } = setup();
Expand Down
14 changes: 6 additions & 8 deletions src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@ import {
EuiBetaBadge,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiTitle,
useGeneratedHtmlId,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
Expand All @@ -28,11 +26,10 @@ import { SearchSessionsMgmtTable } from '../components/table';
import type { SearchUsageCollector } from '../../../collectors';
import type { BackgroundSearchOpenedHandler, LocatorsStart } from '../types';
import { getColumns } from './get_columns';
import { FLYOUT_WIDTH } from './constants';
import type { ISearchSessionEBTManager } from '../../ebt_manager';

export const Flyout = ({
onClose,
flyoutId,
api,
coreStart,
usageCollector,
Expand All @@ -43,8 +40,9 @@ export const Flyout = ({
appId,
trackingProps,
onBackgroundSearchOpened,
onClose,
}: {
onClose: () => void;
flyoutId: string;
api: SearchSessionsMgmtAPI;
coreStart: CoreStart;
usageCollector: SearchUsageCollector;
Expand All @@ -55,14 +53,14 @@ export const Flyout = ({
appId?: string;
trackingProps: { openedFrom: string };
onBackgroundSearchOpened?: BackgroundSearchOpenedHandler;
onClose: () => void;
}) => {
const flyoutId = useGeneratedHtmlId();
const technicalPreviewLabel = i18n.translate('data.session_mgmt.technical_preview_label', {
defaultMessage: 'Technical preview',
});

return (
<EuiFlyout size={FLYOUT_WIDTH} aria-labelledby={flyoutId} onClose={onClose}>
<>
<EuiFlyoutHeader hasBorder>
<EuiFlexGroup alignItems="center">
<EuiTitle id={flyoutId} size="m">
Expand Down Expand Up @@ -98,6 +96,6 @@ export const Flyout = ({
<FormattedMessage id="data.session_mgmt.close_flyout" defaultMessage="Close" />
</EuiButtonEmpty>
</EuiFlyoutFooter>
</EuiFlyout>
</>
);
};
18 changes: 15 additions & 3 deletions src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/get_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type { CoreStart } from '@kbn/core/public';
import { toMountPoint } from '@kbn/react-kibana-mount';
import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
import type { SharePluginStart } from '@kbn/share-plugin/public';
import { htmlIdGenerator } from '@elastic/eui';
import type { ISessionsClient } from '../../../..';
import { SearchSessionsMgmtAPI } from '../lib/api';
import type { SearchUsageCollector } from '../../../collectors';
Expand All @@ -21,6 +22,8 @@ import type { BackgroundSearchOpenedHandler } from '../types';
import { FLYOUT_WIDTH } from './constants';
import type { ISearchSessionEBTManager } from '../../ebt_manager';

const flyoutIdGenerator = htmlIdGenerator('searchSessionsFlyout');

export function openSearchSessionsFlyout({
coreStart,
kibanaVersion,
Expand All @@ -42,6 +45,7 @@ export function openSearchSessionsFlyout({
appId: string;
trackingProps: { openedFrom: string };
onBackgroundSearchOpened?: BackgroundSearchOpenedHandler;
onClose?: () => void;
}) => {
const api = new SearchSessionsMgmtAPI(sessionsClient, config, {
notifications: coreStart.notifications,
Expand All @@ -51,15 +55,22 @@ export function openSearchSessionsFlyout({
});
const { Provider: KibanaReactContextProvider } = createKibanaReactContext(coreStart);

const flyoutId = flyoutIdGenerator();
const closeFlyout = async () => {
await flyout.close();
attrs.onClose?.();
};

const flyout = coreStart.overlays.openFlyout(
toMountPoint(
coreStart.rendering.addContext(
<KibanaReactContextProvider>
<Flyout
onClose={() => flyout.close()}
flyoutId={flyoutId}
onClose={closeFlyout}
onBackgroundSearchOpened={(params) => {
attrs.onBackgroundSearchOpened?.(params);
flyout.close();
closeFlyout();
}}
appId={attrs.appId}
api={api}
Expand All @@ -76,8 +87,9 @@ export function openSearchSessionsFlyout({
coreStart
),
{
hideCloseButton: true,
size: FLYOUT_WIDTH,
['aria-labelledby']: flyoutId,
onClose: closeFlyout,
}
);

Expand Down
1 change: 1 addition & 0 deletions src/platform/plugins/shared/data/public/search/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export interface ISearchStart {
appId: string;
trackingProps: { openedFrom: string };
onBackgroundSearchOpened?: BackgroundSearchOpenedHandler;
onClose?: () => void;
}) => void;
/**
* Feature flag value to make it easier to use in different plugins
Expand Down
6 changes: 3 additions & 3 deletions ...lic/application/main/components/top_nav/app_menu_actions/get_background_search_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import type { AppMenuItemType } from '@kbn/core-chrome-app-menu-components';
import type { DiscoverAppMenuItemType, DiscoverAppMenuRunAction } from '@kbn/discover-utils';
import { AppMenuActionId } from '@kbn/discover-utils';
import { i18n } from '@kbn/i18n';

export const getBackgroundSearchFlyout = ({
onClick,
}: {
onClick: () => void;
}): AppMenuItemType => {
onClick: DiscoverAppMenuRunAction;
}): DiscoverAppMenuItemType => {
return {
id: AppMenuActionId.backgroundsearch,
order: 6,
Expand Down
3 changes: 2 additions & 1 deletion .../plugins/shared/discover/public/application/main/components/top_nav/use_top_nav_links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,14 +139,15 @@ export const useTopNavLinks = ({
services.capabilities.discover_v2.storeSearchSession
) {
const backgroundSearchFlyoutMenuItem = getBackgroundSearchFlyout({
onClick: () => {
onClick: ({ context: { onFinishAction } }) => {
services.data.search.showSearchSessionsFlyout({
appId,
trackingProps: { openedFrom: 'background search button' },
onBackgroundSearchOpened: ({ session, event }) => {
event?.preventDefault();
dispatch(internalStateActions.openSearchSessionInNewTab({ searchSession: session }));
},
onClose: onFinishAction,
});
},
});
Expand Down
Loading