Allow navigating discover flyout via arrow keys (#101772) (#101864)

Co-authored-by: Tim Roes <tim.roes@elastic.co>
elastic · Jun 10, 2021 · 2621efd · 2621efd
1 parent e47e1dc
commit 2621efd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/...lugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx b/...lugins/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
@@ -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"