From da1880107d24b4eb5657f2caeb8a9ecf841bc762 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Mon, 4 Nov 2024 15:01:08 +0100
Subject: [PATCH] [Lens] Add Esc key handling to lens_configuration_flyout
 (#198487)

## Summary

This PR adds `Esc` key handling to `LensEditConfigurationFlyout`

Closes: #175100
(cherry picked from commit 79331d53e4239eaefb006072aa316572b75f480d)
---
 .../lens_configuration_flyout.tsx             | 63 +++++++++++--------
 1 file changed, 38 insertions(+), 25 deletions(-)

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 (
-      <FlyoutWrapper
-        isInlineFlyoutVisible={isInlineFlyoutVisible}
-        displayFlyoutHeader={displayFlyoutHeader}
-        onCancel={onCancel}
-        navigateToLensEditor={navigateToLensEditor}
-        onApply={onApply}
-        isScrollable
-        isNewPanel={isNewPanel}
-        isSaveable={isSaveable}
-      >
-        <LayerConfiguration
-          // TODO: remove this once we support switching to any chart in Discover
-          onlyAllowSwitchToSubtypes
-          getUserMessages={getUserMessages}
-          attributes={attributes}
-          coreStart={coreStart}
-          startDependencies={startDependencies}
-          visualizationMap={visualizationMap}
-          datasourceMap={datasourceMap}
-          datasourceId={datasourceId}
-          hasPadding
-          framePublicAPI={framePublicAPI}
-          setIsInlineFlyoutVisible={setIsInlineFlyoutVisible}
-        />
-      </FlyoutWrapper>
+      <>
+        {isInlineFlyoutVisible && <EuiWindowEvent event="keydown" handler={onKeyDown} />}
+        <FlyoutWrapper
+          isInlineFlyoutVisible={isInlineFlyoutVisible}
+          displayFlyoutHeader={displayFlyoutHeader}
+          onCancel={onCancel}
+          navigateToLensEditor={navigateToLensEditor}
+          onApply={onApply}
+          isScrollable
+          isNewPanel={isNewPanel}
+          isSaveable={isSaveable}
+        >
+          <LayerConfiguration
+            // TODO: remove this once we support switching to any chart in Discover
+            onlyAllowSwitchToSubtypes
+            getUserMessages={getUserMessages}
+            attributes={attributes}
+            coreStart={coreStart}
+            startDependencies={startDependencies}
+            visualizationMap={visualizationMap}
+            datasourceMap={datasourceMap}
+            datasourceId={datasourceId}
+            hasPadding
+            framePublicAPI={framePublicAPI}
+            setIsInlineFlyoutVisible={setIsInlineFlyoutVisible}
+          />
+        </FlyoutWrapper>
+      </>
     );
   }
 
   return (
     <>
+      {isInlineFlyoutVisible && <EuiWindowEvent event="keydown" handler={onKeyDown} />}
       <FlyoutWrapper
         isInlineFlyoutVisible={isInlineFlyoutVisible}
         displayFlyoutHeader={displayFlyoutHeader}