Add saving and savingText props to Wizard [#151932325]

Signed-off-by: Ming Xiao <mxiao@pivotal.io>
pivotal-cf · Oct 12, 2017 · 66e8b92 · 66e8b92
1 parent d4f5f09
commit 66e8b92
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/spec/pivotal-ui-react/wizard/wizard_spec.js b/spec/pivotal-ui-react/wizard/wizard_spec.js
@@ -332,5 +332,47 @@ describe('Wizard', () => {
         expect(finish).toHaveBeenCalledWith();
       });
     });
+
+    describe('when "saving" is true and savingText is provided', () => {
+      beforeEach(() => {
+        subject::setProps({saving: true, savingText: 'Creating'});
+      });
+
+      it('renders a spinner', () => {
+        expect('.wizard-finish-btn .icon-spinner-sm').toExist();
+      });
+
+      it('changes the button text to savingText', () => {
+        expect('.wizard-finish-btn').toContainText('Creating');
+      });
+
+      it('disables the back button', () => {
+        expect('.wizard-back-btn').toHaveAttr('disabled');
+      });
+    });
+
+    describe('when "saving" is true and savingText is not provided', () => {
+      beforeEach(() => {
+        subject::setProps({saving: true});
+      });
+
+      it('changes the button text to the default saving text', () => {
+        expect('.wizard-finish-btn').toContainText('Saving');
+      });
+    });
+
+    describe('when "saving" is false', () => {
+      it('does not render a spinner', () => {
+        expect('.wizard-finish-btn .icon-spinner-sm').not.toExist();
+      });
+
+      it('does not change the button text', () => {
+        expect('.wizard-finish-btn').toContainText('Finish');
+      });
+
+      it('does not disable the back button', () => {
+        expect('.wizard-back-btn').not.toHaveAttr('disabled');
+      });
+    });
   });
 });
diff --git a/src/react/wizard/wizard.js b/src/react/wizard/wizard.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import types from 'prop-types';
 import {PrimaryButton} from '../buttons';
+import {Icon} from '../iconography';
 import classnames from 'classnames';
 
 function doNothing() {
@@ -13,14 +14,18 @@ export class Wizard extends React.Component {
     cancel: types.func,
     cancelText: types.string,
     finish: types.func,
-    finishText: types.string
+    finishText: types.string,
+    saving: types.bool,
+    savingText: types.string
   };
 
   static defaultProps = {
     pages: [],
     cancelText: 'Cancel',
     finish: doNothing,
-    finishText: 'Finish'
+    finishText: 'Finish',
+    saving: false,
+    savingText: 'Saving'
   };
 
   constructor(props) {
@@ -74,7 +79,7 @@ export class Wizard extends React.Component {
   }
 
   render() {
-    const {cancel, cancelText, className, pages, finishText, style} = this.props;
+    const {cancel, cancelText, className, pages, finishText, style, saving, savingText} = this.props;
     const {currentPage} = this.state;
 
     const page = pages[currentPage];
@@ -94,13 +99,17 @@ export class Wizard extends React.Component {
     );
 
     const backButton = (
-      <PrimaryButton alt className="wizard-back-btn"
+      <PrimaryButton alt className="wizard-back-btn" disabled={saving}
                      onClick={this.onClickBack}>Back</PrimaryButton>
     );
 
+    const icon = saving && <Icon src="spinner-sm"/>;
     const finishButton = (
-      <PrimaryButton className="wizard-finish-btn"
-                     onClick={this.onClickFinish}>{finishText}</PrimaryButton>
+      <PrimaryButton {...{
+        className: "wizard-finish-btn",
+        icon,
+        onClick: this.onClickFinish
+      }}>{saving ? savingText : finishText}</PrimaryButton>
     );
 
     const nextButton = (