Add /very/ basic initial error status to dashboard

- TODO: add option to solve the error

packages/nylas-dashboard/app.js

@@ -20,8 +20,8 @@ DatabaseConnector.forShared().then(({Account}) => {
           websocket: {
             only: true,
             connect: (wss, ws) => {
-              Account.findAll().then((accts) => {
-                accts.forEach((acct) => {
+              Account.findAll().then((accounts) => {
+                accounts.forEach((acct) => {
                   ws.send(JSON.stringify({ cmd: "ACCOUNT", payload: acct }));
                 });
               });

packages/nylas-dashboard/public/css/app.css

@@ -7,7 +7,6 @@ body {
 .account {
   display:inline-block;
   width: 300px;
-  height: 200px;
   background-color: white;
   padding:15px;
 }
@@ -15,3 +14,19 @@ body {
 .account h3 {
   margin: 0; padding: 0;
 }
+
+.account.errored {
+  background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+  border: 1px solid;
+  color: #a94442;
+  border-radius: 4px;
+  background-color: #f2dede;
+}
+
+.account .error pre {
+  text-overflow: ellipsis;
+  width: inherit;
+  overflow: hidden;
+}

packages/nylas-dashboard/public/js/app.jsx

@@ -1,18 +1,45 @@
 /* eslint react/react-in-jsx-scope: 0*/
 
+class ErrorsRoot extends React.Component {
+  render() {
+    return <div />
+  }
+}
+
 class Account extends React.Component {
   propTypes: {
     account: React.PropTypes.object,
     assignment: React.PropTypes.string,
   }
 
+  renderError() {
+    const {account} = this.props
+    if (account.sync_error != null) {
+      const error = {
+        message: account.sync_error.message,
+        stack: account.sync_error.stack.split('\n').slice(0, 4),
+      }
+      return (
+        <div className="error">
+          <strong> Sync Errored: </strong>
+          <pre>
+            {JSON.stringify(error, null, 2)}
+          </pre>
+        </div>
+      )
+    }
+    return <span />
+  }
+
   render() {
     const {account, assignment} = this.props;
+    const errorClass = account.sync_error ? ' errored' : ''
     return (
-      <div className="account">
+      <div className={`account${errorClass}`}>
         <h3>{account.email_address}</h3>
         <strong>{assignment}</strong>
         <pre>{JSON.stringify(account.sync_policy, null, 2)}</pre>
+        {this.renderError()}
       </div>
     );
   }