From 19d3deb1996e10abe36f1b8c6a960848a0b10b78 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Tue, 23 Apr 2024 15:30:01 +0200
Subject: [PATCH] Connect cancel query button

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 2b6780824..bf7afaa7b 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1486,12 +1486,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
       <div
         className="tab-pane active"
         /* data-bind="
-                              setTemplateReady: true,
-                              attr:{
-                                  id: tabId
-                              },
-                              visible: isActive"
-                              */
+                                setTemplateReady: true,
+                                attr:{
+                                    id: tabId
+                                },
+                                visible: isActive"
+                                */
         role="tabpanel"
         style={{ display: "flex" }}
       >
@@ -1580,9 +1580,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         onClick={() => refreshDocumentsGrid(true)}
                         disabled={!applyFilterButton.enabled}
                         /* data-bind="
-                                                          click: refreshDocumentsGrid.bind($data, true),
-                                                          enable: applyFilterButton.enabled"
-                                                */
+                                                            click: refreshDocumentsGrid.bind($data, true),
+                                                            enable: applyFilterButton.enabled"
+                                                  */
                         aria-label="Apply filter"
                         tabIndex={0}
                       >
@@ -1594,10 +1594,11 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         <button
                           className="filterbtnstyle queryButton"
                           /* data-bind="
-                                                            visible: !isPreferredApiMongoDB && isExecuting,
-                                                            click: onAbortQueryClick"
-                                                  */
+                                                              visible: !isPreferredApiMongoDB && isExecuting,
+                                                              click: onAbortQueryClick"
+                                                    */
                           aria-label="Cancel Query"
+                          onClick={() => queryAbortController.abort()}
                           tabIndex={0}
                         >
                           Cancel Query