Fix close button in QueryStackTraceModal (#49)

crate · Jan 31, 2024 · 5f15a70 · 5f15a70
1 parent b4e7876
commit 5f15a70
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Fix close button in QueryStackTraceModal
+
 ## 2024-01-31 - 0.4.2
 
 - Export missing useButtonStyles function.

diff --git a/src/components/QueryStackTraceModal/QueryStackTraceModal.test.tsx b/src/components/QueryStackTraceModal/QueryStackTraceModal.test.tsx
@@ -46,4 +46,16 @@ describe('The "QueryStackTraceModal" component', () => {
 
     expect(onCloseSpy).toHaveBeenCalled();
   });
+
+  it('closes if the "x" button is clicked', async () => {
+    const { user } = setup();
+
+    await user.click(
+      screen
+        .getAllByRole('button')
+        .find(el => el.classList.contains('ant-modal-close'))!,
+    );
+
+    expect(onCloseSpy).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/QueryStackTraceModal/QueryStackTraceModal.tsx b/src/components/QueryStackTraceModal/QueryStackTraceModal.tsx
@@ -5,7 +5,7 @@ import SyntaxHighlighter from '../SyntaxHighlighter';
 export type QueryStackTraceModalProps = {
   modalTitle: string;
   visible?: boolean;
-  onClose?: () => void;
+  onClose: () => void;
   query: string;
   queryError: string;
 };
@@ -17,17 +17,12 @@ function QueryStackTraceModal({
   query,
   queryError,
 }: QueryStackTraceModalProps) {
-  const onOk = () => {
-    if (onClose) {
-      onClose();
-    }
-  };
-
   return (
     <Modal
       title={modalTitle}
       open={visible}
-      onOk={onOk}
+      onOk={onClose}
+      onCancel={onClose}
       width="80%"
       footer={
         <div>