FIX: makes state of select-box more resilient to model changes

app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6

@@ -1,7 +1,6 @@
 import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import computed from "ember-addons/ember-computed-decorators";
-import { observes } from "ember-addons/ember-computed-decorators";
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["categories-admin-dropdown"],
@@ -39,9 +38,12 @@ export default DropdownSelectBoxComponent.extend({
     reorder: "reorderCategories"
   },
 
-  @observes("value")
-  _didSelectRow() {
-    this.sendAction(`actionNames.${this.get("value")}`);
-    this.set("value", null);
+  actions: {
+    onSelectRow(content) {
+      this._super(content);
+
+      this.sendAction(`actionNames.${this.get("value")}`);
+      this.set("value", null);
+    }
   }
 });

app/assets/javascripts/discourse/components/category-notifications-button.js.es6

@@ -1,5 +1,4 @@
 import NotificationOptionsComponent from "discourse/components/notifications-button";
-import { observes } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
@@ -19,8 +18,11 @@ export default NotificationOptionsComponent.extend({
 
   generatedHeadertext: null,
 
-  @observes("value")
-  _notificationLevelChanged() {
-    this.get("category").setNotification(this.get("value"));
-  },
+  actions: {
+    onSelectRow(content) {
+      this._super(content);
+
+      this.get("category").setNotification(this.get("value"));
+    }
+  }
 });

app/assets/javascripts/discourse/components/group-notifications-button.js.es6

@@ -1,5 +1,4 @@
 import NotificationOptionsComponent from "discourse/components/notifications-button";
-import { observes } from "ember-addons/ember-computed-decorators";
 
 export default NotificationOptionsComponent.extend({
   classNames: ["group-notifications-button"],
@@ -8,8 +7,11 @@ export default NotificationOptionsComponent.extend({
 
   i18nPrefix: "groups.notifications",
 
-  @observes("value")
-  _notificationLevelChanged() {
-    this.get("group").setNotification(this.get("value"), this.get("user.id"));
+  actions: {
+    onSelectRow(content) {
+      this._super(content);
+
+      this.get("group").setNotification(this.get("value"), this.get("user.id"));
+    }
   }
 });

app/assets/javascripts/discourse/components/pinned-options.js.es6

@@ -57,14 +57,17 @@ export default DropdownSelectBoxComponent.extend({
     return `${title}${iconHTML("caret-down")}`.htmlSafe();
   },
 
-  @observes("value")
-  _didSelectRow() {
-    const topic = this.get("topic");
+  actions: {
+    onSelectRow(content) {
+      this._super(content);
 
-    if (this.get("value") === "unpinned") {
-      topic.clearPin();
-    } else {
-      topic.rePin();
+      const topic = this.get("topic");
+
+      if (this.get("value") === "unpinned") {
+        topic.clearPin();
+      } else {
+        topic.rePin();
+      }
     }
   }
 });

app/assets/javascripts/discourse/components/select-box.js.es6

@@ -215,10 +215,7 @@ export default Ember.Component.extend({
     if (this.get("expanded")) {
       if ((keyCode === 13 || keyCode === 9) && Ember.isPresent(this.get("highlightedValue"))) {
         event.preventDefault();
-        this.setProperties({
-          value: this._castInteger(this.get("highlightedValue")),
-          expanded: false
-        });
+        this.send("onSelectRow", this.get("highlightedContent"));
       }
 
       if (keyCode === 9) {
@@ -301,14 +298,25 @@ export default Ember.Component.extend({
     };
   },
 
-  @computed("value", "content.[]")
-  selectedContent(value, content) {
+  @computed("value", "content.[]", "idKey")
+  selectedContent(value, content, idKey) {
     if (Ember.isNone(value)) {
       return null;
     }
 
     return content.find((c) => {
-      return this._castInteger(c[this.get("idKey")]) === value;
+      return this._castInteger(Ember.get(c, idKey)) === value;
+    });
+  },
+
+  @computed("highlightedValue", "content.[]", "idKey")
+  highlightedContent(highlightedValue, content, idKey) {
+    if (Ember.isNone(highlightedValue)) {
+      return null;
+    }
+
+    return content.find((c) => {
+      return this._castInteger(Ember.get(c, idKey)) === highlightedValue;
     });
   },
 
@@ -366,13 +374,13 @@ export default Ember.Component.extend({
     },
 
     onHoverRow(content) {
-      const id = this._castInteger(content[this.get("idKey")]);
+      const id = this._castInteger(Ember.get(content, this.get("idKey")));
       this.set("highlightedValue", id);
     },
 
     onSelectRow(content) {
       this.setProperties({
-        value: this._castInteger(content[this.get("idKey")]),
+        value: this._castInteger(Ember.get(content, this.get("idKey"))),
         expanded: false
       });
     },
@@ -444,15 +452,15 @@ export default Ember.Component.extend({
 
     if (direction === "down") {
       if (currentIndex < 0) {
-        this.set("highlightedValue", this._castInteger(content[0][idKey]));
+        this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey)));
       } else if(currentIndex + 1 < content.length) {
-        this.set("highlightedValue", this._castInteger(content[currentIndex + 1][idKey]));
+        this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex + 1], idKey)));
       }
     } else {
       if (currentIndex <= 0) {
-        this.set("highlightedValue", this._castInteger(content[0][idKey]));
+        this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey)));
       } else if(currentIndex - 1 < content.length) {
-        this.set("highlightedValue", this._castInteger(content[currentIndex - 1][idKey]));
+        this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex - 1], idKey)));
       }
     }
 

