Fix escape in Modal/DashboardSettings + add some unit tests (#49500)

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -55,6 +55,8 @@ export function Drawer({
   const { overlayProps } = useOverlay(
     {
       isDismissable: true,
+      isOpen,
+      onClose,
     },
     overlayRef
   );

packages/grafana-ui/src/components/Modal/Modal.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { Modal } from './Modal';
@@ -22,4 +23,22 @@ describe('Modal', () => {
 
     expect(screen.getByTestId('modal-content')).toBeInTheDocument();
   });
+
+  it('pressing escape calls onDismiss correctly', async () => {
+    const onDismiss = jest.fn();
+
+    render(
+      <Modal title="Some Title" isOpen onDismiss={onDismiss}>
+        <div data-testid="modal-content">Content</div>
+      </Modal>
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByLabelText('Some Title')).toBeInTheDocument();
+    expect(screen.getByTestId('modal-content')).toBeInTheDocument();
+
+    await userEvent.keyboard('{Escape}');
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
 });

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -53,7 +53,7 @@ export function Modal(props: PropsWithChildren<Props>) {
   // Handle interacting outside the dialog and pressing
   // the Escape key to close the modal.
   const { overlayProps, underlayProps } = useOverlay(
-    { isKeyboardDismissDisabled: closeOnEscape, isOpen, onClose: onDismiss },
+    { isKeyboardDismissDisabled: !closeOnEscape, isOpen, onClose: onDismiss },
     ref
   );
 

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import { locationService, setBackendSrv } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { DashboardModel } from '../../state';
+
+import { DashboardSettings } from './DashboardSettings';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  locationService: {
+    partial: jest.fn(),
+  },
+}));
+
+setBackendSrv({
+  get: jest.fn().mockResolvedValue({}),
+} as any);
+
+describe('DashboardSettings', () => {
+  it('pressing escape navigates away correctly', async () => {
+    jest.spyOn(locationService, 'partial');
+    const dashboard = new DashboardModel(
+      {
+        title: 'Foo',
+      },
+      {
+        folderId: 1,
+      }
+    );
+    const store = configureStore();
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <DashboardSettings editview="settings" dashboard={dashboard} />
+        </BrowserRouter>
+      </Provider>
+    );
+
+    expect(screen.getByText('Foo / Settings')).toBeInTheDocument();
+
+    await userEvent.keyboard('{Escape}');
+
+    expect(locationService.partial).toHaveBeenCalledWith({ editview: null });
+  });
+});

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -49,7 +49,13 @@ const MakeEditable = (props: { onMakeEditable: () => any }) => (
 
 export function DashboardSettings({ dashboard, editview }: Props) {
   const ref = useRef<HTMLDivElement>(null);
-  const { overlayProps } = useOverlay({}, ref);
+  const { overlayProps } = useOverlay(
+    {
+      isOpen: true,
+      onClose,
+    },
+    ref
+  );
   const { dialogProps } = useDialog(
     {
       'aria-label': 'Dashboard settings',