feat(shortcuts): Add listeners for unread/important keyboard shortcuts

Summary:
- Adds KeyCommandRegions to hook up missing listeners for marking as unread and
  important keyboard shortcuts
- Updates specs

Test Plan: - All tests pass

Reviewers: evan, bengotow

Reviewed By: bengotow

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

internal_packages/message-list/lib/thread-toggle-unread-button.cjsx

@@ -1,6 +1,6 @@
 React = require 'react'
 {Actions, FocusedContentStore, ChangeUnreadTask} = require 'nylas-exports'
-{RetinaImg} = require 'nylas-component-kit'
+{RetinaImg, KeyCommandsRegion} = require 'nylas-component-kit'
 
 class ThreadToggleUnreadButton extends React.Component
   @displayName: "ThreadToggleUnreadButton"
@@ -9,18 +9,27 @@ class ThreadToggleUnreadButton extends React.Component
   render: =>
     fragment = if @props.thread?.unread then "read" else "unread"
 
-    <button className="btn btn-toolbar"
+    <KeyCommandsRegion globalHandlers={@_globalHandlers()} >
-            style={order: -105}
+      <button className="btn btn-toolbar"
-            title="Mark as #{fragment}"
+              style={order: -105}
-            onClick={@_onClick}>
+              title="Mark as #{fragment}"
-      <RetinaImg name="toolbar-markas#{fragment}.png"
+              onClick={@_onClick}>
-                 mode={RetinaImg.Mode.ContentIsMask} />
+        <RetinaImg name="toolbar-markas#{fragment}.png"
-    </button>
+                   mode={RetinaImg.Mode.ContentIsMask} />
+      </button>
+    </KeyCommandsRegion>
+
+  _globalHandlers: =>
+    'application:mark-as-unread': (e) => @_setUnread(e, true)
+    'application:mark-as-read': (e) => @_setUnread(e, false)
 
   _onClick: (e) =>
+    @_setUnread(e, !@props.thread.unread)
+
+  _setUnread: (e, unread)=>
     task = new ChangeUnreadTask
       thread: @props.thread
-      unread: !@props.thread.unread
+      unread: unread
     Actions.queueTask(task)
     Actions.popSheet()
     e.stopPropagation()

internal_packages/message-list/spec/message-toolbar-items-spec.cjsx

@@ -49,7 +49,7 @@ describe "MessageToolbarItem marking as unread", ->
 
   it "queues a task to change unread status to true", ->
     spyOn Actions, "queueTask"
-    ReactTestUtils.Simulate.click React.findDOMNode(markUnreadBtn)
+    ReactTestUtils.Simulate.click React.findDOMNode(markUnreadBtn).childNodes[0]
 
     changeUnreadTask = Actions.queueTask.calls[0].args[0]
     expect(changeUnreadTask instanceof ChangeUnreadTask).toBe true
@@ -58,6 +58,7 @@ describe "MessageToolbarItem marking as unread", ->
 
   it "returns to the thread list", ->
     spyOn Actions, "popSheet"
-    ReactTestUtils.Simulate.click React.findDOMNode(markUnreadBtn)
+    ReactTestUtils.Simulate.click React.findDOMNode(markUnreadBtn).childNodes[0]
 
     expect(Actions.popSheet).toHaveBeenCalled()
+

src/components/mail-important-icon.cjsx

@@ -6,6 +6,7 @@ React = require 'react'
  ChangeLabelsTask,
  CategoryStore,
  AccountStore} = require 'nylas-exports'
+{KeyCommandsRegion} = require 'nylas-component-kit'
 
 class MailImportantIcon extends React.Component
   @displayName: 'MailImportantIcon'
@@ -38,18 +39,27 @@ class MailImportantIcon extends React.Component
     isImportant = _.findWhere(@props.thread.labels, {id: importantId})?
 
     activeClassname = if isImportant then "active" else ""
-    <div className="mail-important-icon #{activeClassname}"
+    <KeyCommandsRegion globalHandlers={@_globalHandlers()}>
-         title={if isImportant then "Mark as unimportant" else "Mark as important"}
+      <div className="mail-important-icon #{activeClassname}"
-         onClick={@_onToggleImportant}></div>
+           title={if isImportant then "Mark as unimportant" else "Mark as important"}
+           onClick={@_onToggleImportant}></div>
+    </KeyCommandsRegion>
+
+  _globalHandlers: =>
+    'application:mark-as-important': (e) => @_setImportant(e, true)
+    'application:mark-as-unimportant': (e) => @_setImportant(e, false)
 
   _onToggleImportant: (event) =>
-    importantLabel = CategoryStore.getStandardCategory('important')
     isImportant = _.findWhere(@props.thread.labels, {id: importantLabel.id})?
+    @_setImportant(event, !isImportant)
 
-    if isImportant
+  _setImportant: (event, important) =>
-      task = new ChangeLabelsTask(thread: @props.thread, labelsToRemove: [importantLabel], labelsToAdd: [])
+    importantLabel = CategoryStore.getStandardCategory('important')
-    else
+
+    if important
       task = new ChangeLabelsTask(thread: @props.thread, labelsToAdd: [importantLabel], labelsToRemove: [])
+    else
+      task = new ChangeLabelsTask(thread: @props.thread, labelsToRemove: [importantLabel], labelsToAdd: [])
 
     Actions.queueTask(task)