Add account filtering (by error status) to dashboard

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

@@ -53,7 +53,7 @@ pre {
   margin-bottom: 10px;
 }
 
-.sync-policy .action-link {
+.action-link {
   display: inline-block;
   margin: 5px;
   color: rgba(16, 83, 161, 0.88);

packages/nylas-dashboard/public/index.html

@@ -5,6 +5,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="/js/sync-policy.jsx" type="text/babel"></script>
   <script src="/js/set-all-sync-policies.jsx" type="text/babel"></script>
+  <script src="/js/account-filter.jsx" type="text/babel"></script>
   <script src="/js/app.jsx" type="text/babel"></script>
   <link rel='stylesheet' type="text/css" href="./css/app.css" />
   <link rel='shortcut icon' href='favicon.png' / >

packages/nylas-dashboard/public/js/account-filter.jsx

@@ -0,0 +1,26 @@
+const React = window.React;
+
+function AccountFilter(props) {
+  return (
+    <div>
+      Display: <select {...props}>
+        <option value={AccountFilter.states.all}>All Accounts</option>
+        <option value={AccountFilter.states.errored}>Accounts with Errors</option>
+        <option value={AccountFilter.states.notErrored}>Accounts without Errors</option>
+      </select>
+    </div>
+  )
+}
+
+AccountFilter.propTypes = {
+  onChange: React.PropTypes.func,
+  id: React.PropTypes.string,
+}
+
+AccountFilter.states = {
+  all: "all",
+  errored: "errored",
+  notErrored: "not-errored",
+};
+
+window.AccountFilter = AccountFilter;

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

@@ -1,7 +1,7 @@
 /* eslint react/react-in-jsx-scope: 0*/
 const React = window.React;
 const ReactDOM = window.ReactDOM;
-const {SyncPolicy, SetAllSyncPolicies} = window;
+const {SyncPolicy, SetAllSyncPolicies, AccountFilter} = window;
 
 class Account extends React.Component {
   renderError() {
@@ -69,6 +69,7 @@ class Root extends React.Component {
       accounts: {},
       assignments: {},
       activeAccountIds: [],
+      visibleAccounts: AccountFilter.states.all,
     };
   }
 
@@ -118,10 +119,27 @@ class Root extends React.Component {
     this.setState({accounts});
   }
 
+  onFilter() {
+    this.setState({visibleAccounts: document.getElementById('account-filter').value});
+  }
+
   render() {
-    const ids = Object.keys(this.state.accounts);
+    let ids = Object.keys(this.state.accounts);
+
+    switch (this.state.visibleAccounts) {
+      case AccountFilter.states.errored:
+        ids = ids.filter((id) => this.state.accounts[id].sync_error)
+        break;
+      case AccountFilter.states.notErrored:
+        ids = ids.filter((id) => !this.state.accounts[id].sync_error)
+        break;
+      default:
+        break;
+    }
+
     return (
       <div>
+        <AccountFilter id="account-filter" onChange={() => this.onFilter.call(this)} />
         <SetAllSyncPolicies accountIds={ids.map((id) => parseInt(id, 10))} />
         {
           ids.sort((a, b) => a.localeCompare(b)).map((id) =>

packages/nylas-dashboard/public/js/set-all-sync-policies.jsx

@@ -44,7 +44,7 @@ class SetAllSyncPolicies extends React.Component {
             <textarea id="sync-policy-all">
             </textarea>
             <button onClick={() => this.applyToAllAccounts.call(this, this.props.accountIds)}>
-              Apply To All Accounts
+              Apply To All Displayed Accounts
             </button>
             <span className="action-link" onClick={() => this.cancel.call(this)}> Cancel </span>
           </div>
@@ -52,7 +52,9 @@ class SetAllSyncPolicies extends React.Component {
       )
     }
     return (
-      <button id="set-all-sync" onClick={() => this.edit.call(this)}> Set All Sync Policies </button>
+      <span className="action-link" id="set-all-sync" onClick={() => this.edit.call(this)}>
+        Set sync policies for currently displayed accounts
+      </span>
     )
   }
 }