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

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

plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-header.js

@@ -1,3 +1,3 @@
 import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
 
-export default ComboBoxSelectBoxHeaderComponent.extend({});
+export default class ChatChannelChooserHeader extends ComboBoxSelectBoxHeaderComponent {}

plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-row.js

@@ -1,5 +1,5 @@
+import { classNames } from "@ember-decorators/component";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
-export default SelectKitRowComponent.extend({
-  classNames: ["chat-channel-chooser-row"],
-});
+@classNames("chat-channel-chooser-row")
+export default class ChatChannelChooserRow extends SelectKitRowComponent {}

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -1,32 +1,36 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { classNames } from "@ember-decorators/component";
 import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin";
 import { clipboardHelpers } from "discourse/lib/utilities";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import { cloneJSON } from "discourse-common/lib/object";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend(UppyUploadMixin, {
-  classNames: ["chat-composer-uploads"],
-  mediaOptimizationWorker: service(),
-  chatStateManager: service(),
-  id: "chat-composer-uploader",
-  type: "chat-composer",
-  existingUploads: null,
-  uploads: null,
-  useMultipartUploadsIfAvailable: true,
-  uploadDropZone: null,
+@classNames("chat-composer-uploads")
+export default class ChatComposerUploads extends Component.extend(
+  UppyUploadMixin
+) {
+  @service mediaOptimizationWorker;
+  @service chatStateManager;
+
+  id = "chat-composer-uploader";
+  type = "chat-composer";
+  existingUploads = null;
+  uploads = null;
+  useMultipartUploadsIfAvailable = true;
+  uploadDropZone = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.setProperties({
       fileInputSelector: `#${this.fileUploadElementId}`,
     });
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
     if (this.inProgressUploads?.length > 0) {
       this._uppyInstance?.cancelAll();
     }
@@ -35,32 +39,32 @@ export default Component.extend(UppyUploadMixin, {
       "uploads",
       this.existingUploads ? cloneJSON(this.existingUploads) : []
     );
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     this.composerInputEl?.addEventListener("paste", this._pasteEventListener);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     this.composerInputEl?.removeEventListener(
       "paste",
       this._pasteEventListener
     );
-  },
+  }
 
   uploadDone(upload) {
     this.uploads.pushObject(upload);
     this._triggerUploadsChanged();
-  },
+  }
 
   @discourseComputed("uploads.length", "inProgressUploads.length")
   showUploadsContainer(uploadsCount, inProgressUploadsCount) {
     return uploadsCount > 0 || inProgressUploadsCount > 0;
-  },
+  }
 
   @action
   cancelUploading(upload) {
@@ -68,19 +72,19 @@ export default Component.extend(UppyUploadMixin, {
       fileId: upload.id,
     });
     this.removeUpload(upload);
-  },
+  }
 
   @action
   removeUpload(upload) {
     this.uploads.removeObject(upload);
     this._triggerUploadsChanged();
-  },
+  }
 
   _uploadDropTargetOptions() {
     return {
       target: this.uploadDropZone || document.body,
     };
-  },
+  }
 
   _uppyReady() {
     if (this.siteSettings.composer_media_optimization_image_enabled) {
@@ -102,7 +106,7 @@ export default Component.extend(UppyUploadMixin, {
       const inProgressUpload = this.inProgressUploads.findBy("id", file.id);
       inProgressUpload?.set("processing", false);
     });
-  },
+  }
 
   @bind
   _pasteEventListener(event) {
@@ -122,17 +126,17 @@ export default Component.extend(UppyUploadMixin, {
     if (event && event.clipboardData && event.clipboardData.files) {
       this._addFiles([...event.clipboardData.files], { pasted: true });
     }
-  },
+  }
 
   onProgressUploadsChanged() {
     this._triggerUploadsChanged(this.uploads, {
       inProgressUploadsCount: this.inProgressUploads?.length,
     });
-  },
+  }
 
   _triggerUploadsChanged() {
     this.onUploadChanged?.(this.uploads, {
       inProgressUploadsCount: this.inProgressUploads?.length,
     });
-  },
-});
+  }
+}

plugins/chat/assets/javascripts/discourse/components/chat-drawer.js

