fix: Implement abort functionality for bulk document deletion (#2139)

less/documentDB.less

@@ -2869,6 +2869,7 @@ a:link {
   z-index: 1000;
   overflow-y: auto;
   overflow-x: clip;
+  min-height: fit-content;
 }
 
 .uniqueIndexesContainer {

src/Common/dataAccess/deleteDocument.ts

@@ -42,6 +42,7 @@ export interface IBulkDeleteResult {
 export const deleteDocuments = async (
   collection: CollectionBase,
   documentIds: DocumentId[],
+  abortSignal: AbortSignal,
 ): Promise<IBulkDeleteResult[]> => {
   const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
   try {
@@ -65,12 +66,16 @@ export const deleteDocuments = async (
         operationType: BulkOperationType.Delete,
       }));
 
-      const promise = v2Container.items.bulk(operations).then((bulkResults) => {
+      const promise = v2Container.items
-        return bulkResults.map((bulkResult, index) => {
+        .bulk(operations, undefined, {
-          const documentId = documentIdsChunk[index];
+          abortSignal,
-          return { ...bulkResult, documentId };
+        })
+        .then((bulkResults) => {
+          return bulkResults.map((bulkResult, index) => {
+            const documentId = documentIdsChunk[index];
+            return { ...bulkResult, documentId };
+          });
         });
-      });
       promiseArray.push(promise);
     }
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -679,6 +679,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     collection: CollectionBase;
   }>(undefined);
   const [bulkDeleteMode, setBulkDeleteMode] = useState<"inProgress" | "completed" | "aborting" | "aborted">(undefined);
+  const [abortController, setAbortController] = useState<AbortController | undefined>(undefined);
 
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
 
@@ -706,13 +707,19 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       return;
     }
 
-    if (
+    if (bulkDeleteProcess.pendingIds.length === 0 && bulkDeleteProcess.throttledIds.length === 0) {
-      (bulkDeleteProcess.pendingIds.length === 0 && bulkDeleteProcess.throttledIds.length === 0) ||
+      // Successfully deleted all documents
-      bulkDeleteMode === "aborting"
-    ) {
-      // Successfully deleted all documents or operation was aborted
       bulkDeleteOperation.onCompleted(bulkDeleteProcess.successfulIds);
-      setBulkDeleteMode(bulkDeleteMode === "aborting" ? "aborted" : "completed");
+      setBulkDeleteMode("completed");
+      return;
+    }
+
+    if (bulkDeleteMode === "aborting") {
+      // Operation was aborted
+      abortController?.abort();
+      bulkDeleteOperation.onCompleted(bulkDeleteProcess.successfulIds);
+      setBulkDeleteMode("aborted");
+      setAbortController(undefined);
       return;
     }
 
@@ -720,8 +727,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     const newPendingIds = bulkDeleteProcess.pendingIds.concat(bulkDeleteProcess.throttledIds);
     const timeout = bulkDeleteProcess.beforeExecuteMs || 0;
 
+    const ac = new AbortController();
+    setAbortController(ac);
     setTimeout(() => {
-      deleteNoSqlDocuments(bulkDeleteOperation.collection, [...newPendingIds])
+      deleteNoSqlDocuments(bulkDeleteOperation.collection, [...newPendingIds], ac.signal)
         .then((deleteResult) => {
           let retryAfterMilliseconds = 0;
           const newSuccessful: DocumentId[] = [];