From de46dc7af0e22e71c569a199e56c929b43c26b2b Mon Sep 17 00:00:00 2001 From: Lukas Siatka Date: Wed, 20 May 2020 10:42:35 +0200 Subject: [PATCH] Explore: adds an ability to exit log row context with ESC key (#24205) * Chore: adds event listeners allowing to exit log row context with ESC key * Chore: updates LogRows styles to prevent it from rendering context provider inappropriately * Revert "Chore: updates LogRows styles to prevent it from rendering context provider inappropriately" This reverts commit 59b06424c49bf4c33a1b6419551f76ff5de6e122. --- .../src/components/Logs/LogRowContext.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx index 360aff6cdf5..aa08fe7ab49 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useRef, useState, useLayoutEffect } from 'react'; +import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react'; import { LogRowModel } from '@grafana/data'; import { css, cx } from 'emotion'; @@ -202,6 +202,19 @@ export const LogRowContext: React.FunctionComponent = ({ onLoadMoreContext, hasMoreContextRows, }) => { + const handleEscKeyDown = (e: KeyboardEvent): void => { + if (e.keyCode === 27) { + onOutsideClick(); + } + }; + + useEffect(() => { + document.addEventListener('keydown', handleEscKeyDown, false); + return () => { + document.removeEventListener('keydown', handleEscKeyDown, false); + }; + }, []); + return (