fix(send-later): Resolves a variety of small bugs from QA

internal_packages/composer-translate/lib/main.cjsx

@@ -61,6 +61,7 @@ class TranslateButton extends React.Component
       <Menu items={ Object.keys(YandexLanguages) }
             itemKey={ (item) -> item }
             itemContent={ (item) -> item }
+            defaultSelectedIndex={-1}
             onSelect={@_onTranslate}
             />
     </Popover>

internal_packages/send-later/lib/send-later-popover.jsx

@@ -23,7 +23,7 @@ class SendLaterPopover extends Component {
   static displayName = 'SendLaterPopover';
 
   static propTypes = {
-    draftClientId: PropTypes.string,
+    draftClientId: PropTypes.string.isRequired,
   };
 
   constructor(props) {
@@ -38,9 +38,15 @@ class SendLaterPopover extends Component {
     this._subscription = Rx.Observable.fromQuery(
       DatabaseStore.findBy(Message, {clientId: this.props.draftClientId})
     ).subscribe((draft)=> {
-      const scheduledDate = SendLaterStore.getScheduledDateForMessage(draft);
-      if (scheduledDate !== this.state.scheduledDate) {
-        this.setState({scheduledDate});
+      const nextScheduledDate = SendLaterStore.getScheduledDateForMessage(draft);
+
+      if (nextScheduledDate !== this.state.scheduledDate) {
+        const isPopout = (NylasEnv.getWindowType() === "composer");
+        const isFinishedSelecting = ((this.state.scheduledDate === 'saving') && (nextScheduledDate !== null));
+        if (isPopout && isFinishedSelecting) {
+          NylasEnv.close();
+        }
+        this.setState({scheduledDate: nextScheduledDate});
       }
     });
   }
@@ -51,29 +57,52 @@ class SendLaterPopover extends Component {
 
   onSelectMenuOption = (optionKey)=> {
     const date = SendLaterOptions[optionKey]();
-    const formatted = DateUtils.format(date.utc())
-
-    SendLaterActions.sendLater(this.props.draftClientId, formatted)
-    this.setState({scheduledDate: 'saving', inputDate: null})
-    this.refs.popover.close()
+    const formatted = DateUtils.format(date.utc());
+    this.onSelectDate(date);
   };
 
+  onSelectCustomOption = (value)=> {
+    const date = DateUtils.fromString(value);
+    if (date) {
+      this.onSelectDate(date);
+    } else {
+      NylasEnv.showErrorDialog(`Sorry, we can't parse ${value} as a valid date.`);
+    }
+  }
+
+  onSelectDate = (date)=> {
+    const formatted = DateUtils.format(date.utc());
+    SendLaterActions.sendLater(this.props.draftClientId, formatted);
+    this.setState({scheduledDate: 'saving', inputDate: null});
+    this.refs.popover.close();
+  }
+
   onCancelSendLater = ()=> {
-    SendLaterActions.cancelSendLater(this.props.draftClientId)
-    this.setState({inputDate: null})
-    this.refs.popover.close()
+    SendLaterActions.cancelSendLater(this.props.draftClientId);
+    this.setState({inputDate: null});
+    this.refs.popover.close();
   };
 
   renderCustomTimeSection() {
-    const updateInputDateValue = _.debounce((value)=> {
-      this.setState({inputDate: DateUtils.fromString(value)})
-    }, 250);
+    const onChange = (event)=> {
+      this.setState({inputDate: DateUtils.fromString(event.target.value)});
+    }
+
+    const onKeyDown = (event)=> {
+      // we need to swallow these events so they don't reach the menu
+      // containing the text input, but only when you've typed something.
+      const val = event.target.value;
+      if ((val.length > 0) && ((event.keyCode === 13) || (event.keyCode === 39))) {
+        this.onSelectCustomOption(val);
+        event.stopPropagation();
+      }
+    };
 
     let dateInterpretation = false;
     if (this.state.inputDate) {
-      dateInterpretation = (<em>
+      dateInterpretation = (<span className="time">
         {DateUtils.format(this.state.inputDate, DATE_FORMAT_LONG)}
-      </em>);
+      </span>);
     }
 
     return (
@@ -81,8 +110,9 @@ class SendLaterPopover extends Component {
         <input
           tabIndex="1"
           type="text"
-          placeholder="Or, 'next monday at 2PM'"
-          onChange={event=> updateInputDateValue(event.target.value)}/>
+          placeholder="Or, 'next Monday at 2PM'"
+          onKeyDown={onKeyDown}
+          onChange={onChange}/>
         {dateInterpretation}
       </div>
     )
@@ -92,7 +122,7 @@ class SendLaterPopover extends Component {
     const date = SendLaterOptions[optionKey]();
     const formatted = DateUtils.format(date, DATE_FORMAT_SHORT);
     return (
-      <div className="send-later-option">{optionKey}<em>{formatted}</em></div>
+      <div className="send-later-option">{optionKey}<span className="time">{formatted}</span></div>
     );
   }
 
@@ -152,9 +182,11 @@ class SendLaterPopover extends Component {
         style={{order: -103}}
         className="send-later"
         buttonComponent={this.renderButton()}>
-        <Menu items={ Object.keys(SendLaterOptions) }
+        <Menu ref="menu"
+              items={ Object.keys(SendLaterOptions) }
               itemKey={ (item)=> item }
               itemContent={this.renderMenuOption}
+              defaultSelectedIndex={-1}
               footerComponents={footerComponents}
               onSelect={this.onSelectMenuOption}
               />

internal_packages/send-later/lib/send-later-store.js

@@ -28,32 +28,30 @@ class SendLaterStore extends NylasStore {
   };
 
   setMetadata = (draftClientId, metadata)=> {
-    return (
-      DatabaseStore.modelify(Message, [draftClientId])
-      .then((messages)=> {
-        const {accountId} = messages[0];
-        return NylasAPI.authPlugin(this.pluginId, PLUGIN_NAME, accountId);
-      })
+    DatabaseStore.modelify(Message, [draftClientId]).then((messages)=> {
+      const {accountId} = messages[0];
+
+      NylasAPI.authPlugin(this.pluginId, PLUGIN_NAME, accountId)
       .then(()=> {
         Actions.setMetadata(messages, this.pluginId, metadata);
       })
       .catch((error)=> {
         NylasEnv.reportError(error);
         NylasEnv.showErrorDialog(`Sorry, we were unable to schedule this message. ${error.message}`);
-      })
-    );
+      });
+    });
   };
 
   onSendLater = (draftClientId, sendLaterDate)=> {
-    this.setMetadata(draftClientId, {sendLaterDate})
+    this.setMetadata(draftClientId, {sendLaterDate});
   };
 
   onCancelSendLater = (draftClientId)=> {
-    this.setMetadata(draftClientId, {sendLaterDate: null})
+    this.setMetadata(draftClientId, {sendLaterDate: null});
   };
 
   deactivate = ()=> {
-    this.unsubscribers.forEach(unsub => unsub())
+    this.unsubscribers.forEach(unsub => unsub());
   };
 }
 

internal_packages/send-later/stylesheets/send-later.less

@@ -2,7 +2,7 @@
 
 
 .send-later {
-  em {
+  .time {
     font-size: 0.9em;
     opacity: 0.6;
   }
@@ -18,13 +18,14 @@
       border-top-left-radius: @border-radius-base;
     }
     .item {
-      em {
+      .time {
         display: none;
         float: right;
         padding-right: @padding-base-horizontal;
       }
+      &.selected,
       &:hover {
-        em {
+        .time {
           display: inline-block;
         }
       }
@@ -35,7 +36,7 @@
   }
   .custom-time-section {
     padding: @padding-base-vertical  @padding-base-horizontal;
-    em {
+    .time {
       color: @text-color-subtle;
     }
   }
@@ -59,7 +60,7 @@
   display: flex;
   align-items: center;
 
-  em {
+  .time {
     font-size: 0.9em;
     opacity: 0.62;
   }

internal_packages/thread-snooze/lib/snooze-popover-body.jsx

@@ -139,7 +139,7 @@ class SnoozePopoverBody extends Component {
         <input
           type="text"
           tabIndex="1"
-          placeholder="Or type a time, like 'next monday at 2PM'"
+          placeholder="Or type a time, like 'next Monday at 2PM'"
           onMouseDown={this.onInputMouseDown}
           onKeyDown={this.onInputKeyDown}
           onChange={this.onInputChange}/>

src/date-utils.es6

@@ -82,7 +82,7 @@ const DateUtils = {
 
   /**
    * Can take almost any string.
-   * e.g. "Next monday at 2pm"
+   * e.g. "Next Monday at 2pm"
    * @param {string} dateLikeString - a string representing a date.
    * @return {moment} - moment object representing date
    */