FIX: hide "Save Draft" button when editing post on same topic. (#22266)

When the composer is open with a draft for a topic and the user clicks the edit button of a post on the same topic, we shouldn't display the "Save Draft" button. Because the edited post's draft will override the existing draft of the same topic even if we saved it.

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

@@ -2,6 +2,8 @@ import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
 export default Controller.extend(ModalFunctionality, {
+  showSaveDraftButton: true,
+
   actions: {
     async destroyDraft() {
       await this.onDestroyDraft();

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

@@ -826,7 +826,7 @@ export default Controller.extend(bufferedProperty("model"), {
 
       // Cancel and reopen the composer for the first post
       if (editingFirst) {
-        composer.cancelComposer().then(() => composer.open(opts));
+        composer.cancelComposer(opts).then(() => composer.open(opts));
       } else {
         composer.open(opts);
       }

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

@@ -1297,7 +1297,7 @@ export default class ComposerController extends Controller {
           }
         }
 
-        await this.cancelComposer();
+        await this.cancelComposer(opts);
         await this.open(opts);
         return;
       }
@@ -1492,7 +1492,7 @@ export default class ComposerController extends Controller {
     });
   }
 
-  cancelComposer() {
+  cancelComposer(opts = {}) {
     this.skipAutoSave = true;
 
     if (this._saveDraftDebounce) {
@@ -1505,7 +1505,13 @@ export default class ComposerController extends Controller {
           model: this.model,
           modalClass: "discard-draft-modal",
         });
+        const overridesDraft =
+          this.model.composeState === Composer.OPEN &&
+          this.model.draftKey === opts.draftKey &&
+          [Composer.EDIT_SHARED_DRAFT, Composer.EDIT].includes(opts.action);
+        const showSaveDraftButton = this.model.canSaveDraft && !overridesDraft;
         modal.setProperties({
+          showSaveDraftButton,
           onDestroyDraft: () => {
             return this.destroyDraft()
               .then(() => {

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

@@ -11,7 +11,7 @@
     @class="btn-danger discard-draft"
     @action={{action "destroyDraft"}}
   />
-  {{#if this.model.canSaveDraft}}
+  {{#if this.showSaveDraftButton}}
     <DButton
       @label="post.cancel_composer.save_draft"
       @class="save-draft"

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

@@ -360,7 +360,8 @@ acceptance("Composer", function (needs) {
     );
 
     await click(".topic-post:nth-of-type(1) button.edit");
-    await click(".modal-footer button.save-draft");
+    assert.ok(invisible(".modal-footer button.save-draft"));
+    await click(".modal-footer button.discard-draft");
     assert.ok(invisible(".discard-draft-modal.modal"));
 
     assert.strictEqual(
@@ -789,23 +790,6 @@ acceptance("Composer", function (needs) {
     );
   });
 
-  test("Composer with dirty reply can toggle to edit", async function (assert) {
-    await visit("/t/this-is-a-test-topic/9");
-
-    await click(".topic-post:nth-of-type(1) button.reply");
-    await fillIn(".d-editor-input", "This is a dirty reply");
-    await click(".topic-post:nth-of-type(1) button.edit");
-    assert.ok(
-      exists(".discard-draft-modal.modal"),
-      "it pops up a confirmation dialog"
-    );
-    await click(".modal-footer button.discard-draft");
-    assert.ok(
-      query(".d-editor-input").value.startsWith("This is the first post."),
-      "it populates the input with the post text"
-    );
-  });
-
   test("Composer draft with dirty reply can toggle to edit", async function (assert) {
     await visit("/t/this-is-a-test-topic/9");
 
@@ -817,17 +801,13 @@ acceptance("Composer", function (needs) {
       exists(".discard-draft-modal.modal"),
       "it pops up a confirmation dialog"
     );
-    assert.strictEqual(
+    assert.ok(invisible(".modal-footer button.save-draft"));
-      query(".modal-footer button.save-draft").innerText.trim(),
-      I18n.t("post.cancel_composer.save_draft"),
-      "has save draft button"
-    );
     assert.strictEqual(
       query(".modal-footer button.keep-editing").innerText.trim(),
       I18n.t("post.cancel_composer.keep_editing"),
       "has keep editing button"
     );
-    await click(".modal-footer button.save-draft");
+    await click(".modal-footer button.discard-draft");
     assert.ok(
       query(".d-editor-input").value.startsWith("This is the second post."),
       "it populates the input with the post text"