feat: close dialog when esc is pressed (#4567)

frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx

@@ -7,6 +7,7 @@ import { TokenType } from 'interfaces/token';
 
 interface IConfirmUserLink {
     open: boolean;
+    setOpen: (status: boolean) => void;
     closeConfirm: () => void;
     token: string;
     type?: string;
@@ -14,6 +15,7 @@ interface IConfirmUserLink {
 
 export const ConfirmToken = ({
     open,
+    setOpen,
     closeConfirm,
     token,
     type,
@@ -21,6 +23,7 @@ export const ConfirmToken = ({
     return (
         <Dialogue
             open={open}
+            setOpen={setOpen}
             onClick={closeConfirm}
             primaryButtonText="Close"
             title="New token created"

frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx

@@ -147,6 +147,7 @@ export const CreateApiToken = ({ modal = false }: ICreateApiTokenProps) => {
             </ApiTokenForm>
             <ConfirmToken
                 open={showConfirm}
+                setOpen={setShowConfirm}
                 closeConfirm={closeConfirm}
                 token={token}
                 type={type}

frontend/src/component/common/Dialogue/Dialogue.test.tsx

@@ -0,0 +1,22 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { Dialogue } from './Dialogue';
+import { vi } from 'vitest';
+
+test('modal should close when escape is pressed', () => {
+    const mockSetOpen = vi.fn();
+    render(
+        <Dialogue
+            open={true}
+            setOpen={mockSetOpen}
+            title={'New dialogue created'}
+        />
+    );
+
+    expect(screen.getByText('New dialogue created')).toBeInTheDocument();
+
+    const dialogue = screen.getByRole('presentation');
+    fireEvent.keyDown(dialogue, { key: 'Escape', code: 'Escape' });
+
+    expect(mockSetOpen).toHaveBeenCalledWith(false);
+});

frontend/src/component/common/Dialogue/Dialogue.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { KeyboardEvent } from 'react';
 import {
     Button,
     Dialog,
@@ -45,6 +45,7 @@ interface IDialogue {
     primaryButtonText?: string;
     secondaryButtonText?: string;
     open: boolean;
+    setOpen?: (status: boolean) => void;
     onClick?: (e: React.SyntheticEvent) => void;
     onClose?: (e: React.SyntheticEvent, reason?: string) => void;
     style?: object;
@@ -53,12 +54,13 @@ interface IDialogue {
     maxWidth?: 'lg' | 'sm' | 'xs' | 'md' | 'xl';
     disabledPrimaryButton?: boolean;
     formId?: string;
-    permissionButton?: JSX.Element;
+    permissionButton?: React.JSX.Element;
 }
 
 export const Dialogue: React.FC<IDialogue> = ({
     children,
     open,
+    setOpen,
     onClick,
     onClose,
     title,
@@ -78,10 +80,18 @@ export const Dialogue: React.FC<IDialogue> = ({
               }
           }
         : onClick;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+            setOpen?.(false);
+        }
+    };
     return (
         <StyledDialog
             open={open}
             onClose={onClose}
+            onKeyDown={onKeyDown}
+            role={'dialog'}
             fullWidth={fullWidth}
             aria-labelledby={'simple-modal-title'}
             aria-describedby={'simple-modal-description'}

frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/CreateProjectApiTokenForm.tsx

@@ -140,6 +140,7 @@ export const CreateProjectApiTokenForm = () => {
             </ApiTokenForm>
             <ConfirmToken
                 open={showConfirm}
+                setOpen={setShowConfirm}
                 closeConfirm={closeConfirm}
                 token={token}
                 type={type}

frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokenDialog/PersonalAPITokenDialog.tsx

@@ -21,6 +21,7 @@ export const PersonalAPITokenDialog: FC<IPersonalAPITokenDialogProps> = ({
 }) => (
     <Dialogue
         open={open}
+        setOpen={setOpen}
         secondaryButtonText="Close"
         onClose={(_, muiCloseReason?: string) => {
             if (!muiCloseReason) {