DEV: Convert core components to native class syntax (batch 7) (#28603)

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

app/assets/javascripts/discourse/app/components/radio-button.js

@@ -1,17 +1,18 @@
 import Component from "@ember/component";
+import { attributeBindings, tagName } from "@ember-decorators/component";
 import $ from "jquery";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@tagName("input")
-  tagName: "input",
+@attributeBindings(
-  type: "radio",
-  attributeBindings: [
   "name",
   "type",
   "value",
   "checked:checked",
-    "disabled:disabled",
+  "disabled:disabled"
-  ],
+)
+export default class RadioButton extends Component {
+  type = "radio";
 
   click() {
     const value = $(this.element).val();
@@ -24,10 +25,10 @@ export default Component.extend({
       }
       this.set("selection", value);
     }
-  },
+  }
 
   @discourseComputed("value", "selection")
   checked(value, selection) {
     return value === selection;
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/reviewable-conversation-post.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { gte } from "@ember/object/computed";
-export default Component.extend({
+
-  showUsername: gte("index", 1),
+export default class ReviewableConversationPost extends Component {
-});
+  @gte("index", 1) showUsername;
+}

app/assets/javascripts/discourse/app/components/reviewable-field-editor.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableFieldEditor extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-field-tags.js

@@ -1,7 +1,8 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 
-export default Component.extend({
+export default class ReviewableFieldTags extends Component {
-  actions: {
+  @action
   onChange(tags) {
     this.set("value", tags);
 
@@ -11,6 +12,5 @@ export default Component.extend({
           value: tags,
         },
       });
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/reviewable-field-text.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableFieldText extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-field-textarea.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableFieldTextarea extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-field.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableField extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-histories.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { filterBy } from "@ember/object/computed";
-export default Component.extend({
+
-  filteredHistories: filterBy("histories", "created", false),
+export default class ReviewableHistories extends Component {
-});
+  @filterBy("histories", "created", false) filteredHistories;
+}

app/assets/javascripts/discourse/app/components/reviewable-item.js

@@ -3,6 +3,7 @@ import { action, set } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
 import { classify, dasherize } from "@ember/string";
+import { tagName } from "@ember-decorators/component";
 import ExplainReviewableModal from "discourse/components/modal/explain-reviewable";
 import RejectReasonReviewableModal from "discourse/components/modal/reject-reason-reviewable";
 import ReviseAndRejectPostReviewable from "discourse/components/modal/revise-and-reject-post-reviewable";
@@ -41,17 +42,18 @@ export function registerReviewableActionModal(actionName, modalClass) {
   actionModalClassMap[actionName] = modalClass;
 }
 
-export default Component.extend({
+@tagName("")
-  adminTools: optionalService(),
+export default class ReviewableItem extends Component {
-  dialog: service(),
+  @service dialog;
-  modal: service(),
+  @service modal;
-  siteSettings: service(),
+  @service siteSettings;
-  currentUser: service(),
+  @service currentUser;
-  composer: service(),
+  @service composer;
-  tagName: "",
+  @optionalService adminTools;
-  updating: null,
+
-  editing: false,
+  updating = null;
-  _updates: null,
+  editing = false;
+  _updates = null;
 
   @discourseComputed(
     "reviewable.type",
@@ -71,12 +73,12 @@ export default Component.extend({
     }
 
     return classes;
-  },
+  }
 
   @discourseComputed("reviewable.created_from_flag", "reviewable.status")
   displayContextQuestion(createdFromFlag, status) {
     return createdFromFlag && status === 0;
-  },
+  }
 
   @discourseComputed(
     "reviewable.topic",
@@ -85,12 +87,12 @@ export default Component.extend({
   )
   topicId(topic, topicId, removedTopicId) {
     return (topic && topic.id) || topicId || removedTopicId;
-  },
+  }
 
   @discourseComputed("siteSettings.reviewable_claiming", "topicId")
   claimEnabled(claimMode, topicId) {
     return claimMode !== "disabled" && !!topicId;
-  },
+  }
 
   @discourseComputed(
     "claimEnabled",
@@ -107,7 +109,7 @@ export default Component.extend({
     }
 
     return claimMode !== "required";
-  },
+  }
 
   @discourseComputed(
     "siteSettings.reviewable_claiming",
@@ -125,7 +127,7 @@ export default Component.extend({
     return claimMode === "optional"
       ? I18n.t("review.claim_help.optional")
       : I18n.t("review.claim_help.required");
-  },
+  }
 
   // Find a component to render, if one exists. For example:
   // `ReviewableUser` will return `reviewable-user`
@@ -142,12 +144,12 @@ export default Component.extend({
       owner.hasRegistration(`template:components/${dasherized}`);
     _components[type] = componentExists ? dasherized : null;
     return _components[type];
-  },
+  }
 
   @discourseComputed("_updates.category_id", "reviewable.category.id")
   tagCategoryId(updatedCategoryId, categoryId) {
     return updatedCategoryId || categoryId;
-  },
+  }
 
   @bind
   _performConfirmed(performableAction, additionalData = {}) {
@@ -219,15 +221,15 @@ export default Component.extend({
     } else {
       return performAction();
     }
-  },
+  }
 
   clientSuspend(reviewable, performAction) {
     this._penalize("showSuspendModal", reviewable, performAction);
-  },
+  }
 
   clientSilence(reviewable, performAction) {
     this._penalize("showSilenceModal", reviewable, performAction);
-  },
+  }
 
   async clientEdit(reviewable, performAction) {
     if (!this.currentUser) {
@@ -255,7 +257,7 @@ export default Component.extend({
     this.composer.open(opts);
 
     return performAction();
-  },
+  }
 
   _penalize(adminToolMethod, reviewable, performAction) {
     let adminTools = this.adminTools;
@@ -269,7 +271,7 @@ export default Component.extend({
         before: performAction,
       });
     }
-  },
+  }
 
   @action
   explainReviewable(reviewable, event) {
@@ -277,18 +279,20 @@ export default Component.extend({
     this.modal.show(ExplainReviewableModal, {
       model: { reviewable },
     });
-  },
+  }
 
-  actions: {
+  @action
   edit() {
     this.set("editing", true);
     this.set("_updates", { payload: {} });
-    },
+  }
 
+  @action
   cancelEdit() {
     this.set("editing", false);
-    },
+  }
 
+  @action
   saveEdit() {
     let updates = this._updates;
 
@@ -306,8 +310,9 @@ export default Component.extend({
       .then(() => this.set("editing", false))
       .catch(popupAjaxError)
       .finally(() => this.set("updating", false));
-    },
+  }
 
+  @action
   categoryChanged(categoryId) {
     let category = Category.findById(categoryId);
 
@@ -316,21 +321,21 @@ export default Component.extend({
     }
 
     set(this._updates, "category_id", category.id);
-    },
+  }
 
+  @action
   valueChanged(fieldId, event) {
     set(this._updates, fieldId, event.target.value);
-    },
+  }
 
+  @action
   perform(performableAction) {
     if (this.updating) {
       return;
     }
 
     const message = performableAction.get("confirm_message");
-      const requireRejectReason = performableAction.get(
+    const requireRejectReason = performableAction.get("require_reject_reason");
-        "require_reject_reason"
-      );
     const actionModalClass = requireRejectReason
       ? RejectReasonReviewableModal
       : actionModalClassMap[performableAction.server_action];
@@ -351,6 +356,5 @@ export default Component.extend({
     } else {
       return this._performConfirmed(performableAction);
     }
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/reviewable-post-edits.js

@@ -7,20 +7,20 @@ import { longDate } from "discourse/lib/formatter";
 import { historyHeat } from "discourse/widgets/post-edits-indicator";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class ReviewablePostEdits extends Component {
-  modal: service(),
+  @service modal;
 
-  hasEdits: gt("reviewable.post_version", 1),
+  @gt("reviewable.post_version", 1) hasEdits;
 
   @discourseComputed("reviewable.post_updated_at")
   historyClass(updatedAt) {
     return historyHeat(this.siteSettings, new Date(updatedAt));
-  },
+  }
 
   @discourseComputed("reviewable.post_updated_at")
   editedDate(updatedAt) {
     return longDate(updatedAt);
-  },
+  }
 
   @action
   showEditHistory(event) {
@@ -36,5 +36,5 @@ export default Component.extend({
         },
       });
     });
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/reviewable-post-header.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewablePostHeader extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-post.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewablePost extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-score.js

@@ -1,11 +1,11 @@
 import Component from "@ember/component";
 import { gt } from "@ember/object/computed";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class ReviewableScore extends Component {
-
+  @gt("rs.status", 0) showStatus;
-  showStatus: gt("rs.status", 0),
 
   @discourseComputed("rs.score_type.title", "reviewable.target_created_by")
   title(title, targetCreatedBy) {
@@ -17,5 +17,5 @@ export default Component.extend({
     }
 
     return title;
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/reviewable-scores.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableScores extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-tags.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableTags extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-topic-link.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ReviewableTopicLink extends Component {}

app/assets/javascripts/discourse/app/components/reviewable-user.js

@@ -1,9 +1,9 @@
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class ReviewableUser extends Component {
   @discourseComputed("reviewable.user_fields")
   userFields(fields) {
     return this.site.collectUserFields(fields);
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/save-controls.js

@@ -1,19 +1,19 @@
 import Component from "@ember/component";
 import { or } from "@ember/object/computed";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@classNames("controls", "save-button")
-  classNames: ["controls", "save-button"],
+export default class SaveControls extends Component {
-
+  @or("model.isSaving", "saveDisabled") buttonDisabled;
-  buttonDisabled: or("model.isSaving", "saveDisabled"),
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.set("saved", false);
-  },
+  }
 
   @discourseComputed("model.isSaving")
   savingText(saving) {
     return saving ? "saving" : "save";
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/scroll-tracker.js

@@ -3,40 +3,40 @@ import { next } from "@ember/runloop";
 import $ from "jquery";
 import Scrolling from "discourse/mixins/scrolling";
 
-export default Component.extend(Scrolling, {
+export default class ScrollTracker extends Component.extend(Scrolling) {
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     this.set("trackerName", `scroll-tracker-${this.name}`);
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     this.bindScrolling();
-  },
+  }
 
   didRender() {
-    this._super(...arguments);
+    super.didRender(...arguments);
 
     const data = this.session.get(this.trackerName);
     if (data && data.position >= 0 && data.tag === this.tag) {
       next(() => $(window).scrollTop(data.position + 1));
     }
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     this.unbindScrolling();
-  },
+  }
 
   scrolled() {
-    this._super(...arguments);
+    super.scrolled(...arguments);
 
     this.session.set(this.trackerName, {
       position: $(window).scrollTop(),
       tag: this.tag,
     });
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/scrolling-post-stream.js

@@ -32,14 +32,15 @@ function findTopView(posts, viewportTop, postsWrapperTop, min, max) {
   return min;
 }
 
-export default MountWidget.extend({
+export default class ScrollingPostStream extends MountWidget {
-  screenTrack: service(),
+  @service screenTrack;
-  widget: "post-stream",
+
-  _topVisible: null,
+  widget = "post-stream";
-  _bottomVisible: null,
+  _topVisible = null;
-  _currentPostObj: null,
+  _bottomVisible = null;
-  _currentVisible: null,
+  _currentPostObj = null;
-  _currentPercent: null,
+  _currentVisible = null;
+  _currentPercent = null;
 
   buildArgs() {
     return this.getProperties(
@@ -56,7 +57,7 @@ export default MountWidget.extend({
       "lastReadPostNumber",
       "highestPostNumber"
     );
-  },
+  }
 
   scrolled() {
     if (this.isDestroyed || this.isDestroying) {
@@ -279,11 +280,11 @@ export default MountWidget.extend({
 
     this._previouslyNearby = newPrev;
     this.screenTrack.setOnscreen(onscreenPostNumbers, readPostNumbers);
-  },
+  }
 
   _scrollTriggered() {
     scheduleOnce("afterRender", this, this.scrolled);
-  },
+  }
 
   _posted(staged) {
     this.queueRerender(() => {
@@ -292,7 +293,7 @@ export default MountWidget.extend({
         DiscourseURL.jumpToPost(postNumber, { skipIfOnScreen: true });
       }
     });
-  },
+  }
 
   _refresh(args) {
     if (args) {
@@ -316,15 +317,15 @@ export default MountWidget.extend({
     }
     this.queueRerender();
     this._scrollTriggered();
-  },
+  }
 
   @bind
   _debouncedScroll() {
     discourseDebounce(this, this._scrollTriggered, DEBOUNCE_DELAY);
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this._previouslyNearby = new Set();
 
     this.appEvents.on("post-stream:refresh", this, "_debouncedScroll");
@@ -357,10 +358,10 @@ export default MountWidget.extend({
         DiscourseURL.routeTo(this.location.pathname);
       }
     };
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     document.removeEventListener("touchmove", this._debouncedScroll);
     window.removeEventListener("scroll", this._debouncedScroll);
@@ -375,12 +376,12 @@ export default MountWidget.extend({
     );
     this.appEvents.off("post-stream:refresh", this, "_refresh");
     this.appEvents.off("post-stream:posted", this, "_posted");
-  },
+  }
 
   didUpdateAttrs() {
-    this._super(...arguments);
+    super.didUpdateAttrs(...arguments);
     this._refresh({ force: true });
-  },
+  }
 
   _handleWidgetButtonHoverState(event) {
     if (event.target.classList.contains("widget-button")) {
@@ -391,11 +392,11 @@ export default MountWidget.extend({
         });
       event.target.classList.add("d-hover");
     }
-  },
+  }
 
   _removeWidgetButtonHoverState() {
     document.querySelectorAll("button.widget-button").forEach((button) => {
       button.classList.remove("d-hover");
     });
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/search-advanced-options.js

@@ -1,5 +1,10 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import {
+  attributeBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
 import { escapeExpression } from "discourse/lib/utilities";
 import Category from "discourse/models/category";
 import I18n from "discourse-i18n";
@@ -79,14 +84,14 @@ export function addAdvancedSearchOptions(options) {
   _extraOptions.push(options);
 }
 
-export default Component.extend({
+@tagName("details")
-  tagName: "details",
+@attributeBindings("expandFilters:open")
-  attributeBindings: ["expandFilters:open"],
+@classNames("advanced-filters")
-  classNames: ["advanced-filters"],
+export default class SearchAdvancedOptions extends Component {
-  category: null,
+  category = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.setProperties({
       searchedTerms: {
@@ -120,10 +125,10 @@ export default Component.extend({
       postTimeOptions: postTimeOptions(),
       showAllTagsCheckbox: false,
     });
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     this.setSearchedTermValue("searchedTerms.username", REGEXP_USERNAME_PREFIX);
     this.setSearchedTermValueForCategory();
@@ -192,7 +197,7 @@ export default Component.extend({
       "searchedTerms.max_views",
       REGEXP_MAX_VIEWS_PREFIX
     );
-  },
+  }
 
   findSearchTerms() {
     const searchTerm = escapeExpression(this.searchTerm);
@@ -213,7 +218,7 @@ export default Component.extend({
     });
 
     return result;
-  },
+  }
 
   filterBlocks(regexPrefix) {
     const blocks = this.findSearchTerms();
@@ -229,7 +234,7 @@ export default Component.extend({
     });
 
     return result;
-  },
+  }
 
   setSearchedTermValue(key, replaceRegEx, matchRegEx = null) {
     matchRegEx = matchRegEx || replaceRegEx;
@@ -245,7 +250,7 @@ export default Component.extend({
     } else if (val && val.length !== 0) {
       this.set(key, null);
     }
-  },
+  }
 
   setSearchedTermSpecialInValue(key, replaceRegEx) {
     const match = this.filterBlocks(replaceRegEx);
@@ -257,7 +262,7 @@ export default Component.extend({
     } else if (this.get(key) !== false) {
       this.set(key, false);
     }
-  },
+  }
 
   setSearchedTermValueForCategory() {
     const match = this.filterBlocks(REGEXP_CATEGORY_PREFIX);
@@ -296,7 +301,7 @@ export default Component.extend({
     } else {
       this.set("searchedTerms.category", null);
     }
-  },
+  }
 
   setSearchedTermValueForTags() {
     if (!this.siteSettings.tagging_enabled) {
@@ -324,7 +329,7 @@ export default Component.extend({
     } else if (!tags) {
       this.set("searchedTerms.tags", null);
     }
-  },
+  }
 
   setSearchedTermValueForPostTime() {
     const match = this.filterBlocks(REGEXP_POST_TIME_PREFIX);
@@ -351,7 +356,7 @@ export default Component.extend({
       this.set("searchedTerms.time.when", "before");
       this.set("searchedTerms.time.days", null);
     }
-  },
+  }
 
   updateInRegex(regex, filter) {
     const match = this.filterBlocks(regex);
@@ -367,43 +372,43 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match, "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   @action
   onChangeSearchTermMinPostCount(value) {
     this.set("searchedTerms.min_posts", value.length ? value : null);
     this._updateSearchTermForMinPostCount();
-  },
+  }
 
   @action
   onChangeSearchTermMaxPostCount(value) {
     this.set("searchedTerms.max_posts", value.length ? value : null);
     this._updateSearchTermForMaxPostCount();
-  },
+  }
 
   @action
   onChangeSearchTermMinViews(value) {
     this.set("searchedTerms.min_views", value.length ? value : null);
     this._updateSearchTermForMinViews();
-  },
+  }
 
   @action
   onChangeSearchTermMaxViews(value) {
     this.set("searchedTerms.max_views", value.length ? value : null);
     this._updateSearchTermForMaxViews();
-  },
+  }
 
   @action
   onChangeSearchTermForIn(value) {
     this.set("searchedTerms.in", value);
     this._updateSearchTermForIn();
-  },
+  }
 
   @action
   onChangeSearchTermForStatus(value) {
     this.set("searchedTerms.status", value);
     this._updateSearchTermForStatus();
-  },
+  }
 
   @action
   onChangeWhenTime(time) {
@@ -411,7 +416,7 @@ export default Component.extend({
       this.set("searchedTerms.time.when", time);
       this._updateSearchTermForPostTime();
     }
-  },
+  }
 
   @action
   onChangeWhenDate(date) {
@@ -419,7 +424,7 @@ export default Component.extend({
       this.set("searchedTerms.time.days", date.format("YYYY-MM-DD"));
       this._updateSearchTermForPostTime();
     }
-  },
+  }
 
   @action
   onChangeSearchTermForCategory(categoryId) {
@@ -433,55 +438,55 @@ export default Component.extend({
     }
 
     this._updateSearchTermForCategory();
-  },
+  }
 
   @action
   onChangeSearchTermForUsername(username) {
     this.set("searchedTerms.username", username.length ? username : null);
     this._updateSearchTermForUsername();
-  },
+  }
 
   @action
   onChangeSearchTermForTags(tags) {
     this.set("searchedTerms.tags", tags.length ? tags : null);
     this._updateSearchTermForTags();
-  },
+  }
 
   @action
   onChangeSearchTermForAllTags(checked) {
     this.set("searchedTerms.special.all_tags", checked);
     this._updateSearchTermForTags();
-  },
+  }
 
   @action
   onChangeSearchTermForSpecialInLikes(checked) {
     this.set("searchedTerms.special.in.likes", checked);
     this.updateInRegex(REGEXP_SPECIAL_IN_LIKES_MATCH, "likes");
-  },
+  }
 
   @action
   onChangeSearchTermForSpecialInMessages(checked) {
     this.set("searchedTerms.special.in.messages", checked);
     this.updateInRegex(REGEXP_SPECIAL_IN_MESSAGES_MATCH, "messages");
-  },
+  }
 
   @action
   onChangeSearchTermForSpecialInSeen(checked) {
     this.set("searchedTerms.special.in.seen", checked);
     this.updateInRegex(REGEXP_SPECIAL_IN_SEEN_MATCH, "seen");
-  },
+  }
 
   @action
   onChangeSearchTermForSpecialInTitle(checked) {
     this.set("searchedTerms.special.in.title", checked);
     this.updateInRegex(REGEXP_SPECIAL_IN_TITLE_MATCH, "title");
-  },
+  }
 
   @action
   onChangeSearchedTermField(path, updateFnName, value) {
     this.set(`searchedTerms.${path}`, value);
     this[updateFnName]();
-  },
+  }
 
   _updateSearchTermForTags() {
     const match = this.filterBlocks(REGEXP_TAGS_PREFIX);
@@ -507,7 +512,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForCategory() {
     const match = this.filterBlocks(REGEXP_CATEGORY_PREFIX);
@@ -566,7 +571,7 @@ export default Component.extend({
 
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForUsername() {
     const match = this.filterBlocks(REGEXP_USERNAME_PREFIX);
@@ -585,7 +590,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForPostTime() {
     const match = this.filterBlocks(REGEXP_POST_TIME_PREFIX);
@@ -605,7 +610,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForIn() {
     let regExpInMatch = this.inOptions.map((option) => option.value).join("|");
@@ -631,7 +636,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match, "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForStatus() {
     let regExpStatusMatch = this.statusOptions
@@ -658,7 +663,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForMinPostCount() {
     const match = this.filterBlocks(REGEXP_MIN_POSTS_PREFIX);
@@ -680,7 +685,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForMaxPostCount() {
     const match = this.filterBlocks(REGEXP_MAX_POSTS_PREFIX);
@@ -702,7 +707,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForMinViews() {
     const match = this.filterBlocks(REGEXP_MIN_VIEWS_PREFIX);
@@ -724,7 +729,7 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTermForMaxViews() {
     const match = this.filterBlocks(REGEXP_MAX_VIEWS_PREFIX);
@@ -746,9 +751,9 @@ export default Component.extend({
       searchTerm = searchTerm.replace(match[0], "");
       this._updateSearchTerm(searchTerm);
     }
-  },
+  }
 
   _updateSearchTerm(searchTerm) {
     this.onChangeSearchTerm(searchTerm.trim());
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/search-result-entries.js

@@ -1,5 +1,5 @@
 import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class SearchResultEntries extends Component {}
-});

app/assets/javascripts/discourse/app/components/search-result-entry.js

@@ -1,14 +1,20 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { logSearchLinkClick } from "discourse/lib/search";
 
-export default Component.extend({
+@tagName("div")
-  tagName: "div",
+@classNames("fps-result")
-  classNames: ["fps-result"],
+@classNameBindings("bulkSelectEnabled")
-  classNameBindings: ["bulkSelectEnabled"],
+@attributeBindings("role")
-  attributeBindings: ["role"],
+export default class SearchResultEntry extends Component {
-  role: "listitem",
+  role = "listitem";
 
   @action
   logClick(topicId, event) {
@@ -24,5 +30,5 @@ export default Component.extend({
         searchResultType: "topic",
       });
     }
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/search-text-field.js

@@ -1,16 +1,17 @@
+import { on } from "@ember-decorators/object";
 import $ from "jquery";
 import TextField from "discourse/components/text-field";
 import { applySearchAutocomplete } from "discourse/lib/search";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default TextField.extend({
+export default class SearchTextField extends TextField {
-  autocomplete: "off",
+  autocomplete = "off";
 
   @discourseComputed("searchService.searchContextEnabled")
   placeholder(searchContextEnabled) {
     return searchContextEnabled ? "" : I18n.t("search.full_page_title");
-  },
+  }
 
   @on("didInsertElement")
   becomeFocused() {
@@ -24,5 +25,5 @@ export default TextField.extend({
     // at the top of the page
     $(window).scrollTop(0);
     $searchInput.focus();
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/second-factor-form.js

@@ -4,7 +4,7 @@ import { SECOND_FACTOR_METHODS } from "discourse/models/user";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
+export default class SecondFactorForm extends Component {
   @discourseComputed("secondFactorMethod")
   secondFactorTitle(secondFactorMethod) {
     switch (secondFactorMethod) {
@@ -15,7 +15,7 @@ export default Component.extend({
       case SECOND_FACTOR_METHODS.BACKUP_CODE:
         return I18n.t("login.second_factor_backup_title");
     }
-  },
+  }
 
   @discourseComputed("secondFactorMethod")
   secondFactorDescription(secondFactorMethod) {
@@ -27,7 +27,7 @@ export default Component.extend({
       case SECOND_FACTOR_METHODS.BACKUP_CODE:
         return I18n.t("login.second_factor_backup_description");
     }
-  },
+  }
 
   @discourseComputed("secondFactorMethod", "isLogin")
   linkText(secondFactorMethod, isLogin) {
@@ -40,7 +40,7 @@ export default Component.extend({
         ? "user.second_factor_backup.use"
         : "user.second_factor.use";
     }
-  },
+  }
 
   @discourseComputed("backupEnabled", "totpEnabled", "secondFactorMethod")
   showToggleMethodLink(backupEnabled, totpEnabled, secondFactorMethod) {
@@ -49,7 +49,7 @@ export default Component.extend({
       totpEnabled &&
       secondFactorMethod !== SECOND_FACTOR_METHODS.SECURITY_KEY
     );
-  },
+  }
 
   @action
   toggleSecondFactorMethod(event) {
@@ -61,5 +61,5 @@ export default Component.extend({
     } else {
       this.set("secondFactorMethod", SECOND_FACTOR_METHODS.TOTP);
     }
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/selected-posts.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SelectedPosts extends Component {}

app/assets/javascripts/discourse/app/components/share-panel.js

@@ -8,11 +8,12 @@ import discourseLater from "discourse-common/lib/later";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
+export default class SharePanel extends Component {
-  tagName: null,
+  tagName = null;
-  type: alias("panel.model.type"),
+
-  topic: alias("panel.model.topic"),
+  @alias("panel.model.type") type;
-  privateCategory: alias("panel.model.topic.category.read_restricted"),
+  @alias("panel.model.topic") topic;
+  @alias("panel.model.topic.category.read_restricted") privateCategory;
 
   @discourseComputed("topic.{isPrivateMessage,invisible,category}")
   sources(topic) {
@@ -22,13 +23,13 @@ export default Component.extend({
       (topic && topic.invisible) ||
       this.privateCategory;
     return Sharing.activeSources(this.siteSettings.share_links, privateContext);
-  },
+  }
 
   @discourseComputed("type", "topic.title")
   shareTitle(type, topicTitle) {
     topicTitle = escapeExpression(topicTitle);
     return I18n.t("share.topic_html", { topicTitle });
-  },
+  }
 
   @discourseComputed("panel.model.shareUrl", "topic.shareUrl")
   shareUrl(forcedShareUrl, shareUrl) {
@@ -45,10 +46,10 @@ export default Component.extend({
     }
 
     return encodeURI(shareUrl);
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     discourseLater(() => {
       if (this.element) {
         const textArea = this.element.querySelector(".topic-share-url");
@@ -57,7 +58,7 @@ export default Component.extend({
         textArea.setSelectionRange(0, this.shareUrl.length);
       }
     }, 200);
-  },
+  }
 
   @action
   share(source) {
@@ -65,5 +66,5 @@ export default Component.extend({
       url: this.shareUrl,
       title: this.topic.get("title"),
     });
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/shared-draft-controls.js

@@ -1,23 +1,27 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class SharedDraftControls extends Component {
-  dialog: service(),
+  @service dialog;
-  publishing: false,
+
+  publishing = false;
 
   @discourseComputed("topic.destination_category_id")
   validCategory(destCatId) {
     return destCatId && destCatId !== this.site.shared_drafts_category_id;
-  },
+  }
 
-  actions: {
+  @action
   updateDestinationCategory(categoryId) {
     return this.topic.updateDestinationCategory(categoryId);
-    },
+  }
 
+  @action
   publish() {
     this.dialog.yesNoConfirm({
       message: I18n.t("shared_drafts.confirm_publish"),
@@ -38,6 +42,5 @@ export default Component.extend({
           });
       },
     });
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/signup-cta.js

@@ -1,29 +1,29 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { on } from "@ember/object/evented";
+import { on } from "@ember-decorators/object";
 import discourseLater from "discourse-common/lib/later";
 
-export default Component.extend({
+export default class SignupCta extends Component {
-  action: "showCreateAccount",
+  action = "showCreateAccount";
 
   @action
   neverShow(event) {
     event?.preventDefault();
     this.keyValueStore.setItem("anon-cta-never", "t");
     this.session.set("showSignupCta", false);
-  },
+  }
 
-  actions: {
+  @action
   hideForSession() {
     this.session.set("hideSignupCta", true);
     this.keyValueStore.setItem("anon-cta-hidden", Date.now());
     discourseLater(() => this.session.set("showSignupCta", false), 20 * 1000);
-    },
+  }
-  },
 
-  _turnOffIfHidden: on("willDestroyElement", function () {
+  @on("willDestroyElement")
+  _turnOffIfHidden() {
     if (this.session.get("hideSignupCta")) {
       this.session.set("showSignupCta", false);
     }
-  }),
+  }
-});
+}

app/assets/javascripts/discourse/app/components/slow-mode-info.js

@@ -5,21 +5,21 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import Topic from "discourse/models/topic";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class SlowModeInfo extends Component {
   @discourseComputed("topic.slow_mode_seconds")
   durationText(seconds) {
     return durationTextFromSeconds(seconds);
-  },
+  }
 
   @discourseComputed("topic.slow_mode_seconds", "topic.closed")
   showSlowModeNotice(seconds, closed) {
     return seconds > 0 && !closed;
-  },
+  }
 
   @action
   disableSlowMode() {
     Topic.setSlowMode(this.topic.id, 0)
       .catch(popupAjaxError)
       .then(() => this.set("topic.slow_mode_seconds", 0));
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/sub-category-item.js

@@ -1,3 +1,3 @@
 import CategoryListItem from "discourse/components/category-list-item";
 
-export default CategoryListItem.extend({});
+export default class SubCategoryItem extends CategoryListItem {}

app/assets/javascripts/discourse/app/components/sub-category-row.js

@@ -1,3 +1,3 @@
 import CategoryListItem from "discourse/components/category-list-item";
 
-export default CategoryListItem.extend({});
+export default class SubCategoryRow extends CategoryListItem {}

app/assets/javascripts/discourse/app/components/subcategories-with-featured-topics.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SubcategoriesWithFeaturedTopics extends Component {}