DEV: Convert to native class syntax (#981)

Author: davidtaylorhq

admin/assets/javascripts/discourse/routes/admin-plugins-show-discourse-ai-llms-new.js

@@ -1,18 +1,18 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
-  queryParams: {
+export default class AdminPluginsShowDiscourseAiLlmsNew extends DiscourseRoute {
+  queryParams = {
     llmTemplate: { refreshModel: true },
-  },
+  };
 
   async model() {
     const record = this.store.createRecord("ai-llm");
     record.provider_params = {};
     return record;
-  },
+  }
 
   setupController(controller, model) {
-    this._super(controller, model);
+    super.setupController(controller, model);
     controller.set(
       "allLlms",
       this.modelFor("adminPlugins.show.discourse-ai-llms")
@@ -21,5 +21,5 @@ export default DiscourseRoute.extend({
       "llmTemplate",
       this.paramsFor(this.routeName).llmTemplate || null
     );
-  },
-});
+  }
+}

admin/assets/javascripts/discourse/routes/admin-plugins-show-discourse-ai-llms-show.js

@@ -1,19 +1,19 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsShowDiscourseAiLlmsShow extends DiscourseRoute {
   async model(params) {
     const allLlms = this.modelFor("adminPlugins.show.discourse-ai-llms");
     const id = parseInt(params.id, 10);
     const record = allLlms.findBy("id", id);
     record.provider_params = record.provider_params || {};
     return record;
-  },
+  }
 
   setupController(controller, model) {
-    this._super(controller, model);
+    super.setupController(controller, model);
     controller.set(
       "allLlms",
       this.modelFor("adminPlugins.show.discourse-ai-llms")
     );
-  },
-});
+  }
+}

admin/assets/javascripts/discourse/routes/admin-plugins-show-discourse-ai-personas-new.js

@@ -1,7 +1,7 @@
 import { AUTO_GROUPS } from "discourse/lib/constants";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsShowDiscourseAiPersonasNew extends DiscourseRoute {
   async model() {
     const record = this.store.createRecord("ai-persona");
     record.set("allowed_group_ids", [AUTO_GROUPS.trust_level_0.id]);
@@ -13,13 +13,13 @@ export default DiscourseRoute.extend({
     record.set("allow_personal_messages", true);
     record.set("tool_details", false);
     return record;
-  },
+  }
 
   setupController(controller, model) {
-    this._super(controller, model);
+    super.setupController(controller, model);
     controller.set(
       "allPersonas",
       this.modelFor("adminPlugins.show.discourse-ai-personas")
     );
-  },
-});
+  }
+}

admin/assets/javascripts/discourse/routes/admin-plugins-show-discourse-ai-personas-show.js

@@ -1,19 +1,19 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsShowDiscourseAiPersonasShow extends DiscourseRoute {
   async model(params) {
     const allPersonas = this.modelFor(
       "adminPlugins.show.discourse-ai-personas"
     );
     const id = parseInt(params.id, 10);
     return allPersonas.findBy("id", id);
-  },
+  }
 
   setupController(controller, model) {
-    this._super(controller, model);
+    super.setupController(controller, model);
     controller.set(
       "allPersonas",
       this.modelFor("adminPlugins.show.discourse-ai-personas")
     );
-  },
-});
+  }
+}

assets/javascripts/discourse/components/ai-llm-selector.js

@@ -1,22 +1,25 @@
-import { computed, observer } from "@ember/object";
+import { computed } from "@ember/object";
+import { observes } from "@ember-decorators/object";
 import I18n from "discourse-i18n";
 import ComboBox from "select-kit/components/combo-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default ComboBox.extend({
-  _modelDisabledChanged: observer("attrs.disabled", function () {
+@selectKitOptions({
+  filterable: true,
+})
+export default class AiLlmSelector extends ComboBox {
+  @observes("attrs.disabled")
+  _modelDisabledChanged() {
     this.selectKit.options.set("disabled", this.get("attrs.disabled.value"));
-  }),
+  }
 
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "blank",
         name: I18n.t("discourse_ai.ai_persona.no_llm_selected"),
       },
     ].concat(this.llms);
-  }),
-
-  selectKitOptions: {
-    filterable: true,
-  },
-});
+  }
+}

assets/javascripts/discourse/components/ai-tool-selector.js

@@ -1,17 +1,18 @@
-import { observer } from "@ember/object";
 import { readOnly } from "@ember/object/computed";
+import { observes } from "@ember-decorators/object";
 import MultiSelectComponent from "select-kit/components/multi-select";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default MultiSelectComponent.extend({
-  _modelDisabledChanged: observer("attrs.disabled", function () {
-    this.selectKit.options.set("disabled", this.get("attrs.disabled.value"));
-  }),
-
-  content: readOnly("tools"),
+@selectKitOptions({
+  filterable: true,
+})
+export default class AiToolSelector extends MultiSelectComponent {
+  @readOnly("tools") content;
 
-  value: "",
+  value = "";
 
-  selectKitOptions: {
-    filterable: true,
-  },
-});
+  @observes("attrs.disabled")
+  _modelDisabledChanged() {
+    this.selectKit.options.set("disabled", this.get("attrs.disabled.value"));
+  }
+}