FIX: "Exit setup" link should exit the wizard and take user to homepage (#18182)

app/assets/javascripts/discourse/tests/acceptance/wizard-test.js

@@ -62,6 +62,15 @@ acceptance("Wizard", function (needs) {
       "shows finish on an intermediate step"
     );
 
+    await click(".wizard-container__button.finish");
+    assert.strictEqual(
+      currentURL(),
+      "/latest",
+      "it should transition to the homepage"
+    );
+
+    await visit("/wizard/steps/styling");
+
     await click(".wizard-container__button.next");
     assert.ok(
       exists(".wizard-container__text-input#company_name"),

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

@@ -41,22 +41,22 @@ export default Component.extend({
 
   @discourseComputed("step.id")
   showJumpInButton(step) {
-    return step === "ready";
+    return ["ready", "styling", "branding"].includes(step);
+  },
+
+  @discourseComputed("step.id")
+  jumpInButtonLabel(step) {
+    return `wizard.${step === "ready" ? "jump_in" : "finish"}`;
+  },
+
+  @discourseComputed("step.id")
+  jumpInButtonClass(step) {
+    return step === "ready" ? "jump-in" : "finish";
   },
 
   @discourseComputed("step.id")
   showFinishButton(step) {
-    return ["styling", "branding", "corporate"].includes(step);
-  },
-
-  @discourseComputed("step.id")
-  finishButtonLabel(step) {
-    return `wizard.${step === "corporate" ? "jump_in" : "finish"}`;
-  },
-
-  @discourseComputed("step.id")
-  finishButtonClass(step) {
-    return step === "corporate" ? "jump-in" : "finish";
+    return step === "corporate";
   },
 
   @discourseComputed("step.id")

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

@@ -39,15 +39,8 @@
 </div>
 
 <div class="wizard-container__step-footer">
-
   <div class="wizard-container__buttons">
 
-    {{#if this.showJumpInButton}}
-      <button {{action "quit"}} disabled={{this.saving}} type="button" class="wizard-container__button jump-in">
-        {{i18n "wizard.jump_in"}}
-      </button>
-    {{/if}}
-
     {{#if this.showNextButton}}
       <button {{action "nextStep"}} disabled={{this.saving}} type="button" class="wizard-container__button primary {{this.nextButtonClass}}">
         {{i18n this.nextButtonLabel}}
@@ -55,11 +48,16 @@
     {{/if}}
 
     {{#if this.showFinishButton}}
-      <button {{action "exitEarly"}} disabled={{this.saving}} type="button" class="wizard-container__button {{this.finishButtonClass}}">
-        {{i18n this.finishButtonLabel}}
+      <button {{action "exitEarly"}} disabled={{this.saving}} type="button" class="wizard-container__button jump-in">
+        {{i18n "wizard.jump_in"}}
       </button>
     {{/if}}
 
+    {{#if this.showJumpInButton}}
+      <button {{action "quit"}} disabled={{this.saving}} type="button" class="wizard-container__button {{this.jumpInButtonClass}}">
+        {{i18n this.jumpInButtonLabel}}
+      </button>
+    {{/if}}
   </div>
 
   <div class="wizard-container__step-progress">

app/assets/stylesheets/wizard.scss

@@ -335,6 +335,9 @@ body.wizard {
         display: none;
       }
     }
+    .wizard-container__buttons {
+      flex-direction: row-reverse;
+    }
   }
 
   &__step.branding .wizard-container__description {