[Lens] Add Esc key handling to lens_configuration_flyout (#198487)

## Summary

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

Closes: #175100
This commit is contained in:
Krzysztof Kowalczyk 2024-11-04 15:01:08 +01:00 committed by GitHub
parent 10d7926e3b
commit 79331d53e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -17,6 +17,8 @@ import {
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
euiScrollBarStyles, euiScrollBarStyles,
EuiWindowEvent,
keys,
} from '@elastic/eui'; } from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme'; import { euiThemeVars } from '@kbn/ui-theme';
import type { Datatable } from '@kbn/expressions-plugin/public'; import type { Datatable } from '@kbn/expressions-plugin/public';
@ -392,40 +394,51 @@ export function LensEditConfigurationFlyout({
getUserMessages, getUserMessages,
]); ]);
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === keys.ESCAPE) {
closeFlyout?.();
setIsInlineFlyoutVisible(false);
}
};
if (isLoading) return null; 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) // 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) { if (!canEditTextBasedQuery && hidesSuggestions) {
return ( return (
<FlyoutWrapper <>
isInlineFlyoutVisible={isInlineFlyoutVisible} {isInlineFlyoutVisible && <EuiWindowEvent event="keydown" handler={onKeyDown} />}
displayFlyoutHeader={displayFlyoutHeader} <FlyoutWrapper
onCancel={onCancel} isInlineFlyoutVisible={isInlineFlyoutVisible}
navigateToLensEditor={navigateToLensEditor} displayFlyoutHeader={displayFlyoutHeader}
onApply={onApply} onCancel={onCancel}
isScrollable navigateToLensEditor={navigateToLensEditor}
isNewPanel={isNewPanel} onApply={onApply}
isSaveable={isSaveable} isScrollable
> isNewPanel={isNewPanel}
<LayerConfiguration isSaveable={isSaveable}
// TODO: remove this once we support switching to any chart in Discover >
onlyAllowSwitchToSubtypes <LayerConfiguration
getUserMessages={getUserMessages} // TODO: remove this once we support switching to any chart in Discover
attributes={attributes} onlyAllowSwitchToSubtypes
coreStart={coreStart} getUserMessages={getUserMessages}
startDependencies={startDependencies} attributes={attributes}
visualizationMap={visualizationMap} coreStart={coreStart}
datasourceMap={datasourceMap} startDependencies={startDependencies}
datasourceId={datasourceId} visualizationMap={visualizationMap}
hasPadding datasourceMap={datasourceMap}
framePublicAPI={framePublicAPI} datasourceId={datasourceId}
setIsInlineFlyoutVisible={setIsInlineFlyoutVisible} hasPadding
/> framePublicAPI={framePublicAPI}
</FlyoutWrapper> setIsInlineFlyoutVisible={setIsInlineFlyoutVisible}
/>
</FlyoutWrapper>
</>
); );
} }
return ( return (
<> <>
{isInlineFlyoutVisible && <EuiWindowEvent event="keydown" handler={onKeyDown} />}
<FlyoutWrapper <FlyoutWrapper
isInlineFlyoutVisible={isInlineFlyoutVisible} isInlineFlyoutVisible={isInlineFlyoutVisible}
displayFlyoutHeader={displayFlyoutHeader} displayFlyoutHeader={displayFlyoutHeader}