DEV: Convert select-kit subclasses to native class syntax (#28491)

This covers all select-kit subclasses in core and core plugins

Followup to https://github.com/discourse/discourse/pull/28489

app/assets/javascripts/discourse/app/components/auth-token-dropdown.js

@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("auth-token-dropdown")
-  classNames: ["auth-token-dropdown"],
+@selectKitOptions({
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+export default class AuthTokenDropdown extends DropdownSelectBoxComponent {
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "notYou",
@@ -25,9 +26,9 @@ export default DropdownSelectBoxComponent.extend({
         description: "",
       },
     ];
-  }),
+  }
 
-  actions: {
+  @action
   onChange(id) {
     switch (id) {
       case "notYou":
@@ -37,6 +38,5 @@ export default DropdownSelectBoxComponent.extend({
         this.revokeAuthToken(this.token);
         break;
     }
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js

@@ -1,22 +1,26 @@
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
 const ACTION_REMOVE = "remove";
 const ACTION_EDIT = "edit";
 const ACTION_CLEAR_REMINDER = "clear_reminder";
 const ACTION_PIN = "pin";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("bookmark-actions-dropdown")
-  classNames: ["bookmark-actions-dropdown"],
+@selectKitOptions({
-  pluginApiIdentifiers: ["bookmark-actions-dropdown"],
-  selectKitOptions: {
   icon: null,
   translatedNone: "...",
   showFullTitle: true,
-  },
+})
-
+@pluginApiIdentifiers("bookmark-actions-dropdown")
+export default class BookmarkActionsDropdown extends DropdownSelectBoxComponent {
   @discourseComputed("bookmark")
   content(bookmark) {
     const actions = [];
@@ -58,7 +62,7 @@ export default DropdownSelectBoxComponent.extend({
     });
 
     return actions;
-  },
+  }
 
   @action
   onChange(selectedAction) {
@@ -71,5 +75,5 @@ export default DropdownSelectBoxComponent.extend({
     } else if (selectedAction === ACTION_PIN) {
       this.togglePinBookmark(this.bookmark);
     }
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js

@@ -1,17 +1,21 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("bulk-group-member-dropdown")
-  pluginApiIdentifiers: ["bulk-group-member-dropdown"],
+@selectKitOptions({
-  classNames: ["bulk-group-member-dropdown"],
-
-  selectKitOptions: {
   icon: "cog",
   showFullTitle: false,
-  },
+})
-
+@pluginApiIdentifiers("bulk-group-member-dropdown")
-  content: computed("bulkSelection.[]", function () {
+export default class BulkGroupMemberDropdown extends DropdownSelectBoxComponent {
+  @computed("bulkSelection.[]")
+  get content() {
     const items = [];
 
     items.push({
@@ -60,5 +64,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  }),
+  }
-});
+}

app/assets/javascripts/discourse/app/components/email-dropdown.js

@@ -1,19 +1,20 @@
 import { action, computed } from "@ember/object";
 import { service } from "@ember/service";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("email-dropdown")
-  router: service(),
+@selectKitOptions({
-
-  classNames: ["email-dropdown"],
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
+export default class EmailDropdown extends DropdownSelectBoxComponent {
+  @service router;
 
-  content: computed("email", function () {
+  @computed("email")
+  get content() {
     const content = [];
 
     if (this.email.primary) {
@@ -44,7 +45,7 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return content;
-  }),
+  }
 
   @action
   onChange(id) {
@@ -59,5 +60,5 @@ export default DropdownSelectBoxComponent.extend({
         this.destroyEmail(this.email.email);
         break;
     }
-  },
+  }
-});
+}

app/assets/javascripts/discourse/app/components/group-member-dropdown.js

@@ -1,17 +1,21 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("group-member-dropdown")
-  pluginApiIdentifiers: ["group-member-dropdown"],
+@selectKitOptions({
-  classNames: ["group-member-dropdown"],
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+@pluginApiIdentifiers("group-member-dropdown")
-  content: computed("member.owner", "member.primary", function () {
+export default class GroupMemberDropdown extends DropdownSelectBoxComponent {
+  @computed("member.owner", "member.primary")
+  get content() {
     const items = [
       {
         id: "removeMember",
@@ -77,5 +81,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  }),
+  }
-});
+}

app/assets/javascripts/discourse/app/components/security-key-dropdown.js

@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("security-key-dropdown")
-  classNames: ["security-key-dropdown"],
+@selectKitOptions({
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+export default class SecurityKeyDropdown extends DropdownSelectBoxComponent {
-  content: computed(function () {
+  @computed
+  get content() {
     const content = [];
 
     content.push({
@@ -26,9 +27,9 @@ export default DropdownSelectBoxComponent.extend({
     });
 
     return content;
-  }),
+  }
 
-  actions: {
+  @action
   onChange(id) {
     switch (id) {
       case "edit":
@@ -38,6 +39,5 @@ export default DropdownSelectBoxComponent.extend({
         this.disableSingleSecondFactor(this.securityKey);
         break;
     }
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js

@@ -1,18 +1,23 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("tags-admin-dropdown")
-  pluginApiIdentifiers: ["tags-admin-dropdown"],
+@selectKitOptions({
-  classNames: ["tags-admin-dropdown"],
-  actionsMapping: null,
-
-  selectKitOptions: {
   icons: ["wrench", "caret-down"],
   showFullTitle: false,
-  },
+})
+@pluginApiIdentifiers("tags-admin-dropdown")
+export default class TagsAdminDropdown extends DropdownSelectBoxComponent {
+  actionsMapping = null;
 
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "manageGroups",
@@ -33,15 +38,10 @@ export default DropdownSelectBoxComponent.extend({
         icon: "trash-alt",
       },
     ];
-  }),
-
-  actions: {
-    onChange(id) {
-      const action = this.actionsMapping[id];
-
-      if (action) {
-        action();
   }
-    },
+
-  },
+  @action
-});
+  onChange(id) {
+    this.actionsMapping[id]?.();
+  }
+}

app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js

@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("token-based-auth-dropdown")
-  classNames: ["token-based-auth-dropdown"],
+@selectKitOptions({
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+export default class TokenBasedAuthDropdown extends DropdownSelectBoxComponent {
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "edit",
@@ -23,9 +24,9 @@ export default DropdownSelectBoxComponent.extend({
         name: I18n.t("user.second_factor.disable"),
       },
     ];
-  }),
+  }
 
-  actions: {
+  @action
   onChange(id) {
     switch (id) {
       case "edit":
@@ -35,6 +36,5 @@ export default DropdownSelectBoxComponent.extend({
         this.disableSingleSecondFactor(this.totp);
         break;
     }
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js

@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("two-factor-backup-dropdown")
-  classNames: ["two-factor-backup-dropdown"],
+@selectKitOptions({
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+export default class TwoFactorBackupDropdown extends DropdownSelectBoxComponent {
-  content: computed(function () {
+  @computed
+  get content() {
     const content = [];
 
     content.push({
@@ -28,9 +29,9 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return content;
-  }),
+  }
 
-  actions: {
+  @action
   onChange(id) {
     switch (id) {
       case "edit":
@@ -40,6 +41,5 @@ export default DropdownSelectBoxComponent.extend({
         this.disableSecondFactorBackup();
         break;
     }
-    },
+  }
-  },
+}
-});

app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js

@@ -1,11 +1,14 @@
+import { classNames } from "@ember-decorators/component";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
+@classNames("user-nav-messages-dropdown")
-  pluginApiIdentifiers: ["user-nav-messages-dropdown"],
+@selectKitOptions({
-  classNames: ["user-nav-messages-dropdown"],
-
-  selectKitOptions: {
   caretDownIcon: "caret-right",
   caretUpIcon: "caret-down",
-  },
+})
-});
+@pluginApiIdentifiers("user-nav-messages-dropdown")
+export default class MessagesDropdown extends ComboBoxComponent {}

app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js

@@ -1,16 +1,17 @@
 import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
+@classNames("passkey-options-dropdown")
-  classNames: ["passkey-options-dropdown"],
+@selectKitOptions({
-
-  selectKitOptions: {
   icon: "wrench",
   showFullTitle: false,
-  },
+})
-
+export default class PasskeyOptionsDropdown extends DropdownSelectBoxComponent {
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "edit",
@@ -23,7 +24,7 @@ export default DropdownSelectBoxComponent.extend({
         name: I18n.t("user.second_factor.delete"),
       },
     ];
-  }),
+  }
 
   @action
   onChange(id) {
@@ -35,5 +36,5 @@ export default DropdownSelectBoxComponent.extend({
         this.deletePasskey();
         break;
     }
-  },
+  }
-});
+}

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

@@ -1,14 +1,17 @@
+import { classNames } from "@ember-decorators/component";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
+@classNames("chat-channel-chooser")
-  pluginApiIdentifiers: ["chat-channel-chooser"],
+@selectKitOptions({
-  classNames: ["chat-channel-chooser"],
-
-  selectKitOptions: {
   headerComponent: "chat-channel-chooser-header",
-  },
+})
-
+@pluginApiIdentifiers("chat-channel-chooser")
+export default class ChatChannelChooser extends ComboBoxComponent {
   modifyComponentForRow() {
     return "chat-channel-chooser-row";
-  },
+  }
-});
+}

plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js

@@ -1,14 +1,18 @@
+import { classNames } from "@ember-decorators/component";
 import NotificationsButtonComponent from "select-kit/components/notifications-button";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 import { threadNotificationButtonLevels } from "discourse/plugins/chat/discourse/lib/chat-notification-levels";
 
-export default NotificationsButtonComponent.extend({
+@classNames("thread-notifications-button")
-  pluginApiIdentifiers: ["thread-notifications-button"],
+@selectKitOptions({
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
   i18nPrefix: "chat.thread.notifications",
   showFullTitle: false,
   btnCustomClasses: "btn-flat",
-  },
+})
-});
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ChatThreadTrackingDropdown extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}

plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js

@@ -1,14 +1,18 @@
+import { classNames } from "@ember-decorators/component";
 import NotificationsButtonComponent from "select-kit/components/notifications-button";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 import { threadNotificationButtonLevels } from "discourse/plugins/chat/discourse/lib/chat-notification-levels";
 
-export default NotificationsButtonComponent.extend({
+@classNames("thread-notifications-button")
-  pluginApiIdentifiers: ["thread-notifications-button"],
+@selectKitOptions({
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
   i18nPrefix: "chat.thread.notifications",
   showFullTitle: false,
   btnCustomClasses: "btn-flat",
-  },
+})
-});
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ThreadNotificationsButton extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}