Escape button close the boardSelector dialog (#3850)

mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap

@@ -1,5 +1,108 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/boardSelector escape button should unmount the component 1`] = `
+<div>
+  <div
+    class="focalboard-body"
+  >
+    <div
+      class="Dialog dialog-back BoardSelector"
+    >
+      <div
+        class="backdrop"
+      />
+      <div
+        class="wrapper"
+      >
+        <div
+          class="dialog"
+          role="dialog"
+        >
+          <div
+            class="toolbar"
+          >
+            <div>
+              <h1
+                class="dialog-title"
+              >
+                Link boards
+              </h1>
+            </div>
+            <div
+              class="toolbar--right"
+            >
+              <div>
+                <button
+                  class="Button emphasis--secondary"
+                  type="button"
+                >
+                  <span>
+                    Create a board
+                  </span>
+                </button>
+              </div>
+              <button
+                aria-label="Close dialog"
+                class="IconButton dialog__close size--medium"
+                title="Close dialog"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-close CloseIcon"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="BoardSelectorBody"
+          >
+            <div
+              class="head"
+            >
+              <div
+                class="queryWrapper"
+              >
+                <i
+                  class="CompassIcon icon-magnify MagnifyIcon"
+                />
+                <input
+                  class="searchQuery"
+                  maxlength="100"
+                  placeholder="Search for boards"
+                  type="text"
+                />
+              </div>
+            </div>
+            <div
+              class="searchResults"
+            >
+              
+              
+              <div
+                class="noResults introScreen"
+              >
+                <div
+                  class="iconWrapper"
+                >
+                  <i
+                    class="CompassIcon icon-magnify MagnifyIcon"
+                  />
+                </div>
+                <h4
+                  class="text-heading4"
+                >
+                  Search for boards
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`components/boardSelector renders with no results 1`] = `
 <div>
   <div

mattermost-plugin/webapp/src/components/boardSelector.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
-import {render, screen, act} from '@testing-library/react'
+import {render, screen, act, fireEvent} from '@testing-library/react'
 import {mocked} from 'jest-mock'
 
 import userEvent from '@testing-library/user-event'
@@ -91,5 +91,31 @@ describe('components/boardSelector', () => {
 
         expect(container).toMatchSnapshot()
     })
-})
 
+    it("escape button should unmount the component", () => {
+        mockedOctoClient.searchLinkableBoards.mockResolvedValueOnce([])
+
+        const store = mockStateStore([], state)
+        const origDispatch = store.dispatch
+        store.dispatch = jest.fn(origDispatch)
+        const {container, getByText} = render(wrapIntl(
+            <ReduxProvider store={store}>
+                <BoardSelector/>
+            </ReduxProvider>
+        ))
+
+        expect(getByText(/Link boards/i)).not.toBeNull()
+
+        expect(store.dispatch).toHaveBeenCalledTimes(0)
+
+        fireEvent.keyDown(getByText(/Link boards/i), {
+            key: "Escape",
+            code: "Escape",
+            keyCode: 27,
+            charCode: 27
+        })
+
+        expect(store.dispatch).toHaveBeenCalledTimes(2)
+        expect(container).toMatchSnapshot()
+    })
+})

mattermost-plugin/webapp/src/components/boardSelector.tsx

@@ -129,10 +129,29 @@ const BoardSelector = () => {
         }, {boardName: showLinkBoardConfirmation?.title})
     }
 
+    const closeDialog = () => {
+        dispatch(setLinkToChannel(''))
+        setResults([])
+        setIsSearching(false)
+        setSearchQuery('')
+        setShowLinkBoardConfirmation(null)
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if(event.key == 'Escape') {
+            closeDialog()
+        }
+    }
+
+
     return (
-        <div className='focalboard-body'>
+        <div
+            className='focalboard-body'
+            onKeyDown={handleKeyDown}
+        >
             <Dialog
                 className='BoardSelector'
+                onClose={closeDialog}
                 title={
                     <FormattedMessage
                         id='boardSelector.title'
@@ -150,13 +169,6 @@ const BoardSelector = () => {
                         />
                     </Button>
                 }
-                onClose={() => {
-                    dispatch(setLinkToChannel(''))
-                    setResults([])
-                    setIsSearching(false)
-                    setSearchQuery('')
-                    setShowLinkBoardConfirmation(null)
-                }}
             >
                 {showLinkBoardConfirmation &&
                     <ConfirmationDialog