fix(templates): QA pass on templates, resolve #2216

internal_packages/composer-templates/lib/main.es6

@@ -9,7 +9,7 @@ export function activate(state = {}) {
   this.preferencesTab = new PreferencesUIStore.TabItem({
     tabId: 'Quick Replies',
     displayName: 'Quick Replies',
-    component: require('./preferences-templates'),
+    component: require('./preferences-templates').default,
   });
   ComponentRegistry.register(TemplatePicker, {role: 'Composer:ActionButton'});
   ComponentRegistry.register(TemplateStatusBar, {role: 'Composer:Footer'});

internal_packages/composer-templates/lib/preferences-templates.jsx

@@ -70,7 +70,7 @@ class PreferencesTemplates extends React.Component {
   _getStateFromStores() {
     const templates = TemplateStore.items();
     let selectedTemplate = this.state ? this.state.selectedTemplate : null;
-    if (selectedTemplate && _.pluck(templates, "id").indexOf(selectedTemplate.id) === -1) {
+    if (selectedTemplate && !_.pluck(templates, "id").includes(selectedTemplate.id)) {
       selectedTemplate = null;
     } else if (!selectedTemplate) {
       selectedTemplate = templates.length > 0 ? templates[0] : null;
@@ -97,12 +97,12 @@ class PreferencesTemplates extends React.Component {
     if (this.state.selectedTemplate) {
       this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents);
     }
-    let selectedTemplate = null;
-    for (const template of Object.keys(this.state.templates)) {
-      if (template.id === event.target.value) {
-        selectedTemplate = template;
-      }
-    }
+
+    const selectedId = event.target.value;
+    const selectedTemplate = this.state.templates.find((template) =>
+      template.id === selectedId
+    );
+
     this.setState({
       selectedTemplate: selectedTemplate,
       selectedTemplateName: selectedTemplate ? selectedTemplate.name : null,
@@ -270,7 +270,8 @@ class PreferencesTemplates extends React.Component {
         </div>
         <div style={{marginTop: "5px"}}>
           <span className="editor-note">
-            {_.size(this._templateSaveQueue) > 0 ? "Saving changes..." : "Changes saved."}
+            {_.size(this._templateSaveQueue) === 0 ? "Changes saved." : ""}
+            &nbsp;
           </span>
           <span style={{"float": "right"}}>{this.state.editState === null ? deleteBtn : ""}</span>
         </div>

internal_packages/composer-templates/lib/template-picker.jsx

@@ -2,8 +2,8 @@ import {Actions, React, ReactDOM} from 'nylas-exports';
 import {Menu, RetinaImg} from 'nylas-component-kit';
 import TemplateStore from './template-store';
 
-class TemplatePicker extends React.Component {
-  static displayName = 'TemplatePicker';
+class TemplatePopover extends React.Component {
+  static displayName = 'TemplatePopover';
 
   static propTypes = {
     draftClientId: React.PropTypes.string,
@@ -18,40 +18,34 @@ class TemplatePicker extends React.Component {
   }
 
   componentDidMount() {
-    this.unsubscribe = TemplateStore.listen(this._onStoreChange.bind(this));
+    this.unsubscribe = TemplateStore.listen(() => {
+      this.setState({templates: TemplateStore.items()});
+    });
   }
 
   componentWillUnmount() {
-    if (this.unsubscribe) this.unsubscribe();
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
   }
 
-  _filteredTemplates(search = this.state.searchValue) {
-    const items = TemplateStore.items();
+  _filteredTemplates() {
+    const {searchValue, templates} = this.state;
 
-    if (!search.length) { return items; }
+    if (!searchValue.length) { return templates; }
 
-    return items.filter((t) => {
-      return t.name.toLowerCase().indexOf(search.toLowerCase()) === 0;
+    return templates.filter((t) => {
+      return t.name.toLowerCase().indexOf(searchValue.toLowerCase()) === 0;
     });
   }
 
-  _onStoreChange() {
-    return this.setState({
-      templates: this._filteredTemplates(),
-    });
-  }
-
-  _onSearchValueChange = () => {
-    const newSearch = event.target.value;
-    return this.setState({
-      searchValue: newSearch,
-      templates: this._filteredTemplates(newSearch),
-    });
+  _onSearchValueChange = (event) => {
+    this.setState({searchValue: event.target.value});
   };
 
   _onChooseTemplate = (template) => {
     Actions.insertTemplateId({templateId: template.id, draftClientId: this.props.draftClientId});
-    Actions.closePopover()
+    Actions.closePopover();
   }
 
   _onManageTemplates = () => {
@@ -70,7 +64,9 @@ class TemplatePicker extends React.Component {
     )
   };
 
-  _renderPopover() {
+  render() {
+    const filteredTemplates = this._filteredTemplates();
+
     const headerComponents = [
       <input
         type="text"
@@ -92,7 +88,7 @@ class TemplatePicker extends React.Component {
         className="template-picker"
         headerComponents={headerComponents}
         footerComponents={footerComponents}
-        items={this.state.templates}
+        items={filteredTemplates}
         itemKey={(item) => item.id}
         itemContent={(item) => item.name}
         onSelect={this._onChooseTemplate}
@@ -100,6 +96,23 @@ class TemplatePicker extends React.Component {
     );
   }
 
+}
+
+class TemplatePicker extends React.Component {
+  static displayName = 'TemplatePicker';
+
+  static propTypes = {
+    draftClientId: React.PropTypes.string,
+  };
+
+  _onClickButton = () => {
+    const buttonRect = ReactDOM.findDOMNode(this).getBoundingClientRect()
+    Actions.openPopover(
+      <TemplatePopover draftClientId={this.props.draftClientId} />,
+      {originRect: buttonRect, direction: 'up'}
+    )
+  };
+
   render() {
     return (
       <button
@@ -108,9 +121,15 @@ class TemplatePicker extends React.Component {
         onClick={this._onClickButton}
         title="Insert email template…"
       >
-        <RetinaImg url="nylas://composer-templates/assets/icon-composer-templates@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
+        <RetinaImg
+          url="nylas://composer-templates/assets/icon-composer-templates@2x.png"
+          mode={RetinaImg.Mode.ContentIsMask}
+        />
         &nbsp;
-        <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask} />
+        <RetinaImg
+          name="icon-composer-dropdown.png"
+          mode={RetinaImg.Mode.ContentIsMask}
+        />
       </button>
     );
   }

src/flux/stores/preferences-ui-store.es6

@@ -32,14 +32,16 @@ class PreferencesUIStore extends NylasStore {
   }
 
   setupListeners() {
-    this.listenTo(Actions.openPreferences, this.openPreferences);
-    ipcRenderer.on('open-preferences', this.openPreferences);
+    if (NylasEnv.isMainWindow()) {
+      this.listenTo(Actions.openPreferences, this.openPreferences);
+      ipcRenderer.on('open-preferences', this.openPreferences);
 
-    this.listenTo(Actions.switchPreferencesTab, this.switchPreferencesTab);
+      this.listenTo(Actions.switchPreferencesTab, this.switchPreferencesTab);
+    }
 
     NylasEnv.commands.add(document.body, 'core:show-keybindings', () => {
-      this.openPreferences();
-      this.switchPreferencesTab('Shortcuts');
+      Actions.openPreferences();
+      Actions.switchPreferencesTab('Shortcuts');
     });
   }