From c06c88b47952bee9c3bf30405959e8d3308f4e39 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 12 Sep 2017 01:36:58 +0200
Subject: [PATCH] cleaner title attribute for select-box

---
 .../components/notifications-button.js.es6    | 26 ++++++++------
 .../discourse/components/select-box.js.es6    |  9 +++++
 .../dropdown-select-box/dropdown-header.hbs   |  4 +--
 .../templates/components/select-box.hbs       |  1 +
 .../select-box/select-box-header.hbs          |  2 +-
 .../dropdown-select-box-test.js.es6           | 23 +++++++++++++
 .../topic-notifications-button-test.js.es6    | 34 +++++++++++++++++++
 7 files changed, 85 insertions(+), 14 deletions(-)
 create mode 100644 test/javascripts/components/dropdown-select-box-test.js.es6
 create mode 100644 test/javascripts/components/topic-notifications-button-test.js.es6

diff --git a/app/assets/javascripts/discourse/components/notifications-button.js.es6 b/app/assets/javascripts/discourse/components/notifications-button.js.es6
index 4270b30e483..2c54defb292 100644
--- a/app/assets/javascripts/discourse/components/notifications-button.js.es6
+++ b/app/assets/javascripts/discourse/components/notifications-button.js.es6
@@ -16,20 +16,24 @@ export default DropdownSelectBoxComponent.extend({
 
   value: Em.computed.alias("notificationLevel"),
 
-  @computed("value")
-  icon(value) {
-    const details = buttonDetails(value);
+  @computed("selectedDetails")
+  icon(details) {
     return iconHTML(details.icon, {class: details.key}).htmlSafe();
   },
 
-  @computed("value", "showFullTitle")
-  generatedHeadertext(value, showFullTitle) {
-    if (showFullTitle) {
-      const details = buttonDetails(value);
-      return I18n.t(`${this.get("i18nPrefix")}.${details.key}.title`);
-    } else {
-      return null;
-    }
+  @computed("selectedDetails.key", "i18nPrefix")
+  selectedTitle(key, prefix) {
+    return I18n.t(`${prefix}.${key}.title`);
+  },
+
+  @computed("value")
+  selectedDetails(value) {
+    return buttonDetails(value);
+  },
+
+  @computed("selectedTitle", "showFullTitle")
+  generatedHeadertext(selectedTitle, showFullTitle) {
+    return showFullTitle ? selectedTitle : null;
   },
 
   @computed
diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6
index 8ac9dd350df..e3483750a02 100644
--- a/app/assets/javascripts/discourse/components/select-box.js.es6
+++ b/app/assets/javascripts/discourse/components/select-box.js.es6
@@ -308,6 +308,15 @@ export default Ember.Component.extend({
     });
   },
 
+  @computed("headerText", "selectedContent", "textKey")
+  selectedTitle(headerText, selectedContent, textKey) {
+    if (Ember.isNone(selectedContent)) {
+      return headerText;
+    }
+
+    return selectedContent[textKey];
+  },
+
   @computed("headerText", "dynamicHeaderText", "selectedContent", "textKey", "clearSelectionLabel")
   generatedHeadertext(headerText, dynamic, selectedContent, textKey, clearSelectionLabel) {
     if (dynamic && !Ember.isNone(selectedContent)) {
diff --git a/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs b/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
index d136e357e1c..be525a9fd71 100644
--- a/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
+++ b/app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs
@@ -1,8 +1,8 @@
 <button
   class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}"
-  aria-label="{{text}}"
+  aria-label="{{selectedTitle}}"
   type="button"
-  title="{{text}}">
+  title="{{selectedTitle}}">
 
   {{{icon}}}
 
diff --git a/app/assets/javascripts/discourse/templates/components/select-box.hbs b/app/assets/javascripts/discourse/templates/components/select-box.hbs
index 37ba7b460dd..c20f76e2e37 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box.hbs
@@ -9,6 +9,7 @@
 
 {{component selectBoxHeaderComponent
   text=generatedHeadertext
+  selectedTitle=selectedTitle
   focused=focused
   caretUpIcon=caretUpIcon
   caretDownIcon=caretDownIcon
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
index cf3812c0dbe..b07be580176 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs
@@ -2,7 +2,7 @@
   {{d-icon icon class="icon"}}
 {{/if}}
 
-<span class="current-selection">
+<span class="current-selection" title={{selectedTitle}}>
   {{text}}
 </span>
 
diff --git a/test/javascripts/components/dropdown-select-box-test.js.es6 b/test/javascripts/components/dropdown-select-box-test.js.es6
new file mode 100644
index 00000000000..97d4f8fc281
--- /dev/null
+++ b/test/javascripts/components/dropdown-select-box-test.js.es6
@@ -0,0 +1,23 @@
+import componentTest from 'helpers/component-test';
+
+moduleForComponent('dropdown-select-box', { integration: true });
+
+componentTest('the header has a title', {
+  template: '{{dropdown-select-box content=content value=value}}',
+
+  beforeEach() {
+    this.set("value", 1);
+    this.set("content", [{ id: 1, text: "apple" }, { id: 2, text: "peach" }]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(find(".select-box-header .btn").attr("title"), "apple", "it has the correct title");
+    });
+
+    andThen(() => {
+      this.set("value", 2);
+      assert.equal(find(".select-box-header .btn").attr("title"), "peach", "it correctly changes the title");
+    });
+  }
+});
diff --git a/test/javascripts/components/topic-notifications-button-test.js.es6 b/test/javascripts/components/topic-notifications-button-test.js.es6
new file mode 100644
index 00000000000..eda38dca1ff
--- /dev/null
+++ b/test/javascripts/components/topic-notifications-button-test.js.es6
@@ -0,0 +1,34 @@
+import componentTest from 'helpers/component-test';
+import Topic from 'discourse/models/topic';
+
+const buildTopic = function() {
+  return Topic.create({
+    id: 4563,
+    title: "Qunit Test Topic",
+    details: {
+      notification_level: 1
+    }
+  });
+};
+
+
+moduleForComponent('topic-notifications-button', { integration: true });
+
+componentTest('the header has a localized title', {
+  template: '{{topic-notifications-button topic=topic}}',
+
+  beforeEach() {
+    this.set("topic", buildTopic());
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(find(".select-box-header .btn").attr("title"), "Normal", "it has the correct title");
+    });
+
+    andThen(() => {
+      this.set("topic.details.notification_level", 2);
+      assert.equal(find(".select-box-header .btn").attr("title"), "Tracking", "it correctly changes the title");
+    });
+  }
+});