DEV: Use `@action` decorator in wizard (#16996)

app/assets/javascripts/wizard/components/invite-list.js

@@ -1,6 +1,7 @@
 import Component from "@ember/component";
 import I18n from "I18n";
 import { schedule } from "@ember/runloop";
+import { action } from "@ember/object";
 
 export default Component.extend({
   classNames: ["invite-list"],
@@ -42,36 +43,36 @@ export default Component.extend({
     this.set("field.warning", showWarning ? "invites.none_added" : null);
   },
 
-  actions: {
-    addUser() {
-      const user = {
-        email: this.inviteEmail || "",
-        role: this.inviteRole,
-      };
+  @action
+  addUser() {
+    const user = {
+      email: this.inviteEmail || "",
+      role: this.inviteRole,
+    };
 
-      if (!/(.+)@(.+){2,}\.(.+){2,}/.test(user.email)) {
-        return this.set("invalid", true);
-      }
+    if (!/(.+)@(.+){2,}\.(.+){2,}/.test(user.email)) {
+      return this.set("invalid", true);
+    }
 
-      const users = this.users;
-      if (users.findBy("email", user.email)) {
-        return this.set("invalid", true);
-      }
+    const users = this.users;
+    if (users.findBy("email", user.email)) {
+      return this.set("invalid", true);
+    }
 
-      this.set("invalid", false);
+    this.set("invalid", false);
 
-      users.pushObject(user);
-      this.updateField();
+    users.pushObject(user);
+    this.updateField();
 
-      this.set("inviteEmail", "");
-      schedule("afterRender", () =>
-        this.element.querySelector(".invite-email").focus()
-      );
-    },
+    this.set("inviteEmail", "");
+    schedule("afterRender", () =>
+      this.element.querySelector(".invite-email").focus()
+    );
+  },
 
-    removeUser(user) {
-      this.users.removeObject(user);
-      this.updateField();
-    },
+  @action
+  removeUser(user) {
+    this.users.removeObject(user);
+    this.updateField();
   },
 });

app/assets/javascripts/wizard/components/styling-preview.js

@@ -5,6 +5,7 @@ import {
 } from "wizard/lib/preview";
 import I18n from "I18n";
 import { bind, observes } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 
 const LOREM = `
 Lorem ipsum dolor sit amet, consectetur adipiscing.
@@ -189,13 +190,13 @@ export default createPreviewComponent(659, 320, {
     ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
   },
 
-  actions: {
-    setPreviewHomepage() {
-      this.set("previewTopic", false);
-    },
+  @action
+  setPreviewHomepage() {
+    this.set("previewTopic", false);
+  },
 
-    setPreviewTopic() {
-      this.set("previewTopic", true);
-    },
+  @action
+  setPreviewTopic() {
+    this.set("previewTopic", true);
   },
 });

app/assets/javascripts/wizard/components/wizard-field-checkboxes.js

@@ -1,5 +1,5 @@
 import Component from "@ember/component";
-import { set } from "@ember/object";
+import { action, set } from "@ember/object";
 
 export default Component.extend({
   init(...args) {
@@ -12,22 +12,22 @@ export default Component.extend({
       }
     }
   },
-  actions: {
-    changed(checkbox) {
-      let newFieldValue = this.field.value;
-      const checkboxValue = checkbox.parentElement
-        .getAttribute("value")
-        .toLowerCase();
 
-      if (checkbox.checked) {
-        newFieldValue.push(checkboxValue);
-      } else {
-        const index = newFieldValue.indexOf(checkboxValue);
-        if (index > -1) {
-          newFieldValue.splice(index, 1);
-        }
+  @action
+  changed(checkbox) {
+    let newFieldValue = this.field.value;
+    const checkboxValue = checkbox.parentElement
+      .getAttribute("value")
+      .toLowerCase();
+
+    if (checkbox.checked) {
+      newFieldValue.push(checkboxValue);
+    } else {
+      const index = newFieldValue.indexOf(checkboxValue);
+      if (index > -1) {
+        newFieldValue.splice(index, 1);
       }
-      this.set("field.value", newFieldValue);
-    },
+    }
+    this.set("field.value", newFieldValue);
   },
 });

app/assets/javascripts/wizard/components/wizard-field-dropdown.js

@@ -1,6 +1,6 @@
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
-import { set } from "@ember/object";
+import { action, set } from "@ember/object";
 
 export default Component.extend({
   init(...args) {
@@ -27,13 +27,12 @@ export default Component.extend({
     e.stopPropagation();
   },
 
-  actions: {
-    onChangeValue(value) {
-      this.set("field.value", value);
+  @action
+  onChangeValue(value) {
+    this.set("field.value", value);
 
-      if (this.field.id === "homepage_style") {
-        this.wizard.trigger("homepageStyleChanged");
-      }
-    },
+    if (this.field.id === "homepage_style") {
+      this.wizard.trigger("homepageStyleChanged");
+    }
   },
 });

app/assets/javascripts/wizard/components/wizard-field-radio.js

@@ -1,8 +1,9 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
+
 export default Component.extend({
-  actions: {
-    changed(value) {
-      this.set("field.value", value);
-    },
+  @action
+  changed(value) {
+    this.set("field.value", value);
   },
 });

app/assets/javascripts/wizard/components/wizard-step.js

@@ -4,6 +4,7 @@ import I18n from "I18n";
 import getUrl from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { schedule } from "@ember/runloop";
+import { action } from "@ember/object";
 
 const alreadyWarned = {};
 
@@ -107,65 +108,67 @@ export default Component.extend({
       .finally(() => this.set("saving", false));
   },
 
-  actions: {
-    quit() {
-      document.location = getUrl("/");
-    },
+  @action
+  quit() {
+    document.location = getUrl("/");
+  },
 
-    exitEarly() {
-      const step = this.step;
-      step.validate();
+  @action
+  exitEarly() {
+    const step = this.step;
+    step.validate();
 
-      if (step.get("valid")) {
-        this.set("saving", true);
+    if (step.get("valid")) {
+      this.set("saving", true);
 
-        step
-          .save()
-          .then(() => this.send("quit"))
-          .finally(() => this.set("saving", false));
-      } else {
-        this.autoFocus();
-      }
-    },
+      step
+        .save()
+        .then(() => this.send("quit"))
+        .finally(() => this.set("saving", false));
+    } else {
+      this.autoFocus();
+    }
+  },
 
-    backStep() {
-      if (this.saving) {
-        return;
-      }
+  @action
+  backStep() {
+    if (this.saving) {
+      return;
+    }
 
-      this.goBack();
-    },
+    this.goBack();
+  },
 
-    nextStep() {
-      if (this.saving) {
-        return;
-      }
+  @action
+  nextStep() {
+    if (this.saving) {
+      return;
+    }
 
-      const step = this.step;
-      const result = step.validate();
+    const step = this.step;
+    const result = step.validate();
 
-      if (result.warnings.length) {
-        const unwarned = result.warnings.filter((w) => !alreadyWarned[w]);
-        if (unwarned.length) {
-          unwarned.forEach((w) => (alreadyWarned[w] = true));
-          return window.bootbox.confirm(
-            unwarned.map((w) => I18n.t(`wizard.${w}`)).join("\n"),
-            I18n.t("no_value"),
-            I18n.t("yes_value"),
-            (confirmed) => {
-              if (confirmed) {
-                this.advance();
-              }
+    if (result.warnings.length) {
+      const unwarned = result.warnings.filter((w) => !alreadyWarned[w]);
+      if (unwarned.length) {
+        unwarned.forEach((w) => (alreadyWarned[w] = true));
+        return window.bootbox.confirm(
+          unwarned.map((w) => I18n.t(`wizard.${w}`)).join("\n"),
+          I18n.t("no_value"),
+          I18n.t("yes_value"),
+          (confirmed) => {
+            if (confirmed) {
+              this.advance();
             }
-          );
-        }
+          }
+        );
       }
+    }
 
-      if (step.get("valid")) {
-        this.advance();
-      } else {
-        this.autoFocus();
-      }
-    },
+    if (step.get("valid")) {
+      this.advance();
+    } else {
+      this.autoFocus();
+    }
   },
 });

app/assets/javascripts/wizard/controllers/step.js

@@ -1,27 +1,29 @@
 import getUrl from "discourse-common/lib/get-url";
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 
 export default Controller.extend({
   wizard: null,
   step: null,
 
-  actions: {
-    goNext(response) {
-      const next = this.get("step.next");
-      if (response && response.refresh_required) {
-        if (this.get("step.id") === "locale") {
-          document.location = getUrl(`/wizard/steps/${next}`);
-          return;
-        } else {
-          this.send("refresh");
-        }
+  @action
+  goNext(response) {
+    const next = this.get("step.next");
+    if (response && response.refresh_required) {
+      if (this.get("step.id") === "locale") {
+        document.location = getUrl(`/wizard/steps/${next}`);
+        return;
+      } else {
+        this.send("refreshRoute");
       }
-      if (response && response.success) {
-        this.transitionToRoute("step", next);
-      }
-    },
-    goBack() {
-      this.transitionToRoute("step", this.get("step.previous"));
-    },
+    }
+    if (response && response.success) {
+      this.transitionToRoute("step", next);
+    }
+  },
+
+  @action
+  goBack() {
+    this.transitionToRoute("step", this.get("step.previous"));
   },
 });

app/assets/javascripts/wizard/routes/application.js

@@ -1,14 +1,14 @@
 import Route from "@ember/routing/route";
 import { findWizard } from "wizard/models/wizard";
+import { action } from "@ember/object";
 
 export default Route.extend({
   model() {
     return findWizard();
   },
 
-  actions: {
-    refresh() {
-      this.refresh();
-    },
+  @action
+  refreshRoute() {
+    this.refresh();
   },
 });