FIX: ensures pinned-options header is showing correct state (#9156)

app/assets/javascripts/select-kit/components/pinned-options.js.es6

@@ -1,6 +1,9 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { computed } from "@ember/object";
+import { computed, action } from "@ember/object";
+
+const UNPINNED = "unpinned";
+const PINNED = "pinned";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["pinned-options"],
@@ -10,13 +13,13 @@ export default DropdownSelectBoxComponent.extend({
     const pinnedGlobally = this.get("topic.pinned_globally");
     const pinned = this.value;
     const globally = pinnedGlobally ? "_globally" : "";
-    const state = pinned === "pinned" ? `pinned${globally}` : "unpinned";
+    const state = pinned ? `pinned${globally}` : UNPINNED;
     const title = I18n.t(`topic_statuses.${state}.title`);
 
     content.label = `<span>${title}</span>${iconHTML("caret-down")}`.htmlSafe();
     content.title = title;
     content.name = state;
-    content.icon = `thumbtack${state === "unpinned" ? " unpinned" : ""}`;
+    content.icon = `thumbtack${state === UNPINNED ? " unpinned" : ""}`;
     return content;
   },
 
@@ -25,7 +28,7 @@ export default DropdownSelectBoxComponent.extend({
 
     return [
       {
-        id: "pinned",
+        id: PINNED,
         name: I18n.t(`topic_statuses.pinned${globally}.title`),
         description: this.site.mobileView
           ? null
@@ -33,7 +36,7 @@ export default DropdownSelectBoxComponent.extend({
         icon: "thumbtack"
       },
       {
-        id: "unpinned",
+        id: UNPINNED,
         name: I18n.t("topic_statuses.unpinned.title"),
         icon: "thumbtack unpinned",
         description: this.site.mobileView
@@ -43,15 +46,14 @@ export default DropdownSelectBoxComponent.extend({
     ];
   }),
 
-  actions: {
-    onSelect(value) {
-      const topic = this.topic;
+  @action
+  onChange(value) {
+    const topic = this.topic;
 
-      if (value === "unpinned") {
-        topic.clearPin();
-      } else {
-        topic.rePin();
-      }
+    if (value === UNPINNED) {
+      return topic.clearPin();
+    } else {
+      return topic.rePin();
     }
   }
 });

test/javascripts/components/select-kit/pinned-options-test.js.es6

@@ -2,12 +2,12 @@ import selectKit from "helpers/select-kit-helper";
 import componentTest from "helpers/component-test";
 import Topic from "discourse/models/topic";
 
-const buildTopic = function() {
+const buildTopic = function(pinned = true) {
   return Topic.create({
     id: 1234,
     title: "Qunit Test Topic",
     deleted: false,
-    pinned: true
+    pinned
   });
 };
 
@@ -18,21 +18,38 @@ moduleForComponent("select-kit/pinned-options", {
   }
 });
 
-componentTest("updating the content refreshes the list", {
-  template: "{{pinned-options value=pinned topic=topic}}",
+componentTest("unpinning", {
+  template: "{{pinned-options value=topic.pinned topic=topic}}",
 
   beforeEach() {
     this.siteSettings.automatically_unpin_topics = false;
     this.set("topic", buildTopic());
-    this.set("pinned", "pinned");
   },
 
   async test(assert) {
     assert.equal(this.subject.header().name(), "pinned");
 
-    // we do it manually as clearPin is an ajax call
-    await this.set("pinned", false);
+    await this.subject.expand();
+    await this.subject.selectRowByValue("unpinned");
 
     assert.equal(this.subject.header().name(), "unpinned");
   }
 });
+
+componentTest("pinning", {
+  template: "{{pinned-options value=topic.pinned topic=topic}}",
+
+  beforeEach() {
+    this.siteSettings.automatically_unpin_topics = false;
+    this.set("topic", buildTopic(false));
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().name(), "unpinned");
+
+    await this.subject.expand();
+    await this.subject.selectRowByValue("pinned");
+
+    assert.equal(this.subject.header().name(), "pinned");
+  }
+});