UX: shows a save changes for intermediate steps (#6612)

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

@@ -40,6 +40,16 @@ export default Ember.Component.extend({
   @computed("step.displayIndex", "wizard.totalSteps")
   showDoneButton: (current, total) => current === total,
 
+  @computed(
+    "step.index",
+    "step.displayIndex",
+    "wizard.totalSteps",
+    "wizard.completed"
+  )
+  showFinishButton: (index, displayIndex, total, completed) => {
+    return index !== 0 && displayIndex !== total && completed;
+  },
+
   @computed("step.index")
   showBackButton: index => index > 0,
 
@@ -112,6 +122,24 @@ export default Ember.Component.extend({
       document.location = getUrl("/");
     },
 
+    exitEarly() {
+      const step = this.get("step");
+      step.validate();
+
+      if (step.get("valid")) {
+        this.set("saving", true);
+
+        step
+          .save()
+          .then(() => this.send("quit"))
+          .catch(() => this.animateInvalidFields())
+          .finally(() => this.set("saving", false));
+      } else {
+        this.animateInvalidFields();
+        this.autoFocus();
+      }
+    },
+
     backStep() {
       if (this.get("saving")) {
         return;

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

@@ -43,6 +43,12 @@
       </button>
     {{/if}}
 
+    {{#if showFinishButton}}
+      <button class='wizard-btn finish' {{action "exitEarly"}} disabled={{saving}} tabindex="10">
+        {{i18n "save"}}
+      </button>
+    {{/if}}
+
     {{#if showDoneButton}}
       <button class='wizard-btn done' {{action "quit"}} disabled={{saving}} tabindex="10">
         {{i18n "wizard.done"}}

app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6

@@ -24,7 +24,7 @@ test("Going back and forth in steps", async assert => {
     exists(".wizard-step-hello-world"),
     "it adds a class for the step id"
   );
-
+  assert.ok(!exists(".wizard-btn.finish"), "can’t finish on first step");
   assert.ok(exists(".wizard-progress"));
   assert.ok(exists(".wizard-step-title"));
   assert.ok(exists(".wizard-step-description"));
@@ -50,15 +50,19 @@ test("Going back and forth in steps", async assert => {
   await fillIn("input.field-full-name", "Evil Trout");
   await click(".wizard-btn.next");
   assert.ok(!exists(".wizard-field .field-error-description"));
-  assert.ok(!exists(".wizard-step-title"));
   assert.ok(!exists(".wizard-step-description"));
+  assert.ok(
+    exists(".wizard-btn.finish"),
+    "shows finish on an intermediate step"
+  );
 
+  await click(".wizard-btn.next");
   assert.ok(exists(".select-kit.field-snack"), "went to the next step");
   assert.ok(exists(".preview-area"), "renders the component field");
-
-  assert.ok(!exists(".wizard-btn.next"));
   assert.ok(exists(".wizard-btn.done"), "last step shows a done button");
   assert.ok(exists(".action-link.back"), "shows the back button");
+  assert.ok(!exists(".wizard-step-title"));
+  assert.ok(!exists(".wizard-btn.finish"), "can’t finish on last step");
 
   await click(".action-link.back");
   assert.ok(exists(".wizard-step-title"));

app/assets/javascripts/wizard/test/wizard-pretender.js.es6

@@ -33,6 +33,7 @@ export default function() {
       return response(200, {
         wizard: {
           start: "hello-world",
+          completed: true,
           steps: [
             {
               id: "hello-world",
@@ -51,13 +52,21 @@ export default function() {
             },
             {
               id: "second-step",
+              title: "Second step",
               index: 1,
+              fields: [{ id: "some-title", type: "text" }],
+              previous: "hello-world",
+              next: "last-step"
+            },
+            {
+              id: "last-step",
+              index: 2,
               fields: [
                 { id: "snack", type: "dropdown", required: true },
                 { id: "theme-preview", type: "component" },
                 { id: "an-image", type: "image" }
               ],
-              previous: "hello-world"
+              previous: "second-step"
             }
           ]
         }

app/assets/stylesheets/wizard.scss

@@ -370,7 +370,8 @@ body.wizard {
       margin-right: 0;
     }
 
-    button.wizard-btn.done {
+    button.wizard-btn.done,
+    button.wizard-btn.finish {
       color: #fff;
       background-color: #33b333;
 

app/serializers/wizard_serializer.rb

@@ -1,9 +1,13 @@
 class WizardSerializer < ApplicationSerializer
-  attributes :start
+  attributes :start, :completed
 
   has_many :steps, serializer: WizardStepSerializer, embed: :objects
 
   def start
     object.start.id
   end
+
+  def completed
+    object.completed?
+  end
 end