Close modal on Escape (#1811)

* Close modal on escape

* Add tests

Author: sroy3

webview/src/shared/components/modal/Modal.test.tsx

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, cleanup, fireEvent } from '@testing-library/react'
+import { Modal } from './Modal'
+
+describe('Modal', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should call the onClose prop when pressing Escape', () => {
+    const onClose = jest.fn()
+
+    render(<Modal onClose={onClose} />)
+
+    fireEvent.keyDown(window, { key: 'Escape' })
+
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('should not call the onClose prop when pressing other keys', () => {
+    const onClose = jest.fn()
+
+    render(<Modal onClose={onClose} />)
+
+    fireEvent.keyDown(window, { key: 'Enter' })
+    fireEvent.keyDown(window, { key: 'e' })
+    fireEvent.keyDown(window, { key: 'Space' })
+    fireEvent.keyDown(window, { key: 'Alt' })
+
+    expect(onClose).not.toHaveBeenCalled()
+  })
+})

webview/src/shared/components/modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, useEffect } from 'react'
 import styles from './styles.module.scss'
 import { AllIcons, Icon } from '../Icon'
 
@@ -7,6 +7,18 @@ interface ModalProps {
 }
 
 export const Modal: React.FC<ModalProps> = ({ onClose, children }) => {
+  useEffect(() => {
+    const checkKeyAndClose = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', checkKeyAndClose)
+
+    return () => {
+      window.removeEventListener('keydown', checkKeyAndClose)
+    }
+  }, [onClose])
   return (
     <div
       className={styles.backdrop}