FIX: makes tracking shortcuts working when tracking button is not visible (#9575)

app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js

@@ -380,28 +380,30 @@ export default {
       .send("showKeyboardShortcutsHelp");
   },
 
-  setTrackingToMuted(event) {
-    throttle(this, "_setTracking", { id: 0, event }, INPUT_DELAY, true);
+  setTrackingToMuted() {
+    throttle(this, "_setTracking", 0, INPUT_DELAY, true);
   },
 
-  setTrackingToRegular(event) {
-    throttle(this, "_setTracking", { id: 1, event }, INPUT_DELAY, true);
+  setTrackingToRegular() {
+    throttle(this, "_setTracking", 1, INPUT_DELAY, true);
   },
 
-  setTrackingToTracking(event) {
-    throttle(this, "_setTracking", { id: 2, event }, INPUT_DELAY, true);
+  setTrackingToTracking() {
+    throttle(this, "_setTracking", 2, INPUT_DELAY, true);
   },
 
-  setTrackingToWatching(event) {
-    throttle(this, "_setTracking", { id: 3, event }, INPUT_DELAY, true);
+  setTrackingToWatching() {
+    throttle(this, "_setTracking", 3, INPUT_DELAY, true);
   },
 
-  _setTracking(params) {
-    this.appEvents.trigger("topic-notifications-button:changed", {
-      type: "notification",
-      id: params.id,
-      event: params.event
-    });
+  _setTracking(levelId) {
+    const topic = this.currentTopic();
+
+    if (!topic) {
+      return;
+    }
+
+    topic.details.updateNotifications(levelId);
   },
 
   sendToTopicListItemView(action, elem) {

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

@@ -1,4 +1,5 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 
 export default Component.extend({
   layoutName: "select-kit/templates/components/topic-notifications-button",
@@ -6,51 +7,13 @@ export default Component.extend({
   appendReason: true,
   showFullTitle: true,
   placement: "bottom-start",
+  notificationLevel: null,
+  topic: null,
 
-  didInsertElement() {
-    this._super(...arguments);
-
-    if (!this.mountedAsWidget) {
-      this.appEvents.on(
-        "topic-notifications-button:changed",
-        this,
-        "_changeTopicNotificationLevel"
-      );
-    }
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-
-    if (!this.mountedAsWidget) {
-      this.appEvents.off(
-        "topic-notifications-button:changed",
-        this,
-        "_changeTopicNotificationLevel"
-      );
-    }
-  },
-
-  _changeTopicNotificationLevel(level) {
-    // this change is coming from a keyboard event
-    if (level.event) {
-      const topicSectionNode = level.event.target.querySelector("#topic");
-      if (topicSectionNode && topicSectionNode.dataset.topicId) {
-        const topicId = parseInt(topicSectionNode.dataset.topicId, 10);
-        if (topicId && topicId !== this.topic.id) {
-          return;
-        }
-      }
-    }
-
-    if (level.id !== this.notificationLevel) {
-      this.topic.details.updateNotifications(level.id);
-    }
-  },
-
-  actions: {
-    changeTopicNotificationLevel(level, notification) {
-      this._changeTopicNotificationLevel(notification);
+  @action
+  changeTopicNotificationLevel(levelId) {
+    if (levelId !== this.notificationLevel) {
+      this.topic.details.updateNotifications(levelId);
     }
   }
 });