diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx index ef452f20fdf7d..fd3bcdc8bed8a 100644 --- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx +++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx @@ -17,6 +17,8 @@ import { EuiFlexGroup, EuiFlexItem, euiScrollBarStyles, + EuiWindowEvent, + keys, } from '@elastic/eui'; import { euiThemeVars } from '@kbn/ui-theme'; import type { Datatable } from '@kbn/expressions-plugin/public'; @@ -392,40 +394,51 @@ export function LensEditConfigurationFlyout({ getUserMessages, ]); + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === keys.ESCAPE) { + closeFlyout?.(); + setIsInlineFlyoutVisible(false); + } + }; + if (isLoading) return null; // Example is the Discover editing where we dont want to render the text based editor on the panel, neither the suggestions (for now) if (!canEditTextBasedQuery && hidesSuggestions) { return ( - - - + <> + {isInlineFlyoutVisible && } + + + + ); } return ( <> + {isInlineFlyoutVisible && }