Skip to content

Commit

Permalink
[Cases] Close FilePreview with Escape key. (#155592)
Browse files Browse the repository at this point in the history
Fixes #155036

## Summary

Allow users to close the file preview in cases by using the Escape key.

(e2e coming in a different PR with other tests)
  • Loading branch information
adcoelho authored Apr 24, 2023
1 parent 111d04f commit 1095375
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
20 changes: 20 additions & 0 deletions x-pack/plugins/cases/public/components/files/file_preview.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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());
});
});
18 changes: 16 additions & 2 deletions x-pack/plugins/cases/public/components/files/file_preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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}>
Expand Down

0 comments on commit 1095375

Please sign in to comment.