From fc02b4904dc64cb8ff6a20f43eb47915898a2361 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 1 Aug 2024 12:03:17 +0100
Subject: [PATCH] DEV: Convert core controllers to native class syntax (batch
 2) (#28179)

Changes made using the ember-native-class-codemod, plus some manual tweaks
---
 .../app/controllers/group-activity-posts.js   |  76 ++++++-------
 .../app/controllers/group-activity-topics.js  |  15 +--
 .../app/controllers/group-activity.js         |  10 +-
 .../discourse/app/controllers/group-index.js  |  75 ++++++-------
 .../controllers/group-manage-categories.js    |   6 +-
 .../app/controllers/group-manage-logs.js      |  30 +++---
 .../app/controllers/group-manage-profile.js   |   7 +-
 .../app/controllers/group-manage-tags.js      |   6 +-
 .../discourse/app/controllers/group-manage.js |   6 +-
 .../app/controllers/group-messages.js         |   3 +-
 .../app/controllers/group-permissions.js      |   2 +-
 .../app/controllers/group-requests.js         | 101 +++++++++---------
 .../discourse/app/controllers/group.js        |  44 ++++----
 .../discourse/app/controllers/groups-index.js |  33 +++---
 .../discourse/app/controllers/groups-new.js   |  21 ++--
 15 files changed, 218 insertions(+), 217 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/group-activity-posts.js b/app/assets/javascripts/discourse/app/controllers/group-activity-posts.js
index c9fad2389f5..1f069fda2e2 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-activity-posts.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-activity-posts.js
@@ -1,43 +1,45 @@
 import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
 import { fmt } from "discourse/lib/computed";
 
-export default Controller.extend({
-  group: controller(),
-  groupActivity: controller(),
-  application: controller(),
-  canLoadMore: true,
-  loading: false,
-  emptyText: fmt("type", "groups.empty.%@"),
+export default class GroupActivityPostsController extends Controller {
+  @controller group;
+  @controller groupActivity;
+  @controller application;
 
-  actions: {
-    loadMore() {
-      if (!this.canLoadMore) {
-        return;
-      }
-      if (this.loading) {
-        return;
-      }
-      this.set("loading", true);
-      const posts = this.model;
-      if (posts && posts.length) {
-        const before = posts[posts.length - 1].get("created_at");
-        const group = this.get("group.model");
+  @fmt("type", "groups.empty.%@") emptyText;
 
-        let categoryId = this.get("groupActivity.category_id");
-        const opts = { before, type: this.type, categoryId };
+  canLoadMore = true;
+  loading = false;
 
-        group
-          .findPosts(opts)
-          .then((newPosts) => {
-            posts.addObjects(newPosts);
-            if (newPosts.length === 0) {
-              this.set("canLoadMore", false);
-            }
-          })
-          .finally(() => {
-            this.set("loading", false);
-          });
-      }
-    },
-  },
-});
+  @action
+  loadMore() {
+    if (!this.canLoadMore) {
+      return;
+    }
+    if (this.loading) {
+      return;
+    }
+    this.set("loading", true);
+    const posts = this.model;
+    if (posts && posts.length) {
+      const before = posts[posts.length - 1].get("created_at");
+      const group = this.get("group.model");
+
+      let categoryId = this.get("groupActivity.category_id");
+      const opts = { before, type: this.type, categoryId };
+
+      group
+        .findPosts(opts)
+        .then((newPosts) => {
+          posts.addObjects(newPosts);
+          if (newPosts.length === 0) {
+            this.set("canLoadMore", false);
+          }
+        })
+        .finally(() => {
+          this.set("loading", false);
+        });
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-activity-topics.js b/app/assets/javascripts/discourse/app/controllers/group-activity-topics.js
index b50e522d9f4..c3f071a9267 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-activity-topics.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-activity-topics.js
@@ -1,8 +1,9 @@
 import Controller from "@ember/controller";
-export default Controller.extend({
-  actions: {
-    loadMore() {
-      this.model.loadMore();
-    },
-  },
-});
+import { action } from "@ember/object";
+
+export default class GroupActivityTopicsController extends Controller {
+  @action
+  loadMore() {
+    this.model.loadMore();
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-activity.js b/app/assets/javascripts/discourse/app/controllers/group-activity.js
index 307a4d0a59b..af7b3f2dc26 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-activity.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-activity.js
@@ -1,6 +1,8 @@
 import Controller from "@ember/controller";
 import { service } from "@ember/service";
-export default Controller.extend({
-  router: service(),
-  queryParams: ["category_id"],
-});
+
+export default class GroupActivityController extends Controller {
+  @service router;
+
+  queryParams = ["category_id"];
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-index.js b/app/assets/javascripts/discourse/app/controllers/group-index.js
index 35acc97d0f7..ecf7a8b63eb 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-index.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-index.js
@@ -1,45 +1,42 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { gt } from "@ember/object/computed";
+import { observes } from "@ember-decorators/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import discourseComputed, {
-  debounce,
-  observes,
-} from "discourse-common/utils/decorators";
+import discourseComputed, { debounce } from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  queryParams: ["order", "asc", "filter"],
+export default class GroupIndexController extends Controller {
+  queryParams = ["order", "asc", "filter"];
+  order = null;
+  asc = true;
+  filter = null;
+  filterInput = null;
+  loading = false;
+  isBulk = false;
+  showActions = false;
+  bulkSelection = null;
 
-  order: null,
-  asc: true,
-  filter: null,
-  filterInput: null,
-
-  loading: false,
-  isBulk: false,
-  showActions: false,
-
-  bulkSelection: null,
+  @gt("model.members.length", 0) hasMembers;
 
   get canLoadMore() {
     return this.get("model.members")?.length < this.get("model.user_count");
-  },
+  }
 
   @observes("filterInput")
   filterInputChanged() {
     this._setFilter();
-  },
+  }
 
   @debounce(500)
   _setFilter() {
     this.set("filter", this.filterInput);
-  },
+  }
 
   @observes("order", "asc", "filter")
   _filtersChanged() {
     this.reloadMembers(true);
-  },
+  }
 
   reloadMembers(refresh) {
     if (this.loading || !this.model) {
@@ -58,19 +55,17 @@ export default Controller.extend({
         this.set("bulkSelection", []);
       }
     });
-  },
+  }
 
   @discourseComputed("order", "asc", "filter")
   memberParams(order, asc, filter) {
     return { order, asc, filter };
-  },
-
-  hasMembers: gt("model.members.length", 0),
+  }
 
   @discourseComputed("model")
   canManageGroup(model) {
     return this.currentUser && this.currentUser.canManageGroup(model);
-  },
+  }
 
   @discourseComputed
   filterPlaceholder() {
@@ -79,7 +74,7 @@ export default Controller.extend({
     } else {
       return "groups.members.filter_placeholder";
     }
-  },
+  }
 
   @discourseComputed("filter", "members", "model.can_see_members")
   emptyMessageKey(filter, members, canSeeMembers) {
@@ -90,17 +85,17 @@ export default Controller.extend({
     } else {
       return "groups.empty.members";
     }
-  },
+  }
 
   @action
   loadMore() {
     this.reloadMembers();
-  },
+  }
 
   @action
   toggleActions() {
     this.toggleProperty("showActions");
-  },
+  }
 
   @action
   actOnGroup(member, actionId) {
@@ -123,7 +118,7 @@ export default Controller.extend({
         member.setPrimaryGroup(null).then(() => member.set("primary", false));
         break;
     }
-  },
+  }
 
   @action
   actOnSelection(selection, actionId) {
@@ -177,22 +172,22 @@ export default Controller.extend({
           this.set("isBulk", false);
         });
     }