app/assets/javascripts/discourse/components/tag-notifications-button.js.es6

@@ -1,5 +1,4 @@
 import NotificationOptionsComponent from "discourse/components/notifications-button";
-import { observes } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
@@ -8,15 +7,18 @@ export default NotificationOptionsComponent.extend({
 
   i18nPrefix: "tagging.notifications",
 
-  @observes("value")
-  _notificationLevelChanged() {
-    this.sendAction("action", this.get("value"));
-  },
-
   @computed("value")
   icon() {
     return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
   },
 
-  generatedHeadertext: null
+  generatedHeadertext: null,
+
+  actions: {
+    onSelectRow(content) {
+      this._super(content);
+
+      this.sendAction("action", this.get("value"));
+    }
+  }
 });

app/assets/javascripts/discourse/components/topic-notifications-options.js.es6

@@ -1,5 +1,5 @@
 import NotificationOptionsComponent from "discourse/components/notifications-button";
-import { observes, on } from "ember-addons/ember-computed-decorators";
+import { on } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { topicLevels, buttonDetails } from "discourse/lib/notification-levels";
 
@@ -7,18 +7,16 @@ export default NotificationOptionsComponent.extend({
   classNames: ["topic-notifications-options"],
 
   content: topicLevels,
+
   i18nPrefix: "topic.notifications",
 
-  @on("init")
-  _setInitialNotificationLevel() {
-    this.set("value", this.get("topic.details.notification_level"));
-  },
+  value: Ember.computed.alias("topic.details.notification_level"),
 
   @on("didInsertElement")
   _bindGlobalLevelChanged() {
     this.appEvents.on("topic-notifications-button:changed", (msg) => {
       if (msg.type === "notification") {
-        if (this.get("topic.details.notification_level") !== msg.id) {
+        if (this.get("value") !== msg.id) {
           this.get("topic.details").updateNotifications(msg.id);
         }
       }
@@ -30,23 +28,25 @@ export default NotificationOptionsComponent.extend({
     this.appEvents.off("topic-notifications-button:changed");
   },
 
-  @observes("value")
-  _notificationLevelChanged() {
-    this.appEvents.trigger("topic-notifications-button:changed", {type: "notification", id: this.get("value")});
-  },
-
-  @observes("topic.details.notification_level")
-  _content() {
-    this.set("value", this.get("topic.details.notification_level"));
-  },
-
-  @computed("topic.details.notification_level", "showFullTitle")
-  generatedHeadertext(notificationLevel, showFullTitle) {
+  @computed("value", "showFullTitle")
+  generatedHeadertext(value, showFullTitle) {
     if (showFullTitle) {
-      const details = buttonDetails(notificationLevel);
+      const details = buttonDetails(value);
       return I18n.t(`topic.notifications.${details.key}.title`);
     } else {
       return null;
     }
+  },
+
+  actions: {
+    onSelectRow(content) {
+      const notificationLevelId = Ember.get(content, this.get("idKey"));
+
+      if (notificationLevelId !== this.get("value")) {
+        this.get("topic.details").updateNotifications(notificationLevelId);
+      }
+
+      this._super(content);
+    }
   }
 });