@@ -3,27 +3,30 @@ import { action } from "@ember/object";
 import { cancel, next, throttle } from "@ember/runloop";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import { tagName } from "@ember-decorators/component";
+import { observes } from "@ember-decorators/object";
 import DiscourseURL from "discourse/lib/url";
 import { escapeExpression } from "discourse/lib/utilities";
 import getURL from "discourse-common/lib/get-url";
-import { bind, observes } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "",
-  chat: service(),
-  router: service(),
-  chatDrawerSize: service(),
-  chatChannelsManager: service(),
-  chatStateManager: service(),
-  chatDrawerRouter: service(),
-  loading: false,
-  sizeTimer: null,
-  rafTimer: null,
-  hasUnreadMessages: false,
-  drawerStyle: null,
+@tagName("")
+export default class ChatDrawer extends Component {
+  @service chat;
+  @service router;
+  @service chatDrawerSize;
+  @service chatChannelsManager;
+  @service chatStateManager;
+  @service chatDrawerRouter;
+
+  loading = false;
+  sizeTimer = null;
+  rafTimer = null;
+  hasUnreadMessages = false;
+  drawerStyle = null;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     if (!this.chat.userCanChat) {
       return;
@@ -45,10 +48,10 @@ export default Component.extend({
     this.appEvents.on("composer:resize-ended", this, "_clearDynamicCheckSize");
 
     this.computeDrawerStyle();
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     if (!this.chat.userCanChat) {
       return;
@@ -81,19 +84,19 @@ export default Component.extend({
     if (this.rafTimer) {
       window.cancelAnimationFrame(this.rafTimer);
     }
-  },
+  }
 
   @observes("chatStateManager.isDrawerActive")
   _fireHiddenAppEvents() {
     this.appEvents.trigger("chat:rerender-header");
-  },
+  }
 
   computeDrawerStyle() {
     const { width, height } = this.chatDrawerSize.size;
     let style = `width: ${escapeExpression((width || "0").toString())}px;`;
     style += `height: ${escapeExpression((height || "0").toString())}px;`;
     this.set("drawerStyle", htmlSafe(style));
-  },
+  }
 
   get drawerActions() {
     return {
@@ -101,7 +104,7 @@ export default Component.extend({
       close: this.close,
       toggleExpand: this.toggleExpand,
     };
-  },
+  }
 
   @bind
   _dynamicCheckSize() {
@@ -117,7 +120,7 @@ export default Component.extend({
       this.rafTimer = null;
       this._performCheckSize();
     });
-  },
+  }
 
   _startDynamicCheckSize() {
     if (!this.chatStateManager.isDrawerActive) {
@@ -127,7 +130,7 @@ export default Component.extend({
     document
       .querySelector(".chat-drawer-outlet-container")
       .classList.add("clear-transitions");
-  },
+  }
 
   _clearDynamicCheckSize() {
     if (!this.chatStateManager.isDrawerActive) {
@@ -138,12 +141,12 @@ export default Component.extend({
       .querySelector(".chat-drawer-outlet-container")
       .classList.remove("clear-transitions");
     this._checkSize();
-  },
+  }
 
   @bind
   _checkSize() {
     this.sizeTimer = throttle(this, this._performCheckSize, 150);
-  },
+  }
 
   _performCheckSize() {
     if (this.isDestroying || this.isDestroyed) {
@@ -167,14 +170,14 @@ export default Component.extend({
         ? minRightMargin
         : Math.max(minRightMargin, composer.offsetLeft)) + "px"
     );
-  },
+  }
 
   @action
   openURL(url = null) {
     this.chat.activeChannel = null;
     this.chatDrawerRouter.stateFor(this._routeFromURL(url));
     this.chatStateManager.didOpenDrawer(url);
-  },
+  }
 
   _routeFromURL(url) {
     let route = this.router.recognize(getURL(url || "/"));
@@ -185,7 +188,7 @@ export default Component.extend({
     }
 
     return route;
-  },
+  }
 
   @action
   async openInFullPage() {
@@ -196,7 +199,7 @@ export default Component.extend({
     await new Promise((resolve) => next(resolve));
 
     return DiscourseURL.routeTo(this.chatStateManager.lastKnownChatURL);
-  },
+  }
 
   @action
   toggleExpand() {
@@ -206,17 +209,17 @@ export default Component.extend({
       "chat:toggle-expand",
       this.chatStateManager.isDrawerExpanded
     );
-  },
+  }
 
   @action
   close() {
     this.computeDrawerStyle();
     this.chatStateManager.didCloseDrawer();
     this.chat.activeChannel = null;
-  },
+  }
 
   @action
   didResize(element, { width, height }) {
     this.chatDrawerSize.size = { width, height };
-  },
-});
+  }
+}

plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.js

@@ -7,38 +7,37 @@ export const NEW_TOPIC_SELECTION = "new_topic";
 export const EXISTING_TOPIC_SELECTION = "existing_topic";
 export const NEW_MESSAGE_SELECTION = "new_message";
 
-export default Component.extend({
-  newTopicSelection: NEW_TOPIC_SELECTION,
-  existingTopicSelection: EXISTING_TOPIC_SELECTION,
-  newMessageSelection: NEW_MESSAGE_SELECTION,
+export default class ChatToTopicSelector extends Component {
+  newTopicSelection = NEW_TOPIC_SELECTION;
+  existingTopicSelection = EXISTING_TOPIC_SELECTION;
+  newMessageSelection = NEW_MESSAGE_SELECTION;
+  selection = null;
 
-  selection: null,
-  newTopic: equal("selection", NEW_TOPIC_SELECTION),
-  existingTopic: equal("selection", EXISTING_TOPIC_SELECTION),
-  newMessage: equal("selection", NEW_MESSAGE_SELECTION),
-  canAddTags: alias("site.can_create_tag"),
-  canTagMessages: alias("site.can_tag_pms"),
+  @equal("selection", NEW_TOPIC_SELECTION) newTopic;
+  @equal("selection", EXISTING_TOPIC_SELECTION) existingTopic;
+  @equal("selection", NEW_MESSAGE_SELECTION) newMessage;
+  @alias("site.can_create_tag") canAddTags;
+  @alias("site.can_tag_pms") canTagMessages;
 
-  topicTitle: null,
-  categoryId: null,
-  tags: null,
-  selectedTopicId: null,
-
-  chatMessageIds: null,
-  chatChannelId: null,
+  topicTitle = null;
+  categoryId = null;
+  tags = null;
+  selectedTopicId = null;
+  chatMessageIds = null;
+  chatChannelId = null;
 
   @discourseComputed()
   newTopicInstruction() {
     return htmlSafe(this.instructionLabels[NEW_TOPIC_SELECTION]);
-  },
+  }
 
   @discourseComputed()
   existingTopicInstruction() {
     return htmlSafe(this.instructionLabels[EXISTING_TOPIC_SELECTION]);
-  },
+  }
 
   @discourseComputed()
   newMessageInstruction() {
     return htmlSafe(this.instructionLabels[NEW_MESSAGE_SELECTION]);
-  },
-});
+  }
+}