-  },
+  }
 
   @action
   removeMember(user) {
     this.model.removeMember(user, this.memberParams);
-  },
+  }
 
   @action
   makeOwner(username) {
     this.model.addOwners(username);
-  },
+  }
 
   @action
   removeOwner(user) {
     this.model.removeOwner(user);
-  },
+  }
 
   @action
   addMembers() {
@@ -202,7 +197,7 @@ export default Controller.extend({
         .then(() => this.set("usernames", []))
         .catch(popupAjaxError);
     }
-  },
+  }
 
   @action
   toggleBulkSelect() {
@@ -210,7 +205,7 @@ export default Controller.extend({
       isBulk: !this.isBulk,
       bulkSelection: [],
     });
-  },
+  }
 
   @action
   bulkSelectAll() {
@@ -221,7 +216,7 @@ export default Controller.extend({
           checkbox.click();
         }
       });
-  },
+  }
 
   @action
   bulkClearAll() {
@@ -232,7 +227,7 @@ export default Controller.extend({
           checkbox.click();
         }
       });
-  },
+  }
 
   @action
   selectMember(member, e) {
@@ -243,5 +238,5 @@ export default Controller.extend({
     } else {
       this.bulkSelection.removeObject(member);
     }
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-manage-categories.js b/app/assets/javascripts/discourse/app/controllers/group-manage-categories.js
index dbbe4b21e01..d682ea9ff28 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-manage-categories.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-manage-categories.js
@@ -1,7 +1,7 @@
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
+export default class GroupManageCategoriesController extends Controller {
   @discourseComputed(
     "model.watchingCategories.[]",
     "model.watchingFirstPostCategories.[]",
@@ -13,5 +13,5 @@ export default Controller.extend({
     return []
       .concat(watching, watchingFirst, tracking, regular, muted)
       .filter(Boolean);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-manage-logs.js b/app/assets/javascripts/discourse/app/controllers/group-manage-logs.js
index 1d11661aa59..4fb8c66997d 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-manage-logs.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-manage-logs.js
@@ -1,17 +1,15 @@
 import Controller, { inject as controller } from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
+import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  group: controller(),
-  application: controller(),
-  loading: false,
-  offset: 0,
+export default class GroupManageLogsController extends Controller {
+  @controller group;
+  @controller application;
 
-  init() {
-    this._super(...arguments);
-    this.set("filters", EmberObject.create());
-  },
+  loading = false;
+  offset = 0;
+  filters = EmberObject.create();
 
   @discourseComputed(
     "filters.action",
@@ -21,7 +19,7 @@ export default Controller.extend({
   )
   filterParams(filtersAction, acting_user, target_user, subject) {
     return { action: filtersAction, acting_user, target_user, subject };
-  },
+  }
 
   @observes(
     "filters.action",
@@ -40,14 +38,14 @@ export default Controller.extend({
           all_loaded: results.all_loaded,
         });
       });
-  },
+  }
 
   reset() {
     this.setProperties({
       offset: 0,
       filters: EmberObject.create(),
     });
-  },
+  }
 
   @action
   loadMore() {
@@ -67,10 +65,10 @@ export default Controller.extend({
         this.set("model.all_loaded", results.all_loaded);
       })
       .finally(() => this.set("loading", false));
-  },
+  }
 
   @action
   clearFilter(key) {
     this.set(`filters.${key}`, "");
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-manage-profile.js b/app/assets/javascripts/discourse/app/controllers/group-manage-profile.js
index 11f88ccf159..89cc038b35c 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-manage-profile.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-manage-profile.js
@@ -1,4 +1,5 @@
 import Controller from "@ember/controller";
-export default Controller.extend({
-  saving: null,
-});
+
+export default class GroupManageProfileController extends Controller {
+  saving = null;
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-manage-tags.js b/app/assets/javascripts/discourse/app/controllers/group-manage-tags.js
index 70fbe2b8bf6..22121ca09a7 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-manage-tags.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-manage-tags.js
@@ -1,7 +1,7 @@
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
+export default class GroupManageTagsController extends Controller {
   @discourseComputed(
     "model.watching_tags.[]",
     "model.watching_first_post_tags.[]",
@@ -13,5 +13,5 @@ export default Controller.extend({
     return []
       .concat(watching, watchingFirst, tracking, regular, muted)
       .filter((t) => t);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-manage.js b/app/assets/javascripts/discourse/app/controllers/group-manage.js
index 3d4e6847852..46b5ae92cc3 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-manage.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-manage.js
@@ -1,7 +1,7 @@
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
+export default class GroupManageController extends Controller {
   @discourseComputed("model.automatic")
   tabs(automatic) {
     const defaultTabs = [
@@ -43,5 +43,5 @@ export default Controller.extend({
     }
 
     return defaultTabs;
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-messages.js b/app/assets/javascripts/discourse/app/controllers/group-messages.js
index 1c0ee0801d4..18c438f02b3 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-messages.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-messages.js
@@ -1,2 +1,3 @@
 import Controller from "@ember/controller";
-export default Controller.extend({});
+
+export default class GroupMessagesController extends Controller {}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-permissions.js b/app/assets/javascripts/discourse/app/controllers/group-permissions.js
index 7ae8f5a1e2e..f57dcb9c6e6 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-permissions.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-permissions.js
@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend();
+export default class GroupPermissionsController extends Controller {}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-requests.js b/app/assets/javascripts/discourse/app/controllers/group-requests.js
index c816ea493a5..7ea4f092060 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-requests.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-requests.js
@@ -1,41 +1,38 @@
 import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
+import { observes } from "@ember-decorators/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import discourseComputed, {
-  debounce,
-  observes,
-} from "discourse-common/utils/decorators";
+import discourseComputed, { debounce } from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  application: controller(),
+export default class GroupRequestsController extends Controller {
+  @controller application;
 
-  queryParams: ["order", "asc", "filter"],
-
-  order: "",
-  asc: null,
-  filter: null,
-  filterInput: null,
-
-  loading: false,
+  queryParams = ["order", "asc", "filter"];
+  order = "";
+  asc = null;
+  filter = null;
+  filterInput = null;
+  loading = false;
 
   get canLoadMore() {
     return this.get("model.requesters")?.length < this.get("model.user_count");
-  },
+  }
 
   @observes("filterInput")
   filterInputChanged() {
     this._setFilter();
-  },
+  }
 
   @debounce(500)
   _setFilter() {
     this.set("filter", this.filterInput);
-  },
+  }
 
   @observes("order", "asc", "filter")
   _filtersChanged() {
     this.findRequesters(true);
-  },
+  }
 
   findRequesters(refresh) {
     if (this.loading) {
@@ -55,17 +52,17 @@ export default Controller.extend({
     model.findRequesters(this.memberParams, refresh).finally(() => {
       this.set("loading", false);
     });
-  },
+  }
 
   @discourseComputed("order", "asc", "filter")
   memberParams(order, asc, filter) {
     return { order, asc, filter };
-  },
+  }
 
   @discourseComputed("model.requesters.[]")
   hasRequesters(requesters) {
     return requesters && requesters.length > 0;
-  },
+  }
 
   @discourseComputed
   filterPlaceholder() {
@@ -74,43 +71,45 @@ export default Controller.extend({
     } else {
       return "groups.members.filter_placeholder";
     }
-  },
+  }
 
   handleRequest(data) {
     ajax(`/groups/${this.get("model.id")}/handle_membership_request.json`, {
       data,
       type: "PUT",
     }).catch(popupAjaxError);
-  },
+  }
 
-  actions: {
-    loadMore() {
-      this.findRequesters();
-    },
+  @action
+  loadMore() {
+    this.findRequesters();
+  }
 
-    acceptRequest(user) {
-      this.handleRequest({ user_id: user.get("id"), accept: true });
-      user.setProperties({
-        request_accepted: true,
-        request_denied: false,
-      });
-    },
+  @action
+  acceptRequest(user) {
+    this.handleRequest({ user_id: user.get("id"), accept: true });
+    user.setProperties({
+      request_accepted: true,
+      request_denied: false,
+    });
+  }
 
-    undoAcceptRequest(user) {
-      ajax("/groups/" + this.get("model.id") + "/members.json", {
-        type: "DELETE",
-        data: { user_id: user.get("id") },
-      }).then(() => {
-        user.set("request_undone", true);
-      });
-    },
+  @action
+  undoAcceptRequest(user) {
+    ajax("/groups/" + this.get("model.id") + "/members.json", {
+      type: "DELETE",
+      data: { user_id: user.get("id") },
+    }).then(() => {
+      user.set("request_undone", true);
+    });
+  }
 
-    denyRequest(user) {
-      this.handleRequest({ user_id: user.get("id") });
-      user.setProperties({
-        request_accepted: false,
-        request_denied: true,
-      });
-    },
-  },
-});
+  @action
+  denyRequest(user) {
+    this.handleRequest({ user_id: user.get("id") });
+    user.setProperties({
+      request_accepted: false,
+      request_denied: true,
+    });
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group.js b/app/assets/javascripts/discourse/app/controllers/group.js
index 1b21e6fbc6c..9ba81fd4e20 100644
--- a/app/assets/javascripts/discourse/app/controllers/group.js
+++ b/app/assets/javascripts/discourse/app/controllers/group.js
@@ -5,28 +5,28 @@ import GroupDeleteDialog from "discourse/components/dialog-messages/group-delete
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-const Tab = EmberObject.extend({
+class Tab extends EmberObject {
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.setProperties({
       route: this.route || `group.${this.name}`,
       message: I18n.t(`groups.${this.i18nKey || this.name}`),
     });
-  },
-});
+  }
+}
 
-export default Controller.extend({
-  application: controller(),
-  dialog: service(),
-  currentUser: service(),
-  router: service(),
-  composer: service(),
+export default class GroupController extends Controller {
+  @service dialog;
+  @service currentUser;
+  @service router;
+  @service composer;
+  @controller application;
 
-  counts: null,
-  showing: "members",
-  destroying: null,
-  showTooltip: false,
+  counts = null;
+  showing = "members";
+  destroying = null;
+  showTooltip = false;
 
   @discourseComputed(
     "showMessages",
@@ -90,7 +90,7 @@ export default Controller.extend({
     );
 
     return defaultTabs;
-  },
+  }
 
   @discourseComputed(
     "model.has_messages",
@@ -107,12 +107,12 @@ export default Controller.extend({
     }
 
     return isGroupUser || (this.currentUser && this.currentUser.admin);
-  },
+  }
 
   @discourseComputed("model.messageable")
   displayGroupMessageButton(messageable) {
     return this.currentUser && messageable;
-  },
+  }
 
   @discourseComputed("model", "model.automatic")
   canManageGroup(model, automatic) {
@@ -121,7 +121,7 @@ export default Controller.extend({
       (this.currentUser.canManageGroup(model) ||
         (model.can_admin_group && automatic))
     );
-  },
+  }
 
   @action
   messageGroup() {
@@ -129,7 +129,7 @@ export default Controller.extend({
       recipients: this.get("model.name"),
       hasGroups: true,
     });
-  },
+  }
 
   @action
   destroyGroup() {
@@ -158,10 +158,10 @@ export default Controller.extend({
       },
       didCancel: () => this.set("destroying", false),
     });
-  },
+  }
 
   @action
   toggleDeleteTooltip() {
     this.toggleProperty("showTooltip");
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/groups-index.js b/app/assets/javascripts/discourse/app/controllers/groups-index.js
index bf978b8f3b1..976ac0eabfb 100644
--- a/app/assets/javascripts/discourse/app/controllers/groups-index.js
+++ b/app/assets/javascripts/discourse/app/controllers/groups-index.js
@@ -6,15 +6,16 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
-export default Controller.extend({
-  router: service(),
-  queryParams: ["order", "asc", "filter", "type"],
-  order: null,
-  asc: null,
-  filter: "",
-  type: null,
-  groups: null,
-  isLoading: false,
+export default class GroupsIndexController extends Controller {
+  @service router;
+
+  queryParams = ["order", "asc", "filter", "type"];
+  order = null;
+  asc = null;
+  filter = "";
+  type = null;
+  groups = null;
+  isLoading = false;
 
   @discourseComputed("groups.extras.type_filters")
   types(typeFilters) {
@@ -27,7 +28,7 @@ export default Controller.extend({
     }
 
     return types;
-  },
+  }
 
   loadGroups(params) {
     this.set("isLoading", true);
@@ -38,24 +39,24 @@ export default Controller.extend({
         this.set("groups", groups);
       })
       .finally(() => this.set("isLoading", false));
-  },
+  }
 
   @action
   onFilterChanged(filter) {
     discourseDebounce(this, this._debouncedFilter, filter, INPUT_DELAY);
-  },
+  }
 
   @action
   loadMore() {
     this.groups && this.groups.loadMore();
-  },
+  }
 
   @action
   new() {
     this.router.transitionTo("groups.new");
-  },
+  }
 
   _debouncedFilter(filter) {
     this.set("filter", filter);
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/groups-new.js b/app/assets/javascripts/discourse/app/controllers/groups-new.js
index fa592b5e1d7..006022900c5 100644
--- a/app/assets/javascripts/discourse/app/controllers/groups-new.js
+++ b/app/assets/javascripts/discourse/app/controllers/groups-new.js
@@ -35,20 +35,21 @@ export function popupAutomaticMembershipAlert(group_id, email_domains) {
   });
 }
 
-export default Controller.extend({
-  dialog: service(),
-  router: service(),
-  saving: null,
+export default class GroupsNewController extends Controller {
+  @service dialog;
+  @service router;
+
+  saving = null;
 
   @discourseComputed("model.ownerUsernames")
   splitOwnerUsernames(owners) {
     return owners && owners.length ? owners.split(",") : [];
-  },
+  }
 
   @discourseComputed("model.usernames")
   splitUsernames(usernames) {
     return usernames && usernames.length ? usernames.split(",") : [];
-  },
+  }
 
   @action
   save() {
@@ -67,15 +68,15 @@ export default Controller.extend({
       })
       .catch(popupAjaxError)
       .finally(() => this.set("saving", false));
-  },
+  }
 
   @action
   updateOwnerUsernames(selected) {
     this.set("model.ownerUsernames", selected.join(","));
-  },
+  }
 
   @action
   updateUsernames(selected) {
     this.set("model.usernames", selected.join(","));
-  },
-});
+  }
+}