fix(delete): delete concurrently and clean up correctly

fixes bug when deleting multiple the last one keeps the side panel open,
eventhough it does not exist anymore

Author: Yelinz

addon/components/document-delete-button.js

@@ -30,24 +30,31 @@ export default class DocumentDeleteButtonComponent extends Component {
     }
   }
 
-  @task *delete() {
+  delete = task(async () => {
     try {
       if (this.args.docsToDelete) {
         const docs = Array.isArray(this.args.docsToDelete)
           ? this.args.docsToDelete
           : [this.args.docsToDelete]; // if the supplied argument is not an array we make it one
 
-        for (const doc of docs) {
-          yield doc.destroyRecord().catch((error) => {
-            doc.rollbackAttributes();
-            throw error;
-          });
-          this.documents.deselectDocument(doc);
+        if (this.args.onConfirm) {
+          this.args.onConfirm(docs);
         }
-      }
 
-      if (this.args.onConfirm) {
-        this.args.onConfirm(this.args.docsToDelete);
+        const deletionStatus = await Promise.allSettled(
+          docs.map((doc) => {
+            return doc.destroyRecord();
+          }),
+        );
+
+        deletionStatus.forEach(({ status, reason }, index) => {
+          if (status === "rejected") {
+            docs[index].rollbackAttributes();
+            throw reason;
+          }
+
+          this.documents.deselectDocument(docs[index]);
+        });
       }
 
       this.notification.success(
@@ -58,5 +65,5 @@ export default class DocumentDeleteButtonComponent extends Component {
     } finally {
       this.hideDialog();
     }
-  }
+  });
 }

addon/services/alexandria-documents.js

@@ -1,5 +1,6 @@
 import { action } from "@ember/object";
 import Service, { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import { tracked } from "@glimmer/tracking";
 import { task } from "ember-concurrency";
 import { saveAs } from "file-saver";
@@ -38,11 +39,23 @@ export default class AlexandriaDocumentsService extends Service {
       this.selectedDocuments.length === 0
         ? undefined
         : this.selectedDocuments.map((d) => d.id);
-    this.router.transitionTo(this.router.currentRouteName, {
-      queryParams: {
-        document: docs,
-      },
-    });
+
+    if (macroCondition(isTesting())) {
+      // there is no router for integration tests
+      if (this.router.currentRouteName) {
+        this.router.transitionTo(this.router.currentRouteName, {
+          queryParams: {
+            document: docs,
+          },
+        });
+      }
+    } else {
+      this.router.transitionTo(this.router.currentRouteName, {
+        queryParams: {
+          document: docs,
+        },
+      });
+    }
   }
 
   /**

tests/integration/components/document-delete-button-test.js

@@ -10,24 +10,28 @@ module("Integration | Component | document-delete-button", function (hooks) {
     this.document = {
       id: 1,
       title: "Test",
-      destroyRecord() {},
+      destroyRecord() {
+        assert.step("destroy test");
+      },
     };
 
     this.onCancel = () => assert.step("cancel");
     this.onConfirm = () => assert.step("confirm");
 
     await render(hbs`
     <DocumentDeleteButton
-      @document={{this.document}}
+      @docsToDelete={{this.document}}
       @onConfirm={{this.onConfirm}}
       @onCancel={{this.onCancel}}
       as |showDialog|
     >
       <button
-      {{on "click" showDialog}}
-      data-test-delete
-      type="button"
-      >Delete</button>
+        {{on "click" showDialog}}
+        data-test-delete
+        type="button"
+      >
+        Delete
+      </button>
     </DocumentDeleteButton>
     `);
 
@@ -37,6 +41,53 @@ module("Integration | Component | document-delete-button", function (hooks) {
     await click("[data-test-delete]");
     await click("[data-test-delete-confirm]");
 
-    assert.verifySteps(["cancel", "confirm"]);
+    assert.verifySteps(["cancel", "confirm", "destroy test"]);
+  });
+
+  test("delete document multiple", async function (assert) {
+    this.documents = [
+      {
+        id: 1,
+        title: "Test",
+        destroyRecord() {
+          assert.step("destroy test");
+        },
+      },
+      {
+        id: 2,
+        title: "Bar",
+        destroyRecord() {
+          assert.step("destroy bar");
+        },
+      },
+    ];
+
+    this.onCancel = () => assert.step("cancel");
+    this.onConfirm = () => assert.step("confirm");
+
+    await render(hbs`
+    <DocumentDeleteButton
+      @docsToDelete={{this.documents}}
+      @onConfirm={{this.onConfirm}}
+      @onCancel={{this.onCancel}}
+      as |showDialog|
+    >
+      <button
+        {{on "click" showDialog}}
+        data-test-delete
+        type="button"
+      >
+        Delete
+      </button>
+    </DocumentDeleteButton>
+    `);
+
+    await click("[data-test-delete]");
+    await click("[data-test-delete-cancel]");
+
+    await click("[data-test-delete]");
+    await click("[data-test-delete-confirm]");
+
+    assert.verifySteps(["cancel", "confirm", "destroy test", "destroy bar"]);
   });
 });