Add submitDisabled prop to Modals. Disable submit button when creating a cancel transaction (#5910)

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 }

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)
+  })
 })

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">

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 }}
     )