Add ability to apply a sync policy to all accounts from dashboard

packages/nylas-core/scheduler-utils.js

@@ -32,6 +32,19 @@ const assignPolicy = (accountId, policy) => {
   });
 }
 
+const assignPolicyToAcounts = (accountIds, policy) => {
+  console.log(`Changing policy for ${accountIds} to ${JSON.stringify(policy)}`)
+  const DatabaseConnector = require('./database-connector');
+  return DatabaseConnector.forShared().then(({Account}) => {
+    Account.findAll({where: {id: {$or: accountIds}}}).then((accounts) => {
+      for (const account of accounts) {
+        account.syncPolicy = policy;
+        account.save()
+      }
+    })
+  });
+}
+
 const checkIfAccountIsActive = (accountId) => {
   const client = PubsubConnector.broadcastClient();
   const key = ACTIVE_KEY_FOR(accountId);
@@ -69,6 +82,7 @@ module.exports = {
   CLAIM_DURATION,
 
   assignPolicy,
+  assignPolicyToAcounts,
   forEachAccountList,
   listActiveAccounts,
   markAccountIsActive,

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

@@ -48,6 +48,11 @@ pre {
   overflow: hidden;
 }
 
+#set-all-sync {
+  display: block;
+  margin-bottom: 10px;
+}
+
 .sync-policy .action-link {
   display: inline-block;
   margin: 5px;
@@ -59,4 +64,22 @@ pre {
 .sync-policy textarea {
   width: 100%;
   height: 200px;
+  white-space: pre;
+}
+
+.modal {
+  background-color: white;
+  width: 50%;
+  margin: auto;
+  padding: 20px;
+}
+
+.modal-bg {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding-top: 10%;
 }

packages/nylas-dashboard/public/index.html

@@ -4,6 +4,7 @@
   <script src="/js/react-dom.js"></script>
   <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/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/app.jsx

@@ -1,7 +1,7 @@
 /* eslint react/react-in-jsx-scope: 0*/
 const React = window.React;
 const ReactDOM = window.ReactDOM;
-const SyncPolicy = window.SyncPolicy;
+const {SyncPolicy, SetAllSyncPolicies} = window;
 
 class Account extends React.Component {
   renderError() {
@@ -119,10 +119,12 @@ class Root extends React.Component {
   }
 
   render() {
+    const ids = Object.keys(this.state.accounts);
     return (
       <div>
+        <SetAllSyncPolicies accountIds={ids.map((id) => parseInt(id, 10))} />
         {
-          Object.keys(this.state.accounts).sort((a, b) => a.localeCompare(b)).map((id) =>
+          ids.sort((a, b) => a.localeCompare(b)).map((id) =>
             <Account
               key={id}
               active={this.state.activeAccountIds.includes(id)}

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

@@ -0,0 +1,64 @@
+const React = window.React;
+
+class SetAllSyncPolicies extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editMode: false};
+  }
+
+  edit() {
+    this.setState({editMode: true})
+  }
+
+  applyToAllAccounts(accountIds) {
+    const req = new XMLHttpRequest();
+    const url = `${window.location.protocol}/sync-policy`;
+    req.open("POST", url, true);
+    req.setRequestHeader("Content-type", "application/json");
+    req.onreadystatechange = () => {
+      if (req.readyState === XMLHttpRequest.DONE) {
+        console.log(req.responseText);
+        if (req.status === 200) {
+          this.setState({editMode: false});
+        }
+      }
+    }
+
+    const newPolicy = document.getElementById(`sync-policy-all`).value;
+    req.send(JSON.stringify({
+      sync_policy: newPolicy,
+      account_ids: accountIds,
+    }));
+  }
+
+  cancel() {
+    this.setState({editMode: false});
+  }
+
+  render() {
+    if (this.state.editMode) {
+      return (
+        <div className="modal-bg">
+          <div className="sync-policy modal">
+            <div className="section">Sync Policy</div>
+            <textarea id="sync-policy-all">
+            </textarea>
+            <button onClick={() => this.applyToAllAccounts.call(this, this.props.accountIds)}>
+              Apply To All Accounts
+            </button>
+            <span className="action-link" onClick={() => this.cancel.call(this)}> Cancel </span>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <button id="set-all-sync" onClick={() => this.edit.call(this)}> Set All Sync Policies </button>
+    )
+  }
+}
+
+SetAllSyncPolicies.propTypes = {
+  accountIds: React.PropTypes.arrayOf(React.PropTypes.number),
+}
+
+window.SetAllSyncPolicies = SetAllSyncPolicies;

packages/nylas-dashboard/routes/sync-policy.js

@@ -27,4 +27,28 @@ module.exports = (server) => {
       .then(() => reply("Success"));
     },
   });
+
+  server.route({
+    method: 'POST',
+    path: '/sync-policy',
+    config: {
+      description: 'Set the sync policy for several accounts',
+      notes: 'Notes go here',
+      tags: ['sync-policy'],
+      validate: {
+        payload: {
+          sync_policy: Joi.string(),
+          account_ids: Joi.array().items(Joi.number().integer().min(0)),
+        },
+      },
+      response: {
+        schema: Joi.string(),
+      },
+    },
+    handler: (request, reply) => {
+      const newPolicy = JSON.parse(request.payload.sync_policy);
+      SchedulerUtils.assignPolicyToAcounts(request.payload.account_ids, newPolicy)
+      .then(() => reply("Success"));
+    },
+  })
 };