From 68328d2d647d7ee5039980003482a04d15511aa7 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 10 Mar 2020 09:37:54 -0400
Subject: [PATCH] DEV: Replace save-button partial with a component (#9066)

---
 .../components/save-controls.js.es6              |  7 ++++++-
 .../controllers/preferences/account.js.es6       |  3 +--
 .../controllers/preferences/categories.js.es6    |  3 +--
 .../controllers/preferences/emails.js.es6        |  3 +--
 .../controllers/preferences/interface.js.es6     |  3 +--
 .../controllers/preferences/notifications.js.es6 |  3 +--
 .../controllers/preferences/profile.js.es6       |  3 +--
 .../controllers/preferences/tags.js.es6          |  3 +--
 .../controllers/preferences/users.js.es6         |  3 +--
 .../mixins/preferences-tab-controller.js.es6     | 11 -----------
 .../templates/components/save-controls.hbs       |  9 ++++-----
 .../discourse/templates/preferences/account.hbs  |  6 +-----
 .../templates/preferences/categories.hbs         |  6 +-----
 .../discourse/templates/preferences/emails.hbs   |  6 +-----
 .../templates/preferences/interface.hbs          |  6 +-----
 .../templates/preferences/notifications.hbs      |  6 +-----
 .../discourse/templates/preferences/profile.hbs  |  6 +-----
 .../discourse/templates/preferences/tags.hbs     |  7 ++-----
 .../discourse/templates/preferences/users.hbs    |  7 ++-----
 .../templates/user/preferences/_save-button.hbs  | 11 -----------
 .../stylesheets/common/admin/admin_base.scss     |  5 +----
 .../acceptance/admin-site-text-test.js.es6       |  7 +++----
 .../acceptance/preferences-test.js.es6           | 16 ++++++++--------
 23 files changed, 40 insertions(+), 100 deletions(-)
 rename app/assets/javascripts/{admin => discourse}/components/save-controls.js.es6 (72%)
 delete mode 100644 app/assets/javascripts/discourse/mixins/preferences-tab-controller.js.es6
 rename app/assets/javascripts/{admin => discourse}/templates/components/save-controls.hbs (50%)
 delete mode 100644 app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs

diff --git a/app/assets/javascripts/admin/components/save-controls.js.es6 b/app/assets/javascripts/discourse/components/save-controls.js.es6
similarity index 72%
rename from app/assets/javascripts/admin/components/save-controls.js.es6
rename to app/assets/javascripts/discourse/components/save-controls.js.es6
index 9da4e49fe25..d6d7d01e265 100644
--- a/app/assets/javascripts/admin/components/save-controls.js.es6
+++ b/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";
diff --git a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
index 6cac06c1aad..463d5b9283e 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
+++ b/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);
 
diff --git a/app/assets/javascripts/discourse/controllers/preferences/categories.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/categories.js.es6
index 4628234524d..13baaf6fd29 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/categories.js.es6
+++ b/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);
 
diff --git a/app/assets/javascripts/discourse/controllers/preferences/emails.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/emails.js.es6
index 2f7d0832c9c..880b50f7bdd 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/emails.js.es6
+++ b/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
diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
index 1fbed8353b7..ea68080ccd4 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
+++ b/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 = [
diff --git a/app/assets/javascripts/discourse/controllers/preferences/notifications.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/notifications.js.es6
index 8030885efb3..078d0b3fbb1 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/notifications.js.es6
+++ b/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);
 
diff --git a/app/assets/javascripts/discourse/controllers/preferences/profile.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/profile.js.es6
index f6005e355dc..57d8759ac84 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/profile.js.es6
+++ b/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);
 
diff --git a/app/assets/javascripts/discourse/controllers/preferences/tags.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/tags.js.es6
index 1aede6792d4..90d41ccfa1f 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/tags.js.es6
+++ b/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);
 
diff --git a/app/assets/javascripts/discourse/controllers/preferences/users.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/users.js.es6
index ba3e866901b..b0ac0260253 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/users.js.es6
+++ b/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"),
diff --git a/app/assets/javascripts/discourse/mixins/preferences-tab-controller.js.es6 b/app/assets/javascripts/discourse/mixins/preferences-tab-controller.js.es6
deleted file mode 100644
index 4dabeb3fa07..00000000000
--- a/app/assets/javascripts/discourse/mixins/preferences-tab-controller.js.es6
+++ /dev/null
@@ -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");
-  }
-});
diff --git a/app/assets/javascripts/admin/templates/components/save-controls.hbs b/app/assets/javascripts/discourse/templates/components/save-controls.hbs
similarity index 50%
rename from app/assets/javascripts/admin/templates/components/save-controls.hbs
rename to app/assets/javascripts/discourse/templates/components/save-controls.hbs
index d6974ea1085..013cb6e0b7a 100644
--- a/app/assets/javascripts/admin/templates/components/save-controls.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs
index 2fe58dbf597..8a505401fa9 100644
--- a/app/assets/javascripts/discourse/templates/preferences/account.hbs
+++ b/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}}
 
 
diff --git a/app/assets/javascripts/discourse/templates/preferences/categories.hbs b/app/assets/javascripts/discourse/templates/preferences/categories.hbs
index 2eef6ceac77..b0fc96c15bd 100644
--- a/app/assets/javascripts/discourse/templates/preferences/categories.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/emails.hbs b/app/assets/javascripts/discourse/templates/preferences/emails.hbs
index ef99c5be125..d277cea5115 100644
--- a/app/assets/javascripts/discourse/templates/preferences/emails.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
index d3493d0127a..338a7d883e8 100644
--- a/app/assets/javascripts/discourse/templates/preferences/interface.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs b/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
index 9b1b8b9858b..03ca349d677 100644
--- a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/profile.hbs b/app/assets/javascripts/discourse/templates/preferences/profile.hbs
index 1a1909983bd..b0040894dce 100644
--- a/app/assets/javascripts/discourse/templates/preferences/profile.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/tags.hbs b/app/assets/javascripts/discourse/templates/preferences/tags.hbs
index 5aa4ced4b26..906d7761c04 100644
--- a/app/assets/javascripts/discourse/templates/preferences/tags.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/users.hbs b/app/assets/javascripts/discourse/templates/preferences/users.hbs
index 50804371497..d4c183c3a07 100644
--- a/app/assets/javascripts/discourse/templates/preferences/users.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs b/app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs
deleted file mode 100644
index c218e4e4449..00000000000
--- a/app/assets/javascripts/discourse/templates/user/preferences/_save-button.hbs
+++ /dev/null
@@ -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}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 2af39f5675f..61f73bc2b25 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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;
-    }
   }
 }
 
diff --git a/test/javascripts/acceptance/admin-site-text-test.js.es6 b/test/javascripts/acceptance/admin-site-text-test.js.es6
index ea8c8c5d902..0f25de85d00 100644
--- a/test/javascripts/acceptance/admin-site-text-test.js.es6
+++ b/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"));
 });
diff --git a/test/javascripts/acceptance/preferences-test.js.es6 b/test/javascripts/acceptance/preferences-test.js.es6
index 46b11864ede..66af8348abc 100644
--- a/test/javascripts/acceptance/preferences-test.js.es6
+++ b/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");