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