diff options
Diffstat (limited to 'ui')
4 files changed, 44 insertions, 2 deletions
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js index 2a75b559b..c73f8d903 100644 --- a/ui/app/components/modal/modal.component.js +++ b/ui/app/components/modal/modal.component.js @@ -12,6 +12,7 @@ export default class Modal extends PureComponent { onSubmit: PropTypes.func, submitType: PropTypes.string, submitText: PropTypes.string, + submitDisabled: PropTypes.bool, // Cancel button (left button) onCancel: PropTypes.func, cancelType: PropTypes.string, @@ -31,6 +32,7 @@ export default class Modal extends PureComponent { onSubmit, submitType, submitText, + submitDisabled, onCancel, cancelType, cancelText, @@ -69,6 +71,7 @@ export default class Modal extends PureComponent { <Button type={submitType} onClick={onSubmit} + disabled={submitDisabled} className="modal-container__footer-button" > { submitText } diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js index 8cce1a808..2ced3f32d 100644 --- a/ui/app/components/modal/tests/modal.component.test.js +++ b/ui/app/components/modal/tests/modal.component.test.js @@ -1,6 +1,6 @@ import React from 'react' import assert from 'assert' -import { shallow } from 'enzyme' +import { mount, shallow } from 'enzyme' import sinon from 'sinon' import Modal from '../modal.component' import Button from '../../button' @@ -100,4 +100,34 @@ describe('Modal Component', () => { assert.equal(handleCancel.callCount, 1) assert.equal(handleSubmit.callCount, 0) }) + + it('should disable the submit button if submitDisabled is true', () => { + const handleCancel = sinon.spy() + const handleSubmit = sinon.spy() + const wrapper = mount( + <Modal + onCancel={handleCancel} + cancelText="Cancel" + onSubmit={handleSubmit} + submitText="Submit" + submitDisabled={true} + headerText="My Header" + onClose={handleCancel} + /> + ) + + const buttons = wrapper.find(Button) + assert.equal(buttons.length, 2) + const cancelButton = buttons.at(0) + const submitButton = buttons.at(1) + + assert.equal(handleCancel.callCount, 0) + cancelButton.simulate('click') + assert.equal(handleCancel.callCount, 1) + + assert.equal(submitButton.props().disabled, true) + assert.equal(handleSubmit.callCount, 0) + submitButton.simulate('click') + assert.equal(handleSubmit.callCount, 0) + }) }) diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js index 8b00cb9b9..8fd7b2679 100644 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js @@ -17,6 +17,10 @@ export default class CancelTransaction extends PureComponent { newGasFee: PropTypes.string, } + state = { + busy: false, + } + componentDidUpdate () { const { transactionStatus, showTransactionConfirmedModal } = this.props @@ -29,8 +33,10 @@ export default class CancelTransaction extends PureComponent { handleSubmit = async () => { const { createCancelTransaction, hideModal } = this.props + this.setState({ busy: true }) + await createCancelTransaction() - hideModal() + this.setState({ busy: false }, () => hideModal()) } handleCancel = () => { @@ -40,6 +46,7 @@ export default class CancelTransaction extends PureComponent { render () { const { t } = this.context const { newGasFee } = this.props + const { busy } = this.state return ( <Modal @@ -50,6 +57,7 @@ export default class CancelTransaction extends PureComponent { submitText={t('yesLetsTry')} cancelText={t('nevermind')} submitType="secondary" + submitDisabled={busy} > <div> <div className="cancel-transaction__title"> diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js index 858fb01a8..345951b0f 100644 --- a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js +++ b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js @@ -34,6 +34,7 @@ describe('CancelTransaction Component', () => { defaultNewGasPrice="0x3b9aca00" createCancelTransaction={createCancelTransactionSpy} hideModal={hideModalSpy} + showTransactionConfirmedModal={() => {}} />, { context: { t }} ) |