FEATURE: Don't show the draft checkmark when drafts are saved (#13292)

We don't want to show the draft checkmark in the composer when drafts are saved, as it’s a little bit distracting to see it keeps appearing and disappearing. Only in the case of error does it need to show anything, we will be showing a "drafts offline" warning as we did it before.

An important detail is that the warning was appearing and disappearing all the time too. Now, the warning won’t be flashing while a user is typing, it’ll be disappearing only when the draft was eventually saved.

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

@@ -1,6 +1,6 @@
 import EmberObject, { set } from "@ember/object";
 import { and, equal, not, or, reads } from "@ember/object/computed";
-import { cancel, later, next, throttle } from "@ember/runloop";
+import { next, throttle } from "@ember/runloop";
 import discourseComputed, {
   observes,
   on,
@@ -113,7 +113,6 @@ const Composer = RestModel.extend({
   unlistTopic: false,
   noBump: false,
   draftSaving: false,
-  draftSaved: false,
   draftForceSave: false,
 
   archetypes: reads("site.archetypes"),
@@ -1190,16 +1189,10 @@ const Composer = RestModel.extend({
     }
 
     this.setProperties({
-      draftSaved: false,
       draftSaving: true,
       draftConflictUser: null,
     });
 
-    if (this._clearingStatus) {
-      cancel(this._clearingStatus);
-      this._clearingStatus = null;
-    }
-
     let data = this.serialize(_draft_serializer);
 
     if (data.postId && !isEmpty(this.originalText)) {
@@ -1224,7 +1217,7 @@ const Composer = RestModel.extend({
           });
         } else {
           this.setProperties({
-            draftSaved: true,
+            draftStatus: null,
             draftConflictUser: null,
             draftForceSave: false,
           });
@@ -1276,23 +1269,6 @@ const Composer = RestModel.extend({
         this.set("draftSaving", false);
       });
   },
-
-  @observes("title", "reply")
-  dataChanged() {
-    const draftStatus = this.draftStatus;
-
-    if (draftStatus && !this._clearingStatus) {
-      this._clearingStatus = later(
-        this,
-        () => {
-          this.setProperties({ draftStatus: null, draftConflictUser: null });
-          this._clearingStatus = null;
-          this.setProperties({ draftSaving: false, draftSaved: false });
-        },
-        Ember.Test ? 0 : 1000
-      );
-    }
-  },
 });
 
 Composer.reopenClass({

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -175,14 +175,12 @@
               </div>
             {{/if}}
             <div class={{if isUploading "hidden"}} id="draft-status">
-              {{#if model.draftSaving}}<div class="spinner small"></div>{{/if}}
-              {{#if model.draftSaved}}{{d-icon "check" class="save-animation"}}{{/if}}
               {{#if model.draftStatus}}
                 <span title={{model.draftStatus}}>
                   {{#if model.draftConflictUser}}
                     {{avatar model.draftConflictUser imageSize="small"}} {{d-icon "user-edit"}}
                   {{else}}
-                    {{d-icon "sync-alt"}}
+                    {{d-icon "exclamation-triangle"}}
                   {{/if}}
                   {{#unless site.mobileView}}
                     {{model.draftStatus}}

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

@@ -0,0 +1,53 @@
+import {
+  acceptance,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+import { click, fillIn, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+import I18n from "I18n";
+
+acceptance("Composer - Draft saving", function (needs) {
+  needs.user();
+
+  const draftThatWillBeSaved = "This_will_be_saved_successfully";
+
+  needs.pretender((server, helper) => {
+    server.post("/draft.json", (request) => {
+      const success = request.requestBody.includes(draftThatWillBeSaved);
+      return success
+        ? helper.response({ success: true })
+        : helper.response(500, {});
+    });
+  });
+
+  test("Shows a warning if a draft wasn't saved", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click(".topic-post:nth-of-type(1) button.show-more-actions");
+    await click(".topic-post:nth-of-type(1) button.edit");
+
+    await fillIn(".d-editor-input", draftThatWillBeSaved);
+
+    assert.notOk(
+      exists("div#draft-status span"),
+      "the draft was saved, there's no warning"
+    );
+
+    await fillIn(".d-editor-input", "This won't be saved because of error");
+    assert.equal(
+      query("div#draft-status span").innerText.trim(),
+      I18n.t("composer.drafts_offline"),
+      "the draft wasn't saved, a warning is rendered"
+    );
+    assert.ok(
+      exists("div#draft-status svg.d-icon-exclamation-triangle"),
+      "an exclamation icon is rendered"
+    );
+
+    await fillIn(".d-editor-input", draftThatWillBeSaved);
+    assert.notOk(
+      exists("div#draft-status span"),
+      "the draft was saved again, the warning has disappeared"
+    );
+  });
+});

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

@@ -698,8 +698,6 @@ acceptance("Composer", function (needs) {
         ),
         "mode should have changed"
       );
-
-      assert.ok(queryAll(".save-animation"), "save animation should show");
     } finally {
       toggleCheckDraftPopup(false);
     }

app/assets/stylesheets/common/base/compose.scss

@@ -482,11 +482,6 @@ div.ac-wrap {
   }
 }
 
-.save-animation {
-  -webkit-animation: transformer 5s forwards;
-  animation: transformer 5s forwards;
-}
-
 @-webkit-keyframes transformer {
   90% {
     -webkit-filter: opacity(1);