Merge pull request #13884 from jasonrsadler/feature/escape-key#6248

Escape key now closes Add Funds dialog

app/renderer/components/preferences/payment/addFundsDialog/addFundsDialogFooter.js

@@ -37,6 +37,7 @@ class AddFundsDialogFooter extends React.Component {
         break
       case 'addFundsWizardAddress':
         appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
+        this.props.onNavigate()
         break
       default:
         break
@@ -59,6 +60,7 @@ class AddFundsDialogFooter extends React.Component {
         // and remove the current
         // appActions.onChangeAddFundsDialogStep('batContribMatching')
         appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
+        this.props.onNavigate()
         break
     }
   }

app/renderer/components/preferences/payment/advancedSettings.js

@@ -91,17 +91,27 @@ class AdvancedSettingsContent extends ImmutableComponent {
 }
 
 class AdvancedSettingsFooter extends ImmutableComponent {
+  showLedgerBackup () {
+    this.props.showOverlay('ledgerBackup')
+    this.props.setOverlayName('ledgerBackup')
+  }
+
+  showLedgerRecovery () {
+    this.props.showOverlay('ledgerRecovery')
+    this.props.setOverlayName('ledgerRecovery')
+  }
+
   render () {
     return <section>
       <BrowserButton groupedItem primaryColor
         l10nId='backupLedger'
         testId='backupLedgerButton'
-        onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
+        onClick={this.showLedgerBackup.bind(this)}
       />
       <BrowserButton groupedItem primaryColor
         l10nId='recoverLedger'
         testId='recoverLedgerButton'
-        onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
+        onClick={this.showLedgerRecovery.bind(this)}
       />
       <BrowserButton groupedItem secondaryColor
         l10nId='done'

app/renderer/components/preferences/payment/enabledContent.js

@@ -52,13 +52,18 @@ class EnabledContent extends ImmutableComponent {
     this.recoverStatusClick = this.recoverStatusClick.bind(this)
   }
 
+  showAddFunds () {
+    this.props.showOverlay('addFunds')
+    this.props.setOverlayName('addFunds')
+  }
+
   walletButton () {
     const ledgerData = this.props.ledgerData
     const buttonText = ledgerData.get('created')
       ? 'addFundsTitle'
       : (ledgerData.get('creating') ? 'creatingWallet' : 'createWallet')
     const onButtonClick = ledgerData.get('created')
-      ? this.props.showOverlay.bind(this, 'addFunds')
+      ? this.showAddFunds.bind(this)
       : (ledgerData.get('creating') ? () => {} : this.createWallet())
 
     let buttonDisabled = !ledgerData.get('created')
@@ -339,13 +344,18 @@ class EnabledContent extends ImmutableComponent {
     </div>
   }
 
+  showDeletedSites () {
+    this.props.showOverlay('deletedSites')
+    this.props.setOverlayName('deletedSites')
+  }
+
   get deletedSitesLink () {
     if (this.props.showDeletedSites) {
       return <span>
         <a data-l10n-id='showDeletedSitesDialog'
           data-test-id='showDeletedSitesDialog'
           className={css(styles.enabledContent__footer__link)}
-          onClick={this.props.showOverlay.bind(this, 'deletedSites')}
+          onClick={this.showDeletedSites.bind(this)}
         />
         <span
           className={css(styles.enabledContent__footer__link, styles.enabledContent__footer__separator)}

app/renderer/components/preferences/payment/ledgerRecovery.js

@@ -20,13 +20,20 @@ const commonStyles = require('../../styles/commonStyles')
 // other
 const aboutActions = require('../../../../../js/about/aboutActions')
 const appActions = require('../../../../../js/actions/appActions')
+const keyCodes = require('../../../../../app/common/constants/keyCodes')
 
 class LedgerRecoveryContent extends ImmutableComponent {
   constructor () {
     super()
     this.handleRecoveryKeyChange = this.handleRecoveryKeyChange.bind(this)
   }
 
+  componentDidUpdate () {
+    if (this.refs.ledgerRecoveryOverlay) {
+      this.refs.ledgerRecoveryOverlay.focus()
+    }
+  }
+
   handleRecoveryKeyChange (e) {
     this.props.handleRecoveryKeyChange(e.target.value)
   }
@@ -36,6 +43,19 @@ class LedgerRecoveryContent extends ImmutableComponent {
     appActions.resetRecoverStatus()
   }
 
+  onRecoveryOverlay (success) {
+    this.clearRecoveryStatus(success)
+    this.refs.ledgerRecoveryOverlay = null
+    this.props.setOverlayName('ledgerRecovery')
+  }
+
+  onEscape (e, status) {
+    e.stopPropagation()
+    if (e.keyCode === keyCodes.ESC) {
+      this.onRecoveryOverlay(status)
+    }
+  }
+
   render () {
     const l10nDataArgs = {
       balance: batToCurrencyString(this.props.ledgerData.get('balance'), this.props.ledgerData)
@@ -47,7 +67,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
     return <section>
       {
         recoverySucceeded === true
-          ? <section className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)} onKeyDown={(e) => this.onEscape(e, true)} ref='ledgerRecoveryOverlay' tabIndex='0'>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoverySucceeded' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='balanceRecovered'
@@ -56,37 +76,37 @@ class LedgerRecoveryContent extends ImmutableComponent {
             <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
-              onClick={this.clearRecoveryStatus.bind(this)}
+              onClick={this.onRecoveryOverlay.bind(this, true)}
             />
           </section>
           : null
       }
       {
         (recoverySucceeded === false && recoveryError && isNetworkError)
-          ? <section className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)} onKeyDown={(e) => this.onEscape(e, false)} ref='ledgerRecoveryOverlay' tabIndex='0'>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryNetworkFailedMessage'
             />
             <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
-              onClick={this.clearRecoveryStatus.bind(this)}
+              onClick={this.onRecoveryOverlay.bind(this, false)}
             />
           </section>
           : null
       }
       {
         (recoverySucceeded === false && recoveryError && !isNetworkError)
-          ? <section className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)} onKeyDown={(e) => this.onEscape(e, false)} ref='ledgerRecoveryOverlay' tabIndex='0'>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryFailedTitle' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryFailedMessage'
             />
             <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
-              onClick={this.clearRecoveryStatus.bind(this)}
+              onClick={this.onRecoveryOverlay.bind(this, false)}
             />
           </section>
           : null
@@ -118,10 +138,12 @@ class LedgerRecoveryFooter extends ImmutableComponent {
 
   recoverWallet () {
     aboutActions.ledgerRecoverWallet(this.props.state.recoveryKey)
+    this.props.setOverlayName('ledgerRecoveryStatus')
   }
 
   recoverWalletFromFile () {
     aboutActions.ledgerRecoverWalletFromFile()
+    this.props.setOverlayName('ledgerRecoveryStatus')
   }
 
   render () {
@@ -130,7 +152,7 @@ class LedgerRecoveryFooter extends ImmutableComponent {
         <BrowserButton groupedItem secondaryColor
           l10nId='recoverFromFile'
           testId='recoverFromFileButton'
-          onClick={this.recoverWalletFromFile}
+          onClick={this.recoverWalletFromFile.bind(this)}
         />
       </div>
       <div>
@@ -142,7 +164,7 @@ class LedgerRecoveryFooter extends ImmutableComponent {
         <BrowserButton groupedItem primaryColor
           l10nId='recover'
           testId='recoverButton'
-          onClick={this.recoverWallet}
+          onClick={this.recoverWallet.bind(this)}
         />
       </div>
     </div>

app/renderer/components/preferences/paymentsTab.js

@@ -102,12 +102,13 @@ class PaymentsTab extends ImmutableComponent {
     return (
       <AddFundsDialogFooter
         addFundsDialog={wizardData}
+        onNavigate={this.props.onNavigate}
         onHide={this.props.hideOverlay.bind(this, 'addFunds')}
       />
     )
   }
 
-  get getOverlayFounds () {
+  get getOverlayFunds () {
     const ledgerData = this.props.ledgerData || Immutable.Map()
     return formatCurrentBalance(ledgerData)
   }
@@ -166,6 +167,16 @@ class PaymentsTab extends ImmutableComponent {
     />
   }
 
+  showAdvancedSettings () {
+    this.props.showOverlay('advancedSettings')
+    this.props.setOverlayName('advancedSettings')
+  }
+
+  showPaymentHistory () {
+    this.props.showOverlay('paymentHistory')
+    this.props.setOverlayName('paymentHistory')
+  }
+
   hideOverlay () {
     this.props.hideOverlay('addFunds')
     appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
@@ -185,7 +196,7 @@ class PaymentsTab extends ImmutableComponent {
         ? <ModalOverlay
           title={'addFundsHeader'}
           subTitle={'balance'}
-          subTitleArgs={this.getOverlayFounds}
+          subTitleArgs={this.getOverlayFunds}
           content={this.addFundsDialogContent}
           footer={this.addFundsDialogFooter}
           onHide={this.hideOverlay}
@@ -235,6 +246,7 @@ class PaymentsTab extends ImmutableComponent {
           footer={<AdvancedSettingsFooter
             showOverlay={this.props.showOverlay}
             hideOverlay={this.props.hideOverlay}
+            setOverlayName={this.props.setOverlayName}
           />}
           onHide={this.props.hideOverlay.bind(this, 'advancedSettings')}
         />
@@ -248,6 +260,7 @@ class PaymentsTab extends ImmutableComponent {
             ledgerData={this.props.ledgerData}
           />}
           footer={<LedgerBackupFooter
+            onNavigate={this.props.onNavigate}
             hideOverlay={this.props.hideOverlay}
           />}
           onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
@@ -261,10 +274,12 @@ class PaymentsTab extends ImmutableComponent {
             ledgerData={this.props.ledgerData}
             hideAdvancedOverlays={this.props.hideAdvancedOverlays.bind(this)}
             handleRecoveryKeyChange={this.handleRecoveryKeyChange.bind(this)}
+            setOverlayName={this.props.setOverlayName}
           />}
           footer={<LedgerRecoveryFooter
             state={this.state}
             hideOverlay={this.props.hideOverlay}
+            setOverlayName={this.props.setOverlayName}
           />}
           onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
           customDialogFooterClasses={css(styles.recoveryFooter)}
@@ -337,7 +352,7 @@ class PaymentsTab extends ImmutableComponent {
                   )}
                     data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
                     data-l10n-id='paymentHistoryIcon'
-                    onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
+                    onClick={(enabled && this.hasWalletTransaction) ? this.showPaymentHistory.bind(this, 'paymentHistory') : () => {}}
                   />
                   <a className={css(
                     styles.switchWrap__mainIcons,
@@ -346,7 +361,7 @@ class PaymentsTab extends ImmutableComponent {
                   )}
                     data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
                     data-l10n-id='advancedSettingsIcon'
-                    onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
+                    onClick={enabled ? this.showAdvancedSettings.bind(this) : () => {}}
                   />
                 </div>
               </div>
@@ -363,6 +378,7 @@ class PaymentsTab extends ImmutableComponent {
             showOverlay={this.props.showOverlay}
             siteSettings={this.props.siteSettings}
             showDeletedSites={showDeletedSites}
+            setOverlayName={this.props.setOverlayName}
           />
           : <DisabledContent
             ledgerData={this.props.ledgerData}

app/renderer/components/preferences/syncTab.js

@@ -65,6 +65,11 @@ class SyncTab extends ImmutableComponent {
     </section>
   }
 
+  showSyncReset () {
+    this.props.showOverlay('syncReset')
+    this.props.setOverlayName('syncReset')
+  }
+
   get clearDataContent () {
     return <section className={css(styles.settingsListContainerMargin__bottom)}>
       <DefaultSectionTitle data-l10n-id='syncClearData' />
@@ -73,7 +78,7 @@ class SyncTab extends ImmutableComponent {
           ? <BrowserButton primaryColor
             l10nId='syncResetButton'
             testId='clearDataButton'
-            onClick={this.props.showOverlay.bind(this, 'syncReset')}
+            onClick={this.showSyncReset.bind(this)}
           />
           : <div>
             <BrowserButton primaryColor
@@ -87,6 +92,16 @@ class SyncTab extends ImmutableComponent {
     </section>
   }
 
+  showSyncStart () {
+    this.props.showOverlay('syncStart')
+    this.props.setOverlayName('syncStart')
+  }
+
+  showSyncAdd () {
+    this.props.showOverlay('syncAdd')
+    this.props.setOverlayName('syncAdd')
+  }
+
   get setupContent () {
     if (this.setupError) {
       return null
@@ -96,12 +111,12 @@ class SyncTab extends ImmutableComponent {
       <BrowserButton groupedItem primaryColor
         l10nId='syncStart'
         testId='syncStartButton'
-        onClick={this.props.showOverlay.bind(this, 'syncStart')}
+        onClick={this.showSyncStart.bind(this)}
       />
       <BrowserButton groupedItem secondaryColor
         l10nId='syncAdd'
         testId='syncAddButton'
-        onClick={this.props.showOverlay.bind(this, 'syncAdd')}
+        onClick={this.showSyncAdd.bind(this)}
       />
     </section>
   }
@@ -127,7 +142,7 @@ class SyncTab extends ImmutableComponent {
       <BrowserButton primaryColor
         l10nId='syncNewDevice'
         testId='syncNewDeviceButton'
-        onClick={this.props.showOverlay.bind(this, 'syncNewDevice')}
+        onClick={this.showSyncNewDevice.bind(this)}
       />
     </SettingsList>
   }
@@ -391,6 +406,8 @@ class SyncTab extends ImmutableComponent {
     if (window.confirm(msg)) {
       aboutActions.resetSync()
       this.props.hideOverlay('syncReset')
+    } else {
+      this.props.onNavigate()
     }
   }
 
@@ -441,6 +458,11 @@ class SyncTab extends ImmutableComponent {
     }
   }
 
+  showSyncNewDevice () {
+    this.props.showOverlay('syncNewDevice')
+    this.props.setOverlayName('syncNewDevice')
+  }
+
   render () {
     return <section className='syncContainer'>
       {