FIX: add a way to cancel initialization of new draft (#11106)

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -28,6 +28,7 @@ import { isTesting } from "discourse-common/config/environment";
 import EmberObject, { computed, action } from "@ember/object";
 import deprecated from "discourse-common/lib/deprecated";
 import bootbox from "bootbox";
+import showModal from "discourse/lib/show-modal";
 import {
   cannotPostAgain,
   durationTextFromSeconds,
@@ -1097,46 +1098,36 @@ export default Controller.extend({
       cancel(this._saveDraftDebounce);
     }
 
-    const keyPrefix =
-      this.model.action === "edit" ? "post.abandon_edit" : "post.abandon";
-
     let promise = new Promise((resolve, reject) => {
       if (this.get("model.hasMetaData") || this.get("model.replyDirty")) {
-        bootbox.dialog(I18n.t(keyPrefix + ".confirm"), [
-          {
-            label: differentDraft
-              ? I18n.t(keyPrefix + ".no_save_draft")
-              : I18n.t(keyPrefix + ".no_value"),
-            callback: () => {
-              // cancel composer without destroying draft on new draft context
-              if (differentDraft) {
+        const controller = showModal("discard-draft", {
+          model: this.model,
+          modalClass: "discard-draft-modal",
+          title: "post.abandon.title",
+        });
+        controller.setProperties({
+          differentDraft,
+          onDestroyDraft: () => {
+            this.destroyDraft()
+              .then(() => {
                 this.model.clearState();
                 this.close();
+              })
+              .finally(() => {
                 resolve();
-              }
+              });
+          },
+          onSaveDraft: () => {
+            // cancel composer without destroying draft on new draft context
+            if (differentDraft) {
+              this.model.clearState();
+              this.close();
+              resolve();
+            }
 
-              reject();
-            },
+            reject();
           },
-          {
-            label: I18n.t(keyPrefix + ".yes_value"),
-            class: "btn-danger",
-            callback: (result) => {
-              if (result) {
-                this.destroyDraft()
-                  .then(() => {
-                    this.model.clearState();
-                    this.close();
-                  })
-                  .finally(() => {
-                    resolve();
-                  });
-              } else {
-                resolve();
-              }
-            },
-          },
-        ]);
+        });
       } else {
         // it is possible there is some sort of crazy draft with no body ... just give up on it
         this.destroyDraft()

app/assets/javascripts/discourse/app/controllers/discard-draft.js

@@ -0,0 +1,40 @@
+import Controller from "@ember/controller";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+import discourseComputed from "discourse-common/utils/decorators";
+
+export default Controller.extend(ModalFunctionality, {
+  differentDraft: null,
+
+  @discourseComputed()
+  keyPrefix() {
+    return this.model.action === "edit" ? "post.abandon_edit" : "post.abandon";
+  },
+
+  @discourseComputed("keyPrefix")
+  descriptionKey(keyPrefix) {
+    return `${keyPrefix}.confirm`;
+  },
+
+  @discourseComputed("keyPrefix")
+  discardKey(keyPrefix) {
+    return `${keyPrefix}.yes_value`;
+  },
+
+  @discourseComputed("keyPrefix", "differentDraft")
+  saveKey(keyPrefix, differentDraft) {
+    return differentDraft
+      ? `${keyPrefix}.no_save_draft`
+      : `${keyPrefix}.no_value`;
+  },
+
+  actions: {
+    _destroyDraft() {
+      this.onDestroyDraft();
+      this.send("closeModal");
+    },
+    _saveDraft() {
+      this.onSaveDraft();
+      this.send("closeModal");
+    },
+  },
+});

app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs

@@ -0,0 +1,10 @@
+{{#d-modal-body}}
+  <div class="instructions">
+    {{i18n descriptionKey}}
+  </div>
+{{/d-modal-body}}
+
+<div class="modal-footer">
+  {{d-button label=discardKey class="btn-danger" action=(action "_destroyDraft")}}
+  {{d-button label=saveKey action=(action "_saveDraft")}}
+</div>

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -291,9 +291,9 @@ acceptance("Composer", function (needs) {
     await click(".topic-post:eq(0) button.show-more-actions");
     await click(".topic-post:eq(0) button.edit");
 
-    await click("a[data-handler='0']");
+    await click(".modal-footer button:eq(1)");
 
-    assert.ok(!visible(".bootbox.modal"));
+    assert.ok(!visible(".discard-draft-modal.modal"));
     assert.equal(
       queryAll(".d-editor-input").val(),
       "this is the content of my reply"
@@ -408,9 +408,12 @@ acceptance("Composer", function (needs) {
     await click(".topic-post:eq(0) button.edit");
     await fillIn(".d-editor-input", "This is a dirty reply");
     await click(".topic-post:eq(1) button.edit");
-    assert.ok(exists(".bootbox.modal"), "it pops up a confirmation dialog");
+    assert.ok(
+      exists(".discard-draft-modal.modal"),
+      "it pops up a confirmation dialog"
+    );
 
-    await click(".modal-footer a:eq(0)");
+    await click(".modal-footer button:eq(0)");
     assert.equal(
       queryAll(".d-editor-input").val().indexOf("This is the second post."),
       0,
@@ -563,8 +566,11 @@ acceptance("Composer", function (needs) {
     await click(".topic-post:eq(0) button.reply");
     await fillIn(".d-editor-input", "This is a dirty reply");
     await click(".topic-post:eq(0) button.edit");
-    assert.ok(exists(".bootbox.modal"), "it pops up a confirmation dialog");
-    await click(".modal-footer a:eq(0)");
+    assert.ok(
+      exists(".discard-draft-modal.modal"),
+      "it pops up a confirmation dialog"
+    );
+    await click(".modal-footer button:eq(0)");
     assert.equal(
       queryAll(".d-editor-input").val().indexOf("This is the first post."),
       0,
@@ -579,12 +585,15 @@ acceptance("Composer", function (needs) {
     await fillIn(".d-editor-input", "This is a dirty reply");
     await click(".toggler");
     await click(".topic-post:eq(1) button.edit");
-    assert.ok(exists(".bootbox.modal"), "it pops up a confirmation dialog");
+    assert.ok(
+      exists(".discard-draft-modal.modal"),
+      "it pops up a confirmation dialog"
+    );
     assert.equal(
-      queryAll(".modal-footer a:eq(1)").text(),
+      queryAll(".modal-footer button:eq(1)").text().trim(),
       I18n.t("post.abandon.no_value")
     );
-    await click(".modal-footer a:eq(0)");
+    await click(".modal-footer button:eq(0)");
     assert.equal(
       queryAll(".d-editor-input").val().indexOf("This is the second post."),
       0,
@@ -601,12 +610,15 @@ acceptance("Composer", function (needs) {
     await click("#site-logo");
     await click("#create-topic");
 
-    assert.ok(exists(".bootbox.modal"), "it pops up a confirmation dialog");
+    assert.ok(
+      exists(".discard-draft-modal.modal"),
+      "it pops up a confirmation dialog"
+    );
     assert.equal(
-      queryAll(".modal-footer a:eq(1)").text(),
+      queryAll(".modal-footer button:eq(1)").text().trim(),
       I18n.t("post.abandon.no_save_draft")
     );
-    await click(".modal-footer a:eq(1)");
+    await click(".modal-footer button:eq(1)");
     assert.equal(
       queryAll(".d-editor-input").val(),
       "",

config/locales/client.en.yml

@@ -2762,6 +2762,7 @@ en:
         yes_value: "Yes, discard edit"
 
       abandon:
+        title: "Abandon Draft"
         confirm: "Are you sure you want to abandon your post?"
         no_value: "No, keep"
         no_save_draft: "No, save draft"