plugins/chat/assets/javascripts/discourse/components/collapser.js

@@ -1,22 +1,22 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
-  tagName: "",
-
-  collapsed: false,
-  header: null,
-  onToggle: null,
+@tagName("")
+export default class Collapser extends Component {
+  collapsed = false;
+  header = null;
+  onToggle = null;
 
   @action
   open() {
     this.set("collapsed", false);
     this.onToggle?.(false);
-  },
+  }
 
   @action
   close() {
     this.set("collapsed", true);
     this.onToggle?.(true);
-  },
-});
+  }
+}

plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js

@@ -2,37 +2,38 @@ import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
 import { notEmpty } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
+import { observes } from "@ember-decorators/object";
 import { propertyNotEqual } from "discourse/lib/computed";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import { cook } from "discourse/lib/text";
 import { INPUT_DELAY } from "discourse-common/config/environment";
-import computed, {
-  debounce,
-  observes,
-} from "discourse-common/utils/decorators";
+import computed, { debounce } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
 
-export default Component.extend({
-  timeFormat: "HH:mm:ss",
-  dateFormat: "YYYY-MM-DD",
-  dateTimeFormat: "YYYY-MM-DD HH:mm:ss",
-  date: null,
-  toDate: null,
-  time: null,
-  toTime: null,
-  format: null,
-  formats: null,
-  recurring: null,
-  advancedMode: false,
-  timezone: null,
-  fromSelected: null,
-  fromFilled: notEmpty("date"),
-  toSelected: null,
-  toFilled: notEmpty("toDate"),
+export default class LocalDatesCreate extends Component {
+  timeFormat = "HH:mm:ss";
+  dateFormat = "YYYY-MM-DD";
+  dateTimeFormat = "YYYY-MM-DD HH:mm:ss";
+  date = null;
+  toDate = null;
+  time = null;
+  toTime = null;
+  format = null;
+  formats = null;
+  recurring = null;
+  advancedMode = false;
+  timezone = null;
+  fromSelected = null;
+  toSelected = null;
+
+  @notEmpty("date") fromFilled;
+  @notEmpty("toDate") toFilled;
+  @propertyNotEqual("currentUserTimezone", "options.timezone")
+  timezoneIsDifferentFromUserTimezone;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this._picker = null;
 
@@ -44,17 +45,17 @@ export default Component.extend({
       timezone: this.currentUserTimezone,
       date: moment().format(this.dateFormat),
     });
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.send("focusFrom");
-  },
+  }
 
   @observes("computedConfig.{from,to,options}", "options", "isValid", "isRange")
   configChanged() {
     this._renderPreview();
-  },
+  }
 
   @debounce(INPUT_DELAY)
   async _renderPreview() {
@@ -69,12 +70,12 @@ export default Component.extend({
         );
       });
     }
