FIX: muted was not working in topic timeline (#9021)

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -382,21 +382,15 @@ createWidget("timeline-footer-controls", {
       controls.push(
         new ComponentConnector(
           this,
-          "topic-notifications-options",
+          "topic-notifications-button",
           {
-            value: notificationLevel,
+            notificationLevel,
             topic,
-            options: {
-              showFullTitle: false,
-              placement: "bottom-end"
-            },
-            onChange: newNotificationLevel => {
-              if (newNotificationLevel !== notificationLevel) {
-                topic.details.updateNotifications(newNotificationLevel);
-              }
-            }
+            showFullTitle: false,
+            appendReason: false,
+            placement: "bottom-end"
           },
-          ["value"]
+          ["notificationLevel"]
         )
       );
     }

app/assets/javascripts/select-kit/components/topic-notifications-button.js.es6

@@ -5,6 +5,7 @@ export default Component.extend({
   classNames: ["topic-notifications-button"],
   appendReason: true,
   showFullTitle: true,
+  placement: "bottom-start",
 
   didInsertElement() {
     this._super(...arguments);

app/assets/javascripts/select-kit/templates/components/topic-notifications-button.hbs

@@ -4,6 +4,7 @@
   onChange=(action "changeTopicNotificationLevel")
   options=(hash
     showFullTitle=showFullTitle
+    placement=placement
   )
 }}
 

test/javascripts/acceptance/topic-notifications-button-test.js.es6

@@ -30,4 +30,29 @@ QUnit.test("Updating topic notification level", async assert => {
     "Watching",
     "it should display the right notification level"
   );
+
+  const timelineNotificationOptions = selectKit(
+    ".topic-timeline .widget-component-connector .topic-notifications-options"
+  );
+
+  assert.equal(
+    timelineNotificationOptions.header().value(),
+    "3",
+    "it should display the right notification level"
+  );
+
+  await timelineNotificationOptions.expand();
+  await timelineNotificationOptions.selectRowByValue("0");
+
+  assert.equal(
+    timelineNotificationOptions.header().value(),
+    "0",
+    "it should display the right notification level"
+  );
+
+  assert.equal(
+    notificationOptions.header().label(),
+    "Muted",
+    "it should display the right notification level"
+  );
 });