cleaner title attribute for select-box

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

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)) {

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}}}
 

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

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>
 

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");
+    });
+  }
+});

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");
+    });
+  }
+});