From 17ea99d2ffa1d121c8953c9689f1a9c1e1ac0be1 Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Wed, 24 Feb 2016 16:05:16 -0800
Subject: [PATCH] fix(error-handling): handle offline for link tracking &
 read-receipts

Fix offline error handling of link tracking and read receipts

Fix ellipses for tooltips

Allow you to change the title in the error box
---
 .../lib/template-picker.jsx                   |  2 +-
 .../composer-translate/lib/main.cjsx          |  2 +-
 .../composer/lib/expanded-participants.cjsx   |  2 +-
 .../lib/link-tracking-button.jsx              |  7 ++++--
 .../lib/open-tracking-button.jsx              |  7 ++++--
 .../quick-schedule/lib/calendar-button.cjsx   |  2 +-
 .../send-later/lib/send-later-popover.jsx     |  2 +-
 .../metadata-composer-toggle-button.jsx       | 24 ++++++++++++++++---
 src/nylas-env.coffee                          | 13 ++++++++--
 9 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/internal_packages/composer-templates/lib/template-picker.jsx b/internal_packages/composer-templates/lib/template-picker.jsx
index e92ebe744..deff81100 100644
--- a/internal_packages/composer-templates/lib/template-picker.jsx
+++ b/internal_packages/composer-templates/lib/template-picker.jsx
@@ -64,7 +64,7 @@ class TemplatePicker extends React.Component {
 
   render() {
     const button = (
-      <button className="btn btn-toolbar narrow" title="Insert email template...">
+      <button className="btn btn-toolbar narrow" title="Insert email template">
         <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}/>
diff --git a/internal_packages/composer-translate/lib/main.cjsx b/internal_packages/composer-translate/lib/main.cjsx
index 04743585a..f7d59bc9f 100644
--- a/internal_packages/composer-translate/lib/main.cjsx
+++ b/internal_packages/composer-translate/lib/main.cjsx
@@ -71,7 +71,7 @@ class TranslateButton extends React.Component
   # `RetinaImg` will automatically chose the best image format for our display.
   #
   _renderButton: =>
-    <button className="btn btn-toolbar" title="Translate email body...">
+    <button className="btn btn-toolbar" title="Translate email body">
       <RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="nylas://composer-translate/assets/icon-composer-translate@2x.png" />
       &nbsp;
       <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>
diff --git a/internal_packages/composer/lib/expanded-participants.cjsx b/internal_packages/composer/lib/expanded-participants.cjsx
index 0f4c9462f..9f5f9eb1b 100644
--- a/internal_packages/composer/lib/expanded-participants.cjsx
+++ b/internal_packages/composer/lib/expanded-participants.cjsx
@@ -111,7 +111,7 @@ class ExpandedParticipants extends React.Component
 
           { if @props.mode is "inline"
             <span className="header-action show-popout"
-                  title="Popout composer"
+                  title="Popout composer…"
                   style={paddingLeft: "1.5em"}
                   onClick={@props.onPopoutComposer}>
               <RetinaImg name="composer-popout.png"
diff --git a/internal_packages/link-tracking/lib/link-tracking-button.jsx b/internal_packages/link-tracking/lib/link-tracking-button.jsx
index bb9444ee5..87b550c2b 100644
--- a/internal_packages/link-tracking/lib/link-tracking-button.jsx
+++ b/internal_packages/link-tracking/lib/link-tracking-button.jsx
@@ -1,5 +1,5 @@
 // import {DraftStore, React, Actions, NylasAPI, DatabaseStore, Message, Rx} from 'nylas-exports'
-import {React} from 'nylas-exports'
+import {React, APIError, NylasAPI} from 'nylas-exports'
 import {MetadataComposerToggleButton} from 'nylas-component-kit'
 import {PLUGIN_ID, PLUGIN_NAME} from './link-tracking-constants'
 
@@ -16,7 +16,10 @@ export default class LinkTrackingButton extends React.Component {
   }
 
   _errorMessage(error) {
-    return `Sorry, we were unable to save your link tracking settings. ${error.message}`
+    if (error instanceof APIError && error.statusCode === NylasAPI.TimeoutErrorCode) {
+      return `Link tracking does not work offline. Please re-enable when you come back online.`
+    }
+    return `Unfortunately, link tracking servers are currently not available. Please try again later.`
   }
 
   render() {
diff --git a/internal_packages/open-tracking/lib/open-tracking-button.jsx b/internal_packages/open-tracking/lib/open-tracking-button.jsx
index 34e24c14f..31c2e30c7 100644
--- a/internal_packages/open-tracking/lib/open-tracking-button.jsx
+++ b/internal_packages/open-tracking/lib/open-tracking-button.jsx
@@ -1,5 +1,5 @@
 // import {DraftStore, React, Actions, NylasAPI, DatabaseStore, Message, Rx} from 'nylas-exports'
-import {React} from 'nylas-exports'
+import {React, APIError, NylasAPI} from 'nylas-exports'
 import {MetadataComposerToggleButton} from 'nylas-component-kit'
 import {PLUGIN_ID, PLUGIN_NAME} from './open-tracking-constants'
 
@@ -16,7 +16,10 @@ export default class OpenTrackingButton extends React.Component {
   }
 
   _errorMessage(error) {
-    return `Sorry, we were unable to save your read receipt settings. ${error.message}`
+    if (error instanceof APIError && error.statusCode === NylasAPI.TimeoutErrorCode) {
+      return `Read receipts do not work offline. Please re-enable when you come back online.`
+    }
+    return `Unfortunately, read receipts are currently not available. Please try again later.`
   }
 
   render() {
diff --git a/internal_packages/quick-schedule/lib/calendar-button.cjsx b/internal_packages/quick-schedule/lib/calendar-button.cjsx
index 706ef61ed..c7fc2e94e 100644
--- a/internal_packages/quick-schedule/lib/calendar-button.cjsx
+++ b/internal_packages/quick-schedule/lib/calendar-button.cjsx
@@ -5,7 +5,7 @@ class CalendarButton extends React.Component
   @displayName: 'CalendarButton'
 
   render: =>
-    <button className="btn btn-toolbar" onClick={@_onClick} title="Insert calendar availability...">
+    <button className="btn btn-toolbar" onClick={@_onClick} title="Insert calendar availability…">
       <RetinaImg url="nylas://quick-schedule/assets/icon-composer-quickschedule@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>
 
diff --git a/internal_packages/send-later/lib/send-later-popover.jsx b/internal_packages/send-later/lib/send-later-popover.jsx
index fb846dded..52024cb70 100644
--- a/internal_packages/send-later/lib/send-later-popover.jsx
+++ b/internal_packages/send-later/lib/send-later-popover.jsx
@@ -148,7 +148,7 @@ class SendLaterPopover extends Component {
       }
     }
     return (
-      <button className={className} title="Send later...">
+      <button className={className} title="Send later">
         <RetinaImg name="icon-composer-sendlater.png" mode={RetinaImg.Mode.ContentIsMask}/>
         {dateInterpretation}
         <span>&nbsp;</span>
diff --git a/src/components/metadata-composer-toggle-button.jsx b/src/components/metadata-composer-toggle-button.jsx
index 8d937c650..f763ac59b 100644
--- a/src/components/metadata-composer-toggle-button.jsx
+++ b/src/components/metadata-composer-toggle-button.jsx
@@ -1,4 +1,4 @@
-import {DraftStore, React, Actions, NylasAPI, DatabaseStore, Message, Rx} from 'nylas-exports'
+import {DraftStore, React, Actions, NylasAPI, APIError, DatabaseStore, Message, Rx} from 'nylas-exports'
 import {RetinaImg} from 'nylas-component-kit'
 import classnames from 'classnames'
 
@@ -79,14 +79,32 @@ export default class MetadataComposerToggleButton extends React.Component {
       })
       .catch((error) => {
         this.setState({enabled: false});
-        NylasEnv.reportError(error);
-        NylasEnv.showErrorDialog(this.props.errorMessage(error));
+
+        if (this._shouldStickFalseOnError(error)) {
+          NylasEnv.config.set(this._configKey(), false)
+        }
+
+        let title = "Error"
+        if (!(error instanceof APIError)) {
+          NylasEnv.reportError(error);
+        } else if (error.statusCode === 400) {
+          NylasEnv.reportError(error);
+        } else if (error.statusCode === NylasAPI.TimeoutErrorCode) {
+          title = "Offline"
+        }
+
+        NylasEnv.showErrorDialog({title, message: this.props.errorMessage(error)});
       })
     }).finally(() => {
       this.setState({pending: false})
     });
   }
 
+  _shouldStickFalseOnError(error) {
+    return this.props.stickyToggle && (error instanceof APIError) &&
+      (NylasAPI.PermanentErrorCodes.indexOf(error.statusCode) === -1);
+  }
+
   _onClick = () => {
     // Toggle.
     if (this.state.pending) { return; }
diff --git a/src/nylas-env.coffee b/src/nylas-env.coffee
index 5332416ed..771eef137 100644
--- a/src/nylas-env.coffee
+++ b/src/nylas-env.coffee
@@ -874,12 +874,21 @@ class NylasEnvConstructor extends Model
     dialog = remote.require('dialog')
     callback(dialog.showSaveDialog(@getCurrentWindow(), options))
 
-  showErrorDialog: (message) ->
+  showErrorDialog: (messageData) ->
+    if _.isString(messageData) or _.isNumber(messageData)
+      message = messageData
+      title = "Error"
+    else if _.isObject(messageData)
+      message = messageData.message
+      title = messageData.title
+    else
+      throw new Error("Must pass a valid message to show dialog", message)
+
     dialog = remote.require('dialog')
     dialog.showMessageBox null, {
       type: 'warning'
       buttons: ['Okay'],
-      message: "Error"
+      message: title
       detail: message
     }