[Inspect component] Close inspect overlay on Escape key press

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);

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(
+      <InspectOverlay
+        core={mockCoreStart}
+        setFlyoutOverlayRef={jest.fn()}
+        setIsInspecting={setIsInspecting}
+        branch={mockBranch}
+      />
+    );
+
+    fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
+
+    expect(setIsInspecting).toHaveBeenCalledWith(false);
+  });
 });

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"
         >
+          <EuiWindowEvent event="keydown" handler={handleKeydown} />
           <EuiWindowEvent event="pointermove" handler={handlePointerMove} />
           <InspectHighlight
             currentPosition={highlightPosition}
@@ -162,7 +174,7 @@ export const InspectOverlay = ({ core, branch, setFlyoutOverlayRef, setIsInspect
         </div>
       </React.Fragment>
     ),
-    [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove]
+    [overlayCss, highlightPosition, sourceComponent?.type, handlePointerMove, handleKeydown]
   );
 
   return <EuiPortal>{overlayContent}</EuiPortal>;

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';