fix(signatures): Added alias to accounts rendered in dropdown

Summary:
Extended default signatures to also be associated with aliases in the signature
preference page. Also fixed some styling with the signature dropdown button in its blurred
state on the popout composer.
fix(signatures): Fixed styling for signature compuser button on popout when blurred

test(signatures): Updated tests to support and cover extending signatures to alias

Test Plan: Modified existing tests to work with these changes

Reviewers: juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D3111

internal_packages/composer-signature/lib/preferences-signatures.jsx

@@ -35,14 +35,14 @@ export default class PreferencesSignatures extends React.Component {
 
   _getStateFromStores() {
     const signatures = SignatureStore.getSignatures()
-    const accounts = AccountStore.accounts()
+    const accountsAndAliases = AccountStore.aliases()
     const selected = SignatureStore.selectedSignature()
     const defaults = SignatureStore.getDefaults()
     return {
       signatures: signatures,
       selectedSignature: selected,
       defaults: defaults,
-      accounts: accounts,
+      accountsAndAliases: accountsAndAliases,
       editAsHTML: this.state ? this.state.editAsHTML : false,
     }
   }
@@ -80,8 +80,8 @@ export default class PreferencesSignatures extends React.Component {
     Actions.selectSignature(sig.id)
   }
 
-  _onToggleAccount = (accountId) => {
-    Actions.toggleAccount(accountId)
+  _onToggleAccount = (account) => {
+    Actions.toggleAccount(account.email)
   }
 
   _onToggleEditAsHTML = () => {
@@ -107,34 +107,40 @@ export default class PreferencesSignatures extends React.Component {
     )
   }
 
-  _selectItemKey = (account) => {
-    return account.accountId
+  _selectItemKey = (accountOrAlias) => {
+    return accountOrAlias.clientId
   }
 
-  _isChecked = (account) => {
-    if (this.state.defaults[account.accountId] === this.state.selectedSignature.id) return true
+  _isChecked = (accountOrAlias) => {
+    if (this.state.defaults[accountOrAlias.email] === this.state.selectedSignature.id) return true
     return false
   }
 
   _numSelected() {
-    const sel = _.filter(this.state.accounts, (account) => {
-      return this._isChecked(account)
+    const sel = _.filter(this.state.accountsAndAliases, (accountOrAlias) => {
+      return this._isChecked(accountOrAlias)
     })
     const numSelected = sel.length
     return numSelected.toString() + (numSelected === 1 ? " Account" : " Accounts")
   }
 
+  _getEmail = (accountOrAlias) => {
+    return accountOrAlias.email
+  }
+
   _renderAccountPicker() {
     const buttonText = this._numSelected()
+
     return (
       <MultiselectDropdown
         className="account-dropdown"
-        items={this.state.accounts}
+        items={this.state.accountsAndAliases}
         itemChecked={this._isChecked}
         onToggleItem={this._onToggleAccount}
         itemKey={this._selectItemKey}
         current={this.selectedSignature}
         buttonText={buttonText}
+        itemContent={this._getEmail}
       />
     )
   }

internal_packages/composer-signature/lib/signature-composer-dropdown.jsx

@@ -37,8 +37,8 @@ export default class SignatureComposerDropdown extends React.Component {
   }
 
   componentDidUpdate(previousProps) {
-    if (previousProps.currentAccount.accountId !== this.props.currentAccount.accountId) {
-      const newAccountDefaultSignature = SignatureStore.signatureForAccountId(this.props.currentAccount.accountId)
+    if (previousProps.currentAccount.clientId !== this.props.currentAccount.clientId) {
+      const newAccountDefaultSignature = SignatureStore.signatureForEmail(this.props.currentAccount.email)
       this._changeSignature(newAccountDefaultSignature)
     }
   }

internal_packages/composer-signature/lib/signature-composer-extension.es6

@@ -3,8 +3,7 @@ import SignatureUtils from './signature-utils';
 
 export default class SignatureComposerExtension extends ComposerExtension {
   static prepareNewDraft = ({draft}) => {
-    const accountId = draft.accountId;
-    const signatureObj = SignatureStore.signatureForAccountId(accountId);
+    const signatureObj = draft.from && draft.from[0] ? SignatureStore.signatureForEmail(draft.from[0].email) : null;
     if (!signatureObj) {
       return;
     }

internal_packages/composer-signature/spec/preferences-signatures-spec.jsx

@@ -18,8 +18,8 @@ const SIGNATURES = {
 }
 
 const DEFAULTS = {
-  11: '1',
-  22: '2',
+  'one@nylas.com': '1',
+  'two@nylas.com': '2',
 }
 
 
@@ -66,7 +66,7 @@ describe('PreferencesSignatures', function preferencesSignatures() {
       spyOn(Actions, 'toggleAccount')
       this.account = ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'item')[0]
       ReactTestUtils.Simulate.mouseDown(this.account)
-      expect(Actions.toggleAccount).toHaveBeenCalledWith('test-account-server-id')
+      expect(Actions.toggleAccount).toHaveBeenCalledWith('tester@nylas.com')
     })
     it('should set the selected signature when you click on one that is not currently selected', () => {
       spyOn(Actions, 'selectSignature')

internal_packages/composer-signature/spec/signature-composer-extension-spec.es6

@@ -16,18 +16,20 @@ describe('SignatureComposerExtension', function signatureComposerExtension() {
     describe("when a signature is defined", () => {
       beforeEach(() => {
         spyOn(NylasEnv.config, 'get').andCallFake(() => TEST_SIGNATURES);
-        spyOn(SignatureStore, 'signatureForAccountId').andReturn(TEST_SIGNATURE)
+        spyOn(SignatureStore, 'signatureForEmail').andReturn(TEST_SIGNATURE)
         SignatureStore.activate()
       });
 
       it("should insert the signature at the end of the message or before the first quoted text block and have a newline", () => {
         const a = new Message({
           draft: true,
+          from: ['one@nylas.com'],
           accountId: TEST_ACCOUNT_ID,
           body: 'This is a test! <div class="gmail_quote">Hello world</div>',
         });
         const b = new Message({
           draft: true,
+          from: ['one@nylas.com'],
           accountId: TEST_ACCOUNT_ID,
           body: 'This is a another test.',
         });
@@ -65,6 +67,7 @@ describe('SignatureComposerExtension', function signatureComposerExtension() {
         it(`should replace the signature if a signature is already present (${scenario.name})`, () => {
           const message = new Message({
             draft: true,
+            from: ['one@nylas.com'],
             body: scenario.body,
             accountId: TEST_ACCOUNT_ID,
           })

internal_packages/composer-signature/spec/signature-store-spec.jsx

@@ -15,9 +15,9 @@ let SIGNATURES = {
 }
 
 const DEFAULTS = {
-  11: '2',
-  22: '2',
-  33: null,
+  'one@nylas.com': '2',
+  'two@nylas.com': '2',
+  'three@nylas.com': null,
 }
 
 describe('SignatureStore', function signatureStore() {
@@ -27,7 +27,7 @@ describe('SignatureStore', function signatureStore() {
     spyOn(SignatureStore, '_saveSignatures').andCallFake(() => {
       NylasEnv.config.set(`nylas.signatures`, SignatureStore.signatures)
     })
-    spyOn(SignatureStore, 'signatureForAccountId').andCallFake((accountId) => SIGNATURES[DEFAULTS[accountId]])
+    spyOn(SignatureStore, 'signatureForEmail').andCallFake((email) => SIGNATURES[DEFAULTS[email]])
     spyOn(SignatureStore, 'selectedSignature').andCallFake(() => SIGNATURES['1'])
     SignatureStore.activate()
   })
@@ -35,10 +35,10 @@ describe('SignatureStore', function signatureStore() {
 
   describe('signatureForAccountId', () => {
     it('should return the default signature for that account', () => {
-      const titleForAccount11 = SignatureStore.signatureForAccountId(11).title
-      expect(titleForAccount11).toEqual(SIGNATURES['2'].title)
-      const account22Def = SignatureStore.signatureForAccountId(33)
-      expect(account22Def).toEqual(undefined)
+      const titleForAccount1 = SignatureStore.signatureForEmail('one@nylas.com').title
+      expect(titleForAccount1).toEqual(SIGNATURES['2'].title)
+      const account2Def = SignatureStore.signatureForEmail('three@nylas.com')
+      expect(account2Def).toEqual(undefined)
     })
   })
 

internal_packages/composer-signature/styles/composer-signature.less

@@ -187,3 +187,9 @@
     }
   }
 }
+.composer-full-window {
+  .message-item-white-wrap.composer-outer-wrap .composer-participant-field
+  .dropdown-component .signature-button-dropdown .only-item {
+    background: @background-primary;
+  }
+}

src/components/multiselect-dropdown.jsx

@@ -25,6 +25,7 @@ class MultiselectDropdown extends Component {
     onToggleItem: PropTypes.func,
     itemKey: PropTypes.func,
     buttonText: PropTypes.string,
+    itemContent: PropTypes.func,
   }
 
   static defaultProps = {
@@ -34,6 +35,7 @@ class MultiselectDropdown extends Component {
     onToggleItem: () => {},
     itemKey: () => {},
     buttonText: '',
+    itemContent: () => {},
   }
 
   componentDidUpdate() {
@@ -44,13 +46,13 @@ class MultiselectDropdown extends Component {
 
 
   _onItemClick = (item) => {
-    this.props.onToggleItem(item.id)
+    this.props.onToggleItem(item)
   }
 
   _renderItem = (item) => {
     const MenuItem = Menu.Item
     return (
-      <MenuItem onMouseDown={() => this._onItemClick(item)} checked={this.props.itemChecked(item)} key={this.props.itemKey(item)} content={item.label} />
+      <MenuItem onMouseDown={() => this._onItemClick(item)} checked={this.props.itemChecked(item)} key={this.props.itemKey(item)} content={this.props.itemContent(item)} />
     )
   }
 

src/flux/stores/signature-store.es6

@@ -45,8 +45,8 @@ class SignatureStore extends NylasStore {
     return this.defaultSignatures
   }
 
-  signatureForAccountId = (accountId) => {
-    return this.signatures[this.defaultSignatures[accountId]]
+  signatureForEmail = (email) => {
+    return this.signatures[this.defaultSignatures[email]]
   }
 
   _saveSignatures() {
@@ -102,11 +102,11 @@ class SignatureStore extends NylasStore {
     this._saveSignatures()
   }
 
-  _onToggleAccount = (accountId) => {
-    if (this.defaultSignatures[accountId] === this.selectedSignatureId) {
-      this.defaultSignatures[accountId] = null
+  _onToggleAccount = (email) => {
+    if (this.defaultSignatures[email] === this.selectedSignatureId) {
+      this.defaultSignatures[email] = null
     } else {
-      this.defaultSignatures[accountId] = this.selectedSignatureId
+      this.defaultSignatures[email] = this.selectedSignatureId
     }
 
     this.trigger()