feat(dashboards): Add ESC key to dismiss widget builder slideout

static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx

@@ -1,24 +1,19 @@
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type RefCallback,
-} from 'react';
+import {Fragment, useCallback, useMemo, useState, type RefCallback} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Button} from '@sentry/scraps/button';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink, Link} from '@sentry/scraps/link';
 import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {ErrorBoundary} from 'sentry/components/errorBoundary';
+import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 import {Placeholder} from 'sentry/components/placeholder';
 import {IconClose} from 'sentry/icons';
 import {t, tctCode} from 'sentry/locale';
@@ -99,6 +94,7 @@
 }: WidgetBuilderSlideoutProps) {
   const organization = useOrganization();
   const location = useLocation();
+  const {visible: isModalVisible} = useGlobalModal();
   const {state, dispatch} = useWidgetBuilderContext();
   const [initialState] = useState(state);
   const [customizeFromLibrary, setCustomizeFromLibrary] = useState(false);
@@ -118,7 +114,7 @@
     convertBuilderStateToWidget(state)
   );
 
   useEffect(() => {
     if (!openWidgetTemplates) {
       trackAnalytics('dashboards_views.widget_builder.opened', {
         builder_version: WidgetBuilderVersion.SLIDEOUT,
@@ -234,6 +230,17 @@
     });
   }, [initialState, onClose, state]);
 
+  useHotkeys([
+    {
+      match: 'Escape',
+      callback: () => {
+        if (!isModalVisible) {
+          onCloseWithModal();
+        }
+      },
+    },
+  ]);
+
   const breadcrumbs = customizeFromLibrary
     ? [
         {