-  },
+  }
 
   @computed("date", "toDate", "toTime")
   isRange(date, toDate, toTime) {
     return date && (toDate || toTime);
-  },
+  }
 
   @computed("computedConfig", "isRange")
   isValid(config, isRange) {
@@ -96,7 +97,7 @@ export default Component.extend({
     }
 
     return true;
-  },
+  }
 
   @computed("date", "time", "isRange", "options.{format,timezone}")
   fromConfig(date, time, isRange, options = {}) {
@@ -125,7 +126,7 @@ export default Component.extend({
       format,
       range: isRange ? "start" : false,
     });
-  },
+  }
 
   @computed("toDate", "toTime", "isRange", "options.{timezone,format}")
   toConfig(date, time, isRange, options = {}) {
@@ -158,7 +159,7 @@ export default Component.extend({
       format,
       range: isRange ? "end" : false,
     });
-  },
+  }
 
   @computed("recurring", "timezones", "timezone", "format")
   options(recurring, timezones, timezone, format) {
@@ -168,7 +169,7 @@ export default Component.extend({
       timezone,
       format,
     });
-  },
+  }
 
   @computed(
     "fromConfig.{date}",
@@ -181,27 +182,22 @@ export default Component.extend({
       to: toConfig,
       options,
     });
-  },
+  }
 
   @computed
   currentUserTimezone() {
     return this.currentUser.user_option.timezone || moment.tz.guess();
-  },
+  }
 
   @computed
   allTimezones() {
     return moment.tz.names();
-  },
-
-  timezoneIsDifferentFromUserTimezone: propertyNotEqual(
-    "currentUserTimezone",
-    "options.timezone"
-  ),
+  }
 
   @computed("currentUserTimezone")
   formattedCurrentUserTimezone(timezone) {
     return timezone.replace("_", " ").replace("Etc/", "").replace("/", ", ");
-  },
+  }
 
   @computed("formats")
   previewedFormats(formats) {
@@ -211,7 +207,7 @@ export default Component.extend({
         preview: moment().format(format),
       };
     });
