DEV: Replace save-button partial with a component (#9066)

app/assets/javascripts/discourse/components/save-controls.js.es6

@@ -3,10 +3,15 @@ import { or } from "@ember/object/computed";
 import Component from "@ember/component";
 
 export default Component.extend({
-  classNames: ["controls"],
+  classNames: ["controls", "save-button"],
 
   buttonDisabled: or("model.isSaving", "saveDisabled"),
 
+  didInsertElement() {
+    this._super(...arguments);
+    this.set("saved", false);
+  },
+
   @discourseComputed("model.isSaving")
   savingText(saving) {
     return saving ? "saving" : "save";

app/assets/javascripts/discourse/controllers/preferences/account.js.es6

@@ -3,7 +3,6 @@ import Controller from "@ember/controller";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import CanCheckEmails from "discourse/mixins/can-check-emails";
 import discourseComputed from "discourse-common/utils/decorators";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { propertyNotEqual, setting } from "discourse/lib/computed";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
@@ -15,7 +14,7 @@ import logout from "discourse/lib/logout";
 // Number of tokens shown by default.
 const DEFAULT_AUTH_TOKENS_COUNT = 2;
 
-export default Controller.extend(CanCheckEmails, PreferencesTabController, {
+export default Controller.extend(CanCheckEmails, {
   init() {
     this._super(...arguments);
 

app/assets/javascripts/discourse/controllers/preferences/categories.js.es6

@@ -1,10 +1,9 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import { or } from "@ember/object/computed";
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   init() {
     this._super(...arguments);
 

app/assets/javascripts/discourse/controllers/preferences/emails.js.es6

@@ -1,6 +1,5 @@
 import { equal } from "@ember/object/computed";
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
@@ -10,7 +9,7 @@ const EMAIL_LEVELS = {
   NEVER: 2
 };
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   emailMessagesLevelAway: equal(
     "model.user_option.email_messages_level",
     EMAIL_LEVELS.ONLY_WHEN_AWAY

app/assets/javascripts/discourse/controllers/preferences/interface.js.es6

@@ -1,6 +1,5 @@
 import { inject } from "@ember/controller";
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { setDefaultHomepage } from "discourse/lib/utilities";
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import {
@@ -27,7 +26,7 @@ const USER_HOMES = {
 const TEXT_SIZES = ["smaller", "normal", "larger", "largest"];
 const TITLE_COUNT_MODES = ["notifications", "contextual"];
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   @discourseComputed("makeThemeDefault")
   saveAttrNames(makeDefault) {
     let attrs = [

app/assets/javascripts/discourse/controllers/preferences/notifications.js.es6

@@ -1,9 +1,8 @@
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { NotificationLevels } from "discourse/lib/notification-levels";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   init() {
     this._super(...arguments);
 

app/assets/javascripts/discourse/controllers/preferences/profile.js.es6

@@ -2,13 +2,12 @@ import { isEmpty } from "@ember/utils";
 import EmberObject from "@ember/object";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { cookAsync } from "discourse/lib/text";
 import { ajax } from "discourse/lib/ajax";
 import showModal from "discourse/lib/show-modal";
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   init() {
     this._super(...arguments);
 

app/assets/javascripts/discourse/controllers/preferences/tags.js.es6

@@ -1,9 +1,8 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   init() {
     this._super(...arguments);
 

app/assets/javascripts/discourse/controllers/preferences/users.js.es6

@@ -2,10 +2,9 @@ import { makeArray } from "discourse-common/lib/helpers";
 import { alias, gte, or } from "@ember/object/computed";
 import { action, computed } from "@ember/object";
 import Controller from "@ember/controller";
-import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend(PreferencesTabController, {
+export default Controller.extend({
   ignoredUsernames: alias("model.ignored_usernames"),
   userIsMemberOrAbove: gte("model.trust_level", 2),
   ignoredEnabled: or("userIsMemberOrAbove", "model.staff"),

app/assets/javascripts/discourse/mixins/preferences-tab-controller.js.es6

@@ -1,11 +0,0 @@
-import discourseComputed from "discourse-common/utils/decorators";
-import Mixin from "@ember/object/mixin";
-
-export default Mixin.create({
-  saved: false,
-
-  @discourseComputed("model.isSaving")
-  saveButtonText(isSaving) {
-    return isSaving ? I18n.t("saving") : I18n.t("save");
-  }
-});

app/assets/javascripts/discourse/templates/components/save-controls.hbs

@@ -1,7 +1,6 @@
 {{d-button action=action disabled=buttonDisabled label=savingText class="btn-primary save-changes"}}
+{{#if saved}}
+  <span class='saved'>{{i18n 'saved'}}</span>
+{{/if}}
+
 {{yield}}
-<div class='save-messages'>
-  {{#if saved}}
-    <div class='saved'>{{i18n 'saved'}}</div>
-  {{/if}}
-</div>

app/assets/javascripts/discourse/templates/preferences/account.hbs

@@ -215,11 +215,7 @@
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
 {{#if canSaveUser}}
-  <div class="control-group save-button">
-    <div class="controls">
-      {{partial 'user/preferences/save-button'}}
-    </div>
-  </div>
+  {{save-controls model=model action=(action "save") saved=saved}}
 {{/if}}
 
 

app/assets/javascripts/discourse/templates/preferences/categories.hbs

@@ -62,11 +62,7 @@
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
 {{#if canSave}}
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+  {{save-controls model=model action=(action "save") saved=saved}}
 {{else}}
   {{i18n 'user.no_category_access'}}
 {{/if}}

app/assets/javascripts/discourse/templates/preferences/emails.hbs

@@ -93,8 +93,4 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+{{save-controls model=model action=(action "save") saved=saved}}

app/assets/javascripts/discourse/templates/preferences/interface.hbs

@@ -99,8 +99,4 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+{{save-controls model=model action=(action "save") saved=saved}}

app/assets/javascripts/discourse/templates/preferences/notifications.hbs

@@ -68,8 +68,4 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+{{save-controls model=model action=(action "save") saved=saved}}

app/assets/javascripts/discourse/templates/preferences/profile.hbs

@@ -95,8 +95,4 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+{{save-controls model=model action=(action "save") saved=saved}}

app/assets/javascripts/discourse/templates/preferences/tags.hbs

@@ -59,9 +59,6 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+{{save-controls model=model action=(action "save") saved=saved}}
+
 {{/if}}

app/assets/javascripts/discourse/templates/preferences/users.hbs

@@ -27,8 +27,5 @@
 
 {{plugin-outlet name="user-custom-controls" args=(hash model=model)}}
 
-<div class="control-group save-button">
-  <div class="controls">
-    {{partial 'user/preferences/save-button'}}
-  </div>
-</div>
+
+{{#save-controls model=model action=(action "save") saved=saved}}{{/save-controls}}

app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs

@@ -1,11 +0,0 @@
-{{#d-button
-  class="btn-primary save-user"
-  action=(action "save")
-  disabled=model.isSaving
-}}
-  {{saveButtonText}}
-{{/d-button}}
-
-{{#if saved}}
-  <span class='saved-user'>{{i18n 'saved'}}</span>
-{{/if}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -244,7 +244,7 @@ $mobile-breakpoint: 700px;
       width: 100%;
       max-width: 800px;
     }
-    .save-messages,
+    .save-button,
     .title {
       margin-bottom: 1em;
     }
@@ -423,9 +423,6 @@ $mobile-breakpoint: 700px;
   }
   .controls {
     @include clearfix;
-    .save-messages {
-      margin-top: 1em;
-    }
   }
 }
 

test/javascripts/acceptance/admin-site-text-test.js.es6

@@ -27,15 +27,14 @@ QUnit.test("edit and revert a site text by key", async assert => {
   await visit("/admin/customize/site_texts/site.test");
 
   assert.equal(find(".title h3").text(), "site.test");
-  assert.ok(!exists(".save-messages .saved"));
-  assert.ok(!exists(".save-messages .saved"));
+  assert.ok(!exists(".saved"));
   assert.ok(!exists(".revert-site-text"));
 
   // Change the value
   await fillIn(".site-text-value", "New Test Value");
   await click(".save-changes");
 
-  assert.ok(exists(".save-messages .saved"));
+  assert.ok(exists(".saved"));
   assert.ok(exists(".revert-site-text"));
 
   // Revert the changes
@@ -45,6 +44,6 @@ QUnit.test("edit and revert a site text by key", async assert => {
 
   await click(".bootbox.modal .btn-primary");
 
-  assert.ok(!exists(".save-messages .saved"));
+  assert.ok(!exists(".saved"));
   assert.ok(!exists(".revert-site-text"));
 });

test/javascripts/acceptance/preferences-test.js.es6

@@ -77,10 +77,10 @@ QUnit.test("update some fields", async assert => {
   assert.ok(exists(".user-preferences"), "it shows the preferences");
 
   const savePreferences = async () => {
-    assert.ok(!exists(".saved-user"), "it hasn't been saved yet");
-    await click(".save-user");
-    assert.ok(exists(".saved-user"), "it displays the saved message");
-    find(".saved-user").remove();
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
   };
 
   fillIn(".pref-name input[type=text]", "Jon Snow");
@@ -124,10 +124,10 @@ QUnit.test("font size change", async assert => {
   $.removeCookie("text_size");
 
   const savePreferences = async () => {
-    assert.ok(!exists(".saved-user"), "it hasn't been saved yet");
-    await click(".save-user");
-    assert.ok(exists(".saved-user"), "it displays the saved message");
-    find(".saved-user").remove();
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
   };
 
   await visit("/u/eviltrout/preferences/interface");