From b87ee2d51839c792074333c209b86194d04dafed Mon Sep 17 00:00:00 2001
From: adcoelho <antonio.coelho@elastic.co>
Date: Mon, 24 Apr 2023 10:32:09 +0200
Subject: [PATCH] Close FilePreview with Escape key. Tests.

---
 .../components/files/file_preview.test.tsx    | 20 +++++++++++++++++++
 .../public/components/files/file_preview.tsx  | 18 +++++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/files/file_preview.test.tsx b/x-pack/plugins/cases/public/components/files/file_preview.test.tsx
index b02df3a82228f..c1d7fe20bee48 100644
--- a/x-pack/plugins/cases/public/components/files/file_preview.test.tsx
+++ b/x-pack/plugins/cases/public/components/files/file_preview.test.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 
 import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import type { AppMockRenderer } from '../../common/mock';
 
@@ -35,4 +36,23 @@ describe('FilePreview', () => {
 
     expect(await screen.findByTestId('cases-files-image-preview')).toBeInTheDocument();
   });
+
+  it('pressing escape calls closePreview', async () => {
+    const closePreview = jest.fn();
+
+    appMockRender.render(<FilePreview closePreview={closePreview} selectedFile={basicFileMock} />);
+
+    await waitFor(() =>
+      expect(appMockRender.getFilesClient().getDownloadHref).toHaveBeenCalledWith({
+        id: basicFileMock.id,
+        fileKind: constructFileKindIdByOwner(mockedTestProvidersOwner[0]),
+      })
+    );
+
+    expect(await screen.findByTestId('cases-files-image-preview')).toBeInTheDocument();
+
+    userEvent.keyboard('{esc}');
+
+    await waitFor(() => expect(closePreview).toHaveBeenCalled());
+  });
 });
diff --git a/x-pack/plugins/cases/public/components/files/file_preview.tsx b/x-pack/plugins/cases/public/components/files/file_preview.tsx
index 1bb91c5b53ff7..09cee1320ec2a 100644
--- a/x-pack/plugins/cases/public/components/files/file_preview.tsx
+++ b/x-pack/plugins/cases/public/components/files/file_preview.tsx
@@ -4,12 +4,12 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { FileJSON } from '@kbn/shared-ux-file-types';
 
-import { EuiOverlayMask, EuiFocusTrap, EuiImage } from '@elastic/eui';
+import { EuiOverlayMask, EuiFocusTrap, EuiImage, keys } from '@elastic/eui';
 import { useFilesContext } from '@kbn/shared-ux-file-context';
 
 import type { Owner } from '../../../common/constants/types';
@@ -36,6 +36,20 @@ export const FilePreview = ({ closePreview, selectedFile }: FilePreviewProps) =>
   const { client: filesClient } = useFilesContext();
   const { owner } = useCasesContext();
 
+  useEffect(() => {
+    const keyboardListener = (event: KeyboardEvent) => {
+      if (event.key === keys.ESCAPE || event.code === 'Escape') {
+        closePreview();
+      }
+    };
+
+    window.addEventListener('keyup', keyboardListener);
+
+    return () => {
+      window.removeEventListener('keyup', keyboardListener);
+    };
+  }, [closePreview]);
+
   return (
     <StyledOverlayMask>
       <EuiFocusTrap onClickOutside={closePreview}>