diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx index 1727f99786886..310962e6d6d26 100644 --- a/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx +++ b/src/platform/plugins/private/inspect_component/public/components/inspect/inspect_button.test.tsx @@ -19,6 +19,7 @@ import { mockBranch } from '../../__mocks__/mocks'; jest.mock('../../lib/keyboard_shortcut/keyboard_shortcut', () => ({ isKeyboardShortcut: jest.fn(), isMac: jest.fn(), + isEscapeKey: jest.fn(), })); const mockedIsKeyboardShortcut = jest.mocked(isKeyboardShortcut); diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx index a3674f38fb1f0..18d74d6766044 100644 --- a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx +++ b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.test.tsx @@ -16,6 +16,7 @@ import { InspectOverlay } from './inspect_overlay'; import { getElementFromPoint } from '../../../lib/dom/get_element_from_point'; import { findSourceComponent } from '../../../lib/fiber/find_source_component'; import { getInspectedElementData } from '../../../lib/get_inspected_element_data'; +import { isEscapeKey } from '../../../lib/keyboard_shortcut/keyboard_shortcut'; import { mockBranch } from '../../../__mocks__/mocks'; jest.mock('../../../lib/dom/get_element_from_point', () => ({ @@ -30,6 +31,12 @@ jest.mock('../../../lib/get_inspected_element_data', () => ({ getInspectedElementData: jest.fn(), })); +jest.mock('../../../lib/keyboard_shortcut/keyboard_shortcut', () => ({ + isKeyboardShortcut: jest.fn(), + isMac: jest.fn(), + isEscapeKey: jest.fn(), +})); + describe('InspectOverlay', () => { let mockCoreStart: CoreStart; @@ -130,4 +137,23 @@ describe('InspectOverlay', () => { expect(setFlyoutOverlayRef).not.toHaveBeenCalled(); }); }); + + it('should close overlay when escape key is pressed', () => { + const setIsInspecting = jest.fn(); + + (isEscapeKey as jest.Mock).mockReturnValue(true); + + renderWithI18n( + + ); + + fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' }); + + expect(setIsInspecting).toHaveBeenCalledWith(false); + }); }); diff --git a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx index 9b714699642eb..55bd8f0dabd1d 100644 --- a/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx +++ b/src/platform/plugins/private/inspect_component/public/components/inspect/overlay/inspect_overlay.tsx @@ -14,6 +14,7 @@ import { Global } from '@emotion/react'; import type { CoreStart, OverlayRef } from '@kbn/core/public'; import { EuiPortal, EuiWindowEvent, transparentize, useEuiTheme } from '@elastic/eui'; import { toMountPoint } from '@kbn/react-kibana-mount'; +import { isEscapeKey } from '../../../lib/keyboard_shortcut/keyboard_shortcut'; import { findFirstFiberWithDebugSource } from '../../../lib/fiber/find_first_fiber_with_debug_source'; import { handleEventPropagation } from '../../../lib/dom/handle_event_propagation'; import { getInspectedElementData } from '../../../lib/get_inspected_element_data'; @@ -55,6 +56,16 @@ export const InspectOverlay = ({ core, branch, setFlyoutOverlayRef, setIsInspect [euiTheme.colors.backgroundFilledText, euiTheme.levels.toast] ); + const handleKeydown = useCallback( + (event: KeyboardEvent) => { + if (isEscapeKey(event)) { + event.preventDefault(); + setIsInspecting(false); + } + }, + [setIsInspecting] + ); + const handlePointerMove = useCallback((event: PointerEvent) => { const target = getElementFromPoint(event); @@ -154,6 +165,7 @@ export const InspectOverlay = ({ core, branch, setFlyoutOverlayRef, setIsInspect id={INSPECT_OVERLAY_ID} data-test-subj="inspectOverlayContainer" > + ), - [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove] + [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove, handleKeydown] ); return {overlayContent}; diff --git a/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts b/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts index 687fbdaea0a33..808b001f420b7 100644 --- a/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts +++ b/src/platform/plugins/private/inspect_component/public/lib/keyboard_shortcut/keyboard_shortcut.ts @@ -31,3 +31,9 @@ export const isMac = (): boolean => ((navigator as any)?.userAgentData?.platform || navigator.userAgent) .toLowerCase() .includes('mac'); + +/** + * Check if Escape key was pressed. + * @return {boolean} 'true' if Escape key was pressed, 'false' otherwise. + */ +export const isEscapeKey = (event: KeyboardEvent): boolean => event.key === 'Escape';