From 77d4b3304e3329f768be4e0e866b919b9d4ff1e4 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Wed, 28 Aug 2024 14:32:56 +0100
Subject: [PATCH] DEV: Convert core components to native class syntax (batch 5)
 (#28597)

Changes made using the ember-native-class-codemod, plus some manual tweaks
---
 .../app/components/featured-topic.js          |  15 ++-
 .../app/components/flag-action-type.hbs       |   4 +-
 .../app/components/flag-action-type.js        |  36 +++---
 .../app/components/flag-selection.js          |  10 +-
 .../discourse/app/components/flat-button.js   |  22 ++--
 .../app/components/footer-message.js          |   7 +-
 .../app/components/future-date-input.js       |  45 +++----
 .../discourse/app/components/global-notice.js |  16 +--
 .../discourse/app/components/google-search.js |  14 +--
 .../app/components/group-card-contents.js     |  88 +++++++-------
 .../app/components/group-flair-inputs.js      |  34 +++---
 .../components/group-imap-email-settings.js   |  26 ++--
 .../components/group-manage-email-settings.js |  34 +++---
 .../components/group-manage-logs-filter.js    |  12 +-
 .../app/components/group-manage-logs-row.js   |  13 +-
 .../components/group-manage-save-button.js    |  26 ++--
 .../discourse/app/components/group-member.js  |  10 +-
 .../app/components/group-membership-button.js | 115 +++++++++---------
 .../app/components/group-navigation.js        |   7 +-
 .../discourse/app/components/group-post.js    |  35 +++---
 .../app/components/group-selector.js          |  16 ++-
 .../groups-form-interaction-fields.js         | 111 ++++++++---------
 .../groups-form-membership-fields.js          |  83 ++++++-------
 .../components/groups-form-profile-fields.js  |  29 ++---
 24 files changed, 404 insertions(+), 404 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/featured-topic.js b/app/assets/javascripts/discourse/app/components/featured-topic.js
index ea3edbc6e9d..0d9b695c0f9 100644
--- a/app/assets/javascripts/discourse/app/components/featured-topic.js
+++ b/app/assets/javascripts/discourse/app/components/featured-topic.js
@@ -1,10 +1,13 @@
 import Component from "@ember/component";
+import {
+  attributeBindings,
+  classNameBindings,
+} from "@ember-decorators/component";
 import $ from "jquery";
 
-export default Component.extend({
-  classNameBindings: [":featured-topic"],
-  attributeBindings: ["topic.id:data-topic-id"],
-
+@classNameBindings(":featured-topic")
+@attributeBindings("topic.id:data-topic-id")
+export default class FeaturedTopic extends Component {
   click(e) {
     if (e.target.closest(".last-posted-at")) {
       this.appEvents.trigger("topic-entrance:show", {
@@ -13,5 +16,5 @@ export default Component.extend({
       });
       return false;
     }
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/flag-action-type.hbs b/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
index 96a8b5c6b7e..c7452421f68 100644
--- a/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
+++ b/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
@@ -5,7 +5,7 @@
       <label class="radio checkbox-label">
         <input
           id="radio_{{this.flag.name_key}}"
-          {{on "click" (action "changePostActionType" this.flag)}}
+          {{on "click" (fn this.changePostActionType this.flag)}}
           type="radio"
           name="post_action_type_index"
         />
@@ -41,7 +41,7 @@
       <label class="radio checkbox-label">
         <input
           id="radio_{{this.flag.name_key}}"
-          {{on "click" (action "changePostActionType" this.flag)}}
+          {{on "click" (fn this.changePostActionType this.flag)}}
           type="radio"
           name="post_action_type_index"
         />
diff --git a/app/assets/javascripts/discourse/app/components/flag-action-type.js b/app/assets/javascripts/discourse/app/components/flag-action-type.js
index ebcd2627dfe..59ed6ac8135 100644
--- a/app/assets/javascripts/discourse/app/components/flag-action-type.js
+++ b/app/assets/javascripts/discourse/app/components/flag-action-type.js
@@ -1,23 +1,28 @@
 import Component from "@ember/component";
 import { and, equal, not } from "@ember/object/computed";
+import { tagName } from "@ember-decorators/component";
 import { MAX_MESSAGE_LENGTH } from "discourse/models/post-action-type";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  tagName: "",
+@tagName("")
+export default class FlagActionType extends Component {
+  @and("flag.require_message", "selected") showMessageInput;
+  @and("flag.isIllegal", "selected") showConfirmation;
+  @not("showMessageInput") showDescription;
+  @equal("flag.name_key", "notify_user") isNotifyUser;
 
   @discourseComputed("flag.name_key")
   wrapperClassNames(nameKey) {
     return `flag-action-type ${nameKey}`;
-  },
+  }
 
   @discourseComputed("flag.name_key")
   customPlaceholder(nameKey) {
     return I18n.t("flagging.custom_placeholder_" + nameKey, {
       defaultValue: I18n.t("flagging.custom_placeholder_notify_moderators"),
     });
-  },
+  }
 
   @discourseComputed("flag.name", "flag.name_key", "username")
   formattedName(name, nameKey, username) {
@@ -28,29 +33,24 @@ export default Component.extend({
         defaultValue: name,
       });
     }
-  },
+  }
 
   @discourseComputed("flag", "selectedFlag")
   selected(flag, selectedFlag) {
     return flag === selectedFlag;
-  },
-
-  showMessageInput: and("flag.require_message", "selected"),
-  showConfirmation: and("flag.isIllegal", "selected"),
-  showDescription: not("showMessageInput"),
-  isNotifyUser: equal("flag.name_key", "notify_user"),
+  }
 
   @discourseComputed("flag.description", "flag.short_description")
   description(long_description, short_description) {
     return this.site.mobileView ? short_description : long_description;
-  },
+  }
 
   @discourseComputed("message.length")
   customMessageLengthClasses(messageLength) {
     return messageLength < this.siteSettings.min_personal_message_post_length
       ? "too-short"
       : "ok";
-  },
+  }
 
   @discourseComputed("message.length")
   customMessageLength(messageLength) {
@@ -65,11 +65,5 @@ export default Component.extend({
         count: MAX_MESSAGE_LENGTH - len,
       });
     }
-  },
-
-  actions: {
-    changePostActionType(at) {
-      this.changePostActionType(at);
-    },
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/flag-selection.js b/app/assets/javascripts/discourse/app/components/flag-selection.js
index 1c43f4b0059..dfc8c409b3f 100644
--- a/app/assets/javascripts/discourse/app/components/flag-selection.js
+++ b/app/assets/javascripts/discourse/app/components/flag-selection.js
@@ -1,9 +1,9 @@
 import Component from "@ember/component";
 import { next } from "@ember/runloop";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
 // Mostly hacks because `flag.hbs` didn't use `radio-button`
-export default Component.extend({
+export default class FlagSelection extends Component {
   _selectRadio() {
     this.element.querySelector("input[type='radio']").checked = false;
 
@@ -16,10 +16,10 @@ export default Component.extend({
     if (selector) {
       selector.checked = "true";
     }
-  },
+  }
 
   @observes("nameKey")
   selectedChanged() {
     next(this, this._selectRadio);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/flat-button.js b/app/assets/javascripts/discourse/app/components/flat-button.js
index 47117176d09..e12358bdabd 100644
--- a/app/assets/javascripts/discourse/app/components/flat-button.js
+++ b/app/assets/javascripts/discourse/app/components/flat-button.js
@@ -1,28 +1,32 @@
 import Component from "@ember/component";
+import {
+  attributeBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  tagName: "button",
-  classNames: ["btn-flat"],
-  attributeBindings: ["disabled", "translatedTitle:title"],
-
+@tagName("button")
+@classNames("btn-flat")
+@attributeBindings("disabled", "translatedTitle:title")
+export default class FlatButton extends Component {
   @discourseComputed("title")
   translatedTitle(title) {
     if (title) {
       return I18n.t(title);
     }
-  },
+  }
 
   keyDown(event) {
     if (event.key === "Enter") {
       this.action?.();
       return false;
     }
-  },
+  }
 
   click() {
     this.action?.();
     return false;
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/footer-message.js b/app/assets/javascripts/discourse/app/components/footer-message.js
index 03b6417fb0d..21da288297b 100644
--- a/app/assets/javascripts/discourse/app/components/footer-message.js
+++ b/app/assets/javascripts/discourse/app/components/footer-message.js
@@ -1,4 +1,5 @@
 import Component from "@ember/component";
-export default Component.extend({
-  classNames: ["footer-message"],
-});
+import { classNames } from "@ember-decorators/component";
+
+@classNames("footer-message")
+export default class FooterMessage extends Component {}
diff --git a/app/assets/javascripts/discourse/app/components/future-date-input.js b/app/assets/javascripts/discourse/app/components/future-date-input.js
index 575a13c3b80..47bb9a2fcd0 100644
--- a/app/assets/javascripts/discourse/app/components/future-date-input.js
+++ b/app/assets/javascripts/discourse/app/components/future-date-input.js
@@ -12,27 +12,28 @@ import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import { FORMAT } from "select-kit/components/future-date-input-selector";
 
-export default Component.extend({
-  selection: null,
-  includeDateTime: true,
-  isCustom: equal("selection", "custom"),
-  displayDateAndTimePicker: and("includeDateTime", "isCustom"),
-  displayLabel: null,
-  labelClasses: null,
-  timeInputDisabled: empty("_date"),
-  userTimezone: null,
-  onChangeInput: null,
+export default class FutureDateInput extends Component {
+  selection = null;
+  includeDateTime = true;
 
-  _date: null,
-  _time: null,
+  @equal("selection", "custom") isCustom;
+  @and("includeDateTime", "isCustom") displayDateAndTimePicker;
+  @empty("_date") timeInputDisabled;
+
+  displayLabel = null;
+  labelClasses = null;
+  userTimezone = null;
+  onChangeInput = null;
+  _date = null;
+  _time = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.userTimezone = this.currentUser.user_option.timezone;
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     if (this.label) {
       this.set("displayLabel", I18n.t(this.label));
@@ -51,7 +52,7 @@ export default Component.extend({
         });
       }
     }
-  },
+  }
 
   @discourseComputed("customShortcuts")
   shortcuts(customShortcuts) {
@@ -85,7 +86,7 @@ export default Component.extend({
         icon: s.icon,
       };
     });
-  },
+  }
 
   @action
   onChangeDate(date) {
@@ -94,14 +95,14 @@ export default Component.extend({
     }
 
     this._dateTimeChanged(date, this._time);
-  },
+  }
 
   @action
   onChangeTime(time) {
     if (this._date) {
       this._dateTimeChanged(this._date, time);
     }
-  },
+  }
 
   _dateTimeChanged(date, time) {
     time = time ? ` ${time}` : "";
@@ -112,7 +113,7 @@ export default Component.extend({
     } else {
       this.onChangeInput?.(null);
     }
-  },
+  }
 
   _findClosestShortcut(dateTime) {
     return this.shortcuts.find((tf) => {
@@ -121,5 +122,5 @@ export default Component.extend({
         return 0 <= diff && diff < 60 * 1000;
       }
     });
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/global-notice.js b/app/assets/javascripts/discourse/app/components/global-notice.js
index 548f255fe00..a12b378ecda 100644
--- a/app/assets/javascripts/discourse/app/components/global-notice.js
+++ b/app/assets/javascripts/discourse/app/components/global-notice.js
@@ -16,15 +16,15 @@ export function addGlobalNotice(text, id, options = {}) {
 
 const GLOBAL_NOTICE_DISMISSED_PROMPT_KEY = "dismissed-global-notice-v2";
 
-const Notice = EmberObject.extend({
-  logsNoticeService: service("logsNotice"),
+class Notice extends EmberObject {
+  @service("logsNotice") logsNoticeService;
 
-  text: null,
-  id: null,
-  options: null,
+  text = null;
+  id = null;
+  options = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     const defaults = {
       // can this banner be hidden
@@ -47,8 +47,8 @@ const Notice = EmberObject.extend({
       "options",
       Object.assign(defaults, this.options || {})
     );
-  },
-});
+  }
+}
 
 @tagName("")
 export default class GlobalNotice extends Component {
diff --git a/app/assets/javascripts/discourse/app/components/google-search.js b/app/assets/javascripts/discourse/app/components/google-search.js
index 40ea5ca1ce5..c6e16693864 100644
--- a/app/assets/javascripts/discourse/app/components/google-search.js
+++ b/app/assets/javascripts/discourse/app/components/google-search.js
@@ -1,16 +1,16 @@
 import Component from "@ember/component";
 import { alias } from "@ember/object/computed";
+import { classNameBindings, classNames } from "@ember-decorators/component";
 import getURL from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  classNames: ["google-search-form"],
-  classNameBindings: ["hidden:hidden"],
-
-  hidden: alias("siteSettings.login_required"),
+@classNames("google-search-form")
+@classNameBindings("hidden:hidden")
+export default class GoogleSearch extends Component {
+  @alias("siteSettings.login_required") hidden;
 
   @discourseComputed
   siteUrl() {
     return `${location.protocol}//${location.host}${getURL("/")}`;
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-card-contents.js b/app/assets/javascripts/discourse/app/components/group-card-contents.js
index 04f06cfb129..cbb3ae4ba88 100644
--- a/app/assets/javascripts/discourse/app/components/group-card-contents.js
+++ b/app/assets/javascripts/discourse/app/components/group-card-contents.js
@@ -2,6 +2,7 @@ import Component from "@ember/component";
 import { action } from "@ember/object";
 import { alias, gt } from "@ember/object/computed";
 import { service } from "@ember/service";
+import { classNameBindings, classNames } from "@ember-decorators/component";
 import { setting } from "discourse/lib/computed";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { groupPath } from "discourse/lib/url";
@@ -11,44 +12,49 @@ import discourseComputed from "discourse-common/utils/decorators";
 
 const maxMembersToDisplay = 10;
 
-export default Component.extend(CardContentsBase, CleansUp, {
-  composer: service(),
+@classNames("no-bg", "group-card")
+@classNameBindings(
+  "visible:show",
+  "showBadges",
+  "hasCardBadgeImage",
+  "isFixed:fixed",
+  "groupClass"
+)
+export default class GroupCardContents extends Component.extend(
+  CardContentsBase,
+  CleansUp
+) {
+  @service composer;
+  @setting("allow_profile_backgrounds") allowBackgrounds;
+  @setting("enable_badges") showBadges;
 
-  elementId: "group-card",
-  mentionSelector: "a.mention-group",
-  classNames: ["no-bg", "group-card"],
-  classNameBindings: [
-    "visible:show",
-    "showBadges",
-    "hasCardBadgeImage",
-    "isFixed:fixed",
-    "groupClass",
-  ],
-  allowBackgrounds: setting("allow_profile_backgrounds"),
-  showBadges: setting("enable_badges"),
+  @alias("topic.postStream") postStream;
+  @gt("moreMembersCount", 0) showMoreMembers;
 
-  postStream: alias("topic.postStream"),
-  showMoreMembers: gt("moreMembersCount", 0),
+  elementId = "group-card";
+  mentionSelector = "a.mention-group";
 
-  group: null,
+  group = null;
 
   @discourseComputed("group.members.[]")
   highlightedMembers(members) {
     return members.slice(0, maxMembersToDisplay);
-  },
+  }
 
   @discourseComputed("group.user_count", "group.members.[]")
   moreMembersCount(memberCount) {
     return Math.max(memberCount - maxMembersToDisplay, 0);
-  },
+  }
 
   @discourseComputed("group.name")
-  groupClass: (name) => (name ? `group-card-${name}` : ""),
+  groupClass(name) {
+    return name ? `group-card-${name}` : "";
+  }
 
   @discourseComputed("group")
   groupPath(group) {
     return groupPath(group.name);
-  },
+  }
 
   async _showCallback(username) {
     this.setProperties({ visible: true, loading: true });
@@ -69,23 +75,23 @@ export default Component.extend(CardContentsBase, CleansUp, {
     } finally {
       this.set("loading", null);
     }
-  },
+  }
 
   _close() {
     this.set("group", null);
 
-    this._super(...arguments);
-  },
+    super._close(...arguments);
+  }
 
   cleanUp() {
     this._close();
-  },
+  }
 
   @action
   close(event) {
     event?.preventDefault();
     this._close();
-  },
+  }
 
   @action
   handleShowGroup(event) {
@@ -98,20 +104,20 @@ export default Component.extend(CardContentsBase, CleansUp, {
     // refactoring this to a glimmer component.
     this.showGroup(this.group);
     this._close();
-  },
+  }
 
-  actions: {
-    cancelFilter() {
-      this.postStream.cancelFilter();
-      this.postStream.refresh();
-      this._close();
-    },
+  @action
+  cancelFilter() {
+    this.postStream.cancelFilter();
+    this.postStream.refresh();
+    this._close();
+  }
 
-    messageGroup() {
-      this.composer.openNewMessage({
-        recipients: this.get("group.name"),
-        hasGroups: true,
-      });
-    },
-  },
-});
+  @action
+  messageGroup() {
+    this.composer.openNewMessage({
+      recipients: this.get("group.name"),
+      hasGroups: true,
+    });
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-flair-inputs.js b/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
index 47c032bebe9..ac91f32b62a 100644
--- a/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
+++ b/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
@@ -1,33 +1,31 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
+import { observes, on } from "@ember-decorators/object";
 import $ from "jquery";
 import { ajax } from "discourse/lib/ajax";
 import discourseDebounce from "discourse-common/lib/debounce";
 import getURL from "discourse-common/lib/get-url";
 import { convertIconClass } from "discourse-common/lib/icon-library";
-import discourseComputed, {
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  classNames: ["group-flair-inputs"],
-
+@classNames("group-flair-inputs")
+export default class GroupFlairInputs extends Component {
   @discourseComputed
   demoAvatarUrl() {
     return getURL("/images/avatar.png");
-  },
+  }
 
   @discourseComputed("model.flair_type")
   flairPreviewIcon(flairType) {
     return flairType && flairType === "icon";
-  },
+  }
 
   @discourseComputed("model.flair_icon")
   flairPreviewIconUrl(flairIcon) {
     return flairIcon ? convertIconClass(flairIcon) : "";
-  },
+  }
 
   @on("didInsertElement")
   @observes("model.flair_icon")
@@ -35,7 +33,7 @@ export default Component.extend({
     if (flairIcon) {
       discourseDebounce(this, this._loadIcon, 1000);
     }
-  },
+  }
 
   _loadIcon() {
     if (!this.model.flair_icon) {
@@ -62,23 +60,23 @@ export default Component.extend({
         );
       });
     }
-  },
+  }
 
   @discourseComputed("model.flair_type")
   flairPreviewImage(flairType) {
     return flairType && flairType === "image";
-  },
+  }
 
   @discourseComputed("model.flair_url")
   flairImageUrl(flairUrl) {
     return flairUrl && flairUrl.includes("/") ? flairUrl : null;
-  },
+  }
 
   @discourseComputed("flairPreviewImage")
   flairPreviewLabel(flairPreviewImage) {
     const key = flairPreviewImage ? "image" : "icon";
     return I18n.t(`groups.flair_preview_${key}`);
-  },
+  }
 
   @action
   setFlairImage(upload) {
@@ -86,7 +84,7 @@ export default Component.extend({
       flair_url: getURL(upload.url),
       flair_upload_id: upload.id,
     });
-  },
+  }
 
   @action
   removeFlairImage() {
@@ -94,5 +92,5 @@ export default Component.extend({
       flair_url: null,
       flair_upload_id: null,
     });
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js
index 71934e4eea6..394de8dc1fc 100644
--- a/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js
+++ b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js
@@ -1,14 +1,16 @@
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
 import { isEmpty } from "@ember/utils";
+import { tagName } from "@ember-decorators/component";
+import { on } from "@ember-decorators/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import emailProviderDefaultSettings from "discourse/lib/email-provider-default-settings";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "",
-  form: null,
+@tagName("")
+export default class GroupImapEmailSettings extends Component {
+  form = null;
 
   @discourseComputed(
     "group.email_username",
@@ -20,7 +22,7 @@ export default Component.extend({
     return [email_username, email_password, imap_server, imap_port].some(
       (value) => isEmpty(value)
     );
-  },
+  }
 
   @discourseComputed("group.imap_mailboxes")
   mailboxes(imapMailboxes) {
@@ -28,17 +30,17 @@ export default Component.extend({
       return [];
     }
     return imapMailboxes.map((mailbox) => ({ name: mailbox, value: mailbox }));
-  },
+  }
 
   @discourseComputed("group.imap_mailbox_name", "mailboxes.length")
   mailboxSelected(mailboxName, mailboxesSize) {
     return mailboxesSize === 0 || !isEmpty(mailboxName);
-  },
+  }
 
   @action
   resetSettingsValid() {
     this.set("imapSettingsValid", false);
-  },
+  }
 
   @on("init")
   _fillForm() {
@@ -50,13 +52,13 @@ export default Component.extend({
         imap_ssl: this.group.imap_ssl,
       })
     );
-  },
+  }
 
   @action
   prefillSettings(provider, event) {
     event?.preventDefault();
     this.form.setProperties(emailProviderDefaultSettings(provider, "imap"));
-  },
+  }
 
   @action
   testImapSettings() {
@@ -85,5 +87,5 @@ export default Component.extend({
       })
       .catch(popupAjaxError)
       .finally(() => this.set("testingSettings", false));
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js b/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js
index 38ef87ca910..8a569a617c7 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js
@@ -2,15 +2,17 @@ import Component from "@ember/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { isEmpty } from "@ember/utils";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import { tagName } from "@ember-decorators/component";
+import { on } from "@ember-decorators/object";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  tagName: "",
-  dialog: service(),
+@tagName("")
+export default class GroupManageEmailSettings extends Component {
+  @service dialog;
 
-  imapSettingsValid: false,
-  smtpSettingsValid: false,
+  imapSettingsValid = false;
+  smtpSettingsValid = false;
 
   @on("init")
   _determineSettingsValid() {
@@ -22,7 +24,7 @@ export default Component.extend({
       "smtpSettingsValid",
       this.group.smtp_enabled && this.group.smtp_server
     );
-  },
+  }
 
   @discourseComputed(
     "emailSettingsValid",
@@ -31,7 +33,7 @@ export default Component.extend({
   )
   enableImapSettings(emailSettingsValid, smtpEnabled, imapEnabled) {
     return smtpEnabled && (emailSettingsValid || imapEnabled);
-  },
+  }
 
   @discourseComputed(
     "smtpSettingsValid",
@@ -48,7 +50,7 @@ export default Component.extend({
     return (
       (!smtpEnabled || smtpSettingsValid) && (!imapEnabled || imapSettingsValid)
     );
-  },
+  }
 
   _anySmtpFieldsFilled() {
     return [
@@ -57,18 +59,18 @@ export default Component.extend({
       this.group.email_username,
       this.group.email_password,
     ].some((value) => !isEmpty(value));
-  },
+  }
 
   _anyImapFieldsFilled() {
     return [this.group.imap_server, this.group.imap_port].some(
       (value) => !isEmpty(value)
     );
-  },
+  }
 
   @action
   onChangeSmtpSettingsValid(valid) {
     this.set("smtpSettingsValid", valid);
-  },
+  }
 
   @action
   smtpEnabledChange(event) {
@@ -85,7 +87,7 @@ export default Component.extend({
     }
 
     this.group.set("smtp_enabled", event.target.checked);
-  },
+  }
 
   @action
   imapEnabledChange(event) {
@@ -101,7 +103,7 @@ export default Component.extend({
     }
 
     this.group.set("imap_enabled", event.target.checked);
-  },
+  }
 
   @action
   afterSave() {
@@ -109,5 +111,5 @@ export default Component.extend({
     this.store.find("group", this.group.name).then(() => {
       this._determineSettingsValid();
     });
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-logs-filter.js b/app/assets/javascripts/discourse/app/components/group-manage-logs-filter.js
index 40549c0c031..2bd06a15319 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-logs-filter.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-logs-filter.js
@@ -1,19 +1,19 @@
 import Component from "@ember/component";
+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 GroupManageLogsFilter extends Component {
   @discourseComputed("type")
   label(type) {
     return I18n.t(`groups.manage.logs.${type}`);
-  },
+  }
 
   @discourseComputed("value", "type")
   filterText(value, type) {
     return type === "action"
       ? I18n.t(`group_histories.actions.${value}`)
       : value;
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-logs-row.js b/app/assets/javascripts/discourse/app/components/group-manage-logs-row.js
index 889f9d174b8..d9e3a392ee3 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-logs-row.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-logs-row.js
@@ -1,17 +1,18 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
-  tagName: "",
-  expandDetails: false,
+@tagName("")
+export default class GroupManageLogsRow extends Component {
+  expandDetails = false;
 
   @action
   toggleDetails() {
     this.toggleProperty("expandDetails");
-  },
+  }
 
   @action
   filter(params) {
     this.set(`filters.${params.key}`, params.value);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
index d0df5121c0c..2948207e506 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
@@ -8,17 +8,19 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  modal: service(),
-  saving: null,
-  disabled: false,
-  updateExistingUsers: null,
-  hasFlair: or("model.flair_icon", "model.flair_upload_id"),
+export default class GroupManageSaveButton extends Component {
+  @service modal;
+
+  saving = null;
+  disabled = false;
+  updateExistingUsers = null;
+
+  @or("model.flair_icon", "model.flair_upload_id") hasFlair;
 
   @discourseComputed("saving")
   savingText(saving) {
     return saving ? I18n.t("saving") : I18n.t("save");
-  },
+  }
 
   @discourseComputed(
     "model.visibility_level",
@@ -39,12 +41,12 @@ export default Component.extend({
         group_name: this.model.name,
       });
     }
-  },
+  }
 
   @action
   setUpdateExistingUsers(value) {
     this.updateExistingUsers = value;
-  },
+  }
 
   @action
   save() {
@@ -86,7 +88,7 @@ export default Component.extend({
         }
       })
       .finally(() => this.set("saving", false));
-  },
+  }
 
   @action
   async editGroupNotifications(json) {
@@ -97,5 +99,5 @@ export default Component.extend({
       },
     });
     this.save();
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-member.js b/app/assets/javascripts/discourse/app/components/group-member.js
index 08d1097b426..97d75faf69d 100644
--- a/app/assets/javascripts/discourse/app/components/group-member.js
+++ b/app/assets/javascripts/discourse/app/components/group-member.js
@@ -1,12 +1,12 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 
-export default Component.extend({
-  classNames: ["item"],
-
+@classNames("item")
+export default class GroupMember extends Component {
   @action
   remove(event) {
     event?.preventDefault();
     this.removeAction(this.member);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-membership-button.js b/app/assets/javascripts/discourse/app/components/group-membership-button.js
index 2bc437a68d0..0b37f0fcc35 100644
--- a/app/assets/javascripts/discourse/app/components/group-membership-button.js
+++ b/app/assets/javascripts/discourse/app/components/group-membership-button.js
@@ -1,42 +1,44 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { classNames } from "@ember-decorators/component";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import cookie from "discourse/lib/cookie";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import RequestGroupMembershipForm from "./modal/request-group-membership-form";
 
-export default Component.extend({
-  classNames: ["group-membership-button"],
-  appEvents: service(),
-  currentUser: service(),
-  dialog: service(),
-  modal: service(),
+@classNames("group-membership-button")
+export default class GroupMembershipButton extends Component {
+  @service appEvents;
+  @service currentUser;
+  @service dialog;
+  @service modal;
 
   @discourseComputed("model.public_admission", "userIsGroupUser")
   canJoinGroup(publicAdmission, userIsGroupUser) {
     return publicAdmission && !userIsGroupUser;
-  },
+  }
 
   @discourseComputed("model.public_exit", "userIsGroupUser")
   canLeaveGroup(publicExit, userIsGroupUser) {
     return publicExit && userIsGroupUser;
-  },
+  }
 
   @discourseComputed("model.allow_membership_requests", "userIsGroupUser")
   canRequestMembership(allowMembershipRequests, userIsGroupUser) {
     return allowMembershipRequests && !userIsGroupUser;
-  },
+  }
 
   @discourseComputed("model.is_group_user")
   userIsGroupUser(isGroupUser) {
     return !!isGroupUser;
-  },
+  }
 
   _showLoginModal() {
     this.showLogin();
     cookie("destination_url", window.location.href);
-  },
+  }
 
   removeFromGroup() {
     const model = this.model;
@@ -48,53 +50,54 @@ export default Component.extend({
       })
       .catch(popupAjaxError)
       .finally(() => this.set("updatingMembership", false));
-  },
+  }
 
-  actions: {
-    joinGroup() {
-      if (this.currentUser) {
-        this.set("updatingMembership", true);
-        const group = this.model;
-
-        group
-          .join()
-          .then(() => {
-            group.set("is_group_user", true);
-            this.appEvents.trigger("group:join", group);
-          })
-          .catch(popupAjaxError)
-          .finally(() => {
-            this.set("updatingMembership", false);
-          });
-      } else {
-        this._showLoginModal();
-      }
-    },
-
-    leaveGroup() {
+  @action
+  joinGroup() {
+    if (this.currentUser) {
       this.set("updatingMembership", true);
+      const group = this.model;
 
-      if (this.model.public_admission) {
-        this.removeFromGroup();
-      } else {
-        return this.dialog.yesNoConfirm({
-          message: I18n.t("groups.confirm_leave"),
-          didConfirm: () => this.removeFromGroup(),
-          didCancel: () => this.set("updatingMembership", false),
+      group
+        .join()
+        .then(() => {
+          group.set("is_group_user", true);
+          this.appEvents.trigger("group:join", group);
+        })
+        .catch(popupAjaxError)
+        .finally(() => {
+          this.set("updatingMembership", false);
         });
-      }
-    },
+    } else {
+      this._showLoginModal();
+    }
+  }
 
-    showRequestMembershipForm() {
-      if (this.currentUser) {
-        this.modal.show(RequestGroupMembershipForm, {
-          model: {
-            group: this.model,
-          },
-        });
-      } else {
-        this._showLoginModal();
-      }
-    },
-  },
-});
+  @action
+  leaveGroup() {
+    this.set("updatingMembership", true);
+
+    if (this.model.public_admission) {
+      this.removeFromGroup();
+    } else {
+      return this.dialog.yesNoConfirm({
+        message: I18n.t("groups.confirm_leave"),
+        didConfirm: () => this.removeFromGroup(),
+        didCancel: () => this.set("updatingMembership", false),
+      });
+    }
+  }
+
+  @action
+  showRequestMembershipForm() {
+    if (this.currentUser) {
+      this.modal.show(RequestGroupMembershipForm, {
+        model: {
+          group: this.model,
+        },
+      });
+    } else {
+      this._showLoginModal();
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-navigation.js b/app/assets/javascripts/discourse/app/components/group-navigation.js
index 0e6d50b17d4..ba1e4302f7c 100644
--- a/app/assets/javascripts/discourse/app/components/group-navigation.js
+++ b/app/assets/javascripts/discourse/app/components/group-navigation.js
@@ -1,4 +1,5 @@
 import Component from "@ember/component";
-export default Component.extend({
-  tagName: "",
-});
+import { tagName } from "@ember-decorators/component";
+
+@tagName("")
+export default class GroupNavigation extends Component {}
diff --git a/app/assets/javascripts/discourse/app/components/group-post.js b/app/assets/javascripts/discourse/app/components/group-post.js
index 4c35f787999..4e685dbe565 100644
--- a/app/assets/javascripts/discourse/app/components/group-post.js
+++ b/app/assets/javascripts/discourse/app/components/group-post.js
@@ -1,27 +1,26 @@
 import Component from "@ember/component";
-import { propertyEqual } from "discourse/lib/computed";
+import { equal } from "@ember/object/computed";
+import { classNameBindings } from "@ember-decorators/component";
 import { prioritizeNameInUx } from "discourse/lib/settings";
 import { userPath } from "discourse/lib/url";
 import getURL from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  classNameBindings: [
-    ":user-stream-item",
-    ":item",
-    "moderatorAction",
-    "primaryGroup",
-  ],
+@classNameBindings(
+  ":user-stream-item",
+  ":item",
+  "moderatorAction",
+  "primaryGroup"
+)
+export default class GroupPost extends Component {
+  @equal("post.post_type", "site.post_types.moderator_action")
+  moderatorAction;
 
   @discourseComputed("post.url")
   postUrl(url) {
     return getURL(url);
-  },
-  moderatorAction: propertyEqual(
-    "post.post_type",
-    "site.post_types.moderator_action"
-  ),
+  }
 
   @discourseComputed("post.user")
   name(postUser) {
@@ -29,22 +28,22 @@ export default Component.extend({
       return postUser.name;
     }
     return postUser.username;
-  },
+  }
 
   @discourseComputed("post.user")
   primaryGroup(postUser) {
     if (postUser.primary_group_name) {
       return `group-${postUser.primary_group_name}`;
     }
-  },
+  }
 
   @discourseComputed("post.user.username")
   userUrl(username) {
     return userPath(username.toLowerCase());
-  },
+  }
 
   @discourseComputed("post.title", "post.post_number")
   titleAriaLabel(title, postNumber) {
     return I18n.t("groups.aria_post_number", { postNumber, title });
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-selector.js b/app/assets/javascripts/discourse/app/components/group-selector.js
index aa67587292d..2ffab3d181c 100644
--- a/app/assets/javascripts/discourse/app/components/group-selector.js
+++ b/app/assets/javascripts/discourse/app/components/group-selector.js
@@ -1,25 +1,23 @@
 import Component from "@ember/component";
 import { isEmpty } from "@ember/utils";
+import { observes, on } from "@ember-decorators/object";
 import $ from "jquery";
 import { findRawTemplate } from "discourse-common/lib/raw-templates";
-import discourseComputed, {
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
+export default class GroupSelector extends Component {
   @discourseComputed("placeholderKey")
   placeholder(placeholderKey) {
     return placeholderKey ? I18n.t(placeholderKey) : "";
-  },
+  }
 
   @observes("groupNames")
   _update() {
     if (this.canReceiveUpdates === "true") {
       this._initializeAutocomplete({ updateData: true });
     }
-  },
+  }
 
   @on("didInsertElement")
   _initializeAutocomplete(opts) {
@@ -62,5 +60,5 @@ export default Component.extend({
       },
       template: findRawTemplate("group-selector-autocomplete"),
     });
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/groups-form-interaction-fields.js b/app/assets/javascripts/discourse/app/components/groups-form-interaction-fields.js
index 9486f3bb6d5..e2c85851959 100644
--- a/app/assets/javascripts/discourse/app/components/groups-form-interaction-fields.js
+++ b/app/assets/javascripts/discourse/app/components/groups-form-interaction-fields.js
@@ -4,67 +4,54 @@ import { NotificationLevels } from "discourse/lib/notification-levels";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  init() {
-    this._super(...arguments);
-
-    this.visibilityLevelOptions = [
-      {
-        name: I18n.t(
-          "admin.groups.manage.interaction.visibility_levels.public"
-        ),
-        value: 0,
-      },
-      {
-        name: I18n.t(
-          "admin.groups.manage.interaction.visibility_levels.logged_on_users"
-        ),
-        value: 1,
-      },
-      {
-        name: I18n.t(
-          "admin.groups.manage.interaction.visibility_levels.members"
-        ),
-        value: 2,
-      },
-      {
-        name: I18n.t("admin.groups.manage.interaction.visibility_levels.staff"),
-        value: 3,
-      },
-      {
-        name: I18n.t(
-          "admin.groups.manage.interaction.visibility_levels.owners"
-        ),
-        value: 4,
-      },
-    ];
-
-    this.aliasLevelOptions = [
-      { name: I18n.t("groups.alias_levels.nobody"), value: 0 },
-      { name: I18n.t("groups.alias_levels.only_admins"), value: 1 },
-      { name: I18n.t("groups.alias_levels.mods_and_admins"), value: 2 },
-      { name: I18n.t("groups.alias_levels.members_mods_and_admins"), value: 3 },
-      { name: I18n.t("groups.alias_levels.owners_mods_and_admins"), value: 4 },
-      { name: I18n.t("groups.alias_levels.everyone"), value: 99 },
-    ];
-
-    this.watchingNotificationLevel = NotificationLevels.WATCHING;
-  },
-
-  membersVisibilityLevel: or(
+export default class GroupsFormInteractionFields extends Component {
+  @or(
     "model.members_visibility_level",
     "visibilityLevelOptions.firstObject.value"
-  ),
+  )
+  membersVisibilityLevel;
 
-  messageableLevel: or(
-    "model.messageable_level",
-    "aliasLevelOptions.firstObject.value"
-  ),
+  @or("model.messageable_level", "aliasLevelOptions.firstObject.value")
+  messageableLevel;
 
-  mentionableLevel: or(
-    "model.mentionable_level",
-    "aliasLevelOptions.firstObject.value"
-  ),
+  @or("model.mentionable_level", "aliasLevelOptions.firstObject.value")
+  mentionableLevel;
+
+  visibilityLevelOptions = [
+    {
+      name: I18n.t("admin.groups.manage.interaction.visibility_levels.public"),
+      value: 0,
+    },
+    {
+      name: I18n.t(
+        "admin.groups.manage.interaction.visibility_levels.logged_on_users"
+      ),
+      value: 1,
+    },
+    {
+      name: I18n.t("admin.groups.manage.interaction.visibility_levels.members"),
+      value: 2,
+    },
+    {
+      name: I18n.t("admin.groups.manage.interaction.visibility_levels.staff"),
+      value: 3,
+    },
+    {
+      name: I18n.t("admin.groups.manage.interaction.visibility_levels.owners"),
+      value: 4,
+    },
+  ];
+
+  aliasLevelOptions = [
+    { name: I18n.t("groups.alias_levels.nobody"), value: 0 },
+    { name: I18n.t("groups.alias_levels.only_admins"), value: 1 },
+    { name: I18n.t("groups.alias_levels.mods_and_admins"), value: 2 },
+    { name: I18n.t("groups.alias_levels.members_mods_and_admins"), value: 3 },
+    { name: I18n.t("groups.alias_levels.owners_mods_and_admins"), value: 4 },
+    { name: I18n.t("groups.alias_levels.everyone"), value: 99 },
+  ];
+
+  watchingNotificationLevel = NotificationLevels.WATCHING;
 
   @discourseComputed(
     "model.default_notification_level",
@@ -78,7 +65,7 @@ export default Component.extend({
       return defaultNotificationLevel;
     }
     return watchingNotificationLevel;
-  },
+  }
 
   @discourseComputed(
     "siteSettings.email_in",
@@ -87,7 +74,7 @@ export default Component.extend({
   )
   showEmailSettings(emailIn, automatic, isAdmin) {
     return emailIn && isAdmin && !automatic;
-  },
+  }
 
   @discourseComputed(
     "model.isCreated",
@@ -96,12 +83,12 @@ export default Component.extend({
   )
   canAdminGroup(isCreated, canAdmin, canCreate) {
     return (!isCreated && canCreate) || (isCreated && canAdmin);
-  },
+  }
 
   @discourseComputed("membersVisibilityLevel")
   membersVisibilityPrivate(membersVisibilityLevel) {
     return (
       membersVisibilityLevel !== this.visibilityLevelOptions.firstObject.value
     );
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/groups-form-membership-fields.js b/app/assets/javascripts/discourse/app/components/groups-form-membership-fields.js
index a9a90ab3ed1..0c0974f613a 100644
--- a/app/assets/javascripts/discourse/app/components/groups-form-membership-fields.js
+++ b/app/assets/javascripts/discourse/app/components/groups-form-membership-fields.js
@@ -1,51 +1,48 @@
 import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
 import { not, readOnly } from "@ember/object/computed";
 import AssociatedGroup from "discourse/models/associated-group";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  tokenSeparator: "|",
-  showAssociatedGroups: readOnly("site.can_associate_groups"),
+export default class GroupsFormMembershipFields extends Component {
+  tokenSeparator = "|";
+
+  @readOnly("site.can_associate_groups") showAssociatedGroups;
+  @not("model.automatic") canEdit;
+
+  trustLevelOptions = [
+    {
+      name: I18n.t("admin.groups.manage.membership.trust_levels_none"),
+      value: 0,
+    },
+    { name: 1, value: 1 },
+    { name: 2, value: 2 },
+    { name: 3, value: 3 },
+    { name: 4, value: 4 },
+  ];
 
   init() {
-    this._super(...arguments);
-
-    this.set("trustLevelOptions", [
-      {
-        name: I18n.t("admin.groups.manage.membership.trust_levels_none"),
-        value: 0,
-      },
-      { name: 1, value: 1 },
-      { name: 2, value: 2 },
-      { name: 3, value: 3 },
-      { name: 4, value: 4 },
-    ]);
+    super.init(...arguments);
 
     if (this.showAssociatedGroups) {
       this.loadAssociatedGroups();
     }
-  },
+  }
 
-  canEdit: not("model.automatic"),
-
-  groupTrustLevel: computed(
-    "model.grant_trust_level",
-    "trustLevelOptions",
-    function () {
-      return (
-        this.model.get("grant_trust_level") ||
-        this.trustLevelOptions.firstObject.value
-      );
-    }
-  ),
+  @computed("model.grant_trust_level", "trustLevelOptions")
+  get groupTrustLevel() {
+    return (
+      this.model.get("grant_trust_level") ||
+      this.trustLevelOptions.firstObject.value
+    );
+  }
 
   @discourseComputed("model.visibility_level", "model.public_admission")
   disableMembershipRequestSetting(visibility_level, publicAdmission) {
     visibility_level = parseInt(visibility_level, 10);
     return publicAdmission || visibility_level > 1;
-  },
+  }
 
   @discourseComputed(
     "model.visibility_level",
@@ -54,22 +51,22 @@ export default Component.extend({
   disablePublicSetting(visibility_level, allowMembershipRequests) {
     visibility_level = parseInt(visibility_level, 10);
     return allowMembershipRequests || visibility_level > 1;
-  },
+  }
 
-  emailDomains: computed("model.emailDomains", function () {
+  @computed("model.emailDomains")
+  get emailDomains() {
     return this.model.emailDomains.split(this.tokenSeparator).filter(Boolean);
-  }),
+  }
 
   loadAssociatedGroups() {
     AssociatedGroup.list().then((ags) => this.set("associatedGroups", ags));
-  },
+  }
 
-  actions: {
-    onChangeEmailDomainsSetting(value) {
-      this.set(
-        "model.automatic_membership_email_domains",
-        value.join(this.tokenSeparator)
-      );
-    },
-  },
-});
+  @action
+  onChangeEmailDomainsSetting(value) {
+    this.set(
+      "model.automatic_membership_email_domains",
+      value.join(this.tokenSeparator)
+    );
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/groups-form-profile-fields.js b/app/assets/javascripts/discourse/app/components/groups-form-profile-fields.js
index 030e2ff93bb..45c05c4b877 100644
--- a/app/assets/javascripts/discourse/app/components/groups-form-profile-fields.js
+++ b/app/assets/javascripts/discourse/app/components/groups-form-profile-fields.js
@@ -2,18 +2,21 @@ import Component from "@ember/component";
 import EmberObject from "@ember/object";
 import { not } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
+import { observes } from "@ember-decorators/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import Group from "discourse/models/group";
 import discourseDebounce from "discourse-common/lib/debounce";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Component.extend({
-  disableSave: null,
-  nameInput: null,
+export default class GroupsFormProfileFields extends Component {
+  disableSave = null;
+  nameInput = null;
+
+  @not("model.automatic") canEdit;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     const name = this.get("model.name");
 
     if (name) {
@@ -21,14 +24,12 @@ export default Component.extend({
     } else {
       this.set("disableSave", true);
     }
-  },
-
-  canEdit: not("model.automatic"),
+  }
 
   @discourseComputed("basicNameValidation", "uniqueNameValidation")
   nameValidation(basicNameValidation, uniqueNameValidation) {
     return uniqueNameValidation ? uniqueNameValidation : basicNameValidation;
-  },
+  }
 
   @observes("nameInput")
   _validateName() {
@@ -62,11 +63,11 @@ export default Component.extend({
     return this._failedInputValidation(
       I18n.t("admin.groups.new.name.checking")
     );
-  },
+  }
 
   checkGroupNameDebounced() {
     discourseDebounce(this, this._checkGroupName, 500);
-  },
+  }
 
   _checkGroupName() {
     if (isEmpty(this.nameInput)) {
@@ -101,7 +102,7 @@ export default Component.extend({
         }
       })
       .catch(popupAjaxError);
-  },
+  }
 
   _failedInputValidation(reason) {
     this.set("disableSave", true);
@@ -111,5 +112,5 @@ export default Component.extend({
       options.reason = reason;
     }
     this.set("basicNameValidation", EmberObject.create(options));
-  },
-});
+  }
+}