Refactor autofillAddressPanel.js and autofillCreditCardPanel.js

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
brave · Apr 23, 2017 · 9afa06c · 9afa06c
1 parent 83c08ee
commit 9afa06c
Show file tree

Hide file tree

Showing 9 changed files with 381 additions and 256 deletions.
diff --git a/app/renderer/components/commonForm.js b/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} />
   }
 }
 

diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
@@ -123,7 +123,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'

diff --git a/js/about/autofill.js b/js/about/autofill.js
@@ -6,6 +6,7 @@ const React = require('react')
 const messages = require('../constants/messages')
 const Immutable = require('immutable')
 const ImmutableComponent = require('../../app/renderer/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>

diff --git a/js/components/autofillAddressPanel.js b/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>
   }
 }