DEV: Refactor Wizard routes, controllers and templates (#24725)

Extracted from https://github.com/discourse/discourse/pull/23678

Co-authored-by: Godfrey Chan <godfreykfc@gmail.com>

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

@@ -1,29 +0,0 @@
-import Controller from "@ember/controller";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-import getUrl from "discourse-common/lib/get-url";
-
-export default Controller.extend({
-  router: service(),
-
-  wizard: null,
-  step: null,
-
-  @action
-  goNext(response) {
-    const next = this.step.next;
-
-    if (response?.refresh_required) {
-      document.location = getUrl(`/wizard/steps/${next}`);
-    } else if (response?.success && next) {
-      this.router.transitionTo("wizard.step", next);
-    } else if (response?.success) {
-      this.router.transitionTo("discovery.latest");
-    }
-  },
-
-  @action
-  goBack() {
-    this.router.transitionTo("wizard.step", this.step.previous);
-  },
-});

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

@@ -1,8 +0,0 @@
-import Controller, { inject as controller } from "@ember/controller";
-
-export default class extends Controller {
-  @controller wizardStep;
-  get showCanvas() {
-    return this.wizardStep.get("step.id") === "ready";
-  }
-}

app/assets/javascripts/wizard/addon/routes/wizard-index.js

@@ -1,10 +1,11 @@
 import { inject as service } from "@ember/service";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
-  router: service(),
+export default class WizardIndexRoute extends DiscourseRoute {
+  @service router;
+
   beforeModel() {
-    const appModel = this.modelFor("wizard");
-    this.router.replaceWith("wizard.step", appModel.start);
-  },
-});
+    const wizard = this.modelFor("wizard");
+    this.router.replaceWith("wizard.step", wizard.start);
+  }
+}

app/assets/javascripts/wizard/addon/routes/wizard-step.js

@@ -1,17 +1,17 @@
+import { inject as service } from "@ember/service";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class WizardStepRoute extends DiscourseRoute {
+  @service router;
+
   model(params) {
-    const allSteps = this.modelFor("wizard").steps;
-    const step = allSteps.findBy("id", params.step_id);
-
-    return step || allSteps[0];
-  },
-
-  setupController(controller, step) {
     const wizard = this.modelFor("wizard");
-    this.controllerFor("wizard").set("currentStepId", step.id);
+    const step = wizard.findStep(params.step_id);
 
-    controller.setProperties({ step, wizard });
-  },
-});
+    if (!step) {
+      this.router.transitionTo("wizard.step", wizard.start);
+    }
+
+    return { wizard, step };
+  }
+}

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

@@ -2,13 +2,13 @@ import Route from "@ember/routing/route";
 import DisableSidebar from "discourse/mixins/disable-sidebar";
 import Wizard from "wizard/models/wizard";
 
-export default Route.extend(DisableSidebar, {
+export default class WizardRoute extends Route.extend(DisableSidebar) {
   model() {
     return Wizard.load();
-  },
+  }
 
   activate() {
-    this._super(...arguments);
+    super.activate(...arguments);
 
     document.body.classList.add("wizard");
 
@@ -16,10 +16,10 @@ export default Route.extend(DisableSidebar, {
       showTop: false,
       showSiteHeader: false,
     });
-  },
+  }
 
   deactivate() {
-    this._super(...arguments);
+    super.deactivate(...arguments);
 
     document.body.classList.remove("wizard");
 
@@ -27,5 +27,5 @@ export default Route.extend(DisableSidebar, {
       showTop: true,
       showSiteHeader: true,
     });
-  },
-});
+  }
+}

app/assets/javascripts/wizard/addon/templates/step.gjs

@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import RouteTemplate from "ember-route-template";
+import getUrl from "discourse-common/lib/get-url";
+import WizardCanvas from "../components/wizard-canvas";
+import WizardStep from "../components/wizard-step";
+
+export default RouteTemplate(
+  class extends Component {
+    @service router;
+
+    <template>
+      {{#if this.showCanvas}}
+        <WizardCanvas />
+      {{/if}}
+
+      <WizardStep
+        @step={{@model.step}}
+        @wizard={{@model.wizard}}
+        @goNext={{this.goNext}}
+        @goBack={{this.goBack}}
+      />
+    </template>
+
+    get step() {
+      return this.args.model.step;
+    }
+
+    get showCanvas() {
+      return this.step.id === "ready";
+    }
+
+    @action
+    goNext(response) {
+      const next = this.step.next;
+
+      if (response?.refresh_required) {
+        document.location = getUrl(`/wizard/steps/${next}`);
+      } else if (response?.success && next) {
+        this.router.transitionTo("wizard.step", next);
+      } else if (response?.success) {
+        this.router.transitionTo("discovery.latest");
+      }
+    }
+
+    @action
+    goBack() {
+      this.router.transitionTo("wizard.step", this.step.previous);
+    }
+  }
+);

app/assets/javascripts/wizard/addon/templates/step.hbs

@@ -1,6 +0,0 @@
-<WizardStep
-  @step={{this.step}}
-  @wizard={{this.wizard}}
-  @goNext={{action "goNext"}}
-  @goBack={{action "goBack"}}
-/>

app/assets/javascripts/wizard/addon/templates/wizard.gjs

@@ -0,0 +1,12 @@
+import RouteTemplate from "ember-route-template";
+import hideApplicationFooter from "discourse/helpers/hide-application-footer";
+import DiscourseLogo from "../components/discourse-logo";
+
+export default RouteTemplate(<template>
+  {{hideApplicationFooter}}
+  <div id="wizard-main">
+    <DiscourseLogo />
+
+    {{outlet}}
+  </div>
+</template>);

app/assets/javascripts/wizard/addon/templates/wizard.hbs

@@ -1,12 +0,0 @@
-{{hide-application-footer}}
-<div id="wizard-main">
-  {{#if this.showCanvas}}
-    <WizardCanvas />
-  {{/if}}
-
-  <div class="discourse-logo">
-    <DiscourseLogo />
-  </div>
-
-  {{outlet}}
-</div>

app/assets/javascripts/wizard/package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "ember-cli-babel": "^8.2.0",
-    "ember-cli-htmlbars": "^6.3.0"
+    "ember-cli-htmlbars": "^6.3.0",
+    "ember-template-imports": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",