From 2621efd04c5b531e0f3397295737602c5339876c Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 10 Jun 2021 07:21:44 -0400
Subject: [PATCH] Allow navigating discover flyout via arrow keys (#101772)
 (#101864)

Co-authored-by: Tim Roes <tim.roes@elastic.co>
---
 .../discover_grid_flyout.test.tsx             | 20 +++++++++++++++++++
 .../discover_grid/discover_grid_flyout.tsx    | 19 +++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
index 63d16af7de478..60841799b1398 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
@@ -143,4 +143,24 @@ describe('Discover flyout', function () {
     expect(props.setExpandedDoc).toHaveBeenCalledTimes(1);
     expect(props.setExpandedDoc.mock.calls[0][0]._id).toBe('4');
   });
+
+  it('allows navigating with arrow keys through documents', () => {
+    const props = getProps();
+    const component = mountWithIntl(<DiscoverGridFlyout {...props} />);
+    findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });
+    expect(props.setExpandedDoc).toHaveBeenCalledWith(expect.objectContaining({ _id: '2' }));
+    component.setProps({ ...props, hit: props.hits[1] });
+    findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowLeft' });
+    expect(props.setExpandedDoc).toHaveBeenCalledWith(expect.objectContaining({ _id: '1' }));
+  });
+
+  it('should not navigate with keypresses when already at the border of documents', () => {
+    const props = getProps();
+    const component = mountWithIntl(<DiscoverGridFlyout {...props} />);
+    findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowLeft' });
+    expect(props.setExpandedDoc).not.toHaveBeenCalled();
+    component.setProps({ ...props, hit: props.hits[props.hits.length - 1] });
+    findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });
+    expect(props.setExpandedDoc).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
index 3894127891041..aaae9afe6531a 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
@@ -21,6 +21,7 @@ import {
   EuiPortal,
   EuiPagination,
   EuiHideFor,
+  keys,
 } from '@elastic/eui';
 import { DocViewer } from '../doc_viewer/doc_viewer';
 import { IndexPattern } from '../../../kibana_services';
@@ -87,9 +88,25 @@ export function DiscoverGridFlyout({
     [hits, setExpandedDoc]
   );
 
+  const onKeyDown = useCallback(
+    (ev: React.KeyboardEvent) => {
+      if (ev.key === keys.ARROW_LEFT || ev.key === keys.ARROW_RIGHT) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        setPage(activePage + (ev.key === keys.ARROW_RIGHT ? 1 : -1));
+      }
+    },
+    [activePage, setPage]
+  );
+
   return (
     <EuiPortal>
-      <EuiFlyout onClose={onClose} size="m" data-test-subj="docTableDetailsFlyout">
+      <EuiFlyout
+        onClose={onClose}
+        size="m"
+        data-test-subj="docTableDetailsFlyout"
+        onKeyDown={onKeyDown}
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle
             size="s"