DEV: Update remaining core plugin components to native-class syntax (#28611)

Changes made using the ember-native-class-codemod, plus some manual tweaks

plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js

@@ -1,15 +1,21 @@
 import Component from "@ember/component";
 import { equal, gt, readOnly, union } from "@ember/object/computed";
 import { service } from "@ember/service";
-import discourseComputed, {
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import { tagName } from "@ember-decorators/component";
+import { observes, on } from "@ember-decorators/object";
+import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "",
-  presence: service(),
-  composerPresenceManager: service(),
+@tagName("")
+export default class ComposerPresenceDisplay extends Component {
+  @service presence;
+  @service composerPresenceManager;
+
+  @equal("state", "reply") isReply;
+  @equal("state", "edit") isEdit;
+  @equal("state", "whisper") isWhisper;
+  @union("replyChannel.users", "whisperChannel.users") replyingUsers;
+  @readOnly("editChannel.users") editingUsers;
+  @gt("presenceUsers.length", 0) shouldDisplay;
 
   @discourseComputed(
     "model.replyingToTopic",
@@ -27,32 +33,28 @@ export default Component.extend({
     } else if (replyingToTopic) {
       return "reply";
     }
-  },
-
-  isReply: equal("state", "reply"),
-  isEdit: equal("state", "edit"),
-  isWhisper: equal("state", "whisper"),
+  }
 
   @discourseComputed("model.topic.id", "isReply", "isWhisper")
   replyChannelName(topicId, isReply, isWhisper) {
     if (topicId && (isReply || isWhisper)) {
       return `/discourse-presence/reply/${topicId}`;
     }
-  },
+  }
 
   @discourseComputed("model.topic.id", "isReply", "isWhisper")
   whisperChannelName(topicId, isReply, isWhisper) {
     if (topicId && this.currentUser.whisperer && (isReply || isWhisper)) {
       return `/discourse-presence/whisper/${topicId}`;
     }
-  },
+  }
 
   @discourseComputed("isEdit", "model.post.id")
   editChannelName(isEdit, postId) {
     if (isEdit) {
       return `/discourse-presence/edit/${postId}`;
     }
-  },
+  }
 
   _setupChannel(channelKey, name) {
     if (this[channelKey]?.name !== name) {
@@ -64,23 +66,20 @@ export default Component.extend({
         this.set(channelKey, null);
       }
     }
-  },
+  }
 
   @observes("replyChannelName", "whisperChannelName", "editChannelName")
   _setupChannels() {
     this._setupChannel("replyChannel", this.replyChannelName);
     this._setupChannel("whisperChannel", this.whisperChannelName);
     this._setupChannel("editChannel", this.editChannelName);
-  },
+  }
 
   _cleanupChannels() {
     this._setupChannel("replyChannel", null);
     this._setupChannel("whisperChannel", null);
     this._setupChannel("editChannel", null);
-  },
-
-  replyingUsers: union("replyChannel.users", "whisperChannel.users"),
-  editingUsers: readOnly("editChannel.users"),
+  }
 
   @discourseComputed("isReply", "replyingUsers.[]", "editingUsers.[]")
   presenceUsers(isReply, replyingUsers, editingUsers) {
@@ -88,14 +87,12 @@ export default Component.extend({
     return users
       ?.filter((u) => u.id !== this.currentUser.id)
       ?.slice(0, this.siteSettings.presence_max_users_shown);
-  },
-
-  shouldDisplay: gt("presenceUsers.length", 0),
+  }
 
   @on("didInsertElement")
   subscribe() {
     this._setupChannels();
-  },
+  }
 
   @observes("model.reply", "state", "model.post.id", "model.topic.id")
   _contentChanged() {
@@ -104,11 +101,11 @@ export default Component.extend({
     }
     const entity = this.state === "edit" ? this.model?.post : this.model?.topic;
     this.composerPresenceManager.notifyState(this.state, entity?.id);
-  },
+  }
 
   @on("willDestroyElement")
   closeComposer() {
     this._cleanupChannels();
     this.composerPresenceManager.leave();
-  },
-});
+  }
+}

plugins/discourse-presence/assets/javascripts/discourse/components/topic-presence-display.js

@@ -1,40 +1,41 @@
 import Component from "@ember/component";
 import { gt, union } from "@ember/object/computed";
 import { service } from "@ember/service";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import { on } from "@ember-decorators/object";
+import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  topic: null,
-  presence: service(),
-  replyChannel: null,
-  whisperChannel: null,
+export default class TopicPresenceDisplay extends Component {
+  @service presence;
+
+  topic = null;
+  replyChannel = null;
+  whisperChannel = null;
+
+  @union("replyUsers", "whisperUsers") users;
+  @gt("users.length", 0) shouldDisplay;
 
   @discourseComputed("replyChannel.users.[]")
   replyUsers(users) {
     return users?.filter((u) => u.id !== this.currentUser.id);
-  },
+  }
 
   @discourseComputed("whisperChannel.users.[]")
   whisperUsers(users) {
     return users?.filter((u) => u.id !== this.currentUser.id);
-  },
-
-  users: union("replyUsers", "whisperUsers"),
+  }
 
   @discourseComputed("topic.id")
   replyChannelName(id) {
     return `/discourse-presence/reply/${id}`;
-  },
+  }
 
   @discourseComputed("topic.id")
   whisperChannelName(id) {
     return `/discourse-presence/whisper/${id}`;
-  },
-
-  shouldDisplay: gt("users.length", 0),
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     if (this.replyChannel?.name !== this.replyChannelName) {
       this.replyChannel?.unsubscribe();
@@ -53,11 +54,11 @@ export default Component.extend({
       );
       this.whisperChannel.subscribe();
     }
-  },
+  }
 
   @on("willDestroyElement")
   _destroyed() {
     this.replyChannel?.unsubscribe();
     this.whisperChannel?.unsubscribe();
-  },
-});
+  }
+}