Refactor autofillAddressPanel.js and autofillCreditCardPanel.js (#8105)

Closes #8099
Closes #8100
Addresses #7989

- Refactored with commonForm, replacing it with genericForm
  Aligned labels to the left and input textboxes to the right by applying display:flex

- Added CommonFormLarge
- Added cx to dialog.js for more readability
- Removed .manageAutofillDataPanel from form.less

Also:
- Added testIds
- Edited autofillTest.js and autofill.js
  TODO: refactor autofill.js with Aphrodite
- Edited selectors.js

Auditors:

Test Plan:
1. Automated tests should pass
2. Open about:autofill
3. Add an address
4. Add a credit card
5. Visit https://www.roboform.com/filling-test-all-fields
6. Make sure the input forms can be filled

app/renderer/components/commonForm.js

@@ -20,7 +20,11 @@ class CommonForm extends ImmutableComponent {
 
 class CommonFormLarge extends ImmutableComponent {
  render () {
- return <div className={css(commonStyles.flyoutDialog, styles.CommonForm, styles.CommonFormLarge)} {...this.props} />
+ return <div className={css(
+ commonStyles.flyoutDialog,
+ styles.CommonForm,
+ styles.CommonFormLarge
+ )} {...this.props} />
  }
 }
 

app/renderer/components/importBrowserDataPanel.js

@@ -124,7 +124,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
  browsers.push(<option value={browser.index}>{browser.name}</option>)
  })
  }
- return <Dialog onHide={this.props.onHide} data-test-id='importBrowserDataPanel' isClickDismiss>
+ return <Dialog onHide={this.props.onHide} testId='importBrowserDataPanel' isClickDismiss>
  <CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
  <CommonFormTitle
  data-test-id='importBrowserDataTitle'

app/renderer/components/styles/global.js