-  },
+  }
 
   @computed
   recurringOptions() {
@@ -251,18 +247,18 @@ export default Component.extend({
         id: "1.years",
       },
     ];
-  },
+  }
 
   _generateDateMarkup(fromDateTime, options, isRange, toDateTime) {
     return generateDateMarkup(fromDateTime, options, isRange, toDateTime);
-  },
+  }
 
   @computed("advancedMode")
   toggleModeBtnLabel(advancedMode) {
     return advancedMode
       ? "discourse_local_dates.create.form.simple_mode"
       : "discourse_local_dates.create.form.advanced_mode";
-  },
+  }
 
   @computed("computedConfig.{from,to,options}", "options", "isValid", "isRange")
   markup(config, options, isValid, isRange) {
@@ -281,12 +277,12 @@ export default Component.extend({
       }
     }
     return text;
-  },
+  }
 
   @computed("fromConfig.dateTime")
   formattedFrom(dateTime) {
     return dateTime.format("LLLL");
-  },
+  }
 
   @computed("toConfig.dateTime", "toSelected")
   formattedTo(dateTime, toSelected) {
@@ -295,23 +291,23 @@ export default Component.extend({
       : I18n.t("discourse_local_dates.create.form.until");
 
     return dateTime.isValid() ? dateTime.format("LLLL") : emptyText;
-  },
+  }
 
   @action
   updateFormat(format, event) {
     event?.preventDefault();
     this.set("format", format);
-  },
+  }
 
   @computed("fromSelected", "toSelected")
   selectedDate(fromSelected) {
     return fromSelected ? this.date : this.toDate;
-  },
+  }
 
   @computed("fromSelected", "toSelected")
   selectedTime(fromSelected) {
     return fromSelected ? this.time : this.toTime;
-  },
+  }
 
   @action
   changeSelectedDate(date) {
@@ -320,7 +316,7 @@ export default Component.extend({
     } else {
       this.set("toDate", date);
     }
-  },
+  }
 
   @action
   changeSelectedTime(time) {
@@ -329,7 +325,7 @@ export default Component.extend({
     } else {
       this.set("toTime", time);
     }
-  },
+  }
 
   @action
   eraseToDateTime() {
@@ -338,7 +334,7 @@ export default Component.extend({
       toTime: null,
     });
     this.focusFrom();
-  },
+  }
 
   @action
   focusFrom() {
@@ -347,7 +343,7 @@ export default Component.extend({
       toSelected: false,
       minDate: null,
     });
-  },
+  }
 
   @action
   focusTo() {
@@ -356,12 +352,12 @@ export default Component.extend({
       fromSelected: false,
       minDate: this.get("fromConfig.date"),
     });
-  },
+  }
 
   @action
   toggleAdvancedMode() {
     this.toggleProperty("advancedMode");
-  },
+  }
 
   @action
   save() {
@@ -371,10 +367,10 @@ export default Component.extend({
       this.closeModal();
       this.model.insertDate(markup);
     }
-  },
+  }
 
   @action
   cancel() {
     this.closeModal();
-  },
-});
+  }
+}

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();
-  },
-});
+  }
+}

plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js

@@ -1,17 +1,18 @@
 import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
 import { REPLACEMENTS } from "discourse-common/lib/icon-library";
 import discourseLater from "discourse-common/lib/later";
 import { afterRender } from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "section",
-  classNames: ["styleguide-icons"],
-  iconIds: [],
+@tagName("section")
+@classNames("styleguide-icons")
+export default class StyleguideIcons extends Component {
+  iconIds = [];
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.setIconIds();
-  },
+  }
 
   @afterRender
   setIconIds() {
@@ -24,5 +25,5 @@ export default Component.extend({
       // Let's try again a short time later if there are no svgs loaded yet
       discourseLater(this, this.setIconIds, 1500);
     }
-  },
-});
+  }
+}

plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js

@@ -2,11 +2,11 @@ import Component from "@ember/component";
 import $ from "jquery";
 import { cook } from "discourse/lib/text";
 
-export default Component.extend({
+export default class StyleguideMarkdown extends Component {
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     const contents = $(this.element).html();
     cook(contents).then((cooked) => $(this.element).html(cooked.toString()));
-  },
-});
+  }
+}

plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js

@@ -1,19 +1,19 @@
 import Component from "@ember/component";
+import { classNameBindings, tagName } from "@ember-decorators/component";
 import computed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "section",
-  classNameBindings: [":styleguide-section", "sectionClass"],
-
+@tagName("section")
+@classNameBindings(":styleguide-section", "sectionClass")
+export default class StyleguideSection extends Component {
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
     window.scrollTo(0, 0);
-  },
+  }
 
   @computed("section")
   sectionClass(section) {
     if (section) {
       return `${section.id}-examples`;
     }
-  },
-});
+  }
+}