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

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}/>

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}/>

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"

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() {

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() {

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>
 

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>

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; }

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
     }