@@ -130,7 +130,7 @@ const globalStyles = {
  closeIconSize: '13px',
  narrowIconSize: '12px',
  dialogWidth: '422px',
- dialogLargeWidth: '600px',
+ dialogLargeWidth: '600px', // temporary workaround
  dialogTopOffset: '30px',
  dialogInsideMargin: '18px',
  paymentsMargin: '20px',

js/about/autofill.js

@@ -6,6 +6,7 @@ const React = require('react')
 const messages = require('../constants/messages')
 const Immutable = require('immutable')
 const ImmutableComponent = require('../components/immutableComponent')
+const cx = require('../lib/classSet')
 const aboutActions = require('./aboutActions')
 const Button = require('../components/button')
 
@@ -33,20 +34,32 @@ class AddressItem extends ImmutableComponent {
  const address = this.props.address
  return <tr className='autofillItem'>
  <td className='autofillActions'>
- <span className='autofillAction fa fa-times' title='Delete address'
+ <span className={cx({
+ fa: true,
+ 'fa-times': true,
+ autofillAction: true
+ })}
+ data-test-id='DeleteAddress'
+ title='Delete address'
  onClick={this.onDelete} />
  </td>
- <td className='addressName'>{address.get('name')}</td>
- <td className='organization'>{address.get('organization')}</td>
- <td className='streetAddress'>{address.get('streetAddress')}</td>
- <td className='city'>{address.get('city')}</td>
- <td className='state'>{address.get('state')}</td>
- <td className='postalCode'>{address.get('postalCode')}</td>
- <td className='country'>{address.get('country')}</td>
- <td className='phone'>{address.get('phone')}</td>
- <td className='email'>{address.get('email')}</td>
- <td className='autofillActions'>
- <span className='autofillAction fa fa-pencil-square-o' title='Edit address'
+ <td data-test-id='addressName'>{address.get('name')}</td>
+ <td data-test-id='organization'>{address.get('organization')}</td>
+ <td data-test-id='streetAddress'>{address.get('streetAddress')}</td>
+ <td data-test-id='city'>{address.get('city')}</td>
+ <td data-test-id='state'>{address.get('state')}</td>
+ <td data-test-id='postalCode'>{address.get('postalCode')}</td>
+ <td data-test-id='country'>{address.get('country')}</td>
+ <td data-test-id='phone'>{address.get('phone')}</td>
+ <td data-test-id='email'>{address.get('email')}</td>
+ <td className='autofillActions' data-test-id='autofillActions'>
+ <span className={cx({
+ fa: true,
+ 'fa-pencil-square-o': true,
+ autofillAction: true
+ })}
+ data-test-id='EditAddress'
+ title='Edit address'
  onClick={this.onEdit} />
  </td>
  </tr>
@@ -72,18 +85,32 @@ class CreditCardItem extends ImmutableComponent {
  const creditCard = this.props.creditCard
  return <tr className='autofillItem'>
  <td className='autofillActions'>
- <span className='autofillAction fa fa-times' title='Delete creditCard'
+ <span className={cx({
+ fa: true,
+ 'fa-times': true,
+ autofillAction: true
+ })}
+ data-test-id='DeleteCreditCard'
+ title='Delete creditCard'
  onClick={this.onDelete} />
  </td>
- <td className='creditCardName'>{creditCard.get('name')}</td>
- <td className='creditCardNumber'>{
- creditCard.get('card') !== undefined ? '***' + creditCard.get('card').slice(-4) : null
- }</td>
- <td className='creditCardPExpirationDate'>
+ <td data-test-id='creditCardName'>
+ {creditCard.get('name')}
+ </td>
+ <td data-test-id='creditCardNumber'>
+ {creditCard.get('card') !== undefined ? '***' + creditCard.get('card').slice(-4) : null}
+ </td>
+ <td data-test-id='creditCardPExpirationDate'>
  {creditCard.get('month') + '/' + creditCard.get('year')}
  </td>
  <td className='autofillActions'>
- <span className='autofillAction fa fa-pencil-square-o' title='Edit creditCard'
+ <span className={cx({
+ fa: true,
+ 'fa-pencil-square-o': true,
+ autofillAction: true
+ })}
+ data-test-id='EditCreditCard'
+ title='Edit creditCard'
  onClick={this.onEdit} />
  </td>
  </tr>
@@ -133,7 +160,7 @@ class AboutAutofill extends React.Component {
 
  render () {
  var savedAddresssPage = this.isAddresssEmpty
- ? <div><span className='notSaved' data-l10n-id='noAddressesSaved' /></div>
+ ? <div><span className='notSaved' data-l10n-id='noAddressesSaved' data-test-id='noAddressesSaved' /></div>
  : <div>
  <table className='autofillList'>
  <thead>
@@ -162,7 +189,7 @@ class AboutAutofill extends React.Component {
  </div>
 
  var savedCreditCardsPage = this.isCreditCardsEmpty
- ? <div><span className='notSaved' data-l10n-id='noCreditCardsSaved' /></div>
+ ? <div><span className='notSaved' data-l10n-id='noCreditCardsSaved' data-test-id='noCreditCardsSaved' /></div>
  : <div>
  <table className='autofillList'>
  <thead>
@@ -183,20 +210,28 @@ class AboutAutofill extends React.Component {
  </tbody>
  </table>
  </div>
- return <div className='autofillPage'>
+ return <div className='autofillPage' data-test-id='autofillPage'>
  <h1 data-l10n-id='autofillTitle' />
  <div className='autofillPageContent'>
  <div className='autofillPageFooter' />
  <h2 data-l10n-id='addresses' />
  <div className='autofillPageContent'>
  {savedAddresssPage}
- <Button l10nId='addAddress' className='primaryButton addAddressButton' onClick={this.onAddAddress} />
+ <Button className='primaryButton'
+ l10nId='addAddress'
+ testId='addAddressButton'
+ onClick={this.onAddAddress}
+ />
  </div>
  <div className='autofillPageFooter' />
  <h2 data-l10n-id='creditCards' />
  <div className='autofillPageContent'>
  {savedCreditCardsPage}
- <Button l10nId='addCreditCard' className='primaryButton addCreditCardButton' onClick={this.onAddCreditCard} />
+ <Button className='primaryButton'
+ l10nId='addCreditCard'
+ testId='addCreditCardButton'
+ onClick={this.onAddCreditCard}
+ />
  </div>
  </div>
  </div>

js/components/autofillAddressPanel.js

@@ -10,6 +10,18 @@ const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 
+const {css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+ CommonFormLarge,
+ CommonFormSection,
+ CommonFormTitle,
+ CommonFormTextbox,
+ CommonFormButtonWrapper,
+ commonFormStyles
+} = require('../../app/renderer/components/commonForm')
+
 class AutofillAddressPanel extends ImmutableComponent {
  constructor () {
  super()
@@ -99,63 +111,98 @@ class AutofillAddressPanel extends ImmutableComponent {
  }
 
  render () {
- return <Dialog onHide={this.props.onHide} className='manageAutofillDataPanel autofillAddressPanel' isClickDismiss>
- <div className='genericForm manageAutofillData' onClick={this.onClick}>
- <div className='formRow manageAutofillDataTitle' data-l10n-id='editAddress' />
- <div className='genericFormTable'>
- <div id='nameOnAddress' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='name' htmlFor='nameOnAddress' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
- value={this.props.currentDetail.get('name')}
- ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
- </div>
- <div id='organization' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='organization' htmlFor='organization' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
- value={this.props.currentDetail.get('organization')} />
- </div>
- <div id='streetAddress' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='streetAddress' htmlFor='streetAddress' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
- value={this.props.currentDetail.get('streetAddress')} />
- </div>
- <div id='city' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='city' htmlFor='city' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
- value={this.props.currentDetail.get('city')} />
- </div>
- <div id='state' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='state' htmlFor='state' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
- value={this.props.currentDetail.get('state')} />
- </div>
- <div id='postalCode' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='postalCode' htmlFor='postalCode' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
- value={this.props.currentDetail.get('postalCode')} />
- </div>
- <div id='country' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='country' htmlFor='country' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
- value={this.props.currentDetail.get('country')} />
- </div>
- <div id='phone' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='phone' htmlFor='phone' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
- value={this.props.currentDetail.get('phone')} />
- </div>
- <div id='email' className='formRow manageAutofillDataOptions'>
- <label data-l10n-id='email' htmlFor='email' />
- <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
- value={this.props.currentDetail.get('email')} />
- </div>
- <div className='formRow manageAutofillDataButtons'>
- <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
- <Button l10nId='save' className='primaryButton saveAddressButton' onClick={this.onSave}
- disabled={this.disableSaveButton} />
+ return <Dialog onHide={this.props.onHide} testId='autofillAddressPanel' isClickDismiss>
+ <CommonFormLarge onClick={this.onClick}>
+ <CommonFormTitle data-l10n-id='editAddress' />
+ <CommonFormSection>
+ <div className={css(commonFormStyles.sectionWrapper)}>
+ <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__label)}>
+ <label data-l10n-id='name' htmlFor='nameOnAddress' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='organization' htmlFor='organization' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='streetAddress' htmlFor='streetAddress' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='city' htmlFor='city' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='state' htmlFor='state' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='postalCode' htmlFor='postalCode' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='country' htmlFor='country' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='phone' htmlFor='phone' />
+ <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='email' htmlFor='email' />
+ </div>
+ <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__input)}>
+ <input className={css(
+ commonStyles.formControl,
+ commonStyles.textbox,
+ commonStyles.textbox__outlineable,
+ commonFormStyles.input__box
+ )}
+ data-test-id='nameOnAddress'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
+ value={this.props.currentDetail.get('name')}
+ ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='organization'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
+ value={this.props.currentDetail.get('organization')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='streetAddress'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
+ value={this.props.currentDetail.get('streetAddress')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='city'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
+ value={this.props.currentDetail.get('city')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='state'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
+ value={this.props.currentDetail.get('state')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='postalCode'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
+ value={this.props.currentDetail.get('postalCode')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='country'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
+ value={this.props.currentDetail.get('country')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='phone'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
+ value={this.props.currentDetail.get('phone')} />
+ </div>
+ <div className={css(commonFormStyles.input__marginRow)}>
+ <CommonFormTextbox
+ data-test-id='email'
+ spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
+ value={this.props.currentDetail.get('email')} />
+ </div>
+ </div>
  </div>
- </div>
- </div>
+ </CommonFormSection>
+ <CommonFormButtonWrapper>
+ <Button className='whiteButton'
+ l10nId='cancel'
+ testId='cancelAddressButton'
+ onClick={this.props.onHide}
+ />
+ <Button className='primaryButton'
+ disabled={this.disableSaveButton}
+ l10nId='save'
+ testId='saveAddressButton'
+ onClick={this.onSave}
+ />
+ </CommonFormButtonWrapper>
+ </CommonFormLarge>
  </Dialog>
  }
 }