CORE-1247: close dialogs by pressing Escape

src/app/components/dialog/dialog.tsx

@@ -11,6 +11,20 @@ function PutAway({
     noTitle?: boolean;
     onClick?: () => void;
 }) {
+    React.useEffect(() => {
+        if (onClick) {
+            const closeOnEsc = (event: KeyboardEvent) => {
+                if (event.key === 'Escape') {
+                    onClick();
+                }
+            };
+
+            document.addEventListener('keydown', closeOnEsc);
+            return () => document.removeEventListener('keydown', closeOnEsc);
+        }
+        return () => null;
+    }, [onClick]);
+
     return (
         <button
             className={cn('put-away', {'no-title-bar': noTitle})}

test/src/components/dialog.test.tsx

@@ -31,6 +31,17 @@ describe('components/dialog', () => {
 
         await user.click(pa);
     });
+    it('pressing Escape is the same as pressing close button', async () => {
+        render(<Component />);
+        const b = screen.getByRole('button');
+
+        await user.click(b);
+        await screen.findByRole('button', {name: 'close'});
+        await userEvent.type(document.body, '{Enter}');
+        expect(screen.queryByRole('button', {name: 'close'})).toBeTruthy();
+        await userEvent.type(document.body, '{Escape}');
+        expect(screen.queryByRole('button', {name: 'close'})).not.toBeTruthy();
+    });
     it('Handles nonmodal and no put-away', async () => {
         render(<Component showPutAway={false} modal={false} />);
         const b = screen.getByRole('button');