fix(sync-errors): Improve display of sync errors and offline status

- Make the retry interval go 2 sec, 3.4s, 6 sec...
- Only show the connection status bar if the interval is > 5 seconds, in case the error was temporary.
- Do not show sync errors in the sidebar. The only available action is "Try Again", and we try again on our own. The error is frustrating and the user can't do anything about it anyway.

internal_packages/notifications/lib/headers/connection-status-header.jsx

@@ -47,8 +47,13 @@ export default class ConnectionStatusHeader extends React.Component {
   }
 
   getStateFromStores() {
+    const nextRetryDelay = NylasSyncStatusStore.nextRetryDelay();
     const nextRetryTimestamp = NylasSyncStatusStore.nextRetryTimestamp();
-    const connected = NylasSyncStatusStore.connected();
+    let connected = NylasSyncStatusStore.connected();
+
+    if (nextRetryDelay < 5000) {
+      connected = true;
+    }
 
     let nextRetryText = null;
     if (!connected) {

internal_packages/notifications/lib/sidebar/initial-sync-activity.cjsx

@@ -27,12 +27,10 @@ class InitialSyncActivity extends React.Component
     fetched = 0
     totalProgress = 0
     incomplete = 0
-    error = null
 
     for acctId, state of @state.sync
       for model, modelState of state
         incomplete += 1 unless modelState.complete
-        error ?= modelState.error
         if modelState.count
           count += modelState.count / 1
           fetched += modelState.fetched / 1
@@ -45,13 +43,6 @@ class InitialSyncActivity extends React.Component
 
     if incomplete is 0
       return false
-    else if error
-      <div className={classSet} key="initial-sync">
-        <div className="inner">An error occurred while syncing your mailbox. Sync will resume in a moment&hellip;
-          <div className="btn" style={marginTop:10} onClick={@_onTryAgain}>Try Again Now</div>
-        </div>
-        {@_expandedSyncState()}
-      </div>
     else
       <div className={classSet} key="initial-sync" onClick={=> @setState expandedSync: !@state.expandedSync}>
         {@_renderProgressBar(totalProgress)}

internal_packages/notifications/stylesheets/notifications.less

@@ -136,7 +136,7 @@
     background-color: #615396;
   }
   .notification-error {
-    background-color: @background-color-error;
+    background: linear-gradient(to top, darken(@background-color-error, 4%) 0%, @background-color-error 100%);
     border-color: @background-color-error;
     color: @color-error;
   }
@@ -144,7 +144,7 @@
     border-color: @background-color-success;
   }
   .notification-offline {
-    background-color: #CC9900;
+    background: linear-gradient(to top, darken(#CC9900, 4%) 0%, #CC9900 100%);
     border-color: darken(#CC9900, 5%);
   }
 
@@ -152,7 +152,6 @@
     display:flex;
     font-size: @font-size-base;
     color:@text-color-inverse;
-    border-top:1px solid rgba(0,0,0,0.25);
     border-bottom:1px solid rgba(0,0,0,0.25);
     padding-left: @padding-base-horizontal;
     line-height: @line-height-base * 1.5;
@@ -213,12 +212,3 @@ body.platform-win32 {
     }
   }
 }
-
-// Activity Error Header
-
-.account-error-header.notifications-sticky {
- .notifications-sticky-item {
-   background-color: initial;
-   background: linear-gradient(to top, #ca2541 0%, #d55268 100%);
- }
-}

internal_packages/worker-sync/lib/nylas-sync-worker.coffee

@@ -18,7 +18,7 @@ class BackoffTimer
     @_timeout = null
 
   backoff: =>
-    @_delay = Math.min(@_delay * 1.4, 5 * 1000 * 60) # Cap at 5 minutes
+    @_delay = Math.min(@_delay * 1.7, 5 * 1000 * 60) # Cap at 5 minutes
     if not NylasEnv.inSpecMode()
       console.log("Backing off after sync failure. Will retry in #{Math.floor(@_delay / 1000)} seconds.")
 
@@ -30,7 +30,7 @@ class BackoffTimer
     , @_delay
 
   resetDelay: =>
-    @_delay = 20 * 1000
+    @_delay = 2 * 1000
 
   getCurrentDelay: =>
     @_delay
@@ -277,7 +277,8 @@ class NylasSyncWorker
   _backoff: =>
     @_resumeTimer.backoff()
     @_resumeTimer.start()
-    @_state.nextRetryTimestamp = Date.now() + @_resumeTimer.getCurrentDelay()
+    @_state.nextRetryDelay = @_resumeTimer.getCurrentDelay()
+    @_state.nextRetryTimestamp = Date.now() + @_state.nextRetryDelay
 
   updateTransferState: (model, updatedKeys) ->
     @_state[model] = _.extend(@_state[model], updatedKeys)

src/flux/nylas-api.coffee

@@ -256,7 +256,7 @@ class NylasAPI
       type: 'error'
       tag: '401'
       sticky: true
-      message: "Action failed: There was an error syncing with #{email}. You
+      message: "An mailbox action for #{email} could not be completed. You
                 may not be able to send or receive mail.",
       icon: 'fa-sign-out'
       actions: [{

src/flux/stores/nylas-sync-status-store.coffee

@@ -86,4 +86,9 @@ class NylasSyncStatusStore extends NylasStore
       state.nextRetryTimestamp
     _.compact(retryDates).sort((a, b) => a < b).pop()
 
+  nextRetryDelay: =>
+    retryDelays = _.values(@_statesByAccount).map (state) ->
+      state.nextRetryDelay
+    _.compact(retryDelays).sort((a, b) => a < b).pop()
+
 module.exports = new NylasSyncStatusStore()

static/variables/ui-variables.less

@@ -217,7 +217,7 @@ rgba(253,253,253,0.75) 100%);
 @background-color-info:    @blue-light;
 @background-color-success: #00ac6f;
 @background-color-warning: #ff4800;
-@background-color-error:   #f15f4b;
+@background-color-error:   #ca2541;
 @background-color-pending: #b4babd;
 
 //== Menus