Add a confirmation loading state to the two-step-button component

ui/app/components/two-step-button.js

@@ -8,6 +8,7 @@ export default Component.extend({
   cancelText: '',
   confirmText: '',
   confirmationMessage: '',
+  awaitingConfirmation: false,
   onConfirm() {},
   onCancel() {},
 

ui/app/templates/components/freestyle/sg-two-step-button.hbs

@@ -20,3 +20,21 @@
   </h1>
 </div>
 {{/freestyle-usage}}
+
+{{#freestyle-usage "two-step-button-loading" title="Two Step Button Loading State"}}
+  <div class="mock-spacing">
+    <h1 class="title">
+    This is a page title
+    {{two-step-button
+      idleText="Scary Action"
+      cancelText="Nvm"
+      confirmText="Yep"
+      confirmationMessage="Wait, really? Like...seriously?"
+      awaitingConfirmation=true
+      state="prompt"}}
+    </h1>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  <strong>Note:</strong> the <code>state</code> property is internal state and only used here to bypass the idle state for demonstration purposes.
+{{/freestyle-annotation}}

ui/app/templates/components/two-step-button.hbs

@@ -4,16 +4,25 @@
   </button>
 {{else if isPendingConfirmation}}
   <span data-test-confirmation-message class="confirmation-text">{{confirmationMessage}}</span>
-  <button data-test-cancel-button type="button" class="button is-dark is-outlined is-small" onclick={{action (queue
-    (action "setToIdle")
-    (action onCancel)
-  )}}>
+  <button
+    data-test-cancel-button
+    type="button"
+    class="button is-dark is-outlined is-small"
+    disabled={{awaitingConfirmation}}
+    onclick={{action (queue
+      (action "setToIdle")
+      (action onCancel)
+    )}}>
     {{cancelText}}
   </button>
-  <button data-test-confirm-button class="button is-danger is-small" onclick={{action (queue
-    (action "setToIdle")
-    (action onConfirm)
-  )}}>
+  <button
+    data-test-confirm-button
+    class="button is-danger is-small {{if awaitingConfirmation "is-loading"}}"
+    disabled={{awaitingConfirmation}}
+    onclick={{action (queue
+      (action "setToIdle")
+      (action onConfirm)
+    )}}>
     {{confirmText}}
   </button>
 {{/if}}

ui/tests/integration/two-step-button-test.js

@@ -13,6 +13,7 @@ const commonProperties = () => ({
   cancelText: 'Cancel Action',
   confirmText: 'Confirm Action',
   confirmationMessage: 'Are you certain',
+  awaitingConfirmation: false,
   onConfirm: sinon.spy(),
   onCancel: sinon.spy(),
 });
@@ -23,6 +24,7 @@ const commonTemplate = hbs`
     cancelText=cancelText
     confirmText=confirmText
     confirmationMessage=confirmationMessage
+    awaitingConfirmation=awaitingConfirmation
     onConfirm=onConfirm
     onCancel=onCancel}}
 `;
@@ -109,3 +111,27 @@ test('confirming the promptForConfirmation state calls the onConfirm hook and re
     });
   });
 });
+
+test('when awaitingConfirmation is true, the cancel and submit buttons are disabled and the submit button is loading', function(assert) {
+  const props = commonProperties();
+  props.awaitingConfirmation = true;
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  click('[data-test-idle-button]');
+
+  return wait().then(() => {
+    assert.ok(
+      find('[data-test-cancel-button]').hasAttribute('disabled'),
+      'The cancel button is disabled'
+    );
+    assert.ok(
+      find('[data-test-confirm-button]').hasAttribute('disabled'),
+      'The confirm button is disabled'
+    );
+    assert.ok(
+      find('[data-test-confirm-button]').classList.contains('is-loading'),
+      'The confirm button is in a loading state'
+    );
+  });
+});