[8.x] [Lens] Add Esc key handling to lens_configuration_flyout (#198487…

…) (#198789)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens] Add Esc key handling to lens_configuration_flyout
(#198487)](#198487)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-04T14:01:08Z","message":"[Lens]
Add Esc key handling to lens_configuration_flyout (#198487)\n\n##
Summary\r\n\r\nThis PR adds `Esc` key handling to
`LensEditConfigurationFlyout`\r\n\r\nCloses:
#175100","sha":"79331d53e4239eaefb006072aa316572b75f480d","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:prev-minor"],"title":"[Lens]
Add Esc key handling to
lens_configuration_flyout","number":198487,"url":"https://github.com/elastic/kibana/pull/198487","mergeCommit":{"message":"[Lens]
Add Esc key handling to lens_configuration_flyout (#198487)\n\n##
Summary\r\n\r\nThis PR adds `Esc` key handling to
`LensEditConfigurationFlyout`\r\n\r\nCloses:
#175100","sha":"79331d53e4239eaefb006072aa316572b75f480d"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198487","number":198487,"mergeCommit":{"message":"[Lens]
Add Esc key handling to lens_configuration_flyout (#198487)\n\n##
Summary\r\n\r\nThis PR adds `Esc` key handling to
`LensEditConfigurationFlyout`\r\n\r\nCloses:
#175100","sha":"79331d53e4239eaefb006072aa316572b75f480d"}}]}]
BACKPORT-->

Co-authored-by: Krzysztof Kowalczyk <[email protected]>

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}