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
2025-03-26 08:16:55 +08:00 · 2024-08-23 13:19:26 +01:00 · 2024-08-23 13:19:26 +01:00 · fe6c91daa3
commit fe6c91daa3
parent bb04a1e0d3
14 changed files with 248 additions and 220 deletions
--- a/app/assets/javascripts/discourse/app/components/auth-token-dropdown.js
+++ b/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"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("auth-token-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class AuthTokenDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
    return [
      {
        id: "notYou",
@ -25,18 +26,17 @@ export default DropdownSelectBoxComponent.extend({
        description: "",
      },
    ];
-  }),
+  }

-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "notYou":
-          this.showToken(this.token);
-          break;
-        case "logOut":
-          this.revokeAuthToken(this.token);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "notYou":
+        this.showToken(this.token);
+        break;
+      case "logOut":
+        this.revokeAuthToken(this.token);
+        break;
+    }
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js
+++ b/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"],
-  pluginApiIdentifiers: ["bookmark-actions-dropdown"],
-  selectKitOptions: {
-    icon: null,
-    translatedNone: "...",
-    showFullTitle: true,
-  },
-
+@classNames("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);
    }
-  },
-});
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js
+++ b/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({
-  pluginApiIdentifiers: ["bulk-group-member-dropdown"],
-  classNames: ["bulk-group-member-dropdown"],
-
-  selectKitOptions: {
-    icon: "cog",
-    showFullTitle: false,
-  },
-
-  content: computed("bulkSelection.[]", function () {
+@classNames("bulk-group-member-dropdown")
+@selectKitOptions({
+  icon: "cog",
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("bulk-group-member-dropdown")
+export default class BulkGroupMemberDropdown extends DropdownSelectBoxComponent {
+  @computed("bulkSelection.[]")
+  get content() {
    const items = [];

    items.push({
@ -60,5 +64,5 @@ export default DropdownSelectBoxComponent.extend({
    }

    return items;
-  }),
-});
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/email-dropdown.js
+++ b/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({
-  router: service(),
+@classNames("email-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class EmailDropdown extends DropdownSelectBoxComponent {
+  @service router;

-  classNames: ["email-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  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;
    }
-  },
-});
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/group-member-dropdown.js
+++ b/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({
-  pluginApiIdentifiers: ["group-member-dropdown"],
-  classNames: ["group-member-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed("member.owner", "member.primary", function () {
+@classNames("group-member-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("group-member-dropdown")
+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;
-  }),
-});
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/security-key-dropdown.js
+++ b/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"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("security-key-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class SecurityKeyDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
    const content = [];

    content.push({
@ -26,18 +27,17 @@ export default DropdownSelectBoxComponent.extend({
    });

    return content;
-  }),
+  }

-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecurityKey(this.securityKey);
-          break;
-        case "disable":
-          this.disableSingleSecondFactor(this.securityKey);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecurityKey(this.securityKey);
+        break;
+      case "disable":
+        this.disableSingleSecondFactor(this.securityKey);
+        break;
+    }
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js
+++ b/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({
-  pluginApiIdentifiers: ["tags-admin-dropdown"],
-  classNames: ["tags-admin-dropdown"],
-  actionsMapping: null,
+@classNames("tags-admin-dropdown")
+@selectKitOptions({
+  icons: ["wrench", "caret-down"],
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("tags-admin-dropdown")
+export default class TagsAdminDropdown extends DropdownSelectBoxComponent {
+  actionsMapping = null;

-  selectKitOptions: {
-    icons: ["wrench", "caret-down"],
-    showFullTitle: false,
-  },
-
-  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]?.();
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js
+++ b/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"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("token-based-auth-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class TokenBasedAuthDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
    return [
      {
        id: "edit",
@ -23,18 +24,17 @@ export default DropdownSelectBoxComponent.extend({
        name: I18n.t("user.second_factor.disable"),
      },
    ];
-  }),
+  }

-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecondFactor(this.totp);
-          break;
-        case "disable":
-          this.disableSingleSecondFactor(this.totp);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecondFactor(this.totp);
+        break;
+      case "disable":
+        this.disableSingleSecondFactor(this.totp);
+        break;
+    }
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js
+++ b/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"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("two-factor-backup-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class TwoFactorBackupDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
    const content = [];

    content.push({
@ -28,18 +29,17 @@ export default DropdownSelectBoxComponent.extend({
    }

    return content;
-  }),
+  }

-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecondFactorBackup();
-          break;
-        case "disable":
-          this.disableSecondFactorBackup();
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecondFactorBackup();
+        break;
+      case "disable":
+        this.disableSecondFactorBackup();
+        break;
+    }
+  }
+}
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js
+++ b/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({
-  pluginApiIdentifiers: ["user-nav-messages-dropdown"],
-  classNames: ["user-nav-messages-dropdown"],
-
-  selectKitOptions: {
-    caretDownIcon: "caret-right",
-    caretUpIcon: "caret-down",
-  },
-});
+@classNames("user-nav-messages-dropdown")
+@selectKitOptions({
+  caretDownIcon: "caret-right",
+  caretUpIcon: "caret-down",
+})
+@pluginApiIdentifiers("user-nav-messages-dropdown")
+export default class MessagesDropdown extends ComboBoxComponent {}
--- a/app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js
+++ b/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"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("passkey-options-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class PasskeyOptionsDropdown extends DropdownSelectBoxComponent {
+  @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;
    }
-  },
-});
+  }
+}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser.js
+++ b/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({
-  pluginApiIdentifiers: ["chat-channel-chooser"],
-  classNames: ["chat-channel-chooser"],
-
-  selectKitOptions: {
-    headerComponent: "chat-channel-chooser-header",
-  },
-
+@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";
-  },
-});
+  }
+}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js
+++ b/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({
-  pluginApiIdentifiers: ["thread-notifications-button"],
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
-    i18nPrefix: "chat.thread.notifications",
-    showFullTitle: false,
-    btnCustomClasses: "btn-flat",
-  },
-});
+@classNames("thread-notifications-button")
+@selectKitOptions({
+  i18nPrefix: "chat.thread.notifications",
+  showFullTitle: false,
+  btnCustomClasses: "btn-flat",
+})
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ChatThreadTrackingDropdown extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}
--- a/plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js
+++ b/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({
-  pluginApiIdentifiers: ["thread-notifications-button"],
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
-    i18nPrefix: "chat.thread.notifications",
-    showFullTitle: false,
-    btnCustomClasses: "btn-flat",
-  },
-});
+@classNames("thread-notifications-button")
+@selectKitOptions({
+  i18nPrefix: "chat.thread.notifications",
+  showFullTitle: false,
+  btnCustomClasses: "btn-flat",
+})
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ThreadNotificationsButton extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}