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({
-
+  icon: "wrench",
-  selectKitOptions: {
+  showFullTitle: false,
-    icon: "wrench",
+})
-    showFullTitle: false,
+export default class AuthTokenDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed
-
+  get content() {
-  content: computed(function () {
     return [
       {
         id: "notYou",
@@ -25,18 +26,17 @@ export default DropdownSelectBoxComponent.extend({
         description: "",
       },
     ];
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(id) {
+  onChange(id) {
-      switch (id) {
+    switch (id) {
-        case "notYou":
+      case "notYou":
-          this.showToken(this.token);
+        this.showToken(this.token);
-          break;
+        break;
-        case "logOut":
+      case "logOut":
-          this.revokeAuthToken(this.token);
+        this.revokeAuthToken(this.token);
-          break;
+        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"],
+  icon: null,
-  selectKitOptions: {
+  translatedNone: "...",
-    icon: null,
+  showFullTitle: true,
-    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"],
+  icon: "cog",
-
+  showFullTitle: false,
-  selectKitOptions: {
+})
-    icon: "cog",
+@pluginApiIdentifiers("bulk-group-member-dropdown")
-    showFullTitle: false,
+export default class BulkGroupMemberDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed("bulkSelection.[]")
-
+  get content() {
-  content: computed("bulkSelection.[]", function () {
     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({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class EmailDropdown extends DropdownSelectBoxComponent {
+  @service router;
 
-  classNames: ["email-dropdown"],
+  @computed("email")
-
+  get content() {
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed("email", function () {
     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"],
+  icon: "wrench",
-
+  showFullTitle: false,
-  selectKitOptions: {
+})
-    icon: "wrench",
+@pluginApiIdentifiers("group-member-dropdown")
-    showFullTitle: false,
+export default class GroupMemberDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed("member.owner", "member.primary")
-
+  get content() {
-  content: computed("member.owner", "member.primary", function () {
     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({
-
+  icon: "wrench",
-  selectKitOptions: {
+  showFullTitle: false,
-    icon: "wrench",
+})
-    showFullTitle: false,
+export default class SecurityKeyDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed
-
+  get content() {
-  content: computed(function () {
     const content = [];
 
     content.push({
@@ -26,18 +27,17 @@ export default DropdownSelectBoxComponent.extend({
     });
 
     return content;
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(id) {
+  onChange(id) {
-      switch (id) {
+    switch (id) {
-        case "edit":
+      case "edit":
-          this.editSecurityKey(this.securityKey);
+        this.editSecurityKey(this.securityKey);
-          break;
+        break;
-        case "disable":
+      case "disable":
-          this.disableSingleSecondFactor(this.securityKey);
+        this.disableSingleSecondFactor(this.securityKey);
-          break;
+        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"],
+  icons: ["wrench", "caret-down"],
-  actionsMapping: null,
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("tags-admin-dropdown")
+export default class TagsAdminDropdown extends DropdownSelectBoxComponent {
+  actionsMapping = null;
 
-  selectKitOptions: {
+  @computed
-    icons: ["wrench", "caret-down"],
+  get content() {
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
     return [
       {
         id: "manageGroups",
@@ -33,15 +38,10 @@ export default DropdownSelectBoxComponent.extend({
         icon: "trash-alt",
       },
     ];
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(id) {
+  onChange(id) {
-      const action = this.actionsMapping[id];
+    this.actionsMapping[id]?.();
-
+  }
-      if (action) {
+}
-        action();
-      }
-    },
-  },
-});

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({
-
+  icon: "wrench",
-  selectKitOptions: {
+  showFullTitle: false,
-    icon: "wrench",
+})
-    showFullTitle: false,
+export default class TokenBasedAuthDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed
-
+  get content() {
-  content: computed(function () {
     return [
       {
         id: "edit",
@@ -23,18 +24,17 @@ export default DropdownSelectBoxComponent.extend({
         name: I18n.t("user.second_factor.disable"),
       },
     ];
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(id) {
+  onChange(id) {
-      switch (id) {
+    switch (id) {
-        case "edit":
+      case "edit":
-          this.editSecondFactor(this.totp);
+        this.editSecondFactor(this.totp);
-          break;
+        break;
-        case "disable":
+      case "disable":
-          this.disableSingleSecondFactor(this.totp);
+        this.disableSingleSecondFactor(this.totp);
-          break;
+        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({
-
+  icon: "wrench",
-  selectKitOptions: {
+  showFullTitle: false,
-    icon: "wrench",
+})
-    showFullTitle: false,
+export default class TwoFactorBackupDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed
-
+  get content() {
-  content: computed(function () {
     const content = [];
 
     content.push({
@@ -28,18 +29,17 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return content;
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(id) {
+  onChange(id) {
-      switch (id) {
+    switch (id) {
-        case "edit":
+      case "edit":
-          this.editSecondFactorBackup();
+        this.editSecondFactorBackup();
-          break;
+        break;
-        case "disable":
+      case "disable":
-          this.disableSecondFactorBackup();
+        this.disableSecondFactorBackup();
-          break;
+        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"],
+  caretDownIcon: "caret-right",
-
+  caretUpIcon: "caret-down",
-  selectKitOptions: {
+})
-    caretDownIcon: "caret-right",
+@pluginApiIdentifiers("user-nav-messages-dropdown")
-    caretUpIcon: "caret-down",
+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({
-
+  icon: "wrench",
-  selectKitOptions: {
+  showFullTitle: false,
-    icon: "wrench",
+})
-    showFullTitle: false,
+export default class PasskeyOptionsDropdown extends DropdownSelectBoxComponent {
-  },
+  @computed
-
+  get content() {
-  content: computed(function () {
     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"],
+  headerComponent: "chat-channel-chooser-header",
-
+})
-  selectKitOptions: {
+@pluginApiIdentifiers("chat-channel-chooser")
-    headerComponent: "chat-channel-chooser-header",
+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"],
+  i18nPrefix: "chat.thread.notifications",
-  content: threadNotificationButtonLevels,
+  showFullTitle: false,
-
+  btnCustomClasses: "btn-flat",
-  selectKitOptions: {
+})
-    i18nPrefix: "chat.thread.notifications",
+@pluginApiIdentifiers("thread-notifications-button")
-    showFullTitle: false,
+export default class ChatThreadTrackingDropdown extends NotificationsButtonComponent {
-    btnCustomClasses: "btn-flat",
+  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"],
+  i18nPrefix: "chat.thread.notifications",
-  content: threadNotificationButtonLevels,
+  showFullTitle: false,
-
+  btnCustomClasses: "btn-flat",
-  selectKitOptions: {
+})
-    i18nPrefix: "chat.thread.notifications",
+@pluginApiIdentifiers("thread-notifications-button")
-    showFullTitle: false,
+export default class ThreadNotificationsButton extends NotificationsButtonComponent {
-    btnCustomClasses: "btn-flat",
+  content = threadNotificationButtonLevels;
-  },
+}
-});