From b5a0483603333e3785ad2823c9ee22fa369b2c7a Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 12 Oct 2017 16:58:12 +0100
Subject: [PATCH 001/344] Update nav

---
 docs/_data/nav.yaml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/_data/nav.yaml b/docs/_data/nav.yaml
index eeb7c2ebc..9a205e8fe 100644
--- a/docs/_data/nav.yaml
+++ b/docs/_data/nav.yaml
@@ -17,6 +17,10 @@ items:
     children:
       - title: How Talk Works
         url: /how-talk-works/
+      - title: Commenter Features
+        url: /commenter-features/
+      - title: Moderator Features
+        url: /moderator-features/
       - title: Trust
         url: /trust/
       - title: Toxic Comments

From e0e481373bddee6ac0d1fe84dc5f78239d5a8293 Mon Sep 17 00:00:00 2001
From: Facu <facu.e.sosa@gmail.com>
Date: Thu, 12 Oct 2017 17:59:04 -0300
Subject: [PATCH 002/344] bulk approve/reject actions for moderators

---
 client/coral-admin/src/actions/userDetail.js  |   6 +
 .../coral-admin/src/components/UserDetail.css | 192 ++++++++++--------
 .../coral-admin/src/components/UserDetail.js  | 101 +++++----
 .../coral-admin/src/constants/userDetail.js   |   2 +-
 .../coral-admin/src/containers/UserDetail.js  |   3 +
 client/coral-admin/src/reducers/userDetail.js |   5 +
 6 files changed, 189 insertions(+), 120 deletions(-)

diff --git a/client/coral-admin/src/actions/userDetail.js b/client/coral-admin/src/actions/userDetail.js
index f8b22008c..3a1de5745 100644
--- a/client/coral-admin/src/actions/userDetail.js
+++ b/client/coral-admin/src/actions/userDetail.js
@@ -20,3 +20,9 @@ export const toggleSelectCommentInUserDetail = (id, active) => {
   };
 };
 
+export const toggleSelectAllCommentInUserDetail = (ids, active) => {
+  return {
+    type: active ? actions.SELECT_ALL_USER_DETAIL_COMMENT : actions.CLEAR_USER_DETAIL_SELECTIONS,
+    ids
+  };
+};
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 5cbe0fe32..fbde4a626 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -1,144 +1,168 @@
 .copyButton {
-  background-color: white;
-  border: solid 1px;
-  padding: 2px 6px;
-  height: auto;
-  line-height: initial;
-  min-width: auto;
-  letter-spacing: normal;
-  font-size: 0.9em;
-  margin-left: 10px;
+    background-color: white;
+    border: solid 1px;
+    padding: 2px 6px;
+    height: auto;
+    line-height: initial;
+    min-width: auto;
+    letter-spacing: normal;
+    font-size: 0.9em;
+    margin-left: 10px;
 }
 
 .userDetailList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 .userDetailItem {
-  margin: 0 5px;
-  font-weight: 500;
+    margin: 0 5px;
+    font-weight: 500;
 }
 
 .stats {
-  display: flex;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  margin: 15px 0 5px;
-  color: #595959;
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    margin: 15px 0 5px;
+    color: #595959;
 }
 
 .stat {
-  margin-right: 20px;
+    margin-right: 20px;
 }
 
 .stat:last-child {
-  margin-right: 0px;
+    margin-right: 0px;
 }
 
 .statItem, .statReportResult {
-  padding: 3px 5px;
-  background-color: #D8D8D8;
-  border-radius: 3px;
-  font-weight: 500;
-  display: block;
-  font-size: 0.9em;
-  line-height: normal;
-  letter-spacing: 0.4px;
-  min-width: 60px; 
+    padding: 3px 5px;
+    background-color: #D8D8D8;
+    border-radius: 3px;
+    font-weight: 500;
+    display: block;
+    font-size: 0.9em;
+    line-height: normal;
+    letter-spacing: 0.4px;
+    min-width: 60px;
 }
 
 .statResult {
-  font-size: 1.5em;
-  padding: 5px 0;
-  display: inline-block;
+    font-size: 1.5em;
+    padding: 5px 0;
+    display: inline-block;
 }
 
 .statReportResult {
-  color: white;
-  margin: 5px 0;
-  font-weight: 400;
+    color: white;
+    margin: 5px 0;
+    font-weight: 400;
 }
 
 .statReportResult.reliable {
-  background-color: #749C48;
+    background-color: #749C48;
 }
 
 .statReportResult.neutral {
-  background-color: #616161;
+    background-color: #616161;
 }
 
 .statReportResult.unreliable {
-  background-color: #F44336;
+    background-color: #F44336;
 }
 
 .memberSince {
-  clear: both;
+    clear: both;
 }
 
 .small {
-  color: #888888;
-  font-size: 0.9em;
-  letter-spacing: 0.4px;
+    color: #888888;
+    font-size: 0.9em;
+    letter-spacing: 0.4px;
 }
 
 .profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  outline: none;
-  width: calc(100% - 90px);
+    border: none;
+    background-color: transparent;
+    font-size: 16px;
+    outline: none;
+    width: calc(100% - 90px);
 }
 
 .commentStatuses {
-  padding: 10px 0 0 0;
-  margin: 0;
-  height: 52px;
-  list-style: none;
-  box-sizing: border-box;
-
-  li {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    padding: 0 10px;
-  }
+    padding: 0 0 0 10px;
+    margin: 0;
+    align-self: center;
+    list-style: none;
+    box-sizing: border-box;
+    li {
+        display: inline-block;
+        margin-right: 10px;
+        cursor: pointer;
+        padding: 0 10px;
+    }
 }
 
 .active {
-  font-weight: bold;
-  border-bottom: 3px solid #F36451;
+    font-weight: bold;
+    border-bottom: 3px solid #F36451;
 }
 
 .bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
+    height: 52px;
+    background-color: #efefef;
+    padding: 0 0 0 10px;
+    display: flex;
+    i {
+        margin-right: 0;
+    }
 
-  i {
-    margin-right: 0;
-  }
+    .bulkAction {
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        transform: scale(.7);
+        min-width: 0;
+    }
 
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
+    .bulkAction:last-child {
+        margin-left: -10px;
+    }
 
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
+    span{
+        align-self: center;
+        font-weight: 500;
+        margin-left: 15px;
+    }
 }
 
 .loadMore > button {
-  background-color: #696969;
+    background-color: #696969;
 
-  &:hover {
-    background-color: #404040;
-    color: white;
-  }
+    &:hover {
+        background-color: #404040;
+        color: white;
+    }
 }
+
+.toggleAll {
+    padding: 0 10px 0 0;
+    align-self: center;
+}
+
+.commentList {
+    clear: both;
+}
+
+.bulkActionHeader{
+  display: flex;
+  justify-content: space-between;
+  height: 52px;
+    &.selected{
+        background-color: #efefef;
+    }
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 275503085..ab609fbfb 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Comment from '../containers/UserDetailComment';
 import styles from './UserDetail.css';
-import {Icon, Button, Drawer, Spinner} from 'coral-ui';
+import {Icon, Drawer, Spinner} from 'coral-ui';
 import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
@@ -10,6 +10,8 @@ import LoadMore from '../components/LoadMore';
 import cn from 'classnames';
 import capitalize from 'lodash/capitalize';
 import {getReliability} from 'coral-framework/utils/user';
+import ApproveButton from './ApproveButton';
+import RejectButton from './RejectButton';
 
 export default class UserDetail extends React.Component {
 
@@ -23,6 +25,7 @@ export default class UserDetail extends React.Component {
     toggleSelect: PropTypes.func.isRequired,
     bulkAccept: PropTypes.func.isRequired,
     bulkReject: PropTypes.func.isRequired,
+    toggleSelectAll: PropTypes.func.isRequired
   }
 
   rejectThenReload = async (info) => {
@@ -47,6 +50,28 @@ export default class UserDetail extends React.Component {
     }
   }
 
+  bulkAcceptThenReload = async () => {
+    try {
+      await this.props.bulkAccept();
+      this.props.data.refetch();
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
+  }
+
+  bulkRejectThenReload = async () => {
+    try {
+      await this.props.bulkReject();
+      this.props.data.refetch();
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
+  }
+
   showAll = () => {
     this.props.changeStatus('all');
   }
@@ -78,11 +103,10 @@ export default class UserDetail extends React.Component {
       activeTab,
       selectedCommentIds,
       toggleSelect,
-      bulkAccept,
-      bulkReject,
       hideUserDetail,
       viewUserDetail,
       loadMore,
+      toggleSelectAll
     } = this.props;
 
     let rejectedPercent = (rejectedComments / totalComments) * 100;
@@ -100,14 +124,14 @@ export default class UserDetail extends React.Component {
           <div>
             <ul className={styles.userDetailList}>
               <li>
-                <Icon name="assignment_ind"/>
+                <Icon name="assignment_ind" />
                 <span className={styles.userDetailItem}>Member Since:</span>
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
               {user.profiles.map(({id}) =>
                 <li key={id}>
-                  <Icon name="email"/>
+                  <Icon name="email" />
                   <span className={styles.userDetailItem}>Email:</span>
                   {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
                 </li>
@@ -142,35 +166,42 @@ export default class UserDetail extends React.Component {
             queryData={{root, user}}
           />
 
-          <hr/>
-          {
-            selectedCommentIds.length === 0
-              ? (
-                <ul className={styles.commentStatuses}>
-                  <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                  <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-                </ul>
-              )
-              : (
-                <div className={styles.bulkActionGroup}>
-                  <Button
-                    onClick={bulkAccept}
-                    className={styles.bulkAction}
-                    cStyle='approve'
-                    icon='done'>
-                  </Button>
-                  <Button
-                    onClick={bulkReject}
-                    className={styles.bulkAction}
-                    cStyle='reject'
-                    icon='close'>
-                  </Button>
-                  {`${selectedCommentIds.length} comments selected`}
-                </div>
-              )
-          }
-
-          <div>
+          <hr />
+          <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
+            {
+              selectedCommentIds.length === 0
+                ? (
+                  <ul className={styles.commentStatuses}>
+                    <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+                  </ul>
+                )
+                : (
+                  <div className={styles.bulkActionGroup}>
+                    <ApproveButton
+                      onClick={this.bulkAcceptThenReload}
+                      minimal
+                    />
+                    <RejectButton
+                      onClick={this.bulkRejectThenReload}
+                      minimal
+                    />
+                    <span> {`${selectedCommentIds.length} comments selected`}</span>
+                  </div>
+                )
+            }
+            <div className={styles.toggleAll}>
+              <input
+                type='checkbox'
+                id='toogleAll'
+                checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
+                onChange={(e) => {
+                  toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
+                }} />
+              <label htmlFor='toogleAll'>Select all</label>
+            </div>
+          </div>
+          <div className={styles.commentList}>
             {
               nodes.map((comment) => {
                 const selected = selectedCommentIds.indexOf(comment.id) !== -1;
@@ -199,7 +230,7 @@ export default class UserDetail extends React.Component {
     );
   }
 
-  render () {
+  render() {
     if (this.props.loading) {
       return this.renderLoading();
     }
diff --git a/client/coral-admin/src/constants/userDetail.js b/client/coral-admin/src/constants/userDetail.js
index b68efb5ea..f1617f5a3 100644
--- a/client/coral-admin/src/constants/userDetail.js
+++ b/client/coral-admin/src/constants/userDetail.js
@@ -4,4 +4,4 @@ export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
 export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
 export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
 export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
-
+export const SELECT_ALL_USER_DETAIL_COMMENT = 'SELECT_ALL_USER_DETAIL_COMMENT';
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index ffc661150..3feee87a9 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -11,6 +11,7 @@ import {
   changeUserDetailStatuses,
   clearUserDetailSelections,
   toggleSelectCommentInUserDetail,
+  toggleSelectAllCommentInUserDetail
 } from 'coral-admin/src/actions/userDetail';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
@@ -120,6 +121,7 @@ class UserDetailContainer extends React.Component {
       bulkAccept={this.bulkAccept}
       changeStatus={this.props.changeUserDetailStatuses}
       toggleSelect={this.props.toggleSelectCommentInUserDetail}
+      toggleSelectAll={this.props.toggleSelectAllCommentInUserDetail}
       acceptComment={this.acceptComment}
       rejectComment={this.rejectComment}
       loading={loading}
@@ -188,6 +190,7 @@ const mapDispatchToProps = (dispatch) => ({
     toggleSelectCommentInUserDetail,
     viewUserDetail,
     hideUserDetail,
+    toggleSelectAllCommentInUserDetail
   }, dispatch)
 });
 
diff --git a/client/coral-admin/src/reducers/userDetail.js b/client/coral-admin/src/reducers/userDetail.js
index e3c49a0d1..3ad435973 100644
--- a/client/coral-admin/src/reducers/userDetail.js
+++ b/client/coral-admin/src/reducers/userDetail.js
@@ -41,6 +41,11 @@ export default function banUserDialog(state = initialState, action) {
       ...state,
       selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
     };
+  case actions.SELECT_ALL_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: action.ids
+    };
   default:
     return state;
   }

From 9d5739b3960026a8149fc36628eafa1b53bc42f2 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 12 Oct 2017 15:27:57 -0600
Subject: [PATCH 003/344] better support for email verification

---
 errors.js                            | 49 +++++++++++++++++----------
 routes/api/users/index.js            | 48 ++++++++++++++++++--------
 services/limit.js                    | 47 ++++++++++++++++++++++++++
 services/passport.js                 |  2 +-
 services/users.js                    | 50 +++++++---------------------
 test/server/routes/api/auth/index.js |  4 +--
 test/server/services/users.js        | 12 ++++---
 7 files changed, 134 insertions(+), 78 deletions(-)
 create mode 100644 services/limit.js

diff --git a/errors.js b/errors.js
index ab1667e07..93ebf34b9 100644
--- a/errors.js
+++ b/errors.js
@@ -97,7 +97,8 @@ class ErrAssetCommentingClosed extends APIError {
 class ErrAuthentication extends APIError {
   constructor(message = null) {
     super('authentication error occured', {
-      status: 401
+      status: 401,
+      translation_key: 'AUTHENTICATION'
     }, {
       message
     });
@@ -195,31 +196,45 @@ const ErrAssetURLAlreadyExists = new APIError('Asset URL already exists, cannot
   status: 409
 });
 
+// ErrNotVerified is returned when a user tries to login with valid credentials
+// but their email address is not yet verified.
+const ErrNotVerified = new APIError('User does not have a verified email address', {
+  translation_key: 'EMAIL_NOT_VERIFIED',
+  status: 401,
+});
+
+const ErrMaxRateLimit = new APIError('Rate limit exeeded', {
+  translation_key: 'RATE_LIMIT_EXCEEDED',
+  status: 429,
+});
+
 module.exports = {
-  ExtendableError,
   APIError,
   ErrAlreadyExists,
-  ErrPasswordTooShort,
-  ErrSettingsNotInit,
+  ErrAssetCommentingClosed,
+  ErrAssetURLAlreadyExists,
+  ErrAuthentication,
+  ErrCommentTooShort,
+  ErrContainsProfanity,
+  ErrEditWindowHasEnded,
+  ErrEmailTaken,
+  ErrInstallLock,
+  ErrInvalidAssetURL,
+  ErrLoginAttemptMaximumExceeded,
+  ErrMaxRateLimit,
   ErrMissingEmail,
   ErrMissingPassword,
   ErrMissingToken,
-  ErrEmailTaken,
-  ErrSpecialChars,
   ErrMissingUsername,
-  ErrContainsProfanity,
-  ErrUsernameTaken,
-  ErrAssetCommentingClosed,
-  ErrNotFound,
-  ErrInvalidAssetURL,
-  ErrAuthentication,
   ErrNotAuthorized,
+  ErrNotFound,
+  ErrNotVerified,
+  ErrPasswordTooShort,
   ErrPermissionUpdateUsername,
   ErrSameUsernameProvided,
   ErrSettingsInit,
-  ErrInstallLock,
-  ErrLoginAttemptMaximumExceeded,
-  ErrEditWindowHasEnded,
-  ErrCommentTooShort,
-  ErrAssetURLAlreadyExists
+  ErrSettingsNotInit,
+  ErrSpecialChars,
+  ErrUsernameTaken,
+  ExtendableError,
 };
diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 189d0ea3e..d076288e6 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -5,6 +5,7 @@ const mailer = require('../../../services/mailer');
 const errors = require('../../../errors');
 const authorization = require('../../../middleware/authorization');
 const i18n = require('../../../services/i18n');
+const Limit = require('../../../services/limit');
 const {
   ROOT_URL
 } = require('../../../config');
@@ -109,16 +110,15 @@ router.post('/:user_id/email', authorization.needed('ADMIN', 'MODERATOR'), async
 
 /**
  * SendEmailConfirmation sends a confirmation email to the user.
- * @param {ExpressApp} app     the instance of the express app
  * @param {String}     userID  the id for the user to send the email to
  * @param {String}     email   the email for the user to send the email to
  */
-const SendEmailConfirmation = async (app, userID, email, referer) => {
-  let token = await UsersService.createEmailConfirmToken(userID, email, referer);
+const SendEmailConfirmation = async (user, email, referer) => {
+  let token = await UsersService.createEmailConfirmToken(user, email, referer);
 
   return mailer.sendSimple({
-    template: 'email-confirm',              // needed to know which template to render!
-    locals: {                               // specifies the template locals.
+    template: 'email-confirm',
+    locals: {
       token,
       rootURL: ROOT_URL,
       email
@@ -138,7 +138,7 @@ router.post('/', async (req, res, next) => {
 
     // Send an email confirmation. The Front end will know about the
     // requireEmailConfirmation as it's included in the settings get endpoint.
-    await SendEmailConfirmation(req.app, user.id, email, redirectUri);
+    await SendEmailConfirmation(user, email, redirectUri);
 
     res.status(201).json(user);
   } catch (e) {
@@ -166,25 +166,45 @@ router.post('/:user_id/actions', authorization.needed(), async (req, res, next)
   }
 });
 
+// This will allow 1 try every minute.
+const resendRateLimiter = new Limit('/api/v1/users/resend-verify', 1, '1m');
+
 // trigger an email confirmation re-send by a new user
 router.post('/resend-verify', async (req, res, next) => {
-  const {email} = req.body;
   const redirectUri = req.header('X-Pym-Url') || req.header('Referer');
+  let {email = ''} = req.body;
 
-  if (!email) {
+  // Clean up and validate the email.
+  email = email.toLowerCase().trim();
+  if (email.length < 5) {
     return next(errors.ErrMissingEmail);
   }
 
+  // Check if we're past the rate limit, if we are, stop now. Otherwise, record
+  // this as an attempt to send a verification email.
   try {
+    const tries = await resendRateLimiter.get(email);
+    if (tries > 0) {
+      throw errors.ErrMaxRateLimit;
+    }
 
-    // find user by email.
-    // if the local profile is verified, return an error code?
-    // send a 204 after the email is re-sent
-    await SendEmailConfirmation(req.app, null, email, redirectUri);
+    await resendRateLimiter.test(email);
+  } catch (err) {
+    return next(err);
+  }
+
+  try {
+    const user = await UsersService.findLocalUser(email);
+    if (!user) {
+      throw errors.ErrNotFound;
+    }
+
+    await SendEmailConfirmation(user, email, redirectUri);
 
     res.status(204).end();
   } catch (e) {
-    return next(e);
+    console.trace(e);
+    res.status(204).end();
   }
 });
 
@@ -208,7 +228,7 @@ router.post('/:user_id/email/confirm', authorization.needed('ADMIN', 'MODERATOR'
     }
 
     // Send the email to the first local profile that was found.
-    await SendEmailConfirmation(req.app, user.id, localProfile.id);
+    await SendEmailConfirmation(user, localProfile.id);
 
     res.status(204).end();
   } catch (e) {
diff --git a/services/limit.js b/services/limit.js
new file mode 100644
index 000000000..7acc78f0c
--- /dev/null
+++ b/services/limit.js
@@ -0,0 +1,47 @@
+const ms = require('ms');
+const errors = require('../errors');
+const {createClientFactory} = require('./redis');
+const client = createClientFactory();
+
+class Limit {
+  constructor(prefix, max, duration) {
+    this.ttl = ms(duration) / 1000;
+    this.prefix = prefix;
+    this.max = max;
+  }
+
+  key(value) {
+    return `limit[${this.prefix}][${value}]`;
+  }
+
+  async get(value) {
+    const key = this.key(value);
+
+    return client().get(key);
+  }
+
+  async test(value) {
+    const key = this.key(value);
+
+    const [[, tries], [, expiry]] = await client()
+      .multi()
+      .incr(key)
+      .expire(key, this.ttl)
+      .exec();
+
+    // if this is new or has no expiry
+    if (tries === 1 || expiry === -1) {
+
+      // then expire it after the timeout
+      client().expire(key, this.ttl);
+    }
+
+    if (tries > this.max) {
+      throw errors.ErrMaxRateLimit;
+    }
+
+    return tries;
+  }
+}
+
+module.exports = Limit;
diff --git a/services/passport.js b/services/passport.js
index 83635fa85..0920c1c39 100644
--- a/services/passport.js
+++ b/services/passport.js
@@ -145,7 +145,7 @@ async function ValidateUserLogin(loginProfile, user, done) {
     // If the profile doesn't have a metadata field, or it does not have a
     // confirmed_at field, or that field is null, then send them back.
     if (!profile.metadata || !profile.metadata.confirmed_at || profile.metadata.confirmed_at === null) {
-      return done(new errors.ErrAuthentication(loginProfile.id));
+      return done(errors.ErrNotVerified);
     }
   }
 
diff --git a/services/users.js b/services/users.js
index 78708b40a..4e9d52901 100644
--- a/services/users.js
+++ b/services/users.js
@@ -17,7 +17,7 @@ const UserModel = require('../models/user');
 const USER_STATUS = require('../models/enum/user_status');
 const USER_ROLES = require('../models/enum/user_roles');
 
-const RECAPTCHA_WINDOW_SECONDS = 60 * 10; // 10 minutes.
+const RECAPTCHA_WINDOW = '10m'; // 10 minutes.
 const RECAPTCHA_INCORRECT_TRIGGER = 5; // after 3 incorrect attempts, recaptcha will be required.
 
 const ActionsService = require('./actions');
@@ -34,9 +34,8 @@ const PASSWORD_RESET_JWT_SUBJECT = 'password_reset';
 const SALT_ROUNDS = 10;
 
 // Create a redis client to use for authentication.
-const {createClientFactory} = require('./redis');
-
-const client = createClientFactory();
+const Limit = require('./limit');
+const loginRateLimiter = new Limit('loginAttempts', RECAPTCHA_INCORRECT_TRIGGER, RECAPTCHA_WINDOW);
 
 // UsersService is the interface for the application to interact with the
 // UserModel through.
@@ -70,23 +69,14 @@ module.exports = class UsersService {
    * where future login attempts must be made with the recaptcha flag.
    */
   static async recordLoginAttempt(email) {
-    const rdskey = `la[${email.toLowerCase().trim()}]`;
+    try {
+      await loginRateLimiter.test(email.toLowerCase().trim());
+    } catch (err) {
+      if (err === errors.ErrMaxRateLimit) {
+        throw errors.ErrLoginAttemptMaximumExceeded;
+      }
 
-    const replies = await client()
-      .multi()
-      .incr(rdskey)
-      .expire(rdskey, RECAPTCHA_WINDOW_SECONDS)
-      .exec();
-
-    // if this is new or has no expiry
-    if (replies[0] === 1 || replies[1] === -1) {
-
-      // then expire it after the timeout
-      client().expire(rdskey, RECAPTCHA_WINDOW_SECONDS);
-    }
-
-    if (replies[0] >= RECAPTCHA_INCORRECT_TRIGGER) {
-      throw errors.ErrLoginAttemptMaximumExceeded;
+      throw err;
     }
   }
 
@@ -97,9 +87,7 @@ module.exports = class UsersService {
    *  errors.ErrLoginAttemptMaximumExceeded
    */
   static async checkLoginAttempts(email) {
-    const rdskey = `la[${email.toLowerCase().trim()}]`;
-
-    const attempts = await client().get(rdskey);
+    const attempts = await loginRateLimiter.get(email.toLowerCase().trim());
     if (!attempts) {
       return;
     }
@@ -717,7 +705,7 @@ module.exports = class UsersService {
    * @param  {String} email The email that we are needing to get confirmed.
    * @return {Promise}
    */
-  static async createEmailConfirmToken(userID = null, email, referer = ROOT_URL) {
+  static async createEmailConfirmToken(user, email, referer = ROOT_URL) {
     if (!email || typeof email !== 'string') {
       throw new Error('email is required when creating a JWT for resetting passord');
     }
@@ -731,20 +719,6 @@ module.exports = class UsersService {
       subject: EMAIL_CONFIRM_JWT_SUBJECT
     };
 
-    let user;
-    if (!userID) {
-
-      // If there is no userID, we're coming from the endpoint where a new user
-      // is re-requesting a confirmation email and we don't know the userID.
-      user = await UserModel.findOne({profiles: {$elemMatch: {id: email, provider: 'local'}}});
-    } else {
-      user = await UsersService.findById(userID);
-    }
-
-    if (!user) {
-      throw errors.ErrNotFound;
-    }
-
     // Get the profile representing the local account.
     let profile = user.profiles.find((profile) => profile.id === email && profile.provider === 'local');
 
diff --git a/test/server/routes/api/auth/index.js b/test/server/routes/api/auth/index.js
index 2f3c4116a..463e27711 100644
--- a/test/server/routes/api/auth/index.js
+++ b/test/server/routes/api/auth/index.js
@@ -74,10 +74,8 @@ describe('/api/v1/auth/local', () => {
           .catch((err) => {
             expect(err).to.have.status(401);
             err.response.body.should.have.property('error');
-            err.response.body.error.should.have.property('metadata');
-            err.response.body.error.metadata.should.have.property('message', 'maria@gmail.com');
 
-            return UsersService.createEmailConfirmToken(mockUser.id, mockUser.profiles[0].id);
+            return UsersService.createEmailConfirmToken(mockUser, mockUser.profiles[0].id);
           })
           .then(UsersService.verifyEmailConfirmation)
           .then(() => {
diff --git a/test/server/services/users.js b/test/server/services/users.js
index 251618187..09a8396c4 100644
--- a/test/server/services/users.js
+++ b/test/server/services/users.js
@@ -88,17 +88,19 @@ describe('services.UsersService', () => {
   describe('#createEmailConfirmToken', () => {
 
     it('should create a token for a valid user', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0].id, mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
       expect(token).to.not.be.null;
     });
 
     it('should not create a token for a user already verified', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0].id, mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
       expect(token).to.not.be.null;
 
       await UsersService.verifyEmailConfirmation(token);
 
-      return expect(UsersService.createEmailConfirmToken(mockUsers[0].id, mockUsers[0].profiles[0].id)).to.eventually.be.rejected;
+      const user = await UsersService.findById(mockUsers[0].id);
+
+      return expect(UsersService.createEmailConfirmToken(user, mockUsers[0].profiles[0].id)).to.eventually.be.rejected;
     });
 
   });
@@ -106,7 +108,7 @@ describe('services.UsersService', () => {
   describe('#verifyEmailConfirmation', () => {
 
     it('should correctly validate a valid token', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0].id, mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
       expect(token).to.not.be.null;
 
       return expect(UsersService.verifyEmailConfirmation(token)).to.eventually.not.be.rejected;
@@ -122,7 +124,7 @@ describe('services.UsersService', () => {
 
     it('should update the user model when verification is complete', () => {
       return UsersService
-        .createEmailConfirmToken(mockUsers[0].id, mockUsers[0].profiles[0].id)
+        .createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id)
         .then((token) => {
           expect(token).to.not.be.null;
 

From 910acdd52bcfa21d9d11aaf418857297e2e5653a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 12 Oct 2017 15:49:21 -0600
Subject: [PATCH 004/344] added cli tools for verifying email address

---
 bin/cli-users | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/bin/cli-users b/bin/cli-users
index c6555ab28..89f53a67d 100755
--- a/bin/cli-users
+++ b/bin/cli-users
@@ -241,13 +241,21 @@ function listUsers() {
       });
 
       users.forEach((user) => {
+        let state = user.disabled ? 'Disabled' : 'Enabled';
+        const profile = user.profiles.find(({provider}) => provider === 'local');
+        if (profile && profile.metadata && profile.metadata.confirmed_at) {
+          state += ', Verified';
+        } else {
+          state += ', Unverified';
+        }
+
         table.push([
           user.id,
           user.username,
           user.profiles.map((p) => p.provider).join(', '),
           user.roles.join(', '),
           user.status,
-          user.disabled ? 'Disabled' : 'Enabled'
+          state
         ]);
       });
 
@@ -396,6 +404,23 @@ function enableUser(userID) {
     });
 }
 
+/**
+ * Verifies an email address for a user.
+ *
+ * @param userID the user's id
+ * @param email  the user's email address to be verified
+ */
+async function verify(userID, email) {
+  try {
+    await UsersService.confirmEmail(userID, email);
+    console.log(`User ${userID} had their email ${email} verified.`);
+    util.shutdown();
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+}
+
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
@@ -467,6 +492,11 @@ program
   .description('enable a given user from logging in')
   .action(enableUser);
 
+program
+  .command('verify <userID> <email>')
+  .description('verifies the given user\'s email address')
+  .action(verify);
+
 program.parse(process.argv);
 
 // If there is no command listed, output help.

From 9d36426a1be60b4674406ddef8823b898258be62 Mon Sep 17 00:00:00 2001
From: Facu <facu.e.sosa@gmail.com>
Date: Fri, 13 Oct 2017 11:41:47 -0300
Subject: [PATCH 005/344] format UserDetail css

---
 .../coral-admin/src/components/UserDetail.css | 203 +++++++++---------
 1 file changed, 100 insertions(+), 103 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index fbde4a626..4deb35550 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -1,168 +1,165 @@
 .copyButton {
-    background-color: white;
-    border: solid 1px;
-    padding: 2px 6px;
-    height: auto;
-    line-height: initial;
-    min-width: auto;
-    letter-spacing: normal;
-    font-size: 0.9em;
-    margin-left: 10px;
+  background-color: white;
+  border: solid 1px;
+  padding: 2px 6px;
+  height: auto;
+  line-height: initial;
+  min-width: auto;
+  letter-spacing: normal;
+  font-size: 0.9em;
+  margin-left: 10px;
 }
 
 .userDetailList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .userDetailItem {
-    margin: 0 5px;
-    font-weight: 500;
+  margin: 0 5px;
+  font-weight: 500;
 }
 
 .stats {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    margin: 15px 0 5px;
-    color: #595959;
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  margin: 15px 0 5px;
+  color: #595959;
 }
 
 .stat {
-    margin-right: 20px;
+  margin-right: 20px;
 }
 
 .stat:last-child {
-    margin-right: 0px;
+  margin-right: 0px;
 }
 
-.statItem, .statReportResult {
-    padding: 3px 5px;
-    background-color: #D8D8D8;
-    border-radius: 3px;
-    font-weight: 500;
-    display: block;
-    font-size: 0.9em;
-    line-height: normal;
-    letter-spacing: 0.4px;
-    min-width: 60px;
+.statItem,
+.statReportResult {
+  padding: 3px 5px;
+  background-color: #D8D8D8;
+  border-radius: 3px;
+  font-weight: 500;
+  display: block;
+  font-size: 0.9em;
+  line-height: normal;
+  letter-spacing: 0.4px;
+  min-width: 60px;
 }
 
 .statResult {
-    font-size: 1.5em;
-    padding: 5px 0;
-    display: inline-block;
+  font-size: 1.5em;
+  padding: 5px 0;
+  display: inline-block;
 }
 
 .statReportResult {
-    color: white;
-    margin: 5px 0;
-    font-weight: 400;
+  color: white;
+  margin: 5px 0;
+  font-weight: 400;
 }
 
 .statReportResult.reliable {
-    background-color: #749C48;
+  background-color: #749C48;
 }
 
 .statReportResult.neutral {
-    background-color: #616161;
+  background-color: #616161;
 }
 
 .statReportResult.unreliable {
-    background-color: #F44336;
+  background-color: #F44336;
 }
 
 .memberSince {
-    clear: both;
+  clear: both;
 }
 
 .small {
-    color: #888888;
-    font-size: 0.9em;
-    letter-spacing: 0.4px;
+  color: #888888;
+  font-size: 0.9em;
+  letter-spacing: 0.4px;
 }
 
 .profileEmail {
-    border: none;
-    background-color: transparent;
-    font-size: 16px;
-    outline: none;
-    width: calc(100% - 90px);
+  border: none;
+  background-color: transparent;
+  font-size: 16px;
+  outline: none;
+  width: calc(100% - 90px);
 }
 
 .commentStatuses {
-    padding: 0 0 0 10px;
-    margin: 0;
-    align-self: center;
-    list-style: none;
-    box-sizing: border-box;
-    li {
-        display: inline-block;
-        margin-right: 10px;
-        cursor: pointer;
-        padding: 0 10px;
-    }
+  padding: 0 0 0 10px;
+  margin: 0;
+  align-self: center;
+  list-style: none;
+  box-sizing: border-box;
+  li {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    padding: 0 10px;
+  }
 }
 
 .active {
-    font-weight: bold;
-    border-bottom: 3px solid #F36451;
+  font-weight: bold;
+  border-bottom: 3px solid #F36451;
 }
 
 .bulkActionGroup {
-    height: 52px;
-    background-color: #efefef;
-    padding: 0 0 0 10px;
-    display: flex;
-    i {
-        margin-right: 0;
-    }
-
-    .bulkAction {
-        display: inline-block;
-        width: 48px;
-        height: 48px;
-        transform: scale(.7);
-        min-width: 0;
-    }
-
-    .bulkAction:last-child {
-        margin-left: -10px;
-    }
-
-    span{
-        align-self: center;
-        font-weight: 500;
-        margin-left: 15px;
-    }
+  height: 52px;
+  background-color: #efefef;
+  padding: 0 0 0 10px;
+  display: flex;
+  i {
+    margin-right: 0;
+  }
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+  span {
+    align-self: center;
+    font-weight: 500;
+    margin-left: 15px;
+  }
 }
 
-.loadMore > button {
-    background-color: #696969;
-
-    &:hover {
-        background-color: #404040;
-        color: white;
-    }
+.loadMore>button {
+  background-color: #696969;
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
 }
 
 .toggleAll {
-    padding: 0 10px 0 0;
-    align-self: center;
+  padding: 0 10px 0 0;
+  align-self: center;
 }
 
 .commentList {
-    clear: both;
+  clear: both;
 }
 
-.bulkActionHeader{
+.bulkActionHeader {
   display: flex;
   justify-content: space-between;
   height: 52px;
-    &.selected{
-        background-color: #efefef;
-    }
+  &.selected {
+    background-color: #efefef;
+  }
 }
\ No newline at end of file

From 06d0da9286ec05a060653742e525757a2a30f7fe Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 13 Oct 2017 15:50:13 +0100
Subject: [PATCH 006/344] Reorganize file order and reinstate h2s

---
 docs/_docs/02-01-required-configuration.md    | 12 +--
 docs/_docs/02-02-advanced-configuration.md    | 82 +++++++++----------
 ... => 03-01-product-guide-how-talk-works.md} |  0
 .../03-02-product-guide-commenter-features.md |  4 +
 .../03-03-product-guide-moderator-features.md |  4 +
 ...-trust.md => 03-04-product-guide-trust.md} |  0
 ... => 03-05-product-guide-toxic-comments.md} |  0
 ...-overview.md => 04-01-plugins-overview.md} |  0
 ...lt-plugins.md => 04-02-default-plugins.md} | 36 ++++----
 ...plugins.md => 04-03-additional-plugins.md} | 20 ++---
 ...gin-recipes.md => 04-04-plugin-recipes.md} |  8 +-
 docs/_sass/talk.scss                          |  3 -
 12 files changed, 85 insertions(+), 84 deletions(-)
 rename docs/_docs/{04-01-product-guide-how-talk-works.md => 03-01-product-guide-how-talk-works.md} (100%)
 create mode 100644 docs/_docs/03-02-product-guide-commenter-features.md
 create mode 100644 docs/_docs/03-03-product-guide-moderator-features.md
 rename docs/_docs/{04-02-product-guide-trust.md => 03-04-product-guide-trust.md} (100%)
 rename docs/_docs/{04-03-product-guide-toxic-comments.md => 03-05-product-guide-toxic-comments.md} (100%)
 rename docs/_docs/{03-01-plugins-overview.md => 04-01-plugins-overview.md} (100%)
 rename docs/_docs/{03-02-default-plugins.md => 04-02-default-plugins.md} (92%)
 rename docs/_docs/{03-03-additional-plugins.md => 04-03-additional-plugins.md} (93%)
 rename docs/_docs/{03-04-plugin-recipes.md => 04-04-plugin-recipes.md} (95%)

diff --git a/docs/_docs/02-01-required-configuration.md b/docs/_docs/02-01-required-configuration.md
index 84a7236db..dc09a1707 100644
--- a/docs/_docs/02-01-required-configuration.md
+++ b/docs/_docs/02-01-required-configuration.md
@@ -19,7 +19,7 @@ If you've already configured your application with the required configuration,
 you can further customize it's behavior by applying
 [Advanced Configuration]({{ "/advanced-configuration/" | relative_url }}).
 
-### TALK_MONGO_URL
+## TALK_MONGO_URL
 
 The database connection string for the MongoDB database. This usually takes the
 form of:
@@ -31,7 +31,7 @@ TALK_MONGO_URL=mongodb://<DATABASE USER>:<DATABASE PASSWORD>@<DATABASE HOST>:<DA
 Refer to [connection string uri format](https://docs.mongodb.com/manual/reference/connection-string/){:target="_blank"}
 for the detailed url scheme of the MongoDB url.
 
-### TALK_REDIS_URL
+## TALK_REDIS_URL
 
 The database connection string for the Redis database. This usually takes the
 form of:
@@ -50,7 +50,7 @@ TALK_REDIS_URL=redis://127.0.0.1:6379/2
 Refer to [uri scheme](http://www.iana.org/assignments/uri-schemes/prov/redis){:target="_blank"}
 for the detailed url scheme of the Redis url.
 
-### TALK_ROOT_URL
+## TALK_ROOT_URL
 
 The root url of the installed application externally available in the format:
 
@@ -70,7 +70,7 @@ TALK_ROOT_URL=https://talk.coralproject.net/
 _Note that we omitted the `PORT`, as it was implied by setting the `SCHEME` to
 `https`._
 
-### TALK_JWT_SECRET
+## TALK_JWT_SECRET
 
 Used to specify the application signing secret. You can specify this using a
 simple string, we recommend using a password generator and pasting it's output.
@@ -85,7 +85,7 @@ Be default, we sign our tokens with HMAC using a SHA-256 hash algorithm. If you
 want to change the signing algorithm, or use multiple signing/verifying keys,
 refer to our [Advanced Configuration]({{ "/advanced-configuration/" | relative_url }}) documentation.
 
-### TALK_FACEBOOK_APP_ID
+## TALK_FACEBOOK_APP_ID
 
 The Facebook App ID for your Facebook Login enabled app. You can learn more
 about getting a Facebook App ID at the
@@ -95,7 +95,7 @@ or by visiting the
 guide. This is only required while the `talk-plugin-facebook-auth` plugin is
 enabled.
 
-### TALK_FACEBOOK_APP_SECRET
+## TALK_FACEBOOK_APP_SECRET
 
 The Facebook App Secret for your Facebook Login enabled app. You can learn more
 about getting a Facebook App Secret at the
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index de2ab0e68..7db27fb1c 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -19,37 +19,37 @@ If this is your first time configuring Talk, ensure you've also added the
 [Required Configuration]({{ "/configuration/" | relative_url }}) as well,
 otherwise the application will fail to start.
 
-### TALK_CACHE_EXPIRY_COMMENT_COUNT
+## TALK_CACHE_EXPIRY_COMMENT_COUNT
 
 Configure the duration for which comment counts are cached for, parsed by
 [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `1hr`)
 
-### TALK_DEFAULT_LANG
+## TALK_DEFAULT_LANG
 
 Specify the default translation language. (Default `en`)
 
-### TALK_DEFAULT_STREAM_TAB
+## TALK_DEFAULT_STREAM_TAB
 
 Specify the default stream tab in the admin. (Default `all`)
 
-### TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS
+## TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS
 
 When `TRUE`, disables flagging of comments that match the suspect word filter. (Default `FALSE`)
 
-### TALK_DISABLE_EMBED_POLYFILL
+## TALK_DISABLE_EMBED_POLYFILL
 
 When set to `TRUE`, the build process will not include the
 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/){:target="_blank"}
 in the embed.js target that is loaded on the page that loads the embed. (Default
 `FALSE`)
 
-### TALK_DISABLE_STATIC_SERVER
+## TALK_DISABLE_STATIC_SERVER
 
 When `TRUE`, it will not mount the static asset serving routes on the router.
 This is used primarily in conjunction with [TALK_STATIC_URI](#talk_static_uri){: .param}
 when the static assets are being hosted on an external domain. (Default `FALSE`)
 
-### TALK_HELMET_CONFIGURATION
+## TALK_HELMET_CONFIGURATION
 
 A JSON string representing the configuration passed to the
 [helmet](https://github.com/helmetjs/helmet){:target="_blank"} middleware. It
@@ -68,20 +68,20 @@ TALK_HELMET_CONFIGURATION={"hsts": false}
 
 To disable these headers from being sent.
 
-### TALK_INSTALL_LOCK
+## TALK_INSTALL_LOCK
 
 When `TRUE`, disables the dynamic setup endpoint `/admin/install` from even
 loading. This prevents hits to the database with enabled. This should always be
 set to `TRUE` after you've deployed Talk. (Default `FALSE`)
 
-### TALK_JWT_ALG
+## TALK_JWT_ALG
 
 The algorithm used to sign/verify JWT’s used for session management. Read up
 about alternative algorithms on the
 [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken#algorithms-supported){:target="_blank"}
 package. (Default `HS256`)
 
-#### Shared Secret
+### Shared Secret
 {:.no_toc}
 
 You would use a shared secret when you have no need to share the tokens with
@@ -102,7 +102,7 @@ These must be provided in the form:
 ```
 {: .no-copy}
 
-#### Asymmetric Secret
+### Asymmetric Secret
 {:.no_toc}
 
 You would use a asymmetric secret when you want to share the token in your
@@ -138,23 +138,23 @@ certificates that match our required format: [coralcert](https://github.com/cora
 This tool can generate RSA and ECDSA certificates, check it's [README](https://github.com/coralproject/coralcert){:target="_blank"}
 for more details.
 
-### TALK_JWT_AUDIENCE
+## TALK_JWT_AUDIENCE
 
 The audience [aud](https://tools.ietf.org/html/rfc7519#section-4.1.3){:target="_blank"}
 claim for login JWT tokens. (Default `talk`)
 
-### TALK_JWT_CLEAR_COOKIE_LOGOUT
+## TALK_JWT_CLEAR_COOKIE_LOGOUT
 
 When `FALSE`, Talk will not clear the cookie with name
 [TALK_JWT_SIGNING_COOKIE_NAME](#talk_jwt_signing_cookie_name){: .param} when logging out
 but will still blacklist the token. (Default `TRUE`)
 
-### TALK_JWT_COOKIE_NAME
+## TALK_JWT_COOKIE_NAME
 
 The default cookie name to check for a valid JWT token to use for verifying a
 user. (Default `authorization`)
 
-### TALK_JWT_COOKIE_NAMES
+## TALK_JWT_COOKIE_NAMES
 
 The different cookie names to check for a JWT token in, separated by a `,`. By
 default, we always use the value of [TALK_JWT_COOKIE_NAME](#talk_jwt_cookie_name){: .param}
@@ -176,19 +176,19 @@ Would mean we would check the following cookies (in order) for a valid token:
 2. `coralproject.talk`
 3. `coralproject.auth`
 
-### TALK_JWT_DISABLE_AUDIENCE
+## TALK_JWT_DISABLE_AUDIENCE
 
 When `TRUE`, Talk will not verify or sign JWT’s with an audience
 [aud](https://tools.ietf.org/html/rfc7519#section-4.1.3){:target="_blank"}
 claim, even if [TALK_JWT_AUDIENCE](#talk_jwt_audience){: .param} is set. (Default `FALSE`)
 
-### TALK_JWT_DISABLE_ISSUER
+## TALK_JWT_DISABLE_ISSUER
 
 When `TRUE`, Talk will not verify or sign JWT’s with an issuer
 [iss](https://tools.ietf.org/html/rfc7519#section-4.1.1){:target="_blank"}
 claim, even if [TALK_JWT_ISSUER](#talk_jwt_issuer){: .param} is set. (Default `FALSE`)
 
-### TALK_JWT_EXPIRY
+## TALK_JWT_EXPIRY
 
 The expiry duration [exp](https://tools.ietf.org/html/rfc7519#section-4.1.4){:target="_blank"}
 for the tokens issued for logged in sessions, parsed by
@@ -199,12 +199,12 @@ If the user logs out, then an entry is created in the token blacklist of it's
 set to be automatically removed at it's expiry time. It is important for this
 reason to create reasonable expiry lengths as to minimize the storage overhead.
 
-### TALK_JWT_ISSUER
+## TALK_JWT_ISSUER
 
 The issuer [iss](https://tools.ietf.org/html/rfc7519#section-4.1.1){:target="_blank"}
 claim for login JWT tokens. (Defaults to value of [TALK_ROOT_URL]({{ "/configuration/#talk_root_url" | relative_url }}){: .param})
 
-### TALK_JWT_SECRET
+## TALK_JWT_SECRET
 
 Used to specify the application signing secret. You can specify this using a
 simple string, we recommend using a password generator and pasting it's output.
@@ -225,7 +225,7 @@ Refer to the documentation for [TALK_JWT_ALG](#talk_jwt_alg){: .param} for other
 methods and other forms of the `TALK_JWT_SECRET`. If you are interested in using
 multiple keys, then refer to [TALK_JWT_SECRETS](#talk_jwt_secrets){: .param}.
 
-### TALK_JWT_SECRETS
+## TALK_JWT_SECRETS
 
 Used when specifying multiple secrets used for key rotations. This is a JSON
 encoded array, where each element matches the JWT Secret pattern. When this is
@@ -261,12 +261,12 @@ Refer to the documentation on the [TALK_JWT_ALG](#talk_jwt_alg){: .param} for mo
 information on what to store in these parameters.
 {: .code-aside}
 
-### TALK_JWT_SIGNING_COOKIE_NAME
+## TALK_JWT_SIGNING_COOKIE_NAME
 
 The default cookie name that is use to set a cookie containing a JWT that was
 issued by Talk. (Defaults to value of [TALK_JWT_COOKIE_NAME](#talk_jwt_cookie_name){: .param})
 
-### TALK_JWT_USER_ID_CLAIM
+## TALK_JWT_USER_ID_CLAIM
 
 Specify the claim using dot notation for where the user id should be stored/read
 to/from. (Default `sub`)
@@ -287,13 +287,13 @@ Then we would set `TALK_JWT_USER_ID_CLAIM` to:
 TALK_JWT_USER_ID_CLAIM=user.id
 ```
 
-### TALK_KEEP_ALIVE
+## TALK_KEEP_ALIVE
 
 The keepalive timeout that should be used to send keep alive messages through
 the websocket to keep the socket alive, parsed by
 [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `30s`)
 
-### TALK_RECAPTCHA_PUBLIC
+## TALK_RECAPTCHA_PUBLIC
 
 Client secret used for enabling reCAPTCHA powered logins. If
 [TALK_RECAPTCHA_SECRET](#talk_recaptcha_secret){: .param} and
@@ -302,7 +302,7 @@ default to providing only a time based lockout. Refer to
 [reCAPTCHA](https://www.google.com/recaptcha/intro/index.html) for information
 on getting an account setup.
 
-### TALK_RECAPTCHA_SECRET
+## TALK_RECAPTCHA_SECRET
 
 Server secret used for enabling reCAPTCHA powered logins. If
 [TALK_RECAPTCHA_SECRET](#talk_recaptcha_secret){: .param} and
@@ -311,7 +311,7 @@ default to providing only a time based lockout. Refer to
 [reCAPTCHA](https://www.google.com/recaptcha/intro/index.html) for information
 on getting an account setup.
 
-### TALK_REDIS_CLIENT_CONFIG
+## TALK_REDIS_CLIENT_CONFIG
 
 Configuration overrides for the redis client configuration in a JSON encoded
 string. Configuration is overridden as the second parameter to the redis client
@@ -319,30 +319,30 @@ constructor, and is merged with default configuration. Refer to the
 [ioredis](https://github.com/luin/ioredis){:target="_blank"} docs on the
 available options. (Default `{}`)
 
-### TALK_REDIS_CLUSTER_CONFIGURATION
+## TALK_REDIS_CLUSTER_CONFIGURATION
 
 The JSON encoded form of the cluster nodes. Only required when
 [TALK_REDIS_CLUSTER_MODE](#talk_redis_cluster_mode){: .param} is `CLUSTER`. See
 [https://github.com/luin/ioredis#cluster](https://github.com/luin/ioredis#cluster){:target="_blank"}
 for configuration details. (Default `[]`)
 
-### TALK_REDIS_CLUSTER_MODE
+## TALK_REDIS_CLUSTER_MODE
 
 The cluster mode of the redis client. Can be either `NONE` or `CLUSTER`.
 (Default `NONE`)
 
-### TALK_REDIS_RECONNECTION_BACKOFF_FACTOR
+## TALK_REDIS_RECONNECTION_BACKOFF_FACTOR
 
 The time factor that will be multiplied against the current attempt count
 between attempts to connect to redis, parsed by
 [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `500 ms`)
 
-### TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME
+## TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME
 
 The minimum time used to delay before attempting to reconnect to redis, parsed
 by [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `1 sec`)
 
-### TALK_ROOT_URL_MOUNT_PATH
+## TALK_ROOT_URL_MOUNT_PATH
 
 When set to `TRUE`, the routes will be mounted onto the `<PATHNAME>` component
 of the [TALK_ROOT_URL]({{ "/configuration/#talk_root_url" | relative_url }}){: .param}.
@@ -361,7 +361,7 @@ Then all the routes for the API will be expecting to be hit on `/talk/`, such as
 can perform the path stripping when serving an upstream proxy, but some CDN's
 cannot. You would use this option in the latter situation.
 
-### TALK_SMTP_EMAIL
+## TALK_SMTP_EMAIL
 
 The email address to send emails from using the SMTP provider in the format:
 
@@ -371,23 +371,23 @@ TALK_SMTP_EMAIL="The Coral Project" <support@coralproject.net>
 
 Including the name and email address.
 
-### TALK_SMTP_HOST
+## TALK_SMTP_HOST
 
 The domain for the SMTP provider that you are using.
 
-### TALK_SMTP_PASSWORD
+## TALK_SMTP_PASSWORD
 
 The password for the SMTP provider you are using.
 
-### TALK_SMTP_PORT
+## TALK_SMTP_PORT
 
 The port for the SMTP provider that you are using.
 
-### TALK_SMTP_USERNAME
+## TALK_SMTP_USERNAME
 
 The username of the SMTP provider you are using.
 
-### TALK_STATIC_URI
+## TALK_STATIC_URI
 
 Used to set the uri where the static assets should be served from. This is used
 when you want to upload the static assets through your build process to a
@@ -395,14 +395,14 @@ service like Google Cloud Storage or Amazon S3 and you would then specify the
 CDN/Storage url. (Defaults to value of
 [TALK_ROOT_URL]({{ "/configuration/#talk_root_url" | relative_url }}){: .param})
 
-### TALK_THREADING_LEVEL
+## TALK_THREADING_LEVEL
 
 Specify the maximum depth of the comment thread. (Default `3`)
 
 **Note that a high value for `TALK_THREADING_LEVEL` will result in large
 performance impacts.**
 
-### TALK_WEBSOCKET_LIVE_URI
+## TALK_WEBSOCKET_LIVE_URI
 
 Used to override the location to connect to the websocket endpoint to
 potentially another host. This should be used when you need to route websocket
@@ -419,7 +419,7 @@ is `FALSE`, or the path component of
 **Warning: if used without managing the auth state manually, auth
 cannot be persisted due to browser restrictions.**
 
-### TRUST_THRESHOLDS
+## TRUST_THRESHOLDS
 
 Configure the reliability thresholds for flagging and commenting. (Default
 `comment:2,-1;flag:2,-1`)
diff --git a/docs/_docs/04-01-product-guide-how-talk-works.md b/docs/_docs/03-01-product-guide-how-talk-works.md
similarity index 100%
rename from docs/_docs/04-01-product-guide-how-talk-works.md
rename to docs/_docs/03-01-product-guide-how-talk-works.md
diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
new file mode 100644
index 000000000..8fde0f0ac
--- /dev/null
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -0,0 +1,4 @@
+---
+title: Commenter Features
+permalink: /commenter-features/
+---
diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
new file mode 100644
index 000000000..355c40a1c
--- /dev/null
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -0,0 +1,4 @@
+---
+title: Moderator Features
+permalink: /moderator-features/
+---
diff --git a/docs/_docs/04-02-product-guide-trust.md b/docs/_docs/03-04-product-guide-trust.md
similarity index 100%
rename from docs/_docs/04-02-product-guide-trust.md
rename to docs/_docs/03-04-product-guide-trust.md
diff --git a/docs/_docs/04-03-product-guide-toxic-comments.md b/docs/_docs/03-05-product-guide-toxic-comments.md
similarity index 100%
rename from docs/_docs/04-03-product-guide-toxic-comments.md
rename to docs/_docs/03-05-product-guide-toxic-comments.md
diff --git a/docs/_docs/03-01-plugins-overview.md b/docs/_docs/04-01-plugins-overview.md
similarity index 100%
rename from docs/_docs/03-01-plugins-overview.md
rename to docs/_docs/04-01-plugins-overview.md
diff --git a/docs/_docs/03-02-default-plugins.md b/docs/_docs/04-02-default-plugins.md
similarity index 92%
rename from docs/_docs/03-02-default-plugins.md
rename to docs/_docs/04-02-default-plugins.md
index ab843f21b..aff17ebcc 100644
--- a/docs/_docs/03-02-default-plugins.md
+++ b/docs/_docs/04-02-default-plugins.md
@@ -16,7 +16,7 @@ Talk that are not enabled by default. You can enable these or disable these
 default plugins by consulting the [Plugins Overview]({{ "/plugins/" | relative_url }})
 page.
 
-### talk-plugin-auth
+## talk-plugin-auth
 
 Source: [plugins/talk-plugin-auth](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-auth){:target="_blank"}
 
@@ -24,7 +24,7 @@ Enables generic registration via an email address, a username, a password, and a
 password confirmation. To sync Talk auth with your own auth systems, you can use
 this plugin as a template.
 
-### talk-plugin-facebook-auth
+## talk-plugin-facebook-auth
 
 Source: [plugins/talk-plugin-auth](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-auth){:target="_blank"}
 
@@ -34,12 +34,10 @@ Enables sign-in via Facebook via the server side passport middleware.
 
 Configuration:
 
-{:.no_toc}
-
 - [TALK_FACEBOOK_APP_ID]({{ "/configuration/#talk_facebook_app_id" | relative_url }}){:.param} (**required**) - See the existing documentation for the [TALK_FACEBOOK_APP_ID]({{ "/configuration/#talk_facebook_app_id" | relative_url }}){:.param}.
 - [TALK_FACEBOOK_APP_SECRET]({{ "/configuration/#talk_facebook_app_secret" | relative_url }}){:.param} (**required**) - See the existing documentation for the [TALK_FACEBOOK_APP_SECRET]({{ "/configuration/#talk_facebook_app_secret" | relative_url }}){:.param}.
 
-### talk-plugin-featured-comments
+## talk-plugin-featured-comments
 
 Source: [plugins/talk-plugin-featured-comments](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-featured-comments){:target="_blank"}
 
@@ -47,14 +45,14 @@ Enables the ability for Moderators to feature and un-feature comments via the
 Stream and the Admin. Featured comments show in a first-place tab on the Stream
 if there are any featured comments on that story.
 
-### talk-plugin-respect
+## talk-plugin-respect
 
 Source: [plugins/talk-plugin-respect](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-respect){:target="_blank"}
 
 Enables a `respect` reaction button. Why a "respect" button, you ask?
 [Read more here](https://mediaengagement.org/research/engagement-buttons/).
 
-### talk-plugin-comment-content
+## talk-plugin-comment-content
 
 Source: [plugins/talk-plugin-comment-content](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-comment-content){:target="_blank"}
 
@@ -62,7 +60,7 @@ Pluginizes the text of a comment to support custom treatment of this text. This
 plugin currently parses the given text to see if it contains a link, and makes
 them clickable.
 
-### talk-plugin-ignore-user
+## talk-plugin-ignore-user
 
 Source: [plugins/talk-plugin-ignore-user](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-ignore-user){:target="_blank"}
 
@@ -70,20 +68,20 @@ Enables ability for users to ignore (or "mute") other users. If a user is
 ignored, you will not see any of their comments. You can un-ignore a user via
 the My Profile tab.
 
-### talk-plugin-permalink
+## talk-plugin-permalink
 
 Source: [plugins/talk-plugin-permalink](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-permalink){:target="_blank"}
 
 Enables a `Link` button that will provide a permalink to the comment that can be
 shared with others.
 
-### talk-plugin-viewing-options
+## talk-plugin-viewing-options
 
 Source: [plugins/talk-plugin-viewing-options](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-viewing-options){:target="_blank"}
 
 Pluginizes the sorting/viewing options for a comment stream.
 
-### talk-plugin-sort-newest
+## talk-plugin-sort-newest
 
 Source: [plugins/talk-plugin-sort-newest](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-newest){:target="_blank"}
 
@@ -92,7 +90,7 @@ Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}
 Provides a sort for the newest comments first. This isn't necessarily required
 as the default sort without options/plugins is newest first.
 
-### talk-plugin-sort-oldest
+## talk-plugin-sort-oldest
 
 Source: [plugins/talk-plugin-sort-oldest](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-oldest){:target="_blank"}
 
@@ -100,7 +98,7 @@ Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}
 
 Provides a sort for the newest comments first.
 
-### talk-plugin-most-respected
+## talk-plugin-most-respected
 
 Source: [plugins/talk-plugin-most-respected](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-most-respected){:target="_blank"}
 
@@ -108,7 +106,7 @@ Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param},
 
 Provides a sort for the comments with the most `respect` reactions first.
 
-### talk-plugin-most-replied
+## talk-plugin-most-replied
 
 Source: [plugins/talk-plugin-most-replied](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-most-replied){:target="_blank"}
 
@@ -116,20 +114,20 @@ Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}
 
 Provides a sort for the comments with the most replies first.
 
-### talk-plugin-offtopic
+## talk-plugin-offtopic
 
 Source: [plugins/talk-plugin-offtopic](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-offtopic){:target="_blank"}
 
 Allows the comment authors to tag their comment as `Off-Topic` which will add a
 visible badge on the frontend to other users that their comment is off-topic.
 
-### talk-plugin-author-menu
+## talk-plugin-author-menu
 
 Source: [plugins/talk-plugin-author-menu](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-author-menu){:target="_blank"}
 
 Pluginizes the author's name on hover.
 
-### talk-plugin-member-since
+## talk-plugin-member-since
 
 Source: [plugins/talk-plugin-member-since](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-member-since){:target="_blank"}
 
@@ -137,14 +135,14 @@ Requires: [talk-plugin-author-menu](#talk-plugin-author-menu){:.param}
 
 Displays the date that the user was created as a `Member Since ${created_at}`.
 
-### talk-plugin-moderation-actions
+## talk-plugin-moderation-actions
 
 Source: [plugins/talk-plugin-moderation-actions](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-moderation-actions){:target="_blank"}
 
 Enables in-stream moderation so that Moderators can reject, approve comments,
 as well as ban users, directly from the comment stream. When [talk-plugin-featured-comments](#talk-plugin-featured-comments){:.param} is enabled
 
-### talk-plugin-flag-details
+## talk-plugin-flag-details
 
 Source: [plugins/talk-plugin-flag-details](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-flag-details){:target="_blank"}
 
diff --git a/docs/_docs/03-03-additional-plugins.md b/docs/_docs/04-03-additional-plugins.md
similarity index 93%
rename from docs/_docs/03-03-additional-plugins.md
rename to docs/_docs/04-03-additional-plugins.md
index 9be7f1cd2..55ab1749b 100644
--- a/docs/_docs/03-03-additional-plugins.md
+++ b/docs/_docs/04-03-additional-plugins.md
@@ -11,13 +11,13 @@ Talk ships with several plugins that aren't enabled by default:
 These plugins can be enabled by consulting the
 [Plugins Overview]({{ "/plugins/" | relative_url }}) page.
 
-### talk-plugin-like
+## talk-plugin-like
 
 Source: [plugins/talk-plugin-like](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-like){:target="_blank"}
 
 Enables a `like` reaction button.
 
-### talk-plugin-sort-most-liked
+## talk-plugin-sort-most-liked
 
 Source: [plugins/talk-plugin-sort-most-liked](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-most-liked){:target="_blank"}
 
@@ -25,13 +25,13 @@ Requires: [talk-plugin-viewing-options]({{ "/default-plugins/#talk-plugin-viewin
 
 Provides a sort for the comments with the most `like` reactions first.
 
-### talk-plugin-love
+## talk-plugin-love
 
 Source: [plugins/talk-plugin-love](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-love){:target="_blank"}
 
 Enables a `love` reaction button.
 
-### talk-plugin-sort-most-loved
+## talk-plugin-sort-most-loved
 
 Source: [plugins/talk-plugin-sort-most-loved](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-most-loved){:target="_blank"}
 
@@ -39,7 +39,7 @@ Requires: [talk-plugin-viewing-options]({{ "/default-plugins/#talk-plugin-viewin
 
 Provides a sort for the comments with the most `love` reactions first.
 
-### talk-plugin-remember-sort
+## talk-plugin-remember-sort
 
 Source: [plugins/talk-plugin-remember-sort](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-remember-sort){:target="_blank"}
 
@@ -47,7 +47,7 @@ Requires: [talk-plugin-viewing-options]({{ "/default-plugins/#talk-plugin-viewin
 
 Enables saving a user’s last sort selection as they browse other articles.
 
-### talk-plugin-deep-reply-count
+## talk-plugin-deep-reply-count
 
 Source: [plugins/talk-plugin-deep-reply-count](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-deep-reply-count){:target="_blank"}
 
@@ -55,7 +55,7 @@ Enables counting of comments to include replies via a new graph edge. Not
 recommended for large installations as it will unreasonably reduce the query
 efficiency to compute this number.
 
-### talk-plugin-slack-notifications
+## talk-plugin-slack-notifications
 
 Source: [plugins/talk-plugin-slack-notifications](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-slack-notifications){:target="_blank"}
 
@@ -70,12 +70,11 @@ Slack, if this isn't what you want, be sure to use the provided plugin as a
 recipe to further customize the behavior*.
 
 Configuration:
-{:.no_toc}
 
 - `SLACK_WEBHOOK_URL` (**required**) - The webhook url that will be
   used to post new comments to.
 
-### talk-plugin-toxic-comments
+## talk-plugin-toxic-comments
 
 Source: [plugins/talk-plugin-toxic-comments](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-toxic-comments){:target="_blank"}
 
@@ -85,7 +84,6 @@ threshold. For more information on what Toxic Comments are, check out the
 [Toxic Comments]({{ "/toxic-comments/" | relative_url }}) documentation.
 
 Configuration:
-{:.no_toc}
 
 - `TALK_PERSPECTIVE_API_KEY` (**required**) - The API Key for Perspective. You
   can register and get your own key at [http://perspectiveapi.com/](http://perspectiveapi.com/){:target="_blank"}.
@@ -97,7 +95,7 @@ Configuration:
   be processed before it will skip the toxicity analysis, parsed by
   [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default `300ms`)
 
-### talk-plugin-subscriber
+## talk-plugin-subscriber
 
 Source: [plugins/talk-plugin-subscriber](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-subscriber){:target="_blank"}
 
diff --git a/docs/_docs/03-04-plugin-recipes.md b/docs/_docs/04-04-plugin-recipes.md
similarity index 95%
rename from docs/_docs/03-04-plugin-recipes.md
rename to docs/_docs/04-04-plugin-recipes.md
index 6b76a54ca..019ff21e4 100644
--- a/docs/_docs/03-04-plugin-recipes.md
+++ b/docs/_docs/04-04-plugin-recipes.md
@@ -16,7 +16,7 @@ The following are the available recipes for use:
 
 {% include toc.html %}
 
-### recipe-avatar
+## recipe-avatar
 
 Source: [talk-recipes/tree/master/plugins/avatar](https://github.com/coralproject/talk-recipes/tree/master/plugins/avatar){:target="_blank"}
 
@@ -24,7 +24,7 @@ Provides support for avatars hosted via third party, extends the User Model and
 provides UI on the client-side too.
 
 
-### recipe-translations
+## recipe-translations
 
 Source: [talk-recipes/tree/master/plugins/translations](https://github.com/coralproject/talk-recipes/tree/master/plugins/translations){:target="_blank"}
 
@@ -32,7 +32,7 @@ Provides an example for overriding application text through the translation
 system.
 
 
-### recipe-subscriber
+## recipe-subscriber
 
 Source: [talk-recipes/tree/master/plugins/subscriber](https://github.com/coralproject/talk-recipes/tree/master/plugins/subscriber){:target="_blank"}
 
@@ -41,7 +41,7 @@ Provides an example for adding `SUBSCRIBER` badges for users with the
 the auth system.
 
 
-### recipe-author-name
+## recipe-author-name
 
 Source: [talk-recipes/tree/master/plugins/author-name](https://github.com/coralproject/talk-recipes/tree/master/plugins/author-name){:target="_blank"}
 
diff --git a/docs/_sass/talk.scss b/docs/_sass/talk.scss
index 85e5f1c93..69e039951 100644
--- a/docs/_sass/talk.scss
+++ b/docs/_sass/talk.scss
@@ -41,9 +41,6 @@ h2, h3, h4 {
 }
 
 article.configuration {
-  h2 {
-    font-weight: bolder;
-  }
 
   h2, .toc {
     @extend .param;

From 5dd08d84e5f5a8694bf6679960e50f96b856c50c Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 13 Oct 2017 16:48:21 +0100
Subject: [PATCH 007/344] Added Commenter Features section

---
 .../03-02-product-guide-commenter-features.md | 138 ++++++++++++++++++
 1 file changed, 138 insertions(+)

diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index 8fde0f0ac..81ec5128d 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -2,3 +2,141 @@
 title: Commenter Features
 permalink: /commenter-features/
 ---
+
+## Signing up for Talk
+
+There are 2 ways that newsrooms can support signup/login functionality with Talk:
+
+Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
+
+Create their own auth plugin (you can use ours as a template) to integrate with your own auth systems
+
+We also provide a Facebook auth plugin that supports logging in with Facebook (you must provide your own Facebook App ID and Secret, which you can read more about here: https://developers.facebook.com) 
+
+## Comments and Replies
+
+Talk supports a standard comment hierarchy. There are top-level (or parent) comments, and then replies to that comment (or children comments). 
+
+**Permalinks**
+
+All levels of comments and replies are able to be linked to via permalink. Permalinks are structured using a `commentId` query param:
+
+https://domain.com/article-asset-slug/?commentId=0879edd7-1c4f-4918-abd2-a770db446b75
+
+**Threading**
+
+Talk supports by default 3 levels of threading, meaning each top-level comment has a depth of 3 replies; replies beyond that are not nested below the 3rd level. You can adjust this using the `TALK_THREADING_LEVEL` configuration variable. We don’t recommend deep threading because it can cause issues with styling, especially on mobile.
+
+You can style threaded comments using these CSS classes:
+
+ ``` 
+  talk-stream-comment-wrapper-level-${depth}
+  talk-stream-comment
+  talk-stream-comment-level-${depth}
+  talk-stream-highlighted-comment
+  talk-stream-pending-comment
+```
+
+**Automatic Updates**
+
+Talk supports real-time loading and updating of comments, via subscriptions (specifically GraphQL Subscriptions); this enables us to not have to refresh to see new comments on a given comment stream. 
+
+Talk enables this via “Load More” buttons for both top-level comments (this button appears at the top of the stream), and within conversation threads (this button appears in situ for replies).
+
+We’ve decided to go this route in order to make the viewing experience as smooth as possible, so that the feed of comments doesn’t change as you’re reading just because new comments are coming in. This could be especially disruptive on breaking news and/or controversial stories with very active discussions.
+
+**Comment Character Limits**
+
+You can enable Talk to limit the character length for comments, for example, some newsrooms we’ve worked with prefer a limit between 2000 and 5000 characters. Commenters will be alerted that they have gone over that number and won’t be able to submit their comment until they’ve edited it. This can be a useful tool to ensure commenters are concise with their comments.
+
+## Comment Reactions
+
+Talk comes with a `respect` button out of the box. Why a “respect” button, you ask? [Read more here](https://mediaengagement.org/research/engagement-buttons/). 
+
+We also have 2 more plugins, `like` and `love`, that you can turn on and experiment with on your own Talk install. 
+
+And our plugin architecture makes it easy to create your own custom reaction buttons too. 
+
+## Reporting Comments
+
+Readers can report comments if they feel they’re unsuitable. They can choose one of the following reasons:
+
+* This comment is offensive
+* This looks like an ad/marketing
+* I don’t agree with this comment
+* Other
+
+They can also include more information and this shows for moderators in the Flag Detail area on the comments in the moderation queues.
+
+Comments that are reported go to the Reported queue, with the exception of “I don’t agree with this comment”. This option is a useful way to let other readers vent their frustration, but since just disagreeing with something doesn’t mean it’s not suitable, we leave it be.
+
+
+## Reporting Usernames
+
+Usernames can also be reported by readers, if the username is inappropriate or offensive. They can choose one of the following reasons:
+
+* This username is offensive
+* I don't like this username
+* This user is impersonating
+* This looks like an ad/marketing
+
+Reported usernames go to the Reported Usernames queue which is located in the Community tab. If a username is rejected by a moderator, the commenter is prompted to change their username and they are suspended from commenting, replying or reacting to comments until they do so. They receive an email, and also a message at the top of their comment streams that let’s them know they’re suspended.
+
+If the commenter changes their username, it goes back to the Reported Usernames queue for approval. If the updated username is accepted by a moderator, the commenter is no longer suspended and continue interacting with the community. If the username is rejected, the commenter remains suspended until they change their username to something appropriate.
+
+Approved usernames that are reported do not show up in the Reported Usernames queues any longer, since they have been specifically OK’ed by a moderator.
+
+## Ignoring Users
+
+Commenters can ignore other commenters and essentially mute them entirely from the comment platform. Commenters can manage their ignored users list in their My Profile tab.
+
+## Featured Comments
+
+Moderators can feature comments that they want to highlight and recommend to their community. Featured comments show up on a separate tab, that is the default for the comment stream. Featured comments within the stream show a Featured badge.
+
+## Sorting the Stream
+
+Readers can sort the stream in 4 ways based on their viewing preferencet:
+
+* Oldest first
+* Newest first
+* Most respect first (or most liked, most loved, etc., depending on what reactions you use)
+* Most replied first
+
+We also make it easy to add more sorts via custom plugins.
+
+## Badges
+
+Badges differentiate users and comments on the stream. By default, Talk has two badges. 
+
+The Staff user badge that shows when a commenter has an Admin, Moderator, or Staff role. 
+
+The Featured comment badge shows when a comment has been featured.
+
+Another optional badge is the Subscriber badge (which is available as a [Recipe](/plugin-recipes/#recipe-subscriber). 
+
+Badges are another easy part of Talk to customize by creating a new `tag`, then setting some rules for when it should show, and how the badge should be styled.
+
+## My Profile
+
+The My Profile tab is where commenters can go to see their comment history, as well as reactions and replies to their comments. They can also see their email address associated with Talk, and manage their Ignored Users list here.
+
+## Notifications & Error Messaging
+
+Talk leverages notification and messages on the stream to alert users to important information about their comment or their account.
+
+**Pre-moderation of comments**
+
+If a stream is set to Pre-mod, or a commenter’s Trust karma score has fallen to negative, or if for any other reason their comment is being pre-moderated, they will get a notification letting them know this when they post a comment.
+
+**Suspension because of Username**
+
+When a commenter has been suspended because their username is inappropriate, they will see a message at the top of their streams stating this.
+
+**Timed Suspension**
+
+When a commenter has been suspended for a block of time (aka a “time-out”), they will see a message at the top of their streams stating this.
+
+**Ban**
+
+When a commenter has been banned, they will see a message at the top of their streams staging this.

From aa0c41c342e66ecd254d4024ed4b9997c9c5cc29 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Sat, 14 Oct 2017 18:25:41 +0100
Subject: [PATCH 008/344] Add section Moderator Features

---
 .../03-03-product-guide-moderator-features.md | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 355c40a1c..142fb8652 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -2,3 +2,128 @@
 title: Moderator Features
 permalink: /moderator-features/
 ---
+
+## The Talk Admin
+
+The Admin is your moderators will moderate your comments, and your Admins will configure and manage the different parts of Talk.
+
+### Dashboard
+
+The Dashboard provides real-time information to moderators so they know at a glance where they should direct their attention. It shows what articles are receiving the most reports and where the most active conversations are happening.
+
+### Moderate
+
+This is the tab where Moderators will spend the majority of their time. They can choose (via the dropdown) which story they would like to moderate, or moderate site-wide.
+
+#### Default Mod Queues
+
+**New**
+
+The New queue contains all comments that have not been moderated yet.
+
+**Reported**
+
+The Reported queue contains all comments that need moderator attention.
+
+**Approved**
+
+The Approved queue contains all approved comments.
+
+**Rejected**
+
+The Rejected queue contains all comments that have been rejected, either manually by moderators or automatically, e.g. they have used a banned word.
+
+**All**
+
+The All queue contains all comments that have been submitted either article or site-wide.
+
+#### Moderation Badges 
+
+**Pre-mod**
+
+The Pre-mod badge signifies comments that are being pre-modded.
+
+**User**
+
+The User badge signifies comments that have been reported by another user.
+
+**History**
+
+The History badge signifies comments that have been flagged because of a user’s history.
+
+**Toxic**
+
+The Toxic badge signifies comments that are above the set Toxicity Probability Threshold. Note you must have `talk-plugin-toxic-comments` enabled. [Read more about Toxic Comments here](LINK).
+
+**Suspect**
+
+The Suspect badge signifies comments that contain a Suspect Word. [Read more about Suspect Words here](LINK).
+
+**Contains Link**
+
+The Contains Link badge signifies a comment that contains a link, which can sometimes mean it is a spam or ad comment.
+
+**Flag Details View**
+
+At the bottom of each comment in the moderation queues, you can see more information about a comment’s flags by clicking on More Detail.
+
+#### Moderator Actions
+
+**Accept**
+
+Accepting a comment ensures that the comment is displayed on the stream.
+
+**Reject**
+
+Rejecting a comment removes the comment from the stream.
+
+**Feature**
+
+Featuring a comment adds that comment to the Featured Comments tab on the stream.
+
+**Suspend User**
+
+Suspending a user allows a moderator to give a commenter a “time-out”; during that time they won’t be allowed to post comments or react to comments. 
+
+**Ban User**
+
+Banning a user allows a moderator to permanently disallow a commenter to interact with their community. The commenter’s previous comments will remain on the site. This action can only be un-done manually by a moderator.
+
+#### Viewing a User’s Comment History
+
+In order to get an idea of what sort of a commenter someone is, moderators can click on the commenter’s username in any moderation queue and see details about their history.
+
+**Username, Email and Member Since Date**
+
+This shows the basic details about a commenter.
+
+**Total Comments**
+
+This shows the number of comments that a commenter has made that currently display on the site.
+
+**Reject Rate**
+
+This shows the % of comments a commenter has had rejected by moderators, or automatically.
+
+**Reports**
+
+This shows if a commenter is a reliable flagger, an unreliable flagger, or a neutral flagger. [Read more about reliable and unreliable flaggers here](LINK).
+
+**Moderating from this View**
+
+Talk also allows you to moderate a commenter’s recent comments from this view.
+
+#### Keyboard Shortcuts
+
+Talk also supports a number of keyboard shortcuts that moderators can leverage to moderate quickly:
+
+| Shortcut | Action                          |
+| -------- | ------------------------------- |
+| `j`      | Go to the next comment          |
+| `k`      | Go to the previous comment      |
+| `ctrl+f` | Open search                     |
+| `t`      | Switch queues                   |
+| `s`      | Toggle single comment edit view |
+| `?`      | Open this menu                  |
+| `d`      | Approve                         |
+| `f`      | Reject                          |

From 759338dc02fa18150f0e271780e762edb5c0ffbc Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Sat, 14 Oct 2017 18:36:17 +0100
Subject: [PATCH 009/344] Added more Moderator Features

---
 .../03-03-product-guide-moderator-features.md | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 142fb8652..98fa5fc4c 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -127,3 +127,26 @@ Talk also supports a number of keyboard shortcuts that moderators can leverage t
 | `?`      | Open this menu                  |
 | `d`      | Approve                         |
 | `f`      | Reject                          |
+
+### Stories
+
+In the Stories tab moderators can view all the stories that have Talk comments embedded on them, as well as be able to Open or Close comment streams on stories.
+
+### Community
+
+The Community tab houses everything having to do with your team and your commenters.
+
+#### Moderating Usernames
+
+Any usernames that have been reported will show in the Reported Usernames sub-tab. Moderators can approve usernames if they’re suitable, or reject a username. If a username is rejected, the commenter will be notified that they need to change their username; until they do, they will be suspended from Talk. The updated username then again appears in this queue for a decision by moderators.
+
+#### Managing People & Roles
+
+All your team and commenters show in the People sub-tab. From here, you can manage your team members’ roles (Admins, Moderators, Staff), as well as search for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). 
+### Configure
+
+See [Configuring Talk](LINK).
+
+## Moderating via the Comment Stream
+
+Moderators can also choose to moderate comments in situ. If you are logged in as a Moderator or Admin, you will see a caret dropdown on each comment that allows you to Approve, Reject, or Feature comments, or Ban a User directly from the comment stream.

From c8f432268be247287f23079d938b512697cfcb77 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Sat, 14 Oct 2017 18:41:50 +0100
Subject: [PATCH 010/344] Add Nav for Configuring Talk section

---
 docs/_data/nav.yaml                                | 2 ++
 docs/_docs/03-06-product-guide-configuring-talk.md | 4 ++++
 2 files changed, 6 insertions(+)
 create mode 100644 docs/_docs/03-06-product-guide-configuring-talk.md

diff --git a/docs/_data/nav.yaml b/docs/_data/nav.yaml
index 9a205e8fe..41d0f7bda 100644
--- a/docs/_data/nav.yaml
+++ b/docs/_data/nav.yaml
@@ -25,6 +25,8 @@ items:
         url: /trust/
       - title: Toxic Comments
         url: /toxic-comments/
+      - title: Configuring Talk
+        url: /configuring-talk/
   - title: Plugins
     children:
       - title: Plugins Overview
diff --git a/docs/_docs/03-06-product-guide-configuring-talk.md b/docs/_docs/03-06-product-guide-configuring-talk.md
new file mode 100644
index 000000000..c4089d16c
--- /dev/null
+++ b/docs/_docs/03-06-product-guide-configuring-talk.md
@@ -0,0 +1,4 @@
+---
+title: Configuring Talk
+permalink: /configuring-talk/
+---

From a167b6ce2c88e8234f453afb887493588127ba41 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 16 Oct 2017 18:20:25 +0100
Subject: [PATCH 011/344] Add Stream Configuration docs

---
 .../03-06-product-guide-configuring-talk.md   | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/_docs/03-06-product-guide-configuring-talk.md b/docs/_docs/03-06-product-guide-configuring-talk.md
index c4089d16c..2d50157aa 100644
--- a/docs/_docs/03-06-product-guide-configuring-talk.md
+++ b/docs/_docs/03-06-product-guide-configuring-talk.md
@@ -2,3 +2,27 @@
 title: Configuring Talk
 permalink: /configuring-talk/
 ---
+
+## Configuring an Individual Stream
+
+There are two ways Admins can configure Talk - the first is via the Configure tab on the comment stream.
+
+### Enable Pre-moderation
+
+Allows toggling pre-moderation for the current comment stream.
+
+### Pre-moderation Comments Containing Links
+
+Allows toggling of pre-moderating comments that have links.
+
+### Ask Readers a Question & Question Icons
+
+Admins can choose to Ask Readers a Question in order to help guide the discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/).
+
+Admins can also use different icons to display different messaging other than a question on a particular stream, like an announcement or general information about the story.
+
+### Closing a Stream
+
+Admins can close a comment stream which disallows new comments. Previous comments will remain displayed on the stream for readers to view.
+
+## Global Configuration

From 988cb870bb87a0e5dffb63c0601fe9dc188e6189 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 17 Oct 2017 10:13:40 +0100
Subject: [PATCH 012/344] Global Configuration docs

---
 .../03-06-product-guide-configuring-talk.md   | 64 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/docs/_docs/03-06-product-guide-configuring-talk.md b/docs/_docs/03-06-product-guide-configuring-talk.md
index 2d50157aa..845c6ec19 100644
--- a/docs/_docs/03-06-product-guide-configuring-talk.md
+++ b/docs/_docs/03-06-product-guide-configuring-talk.md
@@ -19,10 +19,70 @@ Allows toggling of pre-moderating comments that have links.
 
 Admins can choose to Ask Readers a Question in order to help guide the discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/).
 
-Admins can also use different icons to display different messaging other than a question on a particular stream, like an announcement or general information about the story.
+There are a selection of icons to display different messaging other than a question on a particular stream, like an announcement, or general information about the story.
 
 ### Closing a Stream
 
-Admins can close a comment stream which disallows new comments. Previous comments will remain displayed on the stream for readers to view.
+Closing a stream will prevent new comments. Previous comments will remain displayed on the stream for readers to view.
+
 
 ## Global Configuration
+
+Global configuration settings are available via Admin > Configure. These settings are site-wide and will affect all of your comment streams.
+
+### Stream Settings
+
+#### Limit Comment Length
+
+A maximum comment length across the site.
+
+#### Comment Stream Description
+
+Description text that will appear above every comment stream site-wide. We recommend linking to your Code of Conduct or Community Guidelines. [Read tips on how to write a Code of Conduct here](https://guides.coralproject.net/create-a-code-of-conduct/).
+
+#### Closed Stream Message
+
+A message that will display when streams are closed.
+
+#### Edit Comment Timeframe
+
+The timeframe in seconds in which commenters have to edit their comment.
+
+#### Close Comments After
+
+Default time after which all comment streams will close.
+
+### Moderation Settings
+
+#### Require Email Verification
+
+Require new users to verify their email address prior to commenting.
+
+#### Enable Pre-moderation
+
+Turn on pre-moderation across the site, meaning all comments will need to be moderated before they will be displayed.
+
+#### Pre-moderate Comments Containing Links
+
+Turn on pre-moderation for comments with links across the site, meaning all comments with links will need to be moderated before they will be displayed.
+
+#### Banned Words List
+
+A list of words that will trigger a comment to be automatically Rejected.
+
+#### Suspect Words List
+
+A list of words that will trigger a comment to be automatically Reported. Comments with suspect words will display until a moderator takes action on them.
+
+### Technical Settings
+
+#### Permitted Domains
+A list of domains where your Talk instance is allowed to be embedded. Typical use is `localhost`, `staging.yourdomain.com`, `yourdomain.com`, etc.
+
+#### Embed Script
+
+This is the unique Talk script that is to be used to embed Talk on your website.
+
+#### Custom CSS URL
+
+The link to your custom stylesheet for Talk. This will override any default styles, so you can make Talk your own!

From 3a8ed3033a0a11411addd30e9a26c2a623279e41 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 17 Oct 2017 10:28:56 +0100
Subject: [PATCH 013/344] Fix styling

---
 .../03-02-product-guide-commenter-features.md | 16 +++++++--------
 docs/_docs/03-04-product-guide-trust.md       |  4 ++--
 .../03-05-product-guide-toxic-comments.md     |  6 +++---
 docs/_sass/talk.scss                          | 20 +++++++++++++++----
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index 81ec5128d..cffd16316 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -17,13 +17,13 @@ We also provide a Facebook auth plugin that supports logging in with Facebook (y
 
 Talk supports a standard comment hierarchy. There are top-level (or parent) comments, and then replies to that comment (or children comments). 
 
-**Permalinks**
+### Permalinks
 
 All levels of comments and replies are able to be linked to via permalink. Permalinks are structured using a `commentId` query param:
 
 https://domain.com/article-asset-slug/?commentId=0879edd7-1c4f-4918-abd2-a770db446b75
 
-**Threading**
+### Threading
 
 Talk supports by default 3 levels of threading, meaning each top-level comment has a depth of 3 replies; replies beyond that are not nested below the 3rd level. You can adjust this using the `TALK_THREADING_LEVEL` configuration variable. We don’t recommend deep threading because it can cause issues with styling, especially on mobile.
 
@@ -37,7 +37,7 @@ You can style threaded comments using these CSS classes:
   talk-stream-pending-comment
 ```
 
-**Automatic Updates**
+### Automatic Updates
 
 Talk supports real-time loading and updating of comments, via subscriptions (specifically GraphQL Subscriptions); this enables us to not have to refresh to see new comments on a given comment stream. 
 
@@ -45,7 +45,7 @@ Talk enables this via “Load More” buttons for both top-level comments (this
 
 We’ve decided to go this route in order to make the viewing experience as smooth as possible, so that the feed of comments doesn’t change as you’re reading just because new comments are coming in. This could be especially disruptive on breaking news and/or controversial stories with very active discussions.
 
-**Comment Character Limits**
+### Comment Character Limits
 
 You can enable Talk to limit the character length for comments, for example, some newsrooms we’ve worked with prefer a limit between 2000 and 5000 characters. Commenters will be alerted that they have gone over that number and won’t be able to submit their comment until they’ve edited it. This can be a useful tool to ensure commenters are concise with their comments.
 
@@ -125,18 +125,18 @@ The My Profile tab is where commenters can go to see their comment history, as w
 
 Talk leverages notification and messages on the stream to alert users to important information about their comment or their account.
 
-**Pre-moderation of comments**
+### Pre-moderation of comments
 
 If a stream is set to Pre-mod, or a commenter’s Trust karma score has fallen to negative, or if for any other reason their comment is being pre-moderated, they will get a notification letting them know this when they post a comment.
 
-**Suspension because of Username**
+### Suspension because of Username
 
 When a commenter has been suspended because their username is inappropriate, they will see a message at the top of their streams stating this.
 
-**Timed Suspension**
+### Timed Suspension
 
 When a commenter has been suspended for a block of time (aka a “time-out”), they will see a message at the top of their streams stating this.
 
-**Ban**
+### Ban
 
 When a commenter has been banned, they will see a message at the top of their streams staging this.
diff --git a/docs/_docs/03-04-product-guide-trust.md b/docs/_docs/03-04-product-guide-trust.md
index 42587d203..396ecd07d 100644
--- a/docs/_docs/03-04-product-guide-trust.md
+++ b/docs/_docs/03-04-product-guide-trust.md
@@ -6,7 +6,7 @@ permalink: /trust/
 Trust is a set of components within Talk that incorporate automated moderation
 features based on a user's previous behavior.
 
-### User Karma Score
+## User Karma Score
 
 Using Trust’s calculations, Talk will automatically pre-moderate comments of
 users who have a negative karma score. All users start out with a `0` neutral
@@ -32,7 +32,7 @@ You can configure your own Trust thresholds by using [TRUST_THRESHOLD]({{"/advan
 configuration.
 
 
-### Reliable and Unreliable Flaggers
+## Reliable and Unreliable Flaggers
 
 Trust also calculates how reliable users are in terms of the comments they
 report. This information is displayed to moderators in the User History drawer,
diff --git a/docs/_docs/03-05-product-guide-toxic-comments.md b/docs/_docs/03-05-product-guide-toxic-comments.md
index 56677a421..ac680916d 100644
--- a/docs/_docs/03-05-product-guide-toxic-comments.md
+++ b/docs/_docs/03-05-product-guide-toxic-comments.md
@@ -21,7 +21,7 @@ Talk (0.8 or 80% is the default), which works like this:
 Read more about Coral’s take on toxicity
 [on our blog](https://blog.coralproject.net/toxic-avenging/){:target="_blank"}.
 
-### What is the Perspective API?
+## What is the Perspective API?
 
 The likely toxicity of a comment is evaluated using scores generated from
 [Perspective API](http://perspectiveapi.com/){:target="_blank"}. This is part of
@@ -48,12 +48,12 @@ We’ve talked with their team on several occasions, and have been impressed by
 their dedication and commitment to this issue. These are smart people who are
 trying to improve a broken part of the internet.
 
-### How do I add the Toxic Comments plugin?
+## How do I add the Toxic Comments plugin?
 To enable this behavior, visit the
 [talk-plugin-toxic-comments]({{ "/additional-plugins/#talk-plugin-toxic-comments" | relative_url }})
 plugin documentation.
 
 
-### Request an API Key
+## Request an API Key
 
 You can read more about Google's Perspective API and/or request an API key here: [http://perspectiveapi.com/](http://perspectiveapi.com/).
diff --git a/docs/_sass/talk.scss b/docs/_sass/talk.scss
index 69e039951..e967d10e4 100644
--- a/docs/_sass/talk.scss
+++ b/docs/_sass/talk.scss
@@ -16,11 +16,25 @@ body {
 }
 
 h1 {
-  font-size: 1.7em;
+  font-size: 2rem;
 }
 
-h2, h3, h4 {
+h2 {
   margin: 1.6em 0 0.8em;
+  font-size: 1.75rem;
+  font-weight: 600;
+}
+
+h3 {
+  margin: 1.6em 0 0.8em;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+h4 {
+  margin: 1.6em 0 0.8em;
+  font-size: 1.2rem;
+  font-weight: 500;
 }
 
 .btn-coral {
@@ -41,7 +55,6 @@ h2, h3, h4 {
 }
 
 article.configuration {
-
   h2, .toc {
     @extend .param;
   }
@@ -408,4 +421,3 @@ a.brand {
     }
   }
 }
-

From a586756ac9ad82289d83377e33bf8ac644988dea Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 17 Oct 2017 12:27:33 +0100
Subject: [PATCH 014/344] Add FAQ and Tutorial sections

---
 docs/_data/nav.yaml                     |  8 ++++++++
 docs/_docs/05-01-faq.md                 | 16 ++++++++++++++++
 docs/_docs/06-01-developer-tutorials.md | 18 ++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 docs/_docs/05-01-faq.md
 create mode 100644 docs/_docs/06-01-developer-tutorials.md

diff --git a/docs/_data/nav.yaml b/docs/_data/nav.yaml
index 41d0f7bda..753607355 100644
--- a/docs/_data/nav.yaml
+++ b/docs/_data/nav.yaml
@@ -37,3 +37,11 @@ items:
         url: /additional-plugins/
       - title: Plugin Recipes
         url: /plugin-recipes/
+  - title: FAQ
+    children:
+      - title: FAQ
+        url: /faq/
+  - title: Developer Tutorials
+    children:
+      - title: Developer Tutorials
+        url: /developer-tutorials/
diff --git a/docs/_docs/05-01-faq.md b/docs/_docs/05-01-faq.md
new file mode 100644
index 000000000..c084bc903
--- /dev/null
+++ b/docs/_docs/05-01-faq.md
@@ -0,0 +1,16 @@
+---
+title: FAQ
+permalink: /faq/
+---
+
+## How can I get help integrating Talk into my newsroom?
+
+We're here to help with newsrooms of all sizes. Email our Integration Engineer (jeff@mozillafoundation.org) to set up a meeting.
+
+## How do I request a feature or submit a bug?
+
+The best way is to [submit a Github issue](https://github.com/coralproject/talk/issues). Make sure you give plenty of details, our Core Team can usually respond within a few hours on weekdays.
+
+## How can our dev team contribute to Talk?
+
+We are lucky to work with newsroom dev teams and individual contributors who span the world, and come from newsrooms of all sizes. You can read our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md) to get started, but feel free to reach out to us via Github, or get in touch directly with Jeff via jeff@mozillafoundation.org.
diff --git a/docs/_docs/06-01-developer-tutorials.md b/docs/_docs/06-01-developer-tutorials.md
new file mode 100644
index 000000000..e03b88e0c
--- /dev/null
+++ b/docs/_docs/06-01-developer-tutorials.md
@@ -0,0 +1,18 @@
+---
+title: Developer Tutorials
+permalink: /developer-tutorials/
+---
+
+Coming soon!
+
+**How can I connect Talk to my own app/newsroom/blog’s auth?**
+
+**How can I display a story’s comment count externally?**
+
+**How can I add a moderation queue that filters by a tag?**
+
+**How can I manage Assets with Talk?**
+
+**How can I style Talk?**
+
+**How do I submit a PR to Talk?**

From 39a209231038956b5d7585649b050b6e006e9023 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 17 Oct 2017 12:32:56 +0100
Subject: [PATCH 015/344] Add faq

---
 docs/_docs/06-01-developer-tutorials.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/_docs/06-01-developer-tutorials.md b/docs/_docs/06-01-developer-tutorials.md
index e03b88e0c..de0065132 100644
--- a/docs/_docs/06-01-developer-tutorials.md
+++ b/docs/_docs/06-01-developer-tutorials.md
@@ -13,6 +13,8 @@ Coming soon!
 
 **How can I manage Assets with Talk?**
 
+**How can I add a new translation for Talk?**
+
 **How can I style Talk?**
 
 **How do I submit a PR to Talk?**

From 8ce9f2d4bbbcf44ea361526544dc38eac91baca3 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 20 Oct 2017 11:28:03 +0100
Subject: [PATCH 016/344] Clean up docs, fix links, remove Tutorials section
 for now

---
 docs/_data/nav.yaml                           |  4 ----
 .../03-02-product-guide-commenter-features.md |  6 +++---
 .../03-03-product-guide-moderator-features.md |  8 ++++----
 .../03-06-product-guide-configuring-talk.md   |  4 ++--
 docs/_docs/06-01-developer-tutorials.md       | 20 -------------------
 5 files changed, 9 insertions(+), 33 deletions(-)
 delete mode 100644 docs/_docs/06-01-developer-tutorials.md

diff --git a/docs/_data/nav.yaml b/docs/_data/nav.yaml
index 753607355..9138d6603 100644
--- a/docs/_data/nav.yaml
+++ b/docs/_data/nav.yaml
@@ -41,7 +41,3 @@ items:
     children:
       - title: FAQ
         url: /faq/
-  - title: Developer Tutorials
-    children:
-      - title: Developer Tutorials
-        url: /developer-tutorials/
diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index cffd16316..76cd81cd1 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -25,7 +25,7 @@ https://domain.com/article-asset-slug/?commentId=0879edd7-1c4f-4918-abd2-a770db4
 
 ### Threading
 
-Talk supports by default 3 levels of threading, meaning each top-level comment has a depth of 3 replies; replies beyond that are not nested below the 3rd level. You can adjust this using the `TALK_THREADING_LEVEL` configuration variable. We don’t recommend deep threading because it can cause issues with styling, especially on mobile.
+Talk supports by default 3 levels of threading, meaning each top-level comment has a depth of 3 replies; replies beyond that are not nested below the 3rd level. You can adjust this using the [`TALK_THREADING_LEVEL`]({{ "/advanced-configuration/#talk_threading_level" | relative_url }})configuration variable. We don’t recommend deep threading because it can cause issues with styling, especially on mobile.
 
 You can style threaded comments using these CSS classes:
 
@@ -51,7 +51,7 @@ You can enable Talk to limit the character length for comments, for example, som
 
 ## Comment Reactions
 
-Talk comes with a `respect` button out of the box. Why a “respect” button, you ask? [Read more here](https://mediaengagement.org/research/engagement-buttons/). 
+Talk comes with a `respect` button out of the box. Why a “respect” button, you ask? [Read more here](https://mediaengagement.org/research/engagement-buttons/){:target="_blank"}. 
 
 We also have 2 more plugins, `like` and `love`, that you can turn on and experiment with on your own Talk install. 
 
@@ -113,7 +113,7 @@ The Staff user badge that shows when a commenter has an Admin, Moderator, or Sta
 
 The Featured comment badge shows when a comment has been featured.
 
-Another optional badge is the Subscriber badge (which is available as a [Recipe](/plugin-recipes/#recipe-subscriber). 
+Another optional badge is the Subscriber badge (which is available as a [Recipe]({{ "/plugin-recipes/#recipe-subscriber" | relative_url}}). 
 
 Badges are another easy part of Talk to customize by creating a new `tag`, then setting some rules for when it should show, and how the badge should be styled.
 
diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 98fa5fc4c..73252de7a 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -53,11 +53,11 @@ The History badge signifies comments that have been flagged because of a user’
 
 **Toxic**
 
-The Toxic badge signifies comments that are above the set Toxicity Probability Threshold. Note you must have `talk-plugin-toxic-comments` enabled. [Read more about Toxic Comments here](LINK).
+The Toxic badge signifies comments that are above the set Toxicity Probability Threshold. Note you must have `talk-plugin-toxic-comments` enabled. [Read more about Toxic Comments here]({{ "/toxic-comments/" | relative_url}}).
 
 **Suspect**
 
-The Suspect badge signifies comments that contain a Suspect Word. [Read more about Suspect Words here](LINK).
+The Suspect badge signifies comments that contain a Suspect Word.
 
 **Contains Link**
 
@@ -107,7 +107,7 @@ This shows the % of comments a commenter has had rejected by moderators, or auto
 
 **Reports**
 
-This shows if a commenter is a reliable flagger, an unreliable flagger, or a neutral flagger. [Read more about reliable and unreliable flaggers here](LINK).
+This shows if a commenter is a reliable flagger, an unreliable flagger, or a neutral flagger. [Read more about reliable and unreliable flaggers here]({{ "/trust/#reliable-and-unreliable-flaggers" | relative_url }}).
 
 **Moderating from this View**
 
@@ -145,7 +145,7 @@ Any usernames that have been reported will show in the Reported Usernames sub-ta
 All your team and commenters show in the People sub-tab. From here, you can manage your team members’ roles (Admins, Moderators, Staff), as well as search for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). 
 ### Configure
 
-See [Configuring Talk](LINK).
+See [Configuring Talk]({{ "/configuring-talk/" | relative_url }}).
 
 ## Moderating via the Comment Stream
 
diff --git a/docs/_docs/03-06-product-guide-configuring-talk.md b/docs/_docs/03-06-product-guide-configuring-talk.md
index 845c6ec19..3225b31bb 100644
--- a/docs/_docs/03-06-product-guide-configuring-talk.md
+++ b/docs/_docs/03-06-product-guide-configuring-talk.md
@@ -17,7 +17,7 @@ Allows toggling of pre-moderating comments that have links.
 
 ### Ask Readers a Question & Question Icons
 
-Admins can choose to Ask Readers a Question in order to help guide the discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/).
+Admins can choose to Ask Readers a Question in order to help guide the discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/){:target="_blank"}.
 
 There are a selection of icons to display different messaging other than a question on a particular stream, like an announcement, or general information about the story.
 
@@ -38,7 +38,7 @@ A maximum comment length across the site.
 
 #### Comment Stream Description
 
-Description text that will appear above every comment stream site-wide. We recommend linking to your Code of Conduct or Community Guidelines. [Read tips on how to write a Code of Conduct here](https://guides.coralproject.net/create-a-code-of-conduct/).
+Description text that will appear above every comment stream site-wide. We recommend linking to your Code of Conduct or Community Guidelines. [Read tips on how to write a Code of Conduct here](https://guides.coralproject.net/create-a-code-of-conduct/){:target="_blank"}.
 
 #### Closed Stream Message
 
diff --git a/docs/_docs/06-01-developer-tutorials.md b/docs/_docs/06-01-developer-tutorials.md
deleted file mode 100644
index de0065132..000000000
--- a/docs/_docs/06-01-developer-tutorials.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Developer Tutorials
-permalink: /developer-tutorials/
----
-
-Coming soon!
-
-**How can I connect Talk to my own app/newsroom/blog’s auth?**
-
-**How can I display a story’s comment count externally?**
-
-**How can I add a moderation queue that filters by a tag?**
-
-**How can I manage Assets with Talk?**
-
-**How can I add a new translation for Talk?**
-
-**How can I style Talk?**
-
-**How do I submit a PR to Talk?**

From ee548d71802577cb695f149090fc5c0f16a3a6f4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Oct 2017 14:45:12 +0200
Subject: [PATCH 017/344] Disable network logging

---
 nightwatch-browserstack.conf.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 788bfe97f..604691c81 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -23,7 +23,9 @@ const nightwatch_config = {
         'browserstack.key': process.env.BROWSERSTACK_KEY,
         'browserstack.local': true,
         'browserstack.debug': true,
-        'browserstack.networkLogs': true,
+
+        // Disable this, as it makes bs slow and brittle.
+        'browserstack.networkLogs': false,
       }
     },
     chrome: {
@@ -49,8 +51,6 @@ const nightwatch_config = {
     ie: {
       desiredCapabilities: {
         browser: 'internet explorer',
-
-        // Windows 10 + IE seems to have troubles with the browserstack-local tunnel (10.17.17).
         os: 'Windows',
         os_version: '8.1',
         browser_version: '11',

From bef3e3e33c55b139c3e3702712dfc045fea1d201 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Oct 2017 17:19:44 +0200
Subject: [PATCH 018/344] Turn off notifications for flagged and edited

---
 .../src/routes/Moderation/containers/Moderation.js         | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 8787d77cd..1161ad5dc 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -115,17 +115,14 @@ class ModerationContainer extends Component {
         document: COMMENT_EDITED_SUBSCRIPTION,
         variables,
         updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-          const notifyText = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
-          return this.handleCommentChange(prev, comment, notifyText);
+          return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_FLAGGED_SUBSCRIPTION,
         variables,
         updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
-          const user = comment.actions[comment.actions.length - 1].user;
-          const notifyText = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
-          return this.handleCommentChange(prev, comment, notifyText);
+          return this.handleCommentChange(prev, comment);
         },
       },
     ];

From 5695599f743c3b1173905e000bb45511ad1ad85f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Oct 2017 17:23:31 +0200
Subject: [PATCH 019/344] Temporarily disable IE in browserstack ci

---
 scripts/e2e-ci.sh | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index f1376abcb..1e4f45691 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -21,7 +21,9 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
   # Test using browserstack.
   browserstack chrome
   browserstack firefox
-  browserstack ie
+
+  # temporarily turn off ci, please fix https://www.pivotaltracker.com/story/show/152144406.
+  # browserstack ie
 
   # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
   # browserstack safari

From 1bfecdd77c157137e1648223839f555df98d42f7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Oct 2017 17:55:37 +0200
Subject: [PATCH 020/344] Don't show notification when featuring comment

---
 .../talk-plugin-featured-comments/client/components/ModTag.js    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index 7dfd36f2d..0664f07cd 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -32,7 +32,6 @@ export default class ModTag extends React.Component {
   postTag = async () => {
     try {
       await this.props.postTag();
-      this.props.notify('success', t('talk-plugin-featured-comments.notify_self_featured', this.props.comment.user.username));
     }
     catch(err) {
       this.props.notify('error', getErrorMessages(err));

From e0713a5ec40444de1f96db499bc85b4ad5efd2fa Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 20 Oct 2017 17:56:24 +0100
Subject: [PATCH 021/344] Update auth section

---
 docs/_docs/03-02-product-guide-commenter-features.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index 76cd81cd1..07c64bd0f 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -7,9 +7,9 @@ permalink: /commenter-features/
 
 There are 2 ways that newsrooms can support signup/login functionality with Talk:
 
-Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
+*Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
 
-Create their own auth plugin (you can use ours as a template) to integrate with your own auth systems
+*Create their own auth plugin to integrate with your own auth systems
 
 We also provide a Facebook auth plugin that supports logging in with Facebook (you must provide your own Facebook App ID and Secret, which you can read more about here: https://developers.facebook.com) 
 

From c1b954965f02e2f75296558063ed5e848b9f8f35 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 20 Oct 2017 11:40:55 -0600
Subject: [PATCH 022/344] Fixed incorrect plugin naming

---
 docs/_docs/04-02-default-plugins.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/_docs/04-02-default-plugins.md b/docs/_docs/04-02-default-plugins.md
index aff17ebcc..5c987172d 100644
--- a/docs/_docs/04-02-default-plugins.md
+++ b/docs/_docs/04-02-default-plugins.md
@@ -98,17 +98,17 @@ Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}
 
 Provides a sort for the newest comments first.
 
-## talk-plugin-most-respected
+## talk-plugin-sort-most-respected
 
-Source: [plugins/talk-plugin-most-respected](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-most-respected){:target="_blank"}
+Source: [plugins/talk-plugin-sort-most-respected](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-most-respected){:target="_blank"}
 
 Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}, [talk-plugin-respect](#talk-plugin-respect){:.param}
 
 Provides a sort for the comments with the most `respect` reactions first.
 
-## talk-plugin-most-replied
+## talk-plugin-sort-most-replied
 
-Source: [plugins/talk-plugin-most-replied](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-most-replied){:target="_blank"}
+Source: [plugins/talk-plugin-sort-most-replied](https://github.com/coralproject/talk/tree/master/plugins/talk-plugin-sort-most-replied){:target="_blank"}
 
 Requires: [talk-plugin-viewing-options](#talk-plugin-viewing-options){:.param}
 

From a9cb206415f5dbfdf07e6f031a16fdd98ffcfae8 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 20 Oct 2017 13:14:00 -0600
Subject: [PATCH 023/344] formatting

---
 .../03-02-product-guide-commenter-features.md | 136 +++++++++++++-----
 .../03-03-product-guide-moderator-features.md |  86 +++++++----
 .../03-06-product-guide-configuring-talk.md   |  35 +++--
 docs/_docs/05-01-faq.md                       |   3 +-
 4 files changed, 184 insertions(+), 76 deletions(-)

diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index 76cd81cd1..d36fc2b27 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -9,134 +9,192 @@ There are 2 ways that newsrooms can support signup/login functionality with Talk
 
 Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
 
-Create their own auth plugin (you can use ours as a template) to integrate with your own auth systems
+Create their own auth plugin to integrate with your own auth systems
 
-We also provide a Facebook auth plugin that supports logging in with Facebook (you must provide your own Facebook App ID and Secret, which you can read more about here: https://developers.facebook.com) 
+We also provide a Facebook auth plugin that supports logging in with Facebook (you must provide your own Facebook App ID and Secret, which you can read more about here: [https://developers.facebook.com](https://developers.facebook.com){:target="_blank"})
 
 ## Comments and Replies
 
-Talk supports a standard comment hierarchy. There are top-level (or parent) comments, and then replies to that comment (or children comments). 
+Talk supports a standard comment hierarchy. There are top-level (or parent) comments, and then replies to that comment (or children comments).
 
 ### Permalinks
 
 All levels of comments and replies are able to be linked to via permalink. Permalinks are structured using a `commentId` query param:
 
-https://domain.com/article-asset-slug/?commentId=0879edd7-1c4f-4918-abd2-a770db446b75
+```text
+https://<your asset url>?commentId=<the comment id>
+```
+{:.no-copy}
 
 ### Threading
 
-Talk supports by default 3 levels of threading, meaning each top-level comment has a depth of 3 replies; replies beyond that are not nested below the 3rd level. You can adjust this using the [`TALK_THREADING_LEVEL`]({{ "/advanced-configuration/#talk_threading_level" | relative_url }})configuration variable. We don’t recommend deep threading because it can cause issues with styling, especially on mobile.
+Talk supports by default 3 levels of threading, meaning each top-level comment
+has a depth of 3 replies; replies beyond that are not nested below the 3rd
+level. You can adjust this using the
+[TALK_THREADING_LEVEL]({{ "/advanced-configuration/#talk_threading_level" | relative_url }}){:.param}
+configuration variable. We don’t recommend deep threading because it can cause
+issues with styling, especially on mobile.
 
 You can style threaded comments using these CSS classes:
 
- ``` 
-  talk-stream-comment-wrapper-level-${depth}
-  talk-stream-comment
-  talk-stream-comment-level-${depth}
-  talk-stream-highlighted-comment
-  talk-stream-pending-comment
 ```
+talk-stream-comment-wrapper-level-${depth}
+talk-stream-comment
+talk-stream-comment-level-${depth}
+talk-stream-highlighted-comment
+talk-stream-pending-comment
+```
+{:.no-copy}
 
 ### Automatic Updates
 
-Talk supports real-time loading and updating of comments, via subscriptions (specifically GraphQL Subscriptions); this enables us to not have to refresh to see new comments on a given comment stream. 
+Talk supports real-time loading and updating of comments, via subscriptions
+(specifically GraphQL Subscriptions); this enables us to not have to refresh to
+see new comments on a given comment stream.
 
-Talk enables this via “Load More” buttons for both top-level comments (this button appears at the top of the stream), and within conversation threads (this button appears in situ for replies).
+Talk enables this via “Load More” buttons for both top-level comments (this
+button appears at the top of the stream), and within conversation threads (this
+button appears in situ for replies).
 
-We’ve decided to go this route in order to make the viewing experience as smooth as possible, so that the feed of comments doesn’t change as you’re reading just because new comments are coming in. This could be especially disruptive on breaking news and/or controversial stories with very active discussions.
+We’ve decided to go this route in order to make the viewing experience as smooth
+as possible, so that the feed of comments doesn’t change as you’re reading just
+because new comments are coming in. This could be especially disruptive on
+breaking news and/or controversial stories with very active discussions.
 
 ### Comment Character Limits
 
-You can enable Talk to limit the character length for comments, for example, some newsrooms we’ve worked with prefer a limit between 2000 and 5000 characters. Commenters will be alerted that they have gone over that number and won’t be able to submit their comment until they’ve edited it. This can be a useful tool to ensure commenters are concise with their comments.
+You can enable Talk to limit the character length for comments, for example,
+some newsrooms we’ve worked with prefer a limit between 2000 and 5000
+characters. Commenters will be alerted that they have gone over that number and
+won’t be able to submit their comment until they’ve edited it. This can be a
+useful tool to ensure commenters are concise with their comments.
 
 ## Comment Reactions
 
-Talk comes with a `respect` button out of the box. Why a “respect” button, you ask? [Read more here](https://mediaengagement.org/research/engagement-buttons/){:target="_blank"}. 
+Talk comes with a `respect` button out of the box. Why a “respect” button, you
+ask?
+[Read more here](https://mediaengagement.org/research/engagement-buttons/){:target="_blank"}.
 
-We also have 2 more plugins, `like` and `love`, that you can turn on and experiment with on your own Talk install. 
+We also have 2 more plugins, `like` and `love`, that you can turn on and
+experiment with on your own Talk install.
 
-And our plugin architecture makes it easy to create your own custom reaction buttons too. 
+And our plugin architecture makes it easy to create your own custom reaction
+buttons too.
 
 ## Reporting Comments
 
-Readers can report comments if they feel they’re unsuitable. They can choose one of the following reasons:
+Readers can report comments if they feel they’re unsuitable. They can choose one
+of the following reasons:
 
 * This comment is offensive
 * This looks like an ad/marketing
 * I don’t agree with this comment
 * Other
 
-They can also include more information and this shows for moderators in the Flag Detail area on the comments in the moderation queues.
+They can also include more information and this shows for moderators in the Flag
+Detail area on the comments in the moderation queues.
 
-Comments that are reported go to the Reported queue, with the exception of “I don’t agree with this comment”. This option is a useful way to let other readers vent their frustration, but since just disagreeing with something doesn’t mean it’s not suitable, we leave it be.
+Comments that are reported go to the Reported queue, with the exception of “I
+don’t agree with this comment”. This option is a useful way to let other readers
+vent their frustration, but since just disagreeing with something doesn’t mean
+it’s not suitable, we leave it be.
 
 
 ## Reporting Usernames
 
-Usernames can also be reported by readers, if the username is inappropriate or offensive. They can choose one of the following reasons:
+Usernames can also be reported by readers, if the username is inappropriate or
+offensive. They can choose one of the following reasons:
 
 * This username is offensive
 * I don't like this username
 * This user is impersonating
 * This looks like an ad/marketing
 
-Reported usernames go to the Reported Usernames queue which is located in the Community tab. If a username is rejected by a moderator, the commenter is prompted to change their username and they are suspended from commenting, replying or reacting to comments until they do so. They receive an email, and also a message at the top of their comment streams that let’s them know they’re suspended.
+Reported usernames go to the Reported Usernames queue which is located in the
+Community tab. If a username is rejected by a moderator, the commenter is
+prompted to change their username and they are suspended from commenting,
+replying or reacting to comments until they do so. They receive an email, and
+also a message at the top of their comment streams that let’s them know they’re
+suspended.
 
-If the commenter changes their username, it goes back to the Reported Usernames queue for approval. If the updated username is accepted by a moderator, the commenter is no longer suspended and continue interacting with the community. If the username is rejected, the commenter remains suspended until they change their username to something appropriate.
+If the commenter changes their username, it goes back to the Reported Usernames
+queue for approval. If the updated username is accepted by a moderator, the
+commenter is no longer suspended and continue interacting with the community. If
+the username is rejected, the commenter remains suspended until they change
+their username to something appropriate.
 
-Approved usernames that are reported do not show up in the Reported Usernames queues any longer, since they have been specifically OK’ed by a moderator.
+Approved usernames that are reported do not show up in the Reported Usernames
+queues any longer, since they have been specifically OK’ed by a moderator.
 
 ## Ignoring Users
 
-Commenters can ignore other commenters and essentially mute them entirely from the comment platform. Commenters can manage their ignored users list in their My Profile tab.
+Commenters can ignore other commenters and essentially mute them entirely from
+the comment platform. Commenters can manage their ignored users list in their My
+Profile tab.
 
 ## Featured Comments
 
-Moderators can feature comments that they want to highlight and recommend to their community. Featured comments show up on a separate tab, that is the default for the comment stream. Featured comments within the stream show a Featured badge.
+Moderators can feature comments that they want to highlight and recommend to
+their community. Featured comments show up on a separate tab, that is the
+default for the comment stream. Featured comments within the stream show a
+Featured badge.
 
 ## Sorting the Stream
 
-Readers can sort the stream in 4 ways based on their viewing preferencet:
+Readers can sort the stream in 4 ways based on their viewing preferences:
 
 * Oldest first
 * Newest first
-* Most respect first (or most liked, most loved, etc., depending on what reactions you use)
+* Most respect first (or most liked, most loved, etc., depending on what
+  reactions you use)
 * Most replied first
 
 We also make it easy to add more sorts via custom plugins.
 
 ## Badges
 
-Badges differentiate users and comments on the stream. By default, Talk has two badges. 
+Badges differentiate users and comments on the stream. By default, Talk has two
+badges.
 
-The Staff user badge that shows when a commenter has an Admin, Moderator, or Staff role. 
+The Staff user badge that shows when a commenter has an Admin, Moderator, or
+Staff role.
 
 The Featured comment badge shows when a comment has been featured.
 
-Another optional badge is the Subscriber badge (which is available as a [Recipe]({{ "/plugin-recipes/#recipe-subscriber" | relative_url}}). 
+Another optional badge is the Subscriber badge (which is available as a
+[Recipe]({{ "/plugin-recipes/#recipe-subscriber" | relative_url}}).
 
-Badges are another easy part of Talk to customize by creating a new `tag`, then setting some rules for when it should show, and how the badge should be styled.
+Badges are another easy part of Talk to customize by creating a new `tag`, then
+setting some rules for when it should show, and how the badge should be styled.
 
 ## My Profile
 
-The My Profile tab is where commenters can go to see their comment history, as well as reactions and replies to their comments. They can also see their email address associated with Talk, and manage their Ignored Users list here.
+The My Profile tab is where commenters can go to see their comment history, as
+well as reactions and replies to their comments. They can also see their email
+address associated with Talk, and manage their Ignored Users list here.
 
 ## Notifications & Error Messaging
 
-Talk leverages notification and messages on the stream to alert users to important information about their comment or their account.
+Talk leverages notification and messages on the stream to alert users to
+important information about their comment or their account.
 
 ### Pre-moderation of comments
 
-If a stream is set to Pre-mod, or a commenter’s Trust karma score has fallen to negative, or if for any other reason their comment is being pre-moderated, they will get a notification letting them know this when they post a comment.
+If a stream is set to Pre-mod, or a commenter’s Trust karma score has fallen to
+negative, or if for any other reason their comment is being pre-moderated, they
+will get a notification letting them know this when they post a comment.
 
 ### Suspension because of Username
 
-When a commenter has been suspended because their username is inappropriate, they will see a message at the top of their streams stating this.
+When a commenter has been suspended because their username is inappropriate,
+they will see a message at the top of their streams stating this.
 
 ### Timed Suspension
 
-When a commenter has been suspended for a block of time (aka a “time-out”), they will see a message at the top of their streams stating this.
+When a commenter has been suspended for a block of time (aka a “time-out”), they
+will see a message at the top of their streams stating this.
 
 ### Ban
 
-When a commenter has been banned, they will see a message at the top of their streams staging this.
+When a commenter has been banned, they will see a message at the top of their
+streams staging this.
diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 73252de7a..45516b1a5 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -5,15 +5,21 @@ permalink: /moderator-features/
 
 ## The Talk Admin
 
-The Admin is your moderators will moderate your comments, and your Admins will configure and manage the different parts of Talk.
+The Admin is your moderators will moderate your comments, and your Admins will
+configure and manage the different parts of Talk.
 
 ### Dashboard
 
-The Dashboard provides real-time information to moderators so they know at a glance where they should direct their attention. It shows what articles are receiving the most reports and where the most active conversations are happening.
+The Dashboard provides real-time information to moderators so they know at a
+glance where they should direct their attention. It shows what articles are
+receiving the most reports and where the most active conversations are
+happening.
 
 ### Moderate
 
-This is the tab where Moderators will spend the majority of their time. They can choose (via the dropdown) which story they would like to moderate, or moderate site-wide.
+This is the tab where Moderators will spend the majority of their time. They can
+choose (via the dropdown) which story they would like to moderate, or moderate
+site-wide.
 
 #### Default Mod Queues
 
@@ -31,13 +37,15 @@ The Approved queue contains all approved comments.
 
 **Rejected**
 
-The Rejected queue contains all comments that have been rejected, either manually by moderators or automatically, e.g. they have used a banned word.
+The Rejected queue contains all comments that have been rejected, either
+manually by moderators or automatically, e.g. they have used a banned word.
 
 **All**
 
-The All queue contains all comments that have been submitted either article or site-wide.
+The All queue contains all comments that have been submitted either article or
+site-wide.
 
-#### Moderation Badges 
+#### Moderation Badges
 
 **Pre-mod**
 
@@ -49,11 +57,14 @@ The User badge signifies comments that have been reported by another user.
 
 **History**
 
-The History badge signifies comments that have been flagged because of a user’s history.
+The History badge signifies comments that have been flagged because of a user’s
+history.
 
 **Toxic**
 
-The Toxic badge signifies comments that are above the set Toxicity Probability Threshold. Note you must have `talk-plugin-toxic-comments` enabled. [Read more about Toxic Comments here]({{ "/toxic-comments/" | relative_url}}).
+The Toxic badge signifies comments that are above the set Toxicity Probability
+Threshold. Note you must have [talk-plugin-toxic-comments]({{ "/additional-plugins/#talk-plugin-toxic-comments" | relative_url }}){:.param} enabled.
+[Read more about Toxic Comments here]({{ "/toxic-comments/" | relative_url}}).
 
 **Suspect**
 
@@ -61,11 +72,13 @@ The Suspect badge signifies comments that contain a Suspect Word.
 
 **Contains Link**
 
-The Contains Link badge signifies a comment that contains a link, which can sometimes mean it is a spam or ad comment.
+The Contains Link badge signifies a comment that contains a link, which can
+sometimes mean it is a spam or ad comment.
 
 **Flag Details View**
 
-At the bottom of each comment in the moderation queues, you can see more information about a comment’s flags by clicking on More Detail.
+At the bottom of each comment in the moderation queues, you can see more
+information about a comment’s flags by clicking on More Detail.
 
 #### Moderator Actions
 
@@ -79,19 +92,25 @@ Rejecting a comment removes the comment from the stream.
 
 **Feature**
 
-Featuring a comment adds that comment to the Featured Comments tab on the stream.
+Featuring a comment adds that comment to the Featured Comments tab on the
+stream.
 
 **Suspend User**
 
-Suspending a user allows a moderator to give a commenter a “time-out”; during that time they won’t be allowed to post comments or react to comments. 
+Suspending a user allows a moderator to give a commenter a “time-out”; during
+that time they won’t be allowed to post comments or react to comments.
 
 **Ban User**
 
-Banning a user allows a moderator to permanently disallow a commenter to interact with their community. The commenter’s previous comments will remain on the site. This action can only be un-done manually by a moderator.
+Banning a user allows a moderator to permanently disallow a commenter to
+interact with their community. The commenters previous comments will remain on
+the site. This action can only be un-done manually by a moderator.
 
 #### Viewing a User’s Comment History
 
-In order to get an idea of what sort of a commenter someone is, moderators can click on the commenter’s username in any moderation queue and see details about their history.
+In order to get an idea of what sort of a commenter someone is, moderators can
+click on the commenters username in any moderation queue and see details about
+their history.
 
 **Username, Email and Member Since Date**
 
@@ -99,23 +118,27 @@ This shows the basic details about a commenter.
 
 **Total Comments**
 
-This shows the number of comments that a commenter has made that currently display on the site.
+This shows the number of comments that a commenter has made that currently
+display on the site.
 
 **Reject Rate**
 
-This shows the % of comments a commenter has had rejected by moderators, or automatically.
+This shows the % of comments a commenter has had rejected by moderators, or
+automatically.
 
 **Reports**
 
-This shows if a commenter is a reliable flagger, an unreliable flagger, or a neutral flagger. [Read more about reliable and unreliable flaggers here]({{ "/trust/#reliable-and-unreliable-flaggers" | relative_url }}).
+This shows if a commenter is a reliable flagger, an unreliable flagger, or a
+neutral flagger. [Read more about reliable and unreliable flaggers here]({{"/trust/#reliable-and-unreliable-flaggers" | relative_url }}).
 
 **Moderating from this View**
 
-Talk also allows you to moderate a commenter’s recent comments from this view.
+Talk also allows you to moderate a commenters recent comments from this view.
 
 #### Keyboard Shortcuts
 
-Talk also supports a number of keyboard shortcuts that moderators can leverage to moderate quickly:
+Talk also supports a number of keyboard shortcuts that moderators can leverage
+to moderate quickly:
 
 | Shortcut | Action                          |
 | -------- | ------------------------------- |
@@ -130,23 +153,36 @@ Talk also supports a number of keyboard shortcuts that moderators can leverage t
 
 ### Stories
 
-In the Stories tab moderators can view all the stories that have Talk comments embedded on them, as well as be able to Open or Close comment streams on stories.
+In the Stories tab moderators can view all the stories that have Talk comments
+embedded on them, as well as be able to Open or Close comment streams on
+stories.
 
 ### Community
 
-The Community tab houses everything having to do with your team and your commenters.
+The Community tab houses everything having to do with your team and your
+commenters.
 
 #### Moderating Usernames
 
-Any usernames that have been reported will show in the Reported Usernames sub-tab. Moderators can approve usernames if they’re suitable, or reject a username. If a username is rejected, the commenter will be notified that they need to change their username; until they do, they will be suspended from Talk. The updated username then again appears in this queue for a decision by moderators.
+Any usernames that have been reported will show in the Reported Usernames
+sub-tab. Moderators can approve usernames if they’re suitable, or reject a
+username. If a username is rejected, the commenter will be notified that they
+need to change their username; until they do, they will be suspended from Talk.
+The updated username then again appears in this queue for a decision by
+moderators.
 
 #### Managing People & Roles
 
-All your team and commenters show in the People sub-tab. From here, you can manage your team members’ roles (Admins, Moderators, Staff), as well as search for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). 
-### Configure
+All your team and commenters show in the People sub-tab. From here, you can
+manage your team members’ roles (Admins, Moderators, Staff), as well as search
+for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). ###
+Configure
 
 See [Configuring Talk]({{ "/configuring-talk/" | relative_url }}).
 
 ## Moderating via the Comment Stream
 
-Moderators can also choose to moderate comments in situ. If you are logged in as a Moderator or Admin, you will see a caret dropdown on each comment that allows you to Approve, Reject, or Feature comments, or Ban a User directly from the comment stream.
+Moderators can also choose to moderate comments in situ. If you are logged in as
+a Moderator or Admin, you will see a caret dropdown on each comment that allows
+you to Approve, Reject, or Feature comments, or Ban a User directly from the
+comment stream.
diff --git a/docs/_docs/03-06-product-guide-configuring-talk.md b/docs/_docs/03-06-product-guide-configuring-talk.md
index 3225b31bb..ba6647435 100644
--- a/docs/_docs/03-06-product-guide-configuring-talk.md
+++ b/docs/_docs/03-06-product-guide-configuring-talk.md
@@ -5,7 +5,8 @@ permalink: /configuring-talk/
 
 ## Configuring an Individual Stream
 
-There are two ways Admins can configure Talk - the first is via the Configure tab on the comment stream.
+There are two ways Admins can configure Talk - the first is via the Configure
+tab on the comment stream.
 
 ### Enable Pre-moderation
 
@@ -17,18 +18,23 @@ Allows toggling of pre-moderating comments that have links.
 
 ### Ask Readers a Question & Question Icons
 
-Admins can choose to Ask Readers a Question in order to help guide the discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/){:target="_blank"}.
+Admins can choose to Ask Readers a Question in order to help guide the
+discussion. [Read more about why this is important on our blog](https://blog.coralproject.net/the-empty-box/){:target="_blank"}.
 
-There are a selection of icons to display different messaging other than a question on a particular stream, like an announcement, or general information about the story.
+There are a selection of icons to display different messaging other than a
+question on a particular stream, like an announcement, or general information
+about the story.
 
 ### Closing a Stream
 
-Closing a stream will prevent new comments. Previous comments will remain displayed on the stream for readers to view.
+Closing a stream will prevent new comments. Previous comments will remain
+displayed on the stream for readers to view.
 
 
 ## Global Configuration
 
-Global configuration settings are available via Admin > Configure. These settings are site-wide and will affect all of your comment streams.
+Global configuration settings are available via Admin > Configure. These
+settings are site-wide and will affect all of your comment streams.
 
 ### Stream Settings
 
@@ -38,7 +44,8 @@ A maximum comment length across the site.
 
 #### Comment Stream Description
 
-Description text that will appear above every comment stream site-wide. We recommend linking to your Code of Conduct or Community Guidelines. [Read tips on how to write a Code of Conduct here](https://guides.coralproject.net/create-a-code-of-conduct/){:target="_blank"}.
+Description text that will appear above every comment stream site-wide. We
+recommend linking to your Code of Conduct or Community Guidelines. [Read tips on how to write a Code of Conduct here](https://guides.coralproject.net/create-a-code-of-conduct/){:target="_blank"}.
 
 #### Closed Stream Message
 
@@ -60,11 +67,13 @@ Require new users to verify their email address prior to commenting.
 
 #### Enable Pre-moderation
 
-Turn on pre-moderation across the site, meaning all comments will need to be moderated before they will be displayed.
+Turn on pre-moderation across the site, meaning all comments will need to be
+moderated before they will be displayed.
 
 #### Pre-moderate Comments Containing Links
 
-Turn on pre-moderation for comments with links across the site, meaning all comments with links will need to be moderated before they will be displayed.
+Turn on pre-moderation for comments with links across the site, meaning all
+comments with links will need to be moderated before they will be displayed.
 
 #### Banned Words List
 
@@ -72,12 +81,15 @@ A list of words that will trigger a comment to be automatically Rejected.
 
 #### Suspect Words List
 
-A list of words that will trigger a comment to be automatically Reported. Comments with suspect words will display until a moderator takes action on them.
+A list of words that will trigger a comment to be automatically Reported.
+Comments with suspect words will display until a moderator takes action on them.
 
 ### Technical Settings
 
 #### Permitted Domains
-A list of domains where your Talk instance is allowed to be embedded. Typical use is `localhost`, `staging.yourdomain.com`, `yourdomain.com`, etc.
+
+A list of domains where your Talk instance is allowed to be embedded. Typical
+use is `localhost`, `staging.yourdomain.com`, `yourdomain.com`, etc.
 
 #### Embed Script
 
@@ -85,4 +97,5 @@ This is the unique Talk script that is to be used to embed Talk on your website.
 
 #### Custom CSS URL
 
-The link to your custom stylesheet for Talk. This will override any default styles, so you can make Talk your own!
+The link to your custom stylesheet for Talk. This will override any default
+styles, so you can make Talk your own!
diff --git a/docs/_docs/05-01-faq.md b/docs/_docs/05-01-faq.md
index c084bc903..06d0b0669 100644
--- a/docs/_docs/05-01-faq.md
+++ b/docs/_docs/05-01-faq.md
@@ -5,7 +5,8 @@ permalink: /faq/
 
 ## How can I get help integrating Talk into my newsroom?
 
-We're here to help with newsrooms of all sizes. Email our Integration Engineer (jeff@mozillafoundation.org) to set up a meeting.
+We're here to help with newsrooms of all sizes. Email our Integration Engineer
+([jeff@mozillafoundation.org](mailto:jeff@mozillafoundation.org)) to set up a meeting.
 
 ## How do I request a feature or submit a bug?
 

From 9c38bab83bbcfaf28bec7a1c558a2c22f6234019 Mon Sep 17 00:00:00 2001
From: Facu <facu.e.sosa@gmail.com>
Date: Fri, 20 Oct 2017 17:01:52 -0300
Subject: [PATCH 024/344] notify error messages

---
 client/coral-admin/src/components/UserDetail.css | 11 ++++++-----
 client/coral-admin/src/components/UserDetail.js  | 10 ++++++++--
 client/coral-admin/src/containers/UserDetail.js  |  4 +++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 4deb35550..8b86a133c 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -131,11 +131,12 @@
   .bulkAction:last-child {
     margin-left: -10px;
   }
-  span {
-    align-self: center;
-    font-weight: 500;
-    margin-left: 15px;
-  }
+}
+
+.selectedCommentsInfo {
+  align-self: center;
+  font-weight: 500;
+  margin-left: 15px;
 }
 
 .loadMore>button {
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 2ff5efc1e..1c6362791 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -12,6 +12,7 @@ import capitalize from 'lodash/capitalize';
 import {getReliability} from 'coral-framework/utils/user';
 import ApproveButton from './ApproveButton';
 import RejectButton from './RejectButton';
+import {getErrorMessages} from 'coral-framework/utils';
 
 export default class UserDetail extends React.Component {
 
@@ -33,7 +34,8 @@ export default class UserDetail extends React.Component {
     activeTab: PropTypes.string.isRequired,
     selectedCommentIds: PropTypes.array.isRequired,
     viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired
+    loadMore: PropTypes.any.isRequired,
+    notify: PropTypes.func.isRequired
   }
 
   rejectThenReload = async (info) => {
@@ -44,6 +46,7 @@ export default class UserDetail extends React.Component {
 
       // TODO: handle error.
       console.error(err);
+      this.props.notify('error', getErrorMessages(err));
     }
   }
 
@@ -55,6 +58,7 @@ export default class UserDetail extends React.Component {
 
       // TODO: handle error.
       console.error(err);
+      this.props.notify('error', getErrorMessages(err));
     }
   }
 
@@ -66,6 +70,7 @@ export default class UserDetail extends React.Component {
 
       // TODO: handle error.
       console.error(err);
+      this.props.notify('error', getErrorMessages(err));
     }
   }
 
@@ -77,6 +82,7 @@ export default class UserDetail extends React.Component {
 
       // TODO: handle error.
       console.error(err);
+      this.props.notify('error', getErrorMessages(err));
     }
   }
 
@@ -191,7 +197,7 @@ export default class UserDetail extends React.Component {
                       onClick={this.bulkRejectThenReload}
                       minimal
                     />
-                    <span>  {selectedCommentIds.length} comments selected</span>
+                    <span className={styles.selectedCommentsInfo}>  {selectedCommentIds.length} comments selected</span>
                   </div>
                 )
             }
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 3383af1b5..47d8e1c79 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -16,6 +16,7 @@ import {
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
+import {notify} from 'coral-framework/actions/notification';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
@@ -190,7 +191,8 @@ const mapDispatchToProps = (dispatch) => ({
     toggleSelectCommentInUserDetail,
     viewUserDetail,
     hideUserDetail,
-    toggleSelectAllCommentInUserDetail
+    toggleSelectAllCommentInUserDetail,
+    notify
   }, dispatch)
 });
 

From dae8dc0509954da55898c0315bf6b73461eb9001 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 23 Oct 2017 09:51:34 -0600
Subject: [PATCH 025/344] patched config bug

---
 config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config.js b/config.js
index a67273c61..368fcf0e3 100644
--- a/config.js
+++ b/config.js
@@ -119,7 +119,7 @@ const CONFIG = {
   //------------------------------------------------------------------------------
 
   // Port to bind to.
-  PORT: process.env.TALK_PORT || process.env.PORT || process.env.NODE_ENV === 'test' ? '3001' : '3000',
+  PORT: process.env.TALK_PORT || process.env.PORT || (process.env.NODE_ENV === 'test' ? '3001' : '3000'),
 
   // The URL for this Talk Instance as viewable from the outside.
   ROOT_URL: process.env.TALK_ROOT_URL || null,

From d75ae3aca8db5f0fa5cd5387426ef56fc42ad0b7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 23 Oct 2017 18:46:41 +0200
Subject: [PATCH 026/344] Revive resend verification feature

---
 client/coral-embed-stream/src/actions/auth.js |  23 ++--
 .../coral-embed-stream/src/constants/auth.js  |   1 +
 .../coral-embed-stream/src/reducers/auth.js   |  15 ++-
 locales/en.yml                                |   2 +
 .../client/components/ResendVerification.css  |  15 +++
 .../client/components/ResendVerification.js   |  43 +++++++
 .../client/components/SignDialog.js           |  13 +-
 .../client/components/SignInContainer.js      |  20 +--
 .../client/components/SignInContent.js        | 114 ++++++++----------
 .../talk-plugin-auth/client/translations.yml  |   6 +-
 10 files changed, 150 insertions(+), 102 deletions(-)
 create mode 100644 plugins/talk-plugin-auth/client/components/ResendVerification.css
 create mode 100644 plugins/talk-plugin-auth/client/components/ResendVerification.js

diff --git a/client/coral-embed-stream/src/actions/auth.js b/client/coral-embed-stream/src/actions/auth.js
index b96d6f459..22d46a768 100644
--- a/client/coral-embed-stream/src/actions/auth.js
+++ b/client/coral-embed-stream/src/actions/auth.js
@@ -23,6 +23,10 @@ export const hideSignInDialog = () => (dispatch) => {
   dispatch({type: actions.HIDE_SIGNIN_DIALOG});
 };
 
+export const resetSignInDialog = () => (dispatch) => {
+  dispatch({type: actions.HIDE_SIGNIN_DIALOG});
+};
+
 export const focusSignInDialog = () => ({
   type: actions.FOCUS_SIGNIN_DIALOG,
 });
@@ -94,8 +98,9 @@ export const cleanState = () => ({
 
 // Sign In Actions
 
-const signInRequest = () => ({
-  type: actions.FETCH_SIGNIN_REQUEST
+const signInRequest = (email) => ({
+  type: actions.FETCH_SIGNIN_REQUEST,
+  email,
 });
 
 const signInFailure = (error) => ({
@@ -122,7 +127,7 @@ export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
 
 export const fetchSignIn = (formData) => {
   return (dispatch, _, {rest}) => {
-    dispatch(signInRequest());
+    dispatch(signInRequest(formData.email));
 
     return rest('/auth/local', {method: 'POST', body: formData})
       .then(({token}) => {
@@ -144,8 +149,7 @@ export const fetchSignIn = (formData) => {
           // invalid credentials
           dispatch(signInFailure(t('error.email_password'), error.metadata));
         } else {
-          const str = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-          dispatch(signInFailure(str));
+          dispatch(signInFailure(error));
         }
       });
   };
@@ -349,8 +353,9 @@ const verifyEmailSuccess = () => ({
   type: actions.VERIFY_EMAIL_SUCCESS
 });
 
-const verifyEmailFailure = () => ({
-  type: actions.VERIFY_EMAIL_FAILURE
+const verifyEmailFailure = (error) => ({
+  type: actions.VERIFY_EMAIL_FAILURE,
+  error,
 });
 
 export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
@@ -366,8 +371,8 @@ export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
     })
     .catch((error) => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch(verifyEmailFailure(errorMessage));
+      dispatch(verifyEmailFailure(error));
+      throw error;
     });
 };
 
diff --git a/client/coral-embed-stream/src/constants/auth.js b/client/coral-embed-stream/src/constants/auth.js
index 324f75f44..bb2ea6c15 100644
--- a/client/coral-embed-stream/src/constants/auth.js
+++ b/client/coral-embed-stream/src/constants/auth.js
@@ -53,3 +53,4 @@ export const UPDATE_USERNAME = 'UPDATE_USERNAME';
 export const SET_REQUIRE_EMAIL_VERIFICATION = 'SET_REQUIRE_EMAIL_VERIFICATION';
 export const SET_REDIRECT_URI = 'SET_REDIRECT_URI';
 
+export const RESET_SIGNIN_DIALOG = 'RESET_SIGNIN_DIALOG';
diff --git a/client/coral-embed-stream/src/reducers/auth.js b/client/coral-embed-stream/src/reducers/auth.js
index 1e18ddffa..679e8d858 100644
--- a/client/coral-embed-stream/src/reducers/auth.js
+++ b/client/coral-embed-stream/src/reducers/auth.js
@@ -10,7 +10,7 @@ const initialState = {
   showCreateUsernameDialog: false,
   checkedInitialLogin: false,
   view: 'SIGNIN',
-  error: '',
+  error: null,
   passwordRequestSuccess: null,
   passwordRequestFailure: null,
   emailVerificationFailure: false,
@@ -45,14 +45,15 @@ export default function auth (state = initialState, action) {
       showSignInDialog: true,
       signInDialogFocus: true,
     };
-  case actions.HIDE_SIGNIN_DIALOG :
+  case actions.RESET_SIGNIN_DIALOG:
+  case actions.HIDE_SIGNIN_DIALOG:
     return {
       ...state,
       isLoading: false,
       showSignInDialog: false,
       signInDialogFocus: false,
       view: 'SIGNIN',
-      error: '',
+      error: null,
       passwordRequestFailure: null,
       passwordRequestSuccess: null,
       emailVerificationFailure: false,
@@ -74,7 +75,7 @@ export default function auth (state = initialState, action) {
     return {
       ...state,
       showCreateUsernameDialog: false,
-      error: '',
+      error: null,
     };
   case actions.CREATE_USERNAME_FAILURE:
     return {
@@ -92,6 +93,7 @@ export default function auth (state = initialState, action) {
   case actions.FETCH_SIGNIN_REQUEST:
     return {
       ...state,
+      email: action.email,
       isLoading: true,
     };
   case actions.CHECK_LOGIN_FAILURE:
@@ -120,6 +122,7 @@ export default function auth (state = initialState, action) {
       isLoading: false,
       error: action.error,
       user: null,
+      view: action.error.translation_key === 'EMAIL_NOT_VERIFIED' ? 'RESEND_VERIFICATION' : state.view,
     };
   case actions.FETCH_SIGNUP_FACEBOOK_REQUEST:
     return {
@@ -175,7 +178,7 @@ export default function auth (state = initialState, action) {
   case actions.VALID_FORM:
     return {
       ...state,
-      error: '',
+      error: null,
     };
   case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
     return {
@@ -200,7 +203,7 @@ export default function auth (state = initialState, action) {
   case actions.VERIFY_EMAIL_FAILURE:
     return {
       ...state,
-      emailVerificationFailure: true,
+      emailVerificationFailure: action.error,
       emailVerificationLoading: false,
     };
   case actions.VERIFY_EMAIL_REQUEST:
diff --git a/locales/en.yml b/locales/en.yml
index 2d560fedc..76a434dfc 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -194,8 +194,10 @@ en:
     NO_SPECIAL_CHARACTERS: "Usernames can contain letters numbers and _ only"
     PASSWORD_LENGTH: "Password is too short"
     PROFANITY_ERROR: "Usernames must not contain profanity. Please contact the administrator if you believe this to be in error."
+    RATE_LIMIT_EXCEEDED: "Rate limit exceeded"
     USERNAME_IN_USE: "Username already in use"
     USERNAME_REQUIRED: "Must input a username"
+    EMAIL_NOT_VERIFIED: "E-mail address not verified"
     EDIT_WINDOW_ENDED: "You can no longer edit this comment. The time window to do so has expired."
     EDIT_USERNAME_NOT_AUTHORIZED: "You do not have permission to update your username."
     SAME_USERNAME_PROVIDED: "You must submit a different username."
diff --git a/plugins/talk-plugin-auth/client/components/ResendVerification.css b/plugins/talk-plugin-auth/client/components/ResendVerification.css
new file mode 100644
index 000000000..dc59a9ff1
--- /dev/null
+++ b/plugins/talk-plugin-auth/client/components/ResendVerification.css
@@ -0,0 +1,15 @@
+.header {
+  margin-bottom: 20px;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.notVerified {
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  border: solid 1px #dddd00;
+  background: #FFFF9C;
+  color: #777700;
+}
+
diff --git a/plugins/talk-plugin-auth/client/components/ResendVerification.js b/plugins/talk-plugin-auth/client/components/ResendVerification.js
new file mode 100644
index 000000000..b345577a9
--- /dev/null
+++ b/plugins/talk-plugin-auth/client/components/ResendVerification.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {Button, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
+import PropTypes from 'prop-types';
+import styles from './ResendVerification.css';
+import t from 'coral-framework/services/i18n';
+
+class ResendVerification extends React.Component {
+  render() {
+    const {resendVerification, error, loading, success, email} = this.props;
+    return (
+      <div className="talk-resend-verification">
+        <h1 className={styles.header}>
+          {t('sign_in.email_verify_cta')}
+        </h1>
+
+        {error &&
+          <Alert>
+            {error.translation_key ? t(`error.${error.translation_key}`) : error.toString()}
+          </Alert>}
+        <div className={styles.notVerified}>
+          {t('error.email_not_verified', email)}
+        </div>
+        <div>
+          <Button id="resendConfirmEmail" cStyle="black" onClick={resendVerification} full>
+            {t('sign_in.request_new_verify_email')}
+          </Button>
+          {loading && <Spinner />}
+          {success && <Success />}
+        </div>
+      </div>
+    );
+  }
+}
+
+ResendVerification.propTypes = {
+  resendVerification: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  loading: PropTypes.bool,
+  success: PropTypes.bool,
+  email: PropTypes.string.isRequired,
+};
+
+export default ResendVerification;
diff --git a/plugins/talk-plugin-auth/client/components/SignDialog.js b/plugins/talk-plugin-auth/client/components/SignDialog.js
index 542f53f98..652148d75 100644
--- a/plugins/talk-plugin-auth/client/components/SignDialog.js
+++ b/plugins/talk-plugin-auth/client/components/SignDialog.js
@@ -5,13 +5,22 @@ import styles from './styles.css';
 import SignInContent from './SignInContent';
 import SignUpContent from './SignUpContent';
 import ForgotContent from './ForgotContent';
+import ResendVerification from './ResendVerification';
 
-const SignDialog = ({open, view, hideSignInDialog, ...props}) => (
+const SignDialog = ({open, view, resetSignInDialog, ...props}) => (
   <Dialog className={styles.dialog} id="signInDialog" open={open}>
-    <span className={styles.close} onClick={hideSignInDialog}>×</span>
+    {view !== 'SIGNIN' && <span className={styles.close} onClick={resetSignInDialog}>×</span>}
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SignUpContent {...props} />}
     {view === 'FORGOT' && <ForgotContent {...props} />}
+    {view === 'RESEND_VERIFICATION' &&
+      <ResendVerification
+        resendVerification={props.resendVerification}
+        error={props.auth.emailVerificationFailure}
+        success={props.auth.emailVerificationSuccess}
+        loading={props.auth.emailVerificationLoading}
+        email={props.auth.email}
+      />}
   </Dialog>
 );
 
diff --git a/plugins/talk-plugin-auth/client/components/SignInContainer.js b/plugins/talk-plugin-auth/client/components/SignInContainer.js
index 011ce45f1..c22ad72c4 100644
--- a/plugins/talk-plugin-auth/client/components/SignInContainer.js
+++ b/plugins/talk-plugin-auth/client/components/SignInContainer.js
@@ -15,6 +15,7 @@ import {
   fetchSignUpFacebook,
   fetchForgotPassword,
   requestConfirmEmail,
+  resetSignInDialog,
   facebookCallback,
   invalidForm,
   validForm,
@@ -31,7 +32,6 @@ class SignInContainer extends React.Component {
         password: '',
         confirmPassword: ''
       },
-      emailToBeResent: '',
       errors: {},
       showErrors: false
     };
@@ -80,26 +80,15 @@ class SignInContainer extends React.Component {
     );
   };
 
-  handleChangeEmail = (e) => {
-    const {value} = e.target;
-    this.setState({emailToBeResent: value});
-  };
-
-  handleResendVerification = (e) => {
-    e.preventDefault();
+  resendVerification = () => {
     this.props
-      .requestConfirmEmail(
-        this.state.emailToBeResent,
-      )
+      .requestConfirmEmail(this.props.auth.email)
       .then(() => {
         setTimeout(() => {
 
           // allow success UI to be shown for a second, and then close the modal
-          this.props.hideSignInDialog();
+          this.props.resetSignInDialog();
         }, 2500);
-      })
-      .catch((err) => {
-        console.error(err);
       });
   };
 
@@ -194,6 +183,7 @@ const mapDispatchToProps = (dispatch) =>
       requestConfirmEmail,
       changeView,
       hideSignInDialog,
+      resetSignInDialog,
       invalidForm,
       validForm
     },
diff --git a/plugins/talk-plugin-auth/client/components/SignInContent.js b/plugins/talk-plugin-auth/client/components/SignInContent.js
index d1b4caec1..956176b32 100644
--- a/plugins/talk-plugin-auth/client/components/SignInContent.js
+++ b/plugins/talk-plugin-auth/client/components/SignInContent.js
@@ -1,16 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, TextField, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
+import {Button, TextField, Spinner, Alert} from 'plugin-api/beta/client/components/ui';
 import styles from './styles.css';
 import t from 'coral-framework/services/i18n';
 
 const SignInContent = ({
   handleChange,
-  handleChangeEmail,
-  emailToBeResent,
-  handleResendVerification,
-  emailVerificationLoading,
-  emailVerificationSuccess,
   formData,
   changeView,
   handleSignIn,
@@ -21,71 +16,56 @@ const SignInContent = ({
     <div className="coral-sign-in">
       <div className={`${styles.header} header`}>
         <h1>
-          {auth.emailVerificationFailure
-            ? t('sign_in.email_verify_cta')
-            : t('sign_in.sign_in_to_join')}
+          {t('sign_in.sign_in_to_join')}
         </h1>
       </div>
-      {auth.error && <Alert>{auth.error}</Alert>}
-      {auth.emailVerificationFailure
-        ? <form onSubmit={handleResendVerification}>
-          <p>{t('sign_in.request_new_verify_email')}</p>
+      {auth.error &&
+        <Alert>
+          {auth.error.translation_key ? t(`error.${auth.error.translation_key}`) : auth.error.toString()}
+        </Alert>}
+      <div>
+        <div className={`${styles.socialConnections} social-connections`}>
+          <Button cStyle="facebook" onClick={fetchSignInFacebook} full>
+            {t('sign_in.facebook_sign_in')}
+          </Button>
+        </div>
+        <div className={styles.separator}>
+          <h1>
+            {t('sign_in.or')}
+          </h1>
+        </div>
+        <form onSubmit={handleSignIn}>
           <TextField
-            id="confirm-email"
+            id="email"
             type="email"
             label={t('sign_in.email')}
-            value={emailToBeResent}
-            onChange={handleChangeEmail}
+            value={formData.email}
+            style={{fontSize: 16}}
+            onChange={handleChange}
           />
-          <Button id="resendConfirmEmail" type="submit" cStyle="black" full>
-              Send Email
-          </Button>
-          {emailVerificationLoading && <Spinner />}
-          {emailVerificationSuccess && <Success />}
+          <TextField
+            id="password"
+            type="password"
+            label={t('sign_in.password')}
+            value={formData.password}
+            style={{fontSize: 16}}
+            onChange={handleChange}
+          />
+          <div className={styles.action}>
+            {!auth.isLoading
+              ? <Button
+                id="coralLogInButton"
+                type="submit"
+                cStyle="black"
+                className={styles.signInButton}
+                full
+              >
+                {t('sign_in.sign_in')}
+              </Button>
+              : <Spinner />}
+          </div>
         </form>
-        : <div>
-          <div className={`${styles.socialConnections} social-connections`}>
-            <Button cStyle="facebook" onClick={fetchSignInFacebook} full>
-              {t('sign_in.facebook_sign_in')}
-            </Button>
-          </div>
-          <div className={styles.separator}>
-            <h1>
-              {t('sign_in.or')}
-            </h1>
-          </div>
-          <form onSubmit={handleSignIn}>
-            <TextField
-              id="email"
-              type="email"
-              label={t('sign_in.email')}
-              value={formData.email}
-              style={{fontSize: 16}}
-              onChange={handleChange}
-            />
-            <TextField
-              id="password"
-              type="password"
-              label={t('sign_in.password')}
-              value={formData.password}
-              style={{fontSize: 16}}
-              onChange={handleChange}
-            />
-            <div className={styles.action}>
-              {!auth.isLoading
-                ? <Button
-                  id="coralLogInButton"
-                  type="submit"
-                  cStyle="black"
-                  className={styles.signInButton}
-                  full
-                >
-                  {t('sign_in.sign_in')}
-                </Button>
-                : <Spinner />}
-            </div>
-          </form>
-        </div>}
+      </div>
       <div className={`${styles.footer} footer`}>
         <span>
           <a onClick={() => changeView('FORGOT')}>
@@ -111,12 +91,12 @@ SignInContent.propTypes = {
   }).isRequired,
   fetchSignInFacebook: PropTypes.func.isRequired,
   handleSignIn: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
   changeView: PropTypes.func.isRequired,
   emailVerificationLoading: PropTypes.bool.isRequired,
   emailVerificationSuccess: PropTypes.bool.isRequired,
-  handleResendVerification: PropTypes.func.isRequired,
-  handleChangeEmail: PropTypes.func.isRequired,
-  emailToBeResent: PropTypes.string.isRequired
+  resendVerification: PropTypes.func.isRequired,
+  formData: PropTypes.object,
 };
 
 export default SignInContent;
diff --git a/plugins/talk-plugin-auth/client/translations.yml b/plugins/talk-plugin-auth/client/translations.yml
index 189c3d9da..f410ec2d3 100644
--- a/plugins/talk-plugin-auth/client/translations.yml
+++ b/plugins/talk-plugin-auth/client/translations.yml
@@ -1,7 +1,7 @@
 en:
   sign_in:
     email_verify_cta: "Please verify your email address."
-    request_new_verify_email: "Request another email:"
+    request_new_verify_email: "Request another email"
     verify_email: "Thank you for creating an account! We sent an email to the address you provided to verify your account."
     verify_email2: "You must verify your account before engaging with the community."
     not_you: "Not you?"
@@ -45,7 +45,7 @@ en:
 es:
   sign_in:
     email_verify_cta: "Por favor confirme su correo."
-    request_new_verify_email: "Enviar otro correo:"
+    request_new_verify_email: "Enviar otro correo"
     verify_email: "¡Gracias por crear una cuenta! Le enviamos un correo a la direcció\
       n que dio para confirmar su cuenta."
     verify_email2: "Debe confirmarla antes de poder involucrarse en la comunidad."
@@ -92,7 +92,7 @@ es:
 fr:
   sign_in:
     email_verify_cta: "Merci de vérifier votre adresse e-mail."
-    request_new_verify_email: "Demander un nouvel envoi d'e-mail :"
+    request_new_verify_email: "Demander un nouvel envoi d'e-mail"
     verify_email: "Merci d'avoir créé un compte ! Nous avons envoyé un courrier électronique à l'adresse que vous avez fournie pour vérifier votre adresse e-mail."
     verify_email2: "Vous devez vérifier votre adresse e-mail avant de vous engager auprès de la communauté."
     not_you: "Pas vous ?"

From fac028c22b0ef945a707947e5ff28174164c3f5a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 23 Oct 2017 10:50:29 -0600
Subject: [PATCH 027/344] update to docker build process

---
 Dockerfile.onbuild                           |  8 +++++++-
 docs/_docs/01-02-installation-from-docker.md |  9 +++++++--
 docs/_docs/02-02-advanced-configuration.md   | 12 ++++++++++++
 docs/_sass/talk.scss                         |  3 ++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/Dockerfile.onbuild b/Dockerfile.onbuild
index b9cf8ce87..a4bff7095 100644
--- a/Dockerfile.onbuild
+++ b/Dockerfile.onbuild
@@ -1,5 +1,11 @@
 FROM coralproject/talk:latest
 
+# Setup the build arguments
+ONBUILD ARG TALK_THREADING_LEVEL=3
+ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all
+ONBUILD ARG TALK_DEFAULT_LANG=en
+ONBUILD ARG TALK_PLUGINS_JSON
+
 # Bundle app source
 ONBUILD COPY . /usr/src/app
 
@@ -8,4 +14,4 @@ ONBUILD COPY . /usr/src/app
 # clear out the development dependancies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
 ONBUILD RUN cli plugins reconcile && \
-            yarn build
+            yarn build
\ No newline at end of file
diff --git a/docs/_docs/01-02-installation-from-docker.md b/docs/_docs/01-02-installation-from-docker.md
index 0126c0901..fc699f127 100644
--- a/docs/_docs/01-02-installation-from-docker.md
+++ b/docs/_docs/01-02-installation-from-docker.md
@@ -95,10 +95,12 @@ FROM coralproject/talk:latest-onbuild
 And running the following to build the docker image:
 
 ```bash
-docker build -t my-awesome-talk-image .
+docker build -t my-awesome-talk-image --build-arg TALK_DEFAULT_LANG=es .
 ```
 
-Don't forget to replace `my-awesome-talk-image` with your own image name.
+Don't forget to replace `my-awesome-talk-image` with your own image name, and
+specify your build variables with the `--build-arg`. Refer to [Dockerfile.onbuild](https://github.com/coralproject/talk/blob/master/Dockerfile.onbuild){:target="_blank"} for the
+available build variables.
 {: .code-aside}
 
 This accomplishes a lot:
@@ -108,6 +110,9 @@ This accomplishes a lot:
 2. Installs any new dependencies that were required by any new plugins.
 3. Builds the new static bundles so that they are ready to serve when the image
    is running.
+4. Specifies a build time variable [TALK_DEFAULT_LANG]({{ "/advanced-configuration/#talk_default_lang" | relative_url }}){:.param}. Refer
+to [Dockerfile.onbuild](https://github.com/coralproject/talk/blob/master/Dockerfile.onbuild){:target="_blank"} for the
+available build variables.
 
 This means that you can create a repository for your organization that simply
 includes the above `Dockerfile`, a directory of `plugins`, and a `plugins.json`
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index de2ab0e68..09dccce0b 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -26,10 +26,18 @@ Configure the duration for which comment counts are cached for, parsed by
 
 ### TALK_DEFAULT_LANG
 
+This is a **Build Variable** and must be consumed during build. If using the
+[Docker-onbuild]({{ "/installation-from-docker/#onbuild" | relative_url }})
+image you can specify it with `--build-arg TALK_DEFAULT_LANG=en`.
+
 Specify the default translation language. (Default `en`)
 
 ### TALK_DEFAULT_STREAM_TAB
 
+This is a **Build Variable** and must be consumed during build. If using the
+[Docker-onbuild]({{ "/installation-from-docker/#onbuild" | relative_url }})
+image you can specify it with `--build-arg TALK_DEFAULT_STREAM_TAB=all`.
+
 Specify the default stream tab in the admin. (Default `all`)
 
 ### TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS
@@ -397,6 +405,10 @@ CDN/Storage url. (Defaults to value of
 
 ### TALK_THREADING_LEVEL
 
+This is a **Build Variable** and must be consumed during build. If using the
+[Docker-onbuild]({{ "/installation-from-docker/#onbuild" | relative_url }})
+image you can specify it with `--build-arg TALK_THREADING_LEVEL=3`.
+
 Specify the maximum depth of the comment thread. (Default `3`)
 
 **Note that a high value for `TALK_THREADING_LEVEL` will result in large
diff --git a/docs/_sass/talk.scss b/docs/_sass/talk.scss
index 85e5f1c93..28bfea81c 100644
--- a/docs/_sass/talk.scss
+++ b/docs/_sass/talk.scss
@@ -263,7 +263,8 @@ pre {
     p a:not(.plain-link) {
       @extend .coral-link;
     }
-    ul:not(.toc__menu) li a {
+    ul:not(.toc__menu) li a,
+    ol li a {
       @extend .coral-link;
     }
   }

From f004573ed2f4ffa6e83a4deb4e365e046623a8ff Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 23 Oct 2017 23:47:05 -0300
Subject: [PATCH 028/344] Replacing Pagination Component

---
 client/coral-ui/components/Pager.css    | 19 -----------
 client/coral-ui/components/Pager.js     | 43 -------------------------
 client/coral-ui/components/Paginate.css | 31 ++++++++++++++++++
 client/coral-ui/components/Paginate.js  | 34 +++++++++++++++++++
 client/coral-ui/index.js                |  2 +-
 5 files changed, 66 insertions(+), 63 deletions(-)
 delete mode 100644 client/coral-ui/components/Pager.css
 delete mode 100644 client/coral-ui/components/Pager.js
 create mode 100644 client/coral-ui/components/Paginate.css
 create mode 100644 client/coral-ui/components/Paginate.js

diff --git a/client/coral-ui/components/Pager.css b/client/coral-ui/components/Pager.css
deleted file mode 100644
index 42559d11d..000000000
--- a/client/coral-ui/components/Pager.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.pager {
-  text-align: center;
-
-  li {
-    display: inline-block;
-    margin-right: 5px;
-    color: white;
-    height: 30px;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 30px;
-    width: 30px;
-  }
-}
-
-.current {
-  background: #696969;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-}
diff --git a/client/coral-ui/components/Pager.js b/client/coral-ui/components/Pager.js
deleted file mode 100644
index 8f560593e..000000000
--- a/client/coral-ui/components/Pager.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './Pager.css';
-
-const Rows = (curr, total, onClickHandler) => Array.from(Array(total)).map((e, i) =>
-  <li className={curr === i ? styles.current : ''}
-    key={i} onClick={() => onClickHandler(i + 1)}>
-    {i + 1}
-  </li>
-);
-
-const Pager = ({totalPages, page, onNewPageHandler}) => (
-  <div className={styles.pager}>
-    <ul>
-      {
-        (totalPages > page && totalPages > 1) ?
-          <li
-            onClick={() => onNewPageHandler(page - 1)}>
-            Prev
-          </li>
-          :
-          null
-      }
-      {Rows(page, totalPages, onNewPageHandler)}
-      {
-        (page < totalPages && totalPages > 1) ?
-          <li
-            onClick={() => onNewPageHandler(page + 1)}>
-          Next
-          </li>
-          :
-          null
-      }
-    </ul>
-  </div>
-);
-
-Pager.propTypes = {
-  totalPages: PropTypes.number.isRequired,
-  page: PropTypes.number.isRequired,
-};
-
-export default Pager;
diff --git a/client/coral-ui/components/Paginate.css b/client/coral-ui/components/Paginate.css
new file mode 100644
index 000000000..dbb25b844
--- /dev/null
+++ b/client/coral-ui/components/Paginate.css
@@ -0,0 +1,31 @@
+.container {
+  text-align: center;
+}
+
+.page, .previous, .next {
+  display: inline-block;
+  margin-right: 5px;
+  height: 30px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 30px;
+  width: 30px;
+  list-style: none;
+}
+
+.pageLink, .previousLink, .nextLink {
+  color: #696969;
+  cursor: default;
+}
+
+.previousLink, .nextLink {
+  font-size: 1.8em;
+}
+
+.active {
+  background-color: #696969;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  a {
+    color: white;
+  }
+}
diff --git a/client/coral-ui/components/Paginate.js b/client/coral-ui/components/Paginate.js
new file mode 100644
index 000000000..1d7d55398
--- /dev/null
+++ b/client/coral-ui/components/Paginate.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactPaginate from 'react-paginate';
+import styles from './Paginate.css';
+import Icon from './Icon';
+
+const Paginate = ({pageCount, onPageChange}) => (
+  <ReactPaginate
+    initialPage={0}
+    pageCount={pageCount}
+    pageRangeDisplayed={5}
+    marginPagesDisplayed={2}
+    onPageChange={onPageChange}
+    breakLabel={<a href="">...</a>}
+    breakClassName={styles.break}
+    containerClassName={styles.container}
+    pageClassName={styles.page}
+    pageLinkClassName={styles.pageLink}
+    activeClassName={styles.active}
+    previousLabel={<Icon name="chevron_left"/>}
+    previousClassName={styles.previous}
+    previousLinkClassName={styles.previousLink}
+    nextLabel={<Icon name="chevron_right"/>}
+    nextClassName={styles.next}
+    nextLinkClassName={styles.nextLink}
+  />
+);
+
+Paginate.propTypes = {
+  pageCount: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+};
+
+export default Paginate;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index c688857a1..a2d8049f7 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -18,7 +18,7 @@ export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as TextField} from './components/TextField';
 export {default as Success} from './components/Success';
-export {default as Pager} from './components/Pager';
+export {default as Paginate} from './components/Paginate';
 export {default as Wizard} from './components/Wizard';
 export {default as WizardNav} from './components/WizardNav';
 export {default as SnackBar} from './components/SnackBar';

From d363c977dca91aadaeef3f769d788418f408e7c6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 23 Oct 2017 23:47:43 -0300
Subject: [PATCH 029/344] Refactor

---
 client/coral-admin/src/actions/community.js   |  20 ++--
 client/coral-admin/src/constants/community.js |   7 +-
 client/coral-admin/src/reducers/community.js  |  26 ++---
 .../routes/Community/components/Community.css |   4 +
 .../routes/Community/components/Community.js  | 101 ++++-------------
 .../src/routes/Community/components/People.js |  53 ++++-----
 .../src/routes/Community/components/Table.js  |  28 ++++-
 .../routes/Community/containers/Community.js  |  48 +--------
 .../src/routes/Community/containers/People.js | 102 ++++++++++++++++++
 .../src/routes/Community/containers/Table.js  |  43 --------
 .../src/routes/Stories/components/Stories.js  |   6 +-
 11 files changed, 202 insertions(+), 236 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Community/components/Community.css
 create mode 100644 client/coral-admin/src/routes/Community/containers/People.js
 delete mode 100644 client/coral-admin/src/routes/Community/containers/Table.js

diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index 921f0a0a2..b7102b8ff 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -1,9 +1,9 @@
 import queryString from 'query-string';
 
 import {
-  FETCH_COMMENTERS_REQUEST,
-  FETCH_COMMENTERS_SUCCESS,
-  FETCH_COMMENTERS_FAILURE,
+  FETCH_USERS_REQUEST,
+  FETCH_USERS_SUCCESS,
+  FETCH_USERS_FAILURE,
   SORT_UPDATE,
   COMMENTERS_NEW_PAGE,
   SET_ROLE,
@@ -16,13 +16,13 @@ import {
 
 import t from 'coral-framework/services/i18n';
 
-export const fetchAccounts = (query = {}) => (dispatch, _, {rest}) => {
-  dispatch(requestFetchAccounts());
+export const fetchUsers = (query = {}) => (dispatch, _, {rest}) => {
+  dispatch(requestFetchUsers());
   rest(`/users?${queryString.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
-        type: FETCH_COMMENTERS_SUCCESS,
-        accounts: result,
+        type: FETCH_USERS_SUCCESS,
+        users: result,
         page,
         count,
         limit,
@@ -32,12 +32,12 @@ export const fetchAccounts = (query = {}) => (dispatch, _, {rest}) => {
     .catch((error) => {
       console.error(error);
       const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: FETCH_COMMENTERS_FAILURE, error: errorMessage});
+      dispatch({type: FETCH_USERS_FAILURE, error: errorMessage});
     });
 };
 
-const requestFetchAccounts = () => ({
-  type: FETCH_COMMENTERS_REQUEST
+const requestFetchUsers = () => ({
+  type: FETCH_USERS_REQUEST
 });
 
 export const updateSorting = (sort) => ({
diff --git a/client/coral-admin/src/constants/community.js b/client/coral-admin/src/constants/community.js
index be11e9b0c..dc11572ed 100644
--- a/client/coral-admin/src/constants/community.js
+++ b/client/coral-admin/src/constants/community.js
@@ -1,6 +1,7 @@
-export const FETCH_COMMENTERS_REQUEST = 'FETCH_COMMENTERS_REQUEST';
-export const FETCH_COMMENTERS_SUCCESS = 'FETCH_COMMENTERS_SUCCESS';
-export const FETCH_COMMENTERS_FAILURE = 'FETCH_COMMENTERS_FAILURE';
+export const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
+export const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
+export const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';
+
 export const SORT_UPDATE = 'SORT_UPDATE';
 export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
 export const SET_ROLE = 'SET_ROLE';
diff --git a/client/coral-admin/src/reducers/community.js b/client/coral-admin/src/reducers/community.js
index 9f724c8d6..31fb6aa17 100644
--- a/client/coral-admin/src/reducers/community.js
+++ b/client/coral-admin/src/reducers/community.js
@@ -1,7 +1,7 @@
 import {
-  FETCH_COMMENTERS_REQUEST,
-  FETCH_COMMENTERS_FAILURE,
-  FETCH_COMMENTERS_SUCCESS,
+  FETCH_USERS_REQUEST,
+  FETCH_USERS_SUCCESS,
+  FETCH_USERS_FAILURE,
   SORT_UPDATE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
@@ -15,7 +15,7 @@ const initialState = {
   community: {},
   isFetchingPeople: false,
   errorPeople: '',
-  accounts: [],
+  users: [],
   fieldPeople: 'created_at',
   ascPeople: false,
   totalPagesPeople: 0,
@@ -27,19 +27,19 @@ const initialState = {
 
 export default function community (state = initialState, action) {
   switch (action.type) {
-  case FETCH_COMMENTERS_REQUEST :
+  case FETCH_USERS_REQUEST :
     return {
       ...state,
       isFetchingPeople: true,
     };
-  case FETCH_COMMENTERS_FAILURE :
+  case FETCH_USERS_FAILURE :
     return {
       ...state,
       isFetchingPeople: false,
       errorPeople: action.error,
     };
-  case FETCH_COMMENTERS_SUCCESS : {
-    const {accounts, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
+  case FETCH_USERS_SUCCESS : {
+    const {users, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
     return {
       ...state,
       isFetchingPeople: false,
@@ -49,27 +49,27 @@ export default function community (state = initialState, action) {
       limitPeople: limit,
       totalPagesPeople: totalPages,
       ...rest,
-      accounts, // Sets to normal array
+      users, // Sets to normal array
     };
   }
   case SET_ROLE : {
-    const commenters = state.accounts;
+    const commenters = state.users;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
     return {
       ...state,
-      accounts: commenters.map((id) => id),
+      users: commenters.map((id) => id),
     };
   }
   case SET_COMMENTER_STATUS: {
-    const commenters = state.accounts;
+    const commenters = state.users;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].status = action.status;
     return {
       ...state,
-      accounts: commenters.map((id) => id),
+      users: commenters.map((id) => id),
     };
 
   }
diff --git a/client/coral-admin/src/routes/Community/components/Community.css b/client/coral-admin/src/routes/Community/components/Community.css
new file mode 100644
index 000000000..8f7641418
--- /dev/null
+++ b/client/coral-admin/src/routes/Community/components/Community.css
@@ -0,0 +1,4 @@
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js
index bf300a166..1b0c6cc2a 100644
--- a/client/coral-admin/src/routes/Community/components/Community.js
+++ b/client/coral-admin/src/routes/Community/components/Community.js
@@ -1,78 +1,18 @@
 import React, {Component} from 'react';
-
-import CommunityMenu from './CommunityMenu';
-import People from './People';
-import FlaggedAccounts from '../containers/FlaggedAccounts';
-import RejectUsernameDialog from './RejectUsernameDialog';
 import PropTypes from 'prop-types';
+import styles from './Community.css';
+import People from '../containers/People';
+import CommunityMenu from './CommunityMenu';
+import RejectUsernameDialog from './RejectUsernameDialog';
+import FlaggedAccounts from '../containers/FlaggedAccounts';
 
-export default class Community extends Component {
-
-  state = {
-    searchValue: '',
-    timer: null
-  };
-
-  onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      this.search();
-    }
-  }
-
-  onSearchChange = (e) => {
-    const value = e.target.value;
-    this.setState((prevState) => {
-      prevState.searchValue = value;
-      clearTimeout(prevState.timer);
-      const fetchAccounts = this.props.fetchAccounts;
-      prevState.timer = setTimeout(() => {
-        fetchAccounts({value});
-      }, 350);
-      return prevState;
-    });
-  }
-
-  onHeaderClickHandler = (sort) => {
-    this.props.updateSorting(sort);
-    this.search();
-  }
-
-  onNewPageHandler = (page) => {
-    this.props.newPage(page);
-    this.search({page});
-  }
-
-  search(query = {}) {
-    const {community} = this.props;
-
-    this.props.fetchAccounts({
-      value: this.state.searchValue,
-      field: community.fieldPeople,
-      asc: community.ascPeople,
-      ...query
-    });
-  }
-
-  getTabContent(searchValue, props) {
-    const {community} = props;
-    const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
+class Community extends Component {
+  renderTab() {
+    const {route, community, ...props} = this.props; 
+    const activeTab = route.path === ':id' ? 'flagged' : route.path;
 
     if (activeTab === 'people') {
-      return (
-        <People
-          isFetching={community.isFetchingPeople}
-          commenters={community.accounts}
-          searchValue={searchValue}
-          onSearchChange={this.onSearchChange}
-          error={community.errorPeople}
-          totalPages={community.totalPagesPeople}
-          page={community.pagePeople}
-          onKeyDown={this.onKeyDownHandler}
-          onHeaderClickHandler={this.onHeaderClickHandler}
-          onNewPageHandler={this.onNewPageHandler}
-        />
-      );
+      return <People community={community} />;
     }
 
     return (
@@ -82,37 +22,34 @@ export default class Community extends Component {
           root={this.props.root}
         />
         <RejectUsernameDialog
-          open={community.rejectUsernameDialog}
-          handleClose={props.hideRejectUsernameDialog}
           user={community.user}
+          open={community.rejectUsernameDialog}
           rejectUsername={props.rejectUsername}
+          handleClose={props.hideRejectUsernameDialog}
         />
       </div>
     );
   }
 
   render() {
-    const {searchValue} = this.state;
-    const tab = this.getTabContent(searchValue, this.props);
     const {root: {flaggedUsernamesCount}} = this.props;
 
     return (
       <div>
         <CommunityMenu flaggedUsernamesCount={flaggedUsernamesCount} />
-        <div>{tab}</div>
+        <div className={styles.container}>
+          {this.renderTab()}
+        </div>
       </div>
     );
   }
 }
 
 Community.propTypes = {
-  community: PropTypes.object,
-  fetchAccounts: PropTypes.func,
-  hideRejectUsernameDialog: PropTypes.func,
-  updateSorting: PropTypes.func,
-  newPage: PropTypes.func,
   route: PropTypes.object,
-  rejectUsername: PropTypes.func,
+  community: PropTypes.object,
   data: PropTypes.object,
-  root: PropTypes.object
+  root: PropTypes.object,
 };
+
+export default Community;
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index b0524f273..3edf620db 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -1,33 +1,24 @@
 import React from 'react';
-
 import styles from './styles.css';
-import Table from '../containers/Table';
-import {Pager, Icon} from 'coral-ui';
+import Table from './Table';
+import {Paginate, Icon} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
+
 import PropTypes from 'prop-types';
 
-const tableHeaders = [
-  {
-    title: t('community.username_and_email'),
-    field: 'username'
-  },
-  {
-    title: t('community.account_creation_date'),
-    field: 'created_at'
-  },
-  {
-    title: t('community.status'),
-    field: 'status'
-  },
-  {
-    title: t('community.newsroom_role'),
-    field: 'role'
-  }
-];
+const People = (props) => {
+  const {
+    users = [],
+    searchValue,
+    onSearchChange,
+    onHeaderClickHandler,
+    onNewPageHandler,
+    totalPages,
+  } = props;
+
+  const hasResults = !!users.length;
 
-const People = ({commenters, searchValue, onSearchChange, ...props}) => {
-  const hasResults = !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
@@ -47,16 +38,15 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
         {
           hasResults
             ? <Table
-              headers={tableHeaders}
-              commenters={commenters}
-              onHeaderClickHandler={props.onHeaderClickHandler}
+              users={users}
+              onHeaderClickHandler={onHeaderClickHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
-        <Pager
-          totalPages={props.totalPages}
-          page={props.page}
-          onNewPageHandler={props.onNewPageHandler}
+
+        <Paginate
+          pageCount={totalPages}
+          onPageChange={onNewPageHandler}
         />
       </div>
     </div>
@@ -64,7 +54,8 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
 };
 
 People.propTypes = {
-  commenters: PropTypes.array,
+  onHeaderClickHandler: PropTypes.func,
+  users: PropTypes.array,
   searchValue: PropTypes.string,
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 28b20b82f..9071e0575 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -5,7 +5,26 @@ import PropTypes from 'prop-types';
 import {Dropdown, Option} from 'coral-ui';
 import cn from 'classnames';
 
-const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
+const headers = [
+  {
+    title: t('community.username_and_email'),
+    field: 'username'
+  },
+  {
+    title: t('community.account_creation_date'),
+    field: 'created_at'
+  },
+  {
+    title: t('community.status'),
+    field: 'status'
+  },
+  {
+    title: t('community.newsroom_role'),
+    field: 'role'
+  }
+];
+
+const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +40,7 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
       </tr>
     </thead>
     <tbody>
-      {commenters.map((row, i)=> (
+      {users.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
             <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
@@ -57,9 +76,8 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
 );
 
 Table.propTypes = {
-  headers: PropTypes.array,
-  commenters: PropTypes.array,
-  onHeaderClickHandler: PropTypes.func,
+  users: PropTypes.array,
+  onHeaderClickHandler: PropTypes.func.isRequired,
   onRoleChange: PropTypes.func,
   onCommenterStatusChange: PropTypes.func,
   viewUserDetail: PropTypes.func,
diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js
index 6e20a3167..4cf9eeb8a 100644
--- a/client/coral-admin/src/routes/Community/containers/Community.js
+++ b/client/coral-admin/src/routes/Community/containers/Community.js
@@ -1,65 +1,21 @@
-import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import PropTypes from 'prop-types';
 import {compose, gql} from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import {getDefinitionName} from 'coral-framework/utils';
 import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
-
-import {
-  fetchAccounts,
-  updateSorting,
-  newPage,
-  hideRejectUsernameDialog
-} from '../../../actions/community';
-
+import {hideRejectUsernameDialog} from '../../../actions/community';
 import Community from '../components/Community';
 
-class CommunityContainer extends Component {
-
-  componentWillMount() {
-    this.props.fetchAccounts({});
-  }
-
-  render() {
-    return <Community
-      fetchAccounts={this.props.fetchAccounts}
-      community={this.props.community}
-      hideRejectUsernameDialog={this.props.hideRejectUsernameDialog}
-      updateSorting={this.props.updateSorting}
-      newPage={this.props.newPage}
-      route={this.props.route}
-      rejectUsername={this.props.rejectUsername}
-      data={this.props.data}
-      root={this.props.root}
-    />;
-  }
-}
 const mapStateToProps = (state) => ({
   community: state.community,
 });
 
-CommunityContainer.propTypes = {
-  community: PropTypes.object,
-  fetchAccounts: PropTypes.func,
-  hideRejectUsernameDialog: PropTypes.func,
-  updateSorting: PropTypes.func,
-  newPage: PropTypes.func,
-  route: PropTypes.object,
-  rejectUsername: PropTypes.func,
-  data: PropTypes.object,
-  root: PropTypes.object
-};
-
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    fetchAccounts,
     hideRejectUsernameDialog,
-    updateSorting,
-    newPage,
   }, dispatch);
 
 const withData = withQuery(gql`
@@ -89,4 +45,4 @@ export default compose(
   withSetUserStatus,
   withRejectUsername,
   withData
-)(CommunityContainer);
+)(Community);
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
new file mode 100644
index 000000000..fb383917f
--- /dev/null
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import People from '../components/People';
+import PropTypes from 'prop-types';
+
+import {viewUserDetail} from '../../../actions/userDetail';
+
+import {
+  fetchUsers,
+  updateSorting,
+  newPage,
+  hideRejectUsernameDialog,
+  setCommenterStatus,
+  setRole,
+} from '../../../actions/community';
+
+class PeopleContainer extends React.Component {
+  state = {
+    searchValue: '',
+    timer: null
+  };
+
+  componentWillMount() {
+    this.props.fetchUsers();
+  }
+
+  onKeyDownHandler = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.search();
+    }
+  }
+
+  onSearchChange = (e) => {
+    const value = e.target.value;
+
+    this.setState((prevState) => {
+      prevState.searchValue = value;
+      clearTimeout(prevState.timer);
+      const fetchAccounts = this.props.fetchUsers;
+      prevState.timer = setTimeout(() => {
+        fetchAccounts({value});
+      }, 350);
+      return prevState;
+    });
+  }
+
+  onHeaderClickHandler = (sort) => {
+    this.props.updateSorting(sort);
+    this.search();
+  }
+
+  onNewPageHandler = ({selected}) => {
+    const page = selected + 1;
+    this.props.newPage(page);
+    this.search({page});
+  }
+
+  search(query = {}) {
+    const {community} = this.props;
+
+    this.props.fetchUsers({
+      value: this.state.searchValue,
+      field: community.fieldPeople,
+      asc: community.ascPeople,
+      ...query
+    });
+  }
+  render() {
+    return <People 
+      users={this.props.community.users}
+      searchValue={this.state.searchValue}
+      onSearchChange={this.onSearchChange}
+      onHeaderClickHandler={this.onHeaderClickHandler}
+      onNewPageHandler={this.onNewPageHandler}
+      totalPages={this.props.community.totalPagesPeople}
+    />;
+  }
+}
+
+PeopleContainer.propTypes = {
+  newPage: PropTypes.func,
+  fetchUsers: PropTypes.func,
+  updateSorting: PropTypes.func,
+  setRole: PropTypes.func,
+  setCommenterStatus: PropTypes.func,
+  community: PropTypes.object,
+};
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    newPage,
+    fetchUsers,
+    updateSorting,
+    hideRejectUsernameDialog,
+    setCommenterStatus,
+    setRole,
+    viewUserDetail,
+  }, dispatch);
+
+export default connect(null, mapDispatchToProps)(PeopleContainer);
diff --git a/client/coral-admin/src/routes/Community/containers/Table.js b/client/coral-admin/src/routes/Community/containers/Table.js
deleted file mode 100644
index 086a56638..000000000
--- a/client/coral-admin/src/routes/Community/containers/Table.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {setRole, setCommenterStatus} from '../../../actions/community';
-import Table from '../components/Table';
-import {viewUserDetail} from '../../../actions/userDetail';
-import PropTypes from 'prop-types';
-
-class TableContainer extends Component {
-
-  constructor (props) {
-    super(props);
-  }
-
-  render () {
-    return <Table
-      {...this.props}
-      onRoleChange={this.props.setRole}
-      onCommenterStatusChange={this.props.setCommenterStatus}
-      commenters={this.props.commenters}
-    />;
-  }
-}
-
-TableContainer.propTypes = {
-  setRole: PropTypes.func,
-  setCommenterStatus: PropTypes.func,
-  commenters: PropTypes.array,
-};
-
-const mapStateToProps = (state) => ({
-  commenters: state.community.accounts,
-});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    setCommenterStatus,
-    setRole,
-    viewUserDetail,
-  }, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(TableContainer);
-
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 746c733d7..57caa2744 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Link} from 'react-router';
 import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
-import {Dropdown, Option, Pager, Icon} from 'coral-ui';
+import {Dropdown, Option, Paginate, Icon} from 'coral-ui';
 import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
 import t from 'coral-framework/services/i18n';
 import styles from './Stories.css';
@@ -139,10 +139,10 @@ class Stories extends Component {
                   {t('streams.status')}
                 </TableHeader>
               </DataTable>
-              <Pager
+              {/* <Paginate
                 totalPages={Math.ceil((assets.count || 0) / limit)}
                 page={this.state.page}
-                onNewPageHandler={this.onPageClick} />
+                onNewPageHandler={this.onPageClick} /> */}
             </div>
             : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
         }

From 9f4a91365511141b2b39411e74999dcae108ce0b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 00:03:35 -0300
Subject: [PATCH 030/344] Passing props

---
 .../src/routes/Community/components/Community.js       |  2 ++
 .../src/routes/Community/components/People.js          |  6 ++++++
 .../src/routes/Community/components/Table.js           | 10 +++++-----
 .../src/routes/Community/containers/People.js          |  6 ++++--
 package.json                                           |  1 +
 routes/api/users/index.js                              |  2 +-
 script                                                 |  0
 script.sh                                              |  4 ++++
 8 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 script
 create mode 100755 script.sh

diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js
index 1b0c6cc2a..bd41fbbea 100644
--- a/client/coral-admin/src/routes/Community/components/Community.js
+++ b/client/coral-admin/src/routes/Community/components/Community.js
@@ -48,6 +48,8 @@ class Community extends Component {
 Community.propTypes = {
   route: PropTypes.object,
   community: PropTypes.object,
+  rejectUsername: PropTypes.func.isRequired,
+  hideRejectUsernameDialog: PropTypes.func.isRequired,
   data: PropTypes.object,
   root: PropTypes.object,
 };
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 3edf620db..2be222c05 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -15,6 +15,8 @@ const People = (props) => {
     onHeaderClickHandler,
     onNewPageHandler,
     totalPages,
+    setRole,
+    setCommenterStatus,
   } = props;
 
   const hasResults = !!users.length;
@@ -39,6 +41,8 @@ const People = (props) => {
           hasResults
             ? <Table
               users={users}
+              setRole={setRole}
+              setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
@@ -60,6 +64,8 @@ People.propTypes = {
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
   onNewPageHandler: PropTypes.func,
+  setCommenterStatus: PropTypes.func.isRequired,
+  setRole: PropTypes.func.isRequired,
 };
 
 export default People;
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 9071e0575..28a3e4c42 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -24,7 +24,7 @@ const headers = [
   }
 ];
 
-const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
+const Table = ({users, onHeaderClickHandler, setRole, setCommenterStatus, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -53,7 +53,7 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
             <Dropdown 
               value={row.status}
               placeholder={t('community.status')}
-              onChange={(status) => onCommenterStatusChange(row.id, status)}>     
+              onChange={(status) => setCommenterStatus(row.id, status)}>     
               <Option value={'ACTIVE'} label={t('community.active')} />
               <Option value={'BANNED'} label={t('community.banned')} />
             </Dropdown>       
@@ -62,7 +62,7 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
             <Dropdown
               value={row.roles[0] || ''}
               placeholder={t('community.role')}
-              onChange={(role) => onRoleChange(row.id, role)}>
+              onChange={(role) => setRole(row.id, role)}>
               <Option value={''} label={t('community.none')} />
               <Option value={'STAFF'} label={t('community.staff')} />
               <Option value={'MODERATOR'} label={t('community.moderator')} />
@@ -78,8 +78,8 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
 Table.propTypes = {
   users: PropTypes.array,
   onHeaderClickHandler: PropTypes.func.isRequired,
-  onRoleChange: PropTypes.func,
-  onCommenterStatusChange: PropTypes.func,
+  setRole: PropTypes.func.isRequired,
+  setCommenterStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func,
 };
 
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index fb383917f..c45361c9f 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -75,6 +75,8 @@ class PeopleContainer extends React.Component {
       onHeaderClickHandler={this.onHeaderClickHandler}
       onNewPageHandler={this.onNewPageHandler}
       totalPages={this.props.community.totalPagesPeople}
+      setCommenterStatus={this.props.setCommenterStatus}
+      setRole={this.props.setRole}
     />;
   }
 }
@@ -83,8 +85,8 @@ PeopleContainer.propTypes = {
   newPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
-  setRole: PropTypes.func,
-  setCommenterStatus: PropTypes.func,
+  setRole: PropTypes.func.isRequired,
+  setCommenterStatus: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
 
diff --git a/package.json b/package.json
index e406dcff8..85b6a2b05 100644
--- a/package.json
+++ b/package.json
@@ -160,6 +160,7 @@
     "react-input-autosize": "^1.1.4",
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
+    "react-paginate": "^5.0.0",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 189d0ea3e..00b776e5b 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -16,7 +16,7 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
     field = 'created_at',
     page = 1,
     asc = 'false',
-    limit = 50 // Total Per Page
+    limit = 20 // Total Per Page
   } = req.query;
 
   try {
diff --git a/script b/script
new file mode 100644
index 000000000..e69de29bb
diff --git a/script.sh b/script.sh
new file mode 100755
index 000000000..156d7fb27
--- /dev/null
+++ b/script.sh
@@ -0,0 +1,4 @@
+for i in {1..100}
+do
+  ./bin/cli -c .env users create --email "user-x${i}@coralproject.net" --password "mysecretpassword" --name "userxxx${i}" -f
+done

From abff1c763a8c549b613ac0024e399e13e74f4071 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 00:12:18 -0300
Subject: [PATCH 031/344] More styling

---
 .../src/routes/Community/components/People.js    |  5 ++++-
 .../src/routes/Community/components/Table.css    | 16 ++++++++++------
 .../src/routes/Community/components/Table.js     |  8 ++++----
 .../src/routes/Community/containers/People.js    |  2 ++
 client/coral-ui/components/Paginate.css          |  2 +-
 client/coral-ui/components/Paginate.js           |  1 -
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 2be222c05..0878873ac 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -17,6 +17,7 @@ const People = (props) => {
     totalPages,
     setRole,
     setCommenterStatus,
+    viewUserDetail,
   } = props;
 
   const hasResults = !!users.length;
@@ -42,12 +43,13 @@ const People = (props) => {
             ? <Table
               users={users}
               setRole={setRole}
+              viewUserDetail={viewUserDetail}
               setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
-
+        
         <Paginate
           pageCount={totalPages}
           onPageChange={onNewPageHandler}
@@ -66,6 +68,7 @@ People.propTypes = {
   onNewPageHandler: PropTypes.func,
   setCommenterStatus: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
 };
 
 export default People;
diff --git a/client/coral-admin/src/routes/Community/components/Table.css b/client/coral-admin/src/routes/Community/components/Table.css
index 65eda5b4c..4071d9aa9 100644
--- a/client/coral-admin/src/routes/Community/components/Table.css
+++ b/client/coral-admin/src/routes/Community/components/Table.css
@@ -2,14 +2,18 @@
   width: 100%;
   border-left: none;
   border-right: none;
+}
 
-  th {
-    font-size: 1.1em;
-  }
+th.header {
+  font-size: 1.1em;
+}
 
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
+th.header:hover {
+  cursor: pointer;
+}
+
+th.header:nth-child(2), th.header:nth-child(3) {
+  width: 100px;
 }
 
 .button {
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 28a3e4c42..33cbb87e8 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '../components/Table.css';
+import styles from './Table.css';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {Dropdown, Option} from 'coral-ui';
@@ -24,14 +24,14 @@ const headers = [
   }
 ];
 
-const Table = ({users, onHeaderClickHandler, setRole, setCommenterStatus, viewUserDetail}) => (
+const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
         {headers.map((header, i) =>(
           <th
             key={i}
-            className="mdl-data-table__cell--non-numeric"
+            className={cn('mdl-data-table__cell--non-numeric', styles.header)}
             scope="col"
             onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
@@ -80,7 +80,7 @@ Table.propTypes = {
   onHeaderClickHandler: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func,
+  viewUserDetail: PropTypes.func.isRequired,
 };
 
 export default Table;
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index c45361c9f..5cd6f6e9c 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -77,6 +77,7 @@ class PeopleContainer extends React.Component {
       totalPages={this.props.community.totalPagesPeople}
       setCommenterStatus={this.props.setCommenterStatus}
       setRole={this.props.setRole}
+      viewUserDetail={this.props.viewUserDetail}
     />;
   }
 }
@@ -87,6 +88,7 @@ PeopleContainer.propTypes = {
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
 
diff --git a/client/coral-ui/components/Paginate.css b/client/coral-ui/components/Paginate.css
index dbb25b844..86b7c91c5 100644
--- a/client/coral-ui/components/Paginate.css
+++ b/client/coral-ui/components/Paginate.css
@@ -2,7 +2,7 @@
   text-align: center;
 }
 
-.page, .previous, .next {
+.page, .previous, .next, .break {
   display: inline-block;
   margin-right: 5px;
   height: 30px;
diff --git a/client/coral-ui/components/Paginate.js b/client/coral-ui/components/Paginate.js
index 1d7d55398..3a404db69 100644
--- a/client/coral-ui/components/Paginate.js
+++ b/client/coral-ui/components/Paginate.js
@@ -11,7 +11,6 @@ const Paginate = ({pageCount, onPageChange}) => (
     pageRangeDisplayed={5}
     marginPagesDisplayed={2}
     onPageChange={onPageChange}
-    breakLabel={<a href="">...</a>}
     breakClassName={styles.break}
     containerClassName={styles.container}
     pageClassName={styles.page}

From 0b973f24ff456d98ddaa1289716f019ed703e171 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 00:14:47 -0300
Subject: [PATCH 032/344] Replacing paginate from Stories

---
 .../coral-admin/src/routes/Stories/components/Stories.js   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 57caa2744..966e8a9c3 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -139,10 +139,9 @@ class Stories extends Component {
                   {t('streams.status')}
                 </TableHeader>
               </DataTable>
-              {/* <Paginate
-                totalPages={Math.ceil((assets.count || 0) / limit)}
-                page={this.state.page}
-                onNewPageHandler={this.onPageClick} /> */}
+              <Paginate
+                pageCount={Math.ceil((assets.count || 0) / limit)}
+                onPageChange={this.onPageClick} />
             </div>
             : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
         }

From 34334b81521bd6686d8134e5c5e222f305581303 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 00:18:03 -0300
Subject: [PATCH 033/344] Pagination only shows when there are results to show

---
 .../src/routes/Community/components/People.js |   9 +-
 .../src/routes/Community/components/Table.js  | 106 ++++++++++--------
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 0878873ac..9626dd53f 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.css';
 import Table from './Table';
-import {Paginate, Icon} from 'coral-ui';
+import {Icon} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
 
@@ -46,14 +46,11 @@ const People = (props) => {
               viewUserDetail={viewUserDetail}
               setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
+              pageCount={totalPages}
+              onPageChange={onNewPageHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
-        
-        <Paginate
-          pageCount={totalPages}
-          onPageChange={onNewPageHandler}
-        />
       </div>
     </div>
   );
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 33cbb87e8..8d650f165 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Table.css';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
-import {Dropdown, Option} from 'coral-ui';
+import {Paginate, Dropdown, Option} from 'coral-ui';
 import cn from 'classnames';
 
 const headers = [
@@ -24,55 +24,61 @@ const headers = [
   }
 ];
 
-const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail}) => (
-  <table className={`mdl-data-table ${styles.dataTable}`}>
-    <thead>
-      <tr>
-        {headers.map((header, i) =>(
-          <th
-            key={i}
-            className={cn('mdl-data-table__cell--non-numeric', styles.header)}
-            scope="col"
-            onClick={() => onHeaderClickHandler({field: header.field})}>
-            {header.title}
-          </th>
-        ))}
-      </tr>
-    </thead>
-    <tbody>
-      {users.map((row, i)=> (
-        <tr key={i}>
-          <td className="mdl-data-table__cell--non-numeric">
-            <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
-            <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
-          </td>
-          <td className="mdl-data-table__cell--non-numeric">
-            {row.created_at}
-          </td>
-          <td className="mdl-data-table__cell--non-numeric">
-            <Dropdown 
-              value={row.status}
-              placeholder={t('community.status')}
-              onChange={(status) => setCommenterStatus(row.id, status)}>     
-              <Option value={'ACTIVE'} label={t('community.active')} />
-              <Option value={'BANNED'} label={t('community.banned')} />
-            </Dropdown>       
-          </td>
-          <td className="mdl-data-table__cell--non-numeric">
-            <Dropdown
-              value={row.roles[0] || ''}
-              placeholder={t('community.role')}
-              onChange={(role) => setRole(row.id, role)}>
-              <Option value={''} label={t('community.none')} />
-              <Option value={'STAFF'} label={t('community.staff')} />
-              <Option value={'MODERATOR'} label={t('community.moderator')} />
-              <Option value={'ADMIN'} label={t('community.admin')} />
-            </Dropdown>
-          </td>
+const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, onPageChange}) => (
+  <div>
+    <table className={`mdl-data-table ${styles.dataTable}`}>
+      <thead>
+        <tr>
+          {headers.map((header, i) =>(
+            <th
+              key={i}
+              className={cn('mdl-data-table__cell--non-numeric', styles.header)}
+              scope="col"
+              onClick={() => onHeaderClickHandler({field: header.field})}>
+              {header.title}
+            </th>
+          ))}
         </tr>
-      ))}
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        {users.map((row, i)=> (
+          <tr key={i}>
+            <td className="mdl-data-table__cell--non-numeric">
+              <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
+              <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
+            </td>
+            <td className="mdl-data-table__cell--non-numeric">
+              {row.created_at}
+            </td>
+            <td className="mdl-data-table__cell--non-numeric">
+              <Dropdown 
+                value={row.status}
+                placeholder={t('community.status')}
+                onChange={(status) => setCommenterStatus(row.id, status)}>     
+                <Option value={'ACTIVE'} label={t('community.active')} />
+                <Option value={'BANNED'} label={t('community.banned')} />
+              </Dropdown>       
+            </td>
+            <td className="mdl-data-table__cell--non-numeric">
+              <Dropdown
+                value={row.roles[0] || ''}
+                placeholder={t('community.role')}
+                onChange={(role) => setRole(row.id, role)}>
+                <Option value={''} label={t('community.none')} />
+                <Option value={'STAFF'} label={t('community.staff')} />
+                <Option value={'MODERATOR'} label={t('community.moderator')} />
+                <Option value={'ADMIN'} label={t('community.admin')} />
+              </Dropdown>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+    <Paginate
+      pageCount={pageCount}
+      onPageChange={onPageChange}
+    />
+  </div>
 );
 
 Table.propTypes = {
@@ -81,6 +87,8 @@ Table.propTypes = {
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
 };
 
 export default Table;

From 38abf63cc9d9ee9bb7228c58595a1ae689c1c988 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 00:21:26 -0300
Subject: [PATCH 034/344] removing unused files

---
 script    | 0
 script.sh | 4 ----
 2 files changed, 4 deletions(-)
 delete mode 100644 script
 delete mode 100755 script.sh

diff --git a/script b/script
deleted file mode 100644
index e69de29bb..000000000
diff --git a/script.sh b/script.sh
deleted file mode 100755
index 156d7fb27..000000000
--- a/script.sh
+++ /dev/null
@@ -1,4 +0,0 @@
-for i in {1..100}
-do
-  ./bin/cli -c .env users create --email "user-x${i}@coralproject.net" --password "mysecretpassword" --name "userxxx${i}" -f
-done

From b189c9d2b0f8011faeff5746371e467b56449b60 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 24 Oct 2017 12:08:46 +0200
Subject: [PATCH 035/344] Add cursor pointer and increase clickable area

---
 client/coral-ui/components/Paginate.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/coral-ui/components/Paginate.css b/client/coral-ui/components/Paginate.css
index 86b7c91c5..813786d66 100644
--- a/client/coral-ui/components/Paginate.css
+++ b/client/coral-ui/components/Paginate.css
@@ -4,18 +4,20 @@
 
 .page, .previous, .next, .break {
   display: inline-block;
+  list-style: none;
   margin-right: 5px;
+}
+
+.pageLink, .previousLink, .nextLink {
+  display: inline-block;
+  color: #696969;
+  cursor: pointer;
   height: 30px;
   text-align: center;
   vertical-align: middle;
   line-height: 30px;
   width: 30px;
-  list-style: none;
-}
-
-.pageLink, .previousLink, .nextLink {
-  color: #696969;
-  cursor: default;
+  user-select: none;
 }
 
 .previousLink, .nextLink {

From 46359b4a1b6d49fe19e85a98784510f0f949d4de Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 24 Oct 2017 14:49:32 +0200
Subject: [PATCH 036/344] Show errors

---
 client/coral-admin/src/components/UserDetail.js |  4 ----
 client/coral-admin/src/containers/UserDetail.js | 14 ++++----------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 1c6362791..140774eae 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -44,7 +44,6 @@ export default class UserDetail extends React.Component {
       this.props.data.refetch();
     } catch (err) {
 
-      // TODO: handle error.
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
@@ -56,7 +55,6 @@ export default class UserDetail extends React.Component {
       this.props.data.refetch();
     } catch (err) {
 
-      // TODO: handle error.
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
@@ -68,7 +66,6 @@ export default class UserDetail extends React.Component {
       this.props.data.refetch();
     } catch (err) {
 
-      // TODO: handle error.
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
@@ -80,7 +77,6 @@ export default class UserDetail extends React.Component {
       this.props.data.refetch();
     } catch (err) {
 
-      // TODO: handle error.
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 47d8e1c79..97021ec75 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -43,22 +43,16 @@ class UserDetailContainer extends React.Component {
       return this.props.setCommentStatus({commentId, status});
     });
 
-    try {
-      await Promise.all(changes);
-      this.props.clearUserDetailSelections(); // un-select everything
-    } catch (err) {
-
-      // TODO: handle error.
-      console.error(err);
-    }
+    await Promise.all(changes);
+    this.props.clearUserDetailSelections(); // un-select everything
   }
 
   bulkReject = () => {
-    this.bulkSetCommentStatus('REJECTED');
+    return this.bulkSetCommentStatus('REJECTED');
   }
 
   bulkAccept = () => {
-    this.bulkSetCommentStatus('ACCEPTED');
+    return this.bulkSetCommentStatus('ACCEPTED');
   }
 
   acceptComment = ({commentId}) => {

From 24ec898a15496d501111b5345e716e16c785461f Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 24 Oct 2017 14:14:26 +0100
Subject: [PATCH 037/344] Fix formatting

---
 docs/_docs/03-02-product-guide-commenter-features.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_docs/03-02-product-guide-commenter-features.md b/docs/_docs/03-02-product-guide-commenter-features.md
index b46c5f054..7f56880db 100644
--- a/docs/_docs/03-02-product-guide-commenter-features.md
+++ b/docs/_docs/03-02-product-guide-commenter-features.md
@@ -7,9 +7,9 @@ permalink: /commenter-features/
 
 There are 2 ways that newsrooms can support signup/login functionality with Talk:
 
-*Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
+* Use Talk’s auth plugin out of the box (supports account registration with username and password, as well as features like forgot password)
 
-*Create their own auth plugin to integrate with your own auth systems
+* Create their own auth plugin to integrate with your own auth systems
 
 We also provide a Facebook auth plugin that supports logging in with Facebook (you must provide your own Facebook App ID and Secret, which you can read more about here: [https://developers.facebook.com](https://developers.facebook.com){:target="_blank"})
 

From b7b9da9509e290694bf2d9e689cb9bdc28022767 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 24 Oct 2017 15:16:45 +0200
Subject: [PATCH 038/344] Change fetchPolicy

---
 client/coral-admin/src/containers/UserDetail.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 97021ec75..3a458ff83 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -165,7 +165,8 @@ export const withUserDetailQuery = withQuery(gql`
 `, {
   options: ({userId, statuses}) => {
     return {
-      variables: {author_id: userId, statuses}
+      variables: {author_id: userId, statuses},
+      fetchPolicy: 'network-only',
     };
   },
   skip: (ownProps) => !ownProps.userId,

From fed6654f5208bcc62a6bcb32bc8d35238d67f4d9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 10:45:25 -0300
Subject: [PATCH 039/344] Support pagination for search

---
 routes/api/users/index.js | 18 ++++++++++++------
 services/users.js         |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 00b776e5b..0cf1c997b 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -9,8 +9,8 @@ const {
   ROOT_URL
 } = require('../../../config');
 
-// get a list of users.
 router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
+
   const {
     value = '',
     field = 'created_at',
@@ -21,13 +21,20 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
 
   try {
 
+    const queryOpts = {
+      sort: {[field]: (asc === 'true') ? 1 : -1},
+      skip: (page - 1) * limit,
+      limit
+    };
+
     let [result, count] = await Promise.all([
       UsersService
         .search(value)
-        .sort({[field]: (asc === 'true') ? 1 : -1})
-        .skip((page - 1) * limit)
-        .limit(limit),
-      UsersService.count()
+        .sort(queryOpts.sort)
+        .skip(queryOpts.skip)
+        .limit(queryOpts.limit)
+        .lean(),
+      UsersService.search(value).count()
     ]);
 
     res.json({
@@ -41,7 +48,6 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
   } catch (e) {
     next(e);
   }
-
 });
 
 router.post('/:user_id/role', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
diff --git a/services/users.js b/services/users.js
index 7968f7e83..4d974f4a4 100644
--- a/services/users.js
+++ b/services/users.js
@@ -668,8 +668,8 @@ module.exports = class UsersService {
    * Returns a count of the current users.
    * @return {Promise}
    */
-  static count() {
-    return UserModel.count();
+  static count(query = {}) {
+    return UserModel.count(query);
   }
 
   /**

From 55b2208a498235c45e7dcdbe48545ce77535c064 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 11:29:17 -0300
Subject: [PATCH 040/344] Pagination and refactor for Stories

---
 client/coral-admin/src/actions/assets.js      | 13 ++--
 client/coral-admin/src/reducers/assets.js     |  2 +
 .../src/routes/Stories/components/Stories.js  | 72 +++++++++++++------
 .../src/routes/Stories/containers/Stories.js  | 16 +----
 routes/api/assets/index.js                    | 30 +++++---
 routes/api/users/index.js                     |  4 +-
 6 files changed, 86 insertions(+), 51 deletions(-)

diff --git a/client/coral-admin/src/actions/assets.js b/client/coral-admin/src/actions/assets.js
index 1ce6ad6ac..d7c6d9448 100644
--- a/client/coral-admin/src/actions/assets.js
+++ b/client/coral-admin/src/actions/assets.js
@@ -1,3 +1,5 @@
+import queryString from 'query-string';
+
 import {
   FETCH_ASSETS_REQUEST,
   FETCH_ASSETS_SUCCESS,
@@ -16,13 +18,16 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch, _, {rest}) => {
+export const fetchAssets = (query = {}) => (dispatch, _, {rest}) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
-  return rest(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
-    .then(({result, count}) =>
+  return rest(`/assets?${queryString.stringify(query)}`)
+    .then(({result, page, count, limit, totalPages}) =>
       dispatch({type: FETCH_ASSETS_SUCCESS,
         assets: result,
-        count
+        page,
+        count,
+        limit,
+        totalPages,
       }))
     .catch((error) => {
       console.error(error);
diff --git a/client/coral-admin/src/reducers/assets.js b/client/coral-admin/src/reducers/assets.js
index bb8751973..b4ea8d21f 100644
--- a/client/coral-admin/src/reducers/assets.js
+++ b/client/coral-admin/src/reducers/assets.js
@@ -16,6 +16,8 @@ export default function assets (state = initialState, action) {
     }, {});
 
     return update(state, {
+      totalPages: {$set: action.totalPages},
+      page: {$set: action.page},
       byId: {$set: assets},
       count: {$set: action.count},
       ids: {$set: Object.keys(assets)},
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 966e8a9c3..c37a7f8f6 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -8,38 +8,54 @@ import t from 'coral-framework/services/i18n';
 import styles from './Stories.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
-const limit = 25;
-
 class Stories extends Component {
 
   state = {
-    search: '',
+    searchValue: '',
     sort: 'desc',
     filter: 'all',
     statusMenus: {},
     timer: null,
-    page: 0
   }
 
   componentDidMount () {
-    this.props.fetchAssets(0, limit, '', this.state.sortBy);
+    const {sort} = this.state;
+
+    this.props.fetchAssets({
+      sort,
+    });
   }
 
   onSettingChange = (setting) => (e) => {
-    let options = this.state;
-    this.setState({[setting]: e.target.value});
-    options[setting] = e.target.value;
-    this.props.fetchAssets(0, limit, options.search, options.sort, options.filter);
+    const {searchValue, sort, filter} = this.state;
+    
+    this.setState({
+      [setting]: e.target.value
+    });
+
+    this.props.fetchAssets({
+      value: searchValue,
+      sort,
+      filter,
+    });
   }
 
   onSearchChange = (e) => {
-    const search = e.target.value;
+    const {fetchAssets} = this.props;
+    const {value} = e.target;
+    const {sort, filter, limit} = this.state;
+
     this.setState((prevState) => {
-      prevState.search = search;
+      prevState.searchValue = value;
       clearTimeout(prevState.timer);
-      const fetchAssets = this.props.fetchAssets;
+
       prevState.timer = setTimeout(() => {
-        fetchAssets(0, limit, search, this.state.sort, this.state.filter);
+        fetchAssets({
+          value,
+          sort,
+          filter,
+          limit,
+        });
       }, 350);
       return prevState;
     });
@@ -51,10 +67,17 @@ class Stories extends Component {
   }
 
   onStatusChange = async (closeStream, id) => {
+    const {fetchAssets, updateAssetState} = this.props;
+    const {searchValue, sort, filter, limit} = this.state;
+
     try {
-      this.props.updateAssetState(id, closeStream ? Date.now() : null);
-      const {search, sort, filter, page} = this.state;
-      this.props.fetchAssets(page, limit, search, sort, filter);
+      updateAssetState(id, closeStream ? Date.now() : null);
+      fetchAssets({
+        value: searchValue,
+        sort,
+        filter,
+        limit,
+      });
     } catch(err) {
       console.error(err);
     }
@@ -74,10 +97,17 @@ class Stories extends Component {
     );
   }
 
-  onPageClick = (page) => {
-    this.setState({page});
-    const {search, sort, filter} = this.state;
-    this.props.fetchAssets((page - 1) * limit, limit, search, sort, filter);
+  onPageClick = ({selected}) => {
+    const page = selected + 1;
+    const {searchValue, sort, filter, limit} = this.state;
+
+    this.props.fetchAssets({
+      page,
+      value: searchValue,
+      sort,
+      filter,
+      limit,
+    });
   }
 
   render () {
@@ -140,7 +170,7 @@ class Stories extends Component {
                 </TableHeader>
               </DataTable>
               <Paginate
-                pageCount={Math.ceil((assets.count || 0) / limit)}
+                pageCount={assets.totalPages}
                 onPageChange={this.onPageClick} />
             </div>
             : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index f645f310c..b940e46e6 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -1,19 +1,9 @@
-import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
 import {fetchAssets, updateAssetState} from 'coral-admin/src/actions/assets';
 import Stories from '../components/Stories';
 
-class StoriesContainer extends Component {
-  render () {
-    return <Stories {...this.props} />;
-  }
-}
-
-const mapStateToProps = (state) => ({
-  assets: state.assets
-});
+const mapStateToProps = ({assets}) => ({assets});
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
@@ -21,7 +11,5 @@ const mapDispatchToProps = (dispatch) =>
     updateAssetState,
   }, dispatch);
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(StoriesContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(Stories);
 
diff --git a/routes/api/assets/index.js b/routes/api/assets/index.js
index 1b2b0c7a9..4007517de 100644
--- a/routes/api/assets/index.js
+++ b/routes/api/assets/index.js
@@ -37,34 +37,44 @@ const FilterOpenAssets = (query, filter) => {
 router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
 
   const {
-    limit = 20,
-    skip = 0,
-    sort = 'asc',
+    value = '',
     field = 'created_at',
+    page = 1, 
+    asc = 'false',
     filter = 'all',
-    search = ''
+    limit = 20,
   } = req.query;
 
   try {
 
+    const queryOpts = {
+      sort: {[field]: (asc === 'true') ? 1 : -1},
+      skip: (page - 1) * limit,
+      limit
+    };
+
     // Find all the assets.
     let [result, count] = await Promise.all([
 
       // Find the actuall assets.
-      FilterOpenAssets(AssetsService.search({value: search}), filter)
-        .sort({[field]: (sort === 'asc') ? 1 : -1})
-        .skip(parseInt(skip))
-        .limit(parseInt(limit)),
+      FilterOpenAssets(AssetsService.search({value}), filter)
+        .sort(queryOpts.sort)
+        .skip(parseInt(queryOpts.skip))
+        .limit(parseInt(queryOpts.limit))
+        .lean(),
 
       // Get the count of actual assets.
-      FilterOpenAssets(AssetsService.search({value: search}), filter)
+      FilterOpenAssets(AssetsService.search({value}), filter)
         .count()
     ]);
 
     // Send back the asset data.
     res.json({
       result,
-      count
+      limit: Number(limit),
+      count,
+      page: Number(page),
+      totalPages: Math.ceil(count / (limit === 0 ? 1 : limit))
     });
   } catch (e) {
     return next(e);
diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 0cf1c997b..98cdcdead 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -31,8 +31,8 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
       UsersService
         .search(value)
         .sort(queryOpts.sort)
-        .skip(queryOpts.skip)
-        .limit(queryOpts.limit)
+        .skip(parseInt(queryOpts.skip))
+        .limit(parseInt(queryOpts.limit))
         .lean(),
       UsersService.search(value).count()
     ]);

From 3777b4b1ce5581ac97b68d77314569f885778a68 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 11:35:27 -0300
Subject: [PATCH 041/344] Filter Streams fully working

---
 .../src/routes/Stories/components/Stories.js         | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index c37a7f8f6..ed4a7a595 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -27,16 +27,14 @@ class Stories extends Component {
   }
 
   onSettingChange = (setting) => (e) => {
-    const {searchValue, sort, filter} = this.state;
-    
-    this.setState({
-      [setting]: e.target.value
-    });
+    const {searchValue} = this.state;
+    const criteria = {[setting]: e.target.value};
+
+    this.setState(criteria);
 
     this.props.fetchAssets({
       value: searchValue,
-      sort,
-      filter,
+      ...criteria,
     });
   }
 

From 61108337ccfd4ca9113b7592920976f49bf943d1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 11:42:21 -0300
Subject: [PATCH 042/344] Even tinier

---
 .../src/routes/Stories/components/Stories.js  | 47 +++++++------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index ed4a7a595..bd0dd9f86 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -19,11 +19,7 @@ class Stories extends Component {
   }
 
   componentDidMount () {
-    const {sort} = this.state;
-
-    this.props.fetchAssets({
-      sort,
-    });
+    this.fetchAssets();
   }
 
   onSettingChange = (setting) => (e) => {
@@ -39,21 +35,14 @@ class Stories extends Component {
   }
 
   onSearchChange = (e) => {
-    const {fetchAssets} = this.props;
     const {value} = e.target;
-    const {sort, filter, limit} = this.state;
 
     this.setState((prevState) => {
       prevState.searchValue = value;
       clearTimeout(prevState.timer);
 
       prevState.timer = setTimeout(() => {
-        fetchAssets({
-          value,
-          sort,
-          filter,
-          limit,
-        });
+        this.fetchAssets();
       }, 350);
       return prevState;
     });
@@ -64,18 +53,24 @@ class Stories extends Component {
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
   }
 
-  onStatusChange = async (closeStream, id) => {
-    const {fetchAssets, updateAssetState} = this.props;
+  fetchAssets = (query) => {
     const {searchValue, sort, filter, limit} = this.state;
 
+    this.props.fetchAssets({
+      value: searchValue,
+      sort,
+      filter,
+      limit,
+      ...query
+    });
+  };
+
+  onStatusChange = async (closeStream, id) => {
+    const {updateAssetState} = this.props;
+
     try {
       updateAssetState(id, closeStream ? Date.now() : null);
-      fetchAssets({
-        value: searchValue,
-        sort,
-        filter,
-        limit,
-      });
+      this.fetchAssets();
     } catch(err) {
       console.error(err);
     }
@@ -97,15 +92,7 @@ class Stories extends Component {
 
   onPageClick = ({selected}) => {
     const page = selected + 1;
-    const {searchValue, sort, filter, limit} = this.state;
-
-    this.props.fetchAssets({
-      page,
-      value: searchValue,
-      sort,
-      filter,
-      limit,
-    });
+    this.props.fetchAssets({page});
   }
 
   render () {

From f3bf9d28a7dbe4ab285d8664d6da59adb05968ae Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 11:47:18 -0300
Subject: [PATCH 043/344] Search Value

---
 client/coral-admin/src/routes/Stories/components/Stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index bd0dd9f86..84eaf9fbb 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -96,7 +96,7 @@ class Stories extends Component {
   }
 
   render () {
-    const {search, sort, filter} = this.state;
+    const {searchValue, sort, filter} = this.state;
     const {assets} = this.props;
 
     const assetsIds = sortBy(assets.ids.map((id) => assets.byId[id]), 'publication_date');
@@ -112,7 +112,7 @@ class Stories extends Component {
             <Icon name='search' className={styles.searchIcon}/>
             <input
               type='text'
-              value={search}
+              value={searchValue}
               className={styles.searchBoxInput}
               onChange={this.onSearchChange}
               placeholder={t('streams.search')}/>

From ca1ce9ba763a56adc4e564f852c806aeae30bac4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 24 Oct 2017 17:23:10 +0200
Subject: [PATCH 044/344] Dont cache auth

---
 routes/api/auth/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/routes/api/auth/index.js b/routes/api/auth/index.js
index 791573898..1af57fb54 100644
--- a/routes/api/auth/index.js
+++ b/routes/api/auth/index.js
@@ -12,6 +12,10 @@ router.get('/', (req, res, next) => {
     return;
   }
 
+  res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
+  res.header('Expires', '-1');
+  res.header('Pragma', 'no-cache');
+
   // Send back the user object.
   res.json({user: req.user});
 });

From a0929fd773e9deeb501b7b32468507e81dd56e18 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 12:30:07 -0300
Subject: [PATCH 045/344] Updated tests

---
 test/server/routes/api/assets/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/server/routes/api/assets/index.js b/test/server/routes/api/assets/index.js
index a07b154d4..0dacccbad 100644
--- a/test/server/routes/api/assets/index.js
+++ b/test/server/routes/api/assets/index.js
@@ -56,7 +56,7 @@ describe('/api/v1/assets', () => {
     it('should return assets that we search for', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
         const res = await chai.request(app)
-          .get('/api/v1/assets?search=term2')
+          .get('/api/v1/assets?value=term2')
           .set(passport.inject({roles: [role]}));
 
         const body = res.body;
@@ -78,7 +78,7 @@ describe('/api/v1/assets', () => {
     it('should not return assets that we do not search for', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
         const res = await chai.request(app)
-          .get('/api/v1/assets?search=term3')
+          .get('/api/v1/assets?value=term3')
           .set(passport.inject({roles: [role]}));
         const body = res.body;
 

From be994d033b0f99406c9cc3c52752b5f6750abd2f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 12:58:15 -0300
Subject: [PATCH 046/344] Adding classes

---
 client/coral-admin/src/components/ui/Header.js      | 13 +++++++------
 .../src/routes/Community/components/Community.js    |  2 +-
 .../src/routes/Stories/components/Stories.js        |  3 ++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 62f6a7fd1..c5af63786 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
@@ -24,7 +25,7 @@ const CoralHeader = ({
               <Navigation className={styles.nav}>
                 <IndexLink
                   id='dashboardNav'
-                  className={styles.navLink}
+                  className={cn('talk-admin-nav-dashboard', styles.navLink)}
                   to="/admin/dashboard"
                   activeClassName={styles.active}>
                   {t('configure.dashboard')}
@@ -33,7 +34,7 @@ const CoralHeader = ({
                   can(auth.user, 'MODERATE_COMMENTS') && (
                     <Link
                       id='moderateNav'
-                      className={styles.navLink}
+                      className={cn('talk-admin-nav-moderate', styles.navLink)}
                       to="/admin/moderate"
                       activeClassName={styles.active}>
                       {t('configure.moderate')}
@@ -42,8 +43,8 @@ const CoralHeader = ({
                   )
                 }
                 <Link
-                  id='streamsNav'
-                  className={styles.navLink}
+                  id='storiesNav'
+                  className={cn('talk-admin-nav-stories', styles.navLink)}
                   to="/admin/stories"
                   activeClassName={styles.active}>
                   {t('configure.stories')}
@@ -51,7 +52,7 @@ const CoralHeader = ({
 
                 <Link
                   id='communityNav'
-                  className={styles.navLink}
+                  className={cn('talk-admin-nav-community', styles.navLink)}
                   to="/admin/community"
                   activeClassName={styles.active}>
                   {t('configure.community')}
@@ -62,7 +63,7 @@ const CoralHeader = ({
                   can(auth.user, 'UPDATE_CONFIG') && (
                     <Link
                       id='configureNav'
-                      className={styles.navLink}
+                      className={cn('talk-admin-nav-configure', styles.navLink)}
                       to="/admin/configure"
                       activeClassName={styles.active}>
                       {t('configure.configure')}
diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js
index bd41fbbea..3b60b357a 100644
--- a/client/coral-admin/src/routes/Community/components/Community.js
+++ b/client/coral-admin/src/routes/Community/components/Community.js
@@ -35,7 +35,7 @@ class Community extends Component {
     const {root: {flaggedUsernamesCount}} = this.props;
 
     return (
-      <div>
+      <div className="talk-admin-community">
         <CommunityMenu flaggedUsernamesCount={flaggedUsernamesCount} />
         <div className={styles.container}>
           {this.renderTab()}
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 84eaf9fbb..73f5c60dc 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import cn from 'classnames';
 import {Link} from 'react-router';
 import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
@@ -106,7 +107,7 @@ class Stories extends Component {
     }
 
     return (
-      <div className={styles.container}>
+      <div className={cn('talk-admin-stories', styles.container)}>
         <div className={styles.leftColumn}>
           <div className={styles.searchBox}>
             <Icon name='search' className={styles.searchIcon}/>

From 7ef9e2783b71fef6d76421c08a31bde0b5f4e9c1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 12:58:27 -0300
Subject: [PATCH 047/344] Initial e2e

---
 test/e2e/page_objects/admin.js |  5 +++++
 test/e2e/specs/02_admin.js     | 26 +++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index c4fcb83c1..ffdcf8a29 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -14,5 +14,10 @@ module.exports = {
     'emailInput': '.talk-admin-login-sign-in #email',
     'passwordInput': '.talk-admin-login-sign-in #password',
     'signInButton': '.talk-admin-login-sign-in-button',
+    'storiesNav': '.talk-admin-nav-stories',
+    'storiesSection': '.talk-admin-stories',
+    'communityNav': '.talk-admin-nav-community',
+    'communitySection': '.talk-admin-community',
+    'moderationContainer': '.talk-admin-moderation-container'
   }
 };
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 236a1c6ca..463249eeb 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,6 +1,10 @@
 module.exports = {
   '@tags': ['admin', 'login'],
+  beforeEach: (client) => {
 
+    // Testing Desktop
+    client.resizeWindow(1280, 800);
+  },
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -12,8 +16,28 @@ module.exports = {
       .setValue('@emailInput', admin.email)
       .setValue('@passwordInput', admin.password)
       .waitForElementVisible('@signInButton')
-      .click('@signInButton');
+      .click('@signInButton')
+      .waitForElementVisible('@moderationContainer');
+  },
 
+  'Admin goes to Stories': (client) => {
+    const adminPage = client.page.admin();
+
+    adminPage
+      .navigate()
+      .waitForElementVisible('@storiesNav')
+      .click('@storiesNav')
+      .waitForElementVisible('@storiesSection');
+  },
+
+  'Admin goes to Community': (client) => {
+    const adminPage = client.page.admin();
+
+    adminPage
+      .navigate()
+      .waitForElementVisible('@communityNav')
+      .click('@communityNav')
+      .waitForElementVisible('@communitySection');      
   },
   after: (client) => {
     client.end();

From dd7ca9fd0c06cb4d695a136a980bf5f8a28499e0 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 23 Oct 2017 11:24:02 -0600
Subject: [PATCH 048/344] added docs

---
 services/limit.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/services/limit.js b/services/limit.js
index 7acc78f0c..9d1101643 100644
--- a/services/limit.js
+++ b/services/limit.js
@@ -3,6 +3,9 @@ const errors = require('../errors');
 const {createClientFactory} = require('./redis');
 const client = createClientFactory();
 
+/**
+ * Limit is designed to support rate limiting a resource.
+ */
 class Limit {
   constructor(prefix, max, duration) {
     this.ttl = ms(duration) / 1000;
@@ -10,16 +13,37 @@ class Limit {
     this.max = max;
   }
 
+  /**
+   * key will compose the redis key used to store the rate limit information.
+   *
+   * @param {String} value the string to use that is being limited
+   * @returns {String} the redis key to set
+   */
   key(value) {
     return `limit[${this.prefix}][${value}]`;
   }
 
+  /**
+   * get will fetch the current number of attempts within the given window
+   * duration.
+   *
+   * @param {String} value the value to limit with
+   * @returns {Integer} the number of tries within the current window
+   */
   async get(value) {
     const key = this.key(value);
 
     return client().get(key);
   }
 
+  /**
+   * test will increment the number of tries, reset the window length and
+   * will throw an error if the number of tries exceed the maximum for the
+   * window duration.
+   *
+   * @param {String} value the value to limit with
+   * @returns {Promise} resolves to the number of tries, or throws an error
+   */
   async test(value) {
     const key = this.key(value);
 

From 812483931d3d1b4eec55b68e64f3f41cbb6b46c1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 24 Oct 2017 13:13:44 -0300
Subject: [PATCH 049/344] ref

---
 .../src/routes/Community/containers/People.js | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index 5cd6f6e9c..561e0fcfb 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -21,14 +21,25 @@ class PeopleContainer extends React.Component {
     timer: null
   };
 
+  fetchUsers = (query = {}) => {
+    const {community} = this.props;
+    
+    this.props.fetchUsers({
+      value: this.state.searchValue,
+      field: community.fieldPeople,
+      asc: community.ascPeople,
+      ...query
+    });
+  }
+
   componentWillMount() {
-    this.props.fetchUsers();
+    this.fetchUsers();
   }
 
   onKeyDownHandler = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
-      this.search();
+      this.fetchUsers();
     }
   }
 
@@ -38,9 +49,9 @@ class PeopleContainer extends React.Component {
     this.setState((prevState) => {
       prevState.searchValue = value;
       clearTimeout(prevState.timer);
-      const fetchAccounts = this.props.fetchUsers;
+
       prevState.timer = setTimeout(() => {
-        fetchAccounts({value});
+        this.fetchUsers({value});
       }, 350);
       return prevState;
     });
@@ -48,25 +59,15 @@ class PeopleContainer extends React.Component {
 
   onHeaderClickHandler = (sort) => {
     this.props.updateSorting(sort);
-    this.search();
+    this.fetchUsers();
   }
 
   onNewPageHandler = ({selected}) => {
     const page = selected + 1;
     this.props.newPage(page);
-    this.search({page});
+    this.fetchUsers({page});
   }
 
-  search(query = {}) {
-    const {community} = this.props;
-
-    this.props.fetchUsers({
-      value: this.state.searchValue,
-      field: community.fieldPeople,
-      asc: community.ascPeople,
-      ...query
-    });
-  }
   render() {
     return <People 
       users={this.props.community.users}

From 934b630ce26efc2fb028c926ca2beb330e65ad57 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 24 Oct 2017 18:47:55 +0200
Subject: [PATCH 050/344] Simplified Spinner for IE and Edge for Spinner (using
 css hacks)

---
 client/coral-ui/components/Spinner.css | 65 +++++++++-----------------
 1 file changed, 23 insertions(+), 42 deletions(-)

diff --git a/client/coral-ui/components/Spinner.css b/client/coral-ui/components/Spinner.css
index 00b7f93a5..da09758f1 100644
--- a/client/coral-ui/components/Spinner.css
+++ b/client/coral-ui/components/Spinner.css
@@ -4,49 +4,28 @@
 }
 
 .spinner {
-    -webkit-animation: rotator 1.4s linear infinite;
     animation: rotator 1.4s linear infinite;
 }
 
-@-webkit-keyframes rotator {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(270deg);
-        transform: rotate(270deg);
-    }
-}
-
 @keyframes rotator {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
-        -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
     }
 }
+
+
+
 .path {
+    stroke: #f67150;
     stroke-dasharray: 187;
     stroke-dashoffset: 0;
-    -webkit-transform-origin: center;
     transform-origin: center;
-    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
     animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
 }
 
-@-webkit-keyframes colors {
-    0% {
-        stroke: #f67150;
-    }
-    100% {
-        stroke: #f6a47e;
-    }
-}
-
 @keyframes colors {
     0% {
         stroke: #f67150;
@@ -55,33 +34,35 @@
         stroke: #f6a47e;
     }
 }
-@-webkit-keyframes dash {
-    0% {
-        stroke-dashoffset: 187;
-    }
-    50% {
-        stroke-dashoffset: 46.75;
-        -webkit-transform: rotate(135deg);
-        transform: rotate(135deg);
-    }
-    100% {
-        stroke-dashoffset: 187;
-        -webkit-transform: rotate(450deg);
-        transform: rotate(450deg);
-    }
-}
+
 @keyframes dash {
     0% {
         stroke-dashoffset: 187;
     }
     50% {
         stroke-dashoffset: 46.75;
-        -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
     }
     100% {
         stroke-dashoffset: 187;
-        -webkit-transform: rotate(450deg);
         transform: rotate(450deg);
     }
 }
+
+@keyframes fullRotator {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Hack for IE and Edge as they don't support css animations on SVG elements. */
+_:-ms-lang(x), .path {
+  stroke-dasharray: 160;
+}
+
+_:-ms-lang(x), .spinner {
+  animation: fullRotator 1.4s linear infinite;
+}

From 1dec169520b642b986be753d69453d6da26005ed Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 24 Oct 2017 11:03:15 -0600
Subject: [PATCH 051/344] added port parsing for smtp

---
 config.js          | 2 +-
 services/mailer.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/config.js b/config.js
index 368fcf0e3..4601683c1 100644
--- a/config.js
+++ b/config.js
@@ -163,7 +163,7 @@ const CONFIG = {
   SMTP_FROM_ADDRESS: process.env.TALK_SMTP_FROM_ADDRESS,
   SMTP_HOST: process.env.TALK_SMTP_HOST,
   SMTP_PASSWORD: process.env.TALK_SMTP_PASSWORD,
-  SMTP_PORT: process.env.TALK_SMTP_PORT,
+  SMTP_PORT: process.env.TALK_SMTP_PORT ? parseInt(process.env.TALK_SMTP_PORT) : undefined,
   SMTP_USERNAME: process.env.TALK_SMTP_USERNAME,
 
   //------------------------------------------------------------------------------
diff --git a/services/mailer.js b/services/mailer.js
index 8d650726d..f04a6dc92 100644
--- a/services/mailer.js
+++ b/services/mailer.js
@@ -64,7 +64,11 @@ const options = {
 };
 
 if (SMTP_PORT) {
-  options.port = SMTP_PORT;
+  try {
+    options.port = parseInt(SMTP_PORT);
+  } catch (e) {
+    throw new Error('TALK_SMTP_PORT is not an integer');
+  }
 } else {
   options.port = 25;
 }

From 27eb159a75dc85807c464cd28d51a61f4cf329de Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 13:04:41 +0200
Subject: [PATCH 052/344] Add special popup handling for ie 11

---
 client/coral-framework/components/Popup.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/coral-framework/components/Popup.js b/client/coral-framework/components/Popup.js
index 33041442f..41a37237a 100644
--- a/client/coral-framework/components/Popup.js
+++ b/client/coral-framework/components/Popup.js
@@ -22,6 +22,9 @@ export default class Popup extends Component {
     );
 
     this.setCallbacks();
+
+    // For some reasons IE needs a timeout before setting the callbacks...
+    setTimeout(() => this.setCallbacks(), 1000);
   }
 
   setCallbacks() {

From 16bf8871614574e5c747982a415f75b3f1d854ff Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 13:06:00 +0200
Subject: [PATCH 053/344] Add ie to ci testing

---
 scripts/e2e-ci.sh | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 1e4f45691..f1376abcb 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -21,9 +21,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
   # Test using browserstack.
   browserstack chrome
   browserstack firefox
-
-  # temporarily turn off ci, please fix https://www.pivotaltracker.com/story/show/152144406.
-  # browserstack ie
+  browserstack ie
 
   # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
   # browserstack safari

From 823bf18335af4463dd7ac5ab22f65aa94888bca6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 14:19:13 +0200
Subject: [PATCH 054/344] Add edge to ci

---
 scripts/e2e-ci.sh | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index f1376abcb..e0e94b4bf 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -22,13 +22,11 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
   browserstack chrome
   browserstack firefox
   browserstack ie
+  browserstack edge
 
   # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
   # browserstack safari
 
-  # Edge 14 & 15 randomly fails when switching from the login popup back to the main window.
-  # browserstack edge
-
   exit $exitCode
 else
   # When browserstack is not available test locally using chrome headless.

From 833922f0aaf15bbe4779da46c6884e6a4212e5d4 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 25 Oct 2017 09:35:08 -0300
Subject: [PATCH 055/344] Missing reference to the dropdownContainer class

---
 .../src/routes/Moderation/components/ViewOptions.css        | 2 +-
 .../src/routes/Moderation/components/ViewOptions.js         | 1 +
 client/coral-ui/components/Dropdown.js                      | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
index e5dfc8c01..3e5aae32d 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
@@ -53,7 +53,7 @@
   list-style: none;
 }
 
-.dropdow {
+.dropdownContainer {
   position: relative;
   margin-top: 5px;
 
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
index c46b7f869..a65af66a6 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
@@ -23,6 +23,7 @@ class ViewOptions extends React.Component {
             <li className={styles.viewOptionsItem}>
               Sort Comments
               <Dropdown
+                containerClassName={styles.dropdownContainer}
                 toggleClassName={styles.dropdownToggle}
                 toggleOpenClassName={styles.dropdownToggleOpen}
                 placeholder={t('modqueue.sort')}
diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index 97467b49b..2cad6e990 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/client/coral-ui/components/Dropdown.js
@@ -128,10 +128,10 @@ class Dropdown extends React.Component {
   }
 
   render() {
-    const {className, toggleClassName, toggleOpenClassName} = this.props;
+    const {containerClassName, toggleClassName, toggleOpenClassName} = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={cn(styles.dropdown, className)}>
+        <div className={cn(styles.dropdown, containerClassName)}>
           <div
             className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
             onClick={this.handleClick}
@@ -170,7 +170,7 @@ class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
-  className: PropTypes.string,
+  containerClassName: PropTypes.string,
   toggleClassName: PropTypes.string,
   toggleOpenClassName: PropTypes.string,
   placeholder: PropTypes.string,

From 3ff47dc610f984d2fd89022ae8c494ba547258d1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 16:47:51 +0200
Subject: [PATCH 056/344] Fix ci

---
 nightwatch-browserstack.conf.js |   2 +-
 nightwatch.conf.js              |   2 +-
 yarn.lock                       | 212 +++++++-------------------------
 3 files changed, 46 insertions(+), 170 deletions(-)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 604691c81..9e8e334c5 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -31,7 +31,7 @@ const nightwatch_config = {
     chrome: {
       desiredCapabilities: {
         browser: 'chrome',
-        browser_version: '60',
+        browser_version: '62',
       },
     },
     firefox: {
diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index fddbce229..f843b881a 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -43,7 +43,7 @@ module.exports = {
     'chrome-headless': {
       desiredCapabilities: {
         chromeOptions : {
-          args: ['--headless', '--disable-gpu'],
+          args: ['--headless', '--disable-gpu', 'window-size=1280,800'],
         },
       },
     },
diff --git a/yarn.lock b/yarn.lock
index dc23d05f8..6ea60fc82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -72,11 +72,7 @@ abab@^1.0.0, abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-
-abbrev@1.0.x:
+abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
@@ -403,18 +399,12 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@2.4.1:
+async@2.4.1, async@^2.1.2, async@^2.1.4:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2, async@^2.1.4:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
-  dependencies:
-    lodash "^4.14.0"
-
 async@~0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
@@ -1933,14 +1923,10 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-cookiejar@2.0.x:
+cookiejar@2.0.x, cookiejar@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.0.6.tgz#0abf356ad00d1c5a219d88d44518046dd026acfe"
 
-cookiejar@^2.0.6:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.1.tgz#41ad57b1b555951ec171412a81942b1e8200d34a"
-
 copy-webpack-plugin@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.1.1.tgz#53ae69e04955ebfa9fda411f54cbb968531d71fd"
@@ -2375,14 +2361,10 @@ diff@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
 
-diff@3.2.0:
+diff@3.2.0, diff@^3.1.0, diff@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
 
-diff@^3.1.0, diff@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
-
 diffie-hellman@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -2425,40 +2407,27 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@1, domelementtype@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-
-domelementtype@~1.1.1:
+domelementtype@1, domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
 
-domhandler@2.3:
+domelementtype@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domhandler@2.3, domhandler@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
   dependencies:
     domelementtype "1"
 
-domhandler@^2.3.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
-  dependencies:
-    domelementtype "1"
-
-domutils@1.5, domutils@1.5.1:
+domutils@1.5, domutils@1.5.1, domutils@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^1.5.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 dont-sniff-mimetype@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dont-sniff-mimetype/-/dont-sniff-mimetype-1.0.0.tgz#5932890dc9f4e2f19e5eb02a20026e5e5efc8f58"
@@ -2890,7 +2859,7 @@ exports-loader@^0.6.4:
     loader-utils "^1.0.2"
     source-map "0.5.x"
 
-express@4.16.0:
+express@4.16.0, express@^4.12.2:
   version "4.16.0"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.0.tgz#b519638e4eb58e7178c81b498ef22f798cb2e255"
   dependencies:
@@ -2925,41 +2894,6 @@ express@4.16.0:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-express@^4.12.2:
-  version "4.16.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
-  dependencies:
-    accepts "~1.3.4"
-    array-flatten "1.1.1"
-    body-parser "1.18.2"
-    content-disposition "0.5.2"
-    content-type "~1.0.4"
-    cookie "0.3.1"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.1"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "1.1.0"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.2"
-    qs "6.5.1"
-    range-parser "~1.2.0"
-    safe-buffer "5.1.1"
-    send "0.16.1"
-    serve-static "1.13.1"
-    setprototypeof "1.1.0"
-    statuses "~1.3.1"
-    type-is "~1.6.15"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
 extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
@@ -3008,7 +2942,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -4047,7 +3981,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -4185,7 +4119,7 @@ ip@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.0.1.tgz#c7e356cdea225ae71b36d70f2e71a92ba4e42590"
 
-ip@^1.1.2, ip@^1.1.4:
+ip@^1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
@@ -5515,9 +5449,9 @@ lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
 
-lru-cache@^2.5.0:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
+lru-cache@^2.5.0, lru-cache@~2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
 
 lru-cache@^4.0.1:
   version "4.1.1"
@@ -5526,10 +5460,6 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-cache@~2.6.5:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
-
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -5707,7 +5637,7 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -5715,10 +5645,6 @@ minimist@^1.1.1, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -7115,7 +7041,7 @@ promised-io@*:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/promised-io/-/promised-io-0.3.5.tgz#4ad217bb3658bcaae9946b17a8668ecd851e1356"
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -7387,6 +7313,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-create-fragment@^15.0.0:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.0"
+
 react-apollo@^1.4.12:
   version "1.4.16"
   resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-1.4.16.tgz#62a623458b67a174ff8ef25f64e7b42531518e19"
@@ -7435,6 +7369,14 @@ react-mdl@^1.7.1, react-mdl@^1.7.2:
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
+react-paginate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-5.0.0.tgz#b5c12191ea81adc6d4d1b339b805e81841eaa8ea"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+    react-addons-create-fragment "^15.0.0"
+
 react-recaptcha@^2.2.6:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7"
@@ -7466,20 +7408,13 @@ react-tagsinput@^3.17.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
 
-react-test-renderer@15.5:
+react-test-renderer@15.5, react-test-renderer@^15.5.0:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc"
   dependencies:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
-react-test-renderer@^15.5.0:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.2.tgz#d0333434fc2c438092696ca770da5ed48037efa8"
-  dependencies:
-    fbjs "^0.8.9"
-    object-assign "^4.1.0"
-
 react-test-renderer@^16.0.0-0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
@@ -7550,7 +7485,7 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-readable-stream@1.1:
+readable-stream@1.1, readable-stream@1.1.x:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
   dependencies:
@@ -7559,28 +7494,7 @@ readable-stream@1.1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@1.1.x:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
-    util-deprecate "~1.0.1"
-
-readable-stream@2.2.7:
+readable-stream@2, readable-stream@2.2.7, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.7.tgz#07057acbe2467b22042d36f98c5ad507054e95b1"
   dependencies:
@@ -7991,11 +7905,11 @@ rx@^2.4.3:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.5.3.tgz#21adc7d80f02002af50dae97fd9dbf248755f566"
 
-safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-samsam@1.1.2:
+samsam@1.1.2, samsam@~1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
 
@@ -8003,10 +7917,6 @@ samsam@1.x, samsam@^1.1.3:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
 
-samsam@~1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.3.tgz#9f5087419b4d091f232571e7fa52e90b0f552621"
-
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -8097,24 +8007,6 @@ send@0.16.0:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
-send@0.16.1:
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.1"
-    destroy "~1.0.4"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.3.1"
-
 serve-static@1.13.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.0.tgz#810c91db800e94ba287eae6b4e06caab9fdc16f1"
@@ -8124,15 +8016,6 @@ serve-static@1.13.0:
     parseurl "~1.3.2"
     send "0.16.0"
 
-serve-static@1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
-  dependencies:
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.1"
-
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -8261,7 +8144,7 @@ sliced@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
 
-smart-buffer@^1.0.13, smart-buffer@^1.0.4:
+smart-buffer@^1.0.4:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
 
@@ -8302,20 +8185,13 @@ socks-proxy-agent@2:
     extend "3"
     socks "~1.1.5"
 
-socks@1.1.9:
+socks@1.1.9, socks@~1.1.5:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.9.tgz#628d7e4d04912435445ac0b6e459376cb3e6d691"
   dependencies:
     ip "^1.1.2"
     smart-buffer "^1.0.4"
 
-socks@~1.1.5:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.10.tgz#5b8b7fc7c8f341c53ed056e929b7bf4de8ba7b5a"
-  dependencies:
-    ip "^1.1.4"
-    smart-buffer "^1.0.13"
-
 sort-keys@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@@ -8463,7 +8339,7 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
-string_decoder@~1.0.0, string_decoder@~1.0.3:
+string_decoder@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
   dependencies:

From df079d29bdba34f5051261246c4df44ac42789ff Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 17:38:31 +0200
Subject: [PATCH 057/344] Set current page declaratively for People

---
 client/coral-admin/src/actions/community.js   |  7 +++--
 client/coral-admin/src/constants/community.js | 30 ++++++++++---------
 client/coral-admin/src/reducers/community.js  |  6 ++++
 .../src/routes/Community/components/People.js |  6 ++--
 .../src/routes/Community/containers/People.js | 16 +++++-----
 client/coral-ui/components/Paginate.js        |  4 ++-
 6 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index b7102b8ff..89427f7bb 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -5,7 +5,7 @@ import {
   FETCH_USERS_SUCCESS,
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
-  COMMENTERS_NEW_PAGE,
+  SET_PAGE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -45,8 +45,9 @@ export const updateSorting = (sort) => ({
   sort
 });
 
-export const newPage = () => ({
-  type: COMMENTERS_NEW_PAGE
+export const setPage = (page) => ({
+  type: SET_PAGE,
+  page,
 });
 
 export const setRole = (id, role) => (dispatch, _, {rest}) => {
diff --git a/client/coral-admin/src/constants/community.js b/client/coral-admin/src/constants/community.js
index dc11572ed..6e8a82bfe 100644
--- a/client/coral-admin/src/constants/community.js
+++ b/client/coral-admin/src/constants/community.js
@@ -1,18 +1,20 @@
-export const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
-export const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
-export const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';
+const prefix = 'COMMUNITY';
 
-export const SORT_UPDATE = 'SORT_UPDATE';
-export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
-export const SET_ROLE = 'SET_ROLE';
-export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
+export const FETCH_USERS_REQUEST = `${prefix}_FETCH_USERS_REQUEST`;
+export const FETCH_USERS_SUCCESS = `${prefix}_FETCH_USERS_SUCCESS`;
+export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_FAILURE`;
 
-export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
-export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
-export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
+export const SORT_UPDATE = `${prefix}_SORT_UPDATE`;
+export const SET_PAGE = `${prefix}_SET_PAGE`;
+export const SET_ROLE = `${prefix}_SET_ROLE`;
+export const SET_COMMENTER_STATUS = `${prefix}_SET_COMMENTER_STATUS`;
 
-export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
-export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
+export const FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
+export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;
+export const FETCH_FLAGGED_COMMENTERS_FAILURE = `${prefix}_FETCH_FLAGGED_COMMENTERS_FAILURE`;
 
-export const SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
-export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';
+export const SHOW_BANUSER_DIALOG = `${prefix}_SHOW_BANUSER_DIALOG`;
+export const HIDE_BANUSER_DIALOG = `${prefix}_HIDE_BANUSER_DIALOG`;
+
+export const SHOW_REJECT_USERNAME_DIALOG = `${prefix}_SHOW_REJECT_USERNAME_DIALOG`;
+export const HIDE_REJECT_USERNAME_DIALOG = `${prefix}_HIDE_REJECT_USERNAME_DIALOG`;
diff --git a/client/coral-admin/src/reducers/community.js b/client/coral-admin/src/reducers/community.js
index 31fb6aa17..cb71634cc 100644
--- a/client/coral-admin/src/reducers/community.js
+++ b/client/coral-admin/src/reducers/community.js
@@ -3,6 +3,7 @@ import {
   FETCH_USERS_SUCCESS,
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
+  SET_PAGE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -52,6 +53,11 @@ export default function community (state = initialState, action) {
       users, // Sets to normal array
     };
   }
+  case SET_PAGE:
+    return {
+      ...state,
+      pagePeople: action.page,
+    };
   case SET_ROLE : {
     const commenters = state.users;
     const idx = commenters.findIndex((el) => el.id === action.id);
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 9626dd53f..664173cb0 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -13,7 +13,7 @@ const People = (props) => {
     searchValue,
     onSearchChange,
     onHeaderClickHandler,
-    onNewPageHandler,
+    onPageChange,
     totalPages,
     setRole,
     setCommenterStatus,
@@ -47,7 +47,7 @@ const People = (props) => {
               setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
               pageCount={totalPages}
-              onPageChange={onNewPageHandler}
+              onPageChange={onPageChange}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
@@ -62,7 +62,7 @@ People.propTypes = {
   searchValue: PropTypes.string,
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
-  onNewPageHandler: PropTypes.func,
+  onPageChange: PropTypes.func,
   setCommenterStatus: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index 561e0fcfb..5780529e8 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -9,7 +9,7 @@ import {viewUserDetail} from '../../../actions/userDetail';
 import {
   fetchUsers,
   updateSorting,
-  newPage,
+  setPage,
   hideRejectUsernameDialog,
   setCommenterStatus,
   setRole,
@@ -23,7 +23,7 @@ class PeopleContainer extends React.Component {
 
   fetchUsers = (query = {}) => {
     const {community} = this.props;
-    
+
     this.props.fetchUsers({
       value: this.state.searchValue,
       field: community.fieldPeople,
@@ -62,19 +62,19 @@ class PeopleContainer extends React.Component {
     this.fetchUsers();
   }
 
-  onNewPageHandler = ({selected}) => {
+  onPageChange = ({selected}) => {
     const page = selected + 1;
-    this.props.newPage(page);
+    this.props.setPage(page);
     this.fetchUsers({page});
   }
 
   render() {
-    return <People 
+    return <People
       users={this.props.community.users}
       searchValue={this.state.searchValue}
       onSearchChange={this.onSearchChange}
       onHeaderClickHandler={this.onHeaderClickHandler}
-      onNewPageHandler={this.onNewPageHandler}
+      onPageChange={this.onPageChange}
       totalPages={this.props.community.totalPagesPeople}
       setCommenterStatus={this.props.setCommenterStatus}
       setRole={this.props.setRole}
@@ -84,7 +84,7 @@ class PeopleContainer extends React.Component {
 }
 
 PeopleContainer.propTypes = {
-  newPage: PropTypes.func,
+  setPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
@@ -95,7 +95,7 @@ PeopleContainer.propTypes = {
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    newPage,
+    setPage,
     fetchUsers,
     updateSorting,
     hideRejectUsernameDialog,
diff --git a/client/coral-ui/components/Paginate.js b/client/coral-ui/components/Paginate.js
index 3a404db69..df19450c3 100644
--- a/client/coral-ui/components/Paginate.js
+++ b/client/coral-ui/components/Paginate.js
@@ -4,9 +4,10 @@ import ReactPaginate from 'react-paginate';
 import styles from './Paginate.css';
 import Icon from './Icon';
 
-const Paginate = ({pageCount, onPageChange}) => (
+const Paginate = ({pageCount, page, onPageChange}) => (
   <ReactPaginate
     initialPage={0}
+    forcePage={page}
     pageCount={pageCount}
     pageRangeDisplayed={5}
     marginPagesDisplayed={2}
@@ -26,6 +27,7 @@ const Paginate = ({pageCount, onPageChange}) => (
 );
 
 Paginate.propTypes = {
+  page: PropTypes.number.isRequired,
   pageCount: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
 };

From 23da613f2b30466cd4932da2771db118d510678c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 18:02:18 +0200
Subject: [PATCH 058/344] Declaratively set page

---
 .../src/actions/{assets.js => stories.js}           |  9 ++++++++-
 client/coral-admin/src/constants/assets.js          |  9 ---------
 client/coral-admin/src/constants/stories.js         | 13 +++++++++++++
 client/coral-admin/src/reducers/index.js            |  4 ++--
 .../src/reducers/{assets.js => stories.js}          |  7 ++++++-
 .../src/routes/Community/components/People.js       |  3 +++
 .../src/routes/Community/components/Table.js        | 10 ++++++----
 .../src/routes/Community/containers/People.js       |  1 +
 .../src/routes/Stories/components/Stories.js        |  7 +++++--
 .../src/routes/Stories/containers/Stories.js        |  7 +++++--
 10 files changed, 49 insertions(+), 21 deletions(-)
 rename client/coral-admin/src/actions/{assets.js => stories.js} (93%)
 delete mode 100644 client/coral-admin/src/constants/assets.js
 create mode 100644 client/coral-admin/src/constants/stories.js
 rename client/coral-admin/src/reducers/{assets.js => stories.js} (86%)

diff --git a/client/coral-admin/src/actions/assets.js b/client/coral-admin/src/actions/stories.js
similarity index 93%
rename from client/coral-admin/src/actions/assets.js
rename to client/coral-admin/src/actions/stories.js
index d7c6d9448..536f478e1 100644
--- a/client/coral-admin/src/actions/assets.js
+++ b/client/coral-admin/src/actions/stories.js
@@ -4,11 +4,12 @@ import {
   FETCH_ASSETS_REQUEST,
   FETCH_ASSETS_SUCCESS,
   FETCH_ASSETS_FAILURE,
+  SET_PAGE,
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
   UPDATE_ASSET_STATE_FAILURE,
   UPDATE_ASSETS
-} from '../constants/assets';
+} from '../constants/stories';
 
 import t from 'coral-framework/services/i18n';
 
@@ -52,3 +53,9 @@ export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
 export const updateAssets = (assets) => (dispatch) => {
   dispatch({type: UPDATE_ASSETS, assets});
 };
+
+export const setPage = (page) => ({
+  type: SET_PAGE,
+  page,
+});
+
diff --git a/client/coral-admin/src/constants/assets.js b/client/coral-admin/src/constants/assets.js
deleted file mode 100644
index 20ec0a9c3..000000000
--- a/client/coral-admin/src/constants/assets.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const FETCH_ASSETS_REQUEST = 'FETCH_ASSETS_REQUEST';
-export const FETCH_ASSETS_SUCCESS = 'FETCH_ASSETS_SUCCESS';
-export const FETCH_ASSETS_FAILURE = 'FETCH_ASSETS_FAILURE';
-
-export const UPDATE_ASSET_STATE_REQUEST = 'UPDATE_ASSET_STATE_REQUEST';
-export const UPDATE_ASSET_STATE_SUCCESS = 'UPDATE_ASSET_STATE_SUCCESS';
-export const UPDATE_ASSET_STATE_FAILURE = 'UPDATE_ASSET_STATE_FAILURE';
-
-export const UPDATE_ASSETS = 'UPDATE_ASSETS';
diff --git a/client/coral-admin/src/constants/stories.js b/client/coral-admin/src/constants/stories.js
new file mode 100644
index 000000000..52a9f9943
--- /dev/null
+++ b/client/coral-admin/src/constants/stories.js
@@ -0,0 +1,13 @@
+const prefix = 'STORIES';
+
+export const FETCH_ASSETS_REQUEST = `${prefix}_FETCH_ASSETS_REQUEST`;
+export const FETCH_ASSETS_SUCCESS = `${prefix}_FETCH_ASSETS_SUCCESS`;
+export const FETCH_ASSETS_FAILURE = `${prefix}_FETCH_ASSETS_FAILURE`;
+
+export const UPDATE_ASSET_STATE_REQUEST = `${prefix}_UPDATE_ASSET_STATE_REQUEST`;
+export const UPDATE_ASSET_STATE_SUCCESS = `${prefix}_UPDATE_ASSET_STATE_SUCCESS`;
+export const UPDATE_ASSET_STATE_FAILURE = `${prefix}_UPDATE_ASSET_STATE_FAILURE`;
+
+export const UPDATE_ASSETS = `${prefix}_UPDATE_ASSETS`;
+
+export const SET_PAGE = `${prefix}_SET_PAGE`;
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index 372fedbae..f7bbf3a3b 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -1,5 +1,5 @@
 import auth from './auth';
-import assets from './assets';
+import stories from './stories';
 import dashboard from './dashboard';
 import configure from './configure';
 import community from './community';
@@ -17,7 +17,7 @@ export default {
   configure,
   suspendUserDialog,
   userDetail,
-  assets,
+  stories,
   community,
   moderation,
   install,
diff --git a/client/coral-admin/src/reducers/assets.js b/client/coral-admin/src/reducers/stories.js
similarity index 86%
rename from client/coral-admin/src/reducers/assets.js
rename to client/coral-admin/src/reducers/stories.js
index b4ea8d21f..60c02bc99 100644
--- a/client/coral-admin/src/reducers/assets.js
+++ b/client/coral-admin/src/reducers/stories.js
@@ -1,4 +1,4 @@
-import * as actions from '../constants/assets';
+import * as actions from '../constants/stories';
 import update from 'immutability-helper';
 
 const initialState = {
@@ -35,6 +35,11 @@ export default function assets (state = initialState, action) {
     return update(state, {
       assets: {$set: action.assets},
     });
+  case actions.SET_PAGE:
+    return {
+      ...state,
+      page: action.page,
+    };
   default:
     return state;
   }
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 664173cb0..75d08429a 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -15,6 +15,7 @@ const People = (props) => {
     onHeaderClickHandler,
     onPageChange,
     totalPages,
+    page,
     setRole,
     setCommenterStatus,
     viewUserDetail,
@@ -48,6 +49,7 @@ const People = (props) => {
               onHeaderClickHandler={onHeaderClickHandler}
               pageCount={totalPages}
               onPageChange={onPageChange}
+              page={page}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
@@ -59,6 +61,7 @@ const People = (props) => {
 People.propTypes = {
   onHeaderClickHandler: PropTypes.func,
   users: PropTypes.array,
+  page: PropTypes.number.isRequired,
   searchValue: PropTypes.string,
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 8d650f165..22b02cfe4 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -24,7 +24,7 @@ const headers = [
   }
 ];
 
-const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, onPageChange}) => (
+const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, page, onPageChange}) => (
   <div>
     <table className={`mdl-data-table ${styles.dataTable}`}>
       <thead>
@@ -51,13 +51,13 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
               {row.created_at}
             </td>
             <td className="mdl-data-table__cell--non-numeric">
-              <Dropdown 
+              <Dropdown
                 value={row.status}
                 placeholder={t('community.status')}
-                onChange={(status) => setCommenterStatus(row.id, status)}>     
+                onChange={(status) => setCommenterStatus(row.id, status)}>
                 <Option value={'ACTIVE'} label={t('community.active')} />
                 <Option value={'BANNED'} label={t('community.banned')} />
-              </Dropdown>       
+              </Dropdown>
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
@@ -76,6 +76,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
     </table>
     <Paginate
       pageCount={pageCount}
+      page={page - 1}
       onPageChange={onPageChange}
     />
   </div>
@@ -88,6 +89,7 @@ Table.propTypes = {
   setCommenterStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   pageCount: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
 };
 
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index 5780529e8..1f52846c9 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -78,6 +78,7 @@ class PeopleContainer extends React.Component {
       totalPages={this.props.community.totalPagesPeople}
       setCommenterStatus={this.props.setCommenterStatus}
       setRole={this.props.setRole}
+      page={this.props.community.pagePeople}
       viewUserDetail={this.props.viewUserDetail}
     />;
   }
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 73f5c60dc..3b2787aab 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -91,8 +91,9 @@ class Stories extends Component {
     );
   }
 
-  onPageClick = ({selected}) => {
+  onPageChange = ({selected}) => {
     const page = selected + 1;
+    this.props.setPage(page);
     this.props.fetchAssets({page});
   }
 
@@ -157,7 +158,8 @@ class Stories extends Component {
               </DataTable>
               <Paginate
                 pageCount={assets.totalPages}
-                onPageChange={this.onPageClick} />
+                page={assets.page - 1}
+                onPageChange={this.onPageChange} />
             </div>
             : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
         }
@@ -168,6 +170,7 @@ class Stories extends Component {
 
 Stories.propTypes = {
   assets: PropTypes.object,
+  setPage: PropTypes.func,
   fetchAssets: PropTypes.func,
   updateAssetState: PropTypes.func,
 };
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index b940e46e6..28048f39d 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -1,12 +1,15 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {fetchAssets, updateAssetState} from 'coral-admin/src/actions/assets';
+import {fetchAssets, updateAssetState, setPage} from 'coral-admin/src/actions/stories';
 import Stories from '../components/Stories';
 
-const mapStateToProps = ({assets}) => ({assets});
+const mapStateToProps = ({stories}) => ({
+  assets: stories,
+});
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
+    setPage,
     fetchAssets,
     updateAssetState,
   }, dispatch);

From 20b5525c48be493f9829f213763bae7029bb3971 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 19:07:14 +0200
Subject: [PATCH 059/344] Refactor and fix query

---
 client/coral-admin/src/actions/stories.js     | 12 +++
 client/coral-admin/src/constants/stories.js   |  2 +
 client/coral-admin/src/reducers/stories.js    | 50 +++++++---
 .../src/routes/Stories/components/Stories.js  | 92 +++---------------
 .../src/routes/Stories/containers/Stories.js  | 94 ++++++++++++++++++-
 5 files changed, 157 insertions(+), 93 deletions(-)

diff --git a/client/coral-admin/src/actions/stories.js b/client/coral-admin/src/actions/stories.js
index 536f478e1..2524b0c3c 100644
--- a/client/coral-admin/src/actions/stories.js
+++ b/client/coral-admin/src/actions/stories.js
@@ -5,6 +5,8 @@ import {
   FETCH_ASSETS_SUCCESS,
   FETCH_ASSETS_FAILURE,
   SET_PAGE,
+  SET_SEARCH_VALUE,
+  SET_CRITERIA,
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
   UPDATE_ASSET_STATE_FAILURE,
@@ -59,3 +61,13 @@ export const setPage = (page) => ({
   page,
 });
 
+export const setSearchValue = (value) => ({
+  type: SET_SEARCH_VALUE,
+  value,
+});
+
+export const setCriteria = (criteria) => ({
+  type: SET_CRITERIA,
+  criteria,
+});
+
diff --git a/client/coral-admin/src/constants/stories.js b/client/coral-admin/src/constants/stories.js
index 52a9f9943..d1994e19a 100644
--- a/client/coral-admin/src/constants/stories.js
+++ b/client/coral-admin/src/constants/stories.js
@@ -11,3 +11,5 @@ export const UPDATE_ASSET_STATE_FAILURE = `${prefix}_UPDATE_ASSET_STATE_FAILURE`
 export const UPDATE_ASSETS = `${prefix}_UPDATE_ASSETS`;
 
 export const SET_PAGE = `${prefix}_SET_PAGE`;
+export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;
+export const SET_CRITERIA = `${prefix}_SET_CRITERIA`;
diff --git a/client/coral-admin/src/reducers/stories.js b/client/coral-admin/src/reducers/stories.js
index 60c02bc99..0d640e6c2 100644
--- a/client/coral-admin/src/reducers/stories.js
+++ b/client/coral-admin/src/reducers/stories.js
@@ -2,9 +2,16 @@ import * as actions from '../constants/stories';
 import update from 'immutability-helper';
 
 const initialState = {
-  byId: {},
-  ids: [],
-  assets: []
+  assets: {
+    byId: {},
+    ids: [],
+    assets: []
+  },
+  searchValue: '',
+  criteria: {
+    sort: 'desc',
+    filter: 'all',
+  },
 };
 
 export default function assets (state = initialState, action) {
@@ -16,30 +23,49 @@ export default function assets (state = initialState, action) {
     }, {});
 
     return update(state, {
-      totalPages: {$set: action.totalPages},
-      page: {$set: action.page},
-      byId: {$set: assets},
-      count: {$set: action.count},
-      ids: {$set: Object.keys(assets)},
+      assets: {
+        totalPages: {$set: action.totalPages},
+        page: {$set: action.page},
+        byId: {$set: assets},
+        count: {$set: action.count},
+        ids: {$set: Object.keys(assets)},
+      },
     });
   }
   case actions.UPDATE_ASSET_STATE_REQUEST:
     return update(state, {
-      byId: {
-        [action.id]: {
-          closedAt: {$set: action.closedAt},
+      assets: {
+        byId: {
+          [action.id]: {
+            closedAt: {$set: action.closedAt},
+          },
         },
       },
     });
   case actions.UPDATE_ASSETS:
     return update(state, {
-      assets: {$set: action.assets},
+      assets: {
+        assets: {$set: action.assets},
+      },
     });
   case actions.SET_PAGE:
     return {
       ...state,
       page: action.page,
     };
+  case actions.SET_SEARCH_VALUE:
+    return {
+      ...state,
+      searchValue: action.value,
+    };
+  case actions.SET_CRITERIA:
+    return {
+      ...state,
+      criteria: {
+        ...state.criteria,
+        ...action.criteria,
+      },
+    };
   default:
     return state;
   }
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 3b2787aab..cc99416bc 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -11,72 +11,11 @@ import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
 class Stories extends Component {
 
-  state = {
-    searchValue: '',
-    sort: 'desc',
-    filter: 'all',
-    statusMenus: {},
-    timer: null,
-  }
-
-  componentDidMount () {
-    this.fetchAssets();
-  }
-
-  onSettingChange = (setting) => (e) => {
-    const {searchValue} = this.state;
-    const criteria = {[setting]: e.target.value};
-
-    this.setState(criteria);
-
-    this.props.fetchAssets({
-      value: searchValue,
-      ...criteria,
-    });
-  }
-
-  onSearchChange = (e) => {
-    const {value} = e.target;
-
-    this.setState((prevState) => {
-      prevState.searchValue = value;
-      clearTimeout(prevState.timer);
-
-      prevState.timer = setTimeout(() => {
-        this.fetchAssets();
-      }, 350);
-      return prevState;
-    });
-  }
-
   renderDate = (date) => {
     const d = new Date(date);
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
   }
 
-  fetchAssets = (query) => {
-    const {searchValue, sort, filter, limit} = this.state;
-
-    this.props.fetchAssets({
-      value: searchValue,
-      sort,
-      filter,
-      limit,
-      ...query
-    });
-  };
-
-  onStatusChange = async (closeStream, id) => {
-    const {updateAssetState} = this.props;
-
-    try {
-      updateAssetState(id, closeStream ? Date.now() : null);
-      this.fetchAssets();
-    } catch(err) {
-      console.error(err);
-    }
-  }
-
   renderTitle = (title, {id}) =>  <Link to={`/admin/moderate/${id}`}>{title}</Link>
 
   renderStatus = (closedAt, {id}) => {
@@ -84,26 +23,19 @@ class Stories extends Component {
     return (
       <Dropdown
         value={closed}
-        onChange={(value) => this.onStatusChange(value, id)}>
+        onChange={(value) => this.props.onStatusChange(value, id)}>
         <Option value={false} label={t('streams.open')} />
         <Option value={true} label={t('streams.closed')} />
       </Dropdown>
     );
   }
 
-  onPageChange = ({selected}) => {
-    const page = selected + 1;
-    this.props.setPage(page);
-    this.props.fetchAssets({page});
-  }
-
   render () {
-    const {searchValue, sort, filter} = this.state;
-    const {assets} = this.props;
+    const {assets, searchValue, sort, filter, onSearchChange, onSettingChange, onPageChange} = this.props;
 
     const assetsIds = sortBy(assets.ids.map((id) => assets.byId[id]), 'publication_date');
 
-    if (this.state.sort === 'desc') {
+    if (sort === 'desc') {
       assetsIds.reverse();
     }
 
@@ -116,7 +48,7 @@ class Stories extends Component {
               type='text'
               value={searchValue}
               className={styles.searchBoxInput}
-              onChange={this.onSearchChange}
+              onChange={onSearchChange}
               placeholder={t('streams.search')}/>
           </div>
           <div className={styles.optionHeader}>{t('streams.filter_streams')}</div>
@@ -125,7 +57,7 @@ class Stories extends Component {
             name='status filter'
             value={filter}
             childContainer='div'
-            onChange={this.onSettingChange('filter')}
+            onChange={onSettingChange('filter')}
             className={styles.radioGroup}
           >
             <Radio value='all'>{t('streams.all')}</Radio>
@@ -137,7 +69,7 @@ class Stories extends Component {
             name='sort by'
             value={sort}
             childContainer='div'
-            onChange={this.onSettingChange('sort')}
+            onChange={onSettingChange('sort')}
             className={styles.radioGroup}
           >
             <Radio value='desc'>{t('streams.newest')}</Radio>
@@ -159,7 +91,7 @@ class Stories extends Component {
               <Paginate
                 pageCount={assets.totalPages}
                 page={assets.page - 1}
-                onPageChange={this.onPageChange} />
+                onPageChange={onPageChange} />
             </div>
             : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
         }
@@ -170,9 +102,13 @@ class Stories extends Component {
 
 Stories.propTypes = {
   assets: PropTypes.object,
-  setPage: PropTypes.func,
-  fetchAssets: PropTypes.func,
-  updateAssetState: PropTypes.func,
+  searchValue: PropTypes.string,
+  sort: PropTypes.string,
+  filter: PropTypes.string,
+  onStatusChange: PropTypes.func.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  onSettingChange: PropTypes.func.isRequired,
 };
 
 export default Stories;
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index 28048f39d..806bfc395 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -1,18 +1,106 @@
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
 import {bindActionCreators} from 'redux';
-import {fetchAssets, updateAssetState, setPage} from 'coral-admin/src/actions/stories';
+import {fetchAssets, updateAssetState, setPage, setSearchValue, setCriteria} from 'coral-admin/src/actions/stories';
 import Stories from '../components/Stories';
 
+class StoriesContainer extends Component {
+  timer=null;
+
+  componentDidMount () {
+    this.fetchAssets();
+  }
+
+  onSearchChange = (e) => {
+    const {value} = e.target;
+
+    this.props.setSearchValue(value);
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.fetchAssets();
+    }, 350);
+  }
+
+  onSettingChange = (setting) => (e) => {
+    const criteria = {[setting]: e.target.value};
+    this.props.setCriteria(criteria);
+    this.fetchAssets(criteria);
+  }
+
+  fetchAssets = (query) => {
+    const {searchValue, sort, filter, limit} = this.props;
+
+    this.props.fetchAssets({
+      value: searchValue,
+      sort,
+      filter,
+      limit,
+      ...query
+    });
+  };
+
+  onStatusChange = async (closeStream, id) => {
+    const {updateAssetState} = this.props;
+
+    try {
+      updateAssetState(id, closeStream ? Date.now() : null);
+      this.fetchAssets();
+    } catch(err) {
+      console.error(err);
+    }
+  }
+
+  onPageChange = ({selected}) => {
+    const page = selected + 1;
+    this.props.setPage(page);
+    this.fetchAssets({page});
+  }
+
+  render () {
+    return <Stories
+      assets={this.props.assets}
+      searchValue={this.props.searchValue}
+      sort={this.props.sort}
+      filter={this.props.filter}
+      limit={this.props.limit}
+      onPageChange={this.onPageChange}
+      onStatusChange={this.onStatusChange}
+      onSettingChange={this.onSettingChange}
+      onSearchChange={this.onSearchChange}
+    />;
+  }
+}
+
 const mapStateToProps = ({stories}) => ({
-  assets: stories,
+  assets: stories.assets,
+  searchValue: stories.searchValue,
+  sort: stories.criteria.sort,
+  filter: stories.criteria.filter,
+  limit: stories.criteria.limit,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setPage,
+    setCriteria,
+    setSearchValue,
     fetchAssets,
     updateAssetState,
   }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(Stories);
+StoriesContainer.propTypes = {
+  assets: PropTypes.object,
+  searchValue: PropTypes.string,
+  sort: PropTypes.string,
+  filter: PropTypes.string,
+  limit: PropTypes.number,
+  setPage: PropTypes.func.isRequired,
+  setCriteria: PropTypes.func.isRequired,
+  setSearchValue: PropTypes.func.isRequired,
+  fetchAssets: PropTypes.func.isRequired,
+  updateAssetState: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StoriesContainer);
 

From e41c224e3d303cfc865d8fa9d59afeb50485d44a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 19:14:25 +0200
Subject: [PATCH 060/344] Remove unused

---
 client/coral-admin/src/routes/Stories/components/Stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index cc99416bc..f8f553cab 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -79,7 +79,7 @@ class Stories extends Component {
         {
           assetsIds.length
             ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={assetsIds} onClick={this.goToModeration}>
+              <DataTable className={styles.streamsTable} rows={assetsIds}>
                 <TableHeader name="title" cellFormatter={this.renderTitle}>{t('streams.article')}</TableHeader>
                 <TableHeader name="publication_date" cellFormatter={this.renderDate}>
                   {t('streams.pubdate')}

From b4daf8fc98da50520e2114d29f81f3256f8a99b9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 19:19:59 +0200
Subject: [PATCH 061/344] Move searchValue  to Redux

---
 client/coral-admin/src/actions/community.js   |  6 +++++
 client/coral-admin/src/constants/community.js |  2 ++
 client/coral-admin/src/reducers/community.js  |  7 +++++
 .../src/routes/Community/containers/People.js | 26 ++++++++-----------
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index 89427f7bb..6a091d214 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -6,6 +6,7 @@ import {
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
   SET_PAGE,
+  SET_SEARCH_VALUE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -50,6 +51,11 @@ export const setPage = (page) => ({
   page,
 });
 
+export const setSearchValue = (value) => ({
+  type: SET_SEARCH_VALUE,
+  value,
+});
+
 export const setRole = (id, role) => (dispatch, _, {rest}) => {
   return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
     .then(() => {
diff --git a/client/coral-admin/src/constants/community.js b/client/coral-admin/src/constants/community.js
index 6e8a82bfe..eea946efb 100644
--- a/client/coral-admin/src/constants/community.js
+++ b/client/coral-admin/src/constants/community.js
@@ -18,3 +18,5 @@ export const HIDE_BANUSER_DIALOG = `${prefix}_HIDE_BANUSER_DIALOG`;
 
 export const SHOW_REJECT_USERNAME_DIALOG = `${prefix}_SHOW_REJECT_USERNAME_DIALOG`;
 export const HIDE_REJECT_USERNAME_DIALOG = `${prefix}_HIDE_REJECT_USERNAME_DIALOG`;
+
+export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;
diff --git a/client/coral-admin/src/reducers/community.js b/client/coral-admin/src/reducers/community.js
index cb71634cc..170804b60 100644
--- a/client/coral-admin/src/reducers/community.js
+++ b/client/coral-admin/src/reducers/community.js
@@ -4,6 +4,7 @@ import {
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
   SET_PAGE,
+  SET_SEARCH_VALUE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -17,6 +18,7 @@ const initialState = {
   isFetchingPeople: false,
   errorPeople: '',
   users: [],
+  searchValue: '',
   fieldPeople: 'created_at',
   ascPeople: false,
   totalPagesPeople: 0,
@@ -107,6 +109,11 @@ export default function community (state = initialState, action) {
       user: action.user,
       rejectUsernameDialog: true
     };
+  case SET_SEARCH_VALUE:
+    return {
+      ...state,
+      searchValue: action.value,
+    };
   default :
     return state;
   }
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index 1f52846c9..063eaef2f 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -13,19 +13,17 @@ import {
   hideRejectUsernameDialog,
   setCommenterStatus,
   setRole,
+  setSearchValue,
 } from '../../../actions/community';
 
 class PeopleContainer extends React.Component {
-  state = {
-    searchValue: '',
-    timer: null
-  };
+  timer=null;
 
   fetchUsers = (query = {}) => {
     const {community} = this.props;
 
     this.props.fetchUsers({
-      value: this.state.searchValue,
+      value: community.searchValue,
       field: community.fieldPeople,
       asc: community.ascPeople,
       ...query
@@ -46,15 +44,11 @@ class PeopleContainer extends React.Component {
   onSearchChange = (e) => {
     const value = e.target.value;
 
-    this.setState((prevState) => {
-      prevState.searchValue = value;
-      clearTimeout(prevState.timer);
-
-      prevState.timer = setTimeout(() => {
-        this.fetchUsers({value});
-      }, 350);
-      return prevState;
-    });
+    this.props.setSearchValue(value);
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.fetchUsers({value});
+    }, 350);
   }
 
   onHeaderClickHandler = (sort) => {
@@ -71,7 +65,7 @@ class PeopleContainer extends React.Component {
   render() {
     return <People
       users={this.props.community.users}
-      searchValue={this.state.searchValue}
+      searchValue={this.props.community.searchValue}
       onSearchChange={this.onSearchChange}
       onHeaderClickHandler={this.onHeaderClickHandler}
       onPageChange={this.onPageChange}
@@ -90,6 +84,7 @@ PeopleContainer.propTypes = {
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
+  setSearchValue: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
@@ -103,6 +98,7 @@ const mapDispatchToProps = (dispatch) =>
     setCommenterStatus,
     setRole,
     viewUserDetail,
+    setSearchValue,
   }, dispatch);
 
 export default connect(null, mapDispatchToProps)(PeopleContainer);

From d472223ee3ed9084ae2d01412350c14f3caf95de Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 19:32:47 +0200
Subject: [PATCH 062/344] Fix/Implement sorting for stories

---
 client/coral-admin/src/reducers/stories.js    |  2 +-
 .../src/routes/Stories/components/Stories.js  | 24 +++++++------------
 .../src/routes/Stories/containers/Stories.js  | 10 ++++----
 routes/api/assets/index.js                    |  2 +-
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/client/coral-admin/src/reducers/stories.js b/client/coral-admin/src/reducers/stories.js
index 0d640e6c2..271ec8cfe 100644
--- a/client/coral-admin/src/reducers/stories.js
+++ b/client/coral-admin/src/reducers/stories.js
@@ -9,7 +9,7 @@ const initialState = {
   },
   searchValue: '',
   criteria: {
-    sort: 'desc',
+    asc: 'false',
     filter: 'all',
   },
 };
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index f8f553cab..866defde4 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import cn from 'classnames';
 import {Link} from 'react-router';
 import PropTypes from 'prop-types';
-import sortBy from 'lodash/sortBy';
 import {Dropdown, Option, Paginate, Icon} from 'coral-ui';
 import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
 import t from 'coral-framework/services/i18n';
@@ -31,13 +30,8 @@ class Stories extends Component {
   }
 
   render () {
-    const {assets, searchValue, sort, filter, onSearchChange, onSettingChange, onPageChange} = this.props;
-
-    const assetsIds = sortBy(assets.ids.map((id) => assets.byId[id]), 'publication_date');
-
-    if (sort === 'desc') {
-      assetsIds.reverse();
-    }
+    const {assets, searchValue, filter, onSearchChange, onSettingChange, onPageChange, asc} = this.props;
+    const rows = assets.ids.map((id) => assets.byId[id]);
 
     return (
       <div className={cn('talk-admin-stories', styles.container)}>
@@ -67,19 +61,19 @@ class Stories extends Component {
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
           <RadioGroup
             name='sort by'
-            value={sort}
+            value={asc}
             childContainer='div'
-            onChange={onSettingChange('sort')}
+            onChange={onSettingChange('asc')}
             className={styles.radioGroup}
           >
-            <Radio value='desc'>{t('streams.newest')}</Radio>
-            <Radio value='asc'>{t('streams.oldest')}</Radio>
+            <Radio value='false'>{t('streams.newest')}</Radio>
+            <Radio value='true'>{t('streams.oldest')}</Radio>
           </RadioGroup>
         </div>
         {
-          assetsIds.length
+          rows.length
             ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={assetsIds}>
+              <DataTable className={styles.streamsTable} rows={rows}>
                 <TableHeader name="title" cellFormatter={this.renderTitle}>{t('streams.article')}</TableHeader>
                 <TableHeader name="publication_date" cellFormatter={this.renderDate}>
                   {t('streams.pubdate')}
@@ -103,7 +97,7 @@ class Stories extends Component {
 Stories.propTypes = {
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  sort: PropTypes.string,
+  asc: PropTypes.string,
   filter: PropTypes.string,
   onStatusChange: PropTypes.func.isRequired,
   onSearchChange: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index 806bfc395..d91bed968 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -29,11 +29,11 @@ class StoriesContainer extends Component {
   }
 
   fetchAssets = (query) => {
-    const {searchValue, sort, filter, limit} = this.props;
+    const {searchValue, asc, filter, limit} = this.props;
 
     this.props.fetchAssets({
       value: searchValue,
-      sort,
+      asc,
       filter,
       limit,
       ...query
@@ -61,7 +61,7 @@ class StoriesContainer extends Component {
     return <Stories
       assets={this.props.assets}
       searchValue={this.props.searchValue}
-      sort={this.props.sort}
+      asc={this.props.asc}
       filter={this.props.filter}
       limit={this.props.limit}
       onPageChange={this.onPageChange}
@@ -75,7 +75,7 @@ class StoriesContainer extends Component {
 const mapStateToProps = ({stories}) => ({
   assets: stories.assets,
   searchValue: stories.searchValue,
-  sort: stories.criteria.sort,
+  asc: stories.criteria.asc,
   filter: stories.criteria.filter,
   limit: stories.criteria.limit,
 });
@@ -92,7 +92,7 @@ const mapDispatchToProps = (dispatch) =>
 StoriesContainer.propTypes = {
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  sort: PropTypes.string,
+  asc: PropTypes.string,
   filter: PropTypes.string,
   limit: PropTypes.number,
   setPage: PropTypes.func.isRequired,
diff --git a/routes/api/assets/index.js b/routes/api/assets/index.js
index 4007517de..165b2cd99 100644
--- a/routes/api/assets/index.js
+++ b/routes/api/assets/index.js
@@ -39,7 +39,7 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
   const {
     value = '',
     field = 'created_at',
-    page = 1, 
+    page = 1,
     asc = 'false',
     filter = 'all',
     limit = 20,

From dbd7f26311e325382b4f3e55decda4a2656dfb0f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 25 Oct 2017 15:57:57 -0300
Subject: [PATCH 063/344] Adding pause after login

---
 test/e2e/specs/02_admin.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 463249eeb..03f460c1b 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -16,7 +16,11 @@ module.exports = {
       .setValue('@emailInput', admin.email)
       .setValue('@passwordInput', admin.password)
       .waitForElementVisible('@signInButton')
-      .click('@signInButton')
+      .click('@signInButton');
+
+    client.pause(3000);
+    
+    adminPage
       .waitForElementVisible('@moderationContainer');
   },
 

From b06ae9001ea89297ad6f3b403c390b9f2d98113e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 25 Oct 2017 16:31:46 -0300
Subject: [PATCH 064/344] Adding missing classes

---
 client/coral-admin/src/components/Drawer.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/components/Drawer.js b/client/coral-admin/src/components/Drawer.js
index 0385b1773..3aee31c95 100644
--- a/client/coral-admin/src/components/Drawer.js
+++ b/client/coral-admin/src/components/Drawer.js
@@ -5,6 +5,7 @@ import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
+import cn from 'classnames';
 
 const CoralDrawer = ({handleLogout, auth = {}}) => (
   <Drawer className={styles.drawer}>
@@ -12,7 +13,7 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
-            className={styles.navLink}
+            className={cn('talk-admin-nav-dashboard', styles.navLink)}
             to="/admin/dashboard"
             activeClassName={styles.active}>
             {t('configure.dashboard')}
@@ -20,19 +21,21 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
               <Link
-                className={styles.navLink}
+                className={cn('talk-admin-nav-moderate', styles.navLink)}   
                 to="/admin/moderate"
                 activeClassName={styles.active}>
                 {t('configure.moderate')}
               </Link>
             )
           }
-          <Link className={styles.navLink}
+          <Link
+            className={cn('talk-admin-nav-stories', styles.navLink)}
             to="/admin/stories"
             activeClassName={styles.active}>
             {t('configure.stories')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            className={cn('talk-admin-nav-community', styles.navLink)}
             to="/admin/community"
             activeClassName={styles.active}>
             {t('configure.community')}
@@ -41,7 +44,7 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
             can(auth.user, 'UPDATE_CONFIG') &&
             (
               <Link
-                className={styles.navLink}
+                className={cn('talk-admin-nav-configure', styles.navLink)}
                 to="/admin/configure"
                 activeClassName={styles.active}>
                 {t('configure.configure')}

From 59acdc5c02c6645bea49a868fa4acc88f7457bd5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 25 Oct 2017 16:53:18 -0300
Subject: [PATCH 065/344] new e2e test

---
 client/coral-admin/src/components/Drawer.js |  2 +-
 test/e2e/page_objects/admin.js              |  6 ++++-
 test/e2e/specs/02_admin.js                  | 28 +++++++++++++--------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/coral-admin/src/components/Drawer.js b/client/coral-admin/src/components/Drawer.js
index 3aee31c95..70da8ad5e 100644
--- a/client/coral-admin/src/components/Drawer.js
+++ b/client/coral-admin/src/components/Drawer.js
@@ -8,7 +8,7 @@ import {can} from 'coral-framework/services/perms';
 import cn from 'classnames';
 
 const CoralDrawer = ({handleLogout, auth = {}}) => (
-  <Drawer className={styles.drawer}>
+  <Drawer className={cn('talk-admin-drawer-nav', styles.drawer)}>
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index ffdcf8a29..92f2ac0e1 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -15,9 +15,13 @@ module.exports = {
     'passwordInput': '.talk-admin-login-sign-in #password',
     'signInButton': '.talk-admin-login-sign-in-button',
     'storiesNav': '.talk-admin-nav-stories',
+    'storiesDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-stories',
     'storiesSection': '.talk-admin-stories',
     'communityNav': '.talk-admin-nav-community',
+    'communityDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-community',
     'communitySection': '.talk-admin-community',
-    'moderationContainer': '.talk-admin-moderation-container'
+    'moderationContainer': '.talk-admin-moderation-container',
+    'drawerButton': '.mdl-layout__drawer-button',
+    'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
   }
 };
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 03f460c1b..4a60780bb 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,10 +1,9 @@
 module.exports = {
   '@tags': ['admin', 'login'],
-  beforeEach: (client) => {
-
-    // Testing Desktop
-    client.resizeWindow(1280, 800);
-  },
+   beforeEach: (client) => {
+    
+    client.resizeWindow(1024, 800);
+  }, 
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -29,9 +28,14 @@ module.exports = {
 
     adminPage
       .navigate()
-      .waitForElementVisible('@storiesNav')
-      .click('@storiesNav')
+      .waitForElementVisible('@drawerButton')
+      .click('@drawerButton')
+      .waitForElementVisible('@storiesDrawerNav')
+      .click('@storiesDrawerNav')
+      .waitForElementVisible('@drawerOverlay')
+      .click('@drawerOverlay')
       .waitForElementVisible('@storiesSection');
+
   },
 
   'Admin goes to Community': (client) => {
@@ -39,9 +43,13 @@ module.exports = {
 
     adminPage
       .navigate()
-      .waitForElementVisible('@communityNav')
-      .click('@communityNav')
-      .waitForElementVisible('@communitySection');      
+      .waitForElementVisible('@drawerButton')
+      .click('@drawerButton')
+      .waitForElementVisible('@communityDrawerNav')
+      .click('@communityDrawerNav')
+      .waitForElementVisible('@drawerOverlay')
+      .click('@drawerOverlay')
+      .waitForElementVisible('@communitySection');
   },
   after: (client) => {
     client.end();

From 6647e22d1cf894e8863f486da292f085920a107f Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 25 Oct 2017 14:05:04 -0600
Subject: [PATCH 066/344] Update circle.yml

---
 circle.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/circle.yml b/circle.yml
index 9f35736c6..932643ff6 100644
--- a/circle.yml
+++ b/circle.yml
@@ -50,7 +50,7 @@ test:
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
     # Check dependancies using nsp.
     - nsp check
-    - yarn e2e-ci
+    # - yarn e2e-ci
 
 deployment:
   release:

From 4089d09681475c3c59da7226c1296e977d4b0962 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 26 Oct 2017 09:19:29 -0600
Subject: [PATCH 067/344] fix regression missing yarn cache clean

---
 Dockerfile.onbuild | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Dockerfile.onbuild b/Dockerfile.onbuild
index a4bff7095..20d34ffb9 100644
--- a/Dockerfile.onbuild
+++ b/Dockerfile.onbuild
@@ -9,9 +9,10 @@ ONBUILD ARG TALK_PLUGINS_JSON
 # Bundle app source
 ONBUILD COPY . /usr/src/app
 
-# At this stage, we need to install the development dependancies again because
-# we need to have webpack available. We then build the new dependancies and
-# clear out the development dependancies again. After this we of course need to
+# At this stage, we need to install the development dependencies again because
+# we need to have webpack available. We then build the new dependencies and
+# clear out the development dependencies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
 ONBUILD RUN cli plugins reconcile && \
-            yarn build
\ No newline at end of file
+            yarn build && \
+            yarn cache clean
\ No newline at end of file

From b84daf0422cf967f616265b7db82c8ae70f0a8b4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 26 Oct 2017 17:30:55 +0200
Subject: [PATCH 068/344] Set resolution to 1600x1200 bs

---
 nightwatch-browserstack.conf.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 9e8e334c5..ac8f90d27 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -26,6 +26,7 @@ const nightwatch_config = {
 
         // Disable this, as it makes bs slow and brittle.
         'browserstack.networkLogs': false,
+        'browserstack.resolution': '1600x1200',
       }
     },
     chrome: {

From ad4a5595f9e8b184c5f798421c8688c3a0f52c05 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 27 Oct 2017 13:19:00 +0200
Subject: [PATCH 069/344] Enable screenshot on failure for bs

---
 nightwatch-browserstack.conf.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index ac8f90d27..bf0ca2284 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -27,7 +27,13 @@ const nightwatch_config = {
         // Disable this, as it makes bs slow and brittle.
         'browserstack.networkLogs': false,
         'browserstack.resolution': '1600x1200',
-      }
+      },
+      screenshots : {
+        enabled: true,
+        on_failure: true,
+        on_error: true,
+        path: process.env.REPORTS_FOLDER || './test/e2e/reports',
+      },
     },
     chrome: {
       desiredCapabilities: {

From 5f5c64870ab9ee43dda0dbdaae875caeccae3b58 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 27 Oct 2017 19:00:48 +0200
Subject: [PATCH 070/344] Stabilize e2e

---
 scripts/e2e-ci.sh                |  3 ++
 test/e2e/specs/02_admin.js       |  6 ++--
 test/e2e/specs/03_embedStream.js | 52 +++++++++++++++++++++++++++-----
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index e0e94b4bf..f64223f32 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,5 +1,8 @@
 #!/bin/bash
 
+CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
+CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
+
 if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
 
   exitCode=0
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 4a60780bb..4744d2116 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,9 +1,9 @@
 module.exports = {
   '@tags': ['admin', 'login'],
    beforeEach: (client) => {
-    
+
     client.resizeWindow(1024, 800);
-  }, 
+  },
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -17,8 +17,6 @@ module.exports = {
       .waitForElementVisible('@signInButton')
       .click('@signInButton');
 
-    client.pause(3000);
-    
     adminPage
       .waitForElementVisible('@moderationContainer');
   },
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 57f9a8fd2..5381a5558 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,3 +1,31 @@
+class SortedWindowHandler {
+
+  constructor(client) {
+    this.client = client;
+    this.client.windowHandles((result) => {
+      this.handles = result.value;
+      if (this.handles.length > 2) {
+        throw new Error('SortedWindowHandler must be created before new windows were created.');
+      }
+    });
+  }
+
+  windowHandles(callback) {
+    this.client.windowHandles((result) => {
+      console.log(result);
+      this.handles = this.handles.filter((handle) => result.value.includes(handle));
+      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
+      if (remaining.length === 1) {
+        this.handles.push(remaining[0]);
+      }
+      if (remaining.length > 1) {
+        throw new Error('Cannot detect new window handle, because more than one windows was created.');
+      }
+      callback(this.handles);
+    });
+  }
+}
+
 module.exports = {
   '@tags': ['embedStream', 'login'],
   'creates a new asset': (client) => {
@@ -18,16 +46,15 @@ module.exports = {
       .navigate()
       .getEmbedSection();
 
+    const windowHandler = new SortedWindowHandler(client);
+
     embed
       .waitForElementVisible('@signInButton')
       .click('@signInButton');
 
-    client.pause(3000);
-
     // Focusing on the Login PopUp
-    client.windowHandles((result) => {
-      const handle = result.value[1];
-      client.switchWindow(handle);
+    windowHandler.windowHandles((handles) => {
+      client.switchWindow(handles[1]);
     });
 
     const login = client.page.login();
@@ -45,10 +72,19 @@ module.exports = {
       .waitForElementVisible('@loginButton')
       .click('@loginButton');
 
+    // Give a tiny bit of time to let popup close.
+    client.pause(50);
+
+    if (client.capabilities.browserName === 'MicrosoftEdge') {
+
+      // More time for edge.
+      // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
+      client.pause(1000);
+    }
+
     // Focusing on the Embed Window
-    client.windowHandles((result) => {
-      const handle = result.value[0];
-      client.switchWindow(handle);
+    windowHandler.windowHandles((handles) => {
+      client.switchWindow(handles[0]);
     });
   },
   'user posts a comment': (client) => {

From bfe82218ed44b21ffa041f7480875359c3996e22 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Sun, 29 Oct 2017 18:09:18 -0700
Subject: [PATCH 071/344] Send user an email when they are banned #1050

---
 services/email/banned.html.ejs |  1 +
 services/email/banned.txt.ejs  |  1 +
 services/users.js              | 21 ++++++++++++++++++++-
 test/server/services/users.js  | 21 ++++++++++++++++++++-
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 services/email/banned.html.ejs
 create mode 100644 services/email/banned.txt.ejs

diff --git a/services/email/banned.html.ejs b/services/email/banned.html.ejs
new file mode 100644
index 000000000..4fd8f191c
--- /dev/null
+++ b/services/email/banned.html.ejs
@@ -0,0 +1 @@
+<%= body.replace(/\n/g, '<br />') %>
diff --git a/services/email/banned.txt.ejs b/services/email/banned.txt.ejs
new file mode 100644
index 000000000..b36560ec5
--- /dev/null
+++ b/services/email/banned.txt.ejs
@@ -0,0 +1 @@
+<%= body %>
diff --git a/services/users.js b/services/users.js
index 9906ef6c0..2e5c66d40 100644
--- a/services/users.js
+++ b/services/users.js
@@ -398,7 +398,7 @@ module.exports = class UsersService {
     // TODO: current updating status behavior is weird.
     // once a user has been `APPROVED` its status cannot be
     // changed anymore.
-    return UserModel.findOneAndUpdate({
+    const user = await UserModel.findOneAndUpdate({
       id,
       status: {
         $ne: 'APPROVED'
@@ -410,6 +410,25 @@ module.exports = class UsersService {
     }, {
       new: true,
     });
+
+    if (status === 'BANNED') {
+      let localProfile = user.profiles.find((profile) => profile.provider === 'local');
+      if (localProfile) {
+        const options =
+          {
+            template: 'banned',              // needed to know which template to render!
+            locals: {                            // specifies the template locals.
+              body: 'In accordance with The Coral Project’s community guidelines, your account has been banned. You are now longer allowed to comment, flag or engage with our community.'
+            },
+            subject: '[Talk] Your account has been banned',
+            to: localProfile.id  // This only works if the user has registered via e-mail.
+            // We may want a standard way to access a user's e-mail address in the future
+          };
+        await MailerService.sendSimple(options);
+      }
+
+    }
+    return user;
   }
 
   /**
diff --git a/test/server/services/users.js b/test/server/services/users.js
index dddd5eda8..b4a15e3ba 100644
--- a/test/server/services/users.js
+++ b/test/server/services/users.js
@@ -1,8 +1,11 @@
 const UsersService = require('../../../services/users');
 const SettingsService = require('../../../services/settings');
+const MailerService = require('../../../services/mailer');
 
 const chai = require('chai');
 chai.use(require('chai-as-promised'));
+const sinon = require('sinon');
+chai.use(require('sinon-chai'));
 const expect = chai.expect;
 
 describe('services.UsersService', () => {
@@ -15,7 +18,7 @@ describe('services.UsersService', () => {
     mockUsers = await UsersService.createLocalUsers([{
       email: 'stampi@gmail.com',
       username: 'Stampi',
-      password: '1Coral!-'
+      password: '1Coral!-',
     }, {
       email: 'sockmonster@gmail.com',
       username: 'Sockmonster',
@@ -25,6 +28,12 @@ describe('services.UsersService', () => {
       username: 'Marvel',
       password: '3Coral!3'
     }]);
+
+    sinon.spy(MailerService, 'sendSimple');
+  });
+
+  afterEach(() => {
+    MailerService.sendSimple.restore();
   });
 
   describe('#findById()', () => {
@@ -149,7 +158,11 @@ describe('services.UsersService', () => {
         .then(() => UsersService.findById(mockUsers[0].id))
         .then((user) => {
           expect(user).to.have.property('status', 'ACTIVE');
+        })
+        .then(() => {
+          expect(MailerService.sendSimple).to.not.have.been.called;
         });
+
     });
   });
 
@@ -188,6 +201,12 @@ describe('services.UsersService', () => {
         .then(() => UsersService.findById(mockUsers[0].id))
         .then((user) => {
           expect(user).to.have.property('status', 'BANNED');
+        })
+        .then(() => {
+          expect(MailerService.sendSimple).to.have.been.calledWithMatch({
+            template: 'banned',
+            to: mockUsers[0].profiles[0].id
+          });
         });
     });
 

From 82a332c787f49c624f6d6da9f3453c0d8885ddd9 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Sun, 29 Oct 2017 19:48:42 -0700
Subject: [PATCH 072/344] disable report button when comment already reported

---
 client/talk-plugin-flags/components/FlagButton.js | 9 ++++++++-
 client/talk-plugin-flags/components/styles.css    | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/talk-plugin-flags/components/FlagButton.js b/client/talk-plugin-flags/components/FlagButton.js
index 24c50416a..18db85c03 100644
--- a/client/talk-plugin-flags/components/FlagButton.js
+++ b/client/talk-plugin-flags/components/FlagButton.js
@@ -158,9 +158,16 @@ export default class FlagButton extends Component {
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className={`${name}-container`}>
           <button
+            disabled={flagged}
             ref={(ref) => this.flagButton = ref}
             onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
-            className={cn(`${name}-button`, {[`${name}-button-flagged`]: flagged}, styles.button)}>
+            className={
+              cn(`${name}-button`, {
+                [`${name}-button-flagged`]: flagged,
+                [styles.flaggedButton]: flagged
+              },
+              styles.button)}
+          >
             {
               flagged
                 ? <span className={`${name}-button-text`}>{t('reported')}</span>
diff --git a/client/talk-plugin-flags/components/styles.css b/client/talk-plugin-flags/components/styles.css
index 4b28a4f3a..0b128740f 100644
--- a/client/talk-plugin-flags/components/styles.css
+++ b/client/talk-plugin-flags/components/styles.css
@@ -3,6 +3,10 @@
   margin: 5px 0px 5px 10px;
 }
 
+button[disabled] {
+  cursor: default;
+}
+
 .flaggedIcon {
   color: #f00
 }

From 34b58779e8ffd9c845d59d23984f4275c5f0e630 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 07:04:39 -0300
Subject: [PATCH 073/344] User PENDING status should not be able to post

---
 client/coral-embed-stream/src/components/Stream.js          | 4 +++-
 client/coral-embed-stream/src/components/SuspendAccount.css | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 96101c1e5..7ff48106b 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -213,12 +213,14 @@ class Stream extends React.Component {
     const open = !asset.isClosed;
 
     const banned = user && user.status === 'BANNED';
+    const pending = user && user.status === 'PENDING';
+
     const temporarilySuspended =
       user &&
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
+    const showCommentBox = loggedIn && ((!banned && !pending & !temporarilySuspended && !highlightedComment) || keepCommentBox);
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
diff --git a/client/coral-embed-stream/src/components/SuspendAccount.css b/client/coral-embed-stream/src/components/SuspendAccount.css
index f491ea889..539df0812 100644
--- a/client/coral-embed-stream/src/components/SuspendAccount.css
+++ b/client/coral-embed-stream/src/components/SuspendAccount.css
@@ -1,6 +1,10 @@
 .editNameInput {
   margin-top: 10px;
   margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 3px;
+  border: solid 1px #d8d8d8;
+  font-size: 0.9em;
 }
 
 .alert {

From a6a903c459291fbe04647c11f54ca2eee218a419 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 07:52:08 -0300
Subject: [PATCH 074/344] e2e tests

---
 test/e2e/page_objects/adminCommunity.js | 14 +++++++
 test/e2e/page_objects/embedStream.js    | 11 +++++
 test/e2e/specs/04_userStatus.js         | 56 +++++++++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 test/e2e/page_objects/adminCommunity.js
 create mode 100644 test/e2e/specs/04_userStatus.js

diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
new file mode 100644
index 000000000..6eca507a6
--- /dev/null
+++ b/test/e2e/page_objects/adminCommunity.js
@@ -0,0 +1,14 @@
+module.exports = {
+  commands: [{
+    url: function() {
+      return `${this.api.launchUrl}/admin/community`;
+    },
+    ready() {
+      return this
+        .waitForElementVisible('body');
+    },
+  }],
+  elements: {
+    container: '.talk-admin-community',
+  }
+};
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 76065ba5e..dd90f66b0 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -41,10 +41,21 @@ module.exports = {
         signInButton: '#coralSignInButton',
         commentBoxTextarea: '#commentText',
         commentBoxPostButton: '.talk-plugin-commentbox-button',
+        firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
+        flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
         respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button'
       },
       sections: {
+        flag: {
+          selector: '.talk-plugin-flags-popup',
+          elements: {
+            offensiveUsernameRadio: '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
+            flagUsernameRadio: '.talk-plugin-flags-popup-radio#USERS',
+            continueButton: '.talk-plugin-flags-popup-button',
+            popUpText: '.talk-plugin-flags-popup-text'
+          }
+        },
         profile: {
           selector: '.talk-embed-stream-profile-tab-pane',
           elements: {
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
new file mode 100644
index 000000000..f3eaee0c6
--- /dev/null
+++ b/test/e2e/specs/04_userStatus.js
@@ -0,0 +1,56 @@
+module.exports = {
+  'admin logs in': (client) => {
+    const adminPage = client.page.admin();
+    const {testData: {admin}} = client.globals;
+
+    adminPage
+      .navigate()
+      .waitForElementVisible('@loginLayout')
+      .waitForElementVisible('@signInForm')
+      .setValue('@emailInput', admin.email)
+      .setValue('@passwordInput', admin.password)
+      .waitForElementVisible('@signInButton')
+      .click('@signInButton');
+
+    client.pause(3000);
+    
+    adminPage
+      .waitForElementVisible('@moderationContainer');
+  },
+  'admin flags user\'s username as offensive': (client) => {
+    const embedStream = client.page.embedStream();
+    const flagSection = client.page.embedStream().section.embed.section.flag;
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@flagButton')
+      .click('@flagButton');
+
+    flagSection
+      .waitForElementVisible('@flagUsernameRadio')
+      .click('@flagUsernameRadio')
+      .waitForElementVisible('@continueButton')
+      .click('@continueButton')
+      .waitForElementVisible('@offensiveUsernameRadio')
+      .click('@offensiveUsernameRadio')
+      .click('@continueButton')
+      .waitForElementVisible('@popUpText')
+      .click('@continueButton');
+  },
+  'admin goes to Reported Usernames': (client) => {
+    const community = client.page.adminCommunity();
+
+    community
+      .navigate();
+
+    community
+      .waitForElementVisible('@container');
+  },
+  after: (client) => {
+    client.end(); 
+  }
+};

From b6786f614e9b14715a9c4513ad7c9647c7c8adf1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 07:56:51 -0300
Subject: [PATCH 075/344] Adding missing props

---
 .../routes/Community/components/FlaggedAccounts.js  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index e617def53..1559b0507 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
@@ -70,4 +70,15 @@ class FlaggedAccounts extends React.Component {
   }
 }
 
+FlaggedAccounts.propTypes = {
+  users: PropTypes.object,
+  loadMore: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  showSuspendUserDialog: PropTypes.func,
+  showRejectUsernameDialog: PropTypes.func,
+  approveUser: PropTypes.func,
+  me: PropTypes.object,
+  viewUserDetail: PropTypes.func,
+};
+
 export default FlaggedAccounts;

From 6d7afc7bbc90130363e6a999260e2ffab13593af Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 08:07:03 -0300
Subject: [PATCH 076/344] Adding missing classes and props

---
 .../src/components/ApproveButton.js           |  5 +--
 .../src/components/RejectButton.js            |  5 +--
 .../Community/components/FlaggedAccounts.js   |  3 +-
 .../Community/components/FlaggedUser.js       | 32 ++++++++++++-------
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/client/coral-admin/src/components/ApproveButton.js b/client/coral-admin/src/components/ApproveButton.js
index 151a5ca29..8ab455510 100644
--- a/client/coral-admin/src/components/ApproveButton.js
+++ b/client/coral-admin/src/components/ApproveButton.js
@@ -7,11 +7,11 @@ import {Icon} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const ApproveButton = ({active, minimal, onClick}) => {
+const ApproveButton = ({active, minimal, onClick, className}) => {
   const text = active ? t('modqueue.approved') : t('modqueue.approve');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
       onClick={onClick}
     >
       <Icon name={'done'} className={styles.icon} />
@@ -21,6 +21,7 @@ const ApproveButton = ({active, minimal, onClick}) => {
 };
 
 ApproveButton.propTypes = {
+  className: PropTypes.string,
   active: PropTypes.bool,
   minimal: PropTypes.bool,
   onClick: PropTypes.func,
diff --git a/client/coral-admin/src/components/RejectButton.js b/client/coral-admin/src/components/RejectButton.js
index e01102dc3..8e0873162 100644
--- a/client/coral-admin/src/components/RejectButton.js
+++ b/client/coral-admin/src/components/RejectButton.js
@@ -7,11 +7,11 @@ import {Icon} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const RejectButton = ({active, minimal, onClick}) => {
+const RejectButton = ({active, minimal, onClick, className}) => {
   const text = active ? t('modqueue.rejected') : t('modqueue.reject');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
       onClick={onClick}
     >
       <Icon name={'close'} className={styles.icon} />
@@ -21,6 +21,7 @@ const RejectButton = ({active, minimal, onClick}) => {
 };
 
 RejectButton.propTypes = {
+  className: PropTypes.string,
   active: PropTypes.bool,
   minimal: PropTypes.bool,
   onClick: PropTypes.func,
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index 1559b0507..cbfd903c6 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
@@ -23,7 +24,7 @@ class FlaggedAccounts extends React.Component {
     const hasResults = users.nodes && !!users.nodes.length;
 
     return (
-      <div className={styles.container}>
+      <div className={cn('talk-adnin-community-flagged-accounts', styles.container)}>
         <div className={styles.mainFlaggedContent}>
           {
             hasResults
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index 409e867a3..69f94179d 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -1,18 +1,14 @@
 import React from 'react';
 import styles from './FlaggedUser.css';
-
-// TODO: Should not rely on plugin.
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
-
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
-import cn from 'classnames';
-import t from 'coral-framework/services/i18n';
-
-// TODO: Should work with custom flags too.
 const shortReasons = {
   [username.other]: t('community.other'),
   [username.spam]: t('community.spam_ads'),
@@ -21,7 +17,6 @@ const shortReasons = {
   [username.impersonating]: t('community.impersonating'),
 };
 
-// Render a single user for the list
 class User extends React.Component {
 
   showSuspenUserDialog = () => this.props.showSuspendUserDialog({
@@ -54,8 +49,8 @@ class User extends React.Component {
         tabIndex={0}
         className={cn(className, styles.root, {[styles.rootSelected]: selected})}
       >
-        <div className={styles.container}>
-          <div className={styles.header}>
+        <div className={cn('talk-admin-community-flagged-user', styles.container)}>
+          <div className={cn('talk-admin-community-flagged-user-header', styles.header)}>
             <div className={styles.author}>
               <button
                 onClick={this.viewAuthorDetail}
@@ -78,8 +73,7 @@ class User extends React.Component {
               }
             </div>
           </div>
-
-          <div className={styles.body}>
+          <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
             <div className={styles.flagged}>
               <div className={styles.flaggedByCount}>
                 <i className={cn('material-icons', styles.flagIcon)}>flag</i>
@@ -127,9 +121,11 @@ class User extends React.Component {
             <div className={styles.sideActions}>
               <div className={styles.actions}>
                 <ApproveButton
+                  className="talk-admin-flagged-user-approve-button"
                   onClick={this.approveUser}
                 />
                 <RejectButton
+                  className="talk-admin-flagged-user-reject-button"
                   onClick={this.showRejectUsernameDialog}
                 />
               </div>
@@ -141,4 +137,16 @@ class User extends React.Component {
   }
 }
 
+User.propTypes = {
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  viewUserDetail: PropTypes.object,
+  showRejectUsernameDialog: PropTypes.func,
+  approveUser: PropTypes.func,
+  user: PropTypes.object,
+  className: PropTypes.string,
+  selected: PropTypes.bool,
+  me: PropTypes.object,
+};
+
 export default User;

From 302d30cde1fe39412756686018b444370eec2c68 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 08:54:32 -0300
Subject: [PATCH 077/344] Adding missing classnames and proptypes, plus e2e
 testing covering userstatus

---
 .../coral-admin/src/components/ui/Header.js   |   6 +-
 .../Community/components/FlaggedUser.js       |   8 +-
 .../components/RejectUsernameDialog.js        |  27 +++--
 .../src/components/SuspendedAccount.js        |  10 +-
 .../components/RestrictedContent.js           |  15 ++-
 .../components/RestrictedMessageBox.js        |  11 +-
 test/e2e/page_objects/admin.js                |   2 +
 test/e2e/page_objects/adminCommunity.js       |   8 ++
 test/e2e/page_objects/embedStream.js          |   9 +-
 test/e2e/specs/02_admin.js                    |   1 +
 test/e2e/specs/04_userStatus.js               | 103 +++++++++++++++++-
 11 files changed, 168 insertions(+), 32 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index c5af63786..bd7fbcf0c 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -76,9 +76,9 @@ const CoralHeader = ({
           }
           <div className={styles.rightPanel}>
             <ul>
-              <li className={styles.settings}>
+              <li className={cn(styles.settings, 'talk-admin-header-settings')}>
                 <div>
-                  <IconButton name="settings" id="menu-settings"/>
+                  <IconButton name="settings" id="menu-settings" className="talk-admin-header-settings-button"/>
                   <Menu target="menu-settings" align="right">
                     <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
                     <MenuItem>
@@ -91,7 +91,7 @@ const CoralHeader = ({
                           Report a bug or give feedback
                       </a>
                     </MenuItem>
-                    <MenuItem onClick={handleLogout}>
+                    <MenuItem onClick={handleLogout} className="talk-admin-header-sign-out">
                       {t('configure.sign_out')}
                     </MenuItem>
                   </Menu>
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index 69f94179d..b2156f479 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -45,10 +45,8 @@ class User extends React.Component {
     } = this.props;
 
     return (
-      <li
-        tabIndex={0}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
-      >
+      <li tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})} >
         <div className={cn('talk-admin-community-flagged-user', styles.container)}>
           <div className={cn('talk-admin-community-flagged-user-header', styles.header)}>
             <div className={styles.author}>
@@ -140,7 +138,7 @@ class User extends React.Component {
 User.propTypes = {
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
-  viewUserDetail: PropTypes.object,
+  viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
   user: PropTypes.object,
diff --git a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
index 20c411e52..18e9394a5 100644
--- a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
+++ b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-
+import cn from 'classnames';
 import {Dialog, Button} from 'coral-ui';
 import styles from './RejectUsernameDialog.css';
 
@@ -29,12 +29,6 @@ class RejectUsernameDialog extends Component  {
 
   state = {email: '', stage: 0}
 
-  static propTypes = {
-    stage: PropTypes.number,
-    handleClose: PropTypes.func.isRequired,
-    rejectUsername: PropTypes.func.isRequired
-  }
-
   componentDidMount() {
     this.setState({email: t('reject_username.email_message_reject'), about: t('reject_username.username')});
   }
@@ -76,7 +70,7 @@ class RejectUsernameDialog extends Component  {
     const {stage} = this.state;
 
     return <Dialog
-      className={styles.suspendDialog}
+      className={cn(styles.suspendDialog, 'talk-reject-username-dialog')}
       id="rejectUsernameDialog"
       open={open}
       onClose={handleClose}
@@ -96,15 +90,18 @@ class RejectUsernameDialog extends Component  {
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
-                      className={styles.emailInput}
+                      className={cn(styles.emailInput, 'talk-reject-username-dialog-suspension-message')}
                       value={this.state.email}
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
         }
-        <div className={styles.modalButtons}>
+        <div className={cn(styles.modalButtons, 'talk-reject-username-dialog-buttons')}>
           {Object.keys(stages[stage].options).map((key, i) => (
-            <Button key={i} onClick={this.onActionClick(stage, i)}>
+            <Button
+              key={i}
+              className={cn('talk-reject-username-dialog-button', `talk-reject-username-dialog-button-${key}`)}
+              onClick={this.onActionClick(stage, i)} >
               {t(stages[stage].options[key], t('reject_username.username'))}
             </Button>
           ))}
@@ -114,4 +111,12 @@ class RejectUsernameDialog extends Component  {
   }
 }
 
+RejectUsernameDialog.propTypes = {
+  stage: PropTypes.number,
+  handleClose: PropTypes.func.isRequired,
+  rejectUsername: PropTypes.func.isRequired,
+  user: PropTypes.object,
+  open: PropTypes.bool,
+};
+
 export default RejectUsernameDialog;
diff --git a/client/coral-embed-stream/src/components/SuspendedAccount.js b/client/coral-embed-stream/src/components/SuspendedAccount.js
index 903b1bcf4..ce9a1c23c 100644
--- a/client/coral-embed-stream/src/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/components/SuspendedAccount.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import styles from './SuspendAccount.css';
 import {Button} from 'coral-ui';
@@ -66,17 +67,16 @@ class SuspendedAccount extends Component {
             </label>
             <input
               type='text'
-              className={styles.editNameInput}
+              className={cn(styles.editNameInput, 'talk-suspended-account-username-input')}
               value={username}
               placeholder={t('framework.edit_name.label')}
               id='username'
               onChange={(e) => this.setState({username: e.target.value})}
               rows={3}/><br/>
             <Button
-              onClick={this.onSubmitClick}>
-              {
-                t('framework.edit_name.button')
-              }
+              className="talk-suspended-account-submit-button"
+              onClick={this.onSubmitClick} >
+              {t('framework.edit_name.button')}
             </Button>
           </div> : null
       }
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
index 01c5ddd93..02df566a4 100644
--- a/client/coral-framework/components/RestrictedContent.js
+++ b/client/coral-framework/components/RestrictedContent.js
@@ -1,16 +1,25 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import RestrictedMessageBox from './RestrictedMessageBox';
 
-export default ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
+const RestrictedContent = ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
   if (restricted) {
     return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
   } else {
     return (
-      <div>
+      <div className="talk-restricted-content">
         {children}
       </div>
     );
   }
 };
+
+RestrictedContent.propTypes = {
+  children: PropTypes.node,
+  restricted: PropTypes.bool,
+  message: PropTypes.string,
+  restrictedComp: PropTypes.node,
+};
+
+export default RestrictedContent;
diff --git a/client/coral-framework/components/RestrictedMessageBox.js b/client/coral-framework/components/RestrictedMessageBox.js
index c579a4731..05c8c89aa 100644
--- a/client/coral-framework/components/RestrictedMessageBox.js
+++ b/client/coral-framework/components/RestrictedMessageBox.js
@@ -1,4 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './RestrictedMessageBox.css';
 
-export default ({children}) => <div className={styles.message}>{children}</div>;
+const RestrictedMessageBox = ({children}) => 
+  <div className={cn(styles.message, 'talk-restricted-message-box')}>{children}</div>;
+
+RestrictedMessageBox.propTypes = {
+  children: PropTypes.node,
+};
+
+export default RestrictedMessageBox;
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 92f2ac0e1..94ce82826 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -23,5 +23,7 @@ module.exports = {
     'moderationContainer': '.talk-admin-moderation-container',
     'drawerButton': '.mdl-layout__drawer-button',
     'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
+    'settingsButton': '.talk-admin-header-settings-button',
+    'signOutButton': '.talk-admin-header-sign-out',
   }
 };
diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
index 6eca507a6..ef3ccbb4c 100644
--- a/test/e2e/page_objects/adminCommunity.js
+++ b/test/e2e/page_objects/adminCommunity.js
@@ -10,5 +10,13 @@ module.exports = {
   }],
   elements: {
     container: '.talk-admin-community',
+    flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
+    flaggedUser:'.talk-admin-community-flagged-user',
+    flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
+    flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
+    usernameDialog: '.talk-reject-username-dialog',
+    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
   }
 };
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index dd90f66b0..85a0480da 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -44,7 +44,10 @@ module.exports = {
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
         flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
-        respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button'
+        respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
+        restrictedMessageBox: '.talk-restricted-message-box',
+        suspendedAccountInput: '.talk-suspended-account-username-input',
+        suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
       },
       sections: {
         flag: {
@@ -53,7 +56,7 @@ module.exports = {
             offensiveUsernameRadio: '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
             flagUsernameRadio: '.talk-plugin-flags-popup-radio#USERS',
             continueButton: '.talk-plugin-flags-popup-button',
-            popUpText: '.talk-plugin-flags-popup-text'
+            popUpText: '.talk-plugin-flags-popup-text',
           }
         },
         profile: {
@@ -63,7 +66,7 @@ module.exports = {
             myCommentHistory: '.talk-my-profile-comment-history',
             myCommentHistoryReactions: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
             myCommentHistoryReactionCount: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
-            myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body'
+            myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
           },
         },
         comments: {
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 4a60780bb..432666a38 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -51,6 +51,7 @@ module.exports = {
       .click('@drawerOverlay')
       .waitForElementVisible('@communitySection');
   },
+
   after: (client) => {
     client.end();
   }
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index f3eaee0c6..32bf6b72a 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -48,7 +48,108 @@ module.exports = {
       .navigate();
 
     community
-      .waitForElementVisible('@container');
+      .waitForElementVisible('@container')
+      .waitForElementVisible('@flaggedAccountsContainer')
+      .waitForElementVisible('@flaggedUser');
+  },
+  'admin rejects the user flag': (client) => {
+    const community = client.page.adminCommunity();
+    
+    community
+      .waitForElementVisible('@flaggedUserRejectButton')
+      .click('@flaggedUserRejectButton');
+  },
+  'admin suspends the user': (client) => {
+    const community = client.page.adminCommunity();
+    
+    community
+      .waitForElementVisible('@usernameDialog')
+      .waitForElementVisible('@usernameDialogButtons')
+      .waitForElementVisible('@usernameDialogSuspend')
+      .click('@usernameDialogSuspend')
+      .waitForElementVisible('@usernameDialogSuspensionMessage')
+      .click('@usernameDialogSuspend')
+      .waitForElementNotPresent('@flaggedUser');
+  },
+  'admin logs out': (client) => {
+    const admin = client.page.admin();
+
+    admin
+      .waitForElementVisible('@settingsButton')
+      .click('@settingsButton')
+      .waitForElementVisible('@signOutButton')
+      .click('@signOutButton');
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@signInButton')
+      .click('@signInButton');
+
+    client.pause(3000);
+
+    // Focusing on the Login PopUp
+    client.windowHandles((result) => {
+      const handle = result.value[1];
+      client.switchWindow(handle);
+    });
+
+    const login = client.page.login();
+
+    login
+      .setValue('@emailInput', user.email)
+      .setValue('@passwordInput', user.password)
+      .waitForElementVisible('@signIn')
+      .waitForElementVisible('@loginButton')
+      .click('@loginButton');
+
+    // Focusing on the Embed Window
+    client.windowHandles((result) => {
+      const handle = result.value[0];
+      client.switchWindow(handle);
+    });
+  },
+  'user account is suspended, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@restrictedMessageBox');
+  },
+
+  'user picks another username': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+    
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@suspendedAccountInput')
+      .setValue('@suspendedAccountInput', `${user.username}-alternative`)
+      .waitForElementVisible('@suspendedAccountSubmitButton')
+      .click('@suspendedAccountSubmitButton');
+  },
+  'user should not be able to comment': (client) => {
+    const embedStream = client.page.embedStream();
+    
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementNotPresent('@commentBoxTextarea')
+      .waitForElementNotPresent('@commentBoxPostButton');
   },
   after: (client) => {
     client.end(); 

From 12a71fa11718d0a7863456075975a815273ca86a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 13:11:41 +0100
Subject: [PATCH 078/344] Wait before click

---
 test/e2e/page_objects/embedStream.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 76065ba5e..2ee8b31fd 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -23,11 +23,13 @@ module.exports = {
     embed: {
       commands: [{
         getProfileSection: function() {
+          this.waitForElementVisible('@profileTabButton');
           this.click('@profileTabButton');
           this.expect.section('@profile').to.be.present;
           return this.section.profile;
         },
         getCommentsSection: function() {
+          this.waitForElementVisible('@commentsTabButton');
           this.click('@commentsTabButton');
           this.expect.section('@comments').to.be.present;
           return this.section.comments;

From 511f4f0975f253a05cc04a52d8d197905ab94b19 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 13:26:50 +0100
Subject: [PATCH 079/344] Refactor

---
 test/e2e/specs/03_embedStream.js      | 28 +--------------------------
 test/e2e/utils/SortedWindowHandler.js | 28 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 27 deletions(-)
 create mode 100644 test/e2e/utils/SortedWindowHandler.js

diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 5381a5558..4c7e620e8 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,30 +1,4 @@
-class SortedWindowHandler {
-
-  constructor(client) {
-    this.client = client;
-    this.client.windowHandles((result) => {
-      this.handles = result.value;
-      if (this.handles.length > 2) {
-        throw new Error('SortedWindowHandler must be created before new windows were created.');
-      }
-    });
-  }
-
-  windowHandles(callback) {
-    this.client.windowHandles((result) => {
-      console.log(result);
-      this.handles = this.handles.filter((handle) => result.value.includes(handle));
-      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
-      if (remaining.length === 1) {
-        this.handles.push(remaining[0]);
-      }
-      if (remaining.length > 1) {
-        throw new Error('Cannot detect new window handle, because more than one windows was created.');
-      }
-      callback(this.handles);
-    });
-  }
-}
+const SortedWindowHandler = require('../utils/SortedWindowHandler');
 
 module.exports = {
   '@tags': ['embedStream', 'login'],
diff --git a/test/e2e/utils/SortedWindowHandler.js b/test/e2e/utils/SortedWindowHandler.js
new file mode 100644
index 000000000..c736547ed
--- /dev/null
+++ b/test/e2e/utils/SortedWindowHandler.js
@@ -0,0 +1,28 @@
+class SortedWindowHandler {
+
+  constructor(client) {
+    this.client = client;
+    this.client.windowHandles((result) => {
+      this.handles = result.value;
+      if (this.handles.length > 2) {
+        throw new Error('SortedWindowHandler must be created before new windows were created.');
+      }
+    });
+  }
+
+  windowHandles(callback) {
+    this.client.windowHandles((result) => {
+      this.handles = this.handles.filter((handle) => result.value.includes(handle));
+      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
+      if (remaining.length === 1) {
+        this.handles.push(remaining[0]);
+      }
+      if (remaining.length > 1) {
+        throw new Error('Cannot detect new window handle, because more than one windows was created.');
+      }
+      callback(this.handles);
+    });
+  }
+}
+
+module.exports = SortedWindowHandler;

From 0c3a9db443d0d799b1b48d67d720733f65ed4045 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 13:52:11 +0100
Subject: [PATCH 080/344] Add more console logs

---
 scripts/e2e-ci.sh | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index f64223f32..f805c8e20 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -8,13 +8,17 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
   exitCode=0
 
   browserstack() {
+    echo "-- Start e2e for $1 --"
     REPORTS_FOLDER="$CIRCLE_TEST_REPORTS/$1" yarn e2e-browserstack -- --env "$1"
 
     # Determine exit code.
     result=$?
     if [ "$result" -gt "0" ]
     then
+      echo "-- Success e2e for $1 --"
       exitCode=$result
+    else
+      echo "-- Failed e2e for $1 --"
     fi
 
     # Sleep a bit to let browserstack-local to close properly.

From 9af206da1a2450804df0adca7aecd05901df6e5d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 14:08:13 +0100
Subject: [PATCH 081/344] Correct echo output

---
 scripts/e2e-ci.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index f805c8e20..a7cbbc23a 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -15,10 +15,10 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     result=$?
     if [ "$result" -gt "0" ]
     then
-      echo "-- Success e2e for $1 --"
+      echo "-- Failed e2e for $1 --"
       exitCode=$result
     else
-      echo "-- Failed e2e for $1 --"
+      echo "-- Success e2e for $1 --"
     fi
 
     # Sleep a bit to let browserstack-local to close properly.

From 05b326b91c0e50ab682f103324b768c26a095688 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 14:14:49 +0100
Subject: [PATCH 082/344] Add comments

---
 test/e2e/utils/SortedWindowHandler.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/test/e2e/utils/SortedWindowHandler.js b/test/e2e/utils/SortedWindowHandler.js
index c736547ed..f57856814 100644
--- a/test/e2e/utils/SortedWindowHandler.js
+++ b/test/e2e/utils/SortedWindowHandler.js
@@ -1,5 +1,15 @@
+
+/**
+ * SortedWindowHandler assists in making e2e tests more robust by returning
+ * deterministic window handles. An instance must be created before new windows
+ * are created and windowHandles must be called each time a window was created or
+ * closed.
+ */
 class SortedWindowHandler {
 
+  /**
+   * Constructor, must be called before new windows were created.
+   */
   constructor(client) {
     this.client = client;
     this.client.windowHandles((result) => {
@@ -10,6 +20,9 @@ class SortedWindowHandler {
     });
   }
 
+  /**
+   * windowHandles will call given `callback` with an array of window handles.
+   */
   windowHandles(callback) {
     this.client.windowHandles((result) => {
       this.handles = this.handles.filter((handle) => result.value.includes(handle));

From 97a8f95b93f5fcf60eb70133af04fc345217fe25 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 14:25:18 +0100
Subject: [PATCH 083/344] Use win10 for ie browsers

---
 nightwatch-browserstack.conf.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index bf0ca2284..17ce3f3c0 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -59,7 +59,7 @@ const nightwatch_config = {
       desiredCapabilities: {
         browser: 'internet explorer',
         os: 'Windows',
-        os_version: '8.1',
+        os_version: '10',
         browser_version: '11',
       },
     },
@@ -67,6 +67,8 @@ const nightwatch_config = {
       desiredCapabilities: {
         browser: 'edge',
         browser_version: '15',
+        os: 'Windows',
+        os_version: '10',
       },
     },
   }

From 8c0118106be6bab4650d58dfba3a1d518bc10a05 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 30 Oct 2017 14:24:15 +0000
Subject: [PATCH 084/344] Update version number to be correct

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 85b6a2b05..3e9d5fb05 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 8adff1426309a362223510b20c18f22f7d8f2a76 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 15:53:52 +0100
Subject: [PATCH 085/344] Reactivate e2e on ci

---
 circle.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/circle.yml b/circle.yml
index 932643ff6..9f35736c6 100644
--- a/circle.yml
+++ b/circle.yml
@@ -50,7 +50,7 @@ test:
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
     # Check dependancies using nsp.
     - nsp check
-    # - yarn e2e-ci
+    - yarn e2e-ci
 
 deployment:
   release:

From 975fe550e0bb731fc085f746df1b6c37925b67d3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 16:08:03 +0100
Subject: [PATCH 086/344] Harmonize local chrome headless window-size

---
 nightwatch.conf.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index f843b881a..5c3ffcaa5 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -43,7 +43,7 @@ module.exports = {
     'chrome-headless': {
       desiredCapabilities: {
         chromeOptions : {
-          args: ['--headless', '--disable-gpu', 'window-size=1280,800'],
+          args: ['--headless', '--disable-gpu', 'window-size=1600,1200'],
         },
       },
     },

From 53b1104cf88e5263145bb284d308e579b79dc314 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 16:09:16 +0100
Subject: [PATCH 087/344] Add little pause waiting for popup to open

---
 test/e2e/specs/03_embedStream.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 4c7e620e8..53da1e87d 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -26,6 +26,10 @@ module.exports = {
       .waitForElementVisible('@signInButton')
       .click('@signInButton');
 
+    // Wait for window to be created
+    // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
+    client.pause(200);
+
     // Focusing on the Login PopUp
     windowHandler.windowHandles((handles) => {
       client.switchWindow(handles[1]);

From e091fa552ab7ba0c39c2c57ef2b109ff66bc4604 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 17:02:20 +0100
Subject: [PATCH 088/344] Upgrade selenium standalone

---
 nightwatch.conf.js | 6 +++---
 package.json       | 2 +-
 yarn.lock          | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index 5c3ffcaa5..97eee0e81 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -9,13 +9,13 @@ module.exports = {
   globals_path: './test/e2e/globals',
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-standalone/.selenium/selenium-server/3.5.3-server.jar',
+    server_path: 'node_modules/selenium-standalone/.selenium/selenium-server/3.6.0-server.jar',
     log_path: './test/e2e/',
     host: '127.0.0.1',
     port: 6666,
     cli_args: {
-      'webdriver.chrome.driver': 'node_modules/selenium-standalone/.selenium/chromedriver/2.32-x64-chromedriver',
-      'webdriver.gecko.driver': 'node_modules/selenium-standalone/.selenium/geckodriver/0.18.0-x64-geckodriver',
+      'webdriver.chrome.driver': 'node_modules/selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver',
+      'webdriver.gecko.driver': 'node_modules/selenium-standalone/.selenium/geckodriver/0.19.0-x64-geckodriver',
     }
   },
   test_settings: {
diff --git a/package.json b/package.json
index 3e9d5fb05..897efc819 100644
--- a/package.json
+++ b/package.json
@@ -172,7 +172,7 @@
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "resolve": "^1.4.0",
-    "selenium-standalone": "6.9.0",
+    "selenium-standalone": "^6.11.0",
     "semver": "^5.4.1",
     "simplemde": "^1.11.2",
     "smoothscroll-polyfill": "^0.3.5",
diff --git a/yarn.lock b/yarn.lock
index 6ea60fc82..7996e549f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7953,9 +7953,9 @@ select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
 
-selenium-standalone@6.9.0:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.9.0.tgz#5805f403c82b48b4e136d8a97f1832aad7852bd5"
+selenium-standalone@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.11.0.tgz#eb21ff65f3b2ece75061b35d4f9e7572ac0280c2"
   dependencies:
     async "^2.1.4"
     commander "^2.9.0"

From e4688f987672112f3f353534b9aca3b2bbb3e3cc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 19:08:42 +0100
Subject: [PATCH 089/344] Pause to let iframe load

---
 test/e2e/page_objects/embedStream.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 2ee8b31fd..f148ae7bc 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -8,6 +8,11 @@ module.exports = {
     },
     getEmbedSection: function() {
       this.waitForElementVisible('@iframe');
+
+      // Pause a bit to let iframe initialize in the hope that it'll
+      // fix https://www.browserstack.com/automate/builds/96419cf46e3d6376a36ae6d3f90934112df1ed91/sessions/224f1a1566c1c8c7859e2e76ece51862200f0173#automate_button
+      this.api.pause(200);
+
       this.api.frame(iframeId);
       this.expect.section('@embed').to.be.present;
       return this.section.embed;

From 0cdefa0066f96b1f591f0d00ace0c3fbd3c81277 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 21:52:36 +0100
Subject: [PATCH 090/344] Fix wrong typed characters

---
 nightwatch-browserstack.conf.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 17ce3f3c0..65cc6cd9d 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -61,6 +61,11 @@ const nightwatch_config = {
         os: 'Windows',
         os_version: '10',
         browser_version: '11',
+
+        // The x64 bit IEDriver that is used by IE 11 has a known issue with sendKeys where
+        // it may enter incorrect keys (shift + key).
+        // This adds a delay for each character as temporary fix as advised from the browserstack support.
+        'browserstack.customSendKeys': 800,
       },
     },
     edge: {

From 88d012755cd0d88a1dca3135d44dfd2fd44271c7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 30 Oct 2017 23:16:23 +0100
Subject: [PATCH 091/344] Always use windows 10

---
 nightwatch-browserstack.conf.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 65cc6cd9d..d79f6917a 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -39,12 +39,16 @@ const nightwatch_config = {
       desiredCapabilities: {
         browser: 'chrome',
         browser_version: '62',
+        os: 'Windows',
+        os_version: '10',
       },
     },
     firefox: {
       desiredCapabilities: {
         browser: 'firefox',
         browser_version: '56',
+        os: 'Windows',
+        os_version: '10',
       },
     },
     safari: {

From ae07dfb2cdf18d92607d36aae37bcad3fd74ca39 Mon Sep 17 00:00:00 2001
From: PepeFranco <gfranco@occ.com.mx>
Date: Mon, 30 Oct 2017 16:56:52 -0600
Subject: [PATCH 092/344] Added check for user & comments

---
 graph/mutators/action.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 794da581a..60f939477 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -33,12 +33,16 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
 
   if (item_type === 'USERS' && action_type === 'FLAG') {
 
-    // Set the user as pending if it was a user flag.
-    await UsersService.setStatus(item_id, 'PENDING');
+    // Set the user as pending if it was a user flag and user has no Admin, Staff or Moderation roles
+    let user = await UsersService.findById(item_id);
+    if(!user.roles)
+      await UsersService.setStatus(item_id, 'PENDING');
   }
 
   if (comment) {
-    pubsub.publish('commentFlagged', comment);
+    let user = await UsersService.findById(comment.author_id);
+    if(!user.roles)
+      pubsub.publish('commentFlagged', comment);
   }
 
   return action;

From 350e679abf88eca8d95154cd368b93abf25b521c Mon Sep 17 00:00:00 2001
From: PepeFranco <gfranco@occ.com.mx>
Date: Mon, 30 Oct 2017 16:58:51 -0600
Subject: [PATCH 093/344] Added check for user & comments

---
 graph/mutators/action.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 60f939477..a5bf16051 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -35,14 +35,16 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
 
     // Set the user as pending if it was a user flag and user has no Admin, Staff or Moderation roles
     let user = await UsersService.findById(item_id);
-    if(!user.roles)
+    if(!user.roles){
       await UsersService.setStatus(item_id, 'PENDING');
+    }
   }
 
   if (comment) {
     let user = await UsersService.findById(comment.author_id);
-    if(!user.roles)
+    if(!user.roles){
       pubsub.publish('commentFlagged', comment);
+    }
   }
 
   return action;

From 05e91129f45d5e7ad4b7df17ff2f3316c2fdb119 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Mon, 30 Oct 2017 22:16:59 -0700
Subject: [PATCH 094/344] show staff instead of user badge when reported by
 staff

---
 client/coral-admin/src/components/CommentLabels.js | 11 ++++++++++-
 client/coral-admin/src/containers/CommentLabels.js |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
index 7af7e9a7e..630f0c02d 100644
--- a/client/coral-admin/src/components/CommentLabels.js
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -6,10 +6,19 @@ import FlagLabel from 'coral-ui/components/FlagLabel';
 import cn from 'classnames';
 import styles from './CommentLabels.css';
 
+const staffRoles = ['ADMIN', 'STAFF', 'MODERATOR'];
+
 function isUserFlagged(actions) {
   return actions.some((action) => action.__typename === 'FlagAction' && action.user);
 }
 
+function getUserFlaggedType(actions) {
+  return actions
+    .filter((action) => action.__typename === 'FlagAction' && action.user)
+    .map((action) => action.user.roles.some((role) => staffRoles.includes(role)))
+    .some((staff) => staff) ? 'Staff' : 'User';
+}
+
 function hasSuspectedWords(actions) {
   return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
 }
@@ -24,7 +33,7 @@ const CommentLabels = ({comment, comment: {className, status, actions, hasParent
       <div className={styles.coreLabels}>
         {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
         {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
-        {isUserFlagged(actions) && <FlagLabel iconName="person">User</FlagLabel>}
+        {isUserFlagged(actions) && <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>}
         {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
         {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
       </div>
diff --git a/client/coral-admin/src/containers/CommentLabels.js b/client/coral-admin/src/containers/CommentLabels.js
index 1942d1ad0..1d57aa526 100644
--- a/client/coral-admin/src/containers/CommentLabels.js
+++ b/client/coral-admin/src/containers/CommentLabels.js
@@ -25,6 +25,7 @@ export default withFragments({
         }
         user {
           id
+          roles
         }
       }
       ${getSlotFragmentSpreads(slots, 'comment')}

From 07e6c15c3a856092541a2e3a12951a749dee5e28 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Mon, 30 Oct 2017 23:08:33 -0700
Subject: [PATCH 095/344] add numbered shortcuts for mod queue

---
 .../src/components/ModerationKeysModal.js     |  1 +
 .../Moderation/components/Moderation.js       | 23 ++++++++++++++-----
 locales/en.yml                                |  1 +
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 45304992c..6f53bf7fa 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -12,6 +12,7 @@ const shortcuts = [
       'k': 'modqueue.prev_comment',
       'ctrl+f': 'modqueue.toggle_search',
       't': 'modqueue.next_queue',
+      '1...5': 'modqueue.jumptoqueue',
       's': 'modqueue.singleview',
       '?': 'modqueue.thismenu'
     }
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 64ccb1857..0d924767a 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -34,6 +34,8 @@ class Moderation extends Component {
     key('k', () => this.select(false));
     key('f', () => this.moderate(false));
     key('d', () => this.moderate(true));
+    this.getMenuItems()
+      .forEach((menuItem, idx) => key(`${idx + 1}`, () => this.selectQueue(menuItem.key)));
   }
 
   onClose = () => {
@@ -41,18 +43,25 @@ class Moderation extends Component {
   }
 
   nextQueue = () => {
-    const queueConfig = this.props.queueConfig;
     const activeTab = this.props.activeTab;
-    const assetId = this.props.data.variables.asset_id;
 
-    const menuItems = Object.keys(queueConfig).map((queue) => ({
-      key: queue
-    }));
+    const menuItems = this.getMenuItems();
 
     const activeTabIndex = menuItems.findIndex((item) => item.key === activeTab);
     const nextQueueIndex = (activeTabIndex === menuItems.length - 1) ? 0 : activeTabIndex + 1;
 
-    this.props.router.push(this.props.getModPath(menuItems[nextQueueIndex].key, assetId));
+    this.selectQueue(menuItems[nextQueueIndex].key);
+  }
+
+  selectQueue = (key) => {
+    const assetId = this.props.data.variables.asset_id;
+    this.props.router.push(this.props.getModPath(key, assetId));
+  }
+
+  getMenuItems = () => {
+    return Object.keys(this.props.queueConfig).map((queue) => ({
+      key: queue
+    }));
   }
 
   closeSearch = () => {
@@ -175,6 +184,8 @@ class Moderation extends Component {
     key.unbind('k');
     key.unbind('f');
     key.unbind('d');
+    this.getMenuItems()
+      .forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
   }
 
   componentWillReceiveProps(nextProps) {
diff --git a/locales/en.yml b/locales/en.yml
index 76a434dfc..44ac215af 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -296,6 +296,7 @@ en:
     show_shortcuts: "Show Shortcuts"
     singleview: "Toggle single comment edit view"
     thismenu: "Open this menu"
+    jumptoqueue: "Jump to specific queue"
     thousand: k
     try_these: "Try these"
     view_more_shortcuts: "View more shortcuts"

From 2d44f7abf47b0432a9729a3ab72576aec1426775 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 11:12:14 +0000
Subject: [PATCH 096/344] Spruce up README

---
 LICENSE   | 16 ++++++++++------
 README.md | 41 +++++++++++++++--------------------------
 2 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/LICENSE b/LICENSE
index 597d8fa73..52faa90b7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,11 +1,15 @@
-Copyright 2017 Mozilla Foundation
+    Copyright 2017 Mozilla Foundation
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+    either express or implied.
 
-See the License for the specific language governing permissions and limitations under the License.
+    See the License for the specific language governing permissions
+    and limitations under the License.
diff --git a/README.md b/README.md
index a089f040c..33ffc7947 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,35 @@
 # Talk
 
 [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 
-Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
+Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
 
 Built with <3 by The Coral Project & Mozilla.
 
-## Getting Started
+## Technical Documentation
 
-Check out our Docs: https://coralproject.github.io/talk/
+From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://coralproject.github.io/talk/) have everything you need to know.
+
+## Product Guide
+
+Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://coralproject.github.io/talk/how-talk-works).
 
 ## Relevant Links
 
-- Blog: https://blog.coralproject.net/
-- Community Forums: https://community.coralproject.net/
-- Community Guides for Journalism: https://guides.coralproject.net/
-- Project: https://coralproject.net/
-- Roadmap: https://www.pivotaltracker.com/n/projects/1863625
+- [Our Blog](https://blog.coralproject.net/)
+- [Community Forums](https://community.coralproject.net/)
+- [Community Guides for Journalism](https://guides.coralproject.net/)
+- [More About Us](https://coralproject.net/)
+- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 
 ## End-to-End Testing
 
-Talk uses [Nightwatch](http://nightwatchjs.org/) to write e2e tests. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at Browserstack.
-
+Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
 
 ![](/public/img/browserstack_logo.png)
 
 ## License
 
-    Copyright 2017 Mozilla Foundation
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing,
-    software distributed under the License is distributed on an
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
-    either express or implied.
-
-    See the License for the specific language governing permissions
-    and limitations under the License.
+Talk is licensed under the [Apache License v2.0](/LICENSE).

From 62660ed144e150a0fad05d081b8431b9f7ad115c Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 11:18:24 +0000
Subject: [PATCH 097/344] Fix header

---
 README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 33ffc7947..e9fe86e1b 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,5 @@
-# Talk
+# Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
 
-[![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
-[![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 
 Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
@@ -32,4 +30,4 @@ Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework.
 
 ## License
 
-Talk is licensed under the [Apache License v2.0](/LICENSE).
+Talk is released under the [Apache License, v2.0](/LICENSE).

From 4e5e989d22946f61596a22c171daaa94e05d4fb2 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 11:25:22 +0000
Subject: [PATCH 098/344] Update one-click directions

---
 README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e9fe86e1b..dfc5553b9 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,15 @@
 # Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
-
 Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
 
 Built with <3 by The Coral Project & Mozilla.
 
+## Try Talk
+
+You're one click away from trying Talk - all you need is a Heroku account and a few minutes of your time!
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
+
 ## Technical Documentation
 
 From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://coralproject.github.io/talk/) have everything you need to know.

From 3cdf2a3118cfbb1142ce20c5849d4b6dbcd9ed5b Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 11:31:13 +0000
Subject: [PATCH 099/344] Formatting

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dfc5553b9..f8c959ad6 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
+# Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) &middot; [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8) &middot; [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 
 Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
 

From 5c033dbfdfb75b9e39782cab40416f16d2e258d7 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 11:40:33 +0000
Subject: [PATCH 100/344] Tweaks

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f8c959ad6..b335887bf 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@ Online comments are broken. Our open-source commenting platform, Talk, rethinks
 
 Built with <3 by The Coral Project & Mozilla.
 
-## Try Talk
+## Try Talk!
 
-You're one click away from trying Talk - all you need is a Heroku account and a few minutes of your time!
+You're just one click away from trying Talk - all you need is a Heroku account and a few minutes of your time.
 
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 

From 1578316363b50bab795389f99b8b14da74f5fbc6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 14:25:58 +0100
Subject: [PATCH 101/344] Retry browsers when failed, print summary

---
 scripts/e2e-ci.sh | 60 +++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index a7cbbc23a..cc0146c4f 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -3,22 +3,53 @@
 CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
 CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
+MAX_RETRIES=1
+
+# Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
+BROWSERS="chrome firefox ie edge" #safari
+
 if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
 
+  # List of failed browsers
+  failedBrowsers=
+
+  # List of succeeded browsers
+  succeededBrowsers=
+
   exitCode=0
 
   browserstack() {
-    echo "-- Start e2e for $1 --"
-    REPORTS_FOLDER="$CIRCLE_TEST_REPORTS/$1" yarn e2e-browserstack -- --env "$1"
+
+    # Current number of tries.
+    try=${2:-0}
+
+    echo "-- Start e2e for $1 #$try --"
+
+    REPORTS_FOLDER="$CIRCLE_TEST_REPORTS/$1" yarn e2e-browserstack --env "$1"
 
     # Determine exit code.
     result=$?
-    if [ "$result" -gt "0" ]
-    then
+    if [ "$result" -gt "0" ]; then
       echo "-- Failed e2e for $1 --"
+
+      # Try again of MAX_RETRIES is not reached.
+      if [ "$try" -lt $MAX_RETRIES ]; then
+        let try=try+1
+        browserstack "$1" "$try"
+        return
+      fi
+
+      # Failed, add to list of failed browsers.
+      failedBrowsers="$failedBrowsers $1"
+
+      # Remember exit code.
       exitCode=$result
     else
       echo "-- Success e2e for $1 --"
+
+      # Succeeded, add to list of succeeded browsers.
+      succeededBrowsers="$succeededBrowsers $1"
+      eval "browser_${1}_succeeded_at=$try"
     fi
 
     # Sleep a bit to let browserstack-local to close properly.
@@ -26,14 +57,23 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
   }
 
   # Test using browserstack.
-  browserstack chrome
-  browserstack firefox
-  browserstack ie
-  browserstack edge
+  for browser in $BROWSERS
+  do
+    browserstack "$browser"
+  done
 
-  # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
-  # browserstack safari
 
+  # Print information about succeeded browsers.
+  for x in $succeededBrowsers
+  do
+    echo "Succeeded $x at try #$(eval "echo \$browser_${x}_succeeded_at")"
+  done
+
+  # Print information about failed browsers.
+  for x in $failedBrowsers
+  do
+    echo "Failed $x"
+  done
   exit $exitCode
 else
   # When browserstack is not available test locally using chrome headless.

From 42f0d76d98513264eff41a33a2fc6cb6563d132c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 14:58:25 +0100
Subject: [PATCH 102/344] Add retry number to console outpu

---
 scripts/e2e-ci.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index cc0146c4f..7fe912f95 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -30,7 +30,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     # Determine exit code.
     result=$?
     if [ "$result" -gt "0" ]; then
-      echo "-- Failed e2e for $1 --"
+      echo "-- Failed e2e for $1 #$try --"
 
       # Try again of MAX_RETRIES is not reached.
       if [ "$try" -lt $MAX_RETRIES ]; then
@@ -45,7 +45,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
       # Remember exit code.
       exitCode=$result
     else
-      echo "-- Success e2e for $1 --"
+      echo "-- Success e2e for $1 #$try --"
 
       # Succeeded, add to list of succeeded browsers.
       succeededBrowsers="$succeededBrowsers $1"

From 7f442ce91e5524b2a2b03aacd145479a4a4f2471 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 14:58:40 +0100
Subject: [PATCH 103/344] Let MAX_RETRIES be customizable

---
 scripts/e2e-ci.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 7fe912f95..f0eae055e 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -3,7 +3,8 @@
 CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
 CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
-MAX_RETRIES=1
+# Amount of retries before failure.
+MAX_RETRIES=${MAX_RETRIES:-1}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 BROWSERS="chrome firefox ie edge" #safari
@@ -33,7 +34,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
       echo "-- Failed e2e for $1 #$try --"
 
       # Try again of MAX_RETRIES is not reached.
-      if [ "$try" -lt $MAX_RETRIES ]; then
+      if [ "$try" -lt "$MAX_RETRIES" ]; then
         let try=try+1
         browserstack "$1" "$try"
         return

From 93363a06504ecde1ca8c7bfd1fadccef99cb32c5 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 14:27:38 +0000
Subject: [PATCH 104/344] Remove indenting

---
 LICENSE | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/LICENSE b/LICENSE
index 52faa90b7..e0a687532 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,15 +1,15 @@
-    Copyright 2017 Mozilla Foundation
+Copyright 2017 Mozilla Foundation
 
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-    http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-    Unless required by applicable law or agreed to in writing,
-    software distributed under the License is distributed on an
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
-    either express or implied.
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.
 
-    See the License for the specific language governing permissions
-    and limitations under the License.
+See the License for the specific language governing permissions
+and limitations under the License.

From 9ba8cbcbe179364f4c6619e96b8b2984e4e149b5 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 31 Oct 2017 14:30:32 +0000
Subject: [PATCH 105/344] Fix logo link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b335887bf..89474bf6d 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ Learn more about Talk, including a deep dive into features for commenters and mo
 
 Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
 
-![](/public/img/browserstack_logo.png)
+[![Browserstack](/public/img/browserstack_logo.png)](https://browserstack.com)
 
 ## License
 

From c31e6347d09ec977b313ddf35483811db4a546c8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 16:29:32 +0100
Subject: [PATCH 106/344] Sleep between retries

---
 scripts/e2e-ci.sh | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index f0eae055e..66554cf74 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -6,6 +6,9 @@ CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 # Amount of retries before failure.
 MAX_RETRIES=${MAX_RETRIES:-1}
 
+# Amount of seconds between tests.
+SLEEP_BETWEEN_TESTS=${SLEEP_BETWEEN_TESTS:-1}
+
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 BROWSERS="chrome firefox ie edge" #safari
 
@@ -36,6 +39,10 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
       # Try again of MAX_RETRIES is not reached.
       if [ "$try" -lt "$MAX_RETRIES" ]; then
         let try=try+1
+
+        # Sleep a bit to let browserstack-local to close properly.
+        sleep "$SLEEP_BETWEEN_TESTS"
+
         browserstack "$1" "$try"
         return
       fi
@@ -54,7 +61,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     fi
 
     # Sleep a bit to let browserstack-local to close properly.
-    sleep 2
+    sleep "$SLEEP_BETWEEN_TESTS"
   }
 
   # Test using browserstack.

From 96b44b2b99e42ac71d9bea1c38bbd2e0b96da3d3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 16:39:41 +0100
Subject: [PATCH 107/344] Prefix env variables

---
 scripts/e2e-ci.sh | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 66554cf74..6d8514797 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -4,10 +4,10 @@ CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
 CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
 # Amount of retries before failure.
-MAX_RETRIES=${MAX_RETRIES:-1}
+E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
 # Amount of seconds between tests.
-SLEEP_BETWEEN_TESTS=${SLEEP_BETWEEN_TESTS:-1}
+E2E_SLEEP_BETWEEN_TESTS=${E2E_SLEEP_BETWEEN_TESTS:-1}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 BROWSERS="chrome firefox ie edge" #safari
@@ -36,12 +36,12 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     if [ "$result" -gt "0" ]; then
       echo "-- Failed e2e for $1 #$try --"
 
-      # Try again of MAX_RETRIES is not reached.
-      if [ "$try" -lt "$MAX_RETRIES" ]; then
+      # Try again of E2E_MAX_RETRIES is not reached.
+      if [ "$try" -lt "$E2E_MAX_RETRIES" ]; then
         let try=try+1
 
         # Sleep a bit to let browserstack-local to close properly.
-        sleep "$SLEEP_BETWEEN_TESTS"
+        sleep "$E2E_SLEEP_BETWEEN_TESTS"
 
         browserstack "$1" "$try"
         return
@@ -61,7 +61,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     fi
 
     # Sleep a bit to let browserstack-local to close properly.
-    sleep "$SLEEP_BETWEEN_TESTS"
+    sleep "$E2E_SLEEP_BETWEEN_TESTS"
   }
 
   # Test using browserstack.

From d20666adb929874c70368dab0bce18d62ed313b3 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 31 Oct 2017 10:00:47 -0600
Subject: [PATCH 108/344] Update users.js

Prefix added by mailer service
---
 services/users.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/users.js b/services/users.js
index 2e5c66d40..e0f7d1599 100644
--- a/services/users.js
+++ b/services/users.js
@@ -420,7 +420,7 @@ module.exports = class UsersService {
             locals: {                            // specifies the template locals.
               body: 'In accordance with The Coral Project’s community guidelines, your account has been banned. You are now longer allowed to comment, flag or engage with our community.'
             },
-            subject: '[Talk] Your account has been banned',
+            subject: 'Your account has been banned',
             to: localProfile.id  // This only works if the user has registered via e-mail.
             // We may want a standard way to access a user's e-mail address in the future
           };

From 8821c0aa5c64942258c12466608bd7a24f3b49e3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 17:33:44 +0100
Subject: [PATCH 109/344] Typos

---
 scripts/e2e-ci.sh | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 6d8514797..1ae851360 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -14,10 +14,10 @@ BROWSERS="chrome firefox ie edge" #safari
 
 if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
 
-  # List of failed browsers
+  # List of failed browsers.
   failedBrowsers=
 
-  # List of succeeded browsers
+  # List of succeeded browsers.
   succeededBrowsers=
 
   exitCode=0
@@ -36,11 +36,11 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
     if [ "$result" -gt "0" ]; then
       echo "-- Failed e2e for $1 #$try --"
 
-      # Try again of E2E_MAX_RETRIES is not reached.
+      # Try again until E2E_MAX_RETRIES is reached.
       if [ "$try" -lt "$E2E_MAX_RETRIES" ]; then
         let try=try+1
 
-        # Sleep a bit to let browserstack-local to close properly.
+        # Sleep a bit to let browserstack-local close properly.
         sleep "$E2E_SLEEP_BETWEEN_TESTS"
 
         browserstack "$1" "$try"
@@ -60,7 +60,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
       eval "browser_${1}_succeeded_at=$try"
     fi
 
-    # Sleep a bit to let browserstack-local to close properly.
+    # Sleep a bit to let browserstack-local close properly.
     sleep "$E2E_SLEEP_BETWEEN_TESTS"
   }
 

From bfb2da519fbb01fd20ece50b737b537f02617646 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 31 Oct 2017 17:34:28 +0100
Subject: [PATCH 110/344] Exit code can be negative

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 1ae851360..e72d1a6ce 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -33,7 +33,7 @@ if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
 
     # Determine exit code.
     result=$?
-    if [ "$result" -gt "0" ]; then
+    if [ "$result" -ne "0" ]; then
       echo "-- Failed e2e for $1 #$try --"
 
       # Try again until E2E_MAX_RETRIES is reached.

From 886a468993c5031b5d36aea8805dc11ef6f218bf Mon Sep 17 00:00:00 2001
From: PepeFranco <gfranco@occ.com.mx>
Date: Tue, 31 Oct 2017 12:56:32 -0600
Subject: [PATCH 111/344] Reverting comment changes

---
 graph/mutators/action.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index a5bf16051..cc1fc0030 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -41,10 +41,7 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
   }
 
   if (comment) {
-    let user = await UsersService.findById(comment.author_id);
-    if(!user.roles){
       pubsub.publish('commentFlagged', comment);
-    }
   }
 
   return action;

From f70ccf641aa39283a8c614e905d48ece41239762 Mon Sep 17 00:00:00 2001
From: PepeFranco <gfranco@occ.com.mx>
Date: Tue, 31 Oct 2017 13:29:44 -0600
Subject: [PATCH 112/344] Fixed lint issue

---
 graph/mutators/action.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index cc1fc0030..50d62225a 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -41,7 +41,7 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
   }
 
   if (comment) {
-      pubsub.publish('commentFlagged', comment);
+    pubsub.publish('commentFlagged', comment);
   }
 
   return action;

From 21f6caa9424185596a1fa5860981972f22991b95 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Tue, 31 Oct 2017 16:48:40 -0700
Subject: [PATCH 113/344] cleaner method chain per review

---
 client/coral-admin/src/components/CommentLabels.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
index 630f0c02d..bff4f575a 100644
--- a/client/coral-admin/src/components/CommentLabels.js
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -14,9 +14,11 @@ function isUserFlagged(actions) {
 
 function getUserFlaggedType(actions) {
   return actions
-    .filter((action) => action.__typename === 'FlagAction' && action.user)
-    .map((action) => action.user.roles.some((role) => staffRoles.includes(role)))
-    .some((staff) => staff) ? 'Staff' : 'User';
+    .some((action) =>
+      action.__typename === 'FlagAction' &&
+      action.user &&
+      action.user.roles.some((role) => staffRoles.includes(role))
+    ) ? 'Staff' : 'User';
 }
 
 function hasSuspectedWords(actions) {

From 903e70d641edb1038912e22c26525a7a56b35cf1 Mon Sep 17 00:00:00 2001
From: blackcathacker <douglas.pace@gmail.com>
Date: Tue, 31 Oct 2017 17:07:32 -0700
Subject: [PATCH 114/344] updates per review

---
 .../src/components/ModerationKeysModal.js     | 51 ++++++++++---------
 .../Moderation/components/Moderation.js       | 13 ++---
 locales/en.yml                                |  2 +-
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 6f53bf7fa..5f43daf09 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -4,35 +4,38 @@ import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 import t from 'coral-framework/services/i18n';
 
-const shortcuts = [
-  {
-    title: 'modqueue.navigation',
-    shortcuts: {
-      'j': 'modqueue.next_comment',
-      'k': 'modqueue.prev_comment',
-      'ctrl+f': 'modqueue.toggle_search',
-      't': 'modqueue.next_queue',
-      '1...5': 'modqueue.jumptoqueue',
-      's': 'modqueue.singleview',
-      '?': 'modqueue.thismenu'
-    }
-  },
-  {
-    title: 'modqueue.actions',
-    shortcuts: {
-      'd': 'modqueue.approve',
-      'f': 'modqueue.reject'
-    }
-  }
-];
-
 export default class ModerationKeysModal extends React.Component {
 
   static propTypes = {
     open: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     hideShortcutsNote: PropTypes.func.isRequired,
-    shortcutsNoteVisible: PropTypes.string.isRequired
+    shortcutsNoteVisible: PropTypes.string.isRequired,
+    queueCount: PropTypes.number.isRequired
+  }
+
+  buildShortcuts = () => {
+    return [
+      {
+        title: 'modqueue.navigation',
+        shortcuts: {
+          'j': 'modqueue.next_comment',
+          'k': 'modqueue.prev_comment',
+          'ctrl+f': 'modqueue.toggle_search',
+          't': 'modqueue.next_queue',
+          [`1...${this.props.queueCount}`]: 'modqueue.jump_to_queue',
+          's': 'modqueue.singleview',
+          '?': 'modqueue.thismenu'
+        }
+      },
+      {
+        title: 'modqueue.actions',
+        shortcuts: {
+          'd': 'modqueue.approve',
+          'f': 'modqueue.reject'
+        }
+      }
+    ];
   }
 
   render () {
@@ -52,7 +55,7 @@ export default class ModerationKeysModal extends React.Component {
         <Modal open={open} onClose={onClose}>
           <h3>{t('modqueue.shortcuts')}</h3>
           <div className={styles.container}>
-            {shortcuts.map((shortcut, i) => (
+            {this.buildShortcuts().map((shortcut, i) => (
               <table className={styles.table} key={i}>
                 <thead>
                   <tr>
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 0d924767a..392db36e3 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -35,7 +35,7 @@ class Moderation extends Component {
     key('f', () => this.moderate(false));
     key('d', () => this.moderate(true));
     this.getMenuItems()
-      .forEach((menuItem, idx) => key(`${idx + 1}`, () => this.selectQueue(menuItem.key)));
+      .forEach((menuItem, idx) => key(`${idx + 1}`, () => this.selectQueue(menuItem)));
   }
 
   onClose = () => {
@@ -47,10 +47,10 @@ class Moderation extends Component {
 
     const menuItems = this.getMenuItems();
 
-    const activeTabIndex = menuItems.findIndex((item) => item.key === activeTab);
+    const activeTabIndex = menuItems.findIndex((item) => item === activeTab);
     const nextQueueIndex = (activeTabIndex === menuItems.length - 1) ? 0 : activeTabIndex + 1;
 
-    this.selectQueue(menuItems[nextQueueIndex].key);
+    this.selectQueue(menuItems[nextQueueIndex]);
   }
 
   selectQueue = (key) => {
@@ -58,11 +58,7 @@ class Moderation extends Component {
     this.props.router.push(this.props.getModPath(key, assetId));
   }
 
-  getMenuItems = () => {
-    return Object.keys(this.props.queueConfig).map((queue) => ({
-      key: queue
-    }));
-  }
+  getMenuItems = () => Object.keys(this.props.queueConfig);
 
   closeSearch = () => {
     const {toggleStorySearch} = this.props;
@@ -287,6 +283,7 @@ class Moderation extends Component {
             shortcutsNoteVisible={moderation.shortcutsNoteVisible}
             open={moderation.modalOpen}
             onClose={this.onClose}
+            queueCount={this.getMenuItems().length}
           />
         </div>
         <StorySearch
diff --git a/locales/en.yml b/locales/en.yml
index 44ac215af..eb1c885bf 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -296,7 +296,7 @@ en:
     show_shortcuts: "Show Shortcuts"
     singleview: "Toggle single comment edit view"
     thismenu: "Open this menu"
-    jumptoqueue: "Jump to specific queue"
+    jump_to_queue: "Jump to specific queue"
     thousand: k
     try_these: "Try these"
     view_more_shortcuts: "View more shortcuts"

From ce0b63fe75ef3c6848597ec3ddcb856e7187a342 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 1 Nov 2017 13:29:04 +0100
Subject: [PATCH 115/344] Use isStaff instead

---
 graph/mutators/action.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 50d62225a..93806ced9 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -35,7 +35,7 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
 
     // Set the user as pending if it was a user flag and user has no Admin, Staff or Moderation roles
     let user = await UsersService.findById(item_id);
-    if(!user.roles){
+    if(!user.isStaff()){
       await UsersService.setStatus(item_id, 'PENDING');
     }
   }

From 2131638f485358854e3553271bdc9b286f3ad5b1 Mon Sep 17 00:00:00 2001
From: Devon Jue <djue129@gmail.com>
Date: Thu, 2 Nov 2017 00:12:48 -0700
Subject: [PATCH 116/344] undo reject comment on stream

---
 client/coral-embed-stream/src/components/Comment.js         | 5 ++++-
 .../coral-embed-stream/src/components/CommentTombstone.css  | 6 ++++++
 .../coral-embed-stream/src/components/CommentTombstone.js   | 4 ++++
 client/coral-embed-stream/src/containers/Comment.js         | 2 ++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 0d9323687..1f72a2738 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -182,6 +182,7 @@ export default class Comment extends React.Component {
         editableUntil: PropTypes.string,
       })
     }).isRequired,
+    setCommentStatus: PropTypes.func.isRequired,
 
     // edit a comment, passed (id, asset_id, { body })
     editComment: PropTypes.func,
@@ -343,7 +344,9 @@ export default class Comment extends React.Component {
     } = this.props;
 
     if (!highlighted && this.commentIsRejected(comment)) {
-      return <CommentTombstone action='reject' />;
+      return <CommentTombstone action='reject' onUndo={() => {
+        this.props.setCommentStatus({commentId: comment.id, status: 'NONE'});
+      }}/>;
     }
 
     if (this.commentIsIgnored(comment)) {
diff --git a/client/coral-embed-stream/src/components/CommentTombstone.css b/client/coral-embed-stream/src/components/CommentTombstone.css
index 6119a5cd8..a8caeec7a 100644
--- a/client/coral-embed-stream/src/components/CommentTombstone.css
+++ b/client/coral-embed-stream/src/components/CommentTombstone.css
@@ -3,4 +3,10 @@
   text-align: center;
   padding: 1em;
   color: #3E4F71;
+}
+
+.undo {
+  cursor: pointer;
+  text-decoration: underline;
+  margin-left: 5px;
 }
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js
index cc3362563..4fb8eaaf6 100644
--- a/client/coral-embed-stream/src/components/CommentTombstone.js
+++ b/client/coral-embed-stream/src/components/CommentTombstone.js
@@ -24,6 +24,9 @@ class CommentTombstone extends React.Component {
         <hr aria-hidden={true} />
         <p className={styles.commentTombstone}>
           {this.getCopy()}
+          {this.props.action === 'reject' &&
+            <span className={styles.undo} onClick={this.props.onUndo}>Undo</span>
+          }
         </p>
       </div>
     );
@@ -32,6 +35,7 @@ class CommentTombstone extends React.Component {
 
 CommentTombstone.propTypes = {
   action: PropTypes.string,
+  onUndo: PropTypes.func,
 };
 
 export default CommentTombstone;
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 694314bd7..1bdca0e1e 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
 import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {THREADING_LEVEL} from '../constants/stream';
 import hoistStatics from 'recompose/hoistStatics';
 import {nest} from '../graphql/utils';
@@ -130,6 +131,7 @@ const withCommentFragments = withFragments({
 const enhance = compose(
   withAnimateEnter,
   withCommentFragments,
+  withSetCommentStatus,
 );
 
 export default enhance(Comment);

From d51b6b31f666291fdd66bf5b54fbe418d5019016 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Nov 2017 23:53:19 -0300
Subject: [PATCH 117/344] Adding missing classes and proptypes

---
 .../client/components/ApproveCommentAction.js       | 12 ++++++++++--
 .../client/components/BanUserAction.js              | 11 +++++++++--
 .../client/components/Menu.js                       | 10 +++++++++-
 .../client/components/ModerationActions.js          | 13 ++++++++++++-
 .../client/components/RejectCommentAction.js        |  9 ++++++++-
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index f683acae6..125a3589e 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
@@ -6,16 +7,23 @@ import cn from 'classnames';
 
 const isApproved = (status) => (status === 'ACCEPTED');
 
-export default ({approveComment, comment: {status}}) => (
+const ApproveCommentAction = ({approveComment, comment: {status}}) => (
   isApproved(status) ? (
     <span className={styles.approved}>
       <Icon name="check_circle" className={styles.icon} />
       {t('talk-plugin-moderation-actions.approved_comment')}
     </span>
   ) : (
-    <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
+    <button className={cn(styles.button, 'talk-plugin-moderation-actions-approve')} onClick={approveComment}>
       <Icon name="done" className={styles.icon} />
       {t('talk-plugin-moderation-actions.approve_comment')}
     </button>
   )
 );
+
+ApproveCommentAction.propTypes = {
+  approveComment: PropTypes.func,
+  comment: PropTypes.object,
+};
+
+export default ApproveCommentAction;
\ No newline at end of file
diff --git a/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
index 36f9b1489..75956a0b6 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
@@ -1,14 +1,21 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-export default ({onBanUser}) => (
+const BanUserAction = ({onBanUser}) => (
   <button 
-    className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
+    className={cn(styles.button, 'talk-plugin-moderation-actions-ban')}
     onClick={onBanUser} >
     <Icon name="block" className={styles.icon} />
     {t('talk-plugin-moderation-actions.ban_user')}
   </button>
 );
+
+BanUserAction.propTypes = {
+  onBanUser: PropTypes.func,
+};
+
+export default BanUserAction;
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Menu.js b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
index 470349b69..29120423e 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Menu.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './Menu.css';
 import {t} from 'plugin-api/beta/client/services';
 
-export default ({className = '', children}) => (
+const Menu = ({className = '', children}) => (
   <div className={cn(styles.menu, className)}>
     <h3 className={styles.headline}>
       {t('talk-plugin-moderation-actions.moderation_actions')}
@@ -11,3 +12,10 @@ export default ({className = '', children}) => (
     {children}
   </div>
 );
+
+Menu.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Menu;
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index fa12500de..e27626298 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Menu from './Menu';
 import styles from './ModerationActions.css';
@@ -21,7 +22,7 @@ export default class ModerationActions extends React.Component {
               <Icon name="keyboard_arrow_down" className={styles.icon} />}
           </span>
           {menuVisible && (
-            <Menu>
+            <Menu className="talk-plugin-modetarion-actions-menu">
               <Slot
                 className="talk-plugin-modetarion-actions-slot"
                 fill="moderationActions"
@@ -38,3 +39,13 @@ export default class ModerationActions extends React.Component {
     );
   }
 }
+
+ModerationActions.propTypes = {
+  comment: PropTypes.object,
+  root: PropTypes.object,
+  asset: PropTypes.object,
+  data: PropTypes.object,
+  menuVisible: PropTypes.bool,
+  toogleMenu: PropTypes.func,
+  hideMenu: PropTypes.func,
+};
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
index 827820a7a..48a31c864 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
@@ -1,12 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default ({rejectComment}) => (
+const RejectCommentAction = ({rejectComment}) => (
   <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={rejectComment}>
     <Icon name="clear" className={styles.icon} />
     {t('talk-plugin-moderation-actions.reject_comment')}
   </button>
 );
+
+RejectCommentAction.propTypes = {
+  rejectComment: PropTypes.func,
+};
+
+export default RejectCommentAction;

From 918ad915b8c6ee5ad3d67d0a74be26c301ba1264 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Nov 2017 23:53:33 -0300
Subject: [PATCH 118/344] Tests

---
 test/e2e/page_objects/embedStream.js          |  8 ++++
 test/e2e/specs/04_banUser.js                  | 37 +++++++++++++++++++
 .../{04_userStatus.js => 05_userStatus.js}    |  1 -
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/specs/04_banUser.js
 rename test/e2e/specs/{04_userStatus.js => 05_userStatus.js} (99%)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 85a0480da..b99faf341 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -59,6 +59,14 @@ module.exports = {
             popUpText: '.talk-plugin-flags-popup-text',
           }
         },
+        mod: {
+          selector: '.talk-plugin-moderation-actions',
+          elements: {
+            arrow: '.talk-plugin-moderation-actions-arrow',
+            menu: '.talk-plugin-modetarion-actions-menu',
+            banButton: 'talk-plugin-moderation-actions-ban',
+          },
+        },
         profile: {
           selector: '.talk-embed-stream-profile-tab-pane',
           elements: {
diff --git a/test/e2e/specs/04_banUser.js b/test/e2e/specs/04_banUser.js
new file mode 100644
index 000000000..598460e30
--- /dev/null
+++ b/test/e2e/specs/04_banUser.js
@@ -0,0 +1,37 @@
+module.exports = {
+  'admin logs in': (client) => {
+    const adminPage = client.page.admin();
+    const {testData: {admin}} = client.globals;
+
+    adminPage
+      .navigate()
+      .waitForElementVisible('@loginLayout')
+      .waitForElementVisible('@signInForm')
+      .setValue('@emailInput', admin.email)
+      .setValue('@passwordInput', admin.password)
+      .waitForElementVisible('@signInButton')
+      .click('@signInButton');
+
+    client.pause(3000);
+    
+    adminPage
+      .waitForElementVisible('@moderationContainer');
+  },
+  'navigate to the embed stream': (client) => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .getEmbedSection();
+  },
+  'ban': (client) => {
+    const modSection = client.page.embedStream().section.embed.section.mod;
+
+    modSection
+      .waitForElementVisible('@arrow')
+      .click('@arrow')
+      .waitForElementVisible('@menu')
+      .waitForElementVisible('@banButton')
+      .click('@banButton');
+  }
+};
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/05_userStatus.js
similarity index 99%
rename from test/e2e/specs/04_userStatus.js
rename to test/e2e/specs/05_userStatus.js
index 32bf6b72a..46a87a2d1 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/05_userStatus.js
@@ -125,7 +125,6 @@ module.exports = {
     embed
       .waitForElementVisible('@restrictedMessageBox');
   },
-
   'user picks another username': (client) => {
     const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();

From 0fc810a7b1c8e2fa13a607f13fc53678bf92902a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 16:21:09 +0100
Subject: [PATCH 119/344] e2e v2

---
 nightwatch-browserstack.conf.js |   1 +
 nightwatch.conf.js              |   2 +
 package.json                    |   4 +-
 scripts/e2e-browserstack.js     |  51 --------
 scripts/e2e-ci.sh               |  87 ++------------
 scripts/e2e.js                  | 201 ++++++++++++++++++++++++++++++++
 test/e2e/globals.js             |   2 -
 7 files changed, 212 insertions(+), 136 deletions(-)
 delete mode 100755 scripts/e2e-browserstack.js
 create mode 100755 scripts/e2e.js

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index d79f6917a..09900c321 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -22,6 +22,7 @@ const nightwatch_config = {
         'browserstack.user': process.env.BROWSERSTACK_USER || 'coralproject2',
         'browserstack.key': process.env.BROWSERSTACK_KEY,
         'browserstack.local': true,
+        'browserstack.localIdentifier': process.env.BROWSERSTACK_LOCAL_IDENTIFIER ? process.env.BROWSERSTACK_LOCAL_IDENTIFIER : undefined,
         'browserstack.debug': true,
 
         // Disable this, as it makes bs slow and brittle.
diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index 97eee0e81..e04cc04a8 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -40,6 +40,8 @@ module.exports = {
         path: process.env.REPORTS_FOLDER || './test/e2e/reports',
       },
     },
+    'chrome': {
+    },
     'chrome-headless': {
       desiredCapabilities: {
         chromeOptions : {
diff --git a/package.json b/package.json
index 897efc819..69093c0c5 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,7 @@
     "lint-fix": "yarn lint --fix",
     "jest-watch": "TEST_MODE=unit NODE_ENV=test jest --watch",
     "e2e-ci": "./scripts/e2e-ci.sh",
-    "e2e-browserstack": "NODE_ENV=test ./scripts/e2e-browserstack.js --config nightwatch-browserstack.conf.js",
-    "pree2e": "selenium-standalone install",
-    "e2e": "NODE_ENV=test nightwatch",
+    "e2e": "./scripts/e2e.js",
     "test": "TEST_MODE=unit NODE_ENV=test jest && TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
     "test-cover": "TEST_MODE=unit NODE_ENV=test istanbul cover _mocha --report text --check-coverage -- -R spec",
     "heroku-postbuild": "./bin/cli plugins reconcile && yarn build",
diff --git a/scripts/e2e-browserstack.js b/scripts/e2e-browserstack.js
deleted file mode 100755
index 103cd08fe..000000000
--- a/scripts/e2e-browserstack.js
+++ /dev/null
@@ -1,51 +0,0 @@
-#!/usr/bin/env node
-
-const Nightwatch = require('nightwatch');
-const browserstack = require('browserstack-local');
-const {onshutdown} = require('../bin/util');
-
-async function start() {
-  try {
-    const bs_local = new browserstack.Local();
-    process.mainModule.filename = './node_modules/.bin/nightwatch';
-
-    // Code to start browserstack local before start of test
-    console.log('Connecting local');
-    Nightwatch.bs_local = bs_local;
-
-    bs_local.start({
-      'key': process.env.BROWSERSTACK_KEY,
-      'logFile': './test/e2e/bslocal.log'
-    }, function(error) {
-      if (error) {
-        console.error(error);
-        throw error;
-      }
-
-      console.log('Connected. Now testing...');
-      Nightwatch.cli(function(argv) {
-        Nightwatch.CliRunner(argv)
-          .setup(null, function(){
-
-            // Code to stop browserstack local after end of parallel test
-            bs_local.stop(function(){});
-          })
-          .runTests(function(){
-
-            // Code to stop browserstack local after end of single test
-            bs_local.stop(function(){});
-          });
-      });
-    });
-
-    onshutdown([
-      () => bs_local.stop(function(){}),
-    ]);
-  } catch (ex) {
-    console.log('There was an error while starting the test runner:\n\n');
-    process.stderr.write(`${ex.stack}\n`);
-    process.exit(2);
-  }
-}
-
-start();
diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index e72d1a6ce..5923ff682 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,92 +1,19 @@
 #!/bin/bash
 
-CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
+REPORTS_FOLDER=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
 CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
-# Amount of seconds between tests.
-E2E_SLEEP_BETWEEN_TESTS=${E2E_SLEEP_BETWEEN_TESTS:-1}
-
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
-BROWSERS="chrome firefox ie edge" #safari
+BROWSERS="chrome,firefox,ie,edge" #safari
 
-if [[ "${CIRCLE_BRANCH}" == "master" ]]; then
-
-  # List of failed browsers.
-  failedBrowsers=
-
-  # List of succeeded browsers.
-  succeededBrowsers=
-
-  exitCode=0
-
-  browserstack() {
-
-    # Current number of tries.
-    try=${2:-0}
-
-    echo "-- Start e2e for $1 #$try --"
-
-    REPORTS_FOLDER="$CIRCLE_TEST_REPORTS/$1" yarn e2e-browserstack --env "$1"
-
-    # Determine exit code.
-    result=$?
-    if [ "$result" -ne "0" ]; then
-      echo "-- Failed e2e for $1 #$try --"
-
-      # Try again until E2E_MAX_RETRIES is reached.
-      if [ "$try" -lt "$E2E_MAX_RETRIES" ]; then
-        let try=try+1
-
-        # Sleep a bit to let browserstack-local close properly.
-        sleep "$E2E_SLEEP_BETWEEN_TESTS"
-
-        browserstack "$1" "$try"
-        return
-      fi
-
-      # Failed, add to list of failed browsers.
-      failedBrowsers="$failedBrowsers $1"
-
-      # Remember exit code.
-      exitCode=$result
-    else
-      echo "-- Success e2e for $1 #$try --"
-
-      # Succeeded, add to list of succeeded browsers.
-      succeededBrowsers="$succeededBrowsers $1"
-      eval "browser_${1}_succeeded_at=$try"
-    fi
-
-    # Sleep a bit to let browserstack-local close properly.
-    sleep "$E2E_SLEEP_BETWEEN_TESTS"
-  }
-
-  # Test using browserstack.
-  for browser in $BROWSERS
-  do
-    browserstack "$browser"
-  done
-
-
-  # Print information about succeeded browsers.
-  for x in $succeededBrowsers
-  do
-    echo "Succeeded $x at try #$(eval "echo \$browser_${x}_succeeded_at")"
-  done
-
-  # Print information about failed browsers.
-  for x in $failedBrowsers
-  do
-    echo "Failed $x"
-  done
-  exit $exitCode
+if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
+  echo Testing on browserstack
+  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --browsers $BROWSERS
 else
   # When browserstack is not available test locally using chrome headless.
-  REPORTS_FOLDER="$CIRCLE_TEST_REPORTS/chrome" yarn e2e -- --env chrome-headless
-
-  # Will exit with status of last command.
-  exit $?
+  echo Testing locally
+  yarn e2e --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --headless
 fi
diff --git a/scripts/e2e.js b/scripts/e2e.js
new file mode 100755
index 000000000..6cf97b2a6
--- /dev/null
+++ b/scripts/e2e.js
@@ -0,0 +1,201 @@
+#!/usr/bin/env node
+
+process.env['NODE_ENV'] = 'test';
+
+const browserstack = require('browserstack-local');
+const {onshutdown, shutdown} = require('../bin/util');
+const program = require('commander');
+const Table = require('cli-table');
+const serve = require('../serve');
+const childProcess = require('child_process');
+const uuid = require('uuid').v4;
+
+// Make things colorful!
+require('colors');
+
+function startTunnel(key, localIdentifier) {
+  const bs_local = new browserstack.Local();
+
+  // Code to start browserstack local before start of test
+  console.log('Connecting local');
+
+  return new Promise((resolve, reject) => {
+    bs_local.start({
+      key,
+      logFile: './test/e2e/bslocal.log',
+      verbose: 'true',
+      force: 'true',
+      onlyAutomate: 'true',
+      localIdentifier,
+    }, (error) => {
+      if (error) {
+        reject(error);
+      }
+      resolve();
+    });
+    onshutdown([
+      () => bs_local.stop(function(){}),
+    ]);
+  });
+}
+
+function seleniumInstall() {
+  return new Promise((resolve, reject) => {
+    try {
+      const nw = childProcess.spawn(
+        './node_modules/.bin/selenium-standalone',
+        ['install'],
+        {
+          stdio: 'inherit',
+        });
+      nw.on('close', (code) => {
+        code === 0 ? resolve() : reject();
+      });
+    }
+    catch (ex) {
+      reject(ex);
+    }
+  });
+}
+
+function nightwatch(env, config, reportsFolder, browserstack) {
+  return new Promise((resolve, reject) => {
+    try {
+      const nw = childProcess.spawn(
+        './node_modules/.bin/nightwatch',
+        ['--config', config, '--env', env],
+        {
+          env: Object.assign({}, process.env, {
+            'BROWSERSTACK_LOCAL_IDENTIFIER': browserstack.localIdentifier,
+            'BROWSERSTACK_KEY': browserstack.key,
+            'BROWSERSTACK_USER': browserstack.user,
+            'REPORTS_FOLDER': `${reportsFolder}/${env}`,
+          }),
+          stdio: 'inherit',
+        });
+      nw.on('close', (code) => {
+        code === 0 ? resolve() : reject();
+      });
+    }
+    catch (ex) {
+      reject(ex);
+    }
+  });
+}
+
+function printResults(browsers, succeeded, retries) {
+  let table = new Table({
+    head: [
+      'Browser'.cyan,
+      'Status'.cyan,
+      'Retries'.cyan,
+    ]
+  });
+
+  for (let browser of browsers) {
+    const wasSuccessful = browser in succeeded;
+    table.push([
+      browser,
+      wasSuccessful ? 'success'.green : 'failed'.red,
+      wasSuccessful ? succeeded[browser] : retries,
+    ]);
+  }
+
+  console.log(table.toString());
+}
+
+function printSection(txt) {
+  console.log('*****************************'.magenta);
+  console.log(`${'*'.magenta} ${txt.cyan}`);
+  console.log('*****************************'.magenta);
+}
+
+async function runBrowserTests(browsers, config, retries = 1, reportsFolder, browserstack) {
+  const succeeded = {};
+  for (let browser of browsers) {
+    for (let t = 0; t < retries + 1; t++) {
+      try {
+        printSection(`e2e test for ${browser} #${t}`);
+        await nightwatch(browser, config, reportsFolder, browserstack);
+        succeeded[browser] = t;
+        console.log(`==> Succeeded e2e for ${browser} #${t}\n`.green);
+        break;
+      }
+      catch (ex) {
+        if (ex) {
+          console.log('There was an error while starting the test runner:\n\n');
+          process.stderr.write(`${ex.stack}\n`);
+        }
+        console.log(`==> Failed e2e for ${browser} #${t}\n`.red);
+      }
+    }
+  }
+  printResults(browsers, succeeded, retries);
+  return Object.keys(succeeded).length === browsers.length;
+}
+
+async function start(program) {
+  const localIdentifier = uuid();
+  let browsers = program.browsers.split(',');
+  const retries = Number.parseInt(program.retries);
+  const browserstack = {};
+  const date = new Date().toISOString()
+    .replace(/[T.]/g, '-')
+    .replace(/:/g, '');
+  const reportsFolder = `${program.reportsFolder}/${date}`;
+  let exitCode = 0;
+  let config = 'nightwatch.conf.js';
+  try {
+    if (program.tunnel && program.bsKey) {
+      await startTunnel(program.bsKey, localIdentifier);
+    }
+
+    await serve();
+
+    if (program.bsKey) {
+      config = 'nightwatch-browserstack.conf.js';
+      browserstack.localIdentifier = localIdentifier;
+      browserstack.key = program.bsKey;
+      browserstack.user = program.bsUser;
+    } else {
+      await seleniumInstall();
+      if (program.headless) {
+        browsers = browsers.map((b) => `${b}-headless`);
+      }
+    }
+
+    const succeeded = await runBrowserTests(
+      browsers,
+      config,
+      retries,
+      reportsFolder,
+      browserstack,
+    );
+    if (!succeeded) {
+      exitCode = 1;
+    }
+  }
+  catch (ex) {
+    console.log('There was an error:\n\n');
+    process.stderr.write(`${ex.stack}\n`);
+    process.exit(2);
+  }
+  finally {
+    console.log('Shutting down');
+    shutdown();
+  }
+  process.exit(exitCode);
+}
+
+program
+  .version('0.1.0')
+  .option('-u, --bs-user [user]', 'Browserstack user', 'coralproject2')
+  .option('-k, --bs-key [key]', 'Browserstack api key')
+  .option('--no-tunnel', 'Dont start browserstack-local')
+  .option('-b, --browsers [list of browsers]', 'Browsers to test', 'chrome,firefox,ie,edge')
+  .option('-r, --retries [number]', 'Number of retries before failing', '1')
+  .option('--headless', 'Start in headless mode for local e2e')
+  .option('--reports-folder [folder]', 'Reports folder', './test/e2e/reports')
+  .parse(process.argv);
+
+start(program);
diff --git a/test/e2e/globals.js b/test/e2e/globals.js
index a828804b4..5bb0a27fe 100644
--- a/test/e2e/globals.js
+++ b/test/e2e/globals.js
@@ -1,11 +1,9 @@
-const serve = require('../../serve');
 const mongoose = require('../../services/mongoose');
 const {shutdown} = require('../../bin/util');
 
 module.exports = {
   before: async (done) => {
     await mongoose.connection.dropDatabase();
-    await serve();
     done();
   },
   after: (done) => {

From 2a0f70f084a28a491aaaf2d02f9b3ca36a356f2b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 16:42:37 +0100
Subject: [PATCH 120/344] Clean DB before serve

---
 scripts/e2e.js      | 5 ++++-
 test/e2e/globals.js | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/e2e.js b/scripts/e2e.js
index 6cf97b2a6..0025710c5 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -9,6 +9,7 @@ const Table = require('cli-table');
 const serve = require('../serve');
 const childProcess = require('child_process');
 const uuid = require('uuid').v4;
+const mongoose = require('../services/mongoose');
 
 // Make things colorful!
 require('colors');
@@ -150,6 +151,8 @@ async function start(program) {
       await startTunnel(program.bsKey, localIdentifier);
     }
 
+    console.log('Dropping test database');
+    await mongoose.connection.dropDatabase();
     await serve();
 
     if (program.bsKey) {
@@ -192,7 +195,7 @@ program
   .option('-u, --bs-user [user]', 'Browserstack user', 'coralproject2')
   .option('-k, --bs-key [key]', 'Browserstack api key')
   .option('--no-tunnel', 'Dont start browserstack-local')
-  .option('-b, --browsers [list of browsers]', 'Browsers to test', 'chrome,firefox,ie,edge')
+  .option('-b, --browsers [list of browsers]', 'Browsers to test', 'chrome')
   .option('-r, --retries [number]', 'Number of retries before failing', '1')
   .option('--headless', 'Start in headless mode for local e2e')
   .option('--reports-folder [folder]', 'Reports folder', './test/e2e/reports')
diff --git a/test/e2e/globals.js b/test/e2e/globals.js
index 5bb0a27fe..4d2740404 100644
--- a/test/e2e/globals.js
+++ b/test/e2e/globals.js
@@ -3,6 +3,7 @@ const {shutdown} = require('../../bin/util');
 
 module.exports = {
   before: async (done) => {
+    console.log('Dropping test database');
     await mongoose.connection.dropDatabase();
     done();
   },

From b09b56bd24f9fac061a9ae6119383bd14bf99af9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 16:52:27 +0100
Subject: [PATCH 121/344] Temporarily enable browserstack

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 5923ff682..9a5439401 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 REPORTS_FOLDER=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
-CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
+CIRCLE_BRANCH=${CIRCLE_BRANCH__XX:-master}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}

From 0678ea0344045de39b47ad710a10c4e302e5a8a6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 17:07:50 +0100
Subject: [PATCH 122/344] Small tweak

---
 scripts/e2e.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e.js b/scripts/e2e.js
index 0025710c5..0f0e71dcd 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -119,7 +119,7 @@ async function runBrowserTests(browsers, config, retries = 1, reportsFolder, bro
         printSection(`e2e test for ${browser} #${t}`);
         await nightwatch(browser, config, reportsFolder, browserstack);
         succeeded[browser] = t;
-        console.log(`==> Succeeded e2e for ${browser} #${t}\n`.green);
+        console.log(`\n==> Succeeded e2e for ${browser} #${t}\n`.green);
         break;
       }
       catch (ex) {
@@ -127,7 +127,7 @@ async function runBrowserTests(browsers, config, retries = 1, reportsFolder, bro
           console.log('There was an error while starting the test runner:\n\n');
           process.stderr.write(`${ex.stack}\n`);
         }
-        console.log(`==> Failed e2e for ${browser} #${t}\n`.red);
+        console.log(`\n==> Failed e2e for ${browser} #${t}\n`.red);
       }
     }
   }

From c3e551deb5efdb131efae5d84426460c741b6ec4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 17:47:56 +0100
Subject: [PATCH 123/344] Disable bs for branches

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 9a5439401..5923ff682 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 REPORTS_FOLDER=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
-CIRCLE_BRANCH=${CIRCLE_BRANCH__XX:-master}
+CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}

From 4f89c1e1c3d838679b8f50abc791fb7d622db58b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 7 Nov 2017 17:50:56 +0100
Subject: [PATCH 124/344] Add some comments and description

---
 scripts/e2e.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/e2e.js b/scripts/e2e.js
index 0f0e71dcd..97e321310 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -161,6 +161,8 @@ async function start(program) {
       browserstack.key = program.bsKey;
       browserstack.user = program.bsUser;
     } else {
+
+      // Install selenium standalone.
       await seleniumInstall();
       if (program.headless) {
         browsers = browsers.map((b) => `${b}-headless`);
@@ -192,6 +194,7 @@ async function start(program) {
 
 program
   .version('0.1.0')
+  .description('Perform e2e testing locally or if browserstack credentials are provided on browserstack.')
   .option('-u, --bs-user [user]', 'Browserstack user', 'coralproject2')
   .option('-k, --bs-key [key]', 'Browserstack api key')
   .option('--no-tunnel', 'Dont start browserstack-local')

From 9b98e3cac9f33f0d9b7eaeb1ed21bc3ee15842a3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Nov 2017 15:20:14 -0300
Subject: [PATCH 125/344] missing classes

---
 .../coral-admin/src/components/BanUserDialog.js   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index 169afe043..032330833 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import styles from './BanUserDialog.css';
@@ -8,7 +9,7 @@ import t from 'coral-framework/services/i18n';
 
 const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
   <Dialog
-    className={styles.dialog}
+    className={cn(styles.dialog, 'talk-ban-user-dialog')}
     id="banUserDialog"
     open={open}
     onCancel={onCancel}
@@ -23,10 +24,18 @@ const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
         <i>{info}</i>
       </div>
       <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={onCancel} raised>
+        <Button
+          className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+          cStyle="cancel"
+          onClick={onCancel}
+          raised >
           {t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={onPerform} raised>
+        <Button 
+          className={cn(styles.ban, 'talk-ban-user-dialog-button-ban')}
+          cStyle="black"
+          onClick={onPerform}
+          raised >
           {t('bandialog.yes_ban_user')}
         </Button>
       </div>

From a2470fa01bf9d9d60f54ebf4e4055cab9d84dc6a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Nov 2017 16:43:58 -0300
Subject: [PATCH 126/344] More

---
 .../src/components/BanUserDialog.js           | 46 +++++++++----------
 client/coral-ui/components/Dialog.js          |  4 +-
 .../client/components/BanUserDialog.js        | 26 +++++++++--
 test/e2e/page_objects/embedStream.js          | 46 +++++++++++++++++--
 test/e2e/specs/04_banUser.js                  | 28 +++++++++--
 5 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index 032330833..61fa3ca9d 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -15,30 +15,28 @@ const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
     onCancel={onCancel}
     title={t('bandialog.ban_user')}>
     <span className={styles.close} onClick={onCancel}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h2>{t('bandialog.ban_user')}</h2>
-      </div>
-      <div className={styles.separator}>
-        <h3>{t('bandialog.are_you_sure', username)}</h3>
-        <i>{info}</i>
-      </div>
-      <div className={styles.buttons}>
-        <Button
-          className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-          cStyle="cancel"
-          onClick={onCancel}
-          raised >
-          {t('bandialog.cancel')}
-        </Button>
-        <Button 
-          className={cn(styles.ban, 'talk-ban-user-dialog-button-ban')}
-          cStyle="black"
-          onClick={onPerform}
-          raised >
-          {t('bandialog.yes_ban_user')}
-        </Button>
-      </div>
+    <div className={styles.header}>
+      <h2>{t('bandialog.ban_user')}</h2>
+    </div>
+    <div className={styles.separator}>
+      <h3>{t('bandialog.are_you_sure', username)}</h3>
+      <i>{info}</i>
+    </div>
+    <div className={styles.buttons}>
+      <Button
+        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+        cStyle="cancel"
+        onClick={onCancel}
+        raised >
+        {t('bandialog.cancel')}
+      </Button>
+      <Button 
+        className={cn(styles.ban, 'talk-ban-user-dialog-button-confirm')}
+        cStyle="black"
+        onClick={onPerform}
+        raised >
+        {t('bandialog.yes_ban_user')}
+      </Button>
     </div>
   </Dialog>
 );
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index 93431db4c..a7d34a512 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/client/coral-ui/components/Dialog.js
@@ -10,12 +10,12 @@ export default class Dialog extends Component {
     onCancel: PropTypes.func,
     onClose: PropTypes.func,
     open: PropTypes.bool,
-    style: PropTypes.object
+    style: PropTypes.object,
   };
 
   static defaultProps = {
     onCancel: (e) => e.preventDefault(),
-    onClose: (e) => e.preventDefault()
+    onClose: (e) => e.preventDefault(),
   };
 
   componentDidMount(){
diff --git a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
index 702ee4b10..c98e3e7c2 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
@@ -1,10 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './BanUserDialog.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Dialog, Button} from 'plugin-api/beta/client/components/ui';
 
-export default ({showBanDialog, closeBanDialog, banUser}) => (
-  <Dialog open={showBanDialog} className={styles.dialog}>
+const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
+  <Dialog open={showBanDialog} className={cn(styles.dialog, 'talk-ban-user-dialog')}>
     <span className={styles.close} onClick={closeBanDialog}>×</span>
     <h2>{t('talk-plugin-moderation-actions.ban_user_dialog_headline')}</h2>
     <h3>{t('talk-plugin-moderation-actions.ban_user_dialog_sub')}</h3>
@@ -12,12 +14,28 @@ export default ({showBanDialog, closeBanDialog, banUser}) => (
       {t('talk-plugin-moderation-actions.ban_user_dialog_copy')}
     </p>
     <div className={styles.buttons}>
-      <Button cStyle="cancel" onClick={closeBanDialog} className={styles.cancel} raised>
+      <Button
+        cStyle="cancel"
+        onClick={closeBanDialog}
+        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_cancel')}
       </Button>
-      <Button cStyle="black" onClick={banUser} className={styles.confirm} raised>
+      <Button
+        cStyle="black"
+        onClick={banUser}
+        className={cn(styles.confirm, 'talk-ban-user-dialog-button-confirm')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_yes')}
       </Button>
     </div>
   </Dialog>
 );
+
+BanUserDialog.propTypes = {
+  showBanDialog: PropTypes.func.isRequired,
+  closeBanDialog: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
+};
+
+export default BanUserDialog;
\ No newline at end of file
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index b99faf341..a8648b890 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -2,16 +2,50 @@ const iframeId = 'coralStreamEmbed_iframe';
 
 module.exports = {
   commands: [{
-    navigateToAsset: function(asset) {
+    navigateToAsset(asset) {
       this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
       return this;
     },
-    getEmbedSection: function() {
+    getEmbedSection() {
       this.waitForElementVisible('@iframe');
       this.api.frame(iframeId);
       this.expect.section('@embed').to.be.present;
       return this.section.embed;
     },
+    login(user = {}) {
+      const embedStream = this.page.embedStream();
+  
+      const embed = embedStream
+        .navigate()
+        .getEmbedSection();
+  
+      embed
+        .waitForElementVisible('@signInButton')
+        .click('@signInButton');
+  
+      this.pause(3000);
+  
+      // Focusing on the Login PopUp
+      this.windowHandles((result) => {
+        const handle = result.value[1];
+        this.switchWindow(handle);
+      });
+
+      const login = this.page.login();
+      
+      login
+        .setValue('@emailInput', user.email)
+        .setValue('@passwordInput', user.password)
+        .waitForElementVisible('@signIn')
+        .waitForElementVisible('@loginButton')
+        .click('@loginButton');
+
+      // Focusing on the Embed Window
+      this.windowHandles((result) => {
+        const handle = result.value[0];
+        this.switchWindow(handle);
+      });
+    },
   }],
   url: function() {
     return this.api.launchUrl;
@@ -22,12 +56,12 @@ module.exports = {
   sections: {
     embed: {
       commands: [{
-        getProfileSection: function() {
+        getProfileSection() {
           this.click('@profileTabButton');
           this.expect.section('@profile').to.be.present;
           return this.section.profile;
         },
-        getCommentsSection: function() {
+        getCommentsSection() {
           this.click('@commentsTabButton');
           this.expect.section('@comments').to.be.present;
           return this.section.comments;
@@ -64,7 +98,9 @@ module.exports = {
           elements: {
             arrow: '.talk-plugin-moderation-actions-arrow',
             menu: '.talk-plugin-modetarion-actions-menu',
-            banButton: 'talk-plugin-moderation-actions-ban',
+            banButton: '.talk-plugin-moderation-actions-ban',
+            banDialog: '.talk-ban-user-dialog',
+            banDialogbanButton: '.talk-ban-user-dialog-button-ban',
           },
         },
         profile: {
diff --git a/test/e2e/specs/04_banUser.js b/test/e2e/specs/04_banUser.js
index 598460e30..776093692 100644
--- a/test/e2e/specs/04_banUser.js
+++ b/test/e2e/specs/04_banUser.js
@@ -1,4 +1,5 @@
 module.exports = {
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -24,7 +25,7 @@ module.exports = {
       .navigate()
       .getEmbedSection();
   },
-  'ban': (client) => {
+  'admin bans user': (client) => {
     const modSection = client.page.embedStream().section.embed.section.mod;
 
     modSection
@@ -32,6 +33,27 @@ module.exports = {
       .click('@arrow')
       .waitForElementVisible('@menu')
       .waitForElementVisible('@banButton')
-      .click('@banButton');
-  }
+      .click('@banButton')
+      .waitForElementVisible('@banDialog')
+      .waitForElementVisible('@banDialogbanButton')
+      .click('@banDialogbanButton')
+      .waitForElementNotVisible('@banDialog');
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .login(user);
+  },
+  'user account is banned, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@restrictedMessageBox');
+  },
 };

From a394ba29b377f78509470227c3d333fc3e6bdac0 Mon Sep 17 00:00:00 2001
From: Jeff Nelson <jeff@cinchapi.com>
Date: Wed, 8 Nov 2017 07:11:03 -0500
Subject: [PATCH 127/344] Update 02-02-advanced-configuration.md

Change TALK_SMTP_EMAIL to TALK_SMTP_FROM_EMAIL
---
 docs/_docs/02-02-advanced-configuration.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 73e72e2cb..2f830a022 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -369,12 +369,12 @@ Then all the routes for the API will be expecting to be hit on `/talk/`, such as
 can perform the path stripping when serving an upstream proxy, but some CDN's
 cannot. You would use this option in the latter situation.
 
-## TALK_SMTP_EMAIL
+## TALK_SMTP_FROM_EMAIL
 
 The email address to send emails from using the SMTP provider in the format:
 
 ```plain
-TALK_SMTP_EMAIL="The Coral Project" <support@coralproject.net>
+TALK_SMTP_FROM_EMAIL="The Coral Project" <support@coralproject.net>
 ```
 
 Including the name and email address.

From e9bd5703f12ddd877c28156a25a372ba3ddc8a72 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 11:49:32 -0300
Subject: [PATCH 128/344] refactor

---
 test/e2e/page_objects/admin.js       | 17 +++++++++++++++++
 test/e2e/page_objects/embedStream.js | 13 +++++++++++++
 test/e2e/specs/04_banUser.js         | 20 +++++++-------------
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 94ce82826..17824ec8a 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -7,6 +7,23 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
+    login(user = {}) {
+      const adminPage = this.page.admin();
+  
+      adminPage
+        .navigate()
+        .waitForElementVisible('@loginLayout')
+        .waitForElementVisible('@signInForm')
+        .setValue('@emailInput', user.email)
+        .setValue('@passwordInput', user.password)
+        .waitForElementVisible('@signInButton')
+        .click('@signInButton');
+  
+      this.pause(3000);
+      
+      adminPage
+        .waitForElementVisible('@moderationContainer');
+    },
   }],
   elements: {
     'loginLayout': '.talk-admin-login',
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index a8648b890..92c662d79 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -46,6 +46,19 @@ module.exports = {
         this.switchWindow(handle);
       });
     },
+    logout() {
+      const embedStream = this.page.embedStream();
+      
+      const embed = embedStream
+        .navigate()
+        .getEmbedSection();
+  
+      embed
+        .waitForElementVisible('@commentsTabButton')
+        .click('@commentsTabButton')
+        .waitForElementVisible('@logoutButton')
+        .click('@logoutButton');
+    }
   }],
   url: function() {
     return this.api.launchUrl;
diff --git a/test/e2e/specs/04_banUser.js b/test/e2e/specs/04_banUser.js
index 776093692..24561e1f1 100644
--- a/test/e2e/specs/04_banUser.js
+++ b/test/e2e/specs/04_banUser.js
@@ -1,22 +1,10 @@
 module.exports = {
-
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
     adminPage
-      .navigate()
-      .waitForElementVisible('@loginLayout')
-      .waitForElementVisible('@signInForm')
-      .setValue('@emailInput', admin.email)
-      .setValue('@passwordInput', admin.password)
-      .waitForElementVisible('@signInButton')
-      .click('@signInButton');
-
-    client.pause(3000);
-    
-    adminPage
-      .waitForElementVisible('@moderationContainer');
+      .login(admin);
   },
   'navigate to the embed stream': (client) => {
     const embedStream = client.page.embedStream();
@@ -39,6 +27,12 @@ module.exports = {
       .click('@banDialogbanButton')
       .waitForElementNotVisible('@banDialog');
   },
+  'admin logs out': (client) => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .logout();
+  },
   'user logs in': (client) => {
     const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();

From 54ac2985ba6c4850f84324b8aacd7e078349488b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 12:23:29 -0300
Subject: [PATCH 129/344] Adding classes

---
 client/coral-admin/src/routes/Community/components/People.js | 3 ++-
 client/coral-admin/src/routes/Community/components/Table.js  | 4 +++-
 client/coral-ui/components/Dropdown.js                       | 4 ++--
 client/coral-ui/components/Option.js                         | 4 +++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index 75d08429a..b92bd679a 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './styles.css';
 import Table from './Table';
 import {Icon} from 'coral-ui';
@@ -24,7 +25,7 @@ const People = (props) => {
   const hasResults = !!users.length;
 
   return (
-    <div className={styles.container}>
+    <div className={cn(styles.container, 'talk-admin-community-people-container')}>
       <div className={styles.leftColumn}>
         <div className={styles.searchBox}>
           <Icon name='search' className={styles.searchIcon}/>
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 22b02cfe4..aa2db6ff6 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -42,7 +42,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
       </thead>
       <tbody>
         {users.map((row, i)=> (
-          <tr key={i}>
+          <tr key={i} className="talk-admin-community-people-row">
             <td className="mdl-data-table__cell--non-numeric">
               <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
               <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
@@ -52,6 +52,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
+                className="talk-admin-community-people-dd-status"
                 value={row.status}
                 placeholder={t('community.status')}
                 onChange={(status) => setCommenterStatus(row.id, status)}>
@@ -61,6 +62,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
+                className="talk-admin-community-people-dd-role"
                 value={row.roles[0] || ''}
                 placeholder={t('community.role')}
                 onChange={(role) => setRole(row.id, role)}>
diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index 2cad6e990..dddffbfa2 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/client/coral-ui/components/Dropdown.js
@@ -131,7 +131,7 @@ class Dropdown extends React.Component {
     const {containerClassName, toggleClassName, toggleOpenClassName} = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={cn(styles.dropdown, containerClassName)}>
+        <div className={cn(styles.dropdown, containerClassName, 'dd dd-container')}>
           <div
             className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
             onClick={this.handleClick}
@@ -149,7 +149,7 @@ class Dropdown extends React.Component {
           {this.state.isOpen &&
             <div>
               <div tabIndex="0" onFocus={this.trapFocusBegin} />
-              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})}>
+              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen}, 'dd-list-active')}>
                 {React.Children.toArray(this.props.children)
                   .map((child, i) =>
                     React.cloneElement(child, {
diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js
index 5b752eb48..8fd92a904 100644
--- a/client/coral-ui/components/Option.js
+++ b/client/coral-ui/components/Option.js
@@ -16,8 +16,9 @@ class Option extends React.Component {
 
   render() {
     const {className, label = '', onClick, onKeyDown} = this.props;
+    const id = this.props.id ? this.props.id : this.props.value;
     return (
-      <li className={cn(styles.option, className)} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef}>
+      <li className={cn(styles.option, className, 'dd-option')} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef} id={id}>
         {label}
       </li>
     );
@@ -26,6 +27,7 @@ class Option extends React.Component {
 
 Option.propTypes = {
   className: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,

From 81bf63836a83122af8bff6a90f588e321bdb0d15 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 12:23:40 -0300
Subject: [PATCH 130/344] tests

---
 test/e2e/page_objects/adminCommunity.js | 17 +++++++++++++++
 test/e2e/specs/04_banUser.js            | 29 +++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
index ef3ccbb4c..5bae03ae1 100644
--- a/test/e2e/page_objects/adminCommunity.js
+++ b/test/e2e/page_objects/adminCommunity.js
@@ -7,6 +7,10 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
+    goToPeople() {
+      this
+        .navigate(`${this.url()}/people`);
+    },
   }],
   elements: {
     container: '.talk-admin-community',
@@ -18,5 +22,18 @@ module.exports = {
     usernameDialogButtons: '.talk-reject-username-dialog-buttons',
     usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
     usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
+  },
+  sections: {
+    people: {
+      selector: '.talk-admin-community-people-container',
+      elements: {
+        row: '.talk-admin-community-people-row',
+        dropdownStatus: '.talk-admin-community-people-dd-status',
+        dropdownRole: '.talk-admin-community-people-dd-role',
+        dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
+        optionActive: '.dd-option#ACTIVE',
+        optionBanned: '.dd-option#BANNED',
+      }
+    }
   }
 };
diff --git a/test/e2e/specs/04_banUser.js b/test/e2e/specs/04_banUser.js
index 24561e1f1..c7eab0c33 100644
--- a/test/e2e/specs/04_banUser.js
+++ b/test/e2e/specs/04_banUser.js
@@ -50,4 +50,33 @@ module.exports = {
     embed
       .waitForElementVisible('@restrictedMessageBox');
   },
+  'user logs out': (client) => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .logout();
+  },
+  'admin logs in (2)': (client) => {
+    const adminPage = client.page.admin();
+    const {testData: {admin}} = client.globals;
+
+    adminPage
+      .login(admin);
+  },
+  'admin goes to community': (client) => {
+    const community = client.page.adminCommunity();
+    
+    community
+      .goToPeople();
+  },
+  'admin removes ban from user': (client) => {
+    const modSection = client.page.adminCommunity().section.people;
+
+    modSection
+      .waitForElementVisible('@row')
+      .waitForElementVisible('@dropdownStatus')
+      .click('@dropdownStatus')
+      .waitForElementVisible('@dropdownStatusActive')
+      .click('@optionActive');
+  },
 };

From 62d01cf2a0a3e141b46a81156e99159f68092976 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 12:31:33 -0300
Subject: [PATCH 131/344] perform login

---
 test/e2e/page_objects/admin.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 17824ec8a..e83e7b7df 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -7,10 +7,8 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
-    login(user = {}) {
-      const adminPage = this.page.admin();
-  
-      adminPage
+    login(user = {}) {  
+      this
         .navigate()
         .waitForElementVisible('@loginLayout')
         .waitForElementVisible('@signInForm')
@@ -19,9 +17,9 @@ module.exports = {
         .waitForElementVisible('@signInButton')
         .click('@signInButton');
   
-      this.pause(3000);
+      this.api.pause(3000);
       
-      adminPage
+      this
         .waitForElementVisible('@moderationContainer');
     },
   }],

From 5efdc9865f03cf5159488c1211b1dcd5f1c4b696 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 12:59:08 -0300
Subject: [PATCH 132/344] refacotr

---
 .../src/routes/Community/components/Table.js  |  4 +--
 test/e2e/page_objects/adminCommunity.js       |  2 +-
 test/e2e/page_objects/embedStream.js          | 27 +++++++++----------
 .../{05_userStatus.js => 04_userStatus.js}    |  0
 .../specs/{04_banUser.js => 05_banUser.js}    | 11 +++++---
 5 files changed, 22 insertions(+), 22 deletions(-)
 rename test/e2e/specs/{05_userStatus.js => 04_userStatus.js} (100%)
 rename test/e2e/specs/{04_banUser.js => 05_banUser.js} (89%)

diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index aa2db6ff6..89d59131e 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -52,7 +52,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
-                className="talk-admin-community-people-dd-status"
+                containerClassName="talk-admin-community-people-dd-status"
                 value={row.status}
                 placeholder={t('community.status')}
                 onChange={(status) => setCommenterStatus(row.id, status)}>
@@ -62,7 +62,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
-                className="talk-admin-community-people-dd-role"
+                containerClassName="talk-admin-community-people-dd-role"
                 value={row.roles[0] || ''}
                 placeholder={t('community.role')}
                 onChange={(role) => setRole(row.id, role)}>
diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
index 5bae03ae1..0e063915a 100644
--- a/test/e2e/page_objects/adminCommunity.js
+++ b/test/e2e/page_objects/adminCommunity.js
@@ -27,7 +27,7 @@ module.exports = {
     people: {
       selector: '.talk-admin-community-people-container',
       elements: {
-        row: '.talk-admin-community-people-row',
+        firstRow: '.talk-admin-community-people-row:first-child',
         dropdownStatus: '.talk-admin-community-people-dd-status',
         dropdownRole: '.talk-admin-community-people-dd-role',
         dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 92c662d79..55bc6f91c 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -13,9 +13,8 @@ module.exports = {
       return this.section.embed;
     },
     login(user = {}) {
-      const embedStream = this.page.embedStream();
-  
-      const embed = embedStream
+
+      const embed = this
         .navigate()
         .getEmbedSection();
   
@@ -23,15 +22,15 @@ module.exports = {
         .waitForElementVisible('@signInButton')
         .click('@signInButton');
   
-      this.pause(3000);
+      this.api.pause(3000);
   
       // Focusing on the Login PopUp
-      this.windowHandles((result) => {
+      this.api.windowHandles((result) => {
         const handle = result.value[1];
-        this.switchWindow(handle);
+        this.api.switchWindow(handle);
       });
 
-      const login = this.page.login();
+      const login = this.api.page.login();
       
       login
         .setValue('@emailInput', user.email)
@@ -41,15 +40,13 @@ module.exports = {
         .click('@loginButton');
 
       // Focusing on the Embed Window
-      this.windowHandles((result) => {
+      this.api.windowHandles((result) => {
         const handle = result.value[0];
-        this.switchWindow(handle);
+        this.api.switchWindow(handle);
       });
     },
-    logout() {
-      const embedStream = this.page.embedStream();
-      
-      const embed = embedStream
+    logout() {      
+      const embed = this
         .navigate()
         .getEmbedSection();
   
@@ -95,6 +92,8 @@ module.exports = {
         restrictedMessageBox: '.talk-restricted-message-box',
         suspendedAccountInput: '.talk-suspended-account-username-input',
         suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
+        banDialog: '.talk-ban-user-dialog',
+        banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
       },
       sections: {
         flag: {
@@ -112,8 +111,6 @@ module.exports = {
             arrow: '.talk-plugin-moderation-actions-arrow',
             menu: '.talk-plugin-modetarion-actions-menu',
             banButton: '.talk-plugin-moderation-actions-ban',
-            banDialog: '.talk-ban-user-dialog',
-            banDialogbanButton: '.talk-ban-user-dialog-button-ban',
           },
         },
         profile: {
diff --git a/test/e2e/specs/05_userStatus.js b/test/e2e/specs/04_userStatus.js
similarity index 100%
rename from test/e2e/specs/05_userStatus.js
rename to test/e2e/specs/04_userStatus.js
diff --git a/test/e2e/specs/04_banUser.js b/test/e2e/specs/05_banUser.js
similarity index 89%
rename from test/e2e/specs/04_banUser.js
rename to test/e2e/specs/05_banUser.js
index c7eab0c33..8e5e33cd0 100644
--- a/test/e2e/specs/04_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -14,6 +14,7 @@ module.exports = {
       .getEmbedSection();
   },
   'admin bans user': (client) => {
+    const embed = client.page.embedStream().section.embed;
     const modSection = client.page.embedStream().section.embed.section.mod;
 
     modSection
@@ -21,10 +22,12 @@ module.exports = {
       .click('@arrow')
       .waitForElementVisible('@menu')
       .waitForElementVisible('@banButton')
-      .click('@banButton')
+      .click('@banButton');
+
+    embed
       .waitForElementVisible('@banDialog')
-      .waitForElementVisible('@banDialogbanButton')
-      .click('@banDialogbanButton')
+      .waitForElementVisible('@banDialogConfirmButton')
+      .click('@banDialogConfirmButton')
       .waitForElementNotVisible('@banDialog');
   },
   'admin logs out': (client) => {
@@ -73,7 +76,7 @@ module.exports = {
     const modSection = client.page.adminCommunity().section.people;
 
     modSection
-      .waitForElementVisible('@row')
+      .waitForElementVisible('@firstRow')
       .waitForElementVisible('@dropdownStatus')
       .click('@dropdownStatus')
       .waitForElementVisible('@dropdownStatusActive')

From 9a651880a2fd4de4a362c23d8c7491df91ba6f0d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Nov 2017 14:00:01 -0300
Subject: [PATCH 133/344] Updated login

---
 test/e2e/page_objects/embedStream.js | 40 +++++++++++++++------
 test/e2e/specs/03_embedStream.js     | 52 ++--------------------------
 2 files changed, 31 insertions(+), 61 deletions(-)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index f98dd7585..e31d5d72e 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -1,4 +1,5 @@
 const iframeId = 'coralStreamEmbed_iframe';
+const SortedWindowHandler = require('../utils/SortedWindowHandler');
 
 module.exports = {
   commands: [{
@@ -18,36 +19,53 @@ module.exports = {
       return this.section.embed;
     },
     login(user = {}) {
-
       const embed = this
         .navigate()
         .getEmbedSection();
   
+      const windowHandler = new SortedWindowHandler(this);
+  
       embed
         .waitForElementVisible('@signInButton')
         .click('@signInButton');
   
-      this.api.pause(3000);
+      // Wait for window to be created
+      // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
+      this.api.pause(200);
   
       // Focusing on the Login PopUp
-      this.api.windowHandles((result) => {
-        const handle = result.value[1];
-        this.api.switchWindow(handle);
+      windowHandler.windowHandles((handles) => {
+        this.api.switchWindow(handles[1]);
       });
-
+  
       const login = this.api.page.login();
-      
+  
       login
+        .waitForElementVisible('@registerButton')
+        .click('@registerButton')
         .setValue('@emailInput', user.email)
+        .setValue('@usernameInput', user.username)
         .setValue('@passwordInput', user.password)
+        .setValue('@confirmPasswordInput', user.password)
+        .waitForElementVisible('@signUpButton')
+        .click('@signUpButton')
         .waitForElementVisible('@signIn')
         .waitForElementVisible('@loginButton')
         .click('@loginButton');
-
+  
+      // Give a tiny bit of time to let popup close.
+      this.api.pause(50);
+  
+      if (this.api.capabilities.browserName === 'MicrosoftEdge') {
+  
+        // More time for edge.
+        // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
+        this.api.pause(1000);
+      }
+  
       // Focusing on the Embed Window
-      this.api.windowHandles((result) => {
-        const handle = result.value[0];
-        this.api.switchWindow(handle);
+      windowHandler.windowHandles((handles) => {
+        this.api.switchWindow(handles[0]);
       });
     },
     logout() {      
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 53da1e87d..a12b9820f 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,5 +1,3 @@
-const SortedWindowHandler = require('../utils/SortedWindowHandler');
-
 module.exports = {
   '@tags': ['embedStream', 'login'],
   'creates a new asset': (client) => {
@@ -16,54 +14,8 @@ module.exports = {
     const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    const windowHandler = new SortedWindowHandler(client);
-
-    embed
-      .waitForElementVisible('@signInButton')
-      .click('@signInButton');
-
-    // Wait for window to be created
-    // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
-    client.pause(200);
-
-    // Focusing on the Login PopUp
-    windowHandler.windowHandles((handles) => {
-      client.switchWindow(handles[1]);
-    });
-
-    const login = client.page.login();
-
-    login
-      .waitForElementVisible('@registerButton')
-      .click('@registerButton')
-      .setValue('@emailInput', user.email)
-      .setValue('@usernameInput', user.username)
-      .setValue('@passwordInput', user.password)
-      .setValue('@confirmPasswordInput', user.password)
-      .waitForElementVisible('@signUpButton')
-      .click('@signUpButton')
-      .waitForElementVisible('@signIn')
-      .waitForElementVisible('@loginButton')
-      .click('@loginButton');
-
-    // Give a tiny bit of time to let popup close.
-    client.pause(50);
-
-    if (client.capabilities.browserName === 'MicrosoftEdge') {
-
-      // More time for edge.
-      // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
-      client.pause(1000);
-    }
-
-    // Focusing on the Embed Window
-    windowHandler.windowHandles((handles) => {
-      client.switchWindow(handles[0]);
-    });
+    embedStream
+      .login(user);
   },
   'user posts a comment': (client) => {
     const embedStream = client.page.embedStream();

From 786e85686dece81ab3084d35a172529a0de8648c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 8 Nov 2017 18:57:06 +0100
Subject: [PATCH 134/344] Fix invalid regexp for ie

---
 .../src/components/CommentBodyHighlighter.js           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/components/CommentBodyHighlighter.js b/client/coral-admin/src/components/CommentBodyHighlighter.js
index e27d3ce6d..177df5338 100644
--- a/client/coral-admin/src/components/CommentBodyHighlighter.js
+++ b/client/coral-admin/src/components/CommentBodyHighlighter.js
@@ -15,7 +15,15 @@ function generateRegExp(phrases) {
         .join('[\\s"?!.]+')
     ).join('|');
 
-  return new RegExp(`(^|[^\\w])(${inner})(?=[^\\w]|$)`, 'iu');
+  const pattern = `(^|[^\\w])(${inner})(?=[^\\w]|$)`;
+  try {
+    return new RegExp(pattern, 'iu');
+  }
+  catch (_err) {
+
+    // IE does not support unicode support, so we'll create one without.
+    return new RegExp(pattern, 'i');
+  }
 }
 
 // Generate a regular expression detecting `suspectWords` and `bannedWords` phrases.

From 18f5b0cc5efb86725cdfecc7c41f7d878c72e74f Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 8 Nov 2017 14:24:48 -0700
Subject: [PATCH 135/344] queue fix for sometimes null settings

---
 .../src/routes/Moderation/containers/Moderation.js          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 1161ad5dc..200e5f6ae 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -71,10 +71,10 @@ class ModerationContainer extends Component {
     const id = getAssetId(this.props);
     const tab = getTab(this.props);
 
-    // Grab premod from asset or from settings
-    const premod = !id ? settings.moderation : asset.settings.moderation;
+    // Grab premod from asset or from settings if it's defined.
+    const setting = id && asset && asset.settings ? asset.settings.moderation : settings.moderation;
 
-    const queue = isPremod(premod) ? 'premod' : 'new';
+    const queue = isPremod(setting) ? 'premod' : 'new';
     const activeTab = tab ? tab : queue;
 
     return activeTab;

From d7a88cdc2a27adf7255a02aada2330300e8c8e36 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 9 Nov 2017 11:18:58 +0000
Subject: [PATCH 136/344] Fix config key

---
 docs/_docs/02-02-advanced-configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 2f830a022..6c37aab12 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -369,7 +369,7 @@ Then all the routes for the API will be expecting to be hit on `/talk/`, such as
 can perform the path stripping when serving an upstream proxy, but some CDN's
 cannot. You would use this option in the latter situation.
 
-## TALK_SMTP_FROM_EMAIL
+## TALK_SMTP_FROM_ADDRESS
 
 The email address to send emails from using the SMTP provider in the format:
 

From 247e05383e922e111d3d15959a6af1ddaaac02da Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 9 Nov 2017 11:23:48 +0000
Subject: [PATCH 137/344] One more fix

---
 docs/_docs/02-02-advanced-configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 6c37aab12..74099258d 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -374,7 +374,7 @@ cannot. You would use this option in the latter situation.
 The email address to send emails from using the SMTP provider in the format:
 
 ```plain
-TALK_SMTP_FROM_EMAIL="The Coral Project" <support@coralproject.net>
+TALK_SMTP_FROM_ADDRESS="The Coral Project" <support@coralproject.net>
 ```
 
 Including the name and email address.

From 6d5adc8f547a51b7139ecd14ed0ff70cfab97be4 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 9 Nov 2017 13:19:05 +0000
Subject: [PATCH 138/344] Bump version number to 3.8.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 897efc819..3fedfa425 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 63b6315435801fdf911e36ecd591aaace8f1712b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 17:50:47 +0100
Subject: [PATCH 139/344] Refactor #1

---
 test/e2e/page_objects/admin.js       |   9 +-
 test/e2e/page_objects/embedStream.js | 169 ++++++++++++---------------
 test/e2e/page_objects/login.js       |  28 +++++
 test/e2e/specs/02_admin.js           |  13 +--
 test/e2e/specs/03_embedStream.js     |  73 ++++--------
 test/e2e/specs/04_userStatus.js      |  83 +++----------
 test/e2e/specs/05_banUser.js         |  36 +++---
 7 files changed, 167 insertions(+), 244 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index e83e7b7df..36baaa3cb 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -7,19 +7,14 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
-    login(user = {}) {  
+    login(user) {
       this
-        .navigate()
         .waitForElementVisible('@loginLayout')
         .waitForElementVisible('@signInForm')
         .setValue('@emailInput', user.email)
         .setValue('@passwordInput', user.password)
         .waitForElementVisible('@signInButton')
-        .click('@signInButton');
-  
-      this.api.pause(3000);
-      
-      this
+        .click('@signInButton')
         .waitForElementVisible('@moderationContainer');
     },
   }],
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index e31d5d72e..5b649fecb 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -3,11 +3,28 @@ const SortedWindowHandler = require('../utils/SortedWindowHandler');
 
 module.exports = {
   commands: [{
-    navigateToAsset(asset) {
+    ready: function() {
+      this.switchToIframe();
+      this.expect.section('@comments').to.be.present;
+      return this.section.comments;
+    },
+    goToProfileSection: function() {
+      this.waitForElementVisible('@profileTabButton');
+      this.click('@profileTabButton');
+      this.expect.section('@profile').to.be.present;
+      return this.section.profile;
+    },
+    goToCommentsSection: function() {
+      this.waitForElementVisible('@commentsTabButton');
+      this.click('@commentsTabButton');
+      this.expect.section('@comments').to.be.present;
+      return this.section.comments;
+    },
+    navigateToAsset: function(asset) {
       this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
       return this;
     },
-    getEmbedSection() {
+    switchToIframe: function() {
       this.waitForElementVisible('@iframe');
 
       // Pause a bit to let iframe initialize in the hope that it'll
@@ -15,98 +32,66 @@ module.exports = {
       this.api.pause(200);
 
       this.api.frame(iframeId);
-      this.expect.section('@embed').to.be.present;
-      return this.section.embed;
+      return this;
     },
-    login(user = {}) {
-      const embed = this
-        .navigate()
-        .getEmbedSection();
-  
-      const windowHandler = new SortedWindowHandler(this);
-  
-      embed
-        .waitForElementVisible('@signInButton')
-        .click('@signInButton');
-  
-      // Wait for window to be created
-      // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
-      this.api.pause(200);
-  
-      // Focusing on the Login PopUp
-      windowHandler.windowHandles((handles) => {
-        this.api.switchWindow(handles[1]);
-      });
-  
-      const login = this.api.page.login();
-  
-      login
-        .waitForElementVisible('@registerButton')
-        .click('@registerButton')
-        .setValue('@emailInput', user.email)
-        .setValue('@usernameInput', user.username)
-        .setValue('@passwordInput', user.password)
-        .setValue('@confirmPasswordInput', user.password)
-        .waitForElementVisible('@signUpButton')
-        .click('@signUpButton')
-        .waitForElementVisible('@signIn')
-        .waitForElementVisible('@loginButton')
-        .click('@loginButton');
-  
-      // Give a tiny bit of time to let popup close.
-      this.api.pause(50);
-  
-      if (this.api.capabilities.browserName === 'MicrosoftEdge') {
-  
-        // More time for edge.
-        // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
-        this.api.pause(1000);
-      }
-  
-      // Focusing on the Embed Window
-      windowHandler.windowHandles((handles) => {
-        this.api.switchWindow(handles[0]);
-      });
-    },
-    logout() {      
-      const embed = this
-        .navigate()
-        .getEmbedSection();
-  
-      embed
-        .waitForElementVisible('@commentsTabButton')
-        .click('@commentsTabButton')
-        .waitForElementVisible('@logoutButton')
-        .click('@logoutButton');
-    }
   }],
   url: function() {
     return this.api.launchUrl;
   },
   elements: {
     iframe: `#${iframeId}`,
+    commentsTabButton: '.talk-embed-stream-comments-tab > button',
+    profileTabButton: '.talk-embed-stream-profile-tab > button',
+    banDialog: '.talk-ban-user-dialog',
+    banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
   },
   sections: {
-    embed: {
+    comments: {
       commands: [{
-        getProfileSection() {
-          this.waitForElementVisible('@profileTabButton');
-          this.click('@profileTabButton');
-          this.expect.section('@profile').to.be.present;
-          return this.section.profile;
+        openLoginPopup(callback) {
+          const windowHandler = new SortedWindowHandler(this.api);
+
+          this
+            .waitForElementVisible('@signInButton')
+            .click('@signInButton');
+
+          // Wait for window to be created
+          // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
+          this.api.pause(200);
+
+          // Focusing on the Login PopUp
+          windowHandler.windowHandles((handles) => {
+            this.api.switchWindow(handles[1]);
+          });
+
+          const login = this.api.page.login().ready();
+          callback(login);
+
+          // Give a tiny bit of time to let popup close.
+          this.api.pause(50);
+
+          if (this.api.capabilities.browserName === 'MicrosoftEdge') {
+
+            // More time for edge.
+            // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
+            this.api.pause(1000);
+          }
+
+          // Focusing on the Embed Window
+          windowHandler.windowHandles((handles) => {
+            this.api.switchWindow(handles[0]);
+            this.api.page.embedStream().switchToIframe();
+          });
         },
-        getCommentsSection() {
-          this.waitForElementVisible('@commentsTabButton');
-          this.click('@commentsTabButton');
-          this.expect.section('@comments').to.be.present;
-          return this.section.comments;
+        logout() {
+          this
+            .waitForElementVisible('@logoutButton')
+            .click('@logoutButton');
         },
       }],
-      selector: '#talk-embed-stream-container',
+      selector: '.talk-embed-stream-comments-tab-pane',
       elements: {
         logoutButton: '.talk-stream-userbox-logout',
-        commentsTabButton: '.talk-embed-stream-comments-tab > button',
-        profileTabButton: '.talk-embed-stream-profile-tab > button',
         signInButton: '#coralSignInButton',
         commentBoxTextarea: '#commentText',
         commentBoxPostButton: '.talk-plugin-commentbox-button',
@@ -117,8 +102,6 @@ module.exports = {
         restrictedMessageBox: '.talk-restricted-message-box',
         suspendedAccountInput: '.talk-suspended-account-username-input',
         suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
-        banDialog: '.talk-ban-user-dialog',
-        banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
       },
       sections: {
         flag: {
@@ -138,20 +121,16 @@ module.exports = {
             banButton: '.talk-plugin-moderation-actions-ban',
           },
         },
-        profile: {
-          selector: '.talk-embed-stream-profile-tab-pane',
-          elements: {
-            notLoggedIn: '.talk-embed-stream-not-logged-in',
-            myCommentHistory: '.talk-my-profile-comment-history',
-            myCommentHistoryReactions: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
-            myCommentHistoryReactionCount: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
-            myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
-          },
-        },
-        comments: {
-          selector: '.talk-embed-stream-comments-tab-pane',
-          elements: {},
-        },
+      },
+    },
+    profile: {
+      selector: '.talk-embed-stream-profile-tab-pane',
+      elements: {
+        notLoggedIn: '.talk-embed-stream-not-logged-in',
+        myCommentHistory: '.talk-my-profile-comment-history',
+        myCommentHistoryReactions: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
+        myCommentHistoryReactionCount: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
+        myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
       },
     },
   },
diff --git a/test/e2e/page_objects/login.js b/test/e2e/page_objects/login.js
index 1abc40aa8..89b071e9a 100644
--- a/test/e2e/page_objects/login.js
+++ b/test/e2e/page_objects/login.js
@@ -1,4 +1,32 @@
 module.exports = {
+  commands: [{
+    ready() {
+      return this
+        .waitForElementVisible('body');
+    },
+    login(user) {
+      this
+        .setValue('@emailInput', user.email)
+        .setValue('@passwordInput', user.password)
+        .waitForElementVisible('@signIn')
+        .waitForElementVisible('@loginButton')
+        .click('@loginButton');
+    },
+    register(user) {
+      this
+        .waitForElementVisible('@registerButton')
+        .click('@registerButton')
+        .setValue('@emailInput', user.email)
+        .setValue('@usernameInput', user.username)
+        .setValue('@passwordInput', user.password)
+        .setValue('@confirmPasswordInput', user.password)
+        .waitForElementVisible('@signUpButton')
+        .click('@signUpButton')
+        .waitForElementVisible('@signIn')
+        .waitForElementVisible('@loginButton')
+        .click('@loginButton');
+    },
+  }],
   elements: {
     registerButton: '#coralRegister',
     signInButton: '#coralSignInButton',
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 1f56ef2b8..4973f24ab 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -10,22 +10,14 @@ module.exports = {
 
     adminPage
       .navigate()
-      .waitForElementVisible('@loginLayout')
-      .waitForElementVisible('@signInForm')
-      .setValue('@emailInput', admin.email)
-      .setValue('@passwordInput', admin.password)
-      .waitForElementVisible('@signInButton')
-      .click('@signInButton');
-
-    adminPage
-      .waitForElementVisible('@moderationContainer');
+      .ready()
+      .login(admin);
   },
 
   'Admin goes to Stories': (client) => {
     const adminPage = client.page.admin();
 
     adminPage
-      .navigate()
       .waitForElementVisible('@drawerButton')
       .click('@drawerButton')
       .waitForElementVisible('@storiesDrawerNav')
@@ -40,7 +32,6 @@ module.exports = {
     const adminPage = client.page.admin();
 
     adminPage
-      .navigate()
       .waitForElementVisible('@drawerButton')
       .click('@drawerButton')
       .waitForElementVisible('@communityDrawerNav')
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index a12b9820f..f4c1b94b6 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -7,46 +7,43 @@ module.exports = {
     embedStream
       .navigateToAsset(asset)
       .assert.title(asset)
-      .getEmbedSection();
+      .ready();
   },
 
   'creates an user and user logs in': (client) => {
     const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();
 
-    embedStream
-      .login(user);
+    // Go back to default asset.
+    const comments =
+      embedStream
+      .navigate()
+      .ready();
+
+    comments
+      .openLoginPopup((login) => {
+        login.register(user);
+      });
   },
   'user posts a comment': (client) => {
-    const embedStream = client.page.embedStream();
+    const comments = client.page.embedStream().section.comments;
     const {testData: {comment}} = client.globals;
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    embed
+    comments
       .waitForElementVisible('@commentBoxTextarea')
       .setValue('@commentBoxTextarea', comment.body)
       .waitForElementVisible('@commentBoxPostButton')
       .click('@commentBoxPostButton')
       .waitForElementVisible('@firstCommentContent')
       .getText('@firstCommentContent', (result) => {
-        embed.assert.equal(result.value, comment.body);
+        comments.assert.equal(result.value, comment.body);
       });
   },
 
   'signed in user sees comment history': (client) => {
-    const embedStream = client.page.embedStream();
+    const profile = client.page.embedStream().goToProfileSection();
     const {testData: {comment}} = client.globals;
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    const profile = embed
-      .getProfileSection();
-
     profile
       .waitForElementVisible('@myCommentHistory')
       .waitForElementVisible('@myCommentHistoryComment')
@@ -55,14 +52,7 @@ module.exports = {
       });
   },
   'user sees replies and reactions to comments': (client) => {
-    const embedStream = client.page.embedStream();
-
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    const profile = embed
-      .getProfileSection();
+    const profile = client.page.embedStream().section.profile;
 
     profile
       .waitForElementVisible('@myCommentHistory')
@@ -74,17 +64,12 @@ module.exports = {
   },
   'user goes to the stream and replies and reacts to comment': (client) => {
     const embedStream = client.page.embedStream();
-
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    embed
+    const comments = embedStream.goToCommentsSection();
+    comments
       .waitForElementVisible('@respectButton')
       .click('@respectButton');
 
-    const profile = embed
-      .getProfileSection();
+    const profile = embedStream.goToProfileSection();
 
     profile
       .waitForElementVisible('@myCommentHistory')
@@ -96,26 +81,14 @@ module.exports = {
   },
   'user logs out': (client) => {
     const embedStream = client.page.embedStream();
+    const comments = embedStream.goToCommentsSection();
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    embed
-      .waitForElementVisible('@commentsTabButton')
-      .click('@commentsTabButton')
-      .waitForElementVisible('@logoutButton')
-      .click('@logoutButton');
+    comments
+      .logout();
   },
   'not logged in user clicks my profile tab': (client) => {
     const embedStream = client.page.embedStream();
-
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    const profile = embed
-      .getProfileSection();
+    const profile = embedStream.goToProfileSection();
 
     profile
       .assert.visible('@notLoggedIn');
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 46a87a2d1..eeb7be6fd 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -5,32 +5,22 @@ module.exports = {
 
     adminPage
       .navigate()
-      .waitForElementVisible('@loginLayout')
-      .waitForElementVisible('@signInForm')
-      .setValue('@emailInput', admin.email)
-      .setValue('@passwordInput', admin.password)
-      .waitForElementVisible('@signInButton')
-      .click('@signInButton');
-
-    client.pause(3000);
-    
-    adminPage
-      .waitForElementVisible('@moderationContainer');
+      .ready()
+      .login(admin);
   },
   'admin flags user\'s username as offensive': (client) => {
     const embedStream = client.page.embedStream();
-    const flagSection = client.page.embedStream().section.embed.section.flag;
 
-    const embed = embedStream
+    const comments = embedStream
       .navigate()
-      .getEmbedSection();
+      .ready();
 
-    embed
+    comments
       .waitForElementVisible('@firstComment')
       .waitForElementVisible('@flagButton')
       .click('@flagButton');
 
-    flagSection
+    comments.section.flag
       .waitForElementVisible('@flagUsernameRadio')
       .click('@flagUsernameRadio')
       .waitForElementVisible('@continueButton')
@@ -54,14 +44,14 @@ module.exports = {
   },
   'admin rejects the user flag': (client) => {
     const community = client.page.adminCommunity();
-    
+
     community
       .waitForElementVisible('@flaggedUserRejectButton')
       .click('@flaggedUserRejectButton');
   },
   'admin suspends the user': (client) => {
     const community = client.page.adminCommunity();
-    
+
     community
       .waitForElementVisible('@usernameDialog')
       .waitForElementVisible('@usernameDialogButtons')
@@ -84,56 +74,24 @@ module.exports = {
     const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();
 
-    const embed = embedStream
+    embedStream
       .navigate()
-      .getEmbedSection();
-
-    embed
-      .waitForElementVisible('@signInButton')
-      .click('@signInButton');
-
-    client.pause(3000);
-
-    // Focusing on the Login PopUp
-    client.windowHandles((result) => {
-      const handle = result.value[1];
-      client.switchWindow(handle);
-    });
-
-    const login = client.page.login();
-
-    login
-      .setValue('@emailInput', user.email)
-      .setValue('@passwordInput', user.password)
-      .waitForElementVisible('@signIn')
-      .waitForElementVisible('@loginButton')
-      .click('@loginButton');
-
-    // Focusing on the Embed Window
-    client.windowHandles((result) => {
-      const handle = result.value[0];
-      client.switchWindow(handle);
-    });
+      .ready()
+      .openLoginPopup((popup) => popup.login(user));
   },
   'user account is suspended, should see restricted message box': (client) => {
     const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    embed
+    comments
       .waitForElementVisible('@restrictedMessageBox');
   },
   'user picks another username': (client) => {
-    const {testData: {user}} = client.globals;
     const embedStream = client.page.embedStream();
-    
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
+    const comments = embedStream.section.comments;
+    const {testData: {user}} = client.globals;
 
-    embed
+    comments
       .waitForElementVisible('@suspendedAccountInput')
       .setValue('@suspendedAccountInput', `${user.username}-alternative`)
       .waitForElementVisible('@suspendedAccountSubmitButton')
@@ -141,16 +99,13 @@ module.exports = {
   },
   'user should not be able to comment': (client) => {
     const embedStream = client.page.embedStream();
-    
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
+    const comments = embedStream.section.comments;
 
-    embed
+    comments
       .waitForElementNotPresent('@commentBoxTextarea')
       .waitForElementNotPresent('@commentBoxPostButton');
   },
   after: (client) => {
-    client.end(); 
+    client.end();
   }
 };
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 8e5e33cd0..9d20a5305 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -4,6 +4,8 @@ module.exports = {
     const {testData: {admin}} = client.globals;
 
     adminPage
+      .navigate()
+      .ready()
       .login(admin);
   },
   'navigate to the embed stream': (client) => {
@@ -11,52 +13,50 @@ module.exports = {
 
     embedStream
       .navigate()
-      .getEmbedSection();
+      .ready();
   },
   'admin bans user': (client) => {
-    const embed = client.page.embedStream().section.embed;
-    const modSection = client.page.embedStream().section.embed.section.mod;
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
 
-    modSection
+    comments.section.mod
       .waitForElementVisible('@arrow')
       .click('@arrow')
       .waitForElementVisible('@menu')
       .waitForElementVisible('@banButton')
       .click('@banButton');
 
-    embed
+    embedStream
       .waitForElementVisible('@banDialog')
       .waitForElementVisible('@banDialogConfirmButton')
       .click('@banDialogConfirmButton')
       .waitForElementNotVisible('@banDialog');
   },
   'admin logs out': (client) => {
-    const embedStream = client.page.embedStream();
+    const comments = client.page.embedStream().section.comments;
 
-    embedStream
+    comments
       .logout();
   },
   'user logs in': (client) => {
     const {testData: {user}} = client.globals;
-    const embedStream = client.page.embedStream();
+    const comments = client.page.embedStream().section.comments;
 
-    embedStream
-      .login(user);
+    comments
+      .openLoginPopup((popup) => popup.login(user));
   },
   'user account is banned, should see restricted message box': (client) => {
     const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
 
-    const embed = embedStream
-      .navigate()
-      .getEmbedSection();
-
-    embed
+    comments
       .waitForElementVisible('@restrictedMessageBox');
   },
   'user logs out': (client) => {
     const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
 
-    embedStream
+    comments
       .logout();
   },
   'admin logs in (2)': (client) => {
@@ -64,11 +64,13 @@ module.exports = {
     const {testData: {admin}} = client.globals;
 
     adminPage
+      .navigate()
+      .ready()
       .login(admin);
   },
   'admin goes to community': (client) => {
     const community = client.page.adminCommunity();
-    
+
     community
       .goToPeople();
   },

From e885178dfc540b295dcb6c93ae2fefcb35b73a5d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 19:03:01 +0100
Subject: [PATCH 140/344] Refactor 2

---
 .../Community/components/CommunityMenu.js     |   4 +-
 test/e2e/page_objects/admin.js                | 148 +++++++++++++++---
 test/e2e/page_objects/adminCommunity.js       |  39 -----
 test/e2e/page_objects/embedStream.js          |   6 +-
 test/e2e/page_objects/{login.js => popup.js}  |   0
 test/e2e/specs/02_admin.js                    |  26 +--
 test/e2e/specs/03_embedStream.js              |   4 +-
 test/e2e/specs/04_userStatus.js               |  30 ++--
 test/e2e/specs/05_banUser.js                  |  21 ++-
 9 files changed, 170 insertions(+), 108 deletions(-)
 delete mode 100644 test/e2e/page_objects/adminCommunity.js
 rename test/e2e/page_objects/{login.js => popup.js} (100%)

diff --git a/client/coral-admin/src/routes/Community/components/CommunityMenu.js b/client/coral-admin/src/routes/Community/components/CommunityMenu.js
index 3e13617fe..251762b43 100644
--- a/client/coral-admin/src/routes/Community/components/CommunityMenu.js
+++ b/client/coral-admin/src/routes/Community/components/CommunityMenu.js
@@ -13,11 +13,11 @@ const CommunityMenu = ({flaggedUsernamesCount = 0}) => {
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
-          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-flagged-accounts`} activeClassName={styles.active}>
             {t('community.flaggedaccounts')}
             <CountBadge count={flaggedUsernamesCount} />
           </Link>
-          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-people`} activeClassName={styles.active}>
             {t('community.people')}
           </Link>
         </div>
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 36baaa3cb..751bd7d94 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -7,33 +7,139 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
-    login(user) {
+    openDrawer() {
       this
-        .waitForElementVisible('@loginLayout')
-        .waitForElementVisible('@signInForm')
-        .setValue('@emailInput', user.email)
-        .setValue('@passwordInput', user.password)
-        .waitForElementVisible('@signInButton')
-        .click('@signInButton')
-        .waitForElementVisible('@moderationContainer');
+        .waitForElementVisible('@drawerButton')
+        .click('@drawerButton');
+      this.expect.section('@drawer').to.be.present;
+      return this.section.drawer;
+    },
+    goToStories() {
+      this
+        .click('@storiesNav')
+        .expect.section('@stories').to.be.present;
+      return this.section.stories;
+    },
+    goToCommunity() {
+      this
+        .click('@communityNav')
+        .expect.section('@community').to.be.present;
+      return this.section.community;
+    },
+    logout() {
+      this
+        .waitForElementVisible('@settingsButton')
+        .click('@settingsButton')
+        .waitForElementVisible('@signOutButton')
+        .click('@signOutButton');
     },
   }],
   elements: {
-    'loginLayout': '.talk-admin-login',
-    'signInForm': '.talk-admin-login-sign-in',
-    'emailInput': '.talk-admin-login-sign-in #email',
-    'passwordInput': '.talk-admin-login-sign-in #password',
-    'signInButton': '.talk-admin-login-sign-in-button',
-    'storiesNav': '.talk-admin-nav-stories',
-    'storiesDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-stories',
-    'storiesSection': '.talk-admin-stories',
-    'communityNav': '.talk-admin-nav-community',
-    'communityDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-community',
-    'communitySection': '.talk-admin-community',
-    'moderationContainer': '.talk-admin-moderation-container',
     'drawerButton': '.mdl-layout__drawer-button',
     'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
+    'storiesNav': '.talk-admin-nav-stories',
+    'communityNav': '.talk-admin-nav-community',
     'settingsButton': '.talk-admin-header-settings-button',
     'signOutButton': '.talk-admin-header-sign-out',
-  }
+  },
+  sections: {
+    moderate: {
+      selector: '.talk-admin-moderation-container',
+    },
+    stories: {
+      selector: '.talk-admin-stories',
+    },
+    community: {
+      selector: '.talk-admin-community',
+      commands: [{
+        url: function() {
+          return `${this.api.launchUrl}/admin/community`;
+        },
+        ready() {
+          return this
+            .waitForElementVisible('body');
+        },
+        goToPeople() {
+          this
+            .click('@peopleNav')
+            .expect.section('@people').to.be.present;
+          return this.section.people;
+        },
+      }],
+      elements: {
+        peopleNav: '.talk-admin-nav-people',
+        flaggedAccountsNav: '.talk-admin-nav-flagged-accounts',
+        flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
+        flaggedUser:'.talk-admin-community-flagged-user',
+        flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
+        flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
+        usernameDialog: '.talk-reject-username-dialog',
+        usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+        usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+        usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
+      },
+      sections: {
+        people: {
+          selector: '.talk-admin-community-people-container',
+          elements: {
+            firstRow: '.talk-admin-community-people-row:first-child',
+            dropdownStatus: '.talk-admin-community-people-dd-status',
+            dropdownRole: '.talk-admin-community-people-dd-role',
+            dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
+            optionActive: '.dd-option#ACTIVE',
+            optionBanned: '.dd-option#BANNED',
+          }
+        }
+      }
+    },
+    drawer: {
+      selector: '.talk-admin-drawer-nav',
+      commands: [{
+        goToStories() {
+          this
+            .click('@storiesButton');
+          this.parent.expect.section('@stories').to.be.present;
+          this.close();
+          return this.parent.section.stories;
+        },
+        goToCommunity() {
+          this
+            .click('@communityButton');
+          this.parent.expect.section('@community').to.be.present;
+          this.close();
+          return this.parent.section.stories;
+        },
+        close() {
+          this.parent
+            .click('@drawerOverlay');
+        },
+      }],
+      elements: {
+        'storiesButton': '.talk-admin-drawer-nav .talk-admin-nav-stories',
+        'communityButton': '.talk-admin-drawer-nav .talk-admin-nav-community',
+      },
+    },
+    login: {
+      commands: [{
+        login(user) {
+          this
+            .waitForElementVisible('@signInForm')
+            .setValue('@emailInput', user.email)
+            .setValue('@passwordInput', user.password)
+            .waitForElementVisible('@signInButton')
+            .click('@signInButton');
+          const adminPage = this.api.page.admin();
+          adminPage.expect.section('@moderate').to.be.present;
+          return adminPage.section.moderate;
+        },
+      }],
+      selector: '.talk-admin-login',
+      elements: {
+        'signInForm': '.talk-admin-login-sign-in',
+        'emailInput': '.talk-admin-login-sign-in #email',
+        'passwordInput': '.talk-admin-login-sign-in #password',
+        'signInButton': '.talk-admin-login-sign-in-button',
+      }
+    },
+  },
 };
diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
deleted file mode 100644
index 0e063915a..000000000
--- a/test/e2e/page_objects/adminCommunity.js
+++ /dev/null
@@ -1,39 +0,0 @@
-module.exports = {
-  commands: [{
-    url: function() {
-      return `${this.api.launchUrl}/admin/community`;
-    },
-    ready() {
-      return this
-        .waitForElementVisible('body');
-    },
-    goToPeople() {
-      this
-        .navigate(`${this.url()}/people`);
-    },
-  }],
-  elements: {
-    container: '.talk-admin-community',
-    flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
-    flaggedUser:'.talk-admin-community-flagged-user',
-    flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
-    flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
-    usernameDialog: '.talk-reject-username-dialog',
-    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
-    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
-    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
-  },
-  sections: {
-    people: {
-      selector: '.talk-admin-community-people-container',
-      elements: {
-        firstRow: '.talk-admin-community-people-row:first-child',
-        dropdownStatus: '.talk-admin-community-people-dd-status',
-        dropdownRole: '.talk-admin-community-people-dd-role',
-        dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
-        optionActive: '.dd-option#ACTIVE',
-        optionBanned: '.dd-option#BANNED',
-      }
-    }
-  }
-};
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 5b649fecb..2f32ac2ed 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -64,8 +64,8 @@ module.exports = {
             this.api.switchWindow(handles[1]);
           });
 
-          const login = this.api.page.login().ready();
-          callback(login);
+          const popup = this.api.page.popup().ready();
+          callback(popup);
 
           // Give a tiny bit of time to let popup close.
           this.api.pause(50);
@@ -80,7 +80,7 @@ module.exports = {
           // Focusing on the Embed Window
           windowHandler.windowHandles((handles) => {
             this.api.switchWindow(handles[0]);
-            this.api.page.embedStream().switchToIframe();
+            this.parent.switchToIframe();
           });
         },
         logout() {
diff --git a/test/e2e/page_objects/login.js b/test/e2e/page_objects/popup.js
similarity index 100%
rename from test/e2e/page_objects/login.js
rename to test/e2e/page_objects/popup.js
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 4973f24ab..be35653de 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -8,37 +8,25 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage
-      .navigate()
-      .ready()
-      .login(admin);
+    adminPage.navigate();
+    adminPage.expect.section('@login').to.be.present;
+    adminPage.section.login.login(admin);
   },
 
   'Admin goes to Stories': (client) => {
     const adminPage = client.page.admin();
 
     adminPage
-      .waitForElementVisible('@drawerButton')
-      .click('@drawerButton')
-      .waitForElementVisible('@storiesDrawerNav')
-      .click('@storiesDrawerNav')
-      .waitForElementVisible('@drawerOverlay')
-      .click('@drawerOverlay')
-      .waitForElementVisible('@storiesSection');
-
+      .openDrawer()
+        .goToStories();
   },
 
   'Admin goes to Community': (client) => {
     const adminPage = client.page.admin();
 
     adminPage
-      .waitForElementVisible('@drawerButton')
-      .click('@drawerButton')
-      .waitForElementVisible('@communityDrawerNav')
-      .click('@communityDrawerNav')
-      .waitForElementVisible('@drawerOverlay')
-      .click('@drawerOverlay')
-      .waitForElementVisible('@communitySection');
+      .openDrawer()
+        .goToCommunity();
   },
 
   after: (client) => {
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index f4c1b94b6..58ef88918 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -21,8 +21,8 @@ module.exports = {
       .ready();
 
     comments
-      .openLoginPopup((login) => {
-        login.register(user);
+      .openLoginPopup((popup) => {
+        popup.register(user);
       });
   },
   'user posts a comment': (client) => {
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index eeb7be6fd..7a8a8ab6a 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -1,11 +1,16 @@
 module.exports = {
+   beforeEach: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'admin flags user\'s username as offensive': (client) => {
@@ -32,25 +37,26 @@ module.exports = {
       .click('@continueButton');
   },
   'admin goes to Reported Usernames': (client) => {
-    const community = client.page.adminCommunity();
+    const adminPage = client.page.admin();
+
+    const community = adminPage
+      .navigate()
+      .ready()
+      .goToCommunity();
 
     community
-      .navigate();
-
-    community
-      .waitForElementVisible('@container')
       .waitForElementVisible('@flaggedAccountsContainer')
       .waitForElementVisible('@flaggedUser');
   },
   'admin rejects the user flag': (client) => {
-    const community = client.page.adminCommunity();
+    const community = client.page.admin().section.community;
 
     community
       .waitForElementVisible('@flaggedUserRejectButton')
       .click('@flaggedUserRejectButton');
   },
   'admin suspends the user': (client) => {
-    const community = client.page.adminCommunity();
+    const community = client.page.admin().section.community;
 
     community
       .waitForElementVisible('@usernameDialog')
@@ -62,13 +68,7 @@ module.exports = {
       .waitForElementNotPresent('@flaggedUser');
   },
   'admin logs out': (client) => {
-    const admin = client.page.admin();
-
-    admin
-      .waitForElementVisible('@settingsButton')
-      .click('@settingsButton')
-      .waitForElementVisible('@signOutButton')
-      .click('@signOutButton');
+    client.page.admin().logout();
   },
   'user logs in': (client) => {
     const {testData: {user}} = client.globals;
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 9d20a5305..4c6c63437 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -5,7 +5,9 @@ module.exports = {
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'navigate to the embed stream': (client) => {
@@ -65,19 +67,24 @@ module.exports = {
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'admin goes to community': (client) => {
-    const community = client.page.adminCommunity();
+    const adminPage = client.page.admin();
 
-    community
-      .goToPeople();
+    adminPage
+      .goToCommunity()
+        .goToPeople();
   },
   'admin removes ban from user': (client) => {
-    const modSection = client.page.adminCommunity().section.people;
+    const people = client.page.admin()
+      .section.community
+      .section.people;
 
-    modSection
+    people
       .waitForElementVisible('@firstRow')
       .waitForElementVisible('@dropdownStatus')
       .click('@dropdownStatus')

From da35f39baf76cc710814aa0ca7a9350a8abe4349 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 19:19:47 +0100
Subject: [PATCH 141/344] Set resolution

---
 nightwatch-browserstack.conf.js  | 2 +-
 test/e2e/specs/01_install.js     | 4 ++++
 test/e2e/specs/02_admin.js       | 3 ++-
 test/e2e/specs/03_embedStream.js | 5 +++++
 test/e2e/specs/04_userStatus.js  | 2 ++
 test/e2e/specs/05_banUser.js     | 5 +++++
 6 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index d79f6917a..53f8acba4 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -26,7 +26,7 @@ const nightwatch_config = {
 
         // Disable this, as it makes bs slow and brittle.
         'browserstack.networkLogs': false,
-        'browserstack.resolution': '1600x1200',
+        'resolution': '1600x1200',
       },
       screenshots : {
         enabled: true,
diff --git a/test/e2e/specs/01_install.js b/test/e2e/specs/01_install.js
index 25c902e0f..05db7f259 100644
--- a/test/e2e/specs/01_install.js
+++ b/test/e2e/specs/01_install.js
@@ -1,6 +1,10 @@
 module.exports = {
   '@tags': ['install'],
 
+   beforeEach: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
+
   'User goes to install': (client) => {
     const install = client.page.install();
 
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index be35653de..a3560f55f 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,9 +1,10 @@
 module.exports = {
   '@tags': ['admin', 'login'],
-   beforeEach: (client) => {
 
+   beforeEach: (client) => {
     client.resizeWindow(1024, 800);
   },
+
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 58ef88918..a4123f457 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,5 +1,10 @@
 module.exports = {
   '@tags': ['embedStream', 'login'],
+
+   beforeEach: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
+
   'creates a new asset': (client) => {
     const asset = 'newAssetTest';
     const embedStream = client.page.embedStream();
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 7a8a8ab6a..09bb6ff6a 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -1,7 +1,9 @@
 module.exports = {
+
    beforeEach: (client) => {
     client.resizeWindow(1600, 1200);
   },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 4c6c63437..5268f0133 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -1,4 +1,9 @@
 module.exports = {
+
+   beforeEach: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;

From 53461df2878916a7cb73e4a99cff344e7fa74891 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 19:30:22 +0100
Subject: [PATCH 142/344] Increase wait for iframe time

---
 test/e2e/page_objects/embedStream.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 2f32ac2ed..011f9bce2 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -29,7 +29,7 @@ module.exports = {
 
       // Pause a bit to let iframe initialize in the hope that it'll
       // fix https://www.browserstack.com/automate/builds/96419cf46e3d6376a36ae6d3f90934112df1ed91/sessions/224f1a1566c1c8c7859e2e76ece51862200f0173#automate_button
-      this.api.pause(200);
+      this.api.pause(1000);
 
       this.api.frame(iframeId);
       return this;

From 42a477ae4104315df81d2fb32d3218dc5a7a344d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 21:51:03 +0100
Subject: [PATCH 143/344] Fix firefox popup bug e2e

---
 test/e2e/page_objects/embedStream.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 011f9bce2..476b16e04 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -80,8 +80,16 @@ module.exports = {
           // Focusing on the Embed Window
           windowHandler.windowHandles((handles) => {
             this.api.switchWindow(handles[0]);
-            this.parent.switchToIframe();
+
+            // For some reasons firefox does not automatically load auth after login.
+            // https://www.browserstack.com/automate/builds/37650cb4e66c6edce0ba0800a1c1b7e7f74bf991/sessions/7a4e9da69b0f9ecdf8b7fa9150639e47b1532cb0#automate_button
+            if (this.api.capabilities.browserName === 'firefox') {
+              this.parent.navigate().ready();
+            } else {
+              this.parent.switchToIframe();
+            }
           });
+          return this;
         },
         logout() {
           this

From ca7b7909620a78d68a56c7a683cac5c2660cf029 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 21:51:31 +0100
Subject: [PATCH 144/344] Return this

---
 test/e2e/page_objects/popup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/page_objects/popup.js b/test/e2e/page_objects/popup.js
index 89b071e9a..4d2aee7b6 100644
--- a/test/e2e/page_objects/popup.js
+++ b/test/e2e/page_objects/popup.js
@@ -5,7 +5,7 @@ module.exports = {
         .waitForElementVisible('body');
     },
     login(user) {
-      this
+      return this
         .setValue('@emailInput', user.email)
         .setValue('@passwordInput', user.password)
         .waitForElementVisible('@signIn')
@@ -13,7 +13,7 @@ module.exports = {
         .click('@loginButton');
     },
     register(user) {
-      this
+      return this
         .waitForElementVisible('@registerButton')
         .click('@registerButton')
         .setValue('@emailInput', user.email)

From b2929e9a8339f4a88692781efe21ac56a696eff0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 21:51:41 +0100
Subject: [PATCH 145/344] Fail fast

---
 test/e2e/specs/01_install.js     | 9 ++++++++-
 test/e2e/specs/02_admin.js       | 9 ++++++++-
 test/e2e/specs/03_embedStream.js | 9 ++++++++-
 test/e2e/specs/04_userStatus.js  | 9 ++++++++-
 test/e2e/specs/05_banUser.js     | 9 ++++++++-
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/test/e2e/specs/01_install.js b/test/e2e/specs/01_install.js
index 05db7f259..929fb5d45 100644
--- a/test/e2e/specs/01_install.js
+++ b/test/e2e/specs/01_install.js
@@ -1,10 +1,17 @@
 module.exports = {
   '@tags': ['install'],
 
-   beforeEach: (client) => {
+   before: (client) => {
     client.resizeWindow(1600, 1200);
   },
 
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
   'User goes to install': (client) => {
     const install = client.page.install();
 
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index a3560f55f..5751ea1b9 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,10 +1,17 @@
 module.exports = {
   '@tags': ['admin', 'login'],
 
-   beforeEach: (client) => {
+   before: (client) => {
     client.resizeWindow(1024, 800);
   },
 
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index a4123f457..e29e063cf 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,10 +1,17 @@
 module.exports = {
   '@tags': ['embedStream', 'login'],
 
-   beforeEach: (client) => {
+   before: (client) => {
     client.resizeWindow(1600, 1200);
   },
 
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
   'creates a new asset': (client) => {
     const asset = 'newAssetTest';
     const embedStream = client.page.embedStream();
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 09bb6ff6a..e2ae864f4 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -1,9 +1,16 @@
 module.exports = {
 
-   beforeEach: (client) => {
+   before: (client) => {
     client.resizeWindow(1600, 1200);
   },
 
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 5268f0133..a9715c4bb 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -1,9 +1,16 @@
 module.exports = {
 
-   beforeEach: (client) => {
+   before: (client) => {
     client.resizeWindow(1600, 1200);
   },
 
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;

From f0839c57df9df955878d7525f33e18f1749b1459 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 21:52:08 +0100
Subject: [PATCH 146/344] Change to allowed name

---
 test/e2e/specs/04_userStatus.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index e2ae864f4..e2234ec59 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -102,9 +102,10 @@ module.exports = {
 
     comments
       .waitForElementVisible('@suspendedAccountInput')
-      .setValue('@suspendedAccountInput', `${user.username}-alternative`)
+      .setValue('@suspendedAccountInput', `${user.username}_alternative`)
       .waitForElementVisible('@suspendedAccountSubmitButton')
-      .click('@suspendedAccountSubmitButton');
+      .click('@suspendedAccountSubmitButton')
+      .waitForElementVisible('@suspendedAccountInput');
   },
   'user should not be able to comment': (client) => {
     const embedStream = client.page.embedStream();

From 9abb3d30dacb18a3365b0ab1d927644e9f8bcfb6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 22:04:32 +0100
Subject: [PATCH 147/344] e2e fixes

---
 test/e2e/specs/01_install.js     | 7 ++++---
 test/e2e/specs/02_admin.js       | 8 ++++----
 test/e2e/specs/03_embedStream.js | 7 ++++---
 test/e2e/specs/04_userStatus.js  | 9 +++++----
 test/e2e/specs/05_banUser.js     | 4 ++++
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/test/e2e/specs/01_install.js b/test/e2e/specs/01_install.js
index 929fb5d45..684ad7a30 100644
--- a/test/e2e/specs/01_install.js
+++ b/test/e2e/specs/01_install.js
@@ -12,6 +12,10 @@ module.exports = {
     done();
   },
 
+  after: (client) => {
+    client.end();
+  },
+
   'User goes to install': (client) => {
     const install = client.page.install();
 
@@ -86,7 +90,4 @@ module.exports = {
     install
       .expect.section('@step5').to.be.present;
   },
-  after: (client) => {
-    client.end();
-  }
 };
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 5751ea1b9..5c921eab9 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -12,6 +12,10 @@ module.exports = {
     done();
   },
 
+  after: (client) => {
+    client.end();
+  },
+
   'Admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -36,8 +40,4 @@ module.exports = {
       .openDrawer()
         .goToCommunity();
   },
-
-  after: (client) => {
-    client.end();
-  }
 };
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index e29e063cf..567596dd2 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -12,6 +12,10 @@ module.exports = {
     done();
   },
 
+  after: (client) => {
+    client.end();
+  },
+
   'creates a new asset': (client) => {
     const asset = 'newAssetTest';
     const embedStream = client.page.embedStream();
@@ -105,7 +109,4 @@ module.exports = {
     profile
       .assert.visible('@notLoggedIn');
   },
-  after: (client) => {
-    client.end();
-  }
 };
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index e2234ec59..33454f3b9 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -11,6 +11,10 @@ module.exports = {
     done();
   },
 
+  after: (client) => {
+    client.end();
+  },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -105,7 +109,7 @@ module.exports = {
       .setValue('@suspendedAccountInput', `${user.username}_alternative`)
       .waitForElementVisible('@suspendedAccountSubmitButton')
       .click('@suspendedAccountSubmitButton')
-      .waitForElementVisible('@suspendedAccountInput');
+      .waitForElementNotPresent('@suspendedAccountInput');
   },
   'user should not be able to comment': (client) => {
     const embedStream = client.page.embedStream();
@@ -115,7 +119,4 @@ module.exports = {
       .waitForElementNotPresent('@commentBoxTextarea')
       .waitForElementNotPresent('@commentBoxPostButton');
   },
-  after: (client) => {
-    client.end();
-  }
 };
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index a9715c4bb..029957a48 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -11,6 +11,10 @@ module.exports = {
     done();
   },
 
+  after: (client) => {
+    client.end();
+  },
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;

From 0b18bb06e7ae9f2b27ada18fe4a8e7f558b1d916 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 22:31:53 +0100
Subject: [PATCH 148/344] More tests

---
 test/e2e/specs/05_banUser.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 029957a48..3eaf7f5e3 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -107,4 +107,29 @@ module.exports = {
       .waitForElementVisible('@dropdownStatusActive')
       .click('@optionActive');
   },
+  'admin logs out 2': (client) => {
+    client.page.admin().logout();
+  },
+  'navigate to the embed stream 2': (client) => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .ready();
+  },
+  'user logs in 2': (client) => {
+    const {testData: {user}} = client.globals;
+    const comments = client.page.embedStream().section.comments;
+
+    comments
+      .openLoginPopup((popup) => popup.login(user));
+  },
+  'user should be able to comment': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .waitForElementPresent('@commentBoxTextarea')
+      .waitForElementPresent('@commentBoxPostButton');
+  },
 };

From 31ee8139b6368f2e96d49ec641609743b6a589db Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Nov 2017 23:32:03 +0100
Subject: [PATCH 149/344] Use visible were suitable and wait for drawer to
 dissappear

---
 test/e2e/page_objects/admin.js       | 17 +++++++++--------
 test/e2e/page_objects/embedStream.js |  6 +++---
 test/e2e/specs/01_install.js         | 10 +++++-----
 test/e2e/specs/02_admin.js           |  2 +-
 test/e2e/specs/04_userStatus.js      |  2 +-
 test/e2e/specs/05_banUser.js         |  8 ++++----
 6 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 751bd7d94..a549df672 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -11,19 +11,19 @@ module.exports = {
       this
         .waitForElementVisible('@drawerButton')
         .click('@drawerButton');
-      this.expect.section('@drawer').to.be.present;
+      this.expect.section('@drawer').to.be.visible;
       return this.section.drawer;
     },
     goToStories() {
       this
         .click('@storiesNav')
-        .expect.section('@stories').to.be.present;
+        .expect.section('@stories').to.be.visible;
       return this.section.stories;
     },
     goToCommunity() {
       this
         .click('@communityNav')
-        .expect.section('@community').to.be.present;
+        .expect.section('@community').to.be.visible;
       return this.section.community;
     },
     logout() {
@@ -62,7 +62,7 @@ module.exports = {
         goToPeople() {
           this
             .click('@peopleNav')
-            .expect.section('@people').to.be.present;
+            .expect.section('@people').to.be.visible;
           return this.section.people;
         },
       }],
@@ -98,20 +98,21 @@ module.exports = {
         goToStories() {
           this
             .click('@storiesButton');
-          this.parent.expect.section('@stories').to.be.present;
+          this.parent.expect.section('@stories').to.be.visible;
           this.close();
           return this.parent.section.stories;
         },
         goToCommunity() {
           this
             .click('@communityButton');
-          this.parent.expect.section('@community').to.be.present;
+          this.parent.expect.section('@community').to.be.visible;
           this.close();
           return this.parent.section.stories;
         },
         close() {
           this.parent
-            .click('@drawerOverlay');
+            .click('@drawerOverlay')
+            .waitForElementNotPresent('@drawerOverlay');
         },
       }],
       elements: {
@@ -129,7 +130,7 @@ module.exports = {
             .waitForElementVisible('@signInButton')
             .click('@signInButton');
           const adminPage = this.api.page.admin();
-          adminPage.expect.section('@moderate').to.be.present;
+          adminPage.expect.section('@moderate').to.be.visible;
           return adminPage.section.moderate;
         },
       }],
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 476b16e04..ccf7a8522 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -5,19 +5,19 @@ module.exports = {
   commands: [{
     ready: function() {
       this.switchToIframe();
-      this.expect.section('@comments').to.be.present;
+      this.expect.section('@comments').to.be.visible;
       return this.section.comments;
     },
     goToProfileSection: function() {
       this.waitForElementVisible('@profileTabButton');
       this.click('@profileTabButton');
-      this.expect.section('@profile').to.be.present;
+      this.expect.section('@profile').to.be.visible;
       return this.section.profile;
     },
     goToCommentsSection: function() {
       this.waitForElementVisible('@commentsTabButton');
       this.click('@commentsTabButton');
-      this.expect.section('@comments').to.be.present;
+      this.expect.section('@comments').to.be.visible;
       return this.section.comments;
     },
     navigateToAsset: function(asset) {
diff --git a/test/e2e/specs/01_install.js b/test/e2e/specs/01_install.js
index 684ad7a30..078a22e50 100644
--- a/test/e2e/specs/01_install.js
+++ b/test/e2e/specs/01_install.js
@@ -21,7 +21,7 @@ module.exports = {
 
     install
       .navigate()
-      .expect.section('@step1').to.be.present;
+      .expect.section('@step1').to.be.visible;
 
   },
   'User clicks get started button': (client) => {
@@ -35,7 +35,7 @@ module.exports = {
     const install = client.page.install();
 
     install
-      .expect.section('@step2').to.be.present;
+      .expect.section('@step2').to.be.visible;
   },
   'User fills step 2': (client) => {
     const step2 = client.page.install().section.step2;
@@ -51,7 +51,7 @@ module.exports = {
     const install = client.page.install();
 
     install
-      .expect.section('@step3').to.be.present;
+      .expect.section('@step3').to.be.visible;
   },
   'User fills step 3': (client) => {
     const step3 = client.page.install().section.step3;
@@ -69,7 +69,7 @@ module.exports = {
     const install = client.page.install();
 
     install
-      .expect.section('@step4').to.be.present;
+      .expect.section('@step4').to.be.visible;
   },
   'User fills step 4': (client) => {
     const step4 = client.page.install().section.step4;
@@ -88,6 +88,6 @@ module.exports = {
     const install = client.page.install();
 
     install
-      .expect.section('@step5').to.be.present;
+      .expect.section('@step5').to.be.visible;
   },
 };
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 5c921eab9..90b14934d 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -21,7 +21,7 @@ module.exports = {
     const {testData: {admin}} = client.globals;
 
     adminPage.navigate();
-    adminPage.expect.section('@login').to.be.present;
+    adminPage.expect.section('@login').to.be.visible;
     adminPage.section.login.login(admin);
   },
 
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 33454f3b9..ce28a1e4d 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -21,7 +21,7 @@ module.exports = {
 
     adminPage
       .navigate()
-      .expect.section('@login').to.be.present;
+      .expect.section('@login').to.be.visible;
 
     adminPage.section.login
       .login(admin);
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 3eaf7f5e3..512e2deed 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -21,7 +21,7 @@ module.exports = {
 
     adminPage
       .navigate()
-      .expect.section('@login').to.be.present;
+      .expect.section('@login').to.be.visible;
 
     adminPage.section.login
       .login(admin);
@@ -83,7 +83,7 @@ module.exports = {
 
     adminPage
       .navigate()
-      .expect.section('@login').to.be.present;
+      .expect.section('@login').to.be.visible;
 
     adminPage.section.login
       .login(admin);
@@ -129,7 +129,7 @@ module.exports = {
     const comments = embedStream.section.comments;
 
     comments
-      .waitForElementPresent('@commentBoxTextarea')
-      .waitForElementPresent('@commentBoxPostButton');
+      .waitForElementVisible('@commentBoxTextarea')
+      .waitForElementVisible('@commentBoxPostButton');
   },
 };

From bcf83703597cdefb041ef1cb893b241360600da3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 10 Nov 2017 10:04:22 +0100
Subject: [PATCH 150/344] Temporarily enable bs testing on this branch

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index e72d1a6ce..ffd17da40 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 CIRCLE_TEST_REPORTS=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
-CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
+CIRCLE_BRANCH=${CIRCLE_BRANCH_XX:-master}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}

From dd1fbf30ca37bbe6200c42be6aaceda58dae6897 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 10 Nov 2017 10:51:30 +0100
Subject: [PATCH 151/344] Add navigateAndLogin

---
 test/e2e/page_objects/admin.js  |  7 +++++++
 test/e2e/specs/02_admin.js      |  4 +---
 test/e2e/specs/04_userStatus.js |  7 +------
 test/e2e/specs/05_banUser.js    | 14 ++------------
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index a549df672..b73c1f0e1 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -33,6 +33,12 @@ module.exports = {
         .waitForElementVisible('@signOutButton')
         .click('@signOutButton');
     },
+    navigateAndLogin(user) {
+      this
+        .navigate()
+        .expect.section('@login').to.be.visible;
+      return this.section.login.login(user);
+    },
   }],
   elements: {
     'drawerButton': '.mdl-layout__drawer-button',
@@ -113,6 +119,7 @@ module.exports = {
           this.parent
             .click('@drawerOverlay')
             .waitForElementNotPresent('@drawerOverlay');
+          return this.parent;
         },
       }],
       elements: {
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 90b14934d..29957e487 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -20,9 +20,7 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage.navigate();
-    adminPage.expect.section('@login').to.be.visible;
-    adminPage.section.login.login(admin);
+    adminPage.navigateAndLogin(admin);
   },
 
   'Admin goes to Stories': (client) => {
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index ce28a1e4d..5a7593e53 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -19,12 +19,7 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage
-      .navigate()
-      .expect.section('@login').to.be.visible;
-
-    adminPage.section.login
-      .login(admin);
+    adminPage.navigateAndLogin(admin);
   },
   'admin flags user\'s username as offensive': (client) => {
     const embedStream = client.page.embedStream();
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 512e2deed..da0d11e7a 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -19,12 +19,7 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage
-      .navigate()
-      .expect.section('@login').to.be.visible;
-
-    adminPage.section.login
-      .login(admin);
+    adminPage.navigateAndLogin(admin);
   },
   'navigate to the embed stream': (client) => {
     const embedStream = client.page.embedStream();
@@ -81,12 +76,7 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage
-      .navigate()
-      .expect.section('@login').to.be.visible;
-
-    adminPage.section.login
-      .login(admin);
+    adminPage.navigateAndLogin(admin);
   },
   'admin goes to community': (client) => {
     const adminPage = client.page.admin();

From 933903de2fe394e28a8ffb148d634326241eab1c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 10 Nov 2017 14:05:43 +0100
Subject: [PATCH 152/344] Remove IE 64bit from ci until they fix the keyboard
 input issues

---
 scripts/e2e-ci.sh | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index b6f933528..a828073d9 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -7,7 +7,8 @@ CIRCLE_BRANCH=${CIRCLE_BRANCH_XX:-master}
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
-BROWSERS="chrome,firefox,ie,edge" #safari
+# IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
+BROWSERS="chrome,firefox,edge" #ie safari
 
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack

From b0573749ee9ec36960f5b8dde8125f861d342359 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 10:26:34 -0300
Subject: [PATCH 153/344] Adding classes and missingproptypes

---
 client/coral-admin/src/components/ActionsMenu.js           | 4 +++-
 client/coral-admin/src/components/ActionsMenuItem.js       | 6 ++++--
 client/coral-admin/src/components/SuspendUserDialog.js     | 7 ++++---
 client/coral-admin/src/containers/SuspendUserDialog.js     | 7 +++++++
 .../src/routes/Moderation/components/Comment.js            | 4 ++--
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/ActionsMenu.js b/client/coral-admin/src/components/ActionsMenu.js
index 25aee1fbc..6351afda7 100644
--- a/client/coral-admin/src/components/ActionsMenu.js
+++ b/client/coral-admin/src/components/ActionsMenu.js
@@ -32,8 +32,9 @@ class ActionsMenu extends React.Component {
   };
 
   render() {
+    const {className = ''} = this.props;
     return (
-      <div className={styles.root} onBlur={this.syncOpenState} >
+      <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
         <Button
           cStyle='actions'
           className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
@@ -59,6 +60,7 @@ class ActionsMenu extends React.Component {
 ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export default ActionsMenu;
diff --git a/client/coral-admin/src/components/ActionsMenuItem.js b/client/coral-admin/src/components/ActionsMenuItem.js
index d9497a6ce..45b2eb78c 100644
--- a/client/coral-admin/src/components/ActionsMenuItem.js
+++ b/client/coral-admin/src/components/ActionsMenuItem.js
@@ -3,12 +3,14 @@ import cn from 'classnames';
 import {MenuItem} from 'react-mdl';
 import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
+import camelCase from 'lodash/camelcase';
 
 const ActionsMenuItem = (props) =>
-  <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
-
+  <MenuItem className={cn(styles.menuItem, props.className, 'action-menu-item')} {...props} id={camelCase(props.children)}/>;
+  
 ActionsMenuItem.propTypes = {
   className: PropTypes.string,
+  children: PropTypes.string,
 };
 
 export default ActionsMenuItem;
diff --git a/client/coral-admin/src/components/SuspendUserDialog.js b/client/coral-admin/src/components/SuspendUserDialog.js
index d56201e2f..cfff3b17e 100644
--- a/client/coral-admin/src/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/components/SuspendUserDialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import {RadioGroup, Radio} from 'react-mdl';
 import styles from './SuspendUserDialog.css';
+import cn from 'classnames';
 
 import Button from 'coral-ui/components/Button';
 
@@ -87,7 +88,7 @@ class SuspendUserDialog extends React.Component {
           <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
             {t('suspenduser.cancel')}
           </Button>
-          <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
+          <Button cStyle="black" className={cn(styles.perform, 'talk-admin-suspend-user-dialog-confirm')} onClick={this.goToStep1} raised>
             {t('suspenduser.suspend_user')}
           </Button>
         </div>
@@ -120,7 +121,7 @@ class SuspendUserDialog extends React.Component {
           </Button>
           <Button
             cStyle="black"
-            className={styles.perform}
+            className={cn(styles.perform, 'talk-admin-suspend-user-dialog-send')}
             onClick={this.handlePerform}
             disabled={this.state.message.length === 0}
             raised
@@ -137,7 +138,7 @@ class SuspendUserDialog extends React.Component {
     const {step} = this.state;
     return (
       <Dialog
-        className={styles.dialog}
+        className={cn(styles.dialog, 'talk-admin-suspend-user-dialog')}
         onCancel={onCancel}
         open={open}
       >
diff --git a/client/coral-admin/src/containers/SuspendUserDialog.js b/client/coral-admin/src/containers/SuspendUserDialog.js
index 12e9843b4..3d5283df9 100644
--- a/client/coral-admin/src/containers/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/SuspendUserDialog.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import SuspendUserDialog from '../components/SuspendUserDialog';
@@ -44,6 +45,12 @@ class SuspendUserDialogContainer extends Component {
   }
 }
 
+SuspendUserDialogContainer.propTypes = {
+  open: PropTypes.bool,
+  hideSuspendUserDialog: PropTypes.func,
+  username: PropTypes.object,
+};
+
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
       __typename
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index aedc69739..cea49720b 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -73,7 +73,7 @@ class Comment extends React.Component {
     return (
       <li
         tabIndex={0}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected})}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected}, 'talk-admin-moderate-comment')}
         id={`comment_${comment.id}`}
       >
         <div className={styles.container}>
@@ -95,7 +95,7 @@ class Comment extends React.Component {
                   : null
               }
               {currentUserId !== comment.user.id &&
-                <ActionsMenu icon="not_interested">
+                <ActionsMenu icon="not_interested" className="talk-admin-moderate-comment-actions-menu">
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
                     onClick={this.showSuspendUserDialog}>

From ebda51dc0f8a1aca7101edbc7553f40903d442d0 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 10:26:54 -0300
Subject: [PATCH 154/344] Adding suspension test

---
 test/e2e/page_objects/admin.js       |  16 ++++
 test/e2e/page_objects/embedStream.js |   2 +
 test/e2e/specs/06_suspendUser.js     | 120 +++++++++++++++++++++++++++
 3 files changed, 138 insertions(+)
 create mode 100644 test/e2e/specs/06_suspendUser.js

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index b73c1f0e1..f0ccd9f29 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -14,6 +14,12 @@ module.exports = {
       this.expect.section('@drawer').to.be.visible;
       return this.section.drawer;
     },
+    goToModerate() {
+      this
+        .click('@moderateNav')
+        .expect.section('@moderate').to.be.visible;
+      return this.section.stories;
+    },
     goToStories() {
       this
         .click('@storiesNav')
@@ -45,12 +51,22 @@ module.exports = {
     'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
     'storiesNav': '.talk-admin-nav-stories',
     'communityNav': '.talk-admin-nav-community',
+    'moderateNav': '.talk-admin-nav-moderate',
     'settingsButton': '.talk-admin-header-settings-button',
     'signOutButton': '.talk-admin-header-sign-out',
   },
   sections: {
     moderate: {
       selector: '.talk-admin-moderation-container',
+      elements: {
+        suspendUserDialog: '.talk-admin-suspend-user-dialog',
+        suspendUserConfirmButton: 'talk-admin-suspend-user-dialog-confirm',
+        supendUserSendButton: 'talk-admin-suspend-user-dialog-send',
+        comment: '.talk-admin-moderate-comment',
+        commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
+        actionItemSuspendUser: '.talk-admin-moderate-comment-actions-menu .action-menu-item#supendUser',
+        actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
+      }
     },
     stories: {
       selector: '.talk-admin-stories',
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index ccf7a8522..1cecad2a3 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -117,8 +117,10 @@ module.exports = {
           elements: {
             offensiveUsernameRadio: '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
             flagUsernameRadio: '.talk-plugin-flags-popup-radio#USERS',
+            flagCommentRadio: '.talk-plugin-flags-popup-radio#COMMENTS',
             continueButton: '.talk-plugin-flags-popup-button',
             popUpText: '.talk-plugin-flags-popup-text',
+            spamCommentRadio: '.talk-plugin-flags-popup-radio#COMMENT_SPAM',
           }
         },
         mod: {
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
new file mode 100644
index 000000000..8aeaf1574
--- /dev/null
+++ b/test/e2e/specs/06_suspendUser.js
@@ -0,0 +1,120 @@
+module.exports = {
+
+  before: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
+
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
+  after: (client) => {
+    client.end();
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const comments = client.page.embedStream().section.comments;
+
+    comments
+      .openLoginPopup((popup) => popup.login(user));
+  },
+  'user posts comment': (client) => {
+    const comments = client.page.embedStream().section.comments;
+    const {testData: {comment}} = client.globals;
+
+    comments
+      .waitForElementVisible('@commentBoxTextarea')
+      .setValue('@commentBoxTextarea', comment.body)
+      .waitForElementVisible('@commentBoxPostButton')
+      .click('@commentBoxPostButton')
+      .waitForElementVisible('@firstCommentContent')
+      .getText('@firstCommentContent', (result) => {
+        comments.assert.equal(result.value, comment.body);
+      });
+  },
+  'user logs out': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .logout();
+  },
+  'admin logs in': (client) => {
+    const adminPage = client.page.admin();
+    const {testData: {admin}} = client.globals;
+
+    adminPage.navigateAndLogin(admin);
+  },
+  'navigate to the embed stream': (client) => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .ready();
+  },
+  'admin reports comment': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@flagButton')
+      .click('@flagButton');
+
+    comments.section.flag
+      .waitForElementVisible('@flagCommentRadio')
+      .click('@flagCommentRadio')
+      .waitForElementVisible('@continueButton')
+      .click('@continueButton')
+      .waitForElementVisible('@spamCommentRadio')
+      .click('@spamCommentRadio')
+      .click('@continueButton')
+      .waitForElementVisible('@popUpText')
+      .click('@continueButton');
+  },
+  'admin suspends user': (client) => {
+    const adminPage = client.page.admin();
+    const moderate = adminPage.section.moderate;
+    
+    adminPage
+      .navigate()
+      .ready()
+      .goToModerate();
+
+    moderate
+      .waitForElementVisible('@comment')
+      .waitForElementVisible('@commentActionMenu')
+      .waitForElementVisible('@actionMenuButton')
+      .click('@actionMenuButton')
+      .waitForElementVisible('@actionItemSuspendUser')
+      .click('@actionItemSuspendUser')
+      .waitForElementVisible('@suspendUserDialog')
+      .waitForElementVisible('@suspendUserConfirmButton')
+      .click('@suspendUserConfirmButton')
+      .waitForElementVisible('@supendUserSendButton')
+      .click('@supendUserSendButton');
+  },
+  'admin logs out': (client) => {
+    const comments = client.page.embedStream().section.comments;
+
+    comments
+      .logout();
+  },
+  'user logs in (2)': (client) => {
+    const {testData: {user}} = client.globals;
+    const comments = client.page.embedStream().section.comments;
+
+    comments
+      .openLoginPopup((popup) => popup.login(user));
+  },
+  'user account is suspended, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .waitForElementVisible('@restrictedMessageBox');
+  },
+};

From 6ff4994d0d617bd2050576582ccd4ce0eb6332fe Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 10:33:55 -0300
Subject: [PATCH 155/344] lodash.camelcase

---
 client/coral-admin/src/components/ActionsMenuItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/components/ActionsMenuItem.js b/client/coral-admin/src/components/ActionsMenuItem.js
index 45b2eb78c..2a98a06b1 100644
--- a/client/coral-admin/src/components/ActionsMenuItem.js
+++ b/client/coral-admin/src/components/ActionsMenuItem.js
@@ -3,7 +3,7 @@ import cn from 'classnames';
 import {MenuItem} from 'react-mdl';
 import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
-import camelCase from 'lodash/camelcase';
+import camelCase from 'lodash.camelcase';
 
 const ActionsMenuItem = (props) =>
   <MenuItem className={cn(styles.menuItem, props.className, 'action-menu-item')} {...props} id={camelCase(props.children)}/>;

From fbc5a9d74b4669711a6ffcabc10ca9dce7efa4dc Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 10:45:26 -0300
Subject: [PATCH 156/344] moderate

---
 test/e2e/page_objects/admin.js   | 2 +-
 test/e2e/specs/06_suspendUser.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index f0ccd9f29..68a08856e 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -18,7 +18,7 @@ module.exports = {
       this
         .click('@moderateNav')
         .expect.section('@moderate').to.be.visible;
-      return this.section.stories;
+      return this.section.moderate;
     },
     goToStories() {
       this
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index 8aeaf1574..109dcc826 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -16,8 +16,13 @@ module.exports = {
   },
   'user logs in': (client) => {
     const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
     const comments = client.page.embedStream().section.comments;
 
+    embedStream
+      .navigate()
+      .ready();
+
     comments
       .openLoginPopup((popup) => popup.login(user));
   },

From 4727c52de42ee29eb5bbdddde7d2129adb405aa7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 10:48:12 -0300
Subject: [PATCH 157/344] camelCase lodash

---
 client/coral-admin/src/components/ActionsMenuItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/components/ActionsMenuItem.js b/client/coral-admin/src/components/ActionsMenuItem.js
index 2a98a06b1..2bb9fa645 100644
--- a/client/coral-admin/src/components/ActionsMenuItem.js
+++ b/client/coral-admin/src/components/ActionsMenuItem.js
@@ -3,7 +3,7 @@ import cn from 'classnames';
 import {MenuItem} from 'react-mdl';
 import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
-import camelCase from 'lodash.camelcase';
+import camelCase from 'lodash/camelCase';
 
 const ActionsMenuItem = (props) =>
   <MenuItem className={cn(styles.menuItem, props.className, 'action-menu-item')} {...props} id={camelCase(props.children)}/>;

From 8f6ff462441710e4b79cdeed74b9914e317f1851 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 11:16:35 -0300
Subject: [PATCH 158/344] passing suspendUserDialog to the adminPage scope

---
 test/e2e/page_objects/admin.js   | 22 +++++++++++-----------
 test/e2e/specs/06_suspendUser.js |  4 +++-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 68a08856e..05728d894 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -47,24 +47,24 @@ module.exports = {
     },
   }],
   elements: {
-    'drawerButton': '.mdl-layout__drawer-button',
-    'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
-    'storiesNav': '.talk-admin-nav-stories',
-    'communityNav': '.talk-admin-nav-community',
-    'moderateNav': '.talk-admin-nav-moderate',
-    'settingsButton': '.talk-admin-header-settings-button',
-    'signOutButton': '.talk-admin-header-sign-out',
+    drawerButton: '.mdl-layout__drawer-button',
+    drawerOverlay: 'div.mdl-layout__obfuscator.is-visible',
+    storiesNav: '.talk-admin-nav-stories',
+    communityNav: '.talk-admin-nav-community',
+    moderateNav: '.talk-admin-nav-moderate',
+    settingsButton: '.talk-admin-header-settings-button',
+    signOutButton: '.talk-admin-header-sign-out',
+    suspendUserDialog: '.talk-admin-suspend-user-dialog',
+    suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
+    supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
   },
   sections: {
     moderate: {
       selector: '.talk-admin-moderation-container',
       elements: {
-        suspendUserDialog: '.talk-admin-suspend-user-dialog',
-        suspendUserConfirmButton: 'talk-admin-suspend-user-dialog-confirm',
-        supendUserSendButton: 'talk-admin-suspend-user-dialog-send',
         comment: '.talk-admin-moderate-comment',
         commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
-        actionItemSuspendUser: '.talk-admin-moderate-comment-actions-menu .action-menu-item#supendUser',
+        actionItemSuspendUser: '.action-menu-item#suspendUser',
         actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
       }
     },
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index 109dcc826..33d80ba67 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -95,7 +95,9 @@ module.exports = {
       .waitForElementVisible('@actionMenuButton')
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
-      .click('@actionItemSuspendUser')
+      .click('@actionItemSuspendUser');
+      
+    adminPage 
       .waitForElementVisible('@suspendUserDialog')
       .waitForElementVisible('@suspendUserConfirmButton')
       .click('@suspendUserConfirmButton')

From 38148ad51c55b1d70d6787031f02b7970b133806 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 12:09:55 -0300
Subject: [PATCH 159/344] Adding post animation test

---
 test/e2e/page_objects/admin.js   | 1 +
 test/e2e/specs/06_suspendUser.js | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 05728d894..f498d272f 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -57,6 +57,7 @@ module.exports = {
     suspendUserDialog: '.talk-admin-suspend-user-dialog',
     suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
     supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
+    toast: '.toastify',
   },
   sections: {
     moderate: {
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index 33d80ba67..e70881c83 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -96,13 +96,19 @@ module.exports = {
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
       .click('@actionItemSuspendUser');
-      
+
     adminPage 
       .waitForElementVisible('@suspendUserDialog')
       .waitForElementVisible('@suspendUserConfirmButton')
       .click('@suspendUserConfirmButton')
       .waitForElementVisible('@supendUserSendButton')
       .click('@supendUserSendButton');
+
+    // Wating for animation to be over.
+    adminPage
+      .waitForElementVisible('@toast')
+      .waitForElementVisible('@settingsButton', 8000);
+
   },
   'admin logs out': (client) => {
     const comments = client.page.embedStream().section.comments;

From 819b1c597cb6ac43e7d7394f1c32fbfc917d2c67 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Nov 2017 13:04:46 -0300
Subject: [PATCH 160/344] refactor: working tests

---
 test/e2e/page_objects/admin.js   |  1 +
 test/e2e/specs/06_suspendUser.js | 13 +++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index f498d272f..aa3b58ab5 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -58,6 +58,7 @@ module.exports = {
     suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
     supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
     toast: '.toastify',
+    toastClose: '.toastify__close',
   },
   sections: {
     moderate: {
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index e70881c83..20f38c2c2 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -104,22 +104,27 @@ module.exports = {
       .waitForElementVisible('@supendUserSendButton')
       .click('@supendUserSendButton');
 
-    // Wating for animation to be over.
     adminPage
       .waitForElementVisible('@toast')
-      .waitForElementVisible('@settingsButton', 8000);
+      .waitForElementVisible('@toastClose')
+      .click('@toastClose');
 
   },
   'admin logs out': (client) => {
-    const comments = client.page.embedStream().section.comments;
+    const adminPage = client.page.admin();
 
-    comments
+    adminPage
       .logout();
   },
   'user logs in (2)': (client) => {
     const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
     const comments = client.page.embedStream().section.comments;
 
+    embedStream
+      .navigate()
+      .ready();
+
     comments
       .openLoginPopup((popup) => popup.login(user));
   },

From 789fb3dfce5c9ad4310e0921b5903009565ce75a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 10 Nov 2017 20:59:01 +0100
Subject: [PATCH 161/344] Disable bs on this branch

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index a828073d9..3e9726340 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 REPORTS_FOLDER=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
-CIRCLE_BRANCH=${CIRCLE_BRANCH_XX:-master}
+CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}

From 5a71db25686872fb04b8c47acd847a8c001f3dab Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 14 Nov 2017 13:58:18 +0100
Subject: [PATCH 162/344] Undo to previous status + Live updates

---
 .../src/containers/SuspendUserDialog.js       |  2 +-
 .../Moderation/containers/Moderation.js       | 28 +++++++++++++++++++
 .../src/components/Comment.js                 |  5 +++-
 .../src/containers/Comment.js                 |  3 ++
 .../coral-embed-stream/src/graphql/index.js   |  4 +++
 client/coral-framework/graphql/mutations.js   |  5 ++++
 graph/resolvers/root_mutation.js              |  6 ++--
 graph/resolvers/subscription.js               |  3 ++
 graph/setupFunctions.js                       | 11 ++++++++
 graph/typeDefs.graphql                        |  4 +++
 locales/en.yml                                |  1 +
 perms/constants.js                            |  1 +
 perms/subscriptionReducer.js                  |  2 ++
 .../client/components/BanUserDialog.js        |  4 +--
 14 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/containers/SuspendUserDialog.js b/client/coral-admin/src/containers/SuspendUserDialog.js
index 3d5283df9..5c554e70c 100644
--- a/client/coral-admin/src/containers/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/SuspendUserDialog.js
@@ -48,7 +48,7 @@ class SuspendUserDialogContainer extends Component {
 SuspendUserDialogContainer.propTypes = {
   open: PropTypes.bool,
   hideSuspendUserDialog: PropTypes.func,
-  username: PropTypes.object,
+  username: PropTypes.string,
 };
 
 const withOrganizationName = withQuery(gql`
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 200e5f6ae..1b75d23cc 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -111,6 +111,17 @@ class ModerationContainer extends Component {
           return this.handleCommentChange(prev, comment, notifyText);
         },
       },
+      {
+        document: COMMENT_RESET_SUBSCRIPTION,
+        variables,
+        updateQuery: (prev, {subscriptionData: {data: {commentReset: comment}}}) => {
+          const user = comment.status_history[comment.status_history.length - 1].assigned_by;
+          const notifyText = this.props.auth.user.id === user.id
+            ? ''
+            : t('modqueue.notify_reset', user.username, prepareNotificationText(comment.body));
+          return this.handleCommentChange(prev, comment, notifyText);
+        },
+      },
       {
         document: COMMENT_EDITED_SUBSCRIPTION,
         variables,
@@ -299,6 +310,23 @@ const COMMENT_REJECTED_SUBSCRIPTION = gql`
   ${Comment.fragments.comment}
 `;
 
+const COMMENT_RESET_SUBSCRIPTION = gql`
+  subscription CommentReset($asset_id: ID){
+    commentReset(asset_id: $asset_id){
+      ...${getDefinitionName(Comment.fragments.comment)}
+      status_history {
+        type
+        created_at
+        assigned_by {
+          id
+          username
+        }
+      }
+    }
+  }
+  ${Comment.fragments.comment}
+`;
+
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $tags:[String!], $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
     comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags}) {
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 1f72a2738..7ae36b5fa 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -345,7 +345,10 @@ export default class Comment extends React.Component {
 
     if (!highlighted && this.commentIsRejected(comment)) {
       return <CommentTombstone action='reject' onUndo={() => {
-        this.props.setCommentStatus({commentId: comment.id, status: 'NONE'});
+        this.props.setCommentStatus({
+          commentId: comment.id,
+          status: comment.status_history[comment.status_history.length - 2].type,
+        });
       }}/>;
     }
 
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 1bdca0e1e..26fc872d5 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -76,6 +76,9 @@ const singleCommentFragment = gql`
       id
       username
     }
+    status_history {
+      type
+    }
     action_summaries {
       __typename
       count
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 3f6fd4832..d18cdc435 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -102,6 +102,9 @@ export default {
             }
           }
         }
+        status_history {
+          type
+        }
         action_summaries {
           count
           current_user {
@@ -182,6 +185,7 @@ export default {
               editableUntil: new Date().toISOString(),
               edited: false,
             },
+            status_history: [],
             id: `pending-${uuid()}`,
           }
         }
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 447d297ab..3a543a738 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -138,6 +138,9 @@ export const withSetCommentStatus = withMutation(
             const fragment = gql`
               fragment Talk_SetCommentStatus on Comment {
                 status
+                status_history {
+                  type
+                }
               }`;
 
             const fragmentId = `Comment_${commentId}`;
@@ -145,6 +148,8 @@ export const withSetCommentStatus = withMutation(
             const data = proxy.readFragment({fragment, id: fragmentId});
 
             data.status = status;
+            data.status_history = data.status_history ? data.status_history : [];
+            data.status_history.push({__typename: 'CommentStatusHistory', type: status});
 
             proxy.writeFragment({fragment, id: fragmentId, data});
           }
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index c3bf6b7e9..f2a577d46 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -43,13 +43,11 @@ const RootMutation = {
   setCommentStatus: async (_, {id, status}, {mutators: {Comment}, pubsub}) => {
     const comment = await Comment.setStatus({id, status});
     if (status === 'ACCEPTED') {
-
-      // Publish the comment status change via the subscription.
       pubsub.publish('commentAccepted', comment);
     } else if (status === 'REJECTED') {
-
-      // Publish the comment status change via the subscription.
       pubsub.publish('commentRejected', comment);
+    } else if (status === 'NONE') {
+      pubsub.publish('commentReset', comment);
     }
   },
   addTag: async (_, {tag}, {mutators: {Tag}}) => {
diff --git a/graph/resolvers/subscription.js b/graph/resolvers/subscription.js
index f6da9fb54..8be3236c1 100644
--- a/graph/resolvers/subscription.js
+++ b/graph/resolvers/subscription.js
@@ -11,6 +11,9 @@ const Subscription = {
   commentRejected(comment) {
     return comment;
   },
+  commentReset(comment) {
+    return comment;
+  },
   commentFlagged(comment) {
     return comment;
   },
diff --git a/graph/setupFunctions.js b/graph/setupFunctions.js
index 42dc15a9f..390442f73 100644
--- a/graph/setupFunctions.js
+++ b/graph/setupFunctions.js
@@ -2,6 +2,7 @@ const {
   SUBSCRIBE_COMMENT_ACCEPTED,
   SUBSCRIBE_COMMENT_REJECTED,
   SUBSCRIBE_COMMENT_FLAGGED,
+  SUBSCRIBE_COMMENT_RESET,
   SUBSCRIBE_ALL_COMMENT_EDITED,
   SUBSCRIBE_ALL_COMMENT_ADDED,
   SUBSCRIBE_ALL_USER_SUSPENDED,
@@ -93,6 +94,16 @@ const setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {plu
       }
     },
   }),
+  commentReset: (options, args) => ({
+    commentReset: {
+      filter: (comment, context) => {
+        if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_RESET)) {
+          return false;
+        }
+        return !args.asset_id || comment.asset_id === args.asset_id;
+      }
+    },
+  }),
   userSuspended: (options, args) => ({
     userSuspended: {
       filter: (user, context) => {
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 3fbc1cec3..44b906e24 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -1376,6 +1376,10 @@ type Subscription {
   # Requires the `ADMIN` or `MODERATOR` role.
   commentRejected(asset_id: ID): Comment
 
+  # Get an update whenever the status of a comment has been reset.
+  # Requires the `ADMIN` or `MODERATOR` role.
+  commentReset(asset_id: ID): Comment
+
   # Get an update whenever a user has been suspended.
   # `user_id` must match id of current user except for
   # users with the `ADMIN` or `MODERATOR` role.
diff --git a/locales/en.yml b/locales/en.yml
index eb1c885bf..22fa11a62 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -263,6 +263,7 @@ en:
     notify_accepted: '{0} accepted comment "{1}"'
     notify_rejected: '{0} rejected comment "{1}"'
     notify_flagged: '{0} flagged comment "{1}"'
+    notify_reset: '{0} reset status of comment "{1}"'
     approve: "Approve"
     approved: "Approved"
     ban_user: "Ban"
diff --git a/perms/constants.js b/perms/constants.js
index 4c85f9c26..9cda7442b 100644
--- a/perms/constants.js
+++ b/perms/constants.js
@@ -36,6 +36,7 @@ module.exports = {
   SUBSCRIBE_COMMENT_ACCEPTED: 'SUBSCRIBE_COMMENT_ACCEPTED',
   SUBSCRIBE_COMMENT_REJECTED: 'SUBSCRIBE_COMMENT_REJECTED',
   SUBSCRIBE_COMMENT_FLAGGED: 'SUBSCRIBE_COMMENT_FLAGGED',
+  SUBSCRIBE_COMMENT_RESET: 'SUBSCRIBE_COMMENT_RESET',
   SUBSCRIBE_ALL_COMMENT_ADDED: 'SUBSCRIBE_ALL_COMMENT_ADDED',
   SUBSCRIBE_ALL_COMMENT_EDITED: 'SUBSCRIBE_ALL_COMMENT_EDITED',
   SUBSCRIBE_ALL_USER_SUSPENDED: 'SUBSCRIBE_ALL_USER_SUSPENDED',
diff --git a/perms/subscriptionReducer.js b/perms/subscriptionReducer.js
index e0f73526a..9ce0bc016 100644
--- a/perms/subscriptionReducer.js
+++ b/perms/subscriptionReducer.js
@@ -9,6 +9,8 @@ module.exports = (user, perm) => {
     return check(user, ['ADMIN', 'MODERATOR']);
   case types.SUBSCRIBE_COMMENT_REJECTED:
     return check(user, ['ADMIN', 'MODERATOR']);
+  case types.SUBSCRIBE_COMMENT_RESET:
+    return check(user, ['ADMIN', 'MODERATOR']);
   case types.SUBSCRIBE_ALL_COMMENT_EDITED:
     return check(user, ['ADMIN', 'MODERATOR']);
   case types.SUBSCRIBE_ALL_COMMENT_ADDED:
diff --git a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
index c98e3e7c2..9db509869 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
@@ -33,9 +33,9 @@ const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
 );
 
 BanUserDialog.propTypes = {
-  showBanDialog: PropTypes.func.isRequired,
+  showBanDialog: PropTypes.bool.isRequired,
   closeBanDialog: PropTypes.func.isRequired,
   banUser: PropTypes.func.isRequired,
 };
 
-export default BanUserDialog;
\ No newline at end of file
+export default BanUserDialog;

From 5073e60df52a6db965e6fc2246ac518574927e2d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 14 Nov 2017 14:05:30 +0100
Subject: [PATCH 163/344] Translate

---
 client/coral-embed-stream/src/components/CommentTombstone.js | 2 +-
 locales/en.yml                                               | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js
index 4fb8eaaf6..4347d4277 100644
--- a/client/coral-embed-stream/src/components/CommentTombstone.js
+++ b/client/coral-embed-stream/src/components/CommentTombstone.js
@@ -25,7 +25,7 @@ class CommentTombstone extends React.Component {
         <p className={styles.commentTombstone}>
           {this.getCopy()}
           {this.props.action === 'reject' &&
-            <span className={styles.undo} onClick={this.props.onUndo}>Undo</span>
+            <span className={styles.undo} onClick={this.props.onUndo}>{t('comment.undo_reject')}</span>
           }
         </p>
       </div>
diff --git a/locales/en.yml b/locales/en.yml
index 22fa11a62..8c3f60a2d 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -17,6 +17,7 @@ en:
   characters_remaining: "characters remaining"
   comment:
     anon: "Anonymous"
+    undo_reject: "Undo"
     ban_user: "Ban User"
     comment: "Post a comment"
     edited: Edited

From 8a4a7d35891e8c847628cdae78fc233f46f48a0a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 14 Nov 2017 15:37:26 +0100
Subject: [PATCH 164/344] Break long words in comment

---
 client/coral-embed-stream/src/components/Comment.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index b9957bbce..f5bead3b8 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -158,6 +158,7 @@
 }
 
 .content {
+  word-wrap: break-word;
 }
 
 .footer {

From f2b9db9dbc8ed2e5a76c5f389270b212ab7b6177 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 13:07:33 +0100
Subject: [PATCH 165/344] Support long words for my and featured comments

---
 client/talk-plugin-history/Comment.css                | 11 ++++++++++-
 client/talk-plugin-history/Comment.js                 |  2 +-
 .../client/components/Comment.css                     |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css
index 23289c17d..a18095d01 100644
--- a/client/talk-plugin-history/Comment.css
+++ b/client/talk-plugin-history/Comment.css
@@ -13,6 +13,14 @@
   border-bottom: solid 1px #EBEBEB;
 }
 
+.main {
+  width: 100%;
+}
+
+.commentBody {
+  word-wrap: break-word;
+}
+
 .assetURL {
   text-decoration: none;
   font-weight: bold;
@@ -44,7 +52,8 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    min-width: 136px;
+    min-width: 140px;
+    padding: 0px 10px;
   }
 
   li {
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index 9d1208708..463122160 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -19,7 +19,7 @@ class Comment extends React.Component {
 
     return (
       <div className={styles.myComment}>
-        <div>
+        <div className={styles.main}>
           <Slot
             fill="commentContent"
             defaultComponent={CommentContent}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.css b/plugins/talk-plugin-featured-comments/client/components/Comment.css
index 9481b4396..bd4428091 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.css
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.css
@@ -44,6 +44,7 @@
   margin: 0;
   quotes: '\201c' '\201d';
   margin-bottom: 10px;
+  word-wrap: break-word;
 }
 
 .quote:before {

From 2882dfbadb11b155036c6e9f61eb4446a1c551f3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 13:34:29 +0100
Subject: [PATCH 166/344] Fix flexbox overflowing

---
 client/talk-plugin-history/Comment.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css
index a18095d01..40a003de1 100644
--- a/client/talk-plugin-history/Comment.css
+++ b/client/talk-plugin-history/Comment.css
@@ -14,7 +14,11 @@
 }
 
 .main {
-  width: 100%;
+  min-width: 70%;
+}
+
+.sidebar {
+  min-width: 30%;
 }
 
 .commentBody {

From e4a359e0b4ae4865cb7f1ad9bd5377b3d01c4234 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 13:38:02 +0100
Subject: [PATCH 167/344] Add mutation to framework

---
 client/coral-framework/graphql/fragments.js |  1 +
 client/coral-framework/graphql/mutations.js | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js
index c2a03131b..a99dc0ee2 100644
--- a/client/coral-framework/graphql/fragments.js
+++ b/client/coral-framework/graphql/fragments.js
@@ -17,6 +17,7 @@ export default {
     'IgnoreUserResponse',
     'StopIgnoringUserResponse',
     'UpdateSettingsResponse',
+    'UpdateAssetSettingsResponse',
   )
 };
 
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 447d297ab..895213054 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -88,7 +88,7 @@ export const withRemoveTag = withMutation(
             asset_id: assetId,
             item_type: itemType,
           },
-          optimisticResponse: {
+          o3timisticResponse: {
             removeTag: {
               __typename: 'ModifyTagResponse',
               errors: null,
@@ -358,3 +358,22 @@ export const withUpdateSettings = withMutation(
         });
       }}),
   });
+
+export const withUpdateAssetSettings = withMutation(
+  gql`
+    mutation UpdateAssetSettings(id: ID!, $input: AssetSettingsInput!) {
+      updateAssetSettings(id: $id, input: $input) {
+        ...UpdateAssetSettingsResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      updateAssetSettings: (id, input) => {
+        return mutate({
+          variables: {
+            id,
+            input,
+          },
+        });
+      }}),
+  });

From e02537df13f2dcd5a2f9ce3aa7d19b40631f1dcd Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 17:53:24 +0100
Subject: [PATCH 168/344] Fix mutation syntax

---
 client/coral-framework/graphql/mutations.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 895213054..86cd54b0b 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -361,7 +361,7 @@ export const withUpdateSettings = withMutation(
 
 export const withUpdateAssetSettings = withMutation(
   gql`
-    mutation UpdateAssetSettings(id: ID!, $input: AssetSettingsInput!) {
+    mutation UpdateAssetSettings($id: ID!, $input: AssetSettingsInput!) {
       updateAssetSettings(id: $id, input: $input) {
         ...UpdateAssetSettingsResponse
       }

From 899bba73279ca98aaed05c1737cf62e5a0938ca3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 15 Nov 2017 14:50:33 -0300
Subject: [PATCH 169/344] Adding Proptypes and classNames for the Slots :tada:

---
 client/coral-framework/components/Slot.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 0fe0d8896..f4fecb1c7 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -3,6 +3,7 @@ import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
+import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import {getShallowChanges} from 'coral-framework/utils';
@@ -58,6 +59,7 @@ class Slot extends React.Component {
       childFactory,
       defaultComponent: DefaultComponent,
       queryData,
+      fill,
     } = this.props;
     const {plugins} = this.context;
     let children = this.getChildren();
@@ -72,7 +74,7 @@ class Slot extends React.Component {
     }
 
     return (
-      <Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
+      <Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className, `talk-slot-${kebabCase(fill)}`)}>
         {children}
       </Component>
     );
@@ -85,6 +87,10 @@ Slot.defaultProps = {
 
 Slot.propTypes = {
   fill: PropTypes.string.isRequired,
+  inline: PropTypes.bool,
+  className: PropTypes.string,
+  reduxState: PropTypes.object,
+  defaultComponent: PropTypes.component,
 
   /**
    * You may specify the component to use as the root wrapper.

From ce4ad426a7cc880e62bcd50d98ccef6421ee9670 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 19:38:25 +0100
Subject: [PATCH 170/344] Extendable embed stream tabs

---
 .../src/components/Embed.js                   | 78 +++++++++++--------
 ...eamTabPanel.css => ExtendableTabPanel.css} |  0
 ...treamTabPanel.js => ExtendableTabPanel.js} |  8 +-
 .../src/components/Stream.js                  | 25 +++---
 .../src/containers/Embed.js                   |  3 +
 ...treamTabPanel.js => ExtendableTabPanel.js} | 57 +++++++++-----
 .../src/containers/Stream.js                  |  1 +
 .../client/index.js                           |  6 +-
 8 files changed, 108 insertions(+), 70 deletions(-)
 rename client/coral-embed-stream/src/components/{StreamTabPanel.css => ExtendableTabPanel.css} (100%)
 rename client/coral-embed-stream/src/components/{StreamTabPanel.js => ExtendableTabPanel.js} (85%)
 rename client/coral-embed-stream/src/containers/{StreamTabPanel.js => ExtendableTabPanel.js} (66%)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 5ce7021fb..132b3be7f 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -5,7 +5,8 @@ import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
 
-import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import ExtendableTabPanel from '../containers/ExtendableTabPanel';
+import {Tab, TabPane} from 'coral-ui';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
@@ -28,9 +29,28 @@ export default class Embed extends React.Component {
     this.props.setActiveTab(tab);
   };
 
+  getTabs() {
+    const {user} = this.props.auth;
+    const tabs = [
+      <Tab key='stream' tabId='stream' className='talk-embed-stream-comments-tab'>
+        {t('embed_comments_tab')}
+      </Tab>,
+      <Tab key='profile' tabId='profile' className='talk-embed-stream-profile-tab'>
+        {t('framework.my_profile')}
+      </Tab>,
+    ];
+    if (can(user, 'UPDATE_CONFIG')) {
+      tabs.push(
+        <Tab key='config' tabId='config' className='talk-embed-stream-configuration-tab'>
+          {t('framework.configure_stream')}
+        </Tab>
+      );
+    }
+    return tabs;
+  }
+
   render() {
     const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
-    const {user} = this.props.auth;
     const hasHighlightedComment = !!commentId;
 
     return (
@@ -47,44 +67,36 @@ export default class Embed extends React.Component {
             onClose={hideSignInDialog}
           />
         </IfSlotIsNotEmpty>
-        <TabBar
-          onTabClick={this.changeTab}
-          activeTab={activeTab}
-          className='talk-embed-stream-tab-bar'
-          aria-controls='talk-embed-stream-tab-content'
-        >
-          <Tab tabId={'stream'} className={'talk-embed-stream-comments-tab'}>
-            {t('embed_comments_tab')}
-          </Tab>
-          <Tab tabId={'profile'} className={'talk-embed-stream-profile-tab'}>
-            {t('framework.my_profile')}
-          </Tab>
-          {can(user, 'UPDATE_CONFIG') &&
-            <Tab tabId={'config'} className={'talk-embed-stream-configuration-tab'}>
-              {t('framework.configure_stream')}
-            </Tab>
-          }
-        </TabBar>
+
         <Slot
           data={data}
           queryData={{root}}
           fill="embed"
         />
 
-        <TabContent
+        <ExtendableTabPanel
+          className='talk-embed-stream-tab-bar'
           activeTab={activeTab}
-          id='talk-embed-stream-tab-content'
-        >
-          <TabPane tabId={'stream'} className={'talk-embed-stream-comments-tab-pane'}>
-            <Stream data={data} root={root} />
-          </TabPane>
-          <TabPane tabId={'profile'} className={'talk-embed-stream-profile-tab-pane'}>
-            <ProfileContainer />
-          </TabPane>
-          <TabPane tabId={'config'} className={'talk-embed-stream-configuration-tab-pane'}>
-            <ConfigureStreamContainer />
-          </TabPane>
-        </TabContent>
+          setActiveTab={this.changeTab}
+          fallbackTab='stream'
+          tabSlot='embedStreamTabs'
+          tabSlotPrepend='embedStreamTabsPrepend'
+          tabPaneSlot='embedStreamTabPanes'
+          slotProps={{data}}
+          queryData={{root}}
+          tabs={this.getTabs()}
+          tabPanes={[
+            <TabPane key='stream' tabId='stream' className='talk-embed-stream-comments-tab-pane'>
+              <Stream data={data} root={root} />
+            </TabPane>,
+            <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
+              <ProfileContainer />
+            </TabPane>,
+            <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
+              <ConfigureStreamContainer />
+            </TabPane>,
+          ]}
+        />
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.css b/client/coral-embed-stream/src/components/ExtendableTabPanel.css
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamTabPanel.css
rename to client/coral-embed-stream/src/components/ExtendableTabPanel.css
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.js b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
similarity index 85%
rename from client/coral-embed-stream/src/components/StreamTabPanel.js
rename to client/coral-embed-stream/src/components/ExtendableTabPanel.js
index 35c10d5d9..ec582eb84 100644
--- a/client/coral-embed-stream/src/components/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {Spinner, TabBar, TabContent} from 'coral-ui';
 import PropTypes from 'prop-types';
-import styles from './StreamTabPanel.css';
+import styles from './ExtendableTabPanel.css';
 
-class StreamTabPanel extends React.Component {
+class ExtendableTabPanel extends React.Component {
 
   render() {
     const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
@@ -23,7 +23,7 @@ class StreamTabPanel extends React.Component {
   }
 }
 
-StreamTabPanel.propTypes = {
+ExtendableTabPanel.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
   loading: PropTypes.bool,
@@ -39,4 +39,4 @@ StreamTabPanel.propTypes = {
   sub: PropTypes.bool,
 };
 
-export default StreamTabPanel;
+export default ExtendableTabPanel;
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 7ff48106b..084586eeb 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -19,7 +19,7 @@ import cn from 'classnames';
 import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
 import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
-import StreamTabPanel from '../containers/StreamTabPanel';
+import ExtendableTabPanel from '../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
 
@@ -106,7 +106,7 @@ class Stream extends React.Component {
     );
   }
 
-  renderTabPanel() {
+  renderExtendableTabPanel() {
     const {
       data,
       root,
@@ -135,7 +135,7 @@ class Stream extends React.Component {
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
-    // `key` of `StreamTabPanel` depends on sorting so that we always reset
+    // `key` of `ExtendableTabPanel` depends on sorting so that we always reset
     // the state when changing sorting.
     return (
       <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
@@ -148,23 +148,24 @@ class Stream extends React.Component {
             {...slotProps}
           />
         </div>
-        <StreamTabPanel
+        <ExtendableTabPanel
           key={`${sortBy}_${sortOrder}`}
           activeTab={activeStreamTab}
           setActiveTab={setActiveStreamTab}
-          fallbackTab={'all'}
-          tabSlot={'streamTabs'}
-          tabPaneSlot={'streamTabPanes'}
+          fallbackTab='all'
+          tabSlot='streamTabs'
+          tabSlotPrepend='streamTabsPrepend'
+          tabPaneSlot='streamTabPanes'
           slotProps={slotProps}
           queryData={slotQueryData}
           loading={loading}
-          appendTabs={
+          tabs={
             <Tab tabId={'all'} key='all'>
               {t('stream.all_comments')} <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
             </Tab>
           }
-          appendTabPanes={
-            <TabPane tabId={'all'} key='all'>
+          tabPanes={
+            <TabPane tabId='all' key='all'>
               <AllCommentsPane
                 data={data}
                 root={root}
@@ -297,7 +298,7 @@ class Stream extends React.Component {
 
         {highlightedComment
           ? this.renderHighlightedComment()
-          : this.renderTabPanel()
+          : this.renderExtendableTabPanel()
         }
       </div>
     );
@@ -325,7 +326,7 @@ Stream.propTypes = {
   loading: PropTypes.bool,
   editName: PropTypes.func,
   appendItemArray: PropTypes.func,
-  updateItem: PropTypes.func, 
+  updateItem: PropTypes.func,
   viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 132e7f5e7..3fef8872d 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -151,6 +151,9 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
 
 const slots = [
   'embed',
+  'embedStreamTabs',
+  'embedStreamTabsPrepend',
+  'embedStreamTabPanes',
 ];
 
 const EMBED_QUERY = gql`
diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
similarity index 66%
rename from client/coral-embed-stream/src/containers/StreamTabPanel.js
rename to client/coral-embed-stream/src/containers/ExtendableTabPanel.js
index 9a154512d..b582f7b66 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import StreamTabPanel from '../components/StreamTabPanel';
+import ExtendableTabPanel from '../components/ExtendableTabPanel';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
 import {Tab, TabPane} from 'coral-ui';
@@ -7,17 +7,17 @@ import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
-class StreamTabPanelContainer extends React.Component {
+class ExtendableTabPanelContainer extends React.Component {
   static contextTypes = {
     plugins: PropTypes.object,
   };
 
   componentDidMount() {
-    this.fallbackAllTab();
+    this.handleFallback();
   }
 
   componentWillReceiveProps(next) {
-    this.fallbackAllTab(next);
+    this.handleFallback(next);
   }
 
   shouldComponentUpdate(next) {
@@ -35,22 +35,31 @@ class StreamTabPanelContainer extends React.Component {
     return changes.length !== 0;
   }
 
-  fallbackAllTab(props = this.props) {
-    if (props.activeTab !== props.fallbackTab) {
-      const slotPlugins = this.getSlotElements(props.tabSlot, props).map((el) => el.type.talkPluginName);
-      if (slotPlugins.indexOf(props.activeTab) === -1) {
-        props.setActiveTab(props.fallbackTab);
-      }
+  handleFallback(props = this.props) {
+    if (this.getTabNames(props).indexOf(props.activeTab) === -1) {
+      props.setActiveTab(props.fallbackTab);
     }
   }
 
+  getTabNames(props = this.props) {
+    return this.getTabElements(props).map((el) => el.props.tabId);
+  }
+
   getSlotElements(slot, props = this.props) {
     const {plugins} = this.context;
     return plugins.getSlotElements(slot, props.reduxState, props.slotProps, props.queryData);
   }
 
   getPluginTabElements(props = this.props) {
-    return this.getSlotElements(props.tabSlot).map((el) => {
+    return this.getSlotTabElements(props.tabSlot);
+  }
+
+  getPluginTabElementsPrepend(props = this.props) {
+    return this.getSlotTabElements(props.tabSlotPrepend);
+  }
+
+  getSlotTabElements(slot) {
+    return this.getSlotElements(slot).map((el) => {
       return (
         <Tab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
           {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
@@ -59,6 +68,17 @@ class StreamTabPanelContainer extends React.Component {
     });
   }
 
+  getTabElements(props = this.props) {
+    const elements = [...this.getPluginTabElementsPrepend(props)];
+    if (Array.isArray(props.tabs)) {
+      elements.push(...props.tabs);
+    } else {
+      elements.push(props.tabs);
+    }
+    elements.push(...this.getPluginTabElements(props));
+    return elements;
+  }
+
   getPluginTabPaneElements(props = this.props) {
     return this.getSlotElements(props.tabPaneSlot).map((el) => {
       return (
@@ -71,12 +91,12 @@ class StreamTabPanelContainer extends React.Component {
 
   render() {
     return (
-      <StreamTabPanel
+      <ExtendableTabPanel
         className={this.props.className}
         activeTab={this.props.activeTab}
         setActiveTab={this.props.setActiveTab}
-        tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
-        tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        tabs={this.getTabElements()}
+        tabPanes={this.getPluginTabPaneElements().concat(this.props.tabPanes)}
         loading={this.props.loading}
         sub={this.props.sub}
       />
@@ -84,19 +104,20 @@ class StreamTabPanelContainer extends React.Component {
   }
 }
 
-StreamTabPanelContainer.propTypes = {
+ExtendableTabPanelContainer.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
-  appendTabs: PropTypes.oneOfType([
+  tabs: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)
   ]),
-  appendTabPanes: PropTypes.oneOfType([
+  tabPanes: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)
   ]),
   fallbackTab: PropTypes.string.isRequired,
   tabSlot: PropTypes.string.isRequired,
+  tabSlotPrepend: PropTypes.string.isRequired,
   tabPaneSlot: PropTypes.string.isRequired,
   slotProps: PropTypes.object.isRequired,
   queryData: PropTypes.object,
@@ -109,4 +130,4 @@ const mapStateToProps = (state) => ({
   reduxState: omit(state, 'apollo'),
 });
 
-export default connect(mapStateToProps, null)(StreamTabPanelContainer);
+export default connect(mapStateToProps, null)(ExtendableTabPanelContainer);
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 6c3d7b02c..464ce31fc 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -271,6 +271,7 @@ const LOAD_MORE_QUERY = gql`
 
 const slots = [
   'streamTabs',
+  'streamTabsPrepend',
   'streamTabPanes',
   'streamFilter',
 ];
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 7b419c545..bdcb2f470 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -16,7 +16,7 @@ export default {
   reducer,
   translations,
   slots: {
-    streamTabs: [Tab],
+    streamTabsPrepend: [Tab],
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
@@ -57,7 +57,7 @@ export default {
           }
 
           const comment = findCommentInEmbedQuery(previous, variables.id);
-                    
+
           if (previous.asset.comments) {
             updated = update(previous, {
               asset: {
@@ -101,7 +101,7 @@ export default {
       updateQueries: {
         CoralEmbedStream_Embed: (previous) => {
           let updated = previous;
-           
+
           if (variables.name !== 'FEATURED') {
             return;
           }

From 4d6055b9b86dc06da58f828b34e75025647ba7d4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 19:53:58 +0100
Subject: [PATCH 171/344] Correct prop type

---
 client/coral-framework/components/Slot.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index f4fecb1c7..0d0bdba6b 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -90,7 +90,10 @@ Slot.propTypes = {
   inline: PropTypes.bool,
   className: PropTypes.string,
   reduxState: PropTypes.object,
-  defaultComponent: PropTypes.component,
+  defaultComponent: PropTypes.oneOfType([
+    PropTypes.component,
+    PropTypes.string,
+  ]),
 
   /**
    * You may specify the component to use as the root wrapper.

From 315d3babde1b32b1fa199e0f17596be72037c013 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 15 Nov 2017 20:03:41 +0100
Subject: [PATCH 172/344] Correct prop types 2

---
 client/coral-framework/components/Slot.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 0d0bdba6b..e1acd82f4 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -91,7 +91,7 @@ Slot.propTypes = {
   className: PropTypes.string,
   reduxState: PropTypes.object,
   defaultComponent: PropTypes.oneOfType([
-    PropTypes.component,
+    PropTypes.func,
     PropTypes.string,
   ]),
 
@@ -99,7 +99,10 @@ Slot.propTypes = {
    * You may specify the component to use as the root wrapper.
    * Defaults to 'div'.
    */
-  component: PropTypes.any,
+  component: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+  ]),
 
   // props coming from graphql must be passed through this property.
   queryData: PropTypes.object,

From b5b6b113d4119d189adb611d64108860b999b8ff Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 10:57:16 +0100
Subject: [PATCH 173/344] Restructure coral-embed-stream

---
 client/coral-embed-stream/src/components/Embed.js           | 2 +-
 client/coral-embed-stream/src/containers/Embed.js           | 2 +-
 .../src/{ => tabs/stream}/components/AllCommentsPane.js     | 0
 .../src/{ => tabs/stream}/components/Comment.css            | 0
 .../src/{ => tabs/stream}/components/Comment.js             | 4 ++--
 .../src/{ => tabs/stream}/components/CommentTombstone.css   | 0
 .../src/{ => tabs/stream}/components/CommentTombstone.js    | 0
 .../src/{ => tabs/stream}/components/CountdownSeconds.js    | 0
 .../{ => tabs/stream}/components/EditableCommentContent.js  | 0
 .../src/{ => tabs/stream}/components/IgnoreUserWizard.js    | 0
 .../{ => tabs/stream}/components/InactiveCommentLabel.css   | 0
 .../{ => tabs/stream}/components/InactiveCommentLabel.js    | 0
 .../src/{ => tabs/stream}/components/LoadMore.js            | 0
 .../src/{ => tabs/stream}/components/NewCount.js            | 0
 .../src/{ => tabs/stream}/components/NoComments.css         | 0
 .../src/{ => tabs/stream}/components/NoComments.js          | 0
 .../src/{ => tabs/stream}/components/Stream.css             | 0
 .../src/{ => tabs/stream}/components/Stream.js              | 4 ++--
 .../src/{ => tabs/stream}/components/StreamError.css        | 0
 .../src/{ => tabs/stream}/components/StreamError.js         | 0
 .../stream/components/SuspendedAccount.css}                 | 0
 .../src/{ => tabs/stream}/components/SuspendedAccount.js    | 2 +-
 .../src/{ => tabs/stream}/components/util.js                | 0
 .../{ => tabs/stream}/containers/AutomaticAssetClosure.js   | 0
 .../src/{ => tabs/stream}/containers/Comment.js             | 4 ++--
 .../src/{ => tabs/stream}/containers/Stream.js              | 6 +++---
 26 files changed, 12 insertions(+), 12 deletions(-)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/AllCommentsPane.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/Comment.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/Comment.js (99%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/CommentTombstone.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/CommentTombstone.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/CountdownSeconds.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/EditableCommentContent.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/IgnoreUserWizard.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/InactiveCommentLabel.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/InactiveCommentLabel.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/LoadMore.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/NewCount.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/NoComments.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/NoComments.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/Stream.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/Stream.js (98%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/StreamError.css (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/StreamError.js (100%)
 rename client/coral-embed-stream/src/{components/SuspendAccount.css => tabs/stream/components/SuspendedAccount.css} (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/SuspendedAccount.js (98%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/components/util.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/containers/AutomaticAssetClosure.js (100%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/containers/Comment.js (96%)
 rename client/coral-embed-stream/src/{ => tabs/stream}/containers/Stream.js (98%)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 132b3be7f..e12201805 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Stream from '../containers/Stream';
+import Stream from '../tabs/stream/containers/Stream';
 import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 3fef8872d..4c65d8fde 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -13,7 +13,7 @@ import * as assetActions from '../actions/asset';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
-import Stream from './Stream';
+import Stream from '../tabs/stream/containers/Stream';
 import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
diff --git a/client/coral-embed-stream/src/components/AllCommentsPane.js b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
similarity index 100%
rename from client/coral-embed-stream/src/components/AllCommentsPane.js
rename to client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
similarity index 100%
rename from client/coral-embed-stream/src/components/Comment.css
rename to client/coral-embed-stream/src/tabs/stream/components/Comment.css
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
similarity index 99%
rename from client/coral-embed-stream/src/components/Comment.js
rename to client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 7ae36b5fa..3da59afdc 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -9,13 +9,13 @@ import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {THREADING_LEVEL} from '../constants/stream';
+import {THREADING_LEVEL} from '../../../constants/stream';
 import merge from 'lodash/merge';
 import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
-import {findCommentWithId} from '../graphql/utils';
+import {findCommentWithId} from '../../../graphql/utils';
 import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
diff --git a/client/coral-embed-stream/src/components/CommentTombstone.css b/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.css
similarity index 100%
rename from client/coral-embed-stream/src/components/CommentTombstone.css
rename to client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.css
diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js
similarity index 100%
rename from client/coral-embed-stream/src/components/CommentTombstone.js
rename to client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js
diff --git a/client/coral-embed-stream/src/components/CountdownSeconds.js b/client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js
similarity index 100%
rename from client/coral-embed-stream/src/components/CountdownSeconds.js
rename to client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js
diff --git a/client/coral-embed-stream/src/components/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
similarity index 100%
rename from client/coral-embed-stream/src/components/EditableCommentContent.js
rename to client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
diff --git a/client/coral-embed-stream/src/components/IgnoreUserWizard.js b/client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js
similarity index 100%
rename from client/coral-embed-stream/src/components/IgnoreUserWizard.js
rename to client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js
diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.css b/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.css
similarity index 100%
rename from client/coral-embed-stream/src/components/InactiveCommentLabel.css
rename to client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.css
diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.js b/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js
similarity index 100%
rename from client/coral-embed-stream/src/components/InactiveCommentLabel.js
rename to client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js
diff --git a/client/coral-embed-stream/src/components/LoadMore.js b/client/coral-embed-stream/src/tabs/stream/components/LoadMore.js
similarity index 100%
rename from client/coral-embed-stream/src/components/LoadMore.js
rename to client/coral-embed-stream/src/tabs/stream/components/LoadMore.js
diff --git a/client/coral-embed-stream/src/components/NewCount.js b/client/coral-embed-stream/src/tabs/stream/components/NewCount.js
similarity index 100%
rename from client/coral-embed-stream/src/components/NewCount.js
rename to client/coral-embed-stream/src/tabs/stream/components/NewCount.js
diff --git a/client/coral-embed-stream/src/components/NoComments.css b/client/coral-embed-stream/src/tabs/stream/components/NoComments.css
similarity index 100%
rename from client/coral-embed-stream/src/components/NoComments.css
rename to client/coral-embed-stream/src/tabs/stream/components/NoComments.css
diff --git a/client/coral-embed-stream/src/components/NoComments.js b/client/coral-embed-stream/src/tabs/stream/components/NoComments.js
similarity index 100%
rename from client/coral-embed-stream/src/components/NoComments.js
rename to client/coral-embed-stream/src/tabs/stream/components/NoComments.js
diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/tabs/stream/components/Stream.css
similarity index 100%
rename from client/coral-embed-stream/src/components/Stream.css
rename to client/coral-embed-stream/src/tabs/stream/components/Stream.css
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
similarity index 98%
rename from client/coral-embed-stream/src/components/Stream.js
rename to client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 084586eeb..f2b45d47d 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -16,10 +16,10 @@ import {isCommentActive} from 'coral-framework/utils';
 import {Button, Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
-import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
+import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
 import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
-import ExtendableTabPanel from '../containers/ExtendableTabPanel';
+import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
 
diff --git a/client/coral-embed-stream/src/components/StreamError.css b/client/coral-embed-stream/src/tabs/stream/components/StreamError.css
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamError.css
rename to client/coral-embed-stream/src/tabs/stream/components/StreamError.css
diff --git a/client/coral-embed-stream/src/components/StreamError.js b/client/coral-embed-stream/src/tabs/stream/components/StreamError.js
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamError.js
rename to client/coral-embed-stream/src/tabs/stream/components/StreamError.js
diff --git a/client/coral-embed-stream/src/components/SuspendAccount.css b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.css
similarity index 100%
rename from client/coral-embed-stream/src/components/SuspendAccount.css
rename to client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.css
diff --git a/client/coral-embed-stream/src/components/SuspendedAccount.js b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
similarity index 98%
rename from client/coral-embed-stream/src/components/SuspendedAccount.js
rename to client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
index ce9a1c23c..0369ef559 100644
--- a/client/coral-embed-stream/src/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
-import styles from './SuspendAccount.css';
+import styles from './SuspendedAccount.css';
 import {Button} from 'coral-ui';
 import validate from 'coral-framework/helpers/validate';
 import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
diff --git a/client/coral-embed-stream/src/components/util.js b/client/coral-embed-stream/src/tabs/stream/components/util.js
similarity index 100%
rename from client/coral-embed-stream/src/components/util.js
rename to client/coral-embed-stream/src/tabs/stream/components/util.js
diff --git a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js b/client/coral-embed-stream/src/tabs/stream/containers/AutomaticAssetClosure.js
similarity index 100%
rename from client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
rename to client/coral-embed-stream/src/tabs/stream/containers/AutomaticAssetClosure.js
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
similarity index 96%
rename from client/coral-embed-stream/src/containers/Comment.js
rename to client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index 26fc872d5..eb27517f7 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -4,9 +4,9 @@ import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
 import {getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {THREADING_LEVEL} from '../constants/stream';
+import {THREADING_LEVEL} from '../../../constants/stream';
 import hoistStatics from 'recompose/hoistStatics';
-import {nest} from '../graphql/utils';
+import {nest} from '../../../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
similarity index 98%
rename from client/coral-embed-stream/src/containers/Stream.js
rename to client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index 464ce31fc..8798a51ae 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
+import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../../../constants/stream';
 import {
   withPostComment, withPostFlag, withPostDontAgree,
   withDeleteAction, withEditComment
@@ -10,7 +10,7 @@ import {
 
 import * as authActions from 'coral-embed-stream/src/actions/auth';
 import * as notificationActions from 'coral-framework/actions/notification';
-import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
+import {setActiveReplyBox, setActiveTab, viewAllComments} from '../../../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments, withEmit} from 'coral-framework/hocs';
@@ -23,7 +23,7 @@ import {
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
   nest,
-} from '../graphql/utils';
+} from '../../../graphql/utils';
 
 const {showSignInDialog, editName} = authActions;
 const {notify} = notificationActions;

From c664438ade7f313a6db52aa6302588a7371a70c6 Mon Sep 17 00:00:00 2001
From: Max Eddy <max@alleyinteractive.com>
Date: Wed, 15 Nov 2017 20:50:23 -0500
Subject: [PATCH 174/344] Export CheckRecaptcha, so that it can be used in
 other services.

---
 services/passport.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/services/passport.js b/services/passport.js
index 0920c1c39..1d5d0ddcf 100644
--- a/services/passport.js
+++ b/services/passport.js
@@ -515,5 +515,6 @@ module.exports = {
   HandleAuthPopupCallback,
   HandleGenerateCredentials,
   HandleLogout,
-  CheckBlacklisted
+  CheckBlacklisted,
+  CheckRecaptcha,
 };

From f7c46b1a423972742daf9144bf281e0a2a138404 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 16:19:36 +0100
Subject: [PATCH 175/344] Move asset fragment up one level

---
 .../src/components/Embed.js                   |  11 +-
 .../src/containers/Embed.js                   |   9 ++
 .../tabs/configure/components/Configure.js    |  10 ++
 .../tabs/configure/containers/Configure.js    |  33 ++++++
 .../tabs/stream/components/AllCommentsPane.js |   4 +-
 .../src/tabs/stream/components/Stream.js      |  11 +-
 .../src/tabs/stream/containers/Stream.js      | 106 +++++++++---------
 7 files changed, 125 insertions(+), 59 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Configure.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/containers/Configure.js

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index e12201805..4a48c54e5 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Stream from '../tabs/stream/containers/Stream';
+import Configure from '../tabs/configure/containers/Configure';
 import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
@@ -45,6 +46,11 @@ export default class Embed extends React.Component {
           {t('framework.configure_stream')}
         </Tab>
       );
+      tabs.push(
+        <Tab key='config2' tabId='config2'>
+          {t('framework.configure_stream')}
+        </Tab>
+      );
     }
     return tabs;
   }
@@ -87,7 +93,7 @@ export default class Embed extends React.Component {
           tabs={this.getTabs()}
           tabPanes={[
             <TabPane key='stream' tabId='stream' className='talk-embed-stream-comments-tab-pane'>
-              <Stream data={data} root={root} />
+              <Stream data={data} root={root} asset={root.asset} />
             </TabPane>,
             <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
               <ProfileContainer />
@@ -95,6 +101,9 @@ export default class Embed extends React.Component {
             <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
               <ConfigureStreamContainer />
             </TabPane>,
+            <TabPane key='config2' tabId='config2' className='talk-embed-stream-configuration2-tab-pane'>
+              <Configure data={data} root={root} asset={root.asset} />
+            </TabPane>,
           ]}
         />
       </div>
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 4c65d8fde..f17be9a16 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -14,6 +14,7 @@ import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from '../tabs/stream/containers/Stream';
+import Configure from '../tabs/configure/containers/Configure';
 import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
@@ -170,10 +171,18 @@ const EMBED_QUERY = gql`
       id
       status
     }
+    asset(id: $assetId, url: $assetUrl) {
+      ...${getDefinitionName(Configure.fragments.asset)}
+      ...${getDefinitionName(Stream.fragments.asset)}
+    }
     ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
+    ...${getDefinitionName(Configure.fragments.root)}
   }
   ${Stream.fragments.root}
+  ${Stream.fragments.asset}
+  ${Configure.fragments.root}
+  ${Configure.fragments.asset}
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
new file mode 100644
index 000000000..610fa5fae
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+class Configure extends React.Component {
+  render() {
+    console.log(this.props);
+    return <div>Configure</div>;
+  }
+}
+
+export default Configure;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
new file mode 100644
index 000000000..a52b65822
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
+import Configure from '../components/Configure';
+
+class ConfigureContainer extends React.Component {
+  render() {
+    return <Configure
+      settings={this.props.asset.settings}
+    />;
+  }
+}
+
+const withConfigureFragments = withFragments({
+  root: gql`
+    fragment CoralEmbedStream_Configure_root on RootQuery {
+      __typename
+    }
+  `,
+  asset: gql`
+    fragment CoralEmbedStream_Configure_asset on Asset {
+      settings {
+        moderation
+      }
+    }
+  `,
+});
+
+const enhance = compose(
+  withConfigureFragments,
+);
+
+export default enhance(ConfigureContainer);
diff --git a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
index 2967b9972..3a64820c7 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
@@ -14,7 +14,7 @@ const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 // comments to show. The spare cursor functions as a backup in case one
 // of the comments gets deleted.
 function resetCursors(state, props) {
-  const comments = props.root.asset.comments;
+  const comments = props.asset.comments;
   if (comments && comments.nodes.length) {
     const idCursors = [comments.nodes[0].id];
     if (comments.nodes[1]) {
@@ -30,7 +30,7 @@ function resetCursors(state, props) {
 // using the help of the backup cursor.
 function invalidateCursor(invalidated, state, props) {
   const alt = invalidated === 1 ? 0 : 1;
-  const comments = props.root.asset.comments;
+  const comments = props.asset.comments;
   const idCursors = [];
   if (state.idCursors[alt]) {
     idCursors.push(state.idCursors[alt]);
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index f2b45d47d..6844d1c4f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -47,7 +47,8 @@ class Stream extends React.Component {
       activeReplyBox,
       setActiveReplyBox,
       commentClassNames,
-      root: {asset, asset: {comment}},
+      asset,
+      asset: {comment},
       postComment,
       notify,
       editComment,
@@ -113,7 +114,8 @@ class Stream extends React.Component {
       activeReplyBox,
       setActiveReplyBox,
       commentClassNames,
-      root: {asset, asset: {comments, totalCommentCount}},
+      asset,
+      asset: {comments, totalCommentCount},
       postComment,
       notify,
       editComment,
@@ -169,6 +171,7 @@ class Stream extends React.Component {
               <AllCommentsPane
                 data={data}
                 root={root}
+                asset={asset}
                 comments={comments}
                 commentClassNames={commentClassNames}
                 setActiveReplyBox={setActiveReplyBox}
@@ -176,7 +179,6 @@ class Stream extends React.Component {
                 notify={notify}
                 disableReply={!open}
                 postComment={postComment}
-                asset={asset}
                 currentUser={user}
                 postFlag={postFlag}
                 postDontAgree={postDontAgree}
@@ -202,7 +204,8 @@ class Stream extends React.Component {
       data,
       root,
       appendItemArray,
-      root: {asset, asset: {comment: highlightedComment}},
+      asset,
+      asset: {comment: highlightedComment},
       postComment,
       notify,
       updateItem,
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index 8798a51ae..cd84025ba 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -36,7 +36,7 @@ class StreamContainer extends React.Component {
     this.commentsEditedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_EDITED_SUBSCRIPTION,
       variables: {
-        assetId: this.props.root.asset.id,
+        assetId: this.props.asset.id,
       },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
@@ -62,7 +62,7 @@ class StreamContainer extends React.Component {
     this.commentsAddedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_ADDED_SUBSCRIPTION,
       variables: {
-        assetId: this.props.root.asset.id,
+        assetId: this.props.asset.id,
       },
       updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
 
@@ -116,7 +116,7 @@ class StreamContainer extends React.Component {
         limit: parent_id ? 999999 : ADDTL_COMMENTS_ON_LOAD_MORE,
         cursor: comment.replies.endCursor,
         parent_id,
-        asset_id: this.props.root.asset.id,
+        asset_id: this.props.asset.id,
         sortOrder: 'ASC',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
@@ -131,9 +131,9 @@ class StreamContainer extends React.Component {
       query: LOAD_MORE_QUERY,
       variables: {
         limit: ADDTL_COMMENTS_ON_LOAD_MORE,
-        cursor: this.props.root.asset.comments.endCursor,
+        cursor: this.props.asset.comments.endCursor,
         parent_id: null,
-        asset_id: this.props.root.asset.id,
+        asset_id: this.props.asset.id,
         sortOrder: this.props.data.variables.sortOrder,
         sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
@@ -177,9 +177,9 @@ class StreamContainer extends React.Component {
   }
 
   render() {
-    if (!this.props.root.asset
-      || this.props.root.asset.comment === undefined
-      && !this.props.root.asset.comments
+    if (!this.props.asset
+      || this.props.asset.comment === undefined
+      && !this.props.asset.comments
     ) {
       return <Spinner />;
     }
@@ -279,49 +279,6 @@ const slots = [
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
-      asset(id: $assetId, url: $assetUrl) {
-        comment(id: $commentId) @include(if: $hasComment) {
-          ...CoralEmbedStream_Stream_comment
-          ${nest(`
-            parent {
-              ...CoralEmbedStream_Stream_comment
-              ...nest
-            }
-          `, THREADING_LEVEL)}
-        }
-        id
-        title
-        url
-        closedAt
-        isClosed
-        created_at
-        settings {
-          moderation
-          infoBoxEnable
-          infoBoxContent
-          premodLinksEnable
-          questionBoxEnable
-          questionBoxContent
-          questionBoxIcon
-          closedTimeout
-          closedMessage
-          charCountEnable
-          charCount
-          requireEmailConfirmation
-        }
-        commentCount @skip(if: $hasComment)
-        totalCommentCount @skip(if: $hasComment)
-        comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
-          nodes {
-            ...CoralEmbedStream_Stream_comment
-          }
-          hasNextPage
-          startCursor
-          endCursor
-        }
-        ${getSlotFragmentSpreads(slots, 'asset')}
-        ...${getDefinitionName(Comment.fragments.asset)}
-      }
       me {
         status
         ignoredUsers {
@@ -334,8 +291,53 @@ const fragments = {
       ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
-    ${Comment.fragments.asset}
     ${Comment.fragments.root}
+  `,
+  asset: gql`
+    fragment CoralEmbedStream_Stream_asset on Asset {
+      comment(id: $commentId) @include(if: $hasComment) {
+        ...CoralEmbedStream_Stream_comment
+        ${nest(`
+          parent {
+            ...CoralEmbedStream_Stream_comment
+            ...nest
+          }
+        `, THREADING_LEVEL)}
+      }
+      id
+      title
+      url
+      closedAt
+      isClosed
+      created_at
+      settings {
+        moderation
+        infoBoxEnable
+        infoBoxContent
+        premodLinksEnable
+        questionBoxEnable
+        questionBoxContent
+        questionBoxIcon
+        closedTimeout
+        closedMessage
+        charCountEnable
+        charCount
+        requireEmailConfirmation
+      }
+      commentCount @skip(if: $hasComment)
+      totalCommentCount @skip(if: $hasComment)
+      comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
+        nodes {
+          ...CoralEmbedStream_Stream_comment
+        }
+        hasNextPage
+        startCursor
+        endCursor
+      }
+      ${getSlotFragmentSpreads(slots, 'asset')}
+      ...${getDefinitionName(Comment.fragments.asset)}
+    }
+    ${Comment.fragments.asset}
     ${commentFragment}
   `,
 };

From abdf5335da742e93e3464997223460af68b446d1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 19:50:11 +0100
Subject: [PATCH 176/344] Add status_history to query

---
 client/coral-admin/src/routes/Moderation/containers/Comment.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Comment.js b/client/coral-admin/src/routes/Moderation/containers/Comment.js
index 9748359ae..299c7cecb 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Comment.js
@@ -47,6 +47,9 @@ export default withFragments({
       editing {
         edited
       }
+      status_history {
+        type
+      }
       hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}

From dfbb9ad96fd4bc755a39108eac714ab223bbf88f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 20:16:53 +0100
Subject: [PATCH 177/344] Implement AssetStatusInfo UI

---
 .../configure/components/AssetStatusInfo.js   | 28 +++++++++++++++++++
 .../tabs/configure/components/Configure.js    | 18 ++++++++++--
 .../tabs/configure/containers/Configure.js    |  9 ++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
new file mode 100644
index 000000000..e20f242cc
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t, {timeago} from 'coral-framework/services/i18n';
+
+const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (
+  <div>
+    <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
+    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(closedAt)}.</p> : ''}
+    <div className="close-comments-intro-wrapper">
+      <p>
+        {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+      </p>
+      <Button onClick={!isClosed ? onClose : onOpen}>
+        {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+      </Button>
+    </div>
+  </div>
+);
+
+AssetStatusInfo.propTypes = {
+  isClosed: PropTypes.bool.isRequired,
+  closedAt: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onOpen: PropTypes.func.isRequired,
+};
+
+export default AssetStatusInfo;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index 610fa5fae..134923f74 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -1,10 +1,24 @@
 import React from 'react';
+import AssetStatusInfo from './AssetStatusInfo';
+import PropTypes from 'prop-types';
 
 class Configure extends React.Component {
   render() {
-    console.log(this.props);
-    return <div>Configure</div>;
+    return (
+      <div className='talk-embed-stream-configuration-container'>
+        <hr />
+        <AssetStatusInfo
+          isClosed={this.props.isClosed}
+          closedAt={this.props.closedAt}
+        />
+      </div>
+    );
   }
 }
 
+Configure.propTypes = {
+  isClosed: PropTypes.bool,
+  closedAt: PropTypes.object,
+};
+
 export default Configure;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index a52b65822..11f81da20 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -2,15 +2,22 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
+import PropTypes from 'prop-types';
 
 class ConfigureContainer extends React.Component {
   render() {
     return <Configure
       settings={this.props.asset.settings}
+      isClosed={this.props.asset.isClosed}
+      closedAt={this.props.asset.closedAt}
     />;
   }
 }
 
+ConfigureContainer.propTypes = {
+  asset: PropTypes.object,
+};
+
 const withConfigureFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Configure_root on RootQuery {
@@ -19,6 +26,8 @@ const withConfigureFragments = withFragments({
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
+      closedAt
+      isClosed
       settings {
         moderation
       }

From 78e0fb6cc6b91b5a784d8bf00534bd6f100c477e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 20:31:08 +0100
Subject: [PATCH 178/344] Add UpdateAssetStatus mutation

---
 client/coral-framework/graphql/fragments.js |  1 +
 client/coral-framework/graphql/mutations.js | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js
index a99dc0ee2..8b4c19e6f 100644
--- a/client/coral-framework/graphql/fragments.js
+++ b/client/coral-framework/graphql/fragments.js
@@ -18,6 +18,7 @@ export default {
     'StopIgnoringUserResponse',
     'UpdateSettingsResponse',
     'UpdateAssetSettingsResponse',
+    'UpdateAssetStatusResponse',
   )
 };
 
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 1c43f4707..21bfd1825 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -382,3 +382,22 @@ export const withUpdateAssetSettings = withMutation(
         });
       }}),
   });
+
+export const withUpdateAssetStatus = withMutation(
+  gql`
+    mutation UpdateAssetStatus($id: ID!, $input: AssetStatusInput!) {
+      updateAssetStatus(id: $id, input: $input) {
+        ...UpdateAssetStatusResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      updateAssetStatus: (id, input) => {
+        return mutate({
+          variables: {
+            id,
+            input,
+          },
+        });
+      }}),
+  });

From c58d9068e3988c6cc4390a5283419fa89e2164dd Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 17 Nov 2017 12:39:34 +0100
Subject: [PATCH 179/344] Implement open and close asset

---
 .../configure/components/AssetStatusInfo.js   |  4 +--
 .../tabs/configure/components/Configure.js    |  8 ++++--
 .../tabs/configure/containers/Configure.js    | 12 ++++++++-
 client/coral-framework/graphql/mutations.js   | 25 ++++++++++++++++++-
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
index e20f242cc..fec88537c 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -6,7 +6,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (
   <div>
     <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(closedAt)}.</p> : ''}
+    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
     <div className="close-comments-intro-wrapper">
       <p>
         {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
@@ -20,7 +20,7 @@ const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (
 
 AssetStatusInfo.propTypes = {
   isClosed: PropTypes.bool.isRequired,
-  closedAt: PropTypes.object.isRequired,
+  closedAt: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onOpen: PropTypes.func.isRequired,
 };
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index 134923f74..821663ab7 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -10,6 +10,8 @@ class Configure extends React.Component {
         <AssetStatusInfo
           isClosed={this.props.isClosed}
           closedAt={this.props.closedAt}
+          onOpen={this.props.onOpenAsset}
+          onClose={this.props.onCloseAsset}
         />
       </div>
     );
@@ -17,8 +19,10 @@ class Configure extends React.Component {
 }
 
 Configure.propTypes = {
-  isClosed: PropTypes.bool,
-  closedAt: PropTypes.object,
+  isClosed: PropTypes.bool.isRequired,
+  closedAt: PropTypes.string,
+  onOpenAsset: PropTypes.func.isRequired,
+  onCloseAsset: PropTypes.func.isRequired,
 };
 
 export default Configure;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index 11f81da20..973e5a2d3 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -3,19 +3,27 @@ import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
 import PropTypes from 'prop-types';
+import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
 
 class ConfigureContainer extends React.Component {
+
+  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
+  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
+
   render() {
     return <Configure
       settings={this.props.asset.settings}
       isClosed={this.props.asset.isClosed}
       closedAt={this.props.asset.closedAt}
+      onOpenAsset={this.openAsset}
+      onCloseAsset={this.closeAsset}
     />;
   }
 }
 
 ConfigureContainer.propTypes = {
-  asset: PropTypes.object,
+  asset: PropTypes.object.isRequired,
+  updateAssetStatus: PropTypes.func.isRequired,
 };
 
 const withConfigureFragments = withFragments({
@@ -26,6 +34,7 @@ const withConfigureFragments = withFragments({
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
+      id
       closedAt
       isClosed
       settings {
@@ -37,6 +46,7 @@ const withConfigureFragments = withFragments({
 
 const enhance = compose(
   withConfigureFragments,
+  withUpdateAssetStatus,
 );
 
 export default enhance(ConfigureContainer);
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 21bfd1825..ed4a6f782 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -385,7 +385,7 @@ export const withUpdateAssetSettings = withMutation(
 
 export const withUpdateAssetStatus = withMutation(
   gql`
-    mutation UpdateAssetStatus($id: ID!, $input: AssetStatusInput!) {
+    mutation UpdateAssetStatus($id: ID!, $input: UpdateAssetStatusInput!) {
       updateAssetStatus(id: $id, input: $input) {
         ...UpdateAssetStatusResponse
       }
@@ -398,6 +398,29 @@ export const withUpdateAssetStatus = withMutation(
             id,
             input,
           },
+          optimisticResponse: {
+            updateAssetStatus: {
+              __typename: 'UpdateAssetStatusResponse',
+              errors: null,
+            }
+          },
+          update: (proxy) => {
+            if (input.closedAt !== undefined) {
+              const fragment = gql`
+                fragment Talk_UpdateAssetStatusResponse on Asset {
+                  closedAt
+                  isClosed
+                }`;
+
+              const fragmentId = `Asset_${id}`;
+              const data = {
+                __typename: 'Asset',
+                closedAt: input.closedAt,
+                isClosed: !!input.closedAt && new Date(input.closedAt).getTime() <= new Date().getTime(),
+              };
+              proxy.writeFragment({fragment, id: fragmentId, data});
+            }
+          }
         });
       }}),
   });

From 853b0ca6dd1cbf7287028e0e2048ea1efa8134c5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 17 Nov 2017 15:42:06 +0100
Subject: [PATCH 180/344] Automatic asset closure

---
 .../src/actions/configure.js                  |  0
 .../src/components/Embed.js                   |  4 +-
 .../containers/AutomaticAssetClosure.js       | 33 ++++++---
 .../src/containers/Embed.js                   |  3 +
 .../configure/components/AssetStatusInfo.js   | 68 +++++++++++++++----
 .../src/tabs/stream/components/Stream.js      |  2 -
 .../src/tabs/stream/containers/Stream.js      |  1 -
 7 files changed, 83 insertions(+), 28 deletions(-)
 create mode 100644 client/coral-embed-stream/src/actions/configure.js
 rename client/coral-embed-stream/src/{tabs/stream => }/containers/AutomaticAssetClosure.js (65%)

diff --git a/client/coral-embed-stream/src/actions/configure.js b/client/coral-embed-stream/src/actions/configure.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 4a48c54e5..bbdaa2f19 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -5,6 +5,7 @@ import Configure from '../tabs/configure/containers/Configure';
 import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
+import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 
 import ExtendableTabPanel from '../containers/ExtendableTabPanel';
 import {Tab, TabPane} from 'coral-ui';
@@ -56,11 +57,12 @@ export default class Embed extends React.Component {
   }
 
   render() {
-    const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
+    const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
     const hasHighlightedComment = !!commentId;
 
     return (
       <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+        <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
             href={`embed/stream/login?parentUrl=${encodeURIComponent(parentUrl)}`}
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/AutomaticAssetClosure.js b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
similarity index 65%
rename from client/coral-embed-stream/src/tabs/stream/containers/AutomaticAssetClosure.js
rename to client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
index 487e927a8..f6ade1de0 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/AutomaticAssetClosure.js
+++ b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
 
 const FRAGMENT = gql`
   fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
-    id
     isClosed
   }
 `;
@@ -26,15 +26,15 @@ class AutomaticAssetClosure extends React.Component {
   timer = null;
 
   componentWillMount() {
-    this.setupTimer(this.props.assetId, this.props.closedAt);
+    this.setupTimer(this.props.asset.id, this.props.asset.closedAt);
   }
 
   componentWillReceiveProps(next) {
     if (
-      this.props.assetId !== next.assetId ||
-      this.props.closedAt !== next.closedAt
+      this.props.asset.id !== next.asset.id ||
+      this.props.asset.closedAt !== next.asset.closedAt
     ) {
-      this.setupTimer(next.assetId, next.closedAt);
+      this.setupTimer(next.asset.id, next.asset.closedAt);
     }
   }
 
@@ -43,6 +43,7 @@ class AutomaticAssetClosure extends React.Component {
       fragment: FRAGMENT,
       id: getFragmentId(assetId),
       data: {
+        __typename: 'Asset',
         isClosed: true,
       },
     });
@@ -74,9 +75,21 @@ class AutomaticAssetClosure extends React.Component {
   }
 }
 
-AutomaticAssetClosure.PropTypes = {
-  assetId: PropTypes.string,
-  closedAt: PropTypes.string,
+AutomaticAssetClosure.propTypes = {
+  asset: PropTypes.object.isRequired,
 };
 
-export default AutomaticAssetClosure;
+const withAutomaticAssetClosureFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AutomaticAssetClosure_asset on Asset {
+      id
+      closedAt
+    }
+  `,
+});
+
+const enhance = compose(
+  withAutomaticAssetClosureFragments,
+);
+
+export default enhance(AutomaticAssetClosure);
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index f17be9a16..7a8df6e7c 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -14,6 +14,7 @@ import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from '../tabs/stream/containers/Stream';
+import AutomaticAssetClosure from './AutomaticAssetClosure';
 import Configure from '../tabs/configure/containers/Configure';
 import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
@@ -174,6 +175,7 @@ const EMBED_QUERY = gql`
     asset(id: $assetId, url: $assetUrl) {
       ...${getDefinitionName(Configure.fragments.asset)}
       ...${getDefinitionName(Stream.fragments.asset)}
+      ...${getDefinitionName(AutomaticAssetClosure.fragments.asset)}
     }
     ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
@@ -183,6 +185,7 @@ const EMBED_QUERY = gql`
   ${Stream.fragments.asset}
   ${Configure.fragments.root}
   ${Configure.fragments.asset}
+  ${AutomaticAssetClosure.fragments.asset}
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {
diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
index fec88537c..09949b68e 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -3,20 +3,60 @@ import {Button} from 'coral-ui';
 import PropTypes from 'prop-types';
 import t, {timeago} from 'coral-framework/services/i18n';
 
-const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (
-  <div>
-    <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
-      </p>
-      <Button onClick={!isClosed ? onClose : onOpen}>
-        {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
-      </Button>
-    </div>
-  </div>
-);
+class AssetStatusInfo extends React.Component {
+
+  timer = null;
+
+  constructor(props) {
+    super(props);
+    this.setupTimer(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setupTimer(nextProps);
+  }
+
+  interval(closedAt) {
+    const diff = new Date(closedAt).getTime() - new Date().getTime();
+    return diff > 60000 ? 60000 : 1000;
+  }
+
+  setupTimer({closedAt, isClosed} = this.props) {
+    if (this.timer && (isClosed || !closedAt)) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    if (isClosed || !closedAt) {
+      this.timer = null;
+      return;
+    }
+    if (!this.timer) {
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        this.forceUpdate();
+        this.setupTimer();
+      }, this.interval(closedAt));
+    }
+  }
+
+  render() {
+    const {isClosed, closedAt, onClose, onOpen} = this.props;
+    return (
+      <div>
+        <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
+        {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
+        <div className="close-comments-intro-wrapper">
+          <p>
+            {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+          </p>
+          <Button onClick={!isClosed ? onClose : onOpen}>
+            {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
 
 AssetStatusInfo.propTypes = {
   isClosed: PropTypes.bool.isRequired,
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 6844d1c4f..99df8c1c9 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -18,7 +18,6 @@ import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
-import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
@@ -234,7 +233,6 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
         {highlightedComment &&
           <Button
             cStyle="darkGrey"
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index cd84025ba..dad69b960 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -307,7 +307,6 @@ const fragments = {
       id
       title
       url
-      closedAt
       isClosed
       created_at
       settings {

From 285ec98d54afbc1d886ae69c5cfe6f7055badcf4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 17 Nov 2017 16:53:56 +0100
Subject: [PATCH 181/344] Refactor styles

---
 .../configure/components/AssetStatusInfo.css     | 10 ++++++++++
 .../tabs/configure/components/AssetStatusInfo.js |  6 ++++--
 client/coral-embed-stream/style/default.css      | 16 ----------------
 3 files changed, 14 insertions(+), 18 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css

diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css
new file mode 100644
index 000000000..3dfd98ccc
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css
@@ -0,0 +1,10 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button {
+  width: 300px;
+  margin-left: 20px;
+}
diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
index 09949b68e..2a1900533 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -2,6 +2,8 @@ import React from 'react';
 import {Button} from 'coral-ui';
 import PropTypes from 'prop-types';
 import t, {timeago} from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './AssetStatusInfo.css';
 
 class AssetStatusInfo extends React.Component {
 
@@ -45,11 +47,11 @@ class AssetStatusInfo extends React.Component {
       <div>
         <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
         {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-        <div className="close-comments-intro-wrapper">
+        <div className={cn('close-comments-intro-wrapper', styles.wrapper)}>
           <p>
             {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
           </p>
-          <Button onClick={!isClosed ? onClose : onOpen}>
+          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
             {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
           </Button>
         </div>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 0dcbf856e..63f1edf67 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -275,22 +275,6 @@ button.comment__action-button[disabled],
 
 /* Close comments */
 
-.close-comments-intro-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.close-comments-intro-wrapper button {
-  width: 300px;
-  margin-left: 20px;
-}
-
-.close-comments-intro-wrapper button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .close-comments-message {
   box-sizing: border-box;
   width: 100%;

From 3e4c9dcb48527e05366796ba0341c00549d2c2d7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 17 Nov 2017 17:02:32 +0100
Subject: [PATCH 182/344] Refactor query tree

---
 .../tabs/configure/components/Configure.js    | 14 ++----
 .../configure/containers/AssetStatusInfo.js   | 47 +++++++++++++++++++
 .../tabs/configure/containers/Configure.js    | 27 ++++-------
 3 files changed, 62 insertions(+), 26 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index 821663ab7..f5f54e339 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import AssetStatusInfo from './AssetStatusInfo';
+import AssetStatusInfo from '../containers/AssetStatusInfo';
 import PropTypes from 'prop-types';
 
 class Configure extends React.Component {
@@ -8,10 +8,7 @@ class Configure extends React.Component {
       <div className='talk-embed-stream-configuration-container'>
         <hr />
         <AssetStatusInfo
-          isClosed={this.props.isClosed}
-          closedAt={this.props.closedAt}
-          onOpen={this.props.onOpenAsset}
-          onClose={this.props.onCloseAsset}
+          asset={this.props.asset}
         />
       </div>
     );
@@ -19,10 +16,9 @@ class Configure extends React.Component {
 }
 
 Configure.propTypes = {
-  isClosed: PropTypes.bool.isRequired,
-  closedAt: PropTypes.string,
-  onOpenAsset: PropTypes.func.isRequired,
-  onCloseAsset: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
 };
 
 export default Configure;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
new file mode 100644
index 000000000..c3360f072
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
+import AssetStatusInfo from '../components/AssetStatusInfo';
+import PropTypes from 'prop-types';
+import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+
+class AssetStatusInfoContainer extends React.Component {
+
+  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
+  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
+
+  render() {
+    return <AssetStatusInfo
+      settings={this.props.asset.settings}
+      isClosed={this.props.asset.isClosed}
+      closedAt={this.props.asset.closedAt}
+      onOpen={this.openAsset}
+      onClose={this.closeAsset}
+    />;
+  }
+}
+
+AssetStatusInfoContainer.propTypes = {
+  asset: PropTypes.object.isRequired,
+  updateAssetStatus: PropTypes.func.isRequired,
+};
+
+const withAssetStatusInfoFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AssetStatusInfo_asset on Asset {
+      id
+      closedAt
+      isClosed
+      settings {
+        moderation
+      }
+    }
+  `,
+});
+
+const enhance = compose(
+  withAssetStatusInfoFragments,
+  withUpdateAssetStatus,
+);
+
+export default enhance(AssetStatusInfoContainer);
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index 973e5a2d3..48c596f05 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -2,28 +2,25 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
+import AssetStatusInfo from './AssetStatusInfo';
 import PropTypes from 'prop-types';
-import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+import {getDefinitionName} from 'coral-framework/utils';
 
 class ConfigureContainer extends React.Component {
 
-  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
-  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
-
   render() {
     return <Configure
-      settings={this.props.asset.settings}
-      isClosed={this.props.asset.isClosed}
-      closedAt={this.props.asset.closedAt}
-      onOpenAsset={this.openAsset}
-      onCloseAsset={this.closeAsset}
+      data={this.props.data}
+      root={this.props.root}
+      asset={this.props.asset}
     />;
   }
 }
 
 ConfigureContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
-  updateAssetStatus: PropTypes.func.isRequired,
 };
 
 const withConfigureFragments = withFragments({
@@ -34,19 +31,15 @@ const withConfigureFragments = withFragments({
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
-      id
-      closedAt
-      isClosed
-      settings {
-        moderation
-      }
+      __typename
+      ...${getDefinitionName(AssetStatusInfo.fragments.asset)}
     }
+    ${AssetStatusInfo.fragments.asset}
   `,
 });
 
 const enhance = compose(
   withConfigureFragments,
-  withUpdateAssetStatus,
 );
 
 export default enhance(ConfigureContainer);

From 9fb7aa26579918bf0035ce8c63b21baf4069f301 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 18 Nov 2017 11:40:44 +0100
Subject: [PATCH 183/344] Start implementing settings ui

---
 .../src/tabs/configure/components/Configure.js                | 4 ++++
 .../src/tabs/configure/containers/AssetStatusInfo.js          | 3 ---
 .../src/tabs/configure/containers/Configure.js                | 3 +++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index f5f54e339..074fe0616 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import AssetStatusInfo from '../containers/AssetStatusInfo';
+import Settings from '../containers/Settings';
 import PropTypes from 'prop-types';
 
 class Configure extends React.Component {
   render() {
     return (
       <div className='talk-embed-stream-configuration-container'>
+        <Settings
+          asset={this.props.asset}
+        />
         <hr />
         <AssetStatusInfo
           asset={this.props.asset}
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
index c3360f072..3d4248e24 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
@@ -32,9 +32,6 @@ const withAssetStatusInfoFragments = withFragments({
       id
       closedAt
       isClosed
-      settings {
-        moderation
-      }
     }
   `,
 });
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index 48c596f05..3e93e6f64 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -3,6 +3,7 @@ import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
 import AssetStatusInfo from './AssetStatusInfo';
+import Settings from './Settings';
 import PropTypes from 'prop-types';
 import {getDefinitionName} from 'coral-framework/utils';
 
@@ -33,8 +34,10 @@ const withConfigureFragments = withFragments({
     fragment CoralEmbedStream_Configure_asset on Asset {
       __typename
       ...${getDefinitionName(AssetStatusInfo.fragments.asset)}
+      ...${getDefinitionName(Settings.fragments.asset)}
     }
     ${AssetStatusInfo.fragments.asset}
+    ${Settings.fragments.asset}
   `,
 });
 

From 8f9724ed90b93efc1f924986e434642a0c068846 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 12:29:23 +0100
Subject: [PATCH 184/344] Implement configure and redux state

---
 .../routes/Configure/containers/Configure.js  | 32 +-------
 .../src/actions/configure.js                  |  9 +++
 .../src/constants/configure.js                |  4 +
 .../src/reducers/configure.js                 | 42 ++++++++++
 .../coral-embed-stream/src/reducers/index.js  |  2 +
 .../tabs/configure/components/Checkbox.css    | 59 ++++++++++++++
 .../src/tabs/configure/components/Checkbox.js | 28 +++++++
 .../configure/components/Configuration.css    | 27 +++++++
 .../configure/components/Configuration.js     | 46 +++++++++++
 .../tabs/configure/components/Settings.css    | 26 ++++++
 .../src/tabs/configure/components/Settings.js | 46 +++++++++++
 .../src/tabs/configure/containers/Settings.js | 79 +++++++++++++++++++
 client/coral-framework/hocs/index.js          |  1 +
 .../hocs/withMergedSettings.js                | 16 ++++
 client/coral-framework/utils/index.js         | 10 +++
 15 files changed, 399 insertions(+), 28 deletions(-)
 create mode 100644 client/coral-embed-stream/src/constants/configure.js
 create mode 100644 client/coral-embed-stream/src/reducers/configure.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Configuration.css
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Configuration.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Settings.css
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/Settings.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/containers/Settings.js
 create mode 100644 client/coral-framework/hocs/withMergedSettings.js

diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js
index 8f80a3e24..dfa8df876 100644
--- a/client/coral-admin/src/routes/Configure/containers/Configure.js
+++ b/client/coral-admin/src/routes/Configure/containers/Configure.js
@@ -2,38 +2,20 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose, gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
+import {withQuery, withMergedSettings} from 'coral-framework/hocs';
 import {Spinner} from 'coral-ui';
 import {notify} from 'coral-framework/actions/notification';
 import PropTypes from 'prop-types';
-import assignWith from 'lodash/assignWith';
 import {withUpdateSettings} from 'coral-framework/graphql/mutations';
 import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
 import {clearPending, setActiveSection} from '../../../actions/configure';
-
 import Configure from '../components/Configure';
 
-// Like lodash merge but does not recurse into arrays.
-const mergeExcludingArrays = (objValue, srcValue) => {
-  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
-    return assignWith({}, objValue, srcValue, mergeExcludingArrays);
-  }
-  return srcValue;
-};
-
 class ConfigureContainer extends Component {
 
-  // Merge current settings with pending settings.
-  getMergedSettings = (props = this.props) => {
-    return assignWith({}, props.root.settings, props.pending, mergeExcludingArrays);
-  }
-
-  // Cached merged settings.
-  mergedSettings = this.getMergedSettings();
-
   savePending = async () => {
     try {
       await this.props.updateSettings(this.props.pending);
@@ -44,14 +26,6 @@ class ConfigureContainer extends Component {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
-
-    // Recalculate merged settings when necessary.
-    if (this.props.root.settings !== nextProps.root.settings || this.props.pending !== nextProps.pending) {
-      this.mergedSettings = this.getMergedSettings(nextProps);
-    }
-  }
-
   render () {
     if(this.props.data.loading) {
       return <Spinner/>;
@@ -62,7 +36,7 @@ class ConfigureContainer extends Component {
       auth={this.props.auth}
       data={this.props.data}
       root={this.props.root}
-      settings={this.mergedSettings}
+      settings={this.props.mergedSettings}
       canSave={this.props.canSave}
       savePending={this.savePending}
       setActiveSection={this.props.setActiveSection}
@@ -112,6 +86,7 @@ export default compose(
   withUpdateSettings,
   withConfigureQuery,
   connect(mapStateToProps, mapDispatchToProps),
+  withMergedSettings('root.settings', 'pending', 'mergedSettings'),
 )(ConfigureContainer);
 
 ConfigureContainer.propTypes = {
@@ -124,5 +99,6 @@ ConfigureContainer.propTypes = {
   root: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   pending: PropTypes.object.isRequired,
+  mergedSettings: PropTypes.object.isRequired,
   activeSection: PropTypes.string.isRequired,
 };
diff --git a/client/coral-embed-stream/src/actions/configure.js b/client/coral-embed-stream/src/actions/configure.js
index e69de29bb..bfc738fe0 100644
--- a/client/coral-embed-stream/src/actions/configure.js
+++ b/client/coral-embed-stream/src/actions/configure.js
@@ -0,0 +1,9 @@
+import * as actions from '../constants/configure';
+
+export const updatePending = ({updater, errorUpdater}) => {
+  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
+};
+
+export const clearPending = () => {
+  return {type: actions.CLEAR_PENDING};
+};
diff --git a/client/coral-embed-stream/src/constants/configure.js b/client/coral-embed-stream/src/constants/configure.js
new file mode 100644
index 000000000..b29cf6280
--- /dev/null
+++ b/client/coral-embed-stream/src/constants/configure.js
@@ -0,0 +1,4 @@
+const prefix = 'TALK_EMBED_STREAM_CONFIGURE';
+
+export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
+export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
diff --git a/client/coral-embed-stream/src/reducers/configure.js b/client/coral-embed-stream/src/reducers/configure.js
new file mode 100644
index 000000000..0a94d5a54
--- /dev/null
+++ b/client/coral-embed-stream/src/reducers/configure.js
@@ -0,0 +1,42 @@
+import * as actions from '../constants/configure';
+import isEmpty from 'lodash/isEmpty';
+import update from 'immutability-helper';
+
+const initialState = {
+  canSave: false,
+  pending: {},
+  errors: {},
+};
+
+export default function config(state = initialState, action) {
+  switch (action.type) {
+  case actions.UPDATE_PENDING: {
+    let next = state;
+    if (action.updater) {
+      next = update(next, {
+        pending: action.updater,
+      });
+    }
+    if (action.errorUpdater) {
+      next = update(next, {
+        errors: action.errorUpdater,
+      });
+    }
+    const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
+    const canSave = !isEmpty(next.pending) && noErrors;
+    next = update(next, {
+      canSave: {$set: canSave},
+    });
+
+    return next;
+  }
+  case actions.CLEAR_PENDING:
+    return {
+      ...state,
+      pending: {},
+      canSave: false,
+    };
+  default:
+    return state;
+  }
+}
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index 5c553b04f..d6d0c7693 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -2,6 +2,7 @@ import auth from './auth';
 import asset from './asset';
 import embed from './embed';
 import config from './config';
+import configure from './configure';
 import stream from './stream';
 import {reducer as commentBox} from '../../../talk-plugin-commentbox';
 
@@ -11,5 +12,6 @@ export default {
   commentBox,
   embed,
   config,
+  configure,
   stream,
 };
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
new file mode 100644
index 000000000..a25ea150f
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
@@ -0,0 +1,59 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.input {
+  position: absolute;
+  left: 7px;
+  bottom: 7px;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.checkbox {
+  cursor: pointer;
+}
+
+.checkbox:before {
+  content: "\e835";
+  color: #717171;
+  left: 4px;
+  top: 0px;
+  width: 18px;
+  height: 18px;
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  vertical-align: -6px;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+  transition: all .2s ease;
+  z-index: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.checkboxChecked:before {
+  content: "\e834";
+  color: #00a291;
+}
+
+.input:focus + .checkbox:before {
+  color: #00a291;
+}
+
+.input:focus + .checkboxChecked:before {
+  color: #00e291;
+}
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
new file mode 100644
index 000000000..98804fe60
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './Checkbox.css';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+
+const Checkbox = ({onChange, checked, className, ...rest}) => (
+  <label className={cn(styles.root, className)}>
+    <input
+      type="checkbox"
+      className={cn(styles.input, {[styles.inputChecked]: checked})}
+      onChange={onChange}
+      checked={checked}
+      {...rest}
+    />
+    <span
+      className={cn(styles.checkbox, {[styles.checkboxChecked]: checked})}
+      aria-hidden='true'
+    ></span>
+  </label>
+);
+
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
+};
+
+export default Checkbox;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.css b/client/coral-embed-stream/src/tabs/configure/components/Configuration.css
new file mode 100644
index 000000000..b18328a94
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configuration.css
@@ -0,0 +1,27 @@
+.root {
+  position: relative;
+  margin: 12px 12px 12px 0;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-left: 4px;
+}
+
+.title {
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.content {
+  display: inline-block;
+  padding: 0px 50px;
+  box-sizing: border-box;
+}
+
+
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.js b/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
new file mode 100644
index 000000000..025517be6
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import Checkbox from './Checkbox';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './Configuration.css';
+import uuid from 'uuid/v4';
+
+class Configuration extends React.Component {
+
+  id = uuid();
+
+  render() {
+    const {title, children, className, onCheckbox, checked, ...rest} = this.props;
+    return (
+      <div {...rest} className={cn(styles.root, className)}>
+        {checked !== undefined &&
+          <div className={styles.action}>
+            <Checkbox
+              id={this.id}
+              className={styles.checkbox}
+              onChange={onCheckbox}
+              checked={checked} />
+          </div>
+        }
+        <div className={cn(styles.wrapper, {
+          [styles.content]: checked !== undefined,
+        })}>
+          <label htmlFor={this.id} className={styles.title}>{title}</label>
+          <div>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Configuration.propTypes = {
+  title: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  onCheckbox: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Configuration;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.css b/client/coral-embed-stream/src/tabs/configure/components/Settings.css
new file mode 100644
index 000000000..914b7332b
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.css
@@ -0,0 +1,26 @@
+.container {
+  position: relative;
+}
+
+.apply {
+  float: right;
+  margin: 0 10px;
+}
+
+.description {
+  max-width: 380px;
+}
+
+.checkbox {
+  vertical-align: top;
+  margin: 12px 12px 12px 0;
+}
+
+.list {
+  margin-top: 26px;
+}
+
+.wrapper {
+  margin-bottom: 20px;
+}
+
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
new file mode 100644
index 000000000..2235369fe
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './Settings.css';
+import Configuration from './Configuration';
+
+class Settings extends React.Component {
+  render() {
+    const {settings: {moderation}, toggleModeration} = this.props;
+    const changed = false;
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.container}>
+          <h3>{t('configure.title')}</h3>
+          <Button
+            type="submit"
+            className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
+            checked={changed}
+            cStyle={changed ? 'green' : 'darkGrey'}
+          >
+            {t('configure.apply')}
+          </Button>
+          <p className={styles.description}>{t('configure.description')}</p>
+        </div>
+        <div className={styles.list}>
+          <Configuration
+            checked={moderation === 'PRE'}
+            title={t('configure.enable_premod')}
+            onCheckbox={toggleModeration}
+          >
+            {t('configure.enable_premod_description')}
+          </Configuration>
+        </div>
+      </div>
+    );
+  }
+}
+
+Settings.propTypes = {
+  settings: PropTypes.object.isRequired,
+  toggleModeration: PropTypes.func.isRequired,
+};
+
+export default Settings;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
new file mode 100644
index 000000000..66625715d
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments, withMergedSettings} from 'coral-framework/hocs';
+import {getErrorMessages} from 'coral-framework/utils';
+import Settings from '../components/Settings.js';
+import PropTypes from 'prop-types';
+import {withUpdateAssetSettings} from 'coral-framework/graphql/mutations';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {notify} from 'coral-framework/actions/notification';
+import {clearPending, updatePending} from '../../../actions/configure';
+
+class SettingsContainer extends React.Component {
+
+  toggleModeration = () => {
+    const updater = {moderation: {$set: this.props.mergedSettings.moderation === 'PRE' ? 'POST' : 'PRE'}};
+    this.props.updatePending({updater});
+  };
+
+  savePending = async () => {
+    try {
+      await this.props.updateAssetSettings(this.props.asset.id, this.props.pending);
+      this.props.clearPending();
+    }
+    catch(err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  render() {
+    return <Settings
+      settings={this.props.mergedSettings}
+      savePending={this.savePending}
+      toggleModeration={this.toggleModeration}
+    />;
+  }
+}
+
+SettingsContainer.propTypes = {
+  asset: PropTypes.object.isRequired,
+  pending: PropTypes.object.isRequired,
+  mergedSettings: PropTypes.object.isRequired,
+  updateAssetSettings: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  updatePending: PropTypes.func.isRequired,
+};
+
+const withSettingsFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_Settings_asset on Asset {
+      id
+      settings {
+        moderation
+      }
+    }
+  `,
+});
+
+const mapStateToProps = (state) => ({
+  pending: state.configure.pending,
+  canSave: state.configure.canSave,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify,
+    clearPending,
+    updatePending,
+  }, dispatch);
+
+const enhance = compose(
+  withSettingsFragments,
+  withUpdateAssetSettings,
+  connect(mapStateToProps, mapDispatchToProps),
+  withMergedSettings('asset.settings', 'pending', 'mergedSettings'),
+);
+
+export default enhance(SettingsContainer);
diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js
index 67b47482e..b3c0219e3 100644
--- a/client/coral-framework/hocs/index.js
+++ b/client/coral-framework/hocs/index.js
@@ -5,3 +5,4 @@ export {default as withCopyToClipboard} from './withCopyToClipboard';
 export {default as withEmit} from './withEmit';
 export {default as excludeIf} from './excludeIf';
 export {default as connect} from './connect';
+export {default as withMergedSettings} from './withMergedSettings';
diff --git a/client/coral-framework/hocs/withMergedSettings.js b/client/coral-framework/hocs/withMergedSettings.js
new file mode 100644
index 000000000..8368475e6
--- /dev/null
+++ b/client/coral-framework/hocs/withMergedSettings.js
@@ -0,0 +1,16 @@
+import {mergeExcludingArrays} from 'coral-framework/utils';
+import assignWith from 'lodash/assignWith';
+import get from 'lodash/get';
+import {withPropsOnChange} from 'recompose';
+
+const withMergedSettings = (settings, pending, result) =>
+  withPropsOnChange(
+    (props, nextProps) =>
+      get(props, settings) !== get(nextProps, settings) ||
+      get(props, pending) !== get(nextProps, pending),
+    (props) => ({
+      [result]: assignWith({}, get(props, settings), get(props, pending), mergeExcludingArrays)
+    })
+  );
+
+export default withMergedSettings;
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 037c1b99f..9f71b0913 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -2,6 +2,7 @@ import {gql} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 import union from 'lodash/union';
 import {capitalize} from 'coral-framework/helpers/strings';
+import assignWith from 'lodash/assignWith';
 export * from 'coral-framework/helpers/strings';
 
 export const getTotalActionCount = (type, comment) => {
@@ -197,3 +198,12 @@ export function getTotalReactionsCount(actionSummaries) {
     .filter(({__typename}) => !NOT_REACTION_TYPES.includes(__typename))
     .reduce((total, {count}) => total + count, 0);
 }
+
+// Like lodash merge but does not recurse into arrays.
+export function mergeExcludingArrays(objValue, srcValue) {
+  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
+    return assignWith({}, objValue, srcValue, mergeExcludingArrays);
+  }
+  return srcValue;
+}
+

From 4c7c3c9e425a4bc23637303b0a1fbbb6c35c0ca1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 12:36:49 +0100
Subject: [PATCH 185/344] Add premodLinks configuration

---
 .../src/tabs/configure/components/Settings.js          | 10 +++++++++-
 .../src/tabs/configure/containers/Settings.js          |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 2235369fe..6b6e14656 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -8,7 +8,7 @@ import Configuration from './Configuration';
 
 class Settings extends React.Component {
   render() {
-    const {settings: {moderation}, toggleModeration} = this.props;
+    const {settings: {moderation, premodLinksEnable}, toggleModeration, togglePremodLinks} = this.props;
     const changed = false;
     return (
       <div className={styles.wrapper}>
@@ -32,6 +32,13 @@ class Settings extends React.Component {
           >
             {t('configure.enable_premod_description')}
           </Configuration>
+          <Configuration
+            checked={premodLinksEnable}
+            title={t('configure.enable_premod_links')}
+            onCheckbox={togglePremodLinks}
+          >
+            {t('configure.enable_premod_description')}
+          </Configuration>
         </div>
       </div>
     );
@@ -41,6 +48,7 @@ class Settings extends React.Component {
 Settings.propTypes = {
   settings: PropTypes.object.isRequired,
   toggleModeration: PropTypes.func.isRequired,
+  togglePremodLinks: PropTypes.func.isRequired,
 };
 
 export default Settings;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index 66625715d..8e978e4c8 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -17,6 +17,11 @@ class SettingsContainer extends React.Component {
     this.props.updatePending({updater});
   };
 
+  togglePremodLinks = () => {
+    const updater = {premodLinksEnable: {$set: !this.props.mergedSettings.premodLinksEnable}};
+    this.props.updatePending({updater});
+  };
+
   savePending = async () => {
     try {
       await this.props.updateAssetSettings(this.props.asset.id, this.props.pending);
@@ -32,6 +37,7 @@ class SettingsContainer extends React.Component {
       settings={this.props.mergedSettings}
       savePending={this.savePending}
       toggleModeration={this.toggleModeration}
+      togglePremodLinks={this.togglePremodLinks}
     />;
   }
 }
@@ -52,6 +58,7 @@ const withSettingsFragments = withFragments({
       id
       settings {
         moderation
+        premodLinksEnable
       }
     }
   `,

From 8f0eef7cb5ecedc3eb1c9258adf250f10e96370a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 17:53:26 +0100
Subject: [PATCH 186/344] Reimplement QuestionBoxBuilder

---
 .../src/components/DefaultQuestionBoxIcon.css | 20 ++++
 .../src/components/DefaultQuestionBoxIcon.js  | 13 +++
 .../src/components/QuestionBox.css            | 66 +++++++++++++
 .../src/components/QuestionBox.js             | 28 ++++++
 .../configure/components/Configuration.css    | 10 +-
 .../configure/components/Configuration.js     |  4 +-
 .../components/QuestionBoxBuilder.css         | 60 ++++++++++++
 .../components/QuestionBoxBuilder.js          | 93 +++++++++++++++++++
 .../tabs/configure/components/Settings.css    |  3 +
 .../src/tabs/configure/components/Settings.js | 49 ++++++++--
 .../src/tabs/configure/containers/Settings.js | 26 +++++-
 .../src/tabs/stream/components/Stream.js      |  9 +-
 12 files changed, 366 insertions(+), 15 deletions(-)
 create mode 100644 client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.css
 create mode 100644 client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
 create mode 100644 client/coral-embed-stream/src/components/QuestionBox.css
 create mode 100644 client/coral-embed-stream/src/components/QuestionBox.js
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js

diff --git a/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.css b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.css
new file mode 100644
index 000000000..414a48e7a
--- /dev/null
+++ b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.css
@@ -0,0 +1,20 @@
+.iconBubble{
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  color: #9E9E9E;
+  font-size: 24px;
+  z-index: 0;
+}
+
+.iconPerson{
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.root {
+}
diff --git a/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
new file mode 100644
index 000000000..acb3f2e64
--- /dev/null
+++ b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './DefaultQuestionBoxIcon.css';
+import {Icon} from 'coral-ui';
+
+const DefaultQuestionBoxIcon = ({className}) => (
+  <div className={cn(styles.root, className)}>
+    <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
+    <Icon name="person" className={cn(styles.iconPerson)} />
+  </div>
+);
+
+export default DefaultQuestionBoxIcon;
diff --git a/client/coral-embed-stream/src/components/QuestionBox.css b/client/coral-embed-stream/src/components/QuestionBox.css
new file mode 100644
index 000000000..a0889d775
--- /dev/null
+++ b/client/coral-embed-stream/src/components/QuestionBox.css
@@ -0,0 +1,66 @@
+.qbInfo {
+  top: 0;
+  border: 0;
+  background: #F0F0F0;
+  color: black;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px;
+  margin-bottom: 0px;
+  font-weight: bold;
+  font-size: 14px;
+  overflow: hidden;
+  min-height: 50px;
+  display: flex;
+  border-radius: 3px;
+}
+
+.icon {
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.iconBubble{
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  color: #9E9E9E;
+  font-size: 24px;
+  z-index: 0;
+}
+
+.iconPerson{
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.qbIconContainer {
+  position: relative;
+  border: 0;
+  color: white;
+  padding: 20px;
+  margin-left: 0px !important;
+  margin-right: 10px;
+  display: inline-block;
+  width: 10px;
+  min-height: 100%;
+  padding: 5px 20px;
+  vertical-align: middle;
+}
+
+.qbContent {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+}
+
diff --git a/client/coral-embed-stream/src/components/QuestionBox.js b/client/coral-embed-stream/src/components/QuestionBox.js
new file mode 100644
index 000000000..1f34afcd7
--- /dev/null
+++ b/client/coral-embed-stream/src/components/QuestionBox.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './QuestionBox.css';
+import {Icon} from 'coral-ui';
+import Markdown from 'coral-framework/components/Markdown';
+import DefaultQuestionBoxIcon from './DefaultQuestionBoxIcon';
+
+const QuestionBox = ({content, icon, className, children}) => (
+  <div className={cn(styles.qbInfo, 'questionbox-info', className)}>
+    {
+      icon === 'default' ? (
+        <div className={cn(styles.qbIconContainer)}>
+          <DefaultQuestionBoxIcon />
+        </div>
+      ) : (
+        <div className={cn(styles.qbIconContainer)}>
+          <Icon name={icon} className={cn(styles.icon)} />
+        </div>
+      )
+    }
+    <div className={cn(styles.qbContent, 'questionbox-content')}>
+      <Markdown content={content} />
+    </div>
+    {children}
+  </div>
+);
+
+export default QuestionBox;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.css b/client/coral-embed-stream/src/tabs/configure/components/Configuration.css
index b18328a94..c6863fc6a 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configuration.css
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configuration.css
@@ -1,6 +1,6 @@
 .root {
   position: relative;
-  margin: 12px 12px 12px 0;
+  margin: 12px 12px 24px 0;
 }
 
 .action {
@@ -12,16 +12,22 @@
 }
 
 .title {
+  display: block;
   font-size: 14px;
   margin-bottom: 5px;
   font-weight: bold;
   cursor: pointer;
+  padding-right: 50px;
+}
+
+.description{
+  padding-right: 50px;
 }
 
 .content {
   display: inline-block;
-  padding: 0px 50px;
   box-sizing: border-box;
+  padding-left: 50px;
 }
 
 
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.js b/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
index 025517be6..0e382e886 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
@@ -10,7 +10,7 @@ class Configuration extends React.Component {
   id = uuid();
 
   render() {
-    const {title, children, className, onCheckbox, checked, ...rest} = this.props;
+    const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
     return (
       <div {...rest} className={cn(styles.root, className)}>
         {checked !== undefined &&
@@ -26,6 +26,7 @@ class Configuration extends React.Component {
           [styles.content]: checked !== undefined,
         })}>
           <label htmlFor={this.id} className={styles.title}>{title}</label>
+          <div className={styles.description}>{description}</div>
           <div>
             {children}
           </div>
@@ -37,6 +38,7 @@ class Configuration extends React.Component {
 
 Configuration.propTypes = {
   title: PropTypes.string.isRequired,
+  description: PropTypes.string,
   className: PropTypes.string,
   onCheckbox: PropTypes.func,
   checked: PropTypes.bool,
diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
new file mode 100644
index 000000000..c3e0b896e
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
@@ -0,0 +1,60 @@
+.root {
+}
+
+.iconList {
+  display: flex;
+  padding: 0;
+  margin: 10px 0;
+}
+
+.item {
+  list-style-type: none;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: #F0F0F0;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  text-align: center;
+  line-height: 48px;
+  color: #252525;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-right: 10px;
+  position: relative;
+  border: solid 2px #F0F0F0;
+  transition: border 0.3s cubic-bezier(.4,0,.2,1);
+  outline: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button:focus {
+  border: solid 2px #00c96B;
+}
+
+.buttonActive {
+  border: solid 2px #00796B;
+}
+
+.defaultIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.questionBox {
+  margin: 10px 0;
+}
+
diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
new file mode 100644
index 000000000..0d44b4a3a
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import QuestionBox from '../../../components/QuestionBox';
+import {Icon, Spinner} from 'coral-ui';
+import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+
+const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
+
+const icons = [
+  {'default': DefaultIcon},
+  'forum',
+  'build',
+  'format_quote',
+];
+
+class QuestionBoxBuilder extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentWillMount() {
+    this.loadEditor();
+  }
+
+  async loadEditor() {
+    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
+
+    return this.setState({
+      loading : false,
+      MarkdownEditor
+    });
+  }
+
+  render() {
+    const {questionBoxIcon, questionBoxContent, onContentChange, onIconChange} = this.props;
+    const {loading, MarkdownEditor} = this.state;
+
+    if (loading) {
+      return <Spinner/>;
+    }
+
+    return (
+      <div className={styles.root}>
+        <h4>Include an Icon</h4>
+
+        <ul className={styles.iconList}>
+          {icons.map((item) => {
+            const name = typeof item === 'object' ? Object.keys(item)[0] : item;
+            const icon = typeof item === 'object' ? item[name] : item;
+            return (
+              <li
+                className={styles.item}
+                key={name}
+              >
+                <button
+                  className={cn(
+                    styles.button,
+                    {[styles.buttonActive]: questionBoxIcon === name},
+                  )}
+                  onClick={() => onIconChange(name)}
+                >
+                  {typeof icon === 'string'
+                    ? <Icon name={icon} />
+                    : icon
+                  }
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <QuestionBox
+          className={styles.questionBox}
+          icon={questionBoxIcon}
+          content={questionBoxContent}
+        />
+
+        <MarkdownEditor
+          value={questionBoxContent}
+          onChange={onContentChange}
+        />
+
+      </div>
+    );
+  }
+}
+
+export default QuestionBoxBuilder;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.css b/client/coral-embed-stream/src/tabs/configure/components/Settings.css
index 914b7332b..1a97c3fc1 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.css
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.css
@@ -24,3 +24,6 @@
   margin-bottom: 20px;
 }
 
+.questionBoxContainer {
+  margin-top: 24px;
+}
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 6b6e14656..c029940dc 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -5,10 +5,24 @@ import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 import styles from './Settings.css';
 import Configuration from './Configuration';
+import QuestionBoxBuilder from './QuestionBoxBuilder';
 
 class Settings extends React.Component {
   render() {
-    const {settings: {moderation, premodLinksEnable}, toggleModeration, togglePremodLinks} = this.props;
+    const {
+      settings: {
+        moderation,
+        premodLinksEnable,
+        questionBoxEnable,
+        questionBoxContent,
+        questionBoxIcon,
+      },
+      onToggleModeration,
+      onTogglePremodLinks,
+      onToggleQuestionBox,
+      onQuestionBoxIconChange,
+      onQuestionBoxContentChange,
+    } = this.props;
     const changed = false;
     return (
       <div className={styles.wrapper}>
@@ -28,16 +42,32 @@ class Settings extends React.Component {
           <Configuration
             checked={moderation === 'PRE'}
             title={t('configure.enable_premod')}
-            onCheckbox={toggleModeration}
-          >
-            {t('configure.enable_premod_description')}
-          </Configuration>
+            description={t('configure.enable_premod_description')}
+            onCheckbox={onToggleModeration}
+          />
           <Configuration
             checked={premodLinksEnable}
             title={t('configure.enable_premod_links')}
-            onCheckbox={togglePremodLinks}
+            description={t('configure.enable_premod_description')}
+            onCheckbox={onTogglePremodLinks}
+          />
+          <Configuration
+            checked={questionBoxEnable}
+            title={t('configure.enable_questionbox')}
+            description={t('configure.enable_questionbox_description')}
+            onCheckbox={onToggleQuestionBox}
           >
-            {t('configure.enable_premod_description')}
+            {
+              questionBoxEnable &&
+                <div className={styles.questionBoxContainer}>
+                  <QuestionBoxBuilder
+                    questionBoxIcon={questionBoxIcon}
+                    questionBoxContent={questionBoxContent}
+                    onIconChange={onQuestionBoxIconChange}
+                    onContentChange={onQuestionBoxContentChange}
+                  />
+                </div>
+            }
           </Configuration>
         </div>
       </div>
@@ -47,8 +77,9 @@ class Settings extends React.Component {
 
 Settings.propTypes = {
   settings: PropTypes.object.isRequired,
-  toggleModeration: PropTypes.func.isRequired,
-  togglePremodLinks: PropTypes.func.isRequired,
+  onToggleModeration: PropTypes.func.isRequired,
+  onTogglePremodLinks: PropTypes.func.isRequired,
+  onToggleQuestionBox: PropTypes.func.isRequired,
 };
 
 export default Settings;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index 8e978e4c8..4953ffef1 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -22,6 +22,21 @@ class SettingsContainer extends React.Component {
     this.props.updatePending({updater});
   };
 
+  toggleQuestionBox = () => {
+    const updater = {questionBoxEnable: {$set: !this.props.mergedSettings.questionBoxEnable}};
+    this.props.updatePending({updater});
+  };
+
+  setQuestionBoxIcon = (icon) => {
+    const updater = {questionBoxIcon: {$set: icon}};
+    this.props.updatePending({updater});
+  };
+
+  setQuestionBoxContent = (content) => {
+    const updater = {questionBoxContent: {$set: content}};
+    this.props.updatePending({updater});
+  };
+
   savePending = async () => {
     try {
       await this.props.updateAssetSettings(this.props.asset.id, this.props.pending);
@@ -36,8 +51,12 @@ class SettingsContainer extends React.Component {
     return <Settings
       settings={this.props.mergedSettings}
       savePending={this.savePending}
-      toggleModeration={this.toggleModeration}
-      togglePremodLinks={this.togglePremodLinks}
+      onToggleModeration={this.toggleModeration}
+      onTogglePremodLinks={this.togglePremodLinks}
+      onToggleQuestionBox={this.toggleQuestionBox}
+      onQuestionBoxIconChange={this.setQuestionBoxIcon}
+      onQuestionBoxContentChange={this.setQuestionBoxContent}
+
     />;
   }
 }
@@ -59,6 +78,9 @@ const withSettingsFragments = withFragments({
       settings {
         moderation
         premodLinksEnable
+        questionBoxEnable
+        questionBoxIcon
+        questionBoxContent
       }
     }
   `,
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 99df8c1c9..0b58d250d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -252,7 +252,14 @@ class Stream extends React.Component {
               content={asset.settings.questionBoxContent}
               enable={asset.settings.questionBoxEnable}
               icon={asset.settings.questionBoxIcon}
-            />
+            >
+              <Slot
+                fill="streamQuestionArea"
+                queryData={slotQueryData}
+                {...slotProps}
+              />
+            </QuestionBox>
+
             {!banned &&
                 temporarilySuspended &&
                 <RestrictedMessageBox>

From 67f3f8cdefc21844c190decb78c815c293742f77 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 18:14:17 +0100
Subject: [PATCH 187/344] SimpleMDE don't trap keyboard

---
 .../src/tabs/configure/components/QuestionBoxBuilder.css     | 1 -
 client/coral-framework/components/MarkdownEditor.js          | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
index c3e0b896e..8dc6091fa 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
@@ -30,7 +30,6 @@
   margin-right: 10px;
   position: relative;
   border: solid 2px #F0F0F0;
-  transition: border 0.3s cubic-bezier(.4,0,.2,1);
   outline: 0;
 
   &:hover {
diff --git a/client/coral-framework/components/MarkdownEditor.js b/client/coral-framework/components/MarkdownEditor.js
index 65f603b0c..451a06019 100644
--- a/client/coral-framework/components/MarkdownEditor.js
+++ b/client/coral-framework/components/MarkdownEditor.js
@@ -107,6 +107,11 @@ export default class MarkdownEditor extends Component  {
       ...config,
       element: this.textarea,
     });
+
+    // Don't trap the key, to stay accessible.
+    this.editor.codemirror.options.extraKeys['Tab'] = false;
+    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
     this.editor.codemirror.on('change', this.onChange);
   }
 

From 873d1915c3b6c3e90781208ff164ae9ed3b99407 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 19:20:09 +0100
Subject: [PATCH 188/344] Implement apply

---
 .../src/tabs/configure/components/Settings.js        | 12 +++++++++---
 .../src/tabs/configure/containers/Settings.js        |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index c029940dc..99a29a527 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -22,8 +22,9 @@ class Settings extends React.Component {
       onToggleQuestionBox,
       onQuestionBoxIconChange,
       onQuestionBoxContentChange,
+      canSave,
+      onApply,
     } = this.props;
-    const changed = false;
     return (
       <div className={styles.wrapper}>
         <div className={styles.container}>
@@ -31,8 +32,9 @@ class Settings extends React.Component {
           <Button
             type="submit"
             className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
-            checked={changed}
-            cStyle={changed ? 'green' : 'darkGrey'}
+            checked={canSave}
+            cStyle={canSave ? 'green' : 'darkGrey'}
+            onClick={onApply}
           >
             {t('configure.apply')}
           </Button>
@@ -77,9 +79,13 @@ class Settings extends React.Component {
 
 Settings.propTypes = {
   settings: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
   onToggleModeration: PropTypes.func.isRequired,
   onTogglePremodLinks: PropTypes.func.isRequired,
   onToggleQuestionBox: PropTypes.func.isRequired,
+  onQuestionBoxContentChange: PropTypes.func.isRequired,
+  onQuestionBoxIconChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
 };
 
 export default Settings;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index 4953ffef1..7d2a2a80d 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -56,7 +56,8 @@ class SettingsContainer extends React.Component {
       onToggleQuestionBox={this.toggleQuestionBox}
       onQuestionBoxIconChange={this.setQuestionBoxIcon}
       onQuestionBoxContentChange={this.setQuestionBoxContent}
-
+      onApply={this.savePending}
+      canSave={this.props.canSave}
     />;
   }
 }
@@ -69,6 +70,7 @@ SettingsContainer.propTypes = {
   clearPending: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   updatePending: PropTypes.func.isRequired,
+  canSave: PropTypes.bool.isRequired,
 };
 
 const withSettingsFragments = withFragments({

From 2d6143af625ed4027332287613d83eaccc07c593 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 19:48:12 +0100
Subject: [PATCH 189/344] Fully implement mutation

---
 client/coral-admin/src/graphql/index.js       | 12 +-------
 .../coral-embed-stream/src/graphql/index.js   | 13 ++++++++
 client/coral-framework/graphql/mutations.js   |  6 ++++
 client/coral-framework/utils/index.js         | 12 +++++++-
 services/assets.js                            |  6 ++--
 services/settings.js                          | 27 +----------------
 services/utils.js                             | 30 +++++++++++++++++++
 7 files changed, 65 insertions(+), 41 deletions(-)
 create mode 100644 services/utils.js

diff --git a/client/coral-admin/src/graphql/index.js b/client/coral-admin/src/graphql/index.js
index d7656d9a5..42e96f382 100644
--- a/client/coral-admin/src/graphql/index.js
+++ b/client/coral-admin/src/graphql/index.js
@@ -1,15 +1,5 @@
 import update from 'immutability-helper';
-import mapValues from 'lodash/mapValues';
-
-// Map nested object leaves. Array objects are considered leaves.
-function mapLeaves(o, mapper) {
-  return mapValues(o, (val) => {
-    if (typeof val === 'object' && !Array.isArray(val)) {
-      return mapLeaves(val, mapper);
-    }
-    return mapper(val);
-  });
-}
+import {mapLeaves} from 'coral-framework/utils';
 
 export default {
   mutations: {
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index d18cdc435..d77e6356a 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -2,6 +2,7 @@ import {gql} from 'react-apollo';
 import update from 'immutability-helper';
 import uuid from 'uuid/v4';
 import {insertCommentIntoEmbedQuery, removeCommentFromEmbedQuery} from './utils';
+import {mapLeaves} from 'coral-framework/utils';
 
 export default {
   fragments: {
@@ -218,6 +219,18 @@ export default {
         },
       },
     }),
+    UpdateAssetSettings: ({variables: {input}})  => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (prev) => {
+          const updated = update(prev, {
+            asset: {
+              settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+            },
+          });
+          return updated;
+        }
+      }
+    }),
   },
 };
 
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index ed4a6f782..2aa526a54 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -379,6 +379,12 @@ export const withUpdateAssetSettings = withMutation(
             id,
             input,
           },
+          optimisticResponse: {
+            updateAssetStatus: {
+              __typename: 'UpdateAssetSettingsResponse',
+              errors: null,
+            }
+          },
         });
       }}),
   });
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 9f71b0913..c7225f492 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -3,7 +3,8 @@ import t from 'coral-framework/services/i18n';
 import union from 'lodash/union';
 import {capitalize} from 'coral-framework/helpers/strings';
 import assignWith from 'lodash/assignWith';
-export * from 'coral-framework/helpers/strings';
+import mapValues from 'lodash/mapValues';
+export * from 'coral-framework/helpers/strings'
 
 export const getTotalActionCount = (type, comment) => {
   return comment.action_summaries
@@ -207,3 +208,12 @@ export function mergeExcludingArrays(objValue, srcValue) {
   return srcValue;
 }
 
+// Map nested object leaves. Array objects are considered leaves.
+export function mapLeaves(o, mapper) {
+  return mapValues(o, (val) => {
+    if (typeof val === 'object' && !Array.isArray(val)) {
+      return mapLeaves(val, mapper);
+    }
+    return mapper(val);
+  });
+}
diff --git a/services/assets.js b/services/assets.js
index 4aac2addd..3ab7ec9ff 100644
--- a/services/assets.js
+++ b/services/assets.js
@@ -4,6 +4,7 @@ const SettingsService = require('./settings');
 const domainlist = require('./domainlist');
 const errors = require('../errors');
 const merge = require('lodash/merge');
+const {dotize} = require('./utils');
 
 module.exports = class AssetsService {
 
@@ -99,10 +100,9 @@ module.exports = class AssetsService {
    * @return {[type]}          [description]
    */
   static overrideSettings(id, settings) {
+    console.log(settings, dotize({settings}));
     return AssetModel.findOneAndUpdate({id}, {
-      $set: {
-        settings
-      }
+      $set: dotize({settings})
     }, {
       new: true
     });
diff --git a/services/settings.js b/services/settings.js
index b11b86d91..310884002 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -1,31 +1,6 @@
 const SettingModel = require('../models/setting');
 const errors = require('../errors');
-
-function dotizeRecurse(result, object, path = '') {
-  for (const key in object) {
-    const newPath = path ? `${path}.${key}` : key;
-    if (typeof object[key] === 'object' && !Array.isArray(object[key])) {
-      dotizeRecurse(result, object[key], newPath);
-      continue;
-    }
-    result[newPath] = object[key];
-  }
-}
-
-/**
- * Dotize turns a nested object into flattened object with
- * dotized key notation. Arrays do not become dotized.
- *
- * e.g. {a: {b: 'c'}} becomes {'a.b': 'c}
- *
- * @param {Object} object
- * @return {Object} dotized object
- */
-function dotize(object) {
-  const result = {};
-  dotizeRecurse(result, object);
-  return result;
-}
+const {dotize} = require('./utils');
 
 /**
  * The selector used to uniquely identify the settings document.
diff --git a/services/utils.js b/services/utils.js
new file mode 100644
index 000000000..0247e2889
--- /dev/null
+++ b/services/utils.js
@@ -0,0 +1,30 @@
+
+function dotizeRecurse(result, object, path = '') {
+  for (const key in object) {
+    const newPath = path ? `${path}.${key}` : key;
+    if (typeof object[key] === 'object' && !Array.isArray(object[key])) {
+      dotizeRecurse(result, object[key], newPath);
+      continue;
+    }
+    result[newPath] = object[key];
+  }
+}
+
+/**
+ * Dotize turns a nested object into flattened object with
+ * dotized key notation. Arrays do not become dotized.
+ *
+ * e.g. {a: {b: 'c'}} becomes {'a.b': 'c}
+ *
+ * @param {Object} object
+ * @return {Object} dotized object
+ */
+function dotize(object) {
+  const result = {};
+  dotizeRecurse(result, object);
+  return result;
+}
+
+module.exports = {
+  dotize,
+};

From e675d716cb93991b8d040d28bd68346ec6ef851d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 20:18:14 +0100
Subject: [PATCH 190/344] Remove deprecated code

---
 .../components/CloseCommentsInfo.js           |  29 ----
 .../components/ConfigureCommentStream.css     |  35 -----
 .../components/ConfigureCommentStream.js      |  71 ---------
 .../components/DefaultIcon.css                |  27 ----
 .../coral-configure/components/DefaultIcon.js |  13 --
 client/coral-configure/components/Markdown.js |  24 ---
 .../components/QuestionBoxBuilder.css         |  45 ------
 .../components/QuestionBoxBuilder.js          |  98 ------------
 .../containers/ConfigureStreamContainer.js    | 145 ------------------
 .../src/components/Embed.js                   |  15 +-
 .../src/tabs/stream/components/Stream.js      |   2 +-
 client/coral-framework/graphql/mutations.js   |   2 +-
 client/coral-framework/utils/index.js         |   2 +-
 .../talk-plugin-questionbox/QuestionBox.css   |  70 ---------
 client/talk-plugin-questionbox/QuestionBox.js |  31 ----
 15 files changed, 4 insertions(+), 605 deletions(-)
 delete mode 100644 client/coral-configure/components/CloseCommentsInfo.js
 delete mode 100644 client/coral-configure/components/ConfigureCommentStream.css
 delete mode 100644 client/coral-configure/components/ConfigureCommentStream.js
 delete mode 100644 client/coral-configure/components/DefaultIcon.css
 delete mode 100644 client/coral-configure/components/DefaultIcon.js
 delete mode 100644 client/coral-configure/components/Markdown.js
 delete mode 100644 client/coral-configure/components/QuestionBoxBuilder.css
 delete mode 100644 client/coral-configure/components/QuestionBoxBuilder.js
 delete mode 100644 client/coral-configure/containers/ConfigureStreamContainer.js
 delete mode 100644 client/talk-plugin-questionbox/QuestionBox.css
 delete mode 100644 client/talk-plugin-questionbox/QuestionBox.js

diff --git a/client/coral-configure/components/CloseCommentsInfo.js b/client/coral-configure/components/CloseCommentsInfo.js
deleted file mode 100644
index d10419f3f..000000000
--- a/client/coral-configure/components/CloseCommentsInfo.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import {Button} from 'coral-ui';
-import PropTypes from 'prop-types';
-import t from 'coral-framework/services/i18n';
-
-const CloseCommentsInfo = ({status, onClick}) => (
-  status === 'open' ? (
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {t('configure.open_stream_configuration')}
-      </p>
-      <Button onClick={onClick}>{t('configure.close_stream')}</Button>
-    </div>
-  ) : (
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {t('configure.close_stream_configuration')}
-      </p>
-      <Button onClick={onClick}>{t('configure.open_stream')}</Button>
-    </div>
-  )
-);
-
-CloseCommentsInfo.propTypes = {
-  status: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
-export default CloseCommentsInfo;
\ No newline at end of file
diff --git a/client/coral-configure/components/ConfigureCommentStream.css b/client/coral-configure/components/ConfigureCommentStream.css
deleted file mode 100644
index 5575e073b..000000000
--- a/client/coral-configure/components/ConfigureCommentStream.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.container {
-  position: relative;
-}
-
-.apply {
-  float: right;
-  margin: 0 10px;
-}
-
-.wrapper ul {
-  list-style: none;
-  padding: 0;
-}
-
-.checkbox {
-  vertical-align: top;
-  margin: 12px 12px 12px 0;
-}
-
-.wrapper h4 {
-  font-size: 14px;
-  margin-bottom: 5px;
-}
-
-.wrapper p {
-  max-width: 380px;
-}
-
-.wrapper {
-  margin-bottom: 20px;
-}
-
-.hidden {
-  display: none;
-}
\ No newline at end of file
diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
deleted file mode 100644
index 20250ee86..000000000
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import {Button, Checkbox} from 'coral-ui';
-import QuestionBoxBuilder from './QuestionBoxBuilder';
-import cn from 'classnames';
-
-import styles from './ConfigureCommentStream.css';
-
-import t from 'coral-framework/services/i18n';
-
-export default ({handleChange, handleApply, changed, ...props}) => (
-  <form onSubmit={handleApply}>
-    <div className={styles.wrapper}>
-      <div className={styles.container}>
-        <h3>{t('configure.title')}</h3>
-        <Button
-          type="submit"
-          className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
-          onChange={handleChange}
-          cStyle={changed ? 'green' : 'darkGrey'} >
-          {t('configure.apply')}
-        </Button>
-        <p>{t('configure.description')}</p>
-      </div>
-      <ul>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="premod"
-            onChange={handleChange}
-            defaultChecked={props.premod}
-            info={{
-              title: t('configure.enable_premod'),
-              description: t('configure.enable_premod_description')
-            }} />
-        </li>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="plinksenable"
-            onChange={handleChange}
-            defaultChecked={props.premodLinksEnable}
-            info={{
-              title: t('configure.enable_premod_links'),
-              description: t('configure.enable_premod_links_description')
-            }} />
-        </li>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="qboxenable"
-            onChange={handleChange}
-            defaultChecked={props.questionBoxEnable}
-            info={{
-              title: t('configure.enable_questionbox'),
-              description: t('configure.enable_questionbox_description')
-            }} />
-          {
-            props.questionBoxEnable && <QuestionBoxBuilder
-              questionBoxIcon={props.questionBoxIcon}
-              questionBoxContent={props.questionBoxContent}
-              handleChange={handleChange}
-            />
-          }
-        </li>
-      </ul>
-    </div>
-  </form>
-);
diff --git a/client/coral-configure/components/DefaultIcon.css b/client/coral-configure/components/DefaultIcon.css
deleted file mode 100644
index 6125d2f6a..000000000
--- a/client/coral-configure/components/DefaultIcon.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.iconBubble{
-  position: absolute;
-  top: 8px;
-  left: 10px;
-  color: #9E9E9E;
-  font-size: 24px;
-  z-index: 0;
-}
-
-.iconPerson{
-  z-index: 2;
-  top: 12px;
-  left: 12px;
-  position: absolute;
-  font-size: 33px;
-  color: #262626;
-}
-
-.qbIconContainer {
-  position: relative;
-  border: 0;
-  color: white;
-  display: inline-block;
-  padding: 5px 20px;
-  vertical-align: middle;
-  width: 10px;
-}
\ No newline at end of file
diff --git a/client/coral-configure/components/DefaultIcon.js b/client/coral-configure/components/DefaultIcon.js
deleted file mode 100644
index 5f6f4876c..000000000
--- a/client/coral-configure/components/DefaultIcon.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './DefaultIcon.css';
-import {Icon} from 'coral-ui';
-
-const DefaultIcon = ({className}) => (
-  <div className={cn(styles.qbIconContainer, className)}>
-    <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
-    <Icon name="person" className={cn(styles.iconPerson)} />
-  </div>
-);
-
-export default DefaultIcon;
diff --git a/client/coral-configure/components/Markdown.js b/client/coral-configure/components/Markdown.js
deleted file mode 100644
index d9d1bc4a7..000000000
--- a/client/coral-configure/components/Markdown.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import marked from 'marked';
-
-const renderer = new marked.Renderer();
-
-// Set link target to `_parent` to work properly in an embed.
-renderer.link = (href, title, text) =>
-  `<a target="_parent" href="${href}" ${title ? `title="${title}"` : ''}>${text}</a>`;
-
-marked.setOptions({renderer});
-
-export default class Markdown extends PureComponent {
-  render() {
-    const {content, ...rest} = this.props;
-    const __html = marked(content);
-    return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
-  }
-}
-
-Markdown.propTypes = {
-  content: PropTypes.string,
-};
-
diff --git a/client/coral-configure/components/QuestionBoxBuilder.css b/client/coral-configure/components/QuestionBoxBuilder.css
deleted file mode 100644
index 758f350b9..000000000
--- a/client/coral-configure/components/QuestionBoxBuilder.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.qbBuilder {
-  margin-left: 50px;
-}
-
-.qbItemIconList {
-  padding: 0;
-  margin: 10px 0;
-}
-
-.qbItemIcon {
-  background: #F0F0F0;
-  width: 45px;
-  height: 45px;
-  font-size: 24px;
-  text-align: center;
-  line-height: 45px;
-  color: #252525;
-  border-radius: 3px;
-  display: inline-block;
-  overflow: hidden;
-  margin-right: 10px;
-  position: relative;
-  border: solid 2px #F0F0F0;
-  transition: border 0.3s cubic-bezier(.4,0,.2,1);
-}
-
-.qbItemIcon:hover {
-  cursor: pointer;
-}
-
-.qbItemIconActive {
-  border: solid 2px #00796B;
-}
-
-.defaultIcon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.qb {
-  margin: 10px 0;
-}
\ No newline at end of file
diff --git a/client/coral-configure/components/QuestionBoxBuilder.js b/client/coral-configure/components/QuestionBoxBuilder.js
deleted file mode 100644
index 28dfc30b3..000000000
--- a/client/coral-configure/components/QuestionBoxBuilder.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
-import {Icon, Spinner} from 'coral-ui';
-import DefaultIcon from './DefaultIcon';
-import cn from 'classnames';
-import styles from './QuestionBoxBuilder.css';
-
-class QuestionBoxBuilder extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      loading: true
-    };
-  }
-
-  componentWillMount() {
-    this.loadEditor();
-  }
-
-  async loadEditor() {
-    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
-
-    return this.setState({
-      loading : false,
-      MarkdownEditor
-    });
-  }
-
-  render() {
-    const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
-    const {loading, MarkdownEditor} = this.state;
-
-    if (loading) {
-      return <Spinner/>;
-    }
-
-    return (
-      <div className={styles.qbBuilder}>
-        <h4>Include an Icon</h4>
-
-        <ul className={styles.qbItemIconList}>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'default'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="default" >
-            <DefaultIcon className={styles.defaultIcon} />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'forum'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="forum" >
-            <Icon name="forum" />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'build'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="build" >
-            <Icon name="build" />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'format_quote'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="format_quote" >
-            <Icon name="format_quote" />
-          </li>
-        </ul>
-
-        <QuestionBox
-          className={styles.qb}
-          enable={true}
-          icon={questionBoxIcon}
-          content={questionBoxContent}
-        />
-
-        <MarkdownEditor
-          value={questionBoxContent}
-          onChange={(value) => handleChange({}, {questionBoxContent: value})}
-        />
-
-      </div>
-    );
-  }
-}
-
-export default QuestionBoxBuilder;
diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
deleted file mode 100644
index 0ab71c1d7..000000000
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {compose} from 'react-apollo';
-import PropTypes from 'prop-types';
-import {updateOpenStatus, updateConfiguration} from 'coral-embed-stream/src/actions/asset';
-import CloseCommentsInfo from '../components/CloseCommentsInfo';
-import ConfigureCommentStream from '../components/ConfigureCommentStream';
-import t, {timeago} from 'coral-framework/services/i18n';
-
-class ConfigureStreamContainer extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      changed: false,
-      dirtySettings: {...props.asset.settings},
-      closedAt: !props.asset.isClosed ? 'open' : 'closed'
-    };
-
-    this.toggleStatus = this.toggleStatus.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleApply = this.handleApply.bind(this);
-  }
-
-  handleApply (e) {
-    e.preventDefault();
-    const {elements} = e.target;
-    const {questionBoxIcon, questionBoxContent} = this.state.dirtySettings;
-    const premod = elements.premod.checked;
-    const questionBoxEnable = elements.qboxenable.checked;
-    const premodLinksEnable = elements.plinksenable.checked;
-    const {changed} = this.state;
-
-    const newConfig = {
-      moderation: premod ? 'PRE' : 'POST',
-      questionBoxEnable,
-      questionBoxContent,
-      questionBoxIcon,
-      premodLinksEnable
-    };
-
-    if (changed) {
-      this.props.updateConfiguration(newConfig);
-      setTimeout(() => {
-        this.setState({
-          changed: false
-        });
-      }, 300);
-    }
-  }
-
-  handleChange (e, newChanges) {
-    let changes = {};
-
-    if (changes) {
-      changes = {...newChanges};
-    }
-
-    if (e.target && e.target.id === 'qboxenable') {
-      changes.questionBoxEnable = e.target.checked;
-    }
-    if (e.currentTarget && e.currentTarget.id === 'qboxicon') {
-      changes.questionBoxIcon = e.currentTarget.dataset.icon;
-    }
-    if (e.target && e.target.id === 'plinksenable') {
-      changes.premodLinksEnable = e.target.value;
-    }
-
-    this.setState({
-      changed: true,
-      dirtySettings: {
-        ...this.state.dirtySettings,
-        ...changes,
-      },
-    });
-  }
-
-  toggleStatus () {
-
-    // update the closedAt status for the asset
-    this.props.updateStatus(
-      this.state.closedAt === 'open' ? 'closed' : 'open'
-    );
-    this.setState({
-      closedAt: (this.state.closedAt === 'open' ? 'closed' : 'open')
-    });
-  }
-
-  getClosedIn () {
-    const {closedTimeout} = this.props.asset.settings;
-    const {created_at} = this.props.asset;
-
-    return timeago(new Date(created_at).getTime() + (1000 * closedTimeout));
-  }
-
-  render () {
-    const {dirtySettings} = this.state;
-    const premod = dirtySettings.moderation === 'PRE';
-    const {closedAt} = this.state;
-    const closedTimeout = dirtySettings.closedTimeout;
-
-    return (
-      <div className='talk-embed-stream-configuration-container'>
-        <ConfigureCommentStream
-          handleChange={this.handleChange}
-          handleApply={this.handleApply}
-          changed={this.state.changed}
-          premodLinksEnable={dirtySettings.premodLinksEnable}
-          premod={premod}
-          questionBoxIcon={dirtySettings.questionBoxIcon}
-          questionBoxEnable={dirtySettings.questionBoxEnable}
-          questionBoxContent={dirtySettings.questionBoxContent}
-        />
-        <hr />
-        <h3>{closedAt === 'open' ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-        {(closedAt === 'open' && closedTimeout) ? <p>{t('configure.comment_stream_will_close')} {this.getClosedIn()}.</p> : ''}
-        <CloseCommentsInfo
-          onClick={this.toggleStatus}
-          status={closedAt}
-        />
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  asset: state.asset
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  updateStatus: (status) => dispatch(updateOpenStatus(status)),
-  updateConfiguration: (newConfig) => dispatch(updateConfiguration(newConfig)),
-});
-
-ConfigureStreamContainer.propTypes = {
-  updateStatus: PropTypes.func,
-  closedTimeout: PropTypes.string,
-  created_at: PropTypes.string,
-  updateConfiguration: PropTypes.func,
-  asset: PropTypes.object,
-};
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfigureStreamContainer);
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index bbdaa2f19..7445bf300 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -12,8 +12,6 @@ import {Tab, TabPane} from 'coral-ui';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
-import ConfigureStreamContainer
-  from 'coral-configure/containers/ConfigureStreamContainer';
 import cn from 'classnames';
 
 export default class Embed extends React.Component {
@@ -24,9 +22,6 @@ export default class Embed extends React.Component {
     case 'profile':
       this.props.data.refetch();
       break;
-    case 'config':
-      this.props.data.refetch();
-      break;
     }
     this.props.setActiveTab(tab);
   };
@@ -43,12 +38,7 @@ export default class Embed extends React.Component {
     ];
     if (can(user, 'UPDATE_CONFIG')) {
       tabs.push(
-        <Tab key='config' tabId='config' className='talk-embed-stream-configuration-tab'>
-          {t('framework.configure_stream')}
-        </Tab>
-      );
-      tabs.push(
-        <Tab key='config2' tabId='config2'>
+        <Tab key='config' tabId='config'>
           {t('framework.configure_stream')}
         </Tab>
       );
@@ -101,9 +91,6 @@ export default class Embed extends React.Component {
               <ProfileContainer />
             </TabPane>,
             <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
-              <ConfigureStreamContainer />
-            </TabPane>,
-            <TabPane key='config2' tabId='config2' className='talk-embed-stream-configuration2-tab-pane'>
               <Configure data={data} root={root} asset={root.asset} />
             </TabPane>,
           ]}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 0b58d250d..07774f348 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -11,7 +11,7 @@ import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
-import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
+import QuestionBox from '../../../components/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
 import {Button, Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 2aa526a54..15d24a9ce 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -380,7 +380,7 @@ export const withUpdateAssetSettings = withMutation(
             input,
           },
           optimisticResponse: {
-            updateAssetStatus: {
+            updateAssetSettings: {
               __typename: 'UpdateAssetSettingsResponse',
               errors: null,
             }
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index c7225f492..86e9e1915 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -4,7 +4,7 @@ import union from 'lodash/union';
 import {capitalize} from 'coral-framework/helpers/strings';
 import assignWith from 'lodash/assignWith';
 import mapValues from 'lodash/mapValues';
-export * from 'coral-framework/helpers/strings'
+export * from 'coral-framework/helpers/strings';
 
 export const getTotalActionCount = (type, comment) => {
   return comment.action_summaries
diff --git a/client/talk-plugin-questionbox/QuestionBox.css b/client/talk-plugin-questionbox/QuestionBox.css
deleted file mode 100644
index cb9902ade..000000000
--- a/client/talk-plugin-questionbox/QuestionBox.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.qbInfo {
-  top: 0;
-  border: 0;
-  background: #F0F0F0;
-  color: black;
-  width: 100%;
-  text-align: left;
-  padding-left: 0px;
-  margin-bottom: 0px;
-  font-weight: bold;
-  font-size: 14px;
-  overflow: hidden;
-  min-height: 50px;
-  display: flex;
-  border-radius: 3px;
-}
-
-.icon {
-  z-index: 2;
-  top: 12px;
-  left: 12px;
-  position: absolute;
-  font-size: 33px;
-  color: #262626;
-}
-
-.iconBubble{
-  position: absolute;
-  top: 8px;
-  left: 10px;
-  color: #9E9E9E;
-  font-size: 24px;
-  z-index: 0;
-}
-
-.iconPerson{
-  z-index: 2;
-  top: 12px;
-  left: 12px;
-  position: absolute;
-  font-size: 33px;
-  color: #262626;
-}
-
-.qbIconContainer {
-  position: relative;
-  border: 0;
-  color: white;
-  padding: 20px;
-  margin-left: 0px !important;
-  margin-right: 10px;
-  display: inline-block;
-  width: 10px;
-  min-height: 100%;
-  padding: 5px 20px;
-  vertical-align: middle;
-}
-
-.qbContent {
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-}
-
-.hidden  {
-  visibility: hidden;
-  display: none;
-}
\ No newline at end of file
diff --git a/client/talk-plugin-questionbox/QuestionBox.js b/client/talk-plugin-questionbox/QuestionBox.js
deleted file mode 100644
index f15549b7c..000000000
--- a/client/talk-plugin-questionbox/QuestionBox.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './QuestionBox.css';
-import {Icon} from 'coral-ui';
-import Markdown from 'coral-framework/components/Markdown';
-
-import Slot from 'coral-framework/components/Slot';
-
-const QuestionBox = ({content, enable, icon = '', className = ''}) => (
-  <div className={cn(styles.qbInfo, {[styles.hidden]: !enable}, 'questionbox-info', className)}>
-    {
-      icon === 'default' ? (
-        <div className={cn(styles.qbIconContainer)}>
-          <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
-          <Icon name="person" className={cn(styles.iconPerson)} />
-        </div>
-      ) : (
-        <div className={cn(styles.qbIconContainer)}>
-          <Icon name={icon} className={cn(styles.icon)} />
-        </div>
-      )
-    }
-    <div className={cn(styles.qbContent, 'questionbox-content')}>
-      <Markdown content={content} />
-    </div>
-
-    <Slot fill="streamQuestionArea" />
-  </div>
-);
-
-export default QuestionBox;

From 511e71f63a2a7c3c5f67f8d95ee1de5fe0edc715 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 20:19:58 +0100
Subject: [PATCH 191/344] Change default settings=null to settings={}

---
 models/asset.js                |  2 +-
 services/assets.js             | 44 +++++++++++++++++++++++++---------
 test/server/services/assets.js |  2 +-
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/models/asset.js b/models/asset.js
index b2e49dcc0..4a6aea7e0 100644
--- a/models/asset.js
+++ b/models/asset.js
@@ -45,7 +45,7 @@ const AssetSchema = new Schema({
   // always after running `rectifySettings` against it.
   settings: {
     type: Schema.Types.Mixed,
-    default: null
+    default: {},
   },
 
   // Tags are added by the self or by administrators.
diff --git a/services/assets.js b/services/assets.js
index 3ab7ec9ff..e2ba0fe04 100644
--- a/services/assets.js
+++ b/services/assets.js
@@ -4,6 +4,7 @@ const SettingsService = require('./settings');
 const domainlist = require('./domainlist');
 const errors = require('../errors');
 const merge = require('lodash/merge');
+const isEmpty = require('lodash/isEmpty');
 const {dotize} = require('./utils');
 
 module.exports = class AssetsService {
@@ -40,7 +41,7 @@ module.exports = class AssetsService {
     ]);
 
     // If the asset exists and has settings then return the merged object.
-    if (asset && asset.settings) {
+    if (asset && asset.settings && !isEmpty(asset.settings)) {
       settings = merge({}, globalSettings, asset.settings);
     } else {
       settings = globalSettings;
@@ -95,17 +96,38 @@ module.exports = class AssetsService {
 
   /**
    * Updates the settings for the asset.
-   * @param  {[type]} id       [description]
-   * @param  {[type]} settings [description]
-   * @return {[type]}          [description]
+   * @param  {String} id        id of asset
+   * @param  {Object} settings  new settings values
+   * @return {Promise}
    */
-  static overrideSettings(id, settings) {
-    console.log(settings, dotize({settings}));
-    return AssetModel.findOneAndUpdate({id}, {
-      $set: dotize({settings})
-    }, {
-      new: true
-    });
+  static async overrideSettings(id, settings) {
+    try {
+      const result =  await AssetModel.findOneAndUpdate({id}, {
+
+        // The effect of dotize is that only the provided setting values are overwritten
+        // and does not replace the whole object.
+        $set: dotize({settings})
+      }, {
+        new: true
+      });
+      return result;
+    } catch (e) {
+
+      // Legacy data models contains `settings=null` as a default which cannot be traversed.
+      // New data models uses `settings={}`.
+      if (e.code === 16837) {
+
+        // Overwrite it fully in this case.
+        const result =  await AssetModel.findOneAndUpdate({id}, {
+          $set: {settings}
+        }, {
+          new: true
+        });
+        return result;
+      } else {
+        throw e;
+      }
+    }
   }
 
   /**
diff --git a/test/server/services/assets.js b/test/server/services/assets.js
index 6ab33321b..163210b65 100644
--- a/test/server/services/assets.js
+++ b/test/server/services/assets.js
@@ -91,7 +91,7 @@ describe('services.AssetsService', () => {
         .findOrCreateByUrl('https://override.test.com/asset')
         .then((asset) => {
           expect(asset).to.have.property('settings');
-          expect(asset.settings).to.be.null;
+          expect(asset.settings).to.be.empty;
 
           return AssetsService.overrideSettings(asset.id, {moderation: 'PRE'});
         })

From 12e61bbc6615e7a4380a61b775a688b2a157a335 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 20 Nov 2017 19:41:14 +0000
Subject: [PATCH 192/344] Update suspend copy

---
 locales/da.yml    | 6 +++---
 locales/en.yml    | 6 +++---
 locales/es.yml    | 6 +++---
 locales/fr.yml    | 8 ++++----
 locales/pt_BR.yml | 6 +++---
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/locales/da.yml b/locales/da.yml
index 37c1cc188..48b5ab362 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -347,15 +347,15 @@ da:
     email_message_suspend: "Kære {0},\n\nI overensstemmelse med {1}'s retningslinjer for fællesskabet er din konto midlertidigt suspenderet. Under suspensionen vil du ikke kunne kommentere, flagge eller engagere dig med andre kommentarer. Venligst tilslut dig til samtalen{2}.'"
     title_notify: "Underret bruygeren om deres midlertidige suspension"
     notify_suspend_until: "Bruger {0} er midlertidigt suspenderet. Denne suspension ophører automatisk om {1}."
-    description_notify: "Suspendering af denne bruger vil midlertidigt deaktivere deres konto og skjule alle deres kommentarer på webstedet."
+    description_notify: "Suspendering af denne bruger vil midlertidigt deaktivere deres konto."
     write_message: "Skriv en besked"
     send: "Send"
   reject_username:
     username: "brugernavn"
     no_cancel: "Nej Afbryd"
-    description_reject: "Vil du midlertidigt forbyde denne bruger på grund af deres {0}? Hvis du gør det, vil det midlertidigt skjule deres kommentarer, indtil de omskriver deres {0}."
+    description_reject: "Vil du midlertidigt forbyde denne bruger på grund af deres {0}? Hvis du gør det vil blive suspenderet indtil de omskriver deres {0}."
     title_notify: "Underret brugeren om deres midlertidige suspension"
-    description_notify: "Suspendering af denne bruger vil midlertidigt deaktivere deres konto, og skjule alle deres kommentarer på webstedet."
+    description_notify: "Suspendering af denne bruger vil midlertidigt deaktivere deres konto."
     title_reject: "Vi har bemærket at du afviste et brugernavn."
     suspend_user: "Suspender bruger"
     yes_suspend: "Ja suspender"
diff --git a/locales/en.yml b/locales/en.yml
index 8c3f60a2d..02bdea30b 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -361,15 +361,15 @@ en:
     email_message_suspend: "Dear {0},\n\nIn accordance with {1}’s community guidelines, your account has been temporarily suspended. During the suspension, you will be unable to comment, flag or engage with fellow commenters. Please rejoin the conversation {2}."
     title_notify: "Notify the user of their temporary suspension"
     notify_suspend_until: "User {0} has been temporarily suspended. This suspension will automatically end {1}."
-    description_notify: "Suspending this user will temporarily disable their account and hide all of their comments on the site."
+    description_notify: "Suspending this user will temporarily disable their account."
     write_message: "Write a message"
     send: Send
   reject_username:
     username: username
     no_cancel: "No cancel"
-    description_reject: "Would you like to temporarily ban this user because of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}."
+    description_reject: "Would you like to temporarily ban this user because of their {0}? Doing so will temporarily suspend this user until they rewrite their {0}."
     title_notify: "Notify the user of their temporary suspension"
-    description_notify: "Suspending this user will temporarily disable their account and hide all of their comments on the site."
+    description_notify: "Suspending this user will temporarily disable their account."
     title_reject: "We noticed you rejected a username"
     suspend_user: "Suspend User"
     yes_suspend: "Yes suspend"
diff --git a/locales/es.yml b/locales/es.yml
index 3f01b8457..0282b6431 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -378,15 +378,15 @@ es:
     email_message_suspend: "Querido/a {0}, De acuerdo a la guía comunitaria de {1}, su cuenta ha sido temporalmente suspendida. Durante este tiempo, no podrá comentar, marcar o involucrarse con otros comentaristas. Por favor unirse a la conversación {2}."
     title_notify: "Notificar al usuario de su suspensión temporal"
     notify_suspend_until: "Usuario {0} ha sido temporalmente suspendido. Esta suspension va a terminar automáticamente en {1}."
-    description_notify: "Suspender a este usuario va a deshabilitar temporalmente su cuenta y ocultar todos sus comentarios en el sitio."
+    description_notify: "Suspender a este usuario va a deshabilitar temporalmente su cuenta."
     write_message: "Escribir un mensaje"
     send: "Enviar"
   reject_username:
     username: nombre de usuario
     no_cancel: "No cancelar"
-    description_reject: "¿Quiere suspender temporalmente a este usuario por su {0}? Hacerlo va a ocultar temporalmente sus comentarios hasta que edite su {0}."
+    description_reject: "¿Quiere suspender temporalmente a este usuario por su {0}? El usuario estará temporalmente suspendido hasta que edite su {0}."
     title_notify: "Notificar al usuario de su suspensión temporal"
-    description_notify: "Suspender a este usuario va a deshabilitar temporalmente su cuenta y ocultar todos sus comentarios en el sitio."
+    description_notify: "Suspender a este usuario va a deshabilitar temporalmente su cuenta."
     title_reject: "Vimos que ha rechazado un nombre de usuario"
     suspend_user: "Suspender Usuario"
     yes_suspend: "Si, suspender"
diff --git a/locales/fr.yml b/locales/fr.yml
index f703c87f1..5c5a45aab 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -291,10 +291,10 @@ fr:
     bio: Bio
     cancel: "Annuler"
     days: "{0} jours"
-    description_0: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0} ? Cela dissimulera temporairement leurs commentaires jusqu'à ce qu'ils réécrivent leurs {0}."
-    description_1: "Suspendre cet utilisateur désactivera temporairement son compte et cachera tous ses commentaires sur le site."
-    description_notify: "Suspendre cet utilisateur désactivera temporairement son compte et cachera tous ses commentaires sur le site."
-    description_reject: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0}? Cela dissimulera temporairement leurs commentaires jusqu'à ce qu'ils réécrivent leurs {0}."
+    description_0: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0} ? Cela va temporairement suspendre l'utilisateur jusqu'à ce qu'ils réécrivent leurs {0}."
+    description_1: "Suspendre cet utilisateur désactivera temporairement son compte."
+    description_notify: "Suspendre cet utilisateur désactivera temporairement son compte."
+    description_reject: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0}? Cela va temporairement suspendre l'utilisateur jusqu'à ce qu'ils réécrivent leurs {0}."
     description_suspend: "Vous suspendez {0}. Ce commentaire sera rejeté, et {0} ne sera pas autorisé à aimer, à signaler, à répondre ou à publier jusqu'à ce que la suspension soit levée."
     email: "Un autre membre de la communauté a récemment signalé votre nom d'utilisateur pour examen. En raison de son contenu, votre utilisateur a été rejeté. Cela signifie que vous ne pouvez plus commenter ou signaler du contenu jusqu'à ce que vous changiez votre nom d'utilisateur. Veuillez nous envoyer un e-mail si vous avez des questions ou des préoccupations."
     email_subject: "Votre compte a été suspendu"
diff --git a/locales/pt_BR.yml b/locales/pt_BR.yml
index a23c1ad8c..ae8e1310c 100644
--- a/locales/pt_BR.yml
+++ b/locales/pt_BR.yml
@@ -349,15 +349,15 @@ pt_BR:
     email_message_suspend: "Querido/a {0},\n\nDe acordo com as diretrizes da comunidade de {1}, sua conta foi temporariamente suspensa. Durante a suspensão, você não poderá comentar, denunciar ou se responder outros usuários(as). Por favor, volte para a conversa {2}."
     title_notify: "Notificar o usuário da suspensão temporária"
     notify_suspend_until: "O usuário {0} foi temporariamente suspenso. Esta suspensão terminará automaticamente {1}."
-    description_notify: "Suspender este usuário temporariamente desativará sua conta e esconderá todos os seus comentários no site"
+    description_notify: "Suspender este usuário temporariamente desativará sua conta."
     write_message: "Escrever uma mensagem"
     send: Enviar
   reject_username:
     username: nome de usuário
     no_cancel: "Não cancelar"
-    description_reject: "Gostaria de proibir temporariamente este usuário por causa de seu {0}? Isso ocultará temporariamente seus comentários até que eles reescrevam seu {0}."
+    description_reject: "Gostaria de proibir temporariamente este usuário por causa de seu {0}? O usuário será suspenso temporariamente até que eles reescrevam seu {0}."
     title_notify: "Notificar o usuário da suspensão temporária"
-    description_notify: "Suspender este usuário temporariamente desativará sua conta e esconderá todos os seus comentários no site."
+    description_notify: "Suspender este usuário temporariamente desativará sua conta."
     title_reject: "Percebemos que você rejeitou um nome de usuário"
     suspend_user: "Suspender usuário"
     yes_suspend: "Sim suspender"

From 4830aec138fd9323c023e7a2b5f8643cd550150f Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 20 Nov 2017 19:59:57 +0000
Subject: [PATCH 193/344] Update Report Bug link in Admin Settings

---
 client/coral-admin/src/components/ui/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index bd7fbcf0c..e199d5ded 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -87,7 +87,7 @@ const CoralHeader = ({
                       </a>
                     </MenuItem>
                     <MenuItem>
-                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                      <a href="https://support.coralproject.net" target="_blank" rel="noopener noreferrer">
                           Report a bug or give feedback
                       </a>
                     </MenuItem>

From 0de5a328ab0909406e444f38cb43df787557d62e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 20 Nov 2017 21:11:59 +0100
Subject: [PATCH 194/344] Slot streamSettings

---
 .../tabs/configure/components/Configure.js    |  2 ++
 .../src/tabs/configure/components/Settings.js | 11 +++++++++
 .../tabs/configure/containers/Configure.js    |  2 ++
 .../src/tabs/configure/containers/Settings.js | 23 ++++++++++++++++---
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index 074fe0616..a7000864e 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -8,6 +8,8 @@ class Configure extends React.Component {
     return (
       <div className='talk-embed-stream-configuration-container'>
         <Settings
+          data={this.props.data}
+          root={this.props.root}
           asset={this.props.asset}
         />
         <hr />
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 99a29a527..6c9a3498e 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -6,6 +6,7 @@ import cn from 'classnames';
 import styles from './Settings.css';
 import Configuration from './Configuration';
 import QuestionBoxBuilder from './QuestionBoxBuilder';
+import Slot from 'coral-framework/components/Slot';
 
 class Settings extends React.Component {
   render() {
@@ -24,6 +25,8 @@ class Settings extends React.Component {
       onQuestionBoxContentChange,
       canSave,
       onApply,
+      slotProps,
+      queryData,
     } = this.props;
     return (
       <div className={styles.wrapper}>
@@ -35,6 +38,7 @@ class Settings extends React.Component {
             checked={canSave}
             cStyle={canSave ? 'green' : 'darkGrey'}
             onClick={onApply}
+            disabled={!canSave}
           >
             {t('configure.apply')}
           </Button>
@@ -71,6 +75,11 @@ class Settings extends React.Component {
                 </div>
             }
           </Configuration>
+          <Slot
+            fill="streamSettings"
+            queryData={queryData}
+            {...slotProps}
+          />
         </div>
       </div>
     );
@@ -78,6 +87,8 @@ class Settings extends React.Component {
 }
 
 Settings.propTypes = {
+  queryData: PropTypes.object.isRequired,
+  slotProps: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   onToggleModeration: PropTypes.func.isRequired,
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index 3e93e6f64..e9da3fc79 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -28,6 +28,7 @@ const withConfigureFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Configure_root on RootQuery {
       __typename
+      ...${getDefinitionName(Settings.fragments.root)}
     }
   `,
   asset: gql`
@@ -38,6 +39,7 @@ const withConfigureFragments = withFragments({
     }
     ${AssetStatusInfo.fragments.asset}
     ${Settings.fragments.asset}
+    ${Settings.fragments.root}
   `,
 });
 
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index 7d2a2a80d..41d9c21b2 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments, withMergedSettings} from 'coral-framework/hocs';
-import {getErrorMessages} from 'coral-framework/utils';
+import {getErrorMessages, getSlotFragmentSpreads} from 'coral-framework/utils';
 import Settings from '../components/Settings.js';
 import PropTypes from 'prop-types';
 import {withUpdateAssetSettings} from 'coral-framework/graphql/mutations';
@@ -10,6 +10,10 @@ import {bindActionCreators} from 'redux';
 import {notify} from 'coral-framework/actions/notification';
 import {clearPending, updatePending} from '../../../actions/configure';
 
+const slots = [
+  'streamSettings',
+];
+
 class SettingsContainer extends React.Component {
 
   toggleModeration = () => {
@@ -48,8 +52,11 @@ class SettingsContainer extends React.Component {
   };
 
   render() {
+    const {mergedSettings, canSave, data, root, asset} = this.props;
     return <Settings
-      settings={this.props.mergedSettings}
+      settings={mergedSettings}
+      queryData={{root, asset, settings: mergedSettings}}
+      slotProps={{data}}
       savePending={this.savePending}
       onToggleModeration={this.toggleModeration}
       onTogglePremodLinks={this.togglePremodLinks}
@@ -57,12 +64,14 @@ class SettingsContainer extends React.Component {
       onQuestionBoxIconChange={this.setQuestionBoxIcon}
       onQuestionBoxContentChange={this.setQuestionBoxContent}
       onApply={this.savePending}
-      canSave={this.props.canSave}
+      canSave={canSave}
     />;
   }
 }
 
 SettingsContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
   pending: PropTypes.object.isRequired,
   mergedSettings: PropTypes.object.isRequired,
@@ -74,6 +83,12 @@ SettingsContainer.propTypes = {
 };
 
 const withSettingsFragments = withFragments({
+  root: gql`
+    fragment CoralEmbedStream_Settings_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
   asset: gql`
     fragment CoralEmbedStream_Settings_asset on Asset {
       id
@@ -83,7 +98,9 @@ const withSettingsFragments = withFragments({
         questionBoxEnable
         questionBoxIcon
         questionBoxContent
+        ${getSlotFragmentSpreads(slots, 'settings')}
       }
+      ${getSlotFragmentSpreads(slots, 'asset')}
     }
   `,
 });

From 8cc3d198197361be97fd9b497ddc6ce46e990e20 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 10:35:38 +0100
Subject: [PATCH 195/344] Fix query

---
 .../src/tabs/configure/containers/Configure.js                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index e9da3fc79..b88306262 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -30,6 +30,7 @@ const withConfigureFragments = withFragments({
       __typename
       ...${getDefinitionName(Settings.fragments.root)}
     }
+    ${Settings.fragments.root}
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
@@ -39,7 +40,6 @@ const withConfigureFragments = withFragments({
     }
     ${AssetStatusInfo.fragments.asset}
     ${Settings.fragments.asset}
-    ${Settings.fragments.root}
   `,
 });
 

From 258788fd88937bc4320b85ece4365166b50f42f0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 11:05:53 +0100
Subject: [PATCH 196/344] Add updatePending and errors to admin settings slots

---
 .../src/routes/Configure/components/ModerationSettings.js   | 5 ++++-
 .../src/routes/Configure/components/StreamSettings.js       | 4 +++-
 .../src/routes/Configure/components/TechSettings.js         | 5 ++++-
 .../src/routes/Configure/containers/ModerationSettings.js   | 6 +++++-
 .../src/routes/Configure/containers/TechSettings.js         | 6 +++++-
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
index f5db719bb..94aa7d923 100644
--- a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
@@ -39,7 +39,7 @@ class ModerationSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root} = this.props;
+    const {settings, data, root, updatePending, errors} = this.props;
 
     return (
       <ConfigurePage
@@ -74,6 +74,8 @@ class ModerationSettings extends React.Component {
           fill="adminModerationSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );
@@ -82,6 +84,7 @@ class ModerationSettings extends React.Component {
 
 ModerationSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.js b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
index 9c05711cb..ea2c570bb 100644
--- a/client/coral-admin/src/routes/Configure/components/StreamSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
@@ -100,7 +100,7 @@ class StreamSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root, errors} = this.props;
+    const {settings, data, root, errors, updatePending} = this.props;
 
     return (
       <ConfigurePage
@@ -203,6 +203,8 @@ class StreamSettings extends React.Component {
           fill="adminStreamSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );
diff --git a/client/coral-admin/src/routes/Configure/components/TechSettings.js b/client/coral-admin/src/routes/Configure/components/TechSettings.js
index 7f16b6064..1b783c9ec 100644
--- a/client/coral-admin/src/routes/Configure/components/TechSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/TechSettings.js
@@ -31,7 +31,7 @@ class TechSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root} = this.props;
+    const {settings, data, root, errors, updatePending} = this.props;
     return (
       <ConfigurePage
         title={t('configure.tech_settings')}
@@ -51,6 +51,8 @@ class TechSettings extends React.Component {
           fill="adminTechSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );
@@ -59,6 +61,7 @@ class TechSettings extends React.Component {
 
 TechSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
diff --git a/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
index 0583378a9..61538f4c0 100644
--- a/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
+++ b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
@@ -10,6 +10,10 @@ const slots = [
   'adminModerationSettings',
 ];
 
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     updatePending,
@@ -36,5 +40,5 @@ export default compose(
       }
     `
   }),
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ModerationSettings);
diff --git a/client/coral-admin/src/routes/Configure/containers/TechSettings.js b/client/coral-admin/src/routes/Configure/containers/TechSettings.js
index df33a3f9a..1f5ac20b8 100644
--- a/client/coral-admin/src/routes/Configure/containers/TechSettings.js
+++ b/client/coral-admin/src/routes/Configure/containers/TechSettings.js
@@ -10,6 +10,10 @@ const slots = [
   'adminTechSettings',
 ];
 
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     updatePending,
@@ -33,5 +37,5 @@ export default compose(
       }
     `
   }),
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(TechSettings);

From a8e8b7844196a046ce7f2ded11b46ae8bebbb173 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 11:08:18 +0100
Subject: [PATCH 197/344] Pass updatePending and errors through slots

---
 .../src/tabs/configure/containers/Settings.js               | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index 41d9c21b2..afad3482d 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -52,11 +52,11 @@ class SettingsContainer extends React.Component {
   };
 
   render() {
-    const {mergedSettings, canSave, data, root, asset} = this.props;
+    const {mergedSettings, canSave, data, root, asset, errors, updatePending} = this.props;
     return <Settings
       settings={mergedSettings}
       queryData={{root, asset, settings: mergedSettings}}
-      slotProps={{data}}
+      slotProps={{data, updatePending, errors}}
       savePending={this.savePending}
       onToggleModeration={this.toggleModeration}
       onTogglePremodLinks={this.togglePremodLinks}
@@ -74,6 +74,7 @@ SettingsContainer.propTypes = {
   root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
   pending: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
   mergedSettings: PropTypes.object.isRequired,
   updateAssetSettings: PropTypes.func.isRequired,
   clearPending: PropTypes.func.isRequired,
@@ -108,6 +109,7 @@ const withSettingsFragments = withFragments({
 const mapStateToProps = (state) => ({
   pending: state.configure.pending,
   canSave: state.configure.canSave,
+  errors: state.configure.errors,
 });
 
 const mapDispatchToProps = (dispatch) =>

From 548a204665ae90a2615f5623e31f145c4990c4a1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 11:13:05 +0100
Subject: [PATCH 198/344] Expose StreamConfiguration

---
 .../tabs/configure/components/Checkbox.css    | 59 -------------------
 .../src/tabs/configure/components/Checkbox.js | 28 ---------
 .../src/tabs/configure/components/Settings.js |  2 +-
 .../components/StreamConfiguration.css}       |  0
 .../components/StreamConfiguration.js}        |  4 +-
 client/coral-ui/components/Checkbox.css       | 41 +++++--------
 client/coral-ui/components/Checkbox.js        | 34 +++++++----
 plugin-api/beta/client/components/index.js    |  1 +
 8 files changed, 42 insertions(+), 127 deletions(-)
 delete mode 100644 client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
 delete mode 100644 client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
 rename client/{coral-embed-stream/src/tabs/configure/components/Configuration.css => coral-framework/components/StreamConfiguration.css} (100%)
 rename client/{coral-embed-stream/src/tabs/configure/components/Configuration.js => coral-framework/components/StreamConfiguration.js} (92%)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
deleted file mode 100644
index a25ea150f..000000000
--- a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.root {
-  position: relative;
-  display: inline-block;
-}
-
-.input {
-  position: absolute;
-  left: 7px;
-  bottom: 7px;
-  margin: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.checkbox {
-  cursor: pointer;
-}
-
-.checkbox:before {
-  content: "\e835";
-  color: #717171;
-  left: 4px;
-  top: 0px;
-  width: 18px;
-  height: 18px;
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  vertical-align: -6px;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: 'liga';
-  transition: all .2s ease;
-  z-index: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.checkboxChecked:before {
-  content: "\e834";
-  color: #00a291;
-}
-
-.input:focus + .checkbox:before {
-  color: #00a291;
-}
-
-.input:focus + .checkboxChecked:before {
-  color: #00e291;
-}
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js b/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
deleted file mode 100644
index 98804fe60..000000000
--- a/client/coral-embed-stream/src/tabs/configure/components/Checkbox.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import styles from './Checkbox.css';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-
-const Checkbox = ({onChange, checked, className, ...rest}) => (
-  <label className={cn(styles.root, className)}>
-    <input
-      type="checkbox"
-      className={cn(styles.input, {[styles.inputChecked]: checked})}
-      onChange={onChange}
-      checked={checked}
-      {...rest}
-    />
-    <span
-      className={cn(styles.checkbox, {[styles.checkboxChecked]: checked})}
-      aria-hidden='true'
-    ></span>
-  </label>
-);
-
-Checkbox.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  checked: PropTypes.bool,
-};
-
-export default Checkbox;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 6c9a3498e..4e89172d2 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 import styles from './Settings.css';
-import Configuration from './Configuration';
+import Configuration from 'coral-framework/components/StreamConfiguration';
 import QuestionBoxBuilder from './QuestionBoxBuilder';
 import Slot from 'coral-framework/components/Slot';
 
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.css b/client/coral-framework/components/StreamConfiguration.css
similarity index 100%
rename from client/coral-embed-stream/src/tabs/configure/components/Configuration.css
rename to client/coral-framework/components/StreamConfiguration.css
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configuration.js b/client/coral-framework/components/StreamConfiguration.js
similarity index 92%
rename from client/coral-embed-stream/src/tabs/configure/components/Configuration.js
rename to client/coral-framework/components/StreamConfiguration.js
index 0e382e886..6331e8230 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configuration.js
+++ b/client/coral-framework/components/StreamConfiguration.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import Checkbox from './Checkbox';
+import Checkbox from 'coral-ui/components/Checkbox';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import styles from './Configuration.css';
+import styles from './StreamConfiguration.css';
 import uuid from 'uuid/v4';
 
 class Configuration extends React.Component {
diff --git a/client/coral-ui/components/Checkbox.css b/client/coral-ui/components/Checkbox.css
index d20886689..a25ea150f 100644
--- a/client/coral-ui/components/Checkbox.css
+++ b/client/coral-ui/components/Checkbox.css
@@ -1,10 +1,9 @@
-.label {
+.root {
   position: relative;
   display: inline-block;
 }
 
-.label input {
-  visibility: hidden;
+.input {
   position: absolute;
   left: 7px;
   bottom: 7px;
@@ -12,6 +11,7 @@
   padding: 0;
   outline: none;
   cursor: pointer;
+  pointer-events: none;
   opacity: 0;
 }
 
@@ -19,21 +19,9 @@
   cursor: pointer;
 }
 
-.label input[type="checkbox"]:checked + .checkbox:before {
-  content: "\e834";
-}
-
-.label input[type="checkbox"] + .checkbox:before {
+.checkbox:before {
   content: "\e835";
   color: #717171;
-}
-
-.label.type--green input[type="checkbox"] + .checkbox:before {
-  color: #00a291;
-}
-
-.label input[type="checkbox"] + .checkbox:before {
-  position: absolute;
   left: 4px;
   top: 0px;
   width: 18px;
@@ -49,22 +37,23 @@
   white-space: nowrap;
   direction: ltr;
   vertical-align: -6px;
-  -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-feature-settings: 'liga';
   font-feature-settings: 'liga';
-  -webkit-transition: all .2s ease;
   transition: all .2s ease;
   z-index: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.checkboxInfo {
-  display: inline-block;
-  max-width: 360px;
-  margin-left: 50px;
+.checkboxChecked:before {
+  content: "\e834";
+  color: #00a291;
 }
 
-.checkboxInfo h4 {
-  margin: 0 0 5px;
+.input:focus + .checkbox:before {
+  color: #00a291;
+}
+
+.input:focus + .checkboxChecked:before {
+  color: #00e291;
 }
diff --git a/client/coral-ui/components/Checkbox.js b/client/coral-ui/components/Checkbox.js
index f80666c65..98804fe60 100644
--- a/client/coral-ui/components/Checkbox.js
+++ b/client/coral-ui/components/Checkbox.js
@@ -1,16 +1,28 @@
 import React from 'react';
 import styles from './Checkbox.css';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
 
-export default ({name, cStyle = 'base', onChange, label, className, info, ...attrs}) => (
-  <label className={`${styles.label} ${styles[`type--${cStyle}`]} ${className}`} htmlFor={name}>
-    <input type="checkbox" id={name} name={name} onChange={onChange} {...attrs} />
-    <span className={styles.checkbox}></span>
-    {label && <span>{label}</span>}
-    {info && (
-      <div className={styles.checkboxInfo}>
-        <h4>{info.title}</h4>
-        <span>{info.description}</span>
-      </div>
-    )}
+const Checkbox = ({onChange, checked, className, ...rest}) => (
+  <label className={cn(styles.root, className)}>
+    <input
+      type="checkbox"
+      className={cn(styles.input, {[styles.inputChecked]: checked})}
+      onChange={onChange}
+      checked={checked}
+      {...rest}
+    />
+    <span
+      className={cn(styles.checkbox, {[styles.checkboxChecked]: checked})}
+      aria-hidden='true'
+    ></span>
   </label>
 );
+
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
+};
+
+export default Checkbox;
diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js
index 21ae60a0d..28a7f4bbb 100644
--- a/plugin-api/beta/client/components/index.js
+++ b/plugin-api/beta/client/components/index.js
@@ -7,3 +7,4 @@ export {default as CommentTimestamp} from 'coral-framework/components/CommentTim
 export {default as CommentDetail} from 'coral-framework/components/CommentDetail';
 export {default as CommentContent} from 'coral-framework/components/CommentContent';
 export {default as ConfigureCard} from 'coral-framework/components/ConfigureCard';
+export {default as StreamConfiguration} from 'coral-framework/components/StreamConfiguration';

From 5360bdc8ece5c973815d8c42a4bcb6f3620bccc9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 12:42:17 +0100
Subject: [PATCH 199/344] Add some docs

---
 .../src/tabs/configure/components/AssetStatusInfo.js     | 2 ++
 client/coral-framework/hocs/withMergedSettings.js        | 9 +++++++++
 2 files changed, 11 insertions(+)

diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
index 2a1900533..d3c2f14d7 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -18,11 +18,13 @@ class AssetStatusInfo extends React.Component {
     this.setupTimer(nextProps);
   }
 
+  // Rerendering interval. If remaining time > 1min, rerender every minute, otherwise evey second.
   interval(closedAt) {
     const diff = new Date(closedAt).getTime() - new Date().getTime();
     return diff > 60000 ? 60000 : 1000;
   }
 
+  // Timer that counts down the remaining time.
   setupTimer({closedAt, isClosed} = this.props) {
     if (this.timer && (isClosed || !closedAt)) {
       clearTimeout(this.timer);
diff --git a/client/coral-framework/hocs/withMergedSettings.js b/client/coral-framework/hocs/withMergedSettings.js
index 8368475e6..c90e360bc 100644
--- a/client/coral-framework/hocs/withMergedSettings.js
+++ b/client/coral-framework/hocs/withMergedSettings.js
@@ -3,6 +3,15 @@ import assignWith from 'lodash/assignWith';
 import get from 'lodash/get';
 import {withPropsOnChange} from 'recompose';
 
+/**
+ * Exports a HOC that applies props at `pending` to
+ * props at `settings` and writes into `result` prop name.
+ * `Settings`, and `pending` can have a dotnotation like
+ * "asset.settings".
+ *
+ * Example:
+ * withMergedSettings('asset.settings', 'pending', 'mergedSettings')
+ */
 const withMergedSettings = (settings, pending, result) =>
   withPropsOnChange(
     (props, nextProps) =>

From c990a812a4cfcb94f1738120f21d4f3355eece81 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 15:59:20 +0100
Subject: [PATCH 200/344] new design for show all comments button

---
 .../src/components/Stream.css                 | 19 ++++++++++++---
 .../src/components/Stream.js                  | 23 +++++++++----------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css
index 23f620157..ac014e75d 100644
--- a/client/coral-embed-stream/src/components/Stream.css
+++ b/client/coral-embed-stream/src/components/Stream.css
@@ -2,9 +2,22 @@
   margin-top: 6px;
 }
 
-.viewAllButton {
+.viewAllButtonContainer {
   position: absolute;
-  right: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -11px;
+  z-index: 10;
+}
+
+.viewAllButton {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  background-color: #4D8FCC;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 2px;
 }
 
 .tabPanel {
@@ -26,4 +39,4 @@
   margin-top: 28px;
   padding-bottom: 50px;
   min-height: 600px;
-}
\ No newline at end of file
+}
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 7ff48106b..67d27f903 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -13,7 +13,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Button, Tab, TabCount, TabPane} from 'coral-ui';
+import {Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
@@ -58,6 +58,7 @@ class Stream extends React.Component {
       loadNewReplies,
       auth: {user},
       emit,
+      viewAllComments,
     } = this.props;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
@@ -76,6 +77,14 @@ class Stream extends React.Component {
 
     return (
       <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+        <div className={cn('talk-stream-show-all-comments-button-container', styles.viewAllButtonContainer)}>
+          <button
+            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
+            onClick={viewAllComments}
+          >
+            {t('framework.show_all_comments')}
+          </button>
+        </div>
         <Comment
           data={data}
           root={root}
@@ -205,7 +214,6 @@ class Stream extends React.Component {
       postComment,
       notify,
       updateItem,
-      viewAllComments,
       auth: {loggedIn, user},
       editName,
     } = this.props;
@@ -231,15 +239,6 @@ class Stream extends React.Component {
     return (
       <div id="stream" className={styles.root}>
         <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
-        {highlightedComment &&
-          <Button
-            cStyle="darkGrey"
-            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
-            onClick={viewAllComments}
-          >
-            {t('framework.show_all_comments')}
-          </Button>}
-
         {open
           ? <div id="commentBox">
             <InfoBox
@@ -325,7 +324,7 @@ Stream.propTypes = {
   loading: PropTypes.bool,
   editName: PropTypes.func,
   appendItemArray: PropTypes.func,
-  updateItem: PropTypes.func, 
+  updateItem: PropTypes.func,
   viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,

From a665dbd88e8980085a5645962cd7583a47e26e1e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 18:07:00 +0100
Subject: [PATCH 201/344] Reproduce modqueue freeze issue

---
 .../coral-embed-stream/src/components/Stream.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 7ff48106b..69879d467 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -196,6 +196,15 @@ class Stream extends React.Component {
     );
   }
 
+  launchDeathStar = () => {
+    for (let i = 0; i < 20; i++) {
+      this.props.postComment({
+        asset_id: this.props.root.asset.id,
+        body: 'death is certain',
+      });
+    }
+  }
+
   render() {
     const {
       data,
@@ -231,6 +240,12 @@ class Stream extends React.Component {
     return (
       <div id="stream" className={styles.root}>
         <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
+        <Button
+          cStyle="darkGrey"
+          onClick={this.launchDeathStar}
+        >
+          Launch Death Star
+        </Button>
         {highlightedComment &&
           <Button
             cStyle="darkGrey"
@@ -325,7 +340,7 @@ Stream.propTypes = {
   loading: PropTypes.bool,
   editName: PropTypes.func,
   appendItemArray: PropTypes.func,
-  updateItem: PropTypes.func, 
+  updateItem: PropTypes.func,
   viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,

From c7d433deb54bee21c70e60b847e56f704a09e99f Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 21 Nov 2017 12:13:28 -0700
Subject: [PATCH 202/344] added better logic around removing users for
 clearning out their stale data.

---
 bin/cli-users | 53 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/bin/cli-users b/bin/cli-users
index 89f53a67d..89bf667a7 100755
--- a/bin/cli-users
+++ b/bin/cli-users
@@ -8,10 +8,13 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
+const CommentModel = require('../models/comment');
+const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
 const Table = require('cli-table');
+const databaseVerifications = require('./verifications/database');
 
 const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
   if (input && input.length >= len) {
@@ -122,26 +125,48 @@ async function createUser(options) {
 
   } catch (err) {
     console.error(err);
-    util.shutdown();
+    util.shutdown(1);
   }
 }
 
 /**
  * Deletes a user.
  */
-function deleteUser(userID) {
-  UserModel
-    .findOneAndRemove({
-      id: userID
-    })
-    .then(() => {
-      console.log('Deleted user');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown();
-    });
+async function deleteUser(userID) {
+
+  try {
+
+    // Find the user we're removing.
+    const user = await UserModel.findOne({id: userID});
+    if (!user) {
+      throw new Error(`user with id ${userID} not found`);
+    }
+
+    // Remove all the user's actions.
+    await ActionModel
+      .where({user_id: user.id})
+      .setOptions({multi: true})
+      .remove();
+
+    // Remove all the user's comments.
+    await CommentModel
+      .where({author_id: user.id})
+      .setOptions({multi: true})
+      .remove();
+
+    // Update the counts that might have changed.
+    for (const verification of databaseVerifications) {
+      await verification({fix: true, limit: Infinity, batch: 1000});
+    }
+
+    // Remove the user.
+    await user.remove();
+
+    util.shutdown();
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
 }
 
 /**

From 9629ba2f8399ffd779be80f683ca8548fc0ce235 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 22 Nov 2017 14:48:34 -0700
Subject: [PATCH 203/344] added connector support

---
 graph/connectors.js | 83 +++++++++++++++++++++++++++++++++++++++++++++
 graph/context.js    |  4 +++
 2 files changed, 87 insertions(+)
 create mode 100644 graph/connectors.js

diff --git a/graph/connectors.js b/graph/connectors.js
new file mode 100644
index 000000000..ecaa79550
--- /dev/null
+++ b/graph/connectors.js
@@ -0,0 +1,83 @@
+// Errors.
+const errors = require('../errors');
+
+// Models.
+const Action = require('../models/action');
+const Asset = require('../models/asset');
+const Comment = require('../models/comment');
+const Setting = require('../models/setting');
+const User = require('../models/user');
+
+// Services.
+const Actions = require('../services/actions');
+const Assets = require('../services/assets');
+const Cache = require('../services/cache');
+const Comments = require('../services/comments');
+const DomainList = require('../services/domainlist');
+const I18n = require('../services/i18n');
+const Jwt = require('../services/jwt');
+const Karma = require('../services/karma');
+const Kue = require('../services/kue');
+const Limit = require('../services/limit');
+const Locals = require('../services/locals');
+const Mailer = require('../services/mailer');
+const Metadata = require('../services/metadata');
+const Migration = require('../services/migration');
+const Mongoose = require('../services/mongoose');
+const Passport = require('../services/passport');
+const Plugins = require('../services/plugins');
+const Pubsub = require('../services/pubsub');
+const Redis = require('../services/redis');
+const Regex = require('../services/regex');
+const Scraper = require('../services/scraper');
+const Settings = require('../services/settings');
+const Setup = require('../services/setup');
+const Subscriptions = require('../services/subscriptions');
+const Tags = require('../services/tags');
+const Tokens = require('../services/tokens');
+const Users = require('../services/users');
+const Wordlist = require('../services/wordlist');
+
+// Connector.
+const connectors = {
+  errors,
+  models: {
+    Action,
+    Asset,
+    Comment,
+    Setting,
+    User,
+  },
+  services: {
+    Actions,
+    Assets,
+    Cache,
+    Comments,
+    DomainList,
+    I18n,
+    Jwt,
+    Karma,
+    Kue,
+    Limit,
+    Locals,
+    Mailer,
+    Metadata,
+    Migration,
+    Mongoose,
+    Passport,
+    Plugins,
+    Pubsub,
+    Redis,
+    Regex,
+    Scraper,
+    Settings,
+    Setup,
+    Subscriptions,
+    Tags,
+    Tokens,
+    Users,
+    Wordlist,
+  },
+};
+
+module.exports = connectors;
diff --git a/graph/context.js b/graph/context.js
index cd3f5ddbe..d6d85a651 100644
--- a/graph/context.js
+++ b/graph/context.js
@@ -2,6 +2,7 @@ const loaders = require('./loaders');
 const mutators = require('./mutators');
 const uuid = require('uuid');
 const merge = require('lodash/merge');
+const connectors = require('./connectors');
 
 const plugins = require('../services/plugins');
 const pubsub = require('../services/pubsub');
@@ -51,6 +52,9 @@ class Context {
       this.user = user;
     }
 
+    // Attach the connectors.
+    this.connectors = connectors;
+
     // Create the loaders.
     this.loaders = loaders(this);
 

From 7f53375c67e0e99d24b8876d184f265a120a2ce7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 23 Nov 2017 13:40:19 +0100
Subject: [PATCH 204/344] More padding for question box

---
 client/talk-plugin-questionbox/QuestionBox.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/talk-plugin-questionbox/QuestionBox.css b/client/talk-plugin-questionbox/QuestionBox.css
index cb9902ade..b8df1f228 100644
--- a/client/talk-plugin-questionbox/QuestionBox.css
+++ b/client/talk-plugin-questionbox/QuestionBox.css
@@ -13,6 +13,8 @@
   min-height: 50px;
   display: flex;
   border-radius: 3px;
+  padding-right: 40px;
+  box-sizing: border-box;
 }
 
 .icon {
@@ -67,4 +69,4 @@
 .hidden  {
   visibility: hidden;
   display: none;
-}
\ No newline at end of file
+}

From 31f87dc192d8e3b1f429ec964e920c895481a8ad Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 23 Nov 2017 14:42:46 +0100
Subject: [PATCH 205/344] Pass hover props to extendable tabs in order to
 support firefox

---
 .../src/components/ExtendableTab.js           | 35 +++++++++++++++++++
 .../src/containers/ExtendableTabPanel.js      |  7 ++--
 .../client/actions.js                         |  9 -----
 .../client/components/InfoIcon.js             |  6 ++--
 .../client/components/Tab.js                  | 19 ++++++----
 .../client/constants.js                       |  4 ---
 .../client/containers/Tab.js                  | 15 ++------
 .../client/index.js                           |  2 --
 .../client/reducer.js                         | 22 ------------
 9 files changed, 58 insertions(+), 61 deletions(-)
 create mode 100644 client/coral-embed-stream/src/components/ExtendableTab.js
 delete mode 100644 plugins/talk-plugin-featured-comments/client/actions.js
 delete mode 100644 plugins/talk-plugin-featured-comments/client/constants.js
 delete mode 100644 plugins/talk-plugin-featured-comments/client/reducer.js

diff --git a/client/coral-embed-stream/src/components/ExtendableTab.js b/client/coral-embed-stream/src/components/ExtendableTab.js
new file mode 100644
index 000000000..75c6739a4
--- /dev/null
+++ b/client/coral-embed-stream/src/components/ExtendableTab.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Tab} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+/**
+ *  ExtendableTab adds a hover property to its children, because
+ *  Tab is rendered as a button and under Firefox its children do
+ *  not support mouse events.
+ */
+class ExtendableTab extends React.Component {
+  state = {
+    hover: false,
+  }
+
+  handleMouseEnter = () => this.setState({hover: true});
+  handleMouseLeave = () => this.setState({hover: false});
+
+  render() {
+    return (
+      <Tab
+        {...this.props}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {React.cloneElement(this.props.children, {hover: this.state.hover})}
+      </Tab>
+    );
+  }
+}
+
+ExtendableTab.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ExtendableTab;
diff --git a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
index b582f7b66..362f6bf89 100644
--- a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
+++ b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
@@ -2,7 +2,8 @@ import React from 'react';
 import ExtendableTabPanel from '../components/ExtendableTabPanel';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
-import {Tab, TabPane} from 'coral-ui';
+import {TabPane} from 'coral-ui';
+import ExtendableTab from '../components/ExtendableTab';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
@@ -61,9 +62,9 @@ class ExtendableTabPanelContainer extends React.Component {
   getSlotTabElements(slot) {
     return this.getSlotElements(slot).map((el) => {
       return (
-        <Tab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
+        <ExtendableTab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
           {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
-        </Tab>
+        </ExtendableTab>
       );
     });
   }
diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
deleted file mode 100644
index 653b8f565..000000000
--- a/plugins/talk-plugin-featured-comments/client/actions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-export const showTooltip = () => ({
-  type: SHOW_TOOLTIP
-});
-
-export const hideTooltip = () => ({
-  type: HIDE_TOOLTIP
-});
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
index 47560fd74..18db9a6c5 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -3,9 +3,9 @@ import styles from './InfoIcon.css';
 import cn from 'classnames';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default ({tooltip}) => (
-  <Icon 
+export default ({hover}) => (
+  <Icon
     name="info_outline"
-    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
+    className={cn(styles.infoIcon, {[styles.on]: hover})}
   />
 );
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 6ac5682d0..804e7e99a 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -3,16 +3,23 @@ import {TabCount} from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
 import Tooltip from './Tooltip';
+import PropTypes from 'prop-types';
 
-export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+const Tab = ({active, hover, featuredCommentsCount}) => {
   return (
-    <span 
-      onMouseEnter={props.showTooltip}
-      onMouseLeave={props.hideTooltip} >
+    <span>
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon tooltip={tooltip} /> 
-      {tooltip && <Tooltip />} 
+      <InfoIcon hover={hover} />
+      {hover && <Tooltip />}
     </span>
   );
 };
+
+Tab.propTypes = {
+  active: PropTypes.bool,
+  hover: PropTypes.bool,
+  featuredCommentsCount: PropTypes.number.isRequired,
+};
+
+export default Tab;
diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js
deleted file mode 100644
index c03bf4839..000000000
--- a/plugins/talk-plugin-featured-comments/client/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const prefix = 'TALK_FEATURED_COMMENTS';
-
-export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`;
-export const HIDE_TOOLTIP = `${prefix}_HIDE_TOOLTIP`;
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
index cbe430be2..f3443a122 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
@@ -1,19 +1,9 @@
 import Tab from '../components/Tab';
-import {bindActionCreators} from 'redux';
-import {showTooltip, hideTooltip} from '../actions';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
-
-const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showTooltip,
-    hideTooltip,
-  }, dispatch);
+import {withProps} from 'recompose';
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
@@ -21,6 +11,7 @@ const enhance = compose(
       }`,
   }),
   excludeIf((props) => props.asset.featuredCommentsCount === 0),
+  withProps((props) => ({featuredCommentsCount: props.asset.featuredCommentsCount})),
 );
 
 export default enhance(Tab);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index bdcb2f470..7a0b9827d 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -3,7 +3,6 @@ import Tag from './containers/Tag';
 import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
-import reducer from './reducer';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
@@ -13,7 +12,6 @@ import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
-  reducer,
   translations,
   slots: {
     streamTabsPrepend: [Tab],
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
deleted file mode 100644
index 2fd9b82e0..000000000
--- a/plugins/talk-plugin-featured-comments/client/reducer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-const initialState = {
-  tooltip: false
-};
-
-export default function featured (state = initialState, action) {
-  switch (action.type) {
-  case SHOW_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: true
-    };
-  case HIDE_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: false
-    };
-  default :
-    return state;
-  }
-}

From 9359bfc322a986f24b4cc7502bb5999246f0b765 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 23 Nov 2017 20:09:16 +0100
Subject: [PATCH 206/344] Fix styling bug in firefox

---
 .../Configure/components/StreamSettings.css   |  3 ++
 .../Configure/components/StreamSettings.js    | 34 ++++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.css b/client/coral-admin/src/routes/Configure/components/StreamSettings.css
index 5ddd46bd2..628192de6 100644
--- a/client/coral-admin/src/routes/Configure/components/StreamSettings.css
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.css
@@ -53,3 +53,6 @@
 
 
 
+.autoCloseWrapper {
+  display: flex;
+}
diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.js b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
index 9c05711cb..ffaeed63b 100644
--- a/client/coral-admin/src/routes/Configure/components/StreamSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
@@ -180,22 +180,24 @@ class StreamSettings extends React.Component {
           onCheckbox={this.updateAutoClose}
           title={t('configure.close_after')}
         >
-          <Textfield
-            type='number'
-            pattern='[0-9]+'
-            style={{width: 50}}
-            onChange={this.updateClosedTimeout}
-            value={getTimeoutAmount(settings.closedTimeout)}
-            label={t('configure.closed_comments_label')} />
-          <div className={styles.configTimeoutSelect}>
-            <SelectField
-              label="comments closed time window"
-              value={getTimeoutMeasure(settings.closedTimeout)}
-              onChange={this.updateClosedTimeoutMeasure}>
-              <Option value={'hours'}>{t('configure.hours')}</Option>
-              <Option value={'days'}>{t('configure.days')}</Option>
-              <Option value={'weeks'}>{t('configure.weeks')}</Option>
-            </SelectField>
+          <div className={styles.autoCloseWrapper}>
+            <Textfield
+              type='number'
+              pattern='[0-9]+'
+              style={{width: 50}}
+              onChange={this.updateClosedTimeout}
+              value={getTimeoutAmount(settings.closedTimeout)}
+              label={t('configure.closed_comments_label')} />
+            <div className={styles.configTimeoutSelect}>
+              <SelectField
+                label="comments closed time window"
+                value={getTimeoutMeasure(settings.closedTimeout)}
+                onChange={this.updateClosedTimeoutMeasure}>
+                <Option value={'hours'}>{t('configure.hours')}</Option>
+                <Option value={'days'}>{t('configure.days')}</Option>
+                <Option value={'weeks'}>{t('configure.weeks')}</Option>
+              </SelectField>
+            </div>
           </div>
         </ConfigureCard>
         {/* the above card should be the last one if at all possible because of z-index issues with the selects */}

From 37f3c1110420ebfa7685c4a2bd2c7ba7d12e1282 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Nov 2017 12:29:29 +0100
Subject: [PATCH 207/344] Fix radiogroup not working properly in ff

---
 .../src/routes/Stories/components/Stories.js          |  4 ++--
 yarn.lock                                             | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 866defde4..933237ab9 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -48,7 +48,7 @@ class Stories extends Component {
           <div className={styles.optionHeader}>{t('streams.filter_streams')}</div>
           <div className={styles.optionDetail}>{t('streams.stream_status')}</div>
           <RadioGroup
-            name='status filter'
+            name='statusFilter'
             value={filter}
             childContainer='div'
             onChange={onSettingChange('filter')}
@@ -60,7 +60,7 @@ class Stories extends Component {
           </RadioGroup>
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
           <RadioGroup
-            name='sort by'
+            name='sortBy'
             value={asc}
             childContainer='div'
             onChange={onSettingChange('asc')}
diff --git a/yarn.lock b/yarn.lock
index 7996e549f..882cf3e29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7360,7 +7360,7 @@ react-mdl-selectfield@^0.2.0:
     react-dom "^15.3.1"
     react-mdl "^1.7.1"
 
-react-mdl@^1.7.1, react-mdl@^1.7.2:
+react-mdl@^1.7.1:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
   dependencies:
@@ -7369,6 +7369,15 @@ react-mdl@^1.7.1, react-mdl@^1.7.2:
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
+react-mdl@^1.7.2:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
+  dependencies:
+    clamp "^1.0.1"
+    classnames "^2.2.3"
+    lodash.isequal "^4.4.0"
+    prop-types "^15.5.0"
+
 react-paginate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-5.0.0.tgz#b5c12191ea81adc6d4d1b339b805e81841eaa8ea"

From ec2bf3cb7f38c244e788927463d668eb7c2ee7e5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Nov 2017 12:41:18 +0100
Subject: [PATCH 208/344] Sort by publication_date

---
 routes/api/assets/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/routes/api/assets/index.js b/routes/api/assets/index.js
index 165b2cd99..d7cc86438 100644
--- a/routes/api/assets/index.js
+++ b/routes/api/assets/index.js
@@ -38,7 +38,7 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
 
   const {
     value = '',
-    field = 'created_at',
+    field = 'publication_date',
     page = 1,
     asc = 'false',
     filter = 'all',
@@ -46,9 +46,10 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
   } = req.query;
 
   try {
+    const order = (asc === 'true') ? 1 : -1;
 
     const queryOpts = {
-      sort: {[field]: (asc === 'true') ? 1 : -1},
+      sort: {[field]: order, 'created_at': order},
       skip: (page - 1) * limit,
       limit
     };

From fb1dc23fa97bd863c1c4da31f110363080f7d05c Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 27 Nov 2017 16:28:46 +0000
Subject: [PATCH 209/344] Version 3.8.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 196effd71..63a1b7119 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 417a7a3c369e76683781b43f304352307a07b49f Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 28 Nov 2017 09:16:33 -0700
Subject: [PATCH 210/344] added excemption as no fix available as of yet

---
 .nsprc | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.nsprc b/.nsprc
index 071431eff..583560bdd 100644
--- a/.nsprc
+++ b/.nsprc
@@ -1,5 +1,6 @@
 {
   "exceptions": [
-    "https://nodesecurity.io/advisories/531"
+    "https://nodesecurity.io/advisories/531",
+    "https://nodesecurity.io/advisories/532"
   ]
-}
\ No newline at end of file
+}

From cf96d07a7adb7a5130f4f6713a30d3355b6c25d5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 29 Nov 2017 11:54:51 +0100
Subject: [PATCH 211/344] Better death star

---
 .../src/components/Stream.js                  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 69879d467..ed970d500 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -197,12 +197,20 @@ class Stream extends React.Component {
   }
 
   launchDeathStar = () => {
-    for (let i = 0; i < 20; i++) {
-      this.props.postComment({
-        asset_id: this.props.root.asset.id,
-        body: 'death is certain',
-      });
-    }
+    let i = 100;
+    const launch = () => {
+      setTimeout(() => {
+        this.props.postComment({
+          asset_id: this.props.root.asset.id,
+          body: 'death is certain',
+        });
+        i--;
+        if (i > 0) {
+          launch();
+        }
+      }, 500);
+    };
+    launch();
   }
 
   render() {

From 1b9c2404db489a1512c0fc2c6582649abb6cbbdf Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 29 Nov 2017 15:57:28 -0700
Subject: [PATCH 212/344] fixed job cli, reverted comment box pending beheviour

---
 bin/cli-jobs                                  | 67 ++++++++++++-------
 .../src/tabs/stream/components/Stream.js      |  3 +-
 services/kue.js                               | 15 +++++
 3 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/bin/cli-jobs b/bin/cli-jobs
index c5aefc518..6048a69db 100755
--- a/bin/cli-jobs
+++ b/bin/cli-jobs
@@ -12,7 +12,7 @@ const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
 util.onshutdown([
-  () => mongoose.disconnect()
+  () => mongoose.disconnect(),
 ]);
 
 /**
@@ -20,17 +20,17 @@ util.onshutdown([
  */
 function processJobs() {
 
-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
-
   // The scraper only needs to shutdown when the scraper has actually been
   // started.
   util.onshutdown([
     () => kue.Task.shutdown()
   ]);
+
+  // Start the scraper processor.
+  scraper.process();
+
+  // Start the mail processor.
+  mailer.process();
 }
 
 /**
@@ -48,22 +48,13 @@ function removeJob(job) {
   }));
 }
 
-/**
- * Removes the jobs passed in and returns a promise.
- * @param  {Array} jobs array of jobs
- * @return {Promise}
- */
-function removeJobs(jobs) {
-  return Promise.all(jobs.map(removeJob));
-}
-
 /**
  * Get the top n jobs with a specific state.
  * @param  {String} [state='complete'] state to list jobs by
  * @param  {Number} limit              limit of jobs to load
  * @return {Promise}
  */
-function rangeJobsByState(state = 'complete', limit) {
+function rangeJobsByState(state, limit) {
   return new Promise((resolve, reject) => {
     kue.Job.rangeByState(state, 0, limit, 'asc', (err, jobs) => {
       if (err) {
@@ -75,22 +66,52 @@ function rangeJobsByState(state = 'complete', limit) {
   });
 }
 
+async function getJobBatch(n, includeStuck) {
+  let jobs = [];
+
+  jobs = await rangeJobsByState('complete', n);
+
+  if (includeStuck) {
+    jobs = jobs.concat(await rangeJobsByState('failed', n));
+  }
+
+  return jobs;
+}
+
 /**
  * Cleans up the jobs that are in the queue.
  */
 async function cleanupJobs(options) {
+
+  // The scraper only needs to shutdown when the scraper has actually been
+  // started.
+  util.onshutdown([
+    () => kue.Task.shutdown()
+  ]);
+
   const n = 100;
 
   try {
-    const joblists = await Promise.all([
-      rangeJobsByState('complete', n),
-      options.stuck ? rangeJobsByState('failed', n) : false
-    ]);
 
-    await joblists.filter((jobs) => jobs).map(removeJobs);
+    // Connect to redis by establishing a queue.
+    kue.Task.connect();
+
+    let jobCount = 0;
+    let jobs = await getJobBatch(n, options.stuck);
+
+    while (jobs.length > 0) {
+
+      // Remove all the jobs.
+      await Promise.all(jobs.map((job) => removeJob(job)));
+
+      jobCount += jobs.length;
+
+      // Get the next batch of jobs.
+      jobs = await getJobBatch(n, options.stuck);
+    }
 
     util.shutdown();
-    console.log('Removed old jobs');
+    console.log(`Removed ${jobCount} jobs`);
   } catch (err) {
     console.error(err);
     util.shutdown(1);
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index b5f45b8e5..4e09ef86f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -224,14 +224,13 @@ class Stream extends React.Component {
     const open = !asset.isClosed;
 
     const banned = user && user.status === 'BANNED';
-    const pending = user && user.status === 'PENDING';
 
     const temporarilySuspended =
       user &&
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const showCommentBox = loggedIn && ((!banned && !pending & !temporarilySuspended && !highlightedComment) || keepCommentBox);
+    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
diff --git a/services/kue.js b/services/kue.js
index 0fa610faa..01806632e 100644
--- a/services/kue.js
+++ b/services/kue.js
@@ -21,6 +21,9 @@ const getQueue = () => {
     }
   });
 
+  // Watch for stuck jobs to manage.
+  queue.watchStuckJobs(1000);
+
   return queue;
 };
 
@@ -47,6 +50,7 @@ class Task {
         .attempts(this.attempts)
         .delay(this.delay)
         .backoff({type: 'exponential'})
+        .removeOnComplete(true)
         .save((err) => {
           if (err) {
             return reject(err);
@@ -66,6 +70,15 @@ class Task {
     return getQueue().process(this.name, callback);
   }
 
+  /**
+   * Connect to redis now by getting the queue.
+   */
+  static connect() {
+
+    // Force setup the redis connection for kue.
+    getQueue();
+  }
+
   /**
    * Shutdown running jobs.
    */
@@ -145,3 +158,5 @@ if (process.env.NODE_ENV === 'test') {
   module.exports.Task = Task;
 }
 
+// Add the job reference to the exported params.
+module.exports.Job = kue.Job;

From ab772839c52cc71b3a129b0d2655e467ae4f3c73 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 16:38:38 +0100
Subject: [PATCH 213/344] Debounce and batch subscription updates

---
 .../Moderation/containers/Moderation.js       |  2 +-
 .../src/components/Stream.js                  |  2 +-
 client/coral-framework/hocs/withQuery.js      | 78 ++++++++++++++++++-
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 1b75d23cc..69c8edb43 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -138,7 +138,7 @@ class ModerationContainer extends Component {
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMore(param));
+    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreDebounced(param));
   }
 
   unsubscribe() {
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index ed970d500..4c2d10a99 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -208,7 +208,7 @@ class Stream extends React.Component {
         if (i > 0) {
           launch();
         }
-      }, 500);
+      }, 100);
     };
     launch();
   }
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 9548827ac..d95b6945d 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -3,6 +3,9 @@ import {graphql} from 'react-apollo';
 import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../utils';
 import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
+import {getOperationName} from 'apollo-client/queries/getFromAST';
+import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
+import debounce from 'lodash/debounce';
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -40,10 +43,12 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     static contextTypes = {
       eventEmitter: PropTypes.object,
       graphqlRegistry: PropTypes.object,
+      client: PropTypes.object,
     };
 
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
     memoized = null;
+    resolvedDocument = null;
     lastNetworkStatus = null;
     data = null;
     name = '';
@@ -52,6 +57,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       return this.context.graphqlRegistry;
     }
 
+    get client() {
+      return this.context.client;
+    }
+
     resolveDocument(documentOrCallback) {
       const document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
@@ -72,6 +81,68 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
+    subscribeToMoreDebounced = ({document, variables, updateQuery}) => {
+
+      // We need to add the typenames and resolve fragments.
+      const rootQuery = addTypenameToDocument(this.resolvedDocument);
+      const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
+      let batched = [];
+
+      // Process data in a batched fashion.
+      const processData = () => {
+        const variables = typeof this.wrappedOptions === 'function'
+          ? this.wrappedOptions(this.props).variables
+          : this.wrappedOptions.variables;
+        const previousResult = this.client.readQuery({
+          query: rootQuery,
+          variables,
+        });
+
+        let result = previousResult;
+
+        batched.forEach((data) => {
+          result = updateQuery(result, {subscriptionData: {data}});
+        });
+
+        if (result !== previousResult) {
+          this.client.writeQuery({
+            query: rootQuery,
+            variables,
+            data: result,
+          });
+        }
+        batched = [];
+      };
+
+      // Debounce to handle high loads of traffic.
+      const processDataDebounced = debounce(processData, 250, {'maxWait': 2000});
+
+      const handler = (error, data) => {
+        if (error) {
+
+          // TODO: shuld this show a notification?
+          console.error(error);
+          return;
+        }
+        if (data) {
+          batched.push(data);
+          processDataDebounced();
+        }
+      };
+
+      // Start subscription.
+      const request = {
+        query,
+        variables,
+        operationName: getOperationName(query),
+      };
+
+      const id = this.client.networkInterface.subscribe(request, handler);
+
+      // Return unsubscribe callback.
+      return () => this.client.networkInterface.unsubscribe(id);
+    };
+
     nextData(data) {
       this.emitWhenNeeded(data);
 
@@ -102,6 +173,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           stopPolling: data.stopPolling,
           refetch: data.refetch,
           updateQuery: data.updateQuery,
+          subscribeToMoreDebounced: this.subscribeToMoreDebounced,
           subscribeToMore: (stmArgs) => {
             const resolvedDocument = this.resolveDocument(stmArgs.document);
 
@@ -190,10 +262,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
 
     getWrapped = () => {
       if (!this.memoized) {
-        const resolvedDocument = this.resolveDocument(document);
-        this.name = getDefinitionName(resolvedDocument);
+        this.resolvedDocument = this.resolveDocument(document);
+        this.name = getDefinitionName(this.resolvedDocument);
         this.memoized = graphql(
-          resolvedDocument,
+          this.resolvedDocument,
           {...this.wrappedConfig, options: this.wrappedOptions},
         )(WrappedComponent);
       }

From af3542aec5d3f564efef6f9b83a4ae696ceba757 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 30 Nov 2017 15:30:21 -0300
Subject: [PATCH 214/344] adding and enabling question box

---
 .../src/tabs/stream/components/Stream.js      | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 4e09ef86f..c81a5d797 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -213,7 +213,12 @@ class Stream extends React.Component {
       root,
       appendItemArray,
       asset,
-      asset: {comment: highlightedComment},
+      asset: {
+        comment: highlightedComment,
+        settings: {
+          questionBoxEnable,
+        }
+      },
       postComment,
       notify,
       updateItem,
@@ -246,18 +251,17 @@ class Stream extends React.Component {
               content={asset.settings.infoBoxContent}
               enable={asset.settings.infoBoxEnable}
             />
-            <QuestionBox
-              content={asset.settings.questionBoxContent}
-              enable={asset.settings.questionBoxEnable}
-              icon={asset.settings.questionBoxIcon}
-            >
-              <Slot
-                fill="streamQuestionArea"
-                queryData={slotQueryData}
-                {...slotProps}
-              />
-            </QuestionBox>
-
+            {questionBoxEnable && (
+              <QuestionBox 
+                content={asset.settings.questionBoxContent}
+                icon={asset.settings.questionBoxIcon}>
+                <Slot
+                  fill="streamQuestionArea"
+                  queryData={slotQueryData}
+                  {...slotProps}
+                />
+              </QuestionBox>
+            )}
             {!banned &&
                 temporarilySuspended &&
                 <RestrictedMessageBox>

From 06ddb30d7732ab4f2a3a440d9d4584f3a58eff31 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 20:26:08 +0100
Subject: [PATCH 215/344] Decouple apollo store

---
 .../src/containers/StreamTabPanel.js                |  3 +--
 client/coral-framework/components/IfSlotIsEmpty.js  |  3 +--
 .../coral-framework/components/IfSlotIsNotEmpty.js  |  3 +--
 client/coral-framework/components/Slot.js           |  3 +--
 client/coral-framework/components/TalkProvider.js   |  6 ++++--
 client/coral-framework/services/bootstrap.js        | 13 ++++++++++---
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js
index 9a154512d..d3dadb5d2 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import StreamTabPanel from '../components/StreamTabPanel';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
 import {Tab, TabPane} from 'coral-ui';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
@@ -106,7 +105,7 @@ StreamTabPanelContainer.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(StreamTabPanelContainer);
diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 51a849448..8470fadba 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsEmpty);
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index 6186e2166..a498ad3aa 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsNotEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsNotEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index e1acd82f4..0404df80f 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
 import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -121,7 +120,7 @@ Slot.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(Slot);
diff --git a/client/coral-framework/components/TalkProvider.js b/client/coral-framework/components/TalkProvider.js
index 418bb3760..880b4c9d9 100644
--- a/client/coral-framework/components/TalkProvider.js
+++ b/client/coral-framework/components/TalkProvider.js
@@ -13,13 +13,14 @@ class TalkProvider extends React.Component {
       notification: this.props.notification,
       storage: this.props.storage,
       history: this.props.history,
+      store: this.props.store,
     };
   }
 
   render() {
-    const {children, client, store} = this.props;
+    const {children, client} = this.props;
     return (
-      <ApolloProvider client={client} store={store}>
+      <ApolloProvider client={client}>
         {children}
       </ApolloProvider>
     );
@@ -35,6 +36,7 @@ TalkProvider.childContextTypes = {
   notification: PropTypes.object,
   storage: PropTypes.object,
   history: PropTypes.object,
+  store: PropTypes.object,
 };
 
 export default TalkProvider;
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 85144fe60..9862ff23c 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -159,21 +159,28 @@ export async function createContext({
     pym.sendMessage('event', JSON.stringify({eventName, value}));
   });
 
+  // Create our redux store.
   const finalReducers = {
     ...reducers,
     ...plugins.getReducers(),
-    apollo: client.reducer(),
   };
 
   store = createStore(finalReducers, [
-    client.middleware(),
     thunk.withExtraArgument(context),
-    apolloErrorReporter,
     createReduxEmitter(eventEmitter),
   ]);
 
   context.store = store;
 
+  // Create apollo redux store.
+  context.apolloStore = createStore({
+    apollo: client.reducer(),
+  }, [
+    client.middleware(),
+    apolloErrorReporter,
+    createReduxEmitter(eventEmitter),
+  ]);
+
   // Run pre initialization.
   if (preInit) {
     await preInit(context);

From 65be2b89a40817362f05b18eb67c5bfd155037e9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 21:44:32 +0100
Subject: [PATCH 216/344] Throttle instead of debounce

---
 .../src/routes/Moderation/containers/Moderation.js   |  2 +-
 client/coral-framework/hocs/withQuery.js             | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 69c8edb43..ca6f0224a 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -138,7 +138,7 @@ class ModerationContainer extends Component {
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreDebounced(param));
+    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreThrottled(param));
   }
 
   unsubscribe() {
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index d95b6945d..7a0eb1034 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
-import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -81,7 +81,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
-    subscribeToMoreDebounced = ({document, variables, updateQuery}) => {
+    subscribeToMoreThrottled = ({document, variables, updateQuery}, wait = 1000) => {
 
       // We need to add the typenames and resolve fragments.
       const rootQuery = addTypenameToDocument(this.resolvedDocument);
@@ -114,8 +114,8 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         batched = [];
       };
 
-      // Debounce to handle high loads of traffic.
-      const processDataDebounced = debounce(processData, 250, {'maxWait': 2000});
+      // throttle to handle high loads of traffic.
+      const processDataThrottled = throttle(processData, wait);
 
       const handler = (error, data) => {
         if (error) {
@@ -126,7 +126,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         }
         if (data) {
           batched.push(data);
-          processDataDebounced();
+          processDataThrottled();
         }
       };
 
@@ -173,7 +173,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           stopPolling: data.stopPolling,
           refetch: data.refetch,
           updateQuery: data.updateQuery,
-          subscribeToMoreDebounced: this.subscribeToMoreDebounced,
+          subscribeToMoreThrottled: this.subscribeToMoreThrottled,
           subscribeToMore: (stmArgs) => {
             const resolvedDocument = this.resolveDocument(stmArgs.document);
 

From 3db7439d767dfbc115ce8bb9792c7793ac69c6db Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 21:55:16 +0100
Subject: [PATCH 217/344] Use custom optimized graphql-anywhere

---
 client/coral-framework/hocs/withQuery.js | 1 +
 package.json                             | 2 +-
 webpack.config.js                        | 1 +
 yarn.lock                                | 6 +++++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 7a0eb1034..3a070cfbd 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -93,6 +93,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         const variables = typeof this.wrappedOptions === 'function'
           ? this.wrappedOptions(this.props).variables
           : this.wrappedOptions.variables;
+
         const previousResult = this.client.readQuery({
           query: rootQuery,
           variables,
diff --git a/package.json b/package.json
index 196effd71..c616ef8e8 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-anywhere": "^3.1.0",
+    "graphql-anywhere-optimized": "git+https://git@github.com/cvle/graphql-anywhere#optimized",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index d9c8ba4a0..8e510a3f0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,6 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
+      'graphql-anywhere': 'graphql-anywhere-optimized',
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index 7996e549f..ea35ec342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3507,7 +3507,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-graphql-anywhere@^3.0.1, graphql-anywhere@^3.1.0:
+"graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
+  version "3.1.0"
+  resolved "git+https://git@github.com/cvle/graphql-anywhere#7338ffed17ff27d79e56ae09ad4adeea33c21388"
+
+graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 

From 214de045fbe205123dbfae5787706c40e249837d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 22:44:29 +0100
Subject: [PATCH 218/344] One subscription queue per query

---
 .../src/tabs/stream/components/Stream.js      |  2 +-
 client/coral-framework/hocs/withQuery.js      | 81 ++++++++++---------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 046b0f1df..2bd131cb0 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -212,7 +212,7 @@ class Stream extends React.Component {
     const launch = () => {
       setTimeout(() => {
         this.props.postComment({
-          asset_id: this.props.root.asset.id,
+          asset_id: this.props.asset.id,
           body: 'death is certain',
         });
         i--;
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 3a070cfbd..eaf740ffb 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -53,6 +53,9 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     data = null;
     name = '';
 
+    // Pending subscription data.
+    subscriptionQueue = [];
+
     get graphqlRegistry() {
       return this.context.graphqlRegistry;
     }
@@ -62,10 +65,15 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
+      let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
         : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      document = this.graphqlRegistry.resolveFragments(document);
+
+      // We also add typenames to the document which apollo would usually do,
+      // but we also use the network interface in subscriptions directly
+      // which require the resolved typenames.
+      return addTypenameToDocument(document);
     }
 
     emitWhenNeeded(data) {
@@ -81,43 +89,38 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
-    subscribeToMoreThrottled = ({document, variables, updateQuery}, wait = 1000) => {
+    // Handle any pending susbcription data in the subscription queue at max once every second.
+    // Updates are batched in written into apollo in one go.
+    processSubscriptionQueue = throttle(() => {
+      const variables = typeof this.wrappedOptions === 'function'
+        ? this.wrappedOptions(this.props).variables
+        : this.wrappedOptions.variables;
+
+      const previousResult = this.client.readQuery({
+        query: this.resolvedDocument,
+        variables,
+      });
+
+      let result = previousResult;
+
+      this.subscriptionQueue.forEach(([updateQuery, data]) => {
+        result = updateQuery(result, {subscriptionData: {data}});
+      });
+
+      if (result !== previousResult) {
+        this.client.writeQuery({
+          query: this.resolvedDocument,
+          variables,
+          data: result,
+        });
+      }
+      this.subscriptionQueue = [];
+    }, 1000);
+
+    subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
 
       // We need to add the typenames and resolve fragments.
-      const rootQuery = addTypenameToDocument(this.resolvedDocument);
       const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
-      let batched = [];
-
-      // Process data in a batched fashion.
-      const processData = () => {
-        const variables = typeof this.wrappedOptions === 'function'
-          ? this.wrappedOptions(this.props).variables
-          : this.wrappedOptions.variables;
-
-        const previousResult = this.client.readQuery({
-          query: rootQuery,
-          variables,
-        });
-
-        let result = previousResult;
-
-        batched.forEach((data) => {
-          result = updateQuery(result, {subscriptionData: {data}});
-        });
-
-        if (result !== previousResult) {
-          this.client.writeQuery({
-            query: rootQuery,
-            variables,
-            data: result,
-          });
-        }
-        batched = [];
-      };
-
-      // throttle to handle high loads of traffic.
-      const processDataThrottled = throttle(processData, wait);
-
       const handler = (error, data) => {
         if (error) {
 
@@ -126,8 +129,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           return;
         }
         if (data) {
-          batched.push(data);
-          processDataThrottled();
+          this.subscriptionQueue.push([updateQuery, data]);
+
+          // Triggers the throttled subscription queue processor.
+          this.processSubscriptionQueue();
         }
       };
 

From 64276cd157ef7e2ccbc4307833592b2af6529c12 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 30 Nov 2017 23:20:01 +0000
Subject: [PATCH 219/344] Remove Dashboard

---
 locales/da.yml    | 11 -----------
 locales/en.yml    | 11 -----------
 locales/es.yml    | 11 -----------
 locales/fr.yml    | 11 -----------
 locales/pt_BR.yml | 11 -----------
 5 files changed, 55 deletions(-)

diff --git a/locales/da.yml b/locales/da.yml
index 48b5ab362..0a5152cd9 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -98,7 +98,6 @@ da:
     copy_and_paste: "Kopier og indsæt kode nedenfor i dit CMS system for at indlejre din kommentarboks i dine artiker."
     custom_css_url: "Brugerdefineret CSS URL"
     custom_css_url_desc: "URL til et CSS stylesheet der tilsidesætter den alimdelige strøms stilart. Kan være internt eller externt"
-    dashboard: "Instrumentbræt"
     days: "Dage"
     description: "Som administrator kan du tilpasse indstillingerne til kommentarstrømmen for denne historie:"
     domain_list_text: "Indtast de domæner du gerne vil tillade til Talk. f.eks. Dit lokale udviklings miljø (fx. localhost:3000 staging.domain.com domain.com)."
@@ -153,16 +152,6 @@ da:
     username: "Brugernavn"
     write_your_username: "Rediger dit brugernavn"
     your_username: "Dit brugernavn vises på hver kommentar du sender."
-  dashboard:
-    auto_update: "Data opdateres automatisk hvert femte minut, eller når du genindlæser."
-    comment_count: "kommentarer"
-    flags: "Flags"
-    most_flags: "Historier med de fleste flags"
-    most_conversations: "Historier med de fleste samtaler"
-    next_update: "{0} minutter indtil næste opdatering."
-    no_activity: "Der har ikke været nogen kommentarer i løbet af de sidste fem minutter."
-    no_flags: "Der har ikke været nogle flag i de sidste 5 minutter! Hurra!"
-    no_likes: "Der har ikke været nogen der syntes godt om noget i de sidste 5 minutter. Helt stille"
   done: "Færdig"
   edit_comment:
     body_input_label: "Rediger denne kommentar"
diff --git a/locales/en.yml b/locales/en.yml
index 02bdea30b..f1d566475 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -100,7 +100,6 @@ en:
     copy_and_paste: "Copy and paste code below into your CMS to embed your comment box in your articles"
     custom_css_url: "Custom CSS URL"
     custom_css_url_desc: "URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external."
-    dashboard: Dashboard
     days: Days
     description: "As an admin, you can customize the settings for the comment stream for this story:"
     domain_list_text: "Enter the domains you would like to permit for Talk e.g. your local staging and production environments (ex. localhost:3000 staging.domain.com domain.com)."
@@ -155,16 +154,6 @@ en:
     username: Username
     write_your_username: "Edit your username"
     your_username: "Your username appears on every comment you post."
-  dashboard:
-    auto_update: "Data automatically updates every five minutes or when you Reload."
-    comment_count: comments
-    flags: Flags
-    most_flags: "Stories with the most flags"
-    most_conversations: "Stories with the most conversations"
-    next_update: "{0} minutes until next update."
-    no_activity: "There haven't been any comments anywhere in the last five minutes."
-    no_flags: "There have been no flags in the last 5 minutes! Hooray!"
-    no_likes: "There have been no likes in the last 5 minutes. All quiet."
   done: Done
   edit_comment:
     body_input_label: "Edit this comment"
diff --git a/locales/es.yml b/locales/es.yml
index 0282b6431..9441253c7 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -98,7 +98,6 @@ es:
     copy_and_paste: "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus artículos"
     custom_css_url: "URL CSS a medida"
     custom_css_url_desc: "URL de una hoja de estilo que va a sobrescribir los estilos por defecto del hilo de comentarios. Puede ser interna o externa."
-    dashboard: Panel
     days: Días
     description: "Como Administrador/a puedes modificar la configuración de los comentarios en este artículo"
     domain_list_text: "Agrega dominios permitidos a Talk, por ejemplo tu localhost, staging y ambientes de producción (ej. localhost:3000, staging.domain.com, domain.com)."
@@ -153,16 +152,6 @@ es:
     username: "Nombre"
     write_your_username: "Edita tu nombre"
     your_username: "Tu nombre aparece en cada comentario que publiques."
-  dashboard:
-    auto_update: "Los datos se actualizan automáticamente cada cinco minutos o cuando refresca el navegador."
-    comment_count: "comentarios"
-    flags: "Reportes"
-    most_flags: "Artículos con la mayor cantidad de reportes"
-    most_conversations: "Artículos con las mayores conversaciones"
-    next_update: "{0} minutos hasta la próxima actualización."
-    no_activity: "¡No han habido comentarios en ningún lado en los últimos 5 minutos."
-    no_flags: "¡No ha habido ningún reporte en los últimos 5 minutos! Bravo!"
-    no_likes: "¡No ha habido ningún 'me gusta' en los últimos 5 minutos. Todo tranquilo."
   done: "Hecho"
   edit_comment:
     body_input_label: "Editar este comentario"
diff --git a/locales/fr.yml b/locales/fr.yml
index 5c5a45aab..31ad3ca91 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -79,7 +79,6 @@ fr:
     copy_and_paste: "Copiez et collez le code ci-dessous dans votre CMS pour intégrer votre boîte de commentaires dans vos articles."
     custom_css_url: "URL CSS personnalisée"
     custom_css_url_desc: "URL d'une feuille de style CSS qui remplacera les styles par défaut d'intégration des commentaires. Peut être interne ou externe."
-    dashboard: Tableau de bord
     days: Journées
     description: "En tant qu'administrateur, vous pouvez personnaliser les paramètres du fil de commentaires pour cet élément."
     domain_list_text: "Entrez les domaines que vous souhaitez autoriser pour Talk, par exemple vos environnements locaux de production et de production (ex : localhost: 3000 staging.domain.com domain.com)."
@@ -121,16 +120,6 @@ fr:
     weeks: Semaines
     wordlist: "Mots interdits"
   continue: Continuer
-  dashboard:
-    auto_update: "Les données sont automatiquement mises à jour toutes les cinq minutes ou lorsque vous rechargez."
-    comment_count: commentaires
-    flags: signalements
-    most_flags: "Articles avec le plus de signalements"
-    most_conversations: "Articles avec le plus de conversations"
-    next_update: "{0} minutes jusqu'à la prochaine mise à jour."
-    no_activity: "Il n'y a eu aucun commentaire nulle part dans les cinq dernières minutes."
-    no_flags: "Il n'y a pas eu aucun signalement au cours des 5 dernières minutes! Hooray !"
-    no_likes: "Il n'y a pas eu de \"J'aime\" au cours des 5 dernières minutes. Tout est calme."
   done: Terminé
   edit_comment:
     body_input_label: "Modifier ce commentaire"
diff --git a/locales/pt_BR.yml b/locales/pt_BR.yml
index ae8e1310c..bdfe72d5a 100644
--- a/locales/pt_BR.yml
+++ b/locales/pt_BR.yml
@@ -98,7 +98,6 @@ pt_BR:
     copy_and_paste: "Copie e cole o código abaixo em seu CMS para incorporar sua caixa de comentários em seus artigos."
     custom_css_url: "URL para CSS customizado"
     custom_css_url_desc: "URL de uma folha de estilo CSS para substituir os estilos padrão dos comentários embutidos. Pode ser interno ou externo."
-    dashboard: Painel de controle
     days: Dias
     description: "Como administrador, você pode personalizar as configurações da lista de comentários para esta história:"
     domain_list_text: "Insira os domínios que você gostaria de permitir para o Talk, como seus ambientes de desenvolvimento, teste ou produção (ej. localhost:3000 staging.domain.com domain.com)."
@@ -153,16 +152,6 @@ pt_BR:
     username: Nome de usuário
     write_your_username: "Edite seu nome de usuário"
     your_username: "Nosso nome de usuário aparece em todos os comentários que você publica."
-  dashboard:
-    auto_update: "Atualizado autimaticamente a cada minutos ou após recarregamento."
-    comment_count: comentários
-    flags: Marcações
-    most_flags: "Conversas com mais comentários marcados"
-    most_conversations: "Conversas com mais comentários"
-    next_update: "{0} minutos até a próxima atualização."
-    no_activity: "Não houve nenhum comentário nos últimos cinco minutos."
-    no_flags: "Não houve nenhum comentário marcado em nenhum lugar nos últimos 5 minutos. Hip Hip Uha!"
-    no_likes: "Não houve reações nos últimos 5 minutos."
   done: Feito
   edit_comment:
     body_input_label: "Edite este comentário"

From 9c0e6ccb3683cc6110a1fd429d8b75762f9de6be Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 30 Nov 2017 23:21:01 +0000
Subject: [PATCH 220/344] Remove Dashboard

---
 client/coral-admin/src/AppRouter.js           |   2 -
 client/coral-admin/src/components/Drawer.js   |  10 +-
 .../coral-admin/src/components/ui/Header.js   |  11 +-
 client/coral-admin/src/reducers/dashboard.js  |  15 ---
 client/coral-admin/src/reducers/index.js      |   2 -
 .../Dashboard/components/ActivityWidget.js    |  47 --------
 .../Dashboard/components/CountdownTimer.js    |  93 ---------------
 .../routes/Dashboard/components/Dashboard.css |  40 -------
 .../routes/Dashboard/components/Dashboard.js  |  15 ---
 .../routes/Dashboard/components/FlagWidget.js |  54 ---------
 .../routes/Dashboard/components/LikeWidget.js |  49 --------
 .../components/MostLikedCommentsWidget.js     |  38 ------
 .../routes/Dashboard/components/Widget.css    | 110 ------------------
 .../routes/Dashboard/containers/Dashboard.js  |  65 -----------
 .../coral-admin/src/routes/Dashboard/index.js |   1 -
 15 files changed, 4 insertions(+), 548 deletions(-)
 delete mode 100644 client/coral-admin/src/reducers/dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Dashboard.css
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Widget.css
 delete mode 100644 client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/index.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index d8e1b5377..362143d38 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 
 import Configure from 'routes/Configure';
-import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community/containers/Community';
@@ -18,7 +17,6 @@ const routes = (
       <IndexRedirect to='/admin/moderate' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
-      <Route path='dashboard' component={Dashboard} />
 
       {/* Community Routes */}
 
diff --git a/client/coral-admin/src/components/Drawer.js b/client/coral-admin/src/components/Drawer.js
index 70da8ad5e..29ee8d17e 100644
--- a/client/coral-admin/src/components/Drawer.js
+++ b/client/coral-admin/src/components/Drawer.js
@@ -12,20 +12,14 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
-          <IndexLink
-            className={cn('talk-admin-nav-dashboard', styles.navLink)}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {t('configure.dashboard')}
-          </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
-              <Link
+              <IndexLink
                 className={cn('talk-admin-nav-moderate', styles.navLink)}   
                 to="/admin/moderate"
                 activeClassName={styles.active}>
                 {t('configure.moderate')}
-              </Link>
+              </IndexLink>
             )
           }
           <Link
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index e199d5ded..4e7826ee6 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -23,23 +23,16 @@ const CoralHeader = ({
           {
             auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
               <Navigation className={styles.nav}>
-                <IndexLink
-                  id='dashboardNav'
-                  className={cn('talk-admin-nav-dashboard', styles.navLink)}
-                  to="/admin/dashboard"
-                  activeClassName={styles.active}>
-                  {t('configure.dashboard')}
-                </IndexLink>
                 {
                   can(auth.user, 'MODERATE_COMMENTS') && (
-                    <Link
+                    <IndexLink
                       id='moderateNav'
                       className={cn('talk-admin-nav-moderate', styles.navLink)}
                       to="/admin/moderate"
                       activeClassName={styles.active}>
                       {t('configure.moderate')}
                       {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                    </Link>
+                    </IndexLink>
                   )
                 }
                 <Link
diff --git a/client/coral-admin/src/reducers/dashboard.js b/client/coral-admin/src/reducers/dashboard.js
deleted file mode 100644
index 3b3414d3a..000000000
--- a/client/coral-admin/src/reducers/dashboard.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// this is initialized here because
-// currently you have to reload the dashboard to get new stats
-// cleaner updates are planned in the future.
-const DASHBOARD_WINDOW_MINUTES = 5;
-let then = new Date();
-then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
-
-const initialState = {
-  windowStart: then.toISOString(),
-  windowEnd: new Date().toISOString(),
-};
-
-export default function dashboard (state = initialState, _action) {
-  return state;
-}
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index f7bbf3a3b..450a914c3 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -1,6 +1,5 @@
 import auth from './auth';
 import stories from './stories';
-import dashboard from './dashboard';
 import configure from './configure';
 import community from './community';
 import moderation from './moderation';
@@ -13,7 +12,6 @@ import userDetail from './userDetail';
 export default {
   auth,
   banUserDialog,
-  dashboard,
   configure,
   suspendUserDialog,
   userDetail,
diff --git a/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js b/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
deleted file mode 100644
index 3f8af141b..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const ActivityWidget = ({assets}) => {
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_conversations')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.comment_count')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{asset.commentCount}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_activity')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-ActivityWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    commentCount: PropTypes.number,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default ActivityWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js b/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
deleted file mode 100644
index a2e6ea9f1..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './Dashboard.css';
-import {Icon} from 'coral-ui';
-
-import t from 'coral-framework/services/i18n';
-const refreshIntervalSeconds = 60 * 5;
-
-// TODO: refactor out storage code into redux.
-
-class CountdownTimer extends React.Component {
-
-  static contextTypes = {
-    storage: PropTypes.object,
-  };
-
-  static propTypes = {
-    handleTimeout: PropTypes.func.isRequired
-  }
-
-  constructor (props, context) {
-    super(props, context);
-    const {storage} = context;
-    try {
-      if (storage && storage.getItem('coral:dashboardNote') === null) {
-        storage.setItem('coral:dashboardNote', 'show');
-      }
-    } catch (e) {
-
-      // above will fail in Private Mode in some browsers.
-    }
-
-    this.state = {
-      secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
-    };
-  }
-
-  componentWillMount () {
-    this.interval = setInterval(() => { // the countdown timer
-      let nextCount = this.state.secondsUntilRefresh - 1;
-      if (nextCount < 0) {
-        nextCount = refreshIntervalSeconds;
-        return this.props.handleTimeout();
-      }
-      this.setState({secondsUntilRefresh: nextCount});
-    }, 1000);
-  }
-
-  componentWillUnmount () {
-    window.clearInterval(this.interval);
-  }
-
-  formatTime = () => {
-    const minutes = Math.floor(this.state.secondsUntilRefresh / 60);
-    let seconds = (this.state.secondsUntilRefresh % 60).toString();
-    if (seconds.length < 2) {
-      seconds = `0${seconds}`;
-    }
-
-    return `${minutes}:${seconds}`;
-  }
-
-  dismissNote = () => {
-    const {storage} = this.context;
-    try {
-      if (storage) {
-        storage.setItem('coral:dashboardNote', 'hide');
-      }
-    } catch (e) {
-
-      // when setItem fails in Safari Private mode
-      this.setState({dashboardNote: 'hide'});
-    }
-  }
-
-  render () {
-    const {storage} = this.context;
-    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
-      this.state.dashboardNote === 'hide'; // for Safari Incognito
-    return (
-      <p
-        style={{display: hideReloadNote ? 'none' : 'block'}}
-        className={styles.autoUpdate}
-        onClick={this.dismissNote}>
-        <b>×</b>
-        <Icon name='timer' /> <strong>{t('dashboard.next_update', this.formatTime())}</strong> {t('dashboard.auto_update')}
-      </p>
-    );
-  }
-}
-
-export default CountdownTimer;
diff --git a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css b/client/coral-admin/src/routes/Dashboard/components/Dashboard.css
deleted file mode 100644
index aee7e702b..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-.Dashboard {
-  display: flex;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-.heading {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.autoUpdate {
-  background-color: #d5d5d5;
-  padding: 3px 10px 10px 10px;
-  margin-bottom: 0;
-
-  i {
-    position: relative;
-    top: 7px;
-  }
-
-  b {
-    float: right;
-    border-radius: 20px;
-    cursor: pointer;
-    background-color: #c0c0c0;
-    width: 30px;
-    height: 30px;
-    text-align: center;
-    top: 4px;
-    position: relative;
-    line-height: 1.7em;
-    font-size: 1.3em;
-  }
-}
diff --git a/client/coral-admin/src/routes/Dashboard/components/Dashboard.js b/client/coral-admin/src/routes/Dashboard/components/Dashboard.js
deleted file mode 100644
index ba224a3b9..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Dashboard.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import FlagWidget from './FlagWidget';
-import ActivityWidget from './ActivityWidget';
-import CountdownTimer from './CountdownTimer';
-import styles from './Dashboard.css';
-
-export default ({root: {assetsByActivity, assetsByFlag}, reloadData}) => (
-  <div>
-    <CountdownTimer handleTimeout={reloadData} />
-    <div className={styles.Dashboard}>
-      <FlagWidget assets={assetsByFlag} />
-      <ActivityWidget assets={assetsByActivity} />
-    </div>
-  </div>
-);
diff --git a/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js b/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
deleted file mode 100644
index 2f3548cf1..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-
-import t from 'coral-framework/services/i18n';
-
-const FlagWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_flags')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.flags')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              let flagSummary = null;
-              if (asset.action_summaries) {
-                flagSummary = asset.action_summaries.find((s) => s.__typename === 'FlagAssetActionSummary');
-              }
-
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default FlagWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js b/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
deleted file mode 100644
index 7525f7223..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const LikeWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most likes</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('modqueue.likes')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-LikeWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default LikeWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js b/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
deleted file mode 100644
index 6bbb67c50..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
-import styles from './Widget.css';
-import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
-import t from 'coral-framework/services/i18n';
-
-const MostLikedCommentsWidget = (props) => {
-  const {
-    comments,
-    moderation,
-    settings,
-    handleBanUser,
-    showBanUserDialog,
-    hideBanUserDialog,
-    acceptComment,
-    rejectComment
-  } = props;
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('most_liked_comments')}</h2>
-      <ModerationQueue
-        comments={comments}
-        suspectWords={settings.wordlist.suspect}
-        showBanUserDialog={showBanUserDialog}
-        acceptComment={acceptComment}
-        rejectComment={rejectComment} />
-      <BanUserDialog
-        open={moderation.banDialog}
-        user={moderation.user}
-        handleClose={hideBanUserDialog}
-        handleBanUser={handleBanUser} />
-    </div>
-  );
-};
-
-export default MostLikedCommentsWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/Widget.css b/client/coral-admin/src/routes/Dashboard/components/Widget.css
deleted file mode 100644
index e94d2313f..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Widget.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-:root {
-  --row-height: 60px;
-}
-
-.widget {
-  margin: 10px 5px 5px 5px;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  flex: 1;
-  background-color: white;
-  box-sizing: border-box;
-}
-
-.widget * {
-  box-sizing: border-box;
-}
-
-.heading {
-  margin: 0;
-  padding-left: 10px;
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #2c2c2c;
-}
-
-.widgetTable {
-  height: calc(var(--row-height) * 10);
-}
-
-.widgetTable + div:after {
-  content: '';
-  clear: both;
-  display: block;
-}
-
-.widgetHead p {
-  color: #2c2c2c;
-  font-weight: 500;
-  padding: 10px;
-  text-align: left;
-  text-transform: capitalize;
-  display: inline-block;
-  box-sizing: border-box;
-  margin-bottom: 0;
-}
-
-.widgetHead p:last-child {
-  float: right;
-  margin-right: 100px;
-}
-
-.rowLinkify {
-  border-bottom: 1px solid lightgrey;
-  color: #555;
-  height: var(--row-height);
-  padding: 10px;
-  transition: background-color 200ms;
-}
-
-.rowLinkify:last-child {
-  border-bottom: none;
-}
-
-.rowLinkify:hover {
-  background-color: #f8f8f8;
-  pointer: default;
-}
-
-.linkToAsset {
-  display: inline-block;
-  text-decoration: none;
-}
-
-.linkToModerate {
-  background-color: #BDBDBD;
-  padding: 10px 14px;
-  text-decoration: none;
-  color: black;
-  float: right;
-  margin-left: 15px;
-  transition: background-color 200ms;
-}
-
-.linkToModerate:hover {
-  background-color: #9E9E9E;
-}
-
-.lede {
-  font-size: 0.9em;
-  color: #aaa;
-}
-
-.assetTitle {
-  color: #555;
-  text-decoration: none;
-  font-size: 1.2em;
-  font-weight: 500;
-  margin: 0;
-}
-
-.widgetCount {
-  color: #555;
-  font-size: 1.3em;
-  font-weight: 400;
-  float: right;
-  margin-top: 7px;
-}
diff --git a/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js b/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
deleted file mode 100644
index e2e9ef28c..000000000
--- a/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import Dashboard from '../components/Dashboard';
-import {compose,  gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-
-import {Spinner} from 'coral-ui';
-
-class DashboardContainer extends React.Component {
-
-  reloadData = () => {
-    this.props.data.refetch();
-  }
-
-  render () {
-    if (this.props.data.loading) {
-      return <Spinner />;
-    }
-    return <Dashboard {...this.props} reloadData={this.reloadData} />;
-  }
-}
-
-export const witDashboardQuery = withQuery(gql`
-  query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
-    assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
-      ...CoralAdmin_Metrics
-    }
-    assetsByActivity: assetMetrics(from: $from, to: $to, sortBy: ACTIVITY) {
-      ...CoralAdmin_Metrics
-    }
-  }
-  fragment CoralAdmin_Metrics on Asset {
-    id
-    title
-    url
-    author
-    created_at
-    commentCount
-    action_summaries {
-      actionCount
-      actionableItemCount
-    }
-  }
-`, {
-    options: ({windowStart, windowEnd}) => {
-      return {
-        variables: {
-          from: windowStart,
-          to: windowEnd,
-        }
-      };
-    }
-  });
-
-const mapStateToProps = (state) => {
-  return {
-    windowStart: state.dashboard.windowStart,
-    windowEnd: state.dashboard.windowEnd,
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  witDashboardQuery,
-)(DashboardContainer);
diff --git a/client/coral-admin/src/routes/Dashboard/index.js b/client/coral-admin/src/routes/Dashboard/index.js
deleted file mode 100644
index 5bbb476e2..000000000
--- a/client/coral-admin/src/routes/Dashboard/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from './containers/Dashboard.js';

From ef200a85cbec4f4a8a04619409bbd1aae727f281 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 30 Nov 2017 17:16:32 -0700
Subject: [PATCH 221/344] removed backend for metrics

---
 graph/loaders/assets.js              |   6 -
 graph/loaders/index.js               |   2 -
 graph/loaders/metrics.js             | 257 ---------------------------
 graph/resolvers/root_query.js        |  22 ---
 graph/resolvers/user.js              |   3 +-
 graph/typeDefs.graphql               |  21 ---
 perms/constants.js                   |   1 -
 perms/queryReducer.js                |   2 -
 test/server/graph/loaders/metrics.js | 133 --------------
 9 files changed, 1 insertion(+), 446 deletions(-)
 delete mode 100644 graph/loaders/metrics.js
 delete mode 100644 test/server/graph/loaders/metrics.js

diff --git a/graph/loaders/assets.js b/graph/loaders/assets.js
index b2e315ec5..832b7b473 100644
--- a/graph/loaders/assets.js
+++ b/graph/loaders/assets.js
@@ -79,11 +79,6 @@ const findOrCreateAssetByURL = async (context, asset_url) => {
   return asset;
 };
 
-const getAssetsForMetrics = async ({loaders: {Comments}}) => {
-  return Comments.getByQuery({action_type: 'FLAG'})
-    .then((connection) => connection.nodes);
-};
-
 const findByUrl = async (context, asset_url) => {
 
   // Verify that the asset_url is parsable.
@@ -111,7 +106,6 @@ module.exports = (context) => ({
     findByUrl: (url) => findByUrl(context, url),
     getByQuery: (query) => getAssetsByQuery(context, query),
     getByID: new DataLoader((ids) => genAssetsByID(context, ids)),
-    getForMetrics: () => getAssetsForMetrics(context),
     getAll: new util.SingletonResolver(() => AssetModel.find({}))
   }
 });
diff --git a/graph/loaders/index.js b/graph/loaders/index.js
index 8bc170c6d..0ef09940f 100644
--- a/graph/loaders/index.js
+++ b/graph/loaders/index.js
@@ -4,7 +4,6 @@ const debug = require('debug')('talk:graph:loaders');
 const Actions = require('./actions');
 const Assets = require('./assets');
 const Comments = require('./comments');
-const Metrics = require('./metrics');
 const Settings = require('./settings');
 const Tags = require('./tags');
 const Users = require('./users');
@@ -17,7 +16,6 @@ let loaders = [
   Actions,
   Assets,
   Comments,
-  Metrics,
   Settings,
   Tags,
   Users,
diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js
deleted file mode 100644
index 28efe2963..000000000
--- a/graph/loaders/metrics.js
+++ /dev/null
@@ -1,257 +0,0 @@
-const _ = require('lodash');
-const DataLoader = require('dataloader');
-const {objectCacheKeyFn} = require('./util');
-
-const ActionModel = require('../../models/action');
-const CommentModel = require('../../models/comment');
-
-/**
- * Returns the assets which have had comments made within the last time period.
- */
-const getAssetActivityMetrics = ({loaders: {Assets}}, {from, to, limit}) => {
-  let assetMetrics = [];
-
-  return CommentModel.aggregate([
-    {$match: {
-      parent_id: null,
-      created_at: {
-        $gt: from,
-        $lt: to
-      }
-    }},
-    {$group: {
-      _id: '$asset_id',
-      commentCount: {
-        $sum: 1
-      }
-    }},
-    {$project: {
-      _id: false,
-      asset_id: '$_id',
-      commentCount: '$commentCount'
-    }},
-    {$sort: {
-      commentCount: -1
-    }},
-    {$limit: limit}
-  ])
-    .then((results) => {
-      assetMetrics = results;
-
-      return Assets.getByID.loadMany(results.map((result) => result.asset_id));
-    })
-    .then((assets) => assets.map((asset, i) => {
-
-    // We're leveraging the fact that the comments returned by the aggregation
-    // query are in the request order that we just made, it's what the
-    // Assets.getByID loader does.
-      asset.commentCount = assetMetrics[i].commentCount;
-
-      return asset;
-    }));
-};
-
-/**
- * Returns a list of assets with action metadata included on the models.
- */
-const getAssetMetrics = async ({loaders: {Metrics, Assets, Comments}}, {from, to, sortBy, limit}) => {
-
-  // Get the recent actions.
-  let actionSummaries = await Metrics.getRecentActions.load({from, to});
-
-  let commentMetrics = actionSummaries.reduce((acc, {item_id, action_type, count}) => {
-    if (action_type !== sortBy) {
-      return acc;
-    }
-
-    if (!(item_id in acc)) {
-      acc[item_id] = [];
-    }
-
-    acc[item_id].push({action_type, count});
-
-    return acc;
-  }, {});
-
-  // Collect just the comment id's.
-  let commentIDs = Object.keys(commentMetrics);
-
-  // Find those comments.
-  let comments = await Comments.get.loadMany(commentIDs);
-
-  let commentResults = _.groupBy(comments, 'asset_id');
-
-  let assetMetrics = Object.keys(commentResults)
-    .map((asset_id) => {
-      let ids = commentResults[asset_id].map((comment) => comment.id);
-      let summaries = _.groupBy(_.flatten(ids.map((id) => commentMetrics[id])), 'action_type');
-
-      let action_summaries = Object.keys(summaries).map((action_type) => ({
-        action_type,
-        actionCount: summaries[action_type].reduce((acc, {count}) => acc + count, 0),
-        actionableItemCount: summaries[action_type].length
-      }));
-
-      return {action_summaries, id: asset_id};
-    })
-
-    .filter((asset) => {
-      let contextActionSummary = asset.action_summaries.find((({action_type}) => action_type === sortBy));
-      if (contextActionSummary === null || contextActionSummary.actionCount === 0) {
-        return false;
-      }
-
-      return true;
-    })
-
-    // Sort these metrics by the predefined sort order. This will ensure that
-    // if the action summary does not exist on the object, that it is less
-    // prefered over the one that does have it.
-    .sort((a, b) => {
-      let aActionSummary = a.action_summaries.find((({action_type}) => action_type === sortBy));
-      let bActionSummary = b.action_summaries.find((({action_type}) => action_type === sortBy));
-
-      // Both of them had an actionCount, hence we can determine that we could
-      // compare the actual values directly.
-      return bActionSummary.actionCount - aActionSummary.actionCount;
-    });
-
-  // Only keep the top `limit`.
-  assetMetrics = assetMetrics.slice(0, limit);
-
-  // Determine the assets that we need to return.
-  let assets = await Assets.getByID.loadMany(assetMetrics.map((asset) => asset.id));
-
-  // Join up the assets that are returned by their id.
-  let groupedAssets = _.groupBy(assets, 'id');
-
-  // Return from the sorted asset metrics and return their assetes.
-  return assetMetrics.map(({id, action_summaries}) => {
-    if (id in groupedAssets) {
-      let asset = groupedAssets[id][0];
-
-      // Add the action summaries to the asset.
-      asset.action_summaries = action_summaries;
-
-      return asset;
-    }
-
-    return null;
-  }).filter((asset) => asset != null);
-};
-
-/**
- * Returns a list of comments that are retrieved based on most activity within
- * the indicated time range.
- */
-const getCommentMetrics = async ({loaders: {Metrics, Comments}}, {from, to, sortBy, limit}) => {
-
-  let commentActionSummaries = {};
-
-  let actionSummaries = await Metrics.getRecentActions.load({from, to});
-
-  actionSummaries.sort((a, b) => {
-    let aActionSummary = a.action_type === sortBy ? a : null;
-    let bActionSummary = b.action_type === sortBy ? b : null;
-
-    // If either a or b don't have this action type, then one of them will
-    // automatically win.
-    if (aActionSummary == null || bActionSummary == null) {
-      if (bActionSummary != null) {
-        return 1;
-      }
-
-      if (aActionSummary != null) {
-        return -1;
-      }
-
-      return 0;
-    }
-
-    // Both of them had an actionCount, hence we can determine that we could
-    // compare the actual values directly.
-    return bActionSummary.count - aActionSummary.count;
-  });
-
-  commentActionSummaries = _.groupBy(actionSummaries, 'item_id');
-
-  // Grab the comment id's for comment where they have at least one of the
-  // actions being sorted by.
-  let commentIDs = Object.keys(commentActionSummaries).filter((item_id) => {
-    let contextActionSummary = commentActionSummaries[item_id].find(({action_type}) => action_type === sortBy);
-    if (contextActionSummary == null) {
-      return false;
-    }
-
-    return true;
-  });
-
-  // Only keep the top `limit`.
-  commentIDs = commentIDs.slice(0, limit);
-
-  // If there are no comment's to get, then just continue with an empty
-  // array.
-  if (commentIDs.length === 0) {
-    return [];
-  }
-
-  // Find those comments, this is the final stage, so let's get all the
-  // fields.
-  let comments = await Comments.get.loadMany(commentIDs);
-
-  return comments.map((comment) => {
-
-    // Add in the action summaries genrerated.
-    comment.action_summaries = commentActionSummaries[comment.id];
-
-    return comment;
-  });
-};
-
-const getRecentActions = (context, {from, to}) => {
-  return ActionModel.aggregate([
-
-    // Find all actions that were created in the time range.
-    {$match: {
-      item_type: 'COMMENTS',
-      created_at: {
-        $gt: from,
-        $lt: to
-      }
-    }},
-
-    // Count all those items.
-    {$group: {
-      _id: {
-        item_id: '$item_id',
-        action_type: '$action_type'
-      },
-      count: {
-        $sum: 1
-      }
-    }},
-
-    // Project the count to a better field.
-    {$project: {
-      item_id: '$_id.item_id',
-      action_type: '$_id.action_type',
-      count: '$count'
-    }}
-  ]);
-};
-
-module.exports = (context) => ({
-  Metrics: {
-    getRecentActions: new DataLoader(([{from, to}]) => getRecentActions(context, {from, to}).then((as) => [as]), {
-      batch: false,
-      cacheKeyFn: objectCacheKeyFn('from', 'to')
-    }),
-    Assets: {
-      get: ({from, to, sortBy, limit}) => getAssetMetrics(context, {from, to, sortBy, limit}),
-      getActivity: ({from, to, limit}) => getAssetActivityMetrics(context, {from, to, limit}),
-    },
-    Comments: {
-      get: ({from, to, sortBy, limit}) => getCommentMetrics(context, {from, to, sortBy, limit}),
-    }
-  }
-});
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index e4701c901..aa8b90f20 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -1,7 +1,6 @@
 const {
   SEARCH_ASSETS,
   SEARCH_OTHERS_COMMENTS,
-  SEARCH_COMMENT_METRICS,
   SEARCH_OTHER_USERS
 } = require('../../perms/constants');
 
@@ -58,27 +57,6 @@ const RootQuery = {
     return Users.getCountByQuery(query);
   },
 
-  assetMetrics(_, query, {user, loaders: {Metrics: {Assets}}}) {
-    if (user == null || !user.can(SEARCH_ASSETS)) {
-      return null;
-    }
-
-    const {sortBy} = query;
-    if (sortBy === 'ACTIVITY') {
-      return Assets.getActivity(query);
-    }
-
-    return Assets.get(query);
-  },
-
-  commentMetrics(_, query, {user, loaders: {Metrics: {Comments}}}) {
-    if (user == null || !user.can(SEARCH_COMMENT_METRICS)) {
-      return null;
-    }
-
-    return Comments.get(query);
-  },
-
   // This returns the current user, ensure that if we aren't logged in, we
   // return null.
   me(_, args, {user}) {
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index e5c5746ca..d95ae53f6 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -5,7 +5,6 @@ const {
   SEARCH_OTHER_USERS,
   SEARCH_OTHERS_COMMENTS,
   UPDATE_USER_ROLES,
-  SEARCH_COMMENT_METRICS,
   VIEW_SUSPENSION_INFO,
   LIST_OWN_TOKENS
 } = require('../../perms/constants');
@@ -79,7 +78,7 @@ const User = {
 
   // Extract the reliability from the user metadata if they have permission.
   reliable(user, _, {user: requestingUser}) {
-    if (requestingUser && requestingUser.can(SEARCH_COMMENT_METRICS)) {
+    if (requestingUser && requestingUser.can(SEARCH_ACTIONS)) {
       return KarmaService.model(user);
     }
   },
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 44b906e24..182504abb 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -818,19 +818,6 @@ enum USER_STATUS {
   APPROVED
 }
 
-# Metrics for the assets.
-enum ASSET_METRICS_SORT {
-
-  # Represents a FlagAction.
-  FLAG
-
-  # Represents a don't agree action.
-  DONTAGREE
-
-  # Represents activity.
-  ACTIVITY
-}
-
 type RootQuery {
 
   # Site wide settings and defaults.
@@ -865,14 +852,6 @@ type RootQuery {
 
   # a single User by id
   user(id: ID!): User
-
-  # Asset metrics related to user actions are saturated into the assets
-  # returned. Parameters `from` and `to` are related to the action created_at field.
-  assetMetrics(from: Date!, to: Date!, sortBy: ASSET_METRICS_SORT!, limit: Int = 10): [Asset!]
-
-  # Comment metrics related to user actions are saturated into the comments
-  # returned. Parameters `from` and `to` are related to the action created_at field.
-  commentMetrics(from: Date!, to: Date!, sortBy: ACTION_TYPE!, limit: Int = 10): [Comment!]
 }
 
 ################################################################################
diff --git a/perms/constants.js b/perms/constants.js
index 9cda7442b..7841e9711 100644
--- a/perms/constants.js
+++ b/perms/constants.js
@@ -26,7 +26,6 @@ module.exports = {
   SEARCH_ACTIONS: 'SEARCH_ACTIONS',
   SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
   SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
-  SEARCH_COMMENT_METRICS: 'SEARCH_COMMENT_METRICS',
   LIST_OWN_TOKENS: 'LIST_OWN_TOKENS',
   SEARCH_COMMENT_STATUS_HISTORY: 'SEARCH_COMMENT_STATUS_HISTORY',
   VIEW_SUSPENSION_INFO: 'VIEW_SUSPENSION_INFO',
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index b71c3d964..2cc5b95eb 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -13,8 +13,6 @@ module.exports = (user, perm) => {
     return check(user, ['ADMIN', 'MODERATOR']);
   case types.SEARCH_OTHERS_COMMENTS:
     return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_COMMENT_METRICS:
-    return check(user, ['ADMIN', 'MODERATOR']);
   case types.LIST_OWN_TOKENS:
     return check(user, ['ADMIN']);
   case types.SEARCH_COMMENT_STATUS_HISTORY:
diff --git a/test/server/graph/loaders/metrics.js b/test/server/graph/loaders/metrics.js
deleted file mode 100644
index 4414428bd..000000000
--- a/test/server/graph/loaders/metrics.js
+++ /dev/null
@@ -1,133 +0,0 @@
-const {graphql} = require('graphql');
-
-const schema = require('../../../../graph/schema');
-const Context = require('../../../../graph/context');
-const UserModel = require('../../../../models/user');
-const AssetModel = require('../../../../models/asset');
-const SettingsService = require('../../../../services/settings');
-const ActionModel = require('../../../../models/action');
-const CommentModel = require('../../../../models/comment');
-
-const {expect} = require('chai');
-
-describe('graph.loaders.Metrics', () => {
-  beforeEach(() => SettingsService.init());
-
-  describe('#Comments', () => {
-    const query = `
-      query CommentMetrics($from: Date!, $to: Date!) {
-        flagged: commentMetrics(from: $from, to: $to, sortBy: FLAG) {
-          id
-        }
-      }
-    `;
-
-    describe('different comment states', () => {
-
-      beforeEach(() => CommentModel.create([
-        {id: '1', body: 'a new comment!'},
-        {id: '2', body: 'a new comment!'},
-        {id: '3', body: 'a new comment!'}
-      ]));
-
-      [
-        {flagged: 0, actions: []},
-        {flagged: 1, actions: [{action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'},
-        ]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: '3', item_type: 'COMMENTS'}
-        ]}
-      ].forEach(({flagged, actions}) => {
-
-        describe(`with actions=${actions.length}`, () => {
-
-          beforeEach(() => ActionModel.create(actions));
-
-          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
-            const context = new Context({user: new UserModel({roles: ['ADMIN']})});
-
-            return graphql(schema, query, {}, context, {
-              from: (new Date()).setMinutes((new Date()).getMinutes() - 5),
-              to: (new Date()).setMinutes((new Date()).getMinutes() + 5)
-            })
-              .then(({data, errors}) => {
-                expect(errors).to.be.undefined;
-                expect(data.flagged).to.have.length(flagged);
-              });
-          });
-
-        });
-
-      });
-
-    });
-  });
-
-  describe('#Assets', () => {
-    const query = `
-      fragment metrics on Asset {
-        id
-        action_summaries {
-          actionCount
-          actionableItemCount
-        }
-      }
-
-      query Metrics($from: Date!, $to: Date!) {
-        assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
-          ...metrics
-        }
-      }
-    `;
-
-    describe('different comment states', () => {
-
-      beforeEach(() => Promise.all([
-        AssetModel.create([
-          {id: 'a1', url: 'http://localhost:3030/article/1'},
-          {id: 'a2', url: 'http://localhost:3030/article/2'}
-        ]),
-        CommentModel.create([
-          {id: 'c1', asset_id: 'a1', body: 'a new comment!'},
-          {id: 'c2', asset_id: 'a1', body: 'a new comment!'},
-          {id: 'c3', asset_id: 'a1', body: 'a new comment!'}
-        ])
-      ]));
-
-      [
-        {flagged: 0, actions: []},
-        {flagged: 1, actions: [{action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'},
-        ]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: 'c3', item_type: 'COMMENTS'}
-        ]}
-      ].forEach(({flagged, actions}) => {
-
-        describe(`with actions=${actions.length}`, () => {
-
-          beforeEach(() => ActionModel.create(actions));
-
-          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
-            const context = new Context({user: new UserModel({roles: ['ADMIN']})});
-
-            return graphql(schema, query, {}, context, {
-              from: (new Date()).setMinutes((new Date()).getMinutes() - 5),
-              to: (new Date()).setMinutes((new Date()).getMinutes() + 5)
-            })
-              .then(({data, errors}) => {
-                expect(errors).to.be.undefined;
-                expect(data.assetsByFlag).to.have.length(flagged);
-              });
-          });
-
-        });
-
-      });
-
-    });
-  });
-});

From dff89ec6cd327799e2552be41df4ce2035fe269e Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 1 Dec 2017 12:53:17 +0000
Subject: [PATCH 222/344] Remove Dashboard docs

---
 docs/_docs/03-03-product-guide-moderator-features.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 45516b1a5..064257623 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -8,13 +8,6 @@ permalink: /moderator-features/
 The Admin is your moderators will moderate your comments, and your Admins will
 configure and manage the different parts of Talk.
 
-### Dashboard
-
-The Dashboard provides real-time information to moderators so they know at a
-glance where they should direct their attention. It shows what articles are
-receiving the most reports and where the most active conversations are
-happening.
-
 ### Moderate
 
 This is the tab where Moderators will spend the majority of their time. They can

From fd83fed7bb068f5efa453ff4c1131ba0acbf43a3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 14:10:38 +0100
Subject: [PATCH 223/344] Preoptimize queries and subscriptions documents

---
 .../coral-framework/graphql/reduceDocument.js | 237 ++++++++++++++++++
 client/coral-framework/hocs/withQuery.js      |   6 +-
 package.json                                  |   1 +
 yarn.lock                                     |   4 +
 4 files changed, 247 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-framework/graphql/reduceDocument.js

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
new file mode 100644
index 000000000..d0a9cc30f
--- /dev/null
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -0,0 +1,237 @@
+import {
+  getMainDefinition,
+  getFragmentDefinitions,
+  createFragmentMap,
+  shouldInclude,
+  getOperationDefinition,
+} from 'apollo-utilities';
+
+function getDefinitionName(definition) {
+  switch (definition.kind) {
+  case 'FragmentSpread':
+    return definition.name.value;
+  case 'Field':
+    return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
+  case 'InlineFragment':
+    return `InlineFragment_${definition.typeCondition.name.value}`;
+  default:
+    throw new Error(`unknown definition kind ${definition.kind}`);
+  }
+}
+
+/**
+ * Merge selections of 2 definitions.
+ */
+export function mergeDefinitions(a, b) {
+  const name = getDefinitionName(a);
+
+  if (!!a.selectionSet !== !!b.selectionSet) {
+    throw Error(`incompatible field definition for ${name}`);
+  }
+
+  if (!a.selectionSet) {
+    return b;
+  }
+
+  const selectionSet = mergeSelectionSets(a.selectionSet, b.selectionSet);
+
+  return {
+    ...b,
+    selectionSet,
+  };
+}
+
+/**
+ * Merge selectionSets
+ */
+export function mergeSelectionSets(a, b) {
+  const selectionsMap = [...a.selections, ...b.selections].reduce((o, sel) => {
+    const selName = getDefinitionName(sel);
+    if (!(selName in o)) {
+      o[selName] = sel;
+      return o;
+    }
+    o[selName] = mergeDefinitions(o[selName], sel);
+    return o;
+  }, {});
+
+  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
+
+  return {
+    ...b,
+    selections,
+  };
+}
+
+/**
+ * Return selections with resolved named fragments and directives.
+ */
+function getTransformedSelections(definition, path, gqlType, execContext) {
+  const {
+    fragmentMap,
+    variables,
+  } = execContext;
+
+  const selectionsMap = definition.selectionSet.selections.reduce((o, sel) => {
+    if (variables && !shouldInclude(sel, variables)) {
+
+      // Skip this entirely
+      return o;
+    }
+    if (sel.kind !== 'FragmentSpread') {
+      const transformed = transformDefinition(sel, execContext, path, gqlType);
+      const name = getDefinitionName(sel);
+
+      // Merge existing value.
+      if (name in o) {
+        o[name] = mergeDefinitions(o[name], transformed);
+        return o;
+      }
+
+      o[name] = transformed;
+      return o;
+    }
+
+    const fragment = fragmentMap[sel.name.value];
+
+    if (!fragment) {
+      throw new Error(`fragment ${fragment.name.value} does not exist`);
+    }
+
+    const typeCondition = fragment.typeCondition.name.value;
+
+    if (gqlType !== typeCondition) {
+      const node = {
+        ...fragment,
+        kind: 'InlineFragment',
+      };
+      const transformed = transformDefinition(node, execContext, path, typeCondition);
+      const name = getDefinitionName(node);
+
+      // Merge existing value.
+      if (name in o) {
+        o[name] = mergeDefinitions(o[name], transformed);
+        return o;
+      }
+
+      o[name] = transformed;
+      return o;
+    }
+
+    const fragmentSelections = getTransformedSelections(fragment, path, typeCondition, execContext);
+    fragmentSelections.forEach((s) => {
+
+      if (variables && !shouldInclude(s, variables)) {
+
+        // Skip this entirely
+        return;
+      }
+
+      const selName = getDefinitionName(s);
+      if (!(selName in o)) {
+        o[selName] = s;
+        return;
+      }
+
+      o[selName] = mergeDefinitions(o[selName], s);
+    });
+    return o;
+  }, {});
+
+  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
+  return selections;
+}
+
+/**
+ * Resolve named fragments and directives in a definition.
+ */
+function transformDefinition(definition, execContext, path = '', type = null) {
+  if (!definition.selectionSet) {
+    return definition;
+  }
+
+  const {typeGetter} = execContext;
+
+  if (definition.kind === 'Field') {
+    const fieldName = definition.name.value;
+    path = `${path}.${fieldName}`;
+
+    if (typeGetter) {
+      type = typeGetter(path);
+    }
+  }
+
+  // InlineFragments
+  else if(!type && typeGetter) {
+    type = typeGetter(path);
+  }
+
+  return {
+    ...definition,
+    selectionSet: {
+      ...definition.selectionSet,
+      selections: getTransformedSelections(definition, path, type, execContext),
+    },
+  };
+}
+
+export default function reduceDocument(document, options = {}) {
+  const mainDefinition = getMainDefinition(document);
+  const fragments = getFragmentDefinitions(document);
+  const operationDefinition = getOperationDefinition(document);
+  const path = operationDefinition.operation;
+
+  const execContext = {
+    fragmentMap: createFragmentMap(fragments),
+    keepFragments: [],
+    variables: options.variables,
+    typeGetter: options.typeGetter || (() => null),
+  };
+
+  return {
+    kind: 'Document',
+    definitions: [transformDefinition(mainDefinition, execContext, path)],
+  };
+}
+
+function getObjectType(fieldType) {
+  if (['NON_NULL', 'LIST'].indexOf(fieldType.kind) > -1) {
+    return getObjectType(fieldType.ofType);
+  }
+  return fieldType.name;
+}
+
+function getFieldType(parentType, fieldName) {
+  const field = parentType.fields.find((f) => f.name === fieldName);
+  return getObjectType(field.type);
+}
+
+export function createTypeGetter(introspectionData) {
+  const types = {};
+  introspectionData.__schema.types.forEach((type) => types[type.name] = type);
+
+  const result = {
+    'query': introspectionData.__schema.queryType.name,
+    'mutation': introspectionData.__schema.mutationType.name,
+    'subscription': introspectionData.__schema.subscriptionType.name,
+  };
+
+  return (path) => {
+    if (result[path]) {
+      return result[path];
+    }
+    let currentPath = '';
+    const parts = path.split('.');
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const nextPath = currentPath ? `${currentPath}.${part}` : part;
+      if (nextPath in result) {
+        currentPath = nextPath;
+        continue;
+      }
+      result[nextPath] = getFieldType(types[result[currentPath]], part);
+      currentPath = nextPath;
+    }
+    return result[path];
+  };
+}
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index eaf740ffb..dac2bb221 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -6,6 +6,10 @@ import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 import throttle from 'lodash/throttle';
+import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
+import introspectionData from '../graphql/introspection.json';
+
+const typeGetter = createTypeGetter(introspectionData);
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -68,7 +72,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
         : documentOrCallback;
-      document = this.graphqlRegistry.resolveFragments(document);
+      document = reduceDocument(this.graphqlRegistry.resolveFragments(document), {typeGetter});
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly
diff --git a/package.json b/package.json
index 7a71114a3..9cdc2a03d 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
+    "apollo-utilities": "^1.0.3",
     "app-module-path": "^2.2.0",
     "autoprefixer": "^6.5.2",
     "babel-cli": "6.26.0",
diff --git a/yarn.lock b/yarn.lock
index f393a3f99..6d31966e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -259,6 +259,10 @@ apollo-link-core@^0.5.0:
     graphql-tag "^2.4.2"
     zen-observable-ts "^0.4.4"
 
+apollo-utilities@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.3.tgz#bf435277609850dd442cf1d5c2e8bc6655eaa943"
+
 app-module-path@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/app-module-path/-/app-module-path-2.2.0.tgz#641aa55dfb7d6a6f0a8141c4b9c0aa50b6c24dd5"

From 5c1314165c0dcaf2dfe6fd6115122e684ef9a879 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 14:16:32 +0100
Subject: [PATCH 224/344] Upgrade graphql-anywhere-optimized

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 6d31966e6..25de6dd3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3513,7 +3513,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
 
 "graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
   version "3.1.0"
-  resolved "git+https://git@github.com/cvle/graphql-anywhere#7338ffed17ff27d79e56ae09ad4adeea33c21388"
+  resolved "git+https://git@github.com/cvle/graphql-anywhere#3f5d9e5c619ac4c4065af83abd7f76b84fb81e7c"
 
 graphql-anywhere@^3.0.1:
   version "3.1.0"

From 2c7297513700b66e819c316f35dceedc20a9eb2f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 15:42:13 +0100
Subject: [PATCH 225/344] Preoptimize mutation, fragments and batched
 subscription documents

---
 .../components/TalkProvider.js                |  4 +--
 .../coral-framework/graphql/reduceDocument.js | 15 ++++++++++-
 client/coral-framework/hocs/withFragments.js  |  9 +++----
 client/coral-framework/hocs/withMutation.js   |  9 +++----
 client/coral-framework/hocs/withQuery.js      | 21 +++------------
 client/coral-framework/services/bootstrap.js  | 14 ++++++----
 client/coral-framework/services/graphql.js    | 26 +++++++++++++++++++
 7 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 client/coral-framework/services/graphql.js

diff --git a/client/coral-framework/components/TalkProvider.js b/client/coral-framework/components/TalkProvider.js
index 880b4c9d9..1b9c5ca9c 100644
--- a/client/coral-framework/components/TalkProvider.js
+++ b/client/coral-framework/components/TalkProvider.js
@@ -9,7 +9,7 @@ class TalkProvider extends React.Component {
       pym: this.props.pym,
       plugins: this.props.plugins,
       rest: this.props.rest,
-      graphqlRegistry: this.props.graphqlRegistry,
+      graphql: this.props.graphql,
       notification: this.props.notification,
       storage: this.props.storage,
       history: this.props.history,
@@ -32,7 +32,7 @@ TalkProvider.childContextTypes = {
   eventEmitter: PropTypes.object,
   plugins: PropTypes.object,
   rest: PropTypes.func,
-  graphqlRegistry: PropTypes.object,
+  graphql: PropTypes.object,
   notification: PropTypes.object,
   storage: PropTypes.object,
   history: PropTypes.object,
diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d0a9cc30f..3e0118eba 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -179,7 +179,9 @@ export default function reduceDocument(document, options = {}) {
   const mainDefinition = getMainDefinition(document);
   const fragments = getFragmentDefinitions(document);
   const operationDefinition = getOperationDefinition(document);
-  const path = operationDefinition.operation;
+  const path = operationDefinition
+    ? operationDefinition.operation
+    : `type.${mainDefinition.typeCondition.name.value}`;
 
   const execContext = {
     fragmentMap: createFragmentMap(fragments),
@@ -224,6 +226,17 @@ export function createTypeGetter(introspectionData) {
     const parts = path.split('.');
     for (let i = 0; i < parts.length; i++) {
       const part = parts[i];
+
+      // Handle special path e.g. 'type.ROOT_QUERY.fieldName'
+      if (part === 'type') {
+        const type = parts[i + 1];
+        const nextPath = `type.${type}`;
+        result[nextPath] = type;
+        currentPath = nextPath;
+        i++;
+        continue;
+      }
+
       const nextPath = currentPath ? `${currentPath}.${part}` : part;
       if (nextPath in result) {
         currentPath = nextPath;
diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js
index be6d07fed..3411e7552 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -64,18 +64,15 @@ function hasEqualLeaves(a, b, path = '') {
 export default (fragments) => hoistStatics((BaseComponent) => {
   class WithFragments extends React.Component {
     static contextTypes = {
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
     };
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     fragments = mapValues(fragments, (val) => this.resolveDocument(val));
diff --git a/client/coral-framework/hocs/withMutation.js b/client/coral-framework/hocs/withMutation.js
index cb6bc3789..639dbd461 100644
--- a/client/coral-framework/hocs/withMutation.js
+++ b/client/coral-framework/hocs/withMutation.js
@@ -42,18 +42,15 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     static contextTypes = {
       eventEmitter: PropTypes.object,
       store: PropTypes.object,
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
     };
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index dac2bb221..8f0155a11 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -4,12 +4,7 @@ import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../util
 import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
-import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 import throttle from 'lodash/throttle';
-import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
-import introspectionData from '../graphql/introspection.json';
-
-const typeGetter = createTypeGetter(introspectionData);
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -46,7 +41,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
   return class WithQuery extends React.Component {
     static contextTypes = {
       eventEmitter: PropTypes.object,
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
       client: PropTypes.object,
     };
 
@@ -61,7 +56,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     subscriptionQueue = [];
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     get client() {
@@ -69,15 +64,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     }
 
     resolveDocument(documentOrCallback) {
-      let document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      document = reduceDocument(this.graphqlRegistry.resolveFragments(document), {typeGetter});
-
-      // We also add typenames to the document which apollo would usually do,
-      // but we also use the network interface in subscriptions directly
-      // which require the resolved typenames.
-      return addTypenameToDocument(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     emitWhenNeeded(data) {
@@ -124,7 +111,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
 
       // We need to add the typenames and resolve fragments.
-      const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
+      const query = this.resolveDocument(document);
       const handler = (error, data) => {
         if (error) {
 
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 9862ff23c..4fcc83a52 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -12,6 +12,7 @@ import {BASE_PATH} from 'coral-framework/constants/url';
 import {createPluginsService} from './plugins';
 import {createNotificationService} from './notification';
 import {createGraphQLRegistry} from './graphqlRegistry';
+import {createGraphQLService} from './graphql';
 import globalFragments from 'coral-framework/graphql/fragments';
 import {createStorage, createPymStorage} from 'coral-framework/services/storage';
 import {createHistory} from 'coral-framework/services/history';
@@ -121,7 +122,10 @@ export async function createContext({
     introspectionData,
   });
   const plugins = createPluginsService(pluginsConfig);
-  const graphqlRegistry = createGraphQLRegistry(plugins.getSlotFragments.bind(plugins));
+  const graphql = createGraphQLService(
+    createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
+    introspectionData,
+  );
   if (!notification) {
 
     // Use default notification service (pym based)
@@ -134,7 +138,7 @@ export async function createContext({
     plugins,
     eventEmitter,
     rest,
-    graphqlRegistry,
+    graphql,
     notification,
     storage,
     history,
@@ -143,13 +147,13 @@ export async function createContext({
   };
 
   // Load framework fragments.
-  Object.keys(globalFragments).forEach((key) => graphqlRegistry.addFragment(key, globalFragments[key]));
+  Object.keys(globalFragments).forEach((key) => graphql.registry.addFragment(key, globalFragments[key]));
 
   // Register graphql extension
-  graphqlRegistry.add(graphqlExtension);
+  graphql.registry.add(graphqlExtension);
 
   // Register plugin graphql extensions.
-  plugins.getGraphQLExtensions().forEach((ext) => graphqlRegistry.add(ext));
+  plugins.getGraphQLExtensions().forEach((ext) => graphql.registry.add(ext));
 
   // Load plugin translations.
   plugins.getTranslations().forEach((t) => loadTranslations(t));
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
new file mode 100644
index 000000000..42e9cd8ad
--- /dev/null
+++ b/client/coral-framework/services/graphql.js
@@ -0,0 +1,26 @@
+import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
+import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
+
+/**
+ * createHistory returns the history service for react router
+ * @param  {string}  basename  base path of the url
+ * @return {Object}  histor service
+ */
+export function createGraphQLService(registry, introspectionData) {
+  const typeGetter = createTypeGetter(introspectionData);
+
+  return {
+    registry,
+    resolveDocument(documentOrCallback, props, context) {
+      let document = typeof documentOrCallback === 'function'
+        ? documentOrCallback(props, context)
+        : documentOrCallback;
+      document = reduceDocument(registry.resolveFragments(document), {typeGetter});
+
+      // We also add typenames to the document which apollo would usually do,
+      // but we also use the network interface in subscriptions directly
+      // which require the resolved typenames.
+      return addTypenameToDocument(document);
+    },
+  };
+}

From f17b296e2e3ff46d4839e7bb6c3edef702ffab9c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:31:26 +0100
Subject: [PATCH 226/344] Cache resolved fragments (globally)

---
 .../coral-admin/src/containers/UserDetail.js  |  4 +--
 .../coral-framework/graphql/reduceDocument.js | 34 +++++++++++++++----
 client/coral-framework/services/graphql.js    |  6 +++-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 3a458ff83..702ca4d81 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -19,7 +19,7 @@ import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
 
 const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+  fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
     nodes {
       ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
@@ -155,7 +155,7 @@ export const withUserDetailQuery = withQuery(gql`
       author_id: $author_id,
       statuses: $statuses
     }) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
     ...${getDefinitionName(UserDetailComment.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}
diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index 3e0118eba..fb47daaff 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -63,12 +63,32 @@ export function mergeSelectionSets(a, b) {
   };
 }
 
+function getFragment(name, execContext) {
+  const {
+    rawFragmentMap,
+    fragmentMap,
+  } = execContext;
+
+  if (!(name in fragmentMap)) {
+    const fragment = rawFragmentMap[name];
+
+    if (!fragment) {
+      throw new Error(`fragment ${fragment.name.value} does not exist`);
+    }
+
+    const typeCondition = fragment.typeCondition.name.value;
+    const transformed = transformDefinition(fragment, execContext, `type.${typeCondition}`, typeCondition);
+    fragmentMap[name] = transformed;
+  }
+
+  return fragmentMap[name];
+}
+
 /**
  * Return selections with resolved named fragments and directives.
  */
 function getTransformedSelections(definition, path, gqlType, execContext) {
   const {
-    fragmentMap,
     variables,
   } = execContext;
 
@@ -92,7 +112,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
-    const fragment = fragmentMap[sel.name.value];
+    const fragment = getFragment(sel.name.value, execContext);
 
     if (!fragment) {
       throw new Error(`fragment ${fragment.name.value} does not exist`);
@@ -105,20 +125,19 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         ...fragment,
         kind: 'InlineFragment',
       };
-      const transformed = transformDefinition(node, execContext, path, typeCondition);
       const name = getDefinitionName(node);
 
       // Merge existing value.
       if (name in o) {
-        o[name] = mergeDefinitions(o[name], transformed);
+        o[name] = mergeDefinitions(o[name], node);
         return o;
       }
 
-      o[name] = transformed;
+      o[name] = node;
       return o;
     }
 
-    const fragmentSelections = getTransformedSelections(fragment, path, typeCondition, execContext);
+    const fragmentSelections = fragment.selectionSet.selections;
     fragmentSelections.forEach((s) => {
 
       if (variables && !shouldInclude(s, variables)) {
@@ -184,7 +203,8 @@ export default function reduceDocument(document, options = {}) {
     : `type.${mainDefinition.typeCondition.name.value}`;
 
   const execContext = {
-    fragmentMap: createFragmentMap(fragments),
+    rawFragmentMap: createFragmentMap(fragments),
+    fragmentMap: options.fragmentMap || {},
     keepFragments: [],
     variables: options.variables,
     typeGetter: options.typeGetter || (() => null),
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index 42e9cd8ad..87b8e220a 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -9,13 +9,17 @@ import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 export function createGraphQLService(registry, introspectionData) {
   const typeGetter = createTypeGetter(introspectionData);
 
+  // Use shared fragment map.
+  // Attention: Fragment names must be unique otherwise weird things will happen.
+  const fragmentMap = {};
+
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(props, context)
         : documentOrCallback;
-      document = reduceDocument(registry.resolveFragments(document), {typeGetter});
+      document = reduceDocument(registry.resolveFragments(document), {typeGetter, fragmentMap});
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly

From 72123cabe70e6afaa6333227cdcfdd80da2ff22f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:33:38 +0100
Subject: [PATCH 227/344] Rename getDefinitionName to getDefinitionID

---
 client/coral-framework/graphql/reduceDocument.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index fb47daaff..d105cbbea 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,10 +6,10 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
-function getDefinitionName(definition) {
+function getDefinitionID(definition) {
   switch (definition.kind) {
   case 'FragmentSpread':
-    return definition.name.value;
+    return `FragmentSpread_${definition.name.value}`;
   case 'Field':
     return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
   case 'InlineFragment':
@@ -23,7 +23,7 @@ function getDefinitionName(definition) {
  * Merge selections of 2 definitions.
  */
 export function mergeDefinitions(a, b) {
-  const name = getDefinitionName(a);
+  const name = getDefinitionID(a);
 
   if (!!a.selectionSet !== !!b.selectionSet) {
     throw Error(`incompatible field definition for ${name}`);
@@ -46,7 +46,7 @@ export function mergeDefinitions(a, b) {
  */
 export function mergeSelectionSets(a, b) {
   const selectionsMap = [...a.selections, ...b.selections].reduce((o, sel) => {
-    const selName = getDefinitionName(sel);
+    const selName = getDefinitionID(sel);
     if (!(selName in o)) {
       o[selName] = sel;
       return o;
@@ -100,7 +100,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
     }
     if (sel.kind !== 'FragmentSpread') {
       const transformed = transformDefinition(sel, execContext, path, gqlType);
-      const name = getDefinitionName(sel);
+      const name = getDefinitionID(sel);
 
       // Merge existing value.
       if (name in o) {
@@ -125,7 +125,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         ...fragment,
         kind: 'InlineFragment',
       };
-      const name = getDefinitionName(node);
+      const name = getDefinitionID(node);
 
       // Merge existing value.
       if (name in o) {
@@ -146,7 +146,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         return;
       }
 
-      const selName = getDefinitionName(s);
+      const selName = getDefinitionID(s);
       if (!(selName in o)) {
         o[selName] = s;
         return;

From 4c7c852af7dce4f8539212d4d90d7ca30f6f3aab Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:44:01 +0100
Subject: [PATCH 228/344] Only merge definitions with directives when they are
 the same

---
 .../coral-framework/graphql/reduceDocument.js   | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d105cbbea..927379ff2 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,14 +6,27 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
+import {murmur3} from 'murmurhash-js';
+
+function getDirectivesID(directives) {
+  return murmur3(JSON.stringify(directives));
+}
+
+// If two definitions have the same id, they can be merged.
 function getDefinitionID(definition) {
+
+  // Only merge when directives are exactly the same.
+  const trailing = definition.directives.length
+    ? `_${getDirectivesID(definition.directives)}`
+    : '';
+
   switch (definition.kind) {
   case 'FragmentSpread':
     return `FragmentSpread_${definition.name.value}`;
   case 'Field':
-    return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
+    return `Field_${definition.alias ? definition.alias.value : definition.name.value}${trailing}`;
   case 'InlineFragment':
-    return `InlineFragment_${definition.typeCondition.name.value}`;
+    return `InlineFragment_${definition.typeCondition.name.value}${trailing}`;
   default:
     throw new Error(`unknown definition kind ${definition.kind}`);
   }

From 015e3d3ed9fbb8ec1866c136103034b5ef5ff2af Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:47:54 +0100
Subject: [PATCH 229/344] Tiny refactor

---
 client/coral-framework/graphql/reduceDocument.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index 927379ff2..a713f8078 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -76,7 +76,7 @@ export function mergeSelectionSets(a, b) {
   };
 }
 
-function getFragment(name, execContext) {
+function getFragmentOrDie(name, execContext) {
   const {
     rawFragmentMap,
     fragmentMap,
@@ -125,14 +125,10 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
-    const fragment = getFragment(sel.name.value, execContext);
-
-    if (!fragment) {
-      throw new Error(`fragment ${fragment.name.value} does not exist`);
-    }
-
+    const fragment = getFragmentOrDie(sel.name.value, execContext);
     const typeCondition = fragment.typeCondition.name.value;
 
+    // Turn NamedFragment into an InlineFragment.
     if (gqlType !== typeCondition) {
       const node = {
         ...fragment,
@@ -150,6 +146,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
+    // Merge NamedFragment directly into selections.
     const fragmentSelections = fragment.selectionSet.selections;
     fragmentSelections.forEach((s) => {
 

From 835d30d362408fcc90bc44579db838870db5deb6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:54:45 +0100
Subject: [PATCH 230/344] Put document optimizations behind a option

---
 client/coral-framework/services/bootstrap.js |  5 ++++-
 client/coral-framework/services/graphql.js   | 23 ++++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 4fcc83a52..5e6173355 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -124,7 +124,10 @@ export async function createContext({
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
-    introspectionData,
+    {
+      introspectionData,
+      optimize: true,
+    },
   );
   if (!notification) {
 
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index 87b8e220a..859d57d8a 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -2,16 +2,21 @@ import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
- * createHistory returns the history service for react router
+ * createGraphQLService
  * @param  {string}  basename  base path of the url
  * @return {Object}  histor service
  */
-export function createGraphQLService(registry, introspectionData) {
-  const typeGetter = createTypeGetter(introspectionData);
+export function createGraphQLService(registry, {
+  introspectionData,
+  optimize = false,
+}) {
+  const reduceOptions = {
+    typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
 
-  // Use shared fragment map.
-  // Attention: Fragment names must be unique otherwise weird things will happen.
-  const fragmentMap = {};
+    // Use shared fragment map.
+    // Attention: Fragment names must be unique otherwise weird things will happen.
+    fragmentMap: {},
+  };
 
   return {
     registry,
@@ -19,7 +24,11 @@ export function createGraphQLService(registry, introspectionData) {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(props, context)
         : documentOrCallback;
-      document = reduceDocument(registry.resolveFragments(document), {typeGetter, fragmentMap});
+      document = registry.resolveFragments(document);
+
+      if (optimize) {
+        document = reduceDocument(document, reduceOptions);
+      }
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly

From 612d2596f9e907549eea0e0f22c1bd9740cca556 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:02:45 +0100
Subject: [PATCH 231/344] Turn NamedFragments with directives always into
 InlineFragments

---
 client/coral-framework/graphql/reduceDocument.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index a713f8078..d3d5990bf 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -129,7 +129,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
     const typeCondition = fragment.typeCondition.name.value;
 
     // Turn NamedFragment into an InlineFragment.
-    if (gqlType !== typeCondition) {
+    if (gqlType !== typeCondition || fragment.directives.length) {
       const node = {
         ...fragment,
         kind: 'InlineFragment',
@@ -215,7 +215,6 @@ export default function reduceDocument(document, options = {}) {
   const execContext = {
     rawFragmentMap: createFragmentMap(fragments),
     fragmentMap: options.fragmentMap || {},
-    keepFragments: [],
     variables: options.variables,
     typeGetter: options.typeGetter || (() => null),
   };

From c2b488fa98bb9b98f12166523c0fdc8a6321116e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:11:38 +0100
Subject: [PATCH 232/344] Don't use murmurhash

---
 .../coral-framework/graphql/reduceDocument.js | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d3d5990bf..12e0954d7 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,10 +6,24 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
-import {murmur3} from 'murmurhash-js';
-
 function getDirectivesID(directives) {
-  return murmur3(JSON.stringify(directives));
+  let id = '';
+  directives.forEach((directive) => {
+    id += `@${directive.name.value}(`;
+    let first = true;
+    directive.arguments.forEach((arg) => {
+      if (!first) {
+        id += ',';
+      }
+      first = false;
+      const value = arg.value.kind === 'Variable'
+        ? `$${arg.value.name.value}`
+        : arg.value.value;
+      id += `${arg.name.value}:${value}`;
+    });
+    id += ')';
+  });
+  return id;
 }
 
 // If two definitions have the same id, they can be merged.

From 099186d030a45e5e870f3becfb4d688fe9f8f4a8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:56:53 +0100
Subject: [PATCH 233/344] Make polling interval longer

---
 client/coral-admin/src/containers/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/Header.js b/client/coral-admin/src/containers/Header.js
index a5c1f0afc..c107d58f9 100644
--- a/client/coral-admin/src/containers/Header.js
+++ b/client/coral-admin/src/containers/Header.js
@@ -19,6 +19,6 @@ export default withQuery(gql`
   }
 `, {
     options: {
-      pollInterval: 5000
+      pollInterval: 10000
     }
   })(Header);

From ce9ee0a5b0428c5f6da15639243d8e2fbb07389a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:28:09 -0300
Subject: [PATCH 234/344] Adding styles for mob devs

---
 .../src/tabs/stream/components/Comment.css    | 22 +++++++++++++++++--
 client/coral-embed-stream/style/default.css   |  1 -
 .../client/components/SubscriberBadge.css     |  1 -
 postcss.config.js                             |  8 +++----
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index f5bead3b8..d104b4731 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -152,9 +152,27 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
   margin: 10px 0;
+  flex-direction: column;
+  align-items: flex-start;
+
+  > * {
+    margin: 3px 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  @media (min-width: 480px) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > div {
+      margin: 0px 5px;
+    }
+  }
 }
 
 .content {
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 63f1edf67..451b27289 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,7 +190,6 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
index 42edfd8ff..e6c8d9161 100644
--- a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
+++ b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
@@ -2,7 +2,6 @@
   background-color: #616161;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/postcss.config.js b/postcss.config.js
index 79fae36cb..e76e674d2 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
-    require('postcss-smart-import')({ /* ...options */ }),
-    require('precss')({ /* ...options */ }),
-    require('autoprefixer')({ /* ...options */ })
-  ]
+    require('postcss-smart-import'),
+    require('precss'),
+    require('autoprefixer'),
+  ],
 };

From 67a4d63a23b231da6ae821fb23a0475e1c2277da Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:31:05 -0300
Subject: [PATCH 235/344] Good margin

---
 .../src/tabs/stream/components/Comment.css                | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d104b4731..d1a118c77 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -158,10 +158,6 @@
 
   > * {
     margin: 3px 0;
-
-    &:first-child {
-      margin-left: 0;
-    }
   }
 
   @media (min-width: 480px) {
@@ -169,8 +165,8 @@
     align-items: center;
     flex-direction: row;
 
-    > div {
-      margin: 0px 5px;
+    > * {
+      margin: 0 3px 0 0;
     }
   }
 }

From 7731ec42de6511c4b2655192b1d3dc3506f413df Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 23:43:19 -0300
Subject: [PATCH 236/344] css tag label

---
 client/coral-embed-stream/style/default.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 451b27289..154bfc868 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,10 +190,9 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
-  font-weight: bold;
+  padding: 2px 6px;
 }
 
 /* Comment Action Styles */

From 6da4439b9421591375c15597f947ee4f7b7806bd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 2 Dec 2017 00:20:59 -0300
Subject: [PATCH 237/344] Adding header container

---
 .../src/tabs/stream/components/Comment.css    | 10 +++-
 .../src/tabs/stream/components/Comment.js     | 60 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d1a118c77..8bdeeaaa4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -119,6 +119,8 @@
 
 .commentInfoBar {
   margin-left: auto;
+  flex: 1;
+  text-align: right;
 }
 
 @keyframes enter {
@@ -131,9 +133,6 @@
   animation: enter 1000ms;
 }
 
-.commentContainer {
-}
-
 .commentAvatar {
   max-width: 60px;
 }
@@ -153,6 +152,11 @@
 
 .header {
   margin: 10px 0;
+  display: flex;
+}
+
+.headerContainer {
+  flex: 1;
   flex-direction: column;
   align-items: flex-start;
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 3da59afdc..d66bebd75 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -452,39 +452,41 @@ export default class Comment extends React.Component {
           <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
 
-              <Slot
-                className={cn(styles.username, 'talk-stream-comment-user-name')}
-                fill="commentAuthorName"
-                defaultComponent={CommentAuthorName}
-                queryData={queryData}
-                {...slotProps}
-              />
-
-              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-              <Slot
-                className={cn('talk-stream-comment-author-tags')}
-                fill="commentAuthorTags"
-                queryData={queryData}
-                {...slotProps}
-                inline
-              />
-
-              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <div className={cn(styles.headerContainer, 'talk-stream-comment-header-container')}>
                 <Slot
-                  fill="commentTimestamp"
-                  defaultComponent={CommentTimestamp}
-                  className={'talk-stream-comment-published-date'}
-                  created_at={comment.created_at}
+                  className={cn(styles.username, 'talk-stream-comment-user-name')}
+                  fill="commentAuthorName"
+                  defaultComponent={CommentAuthorName}
                   queryData={queryData}
                   {...slotProps}
                 />
-                {
-                  (comment.editing && comment.editing.edited)
-                    ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                    : null
-                }
-              </span>
+
+                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+                <Slot
+                  className={cn('talk-stream-comment-author-tags')}
+                  fill="commentAuthorTags"
+                  queryData={queryData}
+                  {...slotProps}
+                  inline
+                />
+
+                <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                  <Slot
+                    fill="commentTimestamp"
+                    defaultComponent={CommentTimestamp}
+                    className={'talk-stream-comment-published-date'}
+                    created_at={comment.created_at}
+                    queryData={queryData}
+                    {...slotProps}
+                  />
+                  {
+                    (comment.editing && comment.editing.edited)
+                      ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                      : null
+                  }
+                </span>
+              </div>
 
               <Slot
                 className={styles.commentInfoBar}

From 8b71175c4658df5c24fb95b59f83928698c1f540 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 09:27:56 -0700
Subject: [PATCH 238/344] adjusted logic flow for comment flags

---
 graph/mutators/action.js | 107 ++++++++++++++++++++++++++++-----------
 1 file changed, 77 insertions(+), 30 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 93806ced9..1ef9014a8 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,28 +1,72 @@
-const ActionsService = require('../../services/actions');
-const UsersService = require('../../services/users');
 const errors = require('../../errors');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
 
+/**
+ * getActionItem will return the item that is associated with the given action.
+ * If it does not exist, it will throw an error.
+ *
+ * @param {Object} ctx    the graphql context for the request
+ * @param {Object} action the action being performed
+ * @return {Promise}      resolves to the referenced item
+ */
+const getActionItem = async (ctx, {item_id, item_type}) => {
+  const {
+    loaders: {
+      Comments,
+      Users,
+    },
+  } = ctx;
+
+  if (item_type === 'COMMENTS') {
+    const comment = await Comments.get.load(item_id);
+    if (!comment) {
+      throw errors.ErrNotFound;
+    }
+
+    return comment;
+  } else if (item_type === 'USERS') {
+    const user = await Users.getByID.load(item_id);
+    if (!user) {
+      throw errors.ErrNotFound;
+    }
+
+    return user;
+  }
+};
+
 /**
  * Creates an action on a item. If the item is a user flag, sets the user's status to
  * pending.
- * @param  {Object} user        the user performing the request
- * @param  {String} item_id     id of the item to add the action to
- * @param  {String} item_type   type of the item
- * @param  {String} action_type type of the action
- * @return {Promise}            resolves to the action created
+ *
+ * @param  {Object} ctx    the graphql context for the request
+ * @param  {Object} action the action being created
+ * @return {Promise}       resolves to the action created
  */
-const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id, item_type, action_type, group_id, metadata = {}}) => {
+const createAction = async (ctx, {item_id, item_type, action_type, group_id, metadata = {}}) => {
+  const {
+    user = {},
+    pubsub,
+    connectors: {
+      services: {
+        Actions,
+      },
+    },
+  } = ctx;
 
-  let comment;
-  if (item_type === 'COMMENTS') {
-    comment = await Comments.get.load(item_id);
-    if (!comment) {
-      throw new Error('Comment not found');
+  // Gets the item referenced by the action.
+  const item = await getActionItem(ctx, {item_id, item_type});
+
+  if (action_type === 'FLAG' && item_type === 'USERS') {
+
+    // The item is a user, and this is a flag. Check to see if they are staff,
+    // if they are, don't permit the flag.
+    if (item.isStaff()) {
+      throw errors.ErrNotAuthorized;
     }
   }
 
-  let action = await ActionsService.create({
+  // Create the action itself.
+  let action = await Actions.create({
     item_id,
     item_type,
     user_id: user.id,
@@ -31,17 +75,11 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
     metadata
   });
 
-  if (item_type === 'USERS' && action_type === 'FLAG') {
+  if (action_type === 'FLAG' && item_type === 'COMMENTS') {
 
-    // Set the user as pending if it was a user flag and user has no Admin, Staff or Moderation roles
-    let user = await UsersService.findById(item_id);
-    if(!user.isStaff()){
-      await UsersService.setStatus(item_id, 'PENDING');
-    }
-  }
-
-  if (comment) {
-    pubsub.publish('commentFlagged', comment);
+    // The item is a comment, and this is a flag. Push that the comment was
+    // flagged, don't wait for it to finish.
+    pubsub.publish('commentFlagged', item);
   }
 
   return action;
@@ -53,16 +91,25 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
  * @param  {String} id   the id of the action to delete
  * @return {Promise}     resolves to the deleted action, or null if not found.
  */
-const deleteAction = ({user}, {id}) => {
-  return ActionsService.delete({id, user_id: user.id});
+const deleteAction = (ctx, {id}) => {
+  const {
+    user,
+    connectors: {
+      services: {
+        Actions,
+      },
+    },
+  } = ctx;
+
+  return Actions.delete({id, user_id: user.id});
 };
 
-module.exports = (context) => {
-  if (context.user && context.user.can(CREATE_ACTION, DELETE_ACTION)) {
+module.exports = (ctx) => {
+  if (ctx.user && ctx.user.can(CREATE_ACTION, DELETE_ACTION)) {
     return {
       Action: {
-        create: (action) => createAction(context, action),
-        delete: (action) => deleteAction(context, action)
+        create: (action) => createAction(ctx, action),
+        delete: (action) => deleteAction(ctx, action)
       }
     };
   }

From fdf11fa2778e4d683b58d4e09702a0144de42ac1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 13:42:22 -0300
Subject: [PATCH 239/344] Adding extra container and styling

---
 .../src/tabs/stream/components/Comment.css     | 18 +++++++++++-------
 .../src/tabs/stream/components/Comment.js      | 18 ++++++++++--------
 client/coral-embed-stream/style/default.css    |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index 8bdeeaaa4..15d42bef0 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -160,18 +160,22 @@
   flex-direction: column;
   align-items: flex-start;
 
-  > * {
-    margin: 3px 0;
-  }
-
   @media (min-width: 480px) {
     display: flex;
     align-items: center;
     flex-direction: row;
+  }
+}
 
-    > * {
-      margin: 0 3px 0 0;
-    }
+.tagsContainer {
+  display: flex;
+}
+
+.tagsContainer > * {
+  margin: 3px;
+
+  &:first-child {
+    margin-left: 0px;
   }
 }
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index d66bebd75..ba14e3c7f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -461,15 +461,17 @@ export default class Comment extends React.Component {
                   {...slotProps}
                 />
 
-                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                  {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-                <Slot
-                  className={cn('talk-stream-comment-author-tags')}
-                  fill="commentAuthorTags"
-                  queryData={queryData}
-                  {...slotProps}
-                  inline
-                />
+                  <Slot
+                    className={cn(styles.commentAuthorTagsSlot, 'talk-stream-comment-author-tags')}
+                    fill="commentAuthorTags"
+                    queryData={queryData}
+                    {...slotProps}
+                    inline
+                  />
+                </div>
 
                 <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
                   <Slot
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 154bfc868..a04ee6f05 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -192,7 +192,7 @@ body {
   display: inline-block;
   border-radius: 2px;
   font-size: 12px;
-  padding: 2px 6px;
+  padding: 5px 6px;
 }
 
 /* Comment Action Styles */

From 0640be2a7739dc192d35ce209f81fe26cc01ef17 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 15:00:43 -0300
Subject: [PATCH 240/344] Timestamp no break

---
 client/coral-framework/components/CommentTimestamp.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-framework/components/CommentTimestamp.css b/client/coral-framework/components/CommentTimestamp.css
index a4620902c..0c54019ff 100644
--- a/client/coral-framework/components/CommentTimestamp.css
+++ b/client/coral-framework/components/CommentTimestamp.css
@@ -2,5 +2,6 @@
   display: inline-block;
   color: #696969;
   font-size: 12px;
+  white-space: nowrap;
 }
 

From 87ef0f1cb9d235c9db610ea5c93eacd706c3b3a4 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 12:17:39 -0700
Subject: [PATCH 241/344] Adjusted flag beheviour for staff

---
 config.js                                   |  7 +++++-
 docs/_docs/02-02-advanced-configuration.md  |  5 ++++
 graph/mutators/action.js                    | 17 ++++++++++----
 graph/mutators/comment.js                   | 16 ++++++++++---
 plugin-api/beta/server/getReactionConfig.js | 26 +++++++++++----------
 5 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/config.js b/config.js
index 4601683c1..3e167b294 100644
--- a/config.js
+++ b/config.js
@@ -175,7 +175,12 @@ const CONFIG = {
   DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE',
 
   // TRUST_THRESHOLDS defines the thresholds used for automoderation.
-  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1'
+  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1',
+
+  // IGNORE_FLAGS_AGAINST_STAFF disables staff members from entering the
+  // reported queue from comments after this was enabled and from reports
+  // against the staff members user account.
+  IGNORE_FLAGS_AGAINST_STAFF: process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF === 'TRUE',
 };
 
 //==============================================================================
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 74099258d..94a6b402d 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -456,3 +456,8 @@ Could be read as:
   added back to the queue.
 - At the moment of writing, behavior is not attached to the flagging
   reliability, but it is recorded.
+
+## TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF
+
+When `TRUE`, staff members will have their accounts and comments moderated the
+same as any other user in the system. (Default `FALSE`)
\ No newline at end of file
diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 1ef9014a8..29a6e67af 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,5 +1,8 @@
 const errors = require('../../errors');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
+const {
+  IGNORE_FLAGS_AGAINST_STAFF,
+} = require('../../config');
 
 /**
  * getActionItem will return the item that is associated with the given action.
@@ -56,12 +59,16 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
   // Gets the item referenced by the action.
   const item = await getActionItem(ctx, {item_id, item_type});
 
-  if (action_type === 'FLAG' && item_type === 'USERS') {
+  // If we are ignoring flags against staff, ensure that the target isn't a
+  // staff member.
+  if (IGNORE_FLAGS_AGAINST_STAFF) {
+    if (action_type === 'FLAG') {
 
-    // The item is a user, and this is a flag. Check to see if they are staff,
-    // if they are, don't permit the flag.
-    if (item.isStaff()) {
-      throw errors.ErrNotAuthorized;
+      // If the item is a user, and this is a flag. Check to see if they are
+      // staff, if they are, don't permit the flag.
+      if (item_type === 'USERS' && item.isStaff()) {
+        return null;
+      }
     }
   }
 
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index de3345257..bd8ab18fd 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -19,7 +19,8 @@ const {
 } = require('../../perms/constants');
 
 const {
-  DISABLE_AUTOFLAG_SUSPECT_WORDS
+  DISABLE_AUTOFLAG_SUSPECT_WORDS,
+  IGNORE_FLAGS_AGAINST_STAFF,
 } = require('../../config');
 
 const debug = require('debug')('talk:graph:mutators:tags');
@@ -292,7 +293,7 @@ const moderationPhases = [
     }
   },
 
-  // This phase checks to see if the comment's length exeeds maximum.
+  // This phase checks to see if the comment's length exceeds maximum.
   (context, comment, {assetSettings: {charCountEnable, charCount}}) => {
 
     // Reject if the comment is too long
@@ -313,6 +314,15 @@ const moderationPhases = [
     }
   },
 
+  // If a given user is a staff member, always approve their comment.
+  (context) => {
+    if (IGNORE_FLAGS_AGAINST_STAFF && context.user && context.user.isStaff()) {
+      return {
+        status: 'ACCEPTED',
+      };
+    }
+  },
+
   // This phase checks the comment if it has any links in it if the check is
   // enabled.
   (context, comment, {assetSettings: {premodLinksEnable}}) => {
@@ -362,7 +372,7 @@ const moderationPhases = [
     }
   },
 
-  // This phase checks to see if the comment was already perscribed a status.
+  // This phase checks to see if the comment was already prescribed a status.
   (context, comment) => {
 
     // If the status was already defined, don't redefine it. It's only defined
diff --git a/plugin-api/beta/server/getReactionConfig.js b/plugin-api/beta/server/getReactionConfig.js
index 481990c16..2fffb4d1c 100644
--- a/plugin-api/beta/server/getReactionConfig.js
+++ b/plugin-api/beta/server/getReactionConfig.js
@@ -157,10 +157,22 @@ function getReactionConfig(reaction) {
       RootMutation: {
         [`create${Reaction}Action`]: async (_, {input: {item_id}}, {mutators: {Action}, pubsub, loaders: {Comments}}) => {
           const comment = await Comments.get.load(item_id);
+          if (!comment) {
+            throw errors.ErrNotFound;
+          }
 
-          let action;
           try {
-            action = await Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION});
+            const action = await Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION});
+
+            if (pubsub) {
+
+              // The comment is needed to allow better filtering e.g. by asset_id.
+              pubsub.publish(`${reaction}ActionCreated`, {action, comment});
+            }
+
+            return {
+              [reaction]: action,
+            };
           } catch (err) {
             if (err instanceof errors.ErrAlreadyExists) {
               return err.metadata.existing;
@@ -168,16 +180,6 @@ function getReactionConfig(reaction) {
 
             throw err;
           }
-
-          if (pubsub) {
-
-            // The comment is needed to allow better filtering e.g. by asset_id.
-            pubsub.publish(`${reaction}ActionCreated`, {action, comment});
-          }
-
-          return {
-            [reaction]: action,
-          };
         },
         [`delete${Reaction}Action`]: async (_, {input: {id}}, {mutators: {Action}, pubsub, loaders: {Comments}})  => {
           const action = await Action.delete({id});

From 3b4e69f06e9d84be53c08c96c09107b5646537d1 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 14:06:32 -0700
Subject: [PATCH 242/344] fixed based on e2e finding a bug!

---
 graph/mutators/action.js | 15 +++++++++++----
 services/users.js        | 40 ++++++++++++++++++++++++++++------------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 29a6e67af..06417844b 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,4 +1,5 @@
 const errors = require('../../errors');
+const UsersService = require('../../services/users');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
 const {
   IGNORE_FLAGS_AGAINST_STAFF,
@@ -82,11 +83,17 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
     metadata
   });
 
-  if (action_type === 'FLAG' && item_type === 'COMMENTS') {
+  if (action_type === 'FLAG') {
+    if (item_type === 'USERS') {
 
-    // The item is a comment, and this is a flag. Push that the comment was
-    // flagged, don't wait for it to finish.
-    pubsub.publish('commentFlagged', item);
+      // Set the user's status as pending, as we need to review it.
+      await UsersService.setStatus(item_id, 'PENDING');
+    } else if (item_type === 'COMMENTS') {
+
+      // The item is a comment, and this is a flag. Push that the comment was
+      // flagged, don't wait for it to finish.
+      pubsub.publish('commentFlagged', item);
+    }
   }
 
   return action;
diff --git a/services/users.js b/services/users.js
index e0f7d1599..fbaf89609 100644
--- a/services/users.js
+++ b/services/users.js
@@ -395,18 +395,34 @@ module.exports = class UsersService {
       throw new Error(`status ${status} is not supported`);
     }
 
-    // TODO: current updating status behavior is weird.
-    // once a user has been `APPROVED` its status cannot be
-    // changed anymore.
-    const user = await UserModel.findOneAndUpdate({
-      id,
-      status: {
-        $ne: 'APPROVED'
-      }
-    }, {
+    // Compose the query.
+    const query = {id};
+
+    // Insert extra validations into the query.
+    switch (status) {
+    case 'ACTIVE':
+    case 'BANNED':
+    case 'APPROVED':
+
+      // A user cannot become change their status from what it is already.
+      query.status = {
+        $ne: status,
+      };
+      break;
+    case 'PENDING':
+
+      // A user cannot become pending if they are already approved, pending, or
+      // banned
+      query.status = {
+        $nin: [status, 'APPROVED', 'BANNED'],
+      };
+      break;
+    }
+
+    const user = await UserModel.findOneAndUpdate(query, {
       $set: {
-        status
-      }
+        status,
+      },
     }, {
       new: true,
     });
@@ -426,8 +442,8 @@ module.exports = class UsersService {
           };
         await MailerService.sendSimple(options);
       }
-
     }
+
     return user;
   }
 

From 2061a7b97d7538d9c4a378784030c55b7baf3cc5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:21:40 +0100
Subject: [PATCH 243/344] Use @coralproject/graphql-anywhere-optimized

---
 package.json      | 2 +-
 webpack.config.js | 2 +-
 yarn.lock         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9cdc2a03d..5ac69b6e6 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
+    "@coralproject/graphql-anywhere-optimized": "^0.1.0",
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
     "apollo-utilities": "^1.0.3",
@@ -106,7 +107,6 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-anywhere-optimized": "git+https://git@github.com/cvle/graphql-anywhere#optimized",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index 8e510a3f0..60a49b6eb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
-      'graphql-anywhere': 'graphql-anywhere-optimized',
+      'graphql-anywhere': '@coralproject/graphql-anywhere-optimized',
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index 25de6dd3a..78ded3707 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,6 +11,10 @@
     eslint-plugin-promise "^3.3.1"
     eslint-plugin-react "^7.3.0"
 
+"@coralproject/graphql-anywhere-optimized@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.0.tgz#3456f16f790d8593b0ca4355910578ab1c6edab5"
+
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@kadira/storybook-deployer/-/storybook-deployer-1.2.0.tgz#1708f5cb37fa08ab4173b1bd99df6f4717dfae12"
@@ -3511,10 +3515,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-"graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
-  version "3.1.0"
-  resolved "git+https://git@github.com/cvle/graphql-anywhere#3f5d9e5c619ac4c4065af83abd7f76b84fb81e7c"
-
 graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"

From 0d91396b1ced03b9b8cbe149760c47cb7d45e0b0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:45:23 +0100
Subject: [PATCH 244/344] Remove death star button

---
 .../src/tabs/stream/components/Stream.js      | 25 +------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 2bd131cb0..e37b91ba6 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -13,7 +13,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from '../../../components/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Tab, TabCount, TabPane, Button} from 'coral-ui';
+import {Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
@@ -207,23 +207,6 @@ class Stream extends React.Component {
     );
   }
 
-  launchDeathStar = () => {
-    let i = 100;
-    const launch = () => {
-      setTimeout(() => {
-        this.props.postComment({
-          asset_id: this.props.asset.id,
-          body: 'death is certain',
-        });
-        i--;
-        if (i > 0) {
-          launch();
-        }
-      }, 100);
-    };
-    launch();
-  }
-
   render() {
     const {
       data,
@@ -262,12 +245,6 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        <Button
-          cStyle="darkGrey"
-          onClick={this.launchDeathStar}
-        >
-          Launch Death Star
-        </Button>
         {open
           ? <div id="commentBox">
             <InfoBox

From a79dd76f4b4449b54a70c8c37d3c459850c22cec Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:46:33 +0100
Subject: [PATCH 245/344] Use graphql document optimizations only in production

---
 client/coral-framework/services/bootstrap.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 5e6173355..3ef6629c1 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -126,7 +126,7 @@ export async function createContext({
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
     {
       introspectionData,
-      optimize: true,
+      optimize: process.env.NODE_ENV === 'production',
     },
   );
   if (!notification) {

From 73f24fd75b85426e1db1047a18d701ca77230083 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 5 Dec 2017 17:16:39 +0000
Subject: [PATCH 246/344] Update CSS classname

---
 client/talk-plugin-flags/components/FlagButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/talk-plugin-flags/components/FlagButton.js b/client/talk-plugin-flags/components/FlagButton.js
index 18db85c03..22a9b1161 100644
--- a/client/talk-plugin-flags/components/FlagButton.js
+++ b/client/talk-plugin-flags/components/FlagButton.js
@@ -207,7 +207,7 @@ export default class FlagButton extends Component {
                     }
                     {
                       this.state.reason && <div>
-                        <label htmlFor={'message'} className={`${name}-popup-radio-label`}>
+                        <label htmlFor={'message'} className={`${name}-popup-textarea-label`}>
                           {t('flag_reason')}
                         </label><br/>
                         <textarea

From d7302e4b3c31907b07c94f58bbf233bf70894bd4 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 5 Dec 2017 11:17:44 -0700
Subject: [PATCH 247/344] added support for deep route caching, settings cache,
 template optim

---
 app.js                                      | 12 ----
 bin/cli-serve                               |  6 +-
 config.js                                   |  4 ++
 graph/connectors.js                         |  2 -
 middleware/staticTemplate.js                | 45 +++++++++++++++
 models/comment.js                           | 52 +++++++++++++++++-
 plugin-api/beta/server/getReactionConfig.js | 14 +++++
 routes/admin/index.js                       |  3 +-
 routes/embed/index.js                       |  5 +-
 routes/index.js                             | 46 ++++++++++------
 routes/static.js                            | 13 -----
 serve.js                                    |  8 +--
 services/cache.js                           | 10 ++--
 services/hcache.js                          | 61 +++++++++++++++++++++
 services/locals.js                          | 20 -------
 services/mailer.js                          |  4 +-
 services/mongoose.js                        |  8 ++-
 services/settings.js                        | 43 +++++++++++----
 views/embed/stream.ejs                      | 13 ++---
 19 files changed, 269 insertions(+), 100 deletions(-)
 create mode 100644 middleware/staticTemplate.js
 delete mode 100644 routes/static.js
 create mode 100644 services/hcache.js
 delete mode 100644 services/locals.js

diff --git a/app.js b/app.js
index 2989ae00a..b65126aa0 100644
--- a/app.js
+++ b/app.js
@@ -1,14 +1,11 @@
 const express = require('express');
-const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
 const compression = require('compression');
-const cookieParser = require('cookie-parser');
 const {HELMET_CONFIGURATION} = require('./config');
 const {MOUNT_PATH} = require('./url');
-const {applyLocals} = require('./services/locals');
 const routes = require('./routes');
 const debug = require('debug')('talk:app');
 
@@ -36,12 +33,6 @@ app.use(helmet(merge(HELMET_CONFIGURATION, {
 // Compress the responses if appropriate.
 app.use(compression());
 
-// Parse the cookies on the request.
-app.use(cookieParser());
-
-// Parse the body json if it's there.
-app.use(bodyParser.json());
-
 //==============================================================================
 // VIEW CONFIGURATION
 //==============================================================================
@@ -53,9 +44,6 @@ app.set('view engine', 'ejs');
 // ROUTES
 //==============================================================================
 
-// Add the locals to the app renderer.
-applyLocals(app.locals);
-
 debug(`mounting routes on the ${MOUNT_PATH} path`);
 
 // Actually apply the routes.
diff --git a/bin/cli-serve b/bin/cli-serve
index 4324cac92..723558651 100755
--- a/bin/cli-serve
+++ b/bin/cli-serve
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 const program = require('./commander');
+const util = require('./util');
 const serve = require('../serve');
 
 //==============================================================================
@@ -13,5 +14,8 @@ program
   .parse(process.argv);
 
 // Start serving.
-serve({jobs: program.jobs, websockets: program.websockets});
+serve({jobs: program.jobs, websockets: program.websockets}).catch((err) => {
+  console.error(err);
+  util.shutdown(1);
+});
 
diff --git a/config.js b/config.js
index 3e167b294..b5b55a5a5 100644
--- a/config.js
+++ b/config.js
@@ -20,6 +20,10 @@ const CONFIG = {
   // WEBPACK indicates when webpack is currently building.
   WEBPACK: process.env.WEBPACK === 'TRUE',
 
+  // When TRUE, it ensures that database indexes created in core will not add
+  // indexes.
+  CREATE_MONGO_INDEXES: process.env.DISABLE_CREATE_MONGO_INDEXES !== 'TRUE',
+
   //------------------------------------------------------------------------------
   // JWT based configuration
   //------------------------------------------------------------------------------
diff --git a/graph/connectors.js b/graph/connectors.js
index ecaa79550..5f09af06f 100644
--- a/graph/connectors.js
+++ b/graph/connectors.js
@@ -19,7 +19,6 @@ const Jwt = require('../services/jwt');
 const Karma = require('../services/karma');
 const Kue = require('../services/kue');
 const Limit = require('../services/limit');
-const Locals = require('../services/locals');
 const Mailer = require('../services/mailer');
 const Metadata = require('../services/metadata');
 const Migration = require('../services/migration');
@@ -59,7 +58,6 @@ const connectors = {
     Karma,
     Kue,
     Limit,
-    Locals,
     Mailer,
     Metadata,
     Migration,
diff --git a/middleware/staticTemplate.js b/middleware/staticTemplate.js
new file mode 100644
index 000000000..823ab6624
--- /dev/null
+++ b/middleware/staticTemplate.js
@@ -0,0 +1,45 @@
+const {
+  BASE_URL,
+  BASE_PATH,
+  MOUNT_PATH,
+  STATIC_URL,
+} = require('../url');
+
+const {
+  RECAPTCHA_PUBLIC,
+  WEBSOCKET_LIVE_URI,
+} = require('../config');
+
+// TEMPLATE_LOCALS stores the static data that is provided as a `text/json` on
+// to the client from the template.
+const TEMPLATE_LOCALS = {
+  BASE_URL,
+  BASE_PATH,
+  MOUNT_PATH,
+  STATIC_URL,
+  data: {
+    TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
+    LIVE_URI: WEBSOCKET_LIVE_URI,
+    STATIC_URL,
+  },
+};
+
+// attachLocals will attach the locals to the response only.
+const attachLocals = (locals) => {
+  for (const key in TEMPLATE_LOCALS) {
+    const value = TEMPLATE_LOCALS[key];
+
+    locals[key] = value;
+  }
+};
+
+module.exports = (req, res, next) => {
+
+  // Always attach the locals.
+  attachLocals(res.locals);
+
+  // Forward the request.
+  next();
+};
+
+module.exports.attachLocals = attachLocals;
diff --git a/models/comment.js b/models/comment.js
index 73aa22d0b..bc4cecd5d 100644
--- a/models/comment.js
+++ b/models/comment.js
@@ -108,10 +108,60 @@ CommentSchema.index({
   background: false
 });
 
+CommentSchema.index({
+  'status': 1,
+  'created_at': 1,
+}, {
+  background: true,
+});
+
+CommentSchema.index({
+  'status': 1,
+  'created_at': 1,
+  'asset_id': 1,
+}, {
+  background: true,
+});
+
 // Add an index that is optimized for sorting based on the action count data.
 CommentSchema.index({
   'created_at': 1,
-  'action_counts': 1,
+  'action_counts.flag': 1,
+}, {
+  background: true,
+});
+
+CommentSchema.index({
+  'created_at': 1,
+  'action_counts.flag': 1,
+  'status': 1,
+}, {
+  background: true,
+});
+
+// Add an index that is optimized for finding flagged comments.
+CommentSchema.index({
+  'asset_id': 1,
+  'created_at': 1,
+  'action_counts.flag': 1,
+}, {
+  background: true,
+});
+
+// Add an index for the reply sort.
+CommentSchema.index({
+  'asset_id': 1,
+  'created_at': -1,
+  'reply_count': -1,
+}, {
+  background: true,
+});
+
+// Optimize for tag searches/counts.
+CommentSchema.index({
+  'asset_id': 1,
+  'tags.tag.name': 1,
+  'status': 1,
 }, {
   background: true,
 });
diff --git a/plugin-api/beta/server/getReactionConfig.js b/plugin-api/beta/server/getReactionConfig.js
index 2fffb4d1c..f4302050c 100644
--- a/plugin-api/beta/server/getReactionConfig.js
+++ b/plugin-api/beta/server/getReactionConfig.js
@@ -1,10 +1,24 @@
 const {SEARCH_OTHER_USERS} = require('../../../perms/constants');
 const errors = require('../../../errors');
 const pluralize = require('pluralize');
+const CommentModel = require('../../../models/comment');
+const sc = require('snake-case');
+const {CREATE_MONGO_INDEXES} = require('../../../config');
 
 function getReactionConfig(reaction) {
   reaction = reaction.toLowerCase();
 
+  if (CREATE_MONGO_INDEXES) {
+
+    // Create the index on the comment model based on the reaction config.
+    CommentModel.collection.createIndex({
+      created_at: 1,
+      [`action_counts.${sc(reaction)}`]: 1
+    }, {
+      background: true,
+    });
+  }
+
   const reactionPlural = pluralize(reaction);
   const Reaction = reaction.charAt(0).toUpperCase() + reaction.slice(1);
   const REACTION = reaction.toUpperCase();
diff --git a/routes/admin/index.js b/routes/admin/index.js
index b3872d626..d6cb481de 100644
--- a/routes/admin/index.js
+++ b/routes/admin/index.js
@@ -1,6 +1,5 @@
 const express = require('express');
 const router = express.Router();
-const {data} = require('../static');
 
 // Get /email-confirmation expects a signed JWT in the hash
 router.get('/confirm-email', (req, res) => {
@@ -17,7 +16,7 @@ router.get('/password-reset', (req, res) => {
 });
 
 router.get('*', (req, res) => {
-  res.render('admin', {data});
+  res.render('admin');
 });
 
 module.exports = router;
diff --git a/routes/embed/index.js b/routes/embed/index.js
index c360c1f76..852d9afa7 100644
--- a/routes/embed/index.js
+++ b/routes/embed/index.js
@@ -1,13 +1,12 @@
 const express = require('express');
 const router = express.Router();
 const SettingsService = require('../../services/settings');
-const {data} = require('../static');
 
 router.use('/:embed', async (req, res, next) => {
   switch (req.params.embed) {
   case 'stream': {
-    const {customCssUrl} = await SettingsService.retrieve();
-    return res.render('embed/stream', {customCssUrl, data});
+    const {customCssUrl} = await SettingsService.retrieve('customCssUrl');
+    return res.render('embed/stream', {customCssUrl});
   }
   }
 
diff --git a/routes/index.js b/routes/index.js
index 23e8d8a47..0ee012a79 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,17 +1,20 @@
-const express = require('express');
-const path = require('path');
-const plugins = require('../services/plugins');
-const debug = require('debug')('talk:routes');
-const authentication = require('../middleware/authentication');
-const {passport} = require('../services/passport');
-const pubsub = require('../middleware/pubsub');
-const i18n = require('../services/i18n');
-const enabled = require('debug').enabled;
-const errors = require('../errors');
-const {createGraphOptions} = require('../graph');
 const accepts = require('accepts');
 const apollo = require('graphql-server-express');
+const authentication = require('../middleware/authentication');
+const bodyParser = require('body-parser');
+const cookieParser = require('cookie-parser');
+const debug = require('debug')('talk:routes');
+const enabled = require('debug').enabled;
+const errors = require('../errors');
+const express = require('express');
+const i18n = require('../services/i18n');
+const path = require('path');
+const plugins = require('../services/plugins');
+const pubsub = require('../middleware/pubsub');
 const {DISABLE_STATIC_SERVER} = require('../config');
+const {createGraphOptions} = require('../graph');
+const {passport} = require('../services/passport');
+const staticTemplate = require('../middleware/staticTemplate');
 
 const router = express.Router();
 
@@ -61,10 +64,23 @@ if (!DISABLE_STATIC_SERVER) {
   router.get('/embed.js.map', serveFile('../dist/embed.js.map'));
 }
 
+//==============================================================================
+// STATIC ROUTES
+//==============================================================================
+
+router.use('/admin', staticTemplate, require('./admin'));
+router.use('/embed', staticTemplate, require('./embed'));
+
 //==============================================================================
 // PASSPORT MIDDLEWARE
 //==============================================================================
 
+// Parse the cookies on the request.
+router.use(cookieParser());
+
+// Parse the body json if it's there.
+router.use(bodyParser.json());
+
 const passportDebug = require('debug')('talk:passport');
 
 // Install the passport plugins.
@@ -112,13 +128,11 @@ if (process.env.NODE_ENV !== 'production') {
 //==============================================================================
 
 router.use('/api/v1', require('./api'));
-router.use('/admin', require('./admin'));
-router.use('/embed', require('./embed'));
 
+// Development routes.
 if (process.env.NODE_ENV !== 'production') {
-  router.use('/assets', require('./assets'));
-
-  router.get('/', (req, res) => {
+  router.use('/assets', staticTemplate, require('./assets'));
+  router.get('/', staticTemplate, (req, res) => {
     return res.render('article', {
       title: 'Coral Talk',
       asset_url: '',
diff --git a/routes/static.js b/routes/static.js
deleted file mode 100644
index 12bf01282..000000000
--- a/routes/static.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const {
-  RECAPTCHA_PUBLIC,
-  WEBSOCKET_LIVE_URI,
-} = require('../config');
-const {
-  STATIC_URL,
-} = require('../url');
-
-module.exports.data = {
-  TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
-  LIVE_URI: WEBSOCKET_LIVE_URI,
-  STATIC_URL,
-};
diff --git a/serve.js b/serve.js
index e97095d52..b98a49085 100644
--- a/serve.js
+++ b/serve.js
@@ -75,9 +75,6 @@ function normalizePort(val) {
 
 async function onListening() {
 
-  // Start the cache instance.
-  await cache.init();
-
   let addr = server.address();
   let bind = typeof addr === 'string'
     ? `pipe ${addr}`
@@ -88,7 +85,10 @@ async function onListening() {
 /**
  * Start the app.
  */
-async function serve({jobs = true, websockets = true} = {}) {
+async function serve({jobs = false, websockets = false} = {}) {
+
+  // Start the cache instance.
+  await cache.init();
 
   try {
 
diff --git a/services/cache.js b/services/cache.js
index 77db0ce1f..155992fe0 100644
--- a/services/cache.js
+++ b/services/cache.js
@@ -21,7 +21,7 @@ const keyfunc = (key) => {
  * This wraps a complicated function with a cache, in the event that the item is
  * not inside the cache, it will perform the work to get it and then set it
  * followed by returning the value.
- * @param  {Mixed} key       Either an array of items or string represening this
+ * @param  {Mixed} key       Either an array of items or string representing this
  *                           work
  * @param  {Integer} expiry  Time in seconds for the cache entry to live for
  * @param  {Function} work   A function that returns a promise that can be
@@ -30,7 +30,7 @@ const keyfunc = (key) => {
  */
 cache.wrap = async (key, expiry, work, kf = keyfunc) => {
   let value = await cache.get(key, kf);
-  if (value !== null) {
+  if (typeof value !== 'undefined' && value !== null) {
     debug('wrap: hit', kf(key));
     return value;
   }
@@ -187,11 +187,13 @@ cache.wrapMany = async (keys, expiry, work, kf = keyfunc) => {
  * @return {Promise}
  */
 cache.get = async (key, kf = keyfunc) => cache.client.get(kf(key)).then((reply) => {
-  if (reply !== null) {
+  if (typeof reply !== 'undefined' && reply !== null) {
 
     // Parse the stored cache value from JSON.
     return JSON.parse(reply);
   }
+
+  return null;
 });
 
 /**
@@ -207,7 +209,7 @@ cache.getMany = async (keys, kf = keyfunc) => cache.client.mget(keys.map(kf)).th
   for (let i = 0; i < replies.length; i++) {
     let value = null;
 
-    if (replies[i] != null) {
+    if (typeof replies[i] !== 'undefined' && replies[i] !== null) {
 
       // Parse the stored cache value from JSON.
       value = JSON.parse(replies[i]);
diff --git a/services/hcache.js b/services/hcache.js
new file mode 100644
index 000000000..72e52d9eb
--- /dev/null
+++ b/services/hcache.js
@@ -0,0 +1,61 @@
+const cache = require('./cache');
+const debug = require('debug')('talk:services:hcache');
+
+const kf = (key) => `hcache:${key}`;
+
+const hcache = module.exports = {};
+
+hcache.get = async (key, field = '__default__') => {
+
+  // Get the current value from redis.
+  const reply = await cache.client.hget(kf(key), field);
+
+  if (typeof reply !== 'undefined' && reply !== null) {
+    return JSON.parse(reply);
+  }
+
+  return null;
+};
+
+hcache.set = async (key, field = '__default__', value, expiry = 60) => {
+
+  // Serialize the value as JSON.
+  let reply = JSON.stringify(value);
+
+  return cache.client
+    .pipeline()
+    .hset(kf(key), field, reply)
+    .expire(kf(key), expiry)
+    .exec();
+};
+
+hcache.del = async (key, field = null) => {
+  if (field === null) {
+    return cache.client.del(kf(key));
+  }
+
+  return cache.client.hdel(kf(key), field);
+};
+
+hcache.wrap = async (key, field, expiry, work) => {
+  let value = await hcache.get(key, field);
+  if (value !== null) {
+    debug('wrap: hit', kf(key));
+    return value;
+  }
+
+  debug('wrap: miss', kf(key));
+
+  value = await work();
+
+  process.nextTick(async () => {
+    try {
+      await hcache.set(key, field, value, expiry);
+      debug('wrap: set complete');
+    } catch (err) {
+      console.error(err);
+    }
+  });
+
+  return value;
+};
diff --git a/services/locals.js b/services/locals.js
deleted file mode 100644
index 9a6a6bec8..000000000
--- a/services/locals.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const {
-  BASE_URL,
-  BASE_PATH,
-  MOUNT_PATH,
-  STATIC_URL,
-} = require('../url');
-
-const applyLocals = (locals) => {
-
-  // Apply the BASE_PATH, BASE_URL, and MOUNT_PATH on the app.locals, which will
-  // make them available on the templates and the routers.
-  locals.BASE_URL = BASE_URL;
-  locals.BASE_PATH = BASE_PATH;
-  locals.MOUNT_PATH = MOUNT_PATH;
-  locals.STATIC_URL = STATIC_URL;
-};
-
-module.exports = {
-  applyLocals,
-};
diff --git a/services/mailer.js b/services/mailer.js
index f04a6dc92..a4f694b30 100644
--- a/services/mailer.js
+++ b/services/mailer.js
@@ -4,7 +4,7 @@ const kue = require('./kue');
 const path = require('path');
 const fs = require('fs');
 const _ = require('lodash');
-const {applyLocals} = require('./locals');
+const {attachLocals} = require('../middleware/staticTemplate');
 
 const i18n = require('./i18n');
 
@@ -97,7 +97,7 @@ const mailer = module.exports = {
     // Prefix the subject with `[Talk]`.
     subject = `[Talk] ${subject}`;
 
-    applyLocals(locals);
+    attachLocals(locals);
 
     // Attach the templating function.
     locals['t'] = i18n.t;
diff --git a/services/mongoose.js b/services/mongoose.js
index fb23a5fe1..747df2d66 100644
--- a/services/mongoose.js
+++ b/services/mongoose.js
@@ -5,7 +5,8 @@ const queryDebugger = require('debug')('talk:db:query');
 
 const {
   MONGO_URL,
-  WEBPACK
+  WEBPACK,
+  CREATE_MONGO_INDEXES,
 } = require('../config');
 
 // Loading the formatter from Mongoose:
@@ -56,6 +57,9 @@ if (WEBPACK) {
   mongoose
     .connect(MONGO_URL, {
       useMongoClient: true,
+      config: {
+        autoIndex: CREATE_MONGO_INDEXES,
+      },
     })
     .then(() => {
       debug('connection established');
@@ -69,7 +73,7 @@ if (WEBPACK) {
 module.exports = mongoose;
 
 // Here we include all the models that mongoose is used for, this ensures that
-// when we import mongoose that we also start up all the indexing opreations
+// when we import mongoose that we also start up all the indexing operations
 // here.
 require('../models/action');
 require('../models/asset');
diff --git a/services/settings.js b/services/settings.js
index 310884002..90ff6bbd6 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -1,4 +1,5 @@
 const SettingModel = require('../models/setting');
+const hcache = require('./hcache');
 const errors = require('../errors');
 const {dotize} = require('./utils');
 
@@ -7,6 +8,20 @@ const {dotize} = require('./utils');
  */
 const selector = {id: '1'};
 
+const retrieve = async (fields) => {
+  let settings;
+  if (fields) {
+    settings = await SettingModel.findOne(selector).select(fields);
+  } else {
+    settings = await SettingModel.findOne(selector);
+  }
+  if (!settings) {
+    throw errors.ErrSettingsNotInit;
+  }
+
+  return settings;
+};
+
 /**
  * The Setting Service object exposing the Setting model.
  */
@@ -16,16 +31,16 @@ module.exports = class SettingsService {
    * Gets the entire settings record and sends it back
    * @return {Promise} settings the whole settings record
    */
-  static retrieve() {
-    return SettingModel
-      .findOne(selector)
-      .then((settings) => {
-        if (!settings) {
-          return Promise.reject(errors.ErrSettingsNotInit);
-        }
+  static async retrieve(fields) {
+    if (process.env.NODE_ENV === 'production') {
 
-        return settings;
-      });
+      // When in production, wrap the settings retrieval with a cache.
+      const settings = await hcache.wrap('settings', fields, 60, () => retrieve(fields));
+
+      return new SettingModel(settings);
+    }
+
+    return retrieve(fields);
   }
 
   /**
@@ -33,14 +48,20 @@ module.exports = class SettingsService {
    * @param  {object} setting a hash of whatever settings you want to update
    * @return {Promise} settings Promise that resolves to the entire (updated) settings object.
    */
-  static update(settings) {
-    return SettingModel.findOneAndUpdate(selector, {
+  static async update(settings) {
+    const updatedSettings = await SettingModel.findOneAndUpdate(selector, {
       $set: dotize(settings)
     }, {
       upsert: true,
       new: true,
       setDefaultsOnInsert: true
     });
+
+    if (process.env.NODE_ENV === 'production') {
+      await hcache.del('settings');
+    }
+
+    return updatedSettings;
   }
 
   /**
diff --git a/views/embed/stream.ejs b/views/embed/stream.ejs
index aeea82bc5..3146481e3 100644
--- a/views/embed/stream.ejs
+++ b/views/embed/stream.ejs
@@ -6,16 +6,15 @@
     <link rel="stylesheet" type="text/css" href="<%= STATIC_URL %>client/embed/stream/default.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    <% if (locals.customCssUrl) { %>
-      <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">
-    <% } %>
-    <% if (data != null) { %>
-      <script id="data" type="application/json"><%- JSON.stringify(data) %></script>
-    <% } %>
+    <%_ if (locals.customCssUrl) { _%>
+    <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">
+    <%_ } _%>
+    <%_ if (data != null) { _%>
+    <script id="data" type="application/json"><%- JSON.stringify(data) %></script>
+    <%_ } _%>
     <base href="<%= BASE_URL %>"/>
   </head>
   <body>
-
     <div id="talk-embed-stream-container"></div>
     <script src="<%= STATIC_URL %>client/embed/stream/bundle.js"></script>
   </body>

From a8a8455f40cec30fcc4edee3287dba4bc4a45c18 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 5 Dec 2017 11:23:36 -0700
Subject: [PATCH 248/344] removed reference

---
 graph/connectors.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/graph/connectors.js b/graph/connectors.js
index 5f09af06f..cc7e45d21 100644
--- a/graph/connectors.js
+++ b/graph/connectors.js
@@ -5,7 +5,6 @@ const errors = require('../errors');
 const Action = require('../models/action');
 const Asset = require('../models/asset');
 const Comment = require('../models/comment');
-const Setting = require('../models/setting');
 const User = require('../models/user');
 
 // Services.
@@ -44,7 +43,6 @@ const connectors = {
     Action,
     Asset,
     Comment,
-    Setting,
     User,
   },
   services: {

From 04ae844a1a23d1a82cf4305611c6d1ba53b31b79 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 5 Dec 2017 19:25:32 +0100
Subject: [PATCH 249/344] Use graphql-ast-tools

---
 client/coral-framework/services/graphql.js | 6 +++---
 package.json                               | 1 +
 yarn.lock                                  | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index 859d57d8a..fb40ecf71 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -1,4 +1,4 @@
-import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
+import {transformDocument, createTypeGetter} from 'graphql-ast-tools';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
@@ -10,7 +10,7 @@ export function createGraphQLService(registry, {
   introspectionData,
   optimize = false,
 }) {
-  const reduceOptions = {
+  const transformOptions = {
     typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
 
     // Use shared fragment map.
@@ -27,7 +27,7 @@ export function createGraphQLService(registry, {
       document = registry.resolveFragments(document);
 
       if (optimize) {
-        document = reduceDocument(document, reduceOptions);
+        document = transformDocument(document, transformOptions);
       }
 
       // We also add typenames to the document which apollo would usually do,
diff --git a/package.json b/package.json
index 5ac69b6e6..7876c8636 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
+    "graphql-ast-tools": "^0.1.5",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/yarn.lock b/yarn.lock
index 78ded3707..a536670b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3519,6 +3519,12 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
+graphql-ast-tools@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.5.tgz#840c8027b71d60b560482d08e70988e5bc91da90"
+  dependencies:
+    apollo-utilities "^1.0.3"
+
 graphql-docs@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/graphql-docs/-/graphql-docs-0.2.0.tgz#cf803f9c9d354fa03e89073d74e419261a5bfa74"

From d3040804a23eb8695c377b615295a0c90b8836dc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 5 Dec 2017 19:39:14 +0100
Subject: [PATCH 250/344] Upgrade graphql-anywhere-optimized and
 graphql-ast-tools

---
 yarn.lock | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a536670b9..c01e2e85a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,8 +12,10 @@
     eslint-plugin-react "^7.3.0"
 
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.0.tgz#3456f16f790d8593b0ca4355910578ab1c6edab5"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.3.tgz#f92f3906bb04f001aef725697237786752c49bd6"
+  dependencies:
+    graphql-ast-tools "^0.1.6"
 
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
@@ -3519,9 +3521,9 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.5.tgz#840c8027b71d60b560482d08e70988e5bc91da90"
+graphql-ast-tools@^0.1.5, graphql-ast-tools@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.6.tgz#48eb656434bf4c7dba2a0d4784f1fdb988ab70ed"
   dependencies:
     apollo-utilities "^1.0.3"
 

From 6a00d3d2497c66e5f9bd40b19d6f683b77f02033 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 5 Dec 2017 19:40:53 +0100
Subject: [PATCH 251/344] Remove unused code

---
 .../coral-framework/graphql/reduceDocument.js | 293 ------------------
 1 file changed, 293 deletions(-)
 delete mode 100644 client/coral-framework/graphql/reduceDocument.js

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
deleted file mode 100644
index 12e0954d7..000000000
--- a/client/coral-framework/graphql/reduceDocument.js
+++ /dev/null
@@ -1,293 +0,0 @@
-import {
-  getMainDefinition,
-  getFragmentDefinitions,
-  createFragmentMap,
-  shouldInclude,
-  getOperationDefinition,
-} from 'apollo-utilities';
-
-function getDirectivesID(directives) {
-  let id = '';
-  directives.forEach((directive) => {
-    id += `@${directive.name.value}(`;
-    let first = true;
-    directive.arguments.forEach((arg) => {
-      if (!first) {
-        id += ',';
-      }
-      first = false;
-      const value = arg.value.kind === 'Variable'
-        ? `$${arg.value.name.value}`
-        : arg.value.value;
-      id += `${arg.name.value}:${value}`;
-    });
-    id += ')';
-  });
-  return id;
-}
-
-// If two definitions have the same id, they can be merged.
-function getDefinitionID(definition) {
-
-  // Only merge when directives are exactly the same.
-  const trailing = definition.directives.length
-    ? `_${getDirectivesID(definition.directives)}`
-    : '';
-
-  switch (definition.kind) {
-  case 'FragmentSpread':
-    return `FragmentSpread_${definition.name.value}`;
-  case 'Field':
-    return `Field_${definition.alias ? definition.alias.value : definition.name.value}${trailing}`;
-  case 'InlineFragment':
-    return `InlineFragment_${definition.typeCondition.name.value}${trailing}`;
-  default:
-    throw new Error(`unknown definition kind ${definition.kind}`);
-  }
-}
-
-/**
- * Merge selections of 2 definitions.
- */
-export function mergeDefinitions(a, b) {
-  const name = getDefinitionID(a);
-
-  if (!!a.selectionSet !== !!b.selectionSet) {
-    throw Error(`incompatible field definition for ${name}`);
-  }
-
-  if (!a.selectionSet) {
-    return b;
-  }
-
-  const selectionSet = mergeSelectionSets(a.selectionSet, b.selectionSet);
-
-  return {
-    ...b,
-    selectionSet,
-  };
-}
-
-/**
- * Merge selectionSets
- */
-export function mergeSelectionSets(a, b) {
-  const selectionsMap = [...a.selections, ...b.selections].reduce((o, sel) => {
-    const selName = getDefinitionID(sel);
-    if (!(selName in o)) {
-      o[selName] = sel;
-      return o;
-    }
-    o[selName] = mergeDefinitions(o[selName], sel);
-    return o;
-  }, {});
-
-  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
-
-  return {
-    ...b,
-    selections,
-  };
-}
-
-function getFragmentOrDie(name, execContext) {
-  const {
-    rawFragmentMap,
-    fragmentMap,
-  } = execContext;
-
-  if (!(name in fragmentMap)) {
-    const fragment = rawFragmentMap[name];
-
-    if (!fragment) {
-      throw new Error(`fragment ${fragment.name.value} does not exist`);
-    }
-
-    const typeCondition = fragment.typeCondition.name.value;
-    const transformed = transformDefinition(fragment, execContext, `type.${typeCondition}`, typeCondition);
-    fragmentMap[name] = transformed;
-  }
-
-  return fragmentMap[name];
-}
-
-/**
- * Return selections with resolved named fragments and directives.
- */
-function getTransformedSelections(definition, path, gqlType, execContext) {
-  const {
-    variables,
-  } = execContext;
-
-  const selectionsMap = definition.selectionSet.selections.reduce((o, sel) => {
-    if (variables && !shouldInclude(sel, variables)) {
-
-      // Skip this entirely
-      return o;
-    }
-    if (sel.kind !== 'FragmentSpread') {
-      const transformed = transformDefinition(sel, execContext, path, gqlType);
-      const name = getDefinitionID(sel);
-
-      // Merge existing value.
-      if (name in o) {
-        o[name] = mergeDefinitions(o[name], transformed);
-        return o;
-      }
-
-      o[name] = transformed;
-      return o;
-    }
-
-    const fragment = getFragmentOrDie(sel.name.value, execContext);
-    const typeCondition = fragment.typeCondition.name.value;
-
-    // Turn NamedFragment into an InlineFragment.
-    if (gqlType !== typeCondition || fragment.directives.length) {
-      const node = {
-        ...fragment,
-        kind: 'InlineFragment',
-      };
-      const name = getDefinitionID(node);
-
-      // Merge existing value.
-      if (name in o) {
-        o[name] = mergeDefinitions(o[name], node);
-        return o;
-      }
-
-      o[name] = node;
-      return o;
-    }
-
-    // Merge NamedFragment directly into selections.
-    const fragmentSelections = fragment.selectionSet.selections;
-    fragmentSelections.forEach((s) => {
-
-      if (variables && !shouldInclude(s, variables)) {
-
-        // Skip this entirely
-        return;
-      }
-
-      const selName = getDefinitionID(s);
-      if (!(selName in o)) {
-        o[selName] = s;
-        return;
-      }
-
-      o[selName] = mergeDefinitions(o[selName], s);
-    });
-    return o;
-  }, {});
-
-  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
-  return selections;
-}
-
-/**
- * Resolve named fragments and directives in a definition.
- */
-function transformDefinition(definition, execContext, path = '', type = null) {
-  if (!definition.selectionSet) {
-    return definition;
-  }
-
-  const {typeGetter} = execContext;
-
-  if (definition.kind === 'Field') {
-    const fieldName = definition.name.value;
-    path = `${path}.${fieldName}`;
-
-    if (typeGetter) {
-      type = typeGetter(path);
-    }
-  }
-
-  // InlineFragments
-  else if(!type && typeGetter) {
-    type = typeGetter(path);
-  }
-
-  return {
-    ...definition,
-    selectionSet: {
-      ...definition.selectionSet,
-      selections: getTransformedSelections(definition, path, type, execContext),
-    },
-  };
-}
-
-export default function reduceDocument(document, options = {}) {
-  const mainDefinition = getMainDefinition(document);
-  const fragments = getFragmentDefinitions(document);
-  const operationDefinition = getOperationDefinition(document);
-  const path = operationDefinition
-    ? operationDefinition.operation
-    : `type.${mainDefinition.typeCondition.name.value}`;
-
-  const execContext = {
-    rawFragmentMap: createFragmentMap(fragments),
-    fragmentMap: options.fragmentMap || {},
-    variables: options.variables,
-    typeGetter: options.typeGetter || (() => null),
-  };
-
-  return {
-    kind: 'Document',
-    definitions: [transformDefinition(mainDefinition, execContext, path)],
-  };
-}
-
-function getObjectType(fieldType) {
-  if (['NON_NULL', 'LIST'].indexOf(fieldType.kind) > -1) {
-    return getObjectType(fieldType.ofType);
-  }
-  return fieldType.name;
-}
-
-function getFieldType(parentType, fieldName) {
-  const field = parentType.fields.find((f) => f.name === fieldName);
-  return getObjectType(field.type);
-}
-
-export function createTypeGetter(introspectionData) {
-  const types = {};
-  introspectionData.__schema.types.forEach((type) => types[type.name] = type);
-
-  const result = {
-    'query': introspectionData.__schema.queryType.name,
-    'mutation': introspectionData.__schema.mutationType.name,
-    'subscription': introspectionData.__schema.subscriptionType.name,
-  };
-
-  return (path) => {
-    if (result[path]) {
-      return result[path];
-    }
-    let currentPath = '';
-    const parts = path.split('.');
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-
-      // Handle special path e.g. 'type.ROOT_QUERY.fieldName'
-      if (part === 'type') {
-        const type = parts[i + 1];
-        const nextPath = `type.${type}`;
-        result[nextPath] = type;
-        currentPath = nextPath;
-        i++;
-        continue;
-      }
-
-      const nextPath = currentPath ? `${currentPath}.${part}` : part;
-      if (nextPath in result) {
-        currentPath = nextPath;
-        continue;
-      }
-      result[nextPath] = getFieldType(types[result[currentPath]], part);
-      currentPath = nextPath;
-    }
-    return result[path];
-  };
-}

From 94b56b547f1489ecd36dc057a33ab79b16e38627 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 5 Dec 2017 12:31:36 -0700
Subject: [PATCH 252/344] fixed small bug

---
 config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config.js b/config.js
index b5b55a5a5..76d488a0d 100644
--- a/config.js
+++ b/config.js
@@ -184,7 +184,7 @@ const CONFIG = {
   // IGNORE_FLAGS_AGAINST_STAFF disables staff members from entering the
   // reported queue from comments after this was enabled and from reports
   // against the staff members user account.
-  IGNORE_FLAGS_AGAINST_STAFF: process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF === 'TRUE',
+  IGNORE_FLAGS_AGAINST_STAFF: process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF !== 'TRUE',
 };
 
 //==============================================================================

From aabd40d53a13c5ff07a8dd9675b9d5a59c1057e6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 6 Dec 2017 11:45:16 +0100
Subject: [PATCH 253/344] Remove apollo-utilities

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 7876c8636..4712a75c4 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
     "@coralproject/graphql-anywhere-optimized": "^0.1.0",
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
-    "apollo-utilities": "^1.0.3",
     "app-module-path": "^2.2.0",
     "autoprefixer": "^6.5.2",
     "babel-cli": "6.26.0",

From 2eec87aa80e5f10787c66cef725e6f26c0786953 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 6 Dec 2017 16:10:42 -0700
Subject: [PATCH 254/344] modified asset loading to be less lazy

---
 graph/loaders/assets.js   | 164 ++++++++++++++++++++++++--------------
 graph/loaders/comments.js |  36 ++++-----
 graph/loaders/settings.js |  16 +++-
 models/comment.js         |  28 +++++--
 services/cache.js         | 104 ++++++++++++++++++++----
 services/hcache.js        |  61 --------------
 services/settings.js      |   6 +-
 7 files changed, 245 insertions(+), 170 deletions(-)
 delete mode 100644 services/hcache.js

diff --git a/graph/loaders/assets.js b/graph/loaders/assets.js
index 832b7b473..6ea7e6599 100644
--- a/graph/loaders/assets.js
+++ b/graph/loaders/assets.js
@@ -1,31 +1,14 @@
 const DataLoader = require('dataloader');
-const url = require('url');
+const {URL} = require('url');
+const {singleJoinBy, SingletonResolver} = require('./util');
 
-const errors = require('../../errors');
-const scraper = require('../../services/scraper');
-const util = require('./util');
-
-const AssetModel = require('../../models/asset');
-const AssetsService = require('../../services/assets');
-
-/**
- * Retrieves assets by an array of ids.
- * @param {Object} context the context of the request
- * @param {Array}  ids     array of ids to lookup
- */
-const genAssetsByID = (context, ids) => AssetModel.find({
+const genAssetsByID = ({connectors: {models: {Asset}}}, ids) => Asset.find({
   id: {
     $in: ids
   }
-}).then(util.singleJoinBy(ids, 'id'));
+}).then(singleJoinBy(ids, 'id'));
 
-/**
- * [getAssetsByQuery description]
- * @param  {Object} context  the context of the request
- * @param  {Object} query    the query
- * @return {Promise}         resolves the assets
- */
-const getAssetsByQuery = async (context, query) => {
+const getAssetsByQuery = async ({connectors: {services: {Assets}}}, query) => {
 
   // If we are requesting based on a limit, ask for one more than we want.
   const limit = query.limit;
@@ -33,7 +16,7 @@ const getAssetsByQuery = async (context, query) => {
     query.limit += 1;
   }
 
-  const nodes = await AssetsService.search(query);
+  const nodes = await Assets.search(query);
 
   // The hasNextPage is always handled the same (ask for one more than we need,
   // if there is one more, than there is more).
@@ -54,58 +37,121 @@ const getAssetsByQuery = async (context, query) => {
   };
 };
 
-/**
- * This endpoint find or creates an asset at the given url when it is loaded.
- * @param   {Object} context   the context of the request
- * @param   {String} asset_url the url passed in from the query
- * @returns {Promise}          resolves to the asset
- */
-const findOrCreateAssetByURL = async (context, asset_url) => {
+const findOrCreateAssetByURL = async (ctx, url) => {
 
-  // Verify that the asset_url is parsable.
-  let parsed_asset_url = url.parse(asset_url);
-  if (!parsed_asset_url.protocol) {
-    throw errors.ErrInvalidAssetURL;
+  // Pull our connectors out of the context.
+  const {
+    loaders: {
+      Assets,
+      Settings,
+    },
+    connectors: {
+      models: {
+        Asset,
+      },
+      services: {
+        DomainList,
+        Scraper,
+      },
+      errors: {
+        ErrInvalidAssetURL,
+      },
+    },
+  } = ctx;
+
+  // Try to validate that the url is valid. If the URL constructor throws an
+  // error, throw our internal ErrInvalidAssetURL instead. This will validate
+  // that the url contains a valid scheme.
+  try {
+    new URL(url);
+  } catch (err) {
+    throw ErrInvalidAssetURL;
   }
 
-  let asset = await AssetsService.findOrCreateByUrl(asset_url);
+  // Try the easy lookup first.
+  let asset = await Assets.findByUrl(url);
+  if (asset) {
+    return asset;
+  }
 
-  // If the asset wasn't scraped before, scrape it! Otherwise just return
-  // the asset.
+  // Seems the asset wasn't here yet.. We should do some validation.
+
+  // Check for whitelisting + get the settings at the same time.
+  const [
+    whitelisted,
+    settings,
+  ] = await Promise.all([
+    DomainList.urlCheck(url),
+    Settings.load('autoCloseStream closedTimeout'),
+  ]);
+
+  // If the domain wasn't whitelisted, then we shouldn't create this asset!
+  if (!whitelisted) {
+    throw ErrInvalidAssetURL;
+  }
+
+  // Construct the update operator that we'll use to create the asset.
+  const update = {
+    $setOnInsert: {
+      url,
+    },
+  };
+
+  // If the auto-close stream is enabled, close the stream after the designated
+  // timeout.
+  if (settings.autoCloseStream) {
+    update.$setOnInsert.closedAt = new Date(Date.now() + settings.closedTimeout * 1000);
+  }
+
+  // We're using the findOneAndUpdate here instead of a insert to protect
+  // against race conditions.
+  asset = await Asset.findOneAndUpdate({
+    url,
+  }, update, {
+
+    // Ensure that if it's new, we return the new object created.
+    new: true,
+
+    // Perform an upsert in the event that this doesn't exist.
+    upsert: true,
+
+    // Set the default values if not provided based on the mongoose models.
+    setDefaultsOnInsert: true,
+
+    // Ensure that we validate the input that we do have.
+    runValidators: true,
+  });
+
+  // If this is a new asset, then we need to scrape it!
   if (!asset.scraped) {
-    await scraper.create(asset);
+
+    // Create the Scraper job.
+    await Scraper.create(asset);
   }
 
   return asset;
 };
 
-const findByUrl = async (context, asset_url) => {
+const findByUrl = async ({connectors: {errors, services: {Assets}}}, asset_url) => {
 
-  // Verify that the asset_url is parsable.
-  let parsed_asset_url = url.parse(asset_url);
-  if (!parsed_asset_url.protocol) {
+  // Try to validate that the url is valid. If the URL constructor throws an
+  // error, throw our internal ErrInvalidAssetURL instead. This will validate
+  // that the url contains a valid scheme.
+  try {
+    new URL(asset_url);
+  } catch (err) {
     throw errors.ErrInvalidAssetURL;
   }
 
-  return AssetsService.findByUrl(asset_url);
+  return Assets.findByUrl(asset_url);
 };
 
-/**
- * Creates a set of loaders based on a GraphQL context.
- * @param  {Object} context the context of the GraphQL request
- * @return {Object}         object of loaders
- */
-
-module.exports = (context) => ({
+module.exports = (ctx) => ({
   Assets: {
-
-    // TODO: decide whether we want to move these to mutators or not, as in fact
-    // this operation create a new asset if one isn't found.
-    getByURL: (url) => findOrCreateAssetByURL(context, url),
-
-    findByUrl: (url) => findByUrl(context, url),
-    getByQuery: (query) => getAssetsByQuery(context, query),
-    getByID: new DataLoader((ids) => genAssetsByID(context, ids)),
-    getAll: new util.SingletonResolver(() => AssetModel.find({}))
+    getByURL: (url) => findOrCreateAssetByURL(ctx, url),
+    findByUrl: (url) => findByUrl(ctx, url),
+    getByQuery: (query) => getAssetsByQuery(ctx, query),
+    getByID: new DataLoader((ids) => genAssetsByID(ctx, ids)),
+    getAll: new SingletonResolver(() => ctx.connectors.models.Asset.find({}))
   }
 });
diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index 2ad94deac..050bd6340 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -82,54 +82,52 @@ const getParentCountsByAssetID = (context, asset_ids) => {
 
 /**
  * Retrieves the count of comments based on the passed in query.
- * @param  {Object} context   graph context
+ * @param  {Object} ctx   graph context
  * @param  {Object} query     query to execute against the comments collection
  *                            to compute the counts
  * @return {Promise}          resolves to the counts of the comments from the
  *                            query
  */
-const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, author_id, tags, action_type}) => {
-  let query = CommentModel.find();
+const getCommentCountByQuery = (ctx, options) => {
+  const {statuses, asset_id, parent_id, author_id, tags, action_type} = options;
 
   // If user queries for statuses other than NONE and/or ACCEPTED statuses, it needs
   // special privileges.
   if (
     (!statuses || statuses.some((status) => !['NONE', 'ACCEPTED'].includes(status))) &&
-    (context.user == null || !context.user.can(SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS))
+    (ctx.user == null || !ctx.user.can(SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS))
   ) {
     return null;
   }
 
-  if (statuses && statuses.length > 0) {
-    query = query.where({status: {$in: statuses}});
-  }
-
-  if (ids) {
-    query = query.where({id: {$in: ids}});
-  }
+  const query = CommentModel.find();
 
   if (asset_id != null) {
-    query = query.where({asset_id});
+    query.merge({asset_id});
   }
 
   if (parent_id !== undefined) {
-    query = query.where({parent_id});
+    query.merge({parent_id});
   }
 
   if (author_id) {
-    query = query.where({author_id});
+    query.merge({author_id});
   }
 
-  if (context.user != null && context.user.can(SEARCH_OTHERS_COMMENTS) && action_type) {
-    query = query.where({
+  if (ctx.user != null && ctx.user.can(SEARCH_OTHERS_COMMENTS) && action_type) {
+    query.merge({
       [`action_counts.${sc(action_type.toLowerCase())}`]: {
         $gt: 0,
       },
     });
   }
 
-  if (tags) {
-    query = query.find({
+  if (statuses && statuses.length > 0) {
+    query.merge({status: {$in: statuses}});
+  }
+
+  if (tags && tags.length > 0) {
+    query.merge({
       'tags.tag.name': {
         $in: tags,
       },
@@ -289,7 +287,7 @@ const getCommentsByQuery = async (ctx, {ids, statuses, asset_id, parent_id, auth
   let comments = CommentModel.find();
 
   // If user queries for statuses other than NONE and/or ACCEPTED statuses, it needs
-  // special priviledges.
+  // special privileges.
   if (
     (!statuses || statuses.some((status) => !['NONE', 'ACCEPTED'].includes(status))) &&
     (ctx.user == null || !ctx.user.can(SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS))
diff --git a/graph/loaders/settings.js b/graph/loaders/settings.js
index 2d6189b7d..a7a4b74e1 100644
--- a/graph/loaders/settings.js
+++ b/graph/loaders/settings.js
@@ -1,11 +1,19 @@
 const SettingsService = require('../../services/settings');
-const {SingletonResolver} = require('./util');
+const DataLoader = require('dataloader');
 
 /**
  * Creates a set of loaders based on a GraphQL context.
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = () => ({
-  Settings: new SingletonResolver(() => SettingsService.retrieve())
-});
+module.exports = () => {
+  const loader = new DataLoader((selections) => Promise.all(selections.map((fields) => {
+    return SettingsService.retrieve(fields);
+  })));
+
+  return {
+    Settings: {
+      load: (fields = false) => loader.load(fields),
+    }
+  };
+};
diff --git a/models/comment.js b/models/comment.js
index bc4cecd5d..ae6aa558f 100644
--- a/models/comment.js
+++ b/models/comment.js
@@ -123,20 +123,23 @@ CommentSchema.index({
   background: true,
 });
 
-// Add an index that is optimized for sorting based on the action count data.
-CommentSchema.index({
-  'created_at': 1,
-  'action_counts.flag': 1,
-}, {
-  background: true,
-});
-
+// Create a sparse index to search across.
 CommentSchema.index({
   'created_at': 1,
   'action_counts.flag': 1,
   'status': 1,
 }, {
   background: true,
+  sparse: true,
+});
+
+// Create a sparse index to search across.
+CommentSchema.index({
+  'action_counts.flag': 1,
+  'status': 1,
+}, {
+  background: true,
+  sparse: true,
 });
 
 // Add an index that is optimized for finding flagged comments.
@@ -166,6 +169,15 @@ CommentSchema.index({
   background: true,
 });
 
+// Optimize for tag searches/counts.
+CommentSchema.index({
+  'tags.tag.name': 1,
+  'status': 1,
+}, {
+  background: true,
+  sparse: true,
+});
+
 // Add an index that is optimized for sorting based on the created_at timestamp
 // but also good at locating comments that have a specific asset id.
 CommentSchema.index({
diff --git a/services/cache.js b/services/cache.js
index 155992fe0..cac05c091 100644
--- a/services/cache.js
+++ b/services/cache.js
@@ -61,30 +61,36 @@ cache.init = async () => {
 
   // This is designed to increment a key and add an expiry iff the key already
   // exists.
-  const INCR_SCRIPT = `
-  if redis.call('GET', KEYS[1]) ~= false then
-    redis.call('INCR', KEYS[1])
-    redis.call('EXPIRE', KEYS[1], ARGV[1])
-  end
-  `;
-
   cache.client.defineCommand('increx', {
     numberOfKeys: 1,
-    lua: INCR_SCRIPT,
+    lua: `
+    if redis.call('GET', KEYS[1]) ~= false then
+      redis.call('INCR', KEYS[1])
+      redis.call('EXPIRE', KEYS[1], ARGV[1])
+    end
+    `,
   });
 
   // This is designed to decrement a key and add an expiry iff the key already
   // exists.
-  const DECR_SCRIPT = `
-  if redis.call('GET', KEYS[1]) ~= false then
-    redis.call('DECR', KEYS[1])
-    redis.call('EXPIRE', KEYS[1], ARGV[1])
-  end
-  `;
-
   cache.client.defineCommand('decrex', {
     numberOfKeys: 1,
-    lua: DECR_SCRIPT,
+    lua: `
+    if redis.call('GET', KEYS[1]) ~= false then
+      redis.call('DECR', KEYS[1])
+      redis.call('EXPIRE', KEYS[1], ARGV[1])
+    end
+    `,
+  });
+
+  cache.client.defineCommand('hincrbyex', {
+    numberOfKeys: 2,
+    lua: `
+    if redis.call('HGET', KEYS[1], KEYS[2]) ~= false then
+      redis.call('HINCRBY', KEYS[1], KEYS[2], ARGV[1])
+      redis.call('EXPIRE', KEYS[1], ARGV[2])
+    end
+    `,
   });
 };
 
@@ -270,3 +276,69 @@ cache.set = async (key, value, expiry, kf = keyfunc) => {
 
   return cache.client.set(kf(key), reply, 'EX', expiry);
 };
+
+/**
+ * h is the hash form of the cache.
+ */
+cache.h = {};
+
+cache.h.get = async (key, field = '__default__') => {
+
+  // Get the current value from redis.
+  const reply = await cache.client.hget(keyfunc(key), field);
+
+  if (typeof reply !== 'undefined' && reply !== null) {
+    return JSON.parse(reply);
+  }
+
+  return null;
+};
+
+cache.h.set = async (key, field = '__default__', value, expiry = 60) => {
+
+  // Serialize the value as JSON.
+  let reply = JSON.stringify(value);
+
+  return cache.client
+    .pipeline()
+    .hset(keyfunc(key), field, reply)
+    .expire(keyfunc(key), expiry)
+    .exec();
+};
+
+cache.h.invalidate = async (key, field = null) => {
+  if (field === null) {
+    return cache.invalidate(key);
+  }
+
+  debug(`invalidate: ${keyfunc(key)} ${field}`);
+
+  return cache.client.hdel(keyfunc(key), field);
+};
+
+cache.h.wrap = async (key, field, expiry, work) => {
+  let value = await cache.h.get(key, field);
+  if (value !== null) {
+    debug('wrap: hit', keyfunc(key));
+    return value;
+  }
+
+  debug('wrap: miss', keyfunc(key));
+
+  value = await work();
+
+  process.nextTick(async () => {
+    try {
+      await cache.h.set(key, field, value, expiry);
+      debug('wrap: set complete');
+    } catch (err) {
+      console.error(err);
+    }
+  });
+
+  return value;
+};
+
+cache.h.incr = async (key, field = '__default__', expiry) => cache.client.hincrbyex(keyfunc(key), field, 1, expiry);
+
+cache.h.decr = async (key, field = '__default__', expiry) => cache.client.hincrbyex(keyfunc(key), field, -1, expiry);
diff --git a/services/hcache.js b/services/hcache.js
deleted file mode 100644
index 72e52d9eb..000000000
--- a/services/hcache.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const cache = require('./cache');
-const debug = require('debug')('talk:services:hcache');
-
-const kf = (key) => `hcache:${key}`;
-
-const hcache = module.exports = {};
-
-hcache.get = async (key, field = '__default__') => {
-
-  // Get the current value from redis.
-  const reply = await cache.client.hget(kf(key), field);
-
-  if (typeof reply !== 'undefined' && reply !== null) {
-    return JSON.parse(reply);
-  }
-
-  return null;
-};
-
-hcache.set = async (key, field = '__default__', value, expiry = 60) => {
-
-  // Serialize the value as JSON.
-  let reply = JSON.stringify(value);
-
-  return cache.client
-    .pipeline()
-    .hset(kf(key), field, reply)
-    .expire(kf(key), expiry)
-    .exec();
-};
-
-hcache.del = async (key, field = null) => {
-  if (field === null) {
-    return cache.client.del(kf(key));
-  }
-
-  return cache.client.hdel(kf(key), field);
-};
-
-hcache.wrap = async (key, field, expiry, work) => {
-  let value = await hcache.get(key, field);
-  if (value !== null) {
-    debug('wrap: hit', kf(key));
-    return value;
-  }
-
-  debug('wrap: miss', kf(key));
-
-  value = await work();
-
-  process.nextTick(async () => {
-    try {
-      await hcache.set(key, field, value, expiry);
-      debug('wrap: set complete');
-    } catch (err) {
-      console.error(err);
-    }
-  });
-
-  return value;
-};
diff --git a/services/settings.js b/services/settings.js
index 90ff6bbd6..e8537c9c9 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -1,5 +1,5 @@
 const SettingModel = require('../models/setting');
-const hcache = require('./hcache');
+const cache = require('./cache');
 const errors = require('../errors');
 const {dotize} = require('./utils');
 
@@ -35,7 +35,7 @@ module.exports = class SettingsService {
     if (process.env.NODE_ENV === 'production') {
 
       // When in production, wrap the settings retrieval with a cache.
-      const settings = await hcache.wrap('settings', fields, 60, () => retrieve(fields));
+      const settings = await cache.h.wrap('settings', fields, 60, () => retrieve(fields));
 
       return new SettingModel(settings);
     }
@@ -58,7 +58,7 @@ module.exports = class SettingsService {
     });
 
     if (process.env.NODE_ENV === 'production') {
-      await hcache.del('settings');
+      await cache.h.invalidate('settings');
     }
 
     return updatedSettings;

From 091be25f36701041c73c3cba60d41aa816a1c3f2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 7 Dec 2017 16:55:36 +0100
Subject: [PATCH 255/344] Delay throttled subscription handler until query has
 loaded

---
 client/coral-framework/hocs/withQuery.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 8f0155a11..280191f89 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -108,6 +108,12 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.subscriptionQueue = [];
     }, 1000);
 
+    handleOnLoaded() {
+
+      // Trigger subscription queue processing after query has loaded.
+      setTimeout(() => this.processSubscriptionQueue(), 1000);
+    }
+
     subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
 
       // We need to add the typenames and resolve fragments.
@@ -122,8 +128,12 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         if (data) {
           this.subscriptionQueue.push([updateQuery, data]);
 
-          // Triggers the throttled subscription queue processor.
-          this.processSubscriptionQueue();
+          // Only trigger handler when query has been loaded.
+          if (!this.data.loading) {
+
+            // Triggers the throttled subscription queue processor.
+            this.processSubscriptionQueue();
+          }
         }
       };
 
@@ -145,6 +155,11 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
 
       // If data was previously set, we update it in a immutable way.
       if (this.data) {
+
+        if (this.data.loading && !data.loading) {
+          this.handleOnLoaded();
+        }
+
         if (this.data.networkStatus !== data.networkStatus ||
             this.data.loading !== data.loading ||
             this.data.error !== data.error ||

From 7072aa013bed716e967f4ee5fa5cc2e751e62ea2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 7 Dec 2017 18:41:46 +0100
Subject: [PATCH 256/344] document optimizations v2

---
 client/coral-framework/graphql/anywhere.js   | 23 ++++++++++++++++++++
 client/coral-framework/services/bootstrap.js |  4 ----
 client/coral-framework/services/graphql.js   | 18 +--------------
 package.json                                 |  2 +-
 webpack.config.js                            |  2 +-
 yarn.lock                                    | 12 +++++-----
 6 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 client/coral-framework/graphql/anywhere.js

diff --git a/client/coral-framework/graphql/anywhere.js b/client/coral-framework/graphql/anywhere.js
new file mode 100644
index 000000000..5e8496a98
--- /dev/null
+++ b/client/coral-framework/graphql/anywhere.js
@@ -0,0 +1,23 @@
+import graphql from '@coralproject/graphql-anywhere-optimized';
+import {createTypeGetter} from 'graphql-ast-tools';
+import introspectionData from './introspection.json';
+
+// User typeGetter to get more optimized documents.
+const typeGetter = createTypeGetter(introspectionData);
+
+// Use global fragment cache for transformed fragments.
+const fragmentMap = {};
+
+export default (...args) => {
+  while (args.length < 7) {
+    args.push(undefined);
+  }
+
+  const transformOptions = {
+    typeGetter,
+    fragmentMap,
+  };
+
+  args[6] = transformOptions;
+  return graphql(...args);
+};
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 3ef6629c1..1328b169d 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -124,10 +124,6 @@ export async function createContext({
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
-    {
-      introspectionData,
-      optimize: process.env.NODE_ENV === 'production',
-    },
   );
   if (!notification) {
 
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index fb40ecf71..d7b132bd4 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -1,4 +1,3 @@
-import {transformDocument, createTypeGetter} from 'graphql-ast-tools';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
@@ -6,18 +5,7 @@ import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
  * @param  {string}  basename  base path of the url
  * @return {Object}  histor service
  */
-export function createGraphQLService(registry, {
-  introspectionData,
-  optimize = false,
-}) {
-  const transformOptions = {
-    typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
-
-    // Use shared fragment map.
-    // Attention: Fragment names must be unique otherwise weird things will happen.
-    fragmentMap: {},
-  };
-
+export function createGraphQLService(registry) {
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
@@ -26,10 +14,6 @@ export function createGraphQLService(registry, {
         : documentOrCallback;
       document = registry.resolveFragments(document);
 
-      if (optimize) {
-        document = transformDocument(document, transformOptions);
-      }
-
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly
       // which require the resolved typenames.
diff --git a/package.json b/package.json
index 4712a75c4..2a4c8fa99 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-ast-tools": "^0.1.5",
+    "graphql-ast-tools": "0.2.2",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index 60a49b6eb..14ac7caf5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
-      'graphql-anywhere': '@coralproject/graphql-anywhere-optimized',
+      'graphql-anywhere': path.resolve(__dirname, 'client/coral-framework/graphql/anywhere'),
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index c01e2e85a..55439436c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,10 @@
     eslint-plugin-react "^7.3.0"
 
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.3.tgz#f92f3906bb04f001aef725697237786752c49bd6"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.5.tgz#67c862bf908ea717d9521ea76266b5bc9f109c65"
   dependencies:
-    graphql-ast-tools "^0.1.6"
+    graphql-ast-tools "^0.2.2"
 
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
@@ -3521,9 +3521,9 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@^0.1.5, graphql-ast-tools@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.6.tgz#48eb656434bf4c7dba2a0d4784f1fdb988ab70ed"
+graphql-ast-tools@0.2.2, graphql-ast-tools@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.2.tgz#2f149b427697a5d966825e1a9b4be0d7a0608bd6"
   dependencies:
     apollo-utilities "^1.0.3"
 

From 3ac301142e531e76c009e03bc1b6b5c8ef1b3358 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 7 Dec 2017 19:43:32 +0100
Subject: [PATCH 257/344] Update graphql-ast-tools

---
 package.json | 2 +-
 yarn.lock    | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2a4c8fa99..7a8766a1e 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-ast-tools": "0.2.2",
+    "graphql-ast-tools": "0.2.3",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/yarn.lock b/yarn.lock
index 55439436c..a6ca84229 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3521,7 +3521,13 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@0.2.2, graphql-ast-tools@^0.2.2:
+graphql-ast-tools@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.3.tgz#447fb05905ebb90f0a5bba81d5715249e9937135"
+  dependencies:
+    apollo-utilities "^1.0.3"
+
+graphql-ast-tools@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.2.tgz#2f149b427697a5d966825e1a9b4be0d7a0608bd6"
   dependencies:

From 07ddb94327b24eb98ff1bec54cc9a8353955981f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 7 Dec 2017 20:23:05 +0100
Subject: [PATCH 258/344] Fix yarn.lock

---
 yarn.lock | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a6ca84229..ea99f0cfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3521,18 +3521,12 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@0.2.3:
+graphql-ast-tools@0.2.3, graphql-ast-tools@^0.2.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.3.tgz#447fb05905ebb90f0a5bba81d5715249e9937135"
   dependencies:
     apollo-utilities "^1.0.3"
 
-graphql-ast-tools@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.2.tgz#2f149b427697a5d966825e1a9b4be0d7a0608bd6"
-  dependencies:
-    apollo-utilities "^1.0.3"
-
 graphql-docs@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/graphql-docs/-/graphql-docs-0.2.0.tgz#cf803f9c9d354fa03e89073d74e419261a5bfa74"

From ba572fbf4846edaf07edf6ffc2402e9f79e32c1f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 7 Dec 2017 20:24:45 +0100
Subject: [PATCH 259/344] Typo

---
 client/coral-framework/graphql/anywhere.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-framework/graphql/anywhere.js b/client/coral-framework/graphql/anywhere.js
index 5e8496a98..7a93f16ea 100644
--- a/client/coral-framework/graphql/anywhere.js
+++ b/client/coral-framework/graphql/anywhere.js
@@ -2,7 +2,7 @@ import graphql from '@coralproject/graphql-anywhere-optimized';
 import {createTypeGetter} from 'graphql-ast-tools';
 import introspectionData from './introspection.json';
 
-// User typeGetter to get more optimized documents.
+// Use typeGetter to get more optimized documents.
 const typeGetter = createTypeGetter(introspectionData);
 
 // Use global fragment cache for transformed fragments.

From d0d047f6414f06b4d1183c1b7e58c71631d59413 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 8 Dec 2017 15:04:33 -0700
Subject: [PATCH 260/344] fixed bug with load more

---
 client/coral-embed-stream/src/actions/auth.js          |  8 ++++++--
 client/coral-embed-stream/src/graphql/utils.js         | 10 +++++-----
 .../src/tabs/stream/containers/Stream.js               |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/actions/auth.js b/client/coral-embed-stream/src/actions/auth.js
index 22d46a768..4599a1cc7 100644
--- a/client/coral-embed-stream/src/actions/auth.js
+++ b/client/coral-embed-stream/src/actions/auth.js
@@ -304,6 +304,8 @@ const checkLoginSuccess = (user, isAdmin) => ({
   isAdmin
 });
 
+const ErrNotLoggedIn = new Error('Not logged in');
+
 export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
   dispatch(checkLoginRequest());
   rest('/auth')
@@ -312,7 +314,7 @@ export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
         if (storage) {
           storage.removeItem('token');
         }
-        throw new Error('Not logged in');
+        throw ErrNotLoggedIn;
       }
 
       // Reset the websocket.
@@ -327,7 +329,9 @@ export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
       }
     })
     .catch((error) => {
-      console.error(error);
+      if (error !== ErrNotLoggedIn) {
+        console.error(error);
+      }
       if (error.status && error.status === 401 && storage) {
 
         // Unauthorized.
diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index 0c46b45e3..8ab24d91f 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -141,18 +141,18 @@ export function findCommentWithId(nodes, id) {
   return findComment(nodes, (node) => node.id === id);
 }
 
-export function findCommentInEmbedQuery(root, callbackOrId) {
+export function findCommentInEmbedQuery(props, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
     callback = (node) => node.id === callbackOrId;
   }
-  if (root.asset.comment) {
-    return findComment([getTopLevelParent(root.asset.comment)], callback);
+  if (props.asset.comment) {
+    return findComment([getTopLevelParent(props.asset.comment)], callback);
   }
-  if (!root.asset.comments) {
+  if (!props.asset.comments) {
     return false;
   }
-  return findComment(root.asset.comments.nodes, callback);
+  return findComment(props.asset.comments.nodes, callback);
 }
 
 function findAndInsertFetchedComments(parent, comments, parent_id) {
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index dad69b960..b4f375632 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -108,7 +108,7 @@ class StreamContainer extends React.Component {
   }
 
   loadNewReplies = (parent_id) => {
-    const comment = findCommentInEmbedQuery(this.props.root, parent_id);
+    const comment = findCommentInEmbedQuery(this.props, parent_id);
 
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,

From 485b9d036f9dde0d4bc723a9c8efb68b6b708445 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 8 Dec 2017 15:07:15 -0700
Subject: [PATCH 261/344] version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7a8766a1e..1273015fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 71f0200557b47b1a3be252a561dd60bebf05e5e9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Dec 2017 23:14:40 +0100
Subject: [PATCH 262/344] Fix load more replies

---
 client/coral-embed-stream/src/graphql/utils.js       | 12 ++++++++----
 .../src/tabs/stream/containers/Stream.js             |  3 ++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index 0c46b45e3..f4be867dd 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -142,17 +142,21 @@ export function findCommentWithId(nodes, id) {
 }
 
 export function findCommentInEmbedQuery(root, callbackOrId) {
+  return findCommentInAsset(root.asset, callbackOrId);
+}
+
+export function findCommentInAsset(asset, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
     callback = (node) => node.id === callbackOrId;
   }
-  if (root.asset.comment) {
-    return findComment([getTopLevelParent(root.asset.comment)], callback);
+  if (asset.comment) {
+    return findComment([getTopLevelParent(asset.comment)], callback);
   }
-  if (!root.asset.comments) {
+  if (!asset.comments) {
     return false;
   }
-  return findComment(root.asset.comments.nodes, callback);
+  return findComment(asset.comments.nodes, callback);
 }
 
 function findAndInsertFetchedComments(parent, comments, parent_id) {
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index dad69b960..e132ab954 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -19,6 +19,7 @@ import {Spinner} from 'coral-ui';
 import {can} from 'coral-framework/services/perms';
 import {
   findCommentInEmbedQuery,
+  findCommentInAsset,
   insertCommentIntoEmbedQuery,
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
@@ -108,7 +109,7 @@ class StreamContainer extends React.Component {
   }
 
   loadNewReplies = (parent_id) => {
-    const comment = findCommentInEmbedQuery(this.props.root, parent_id);
+    const comment = findCommentInAsset(this.props.asset, parent_id);
 
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,

From 61d16fbe08902162211de8b1163ca3fb110e98f9 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 8 Dec 2017 15:17:28 -0700
Subject: [PATCH 263/344] Revert "Optimizations v2"

---
 client/coral-embed-stream/src/actions/auth.js |  8 ++-----
 .../coral-embed-stream/src/graphql/utils.js   | 10 ++++----
 .../src/tabs/stream/containers/Stream.js      |  2 +-
 client/coral-framework/graphql/anywhere.js    | 23 -------------------
 client/coral-framework/services/bootstrap.js  |  4 ++++
 client/coral-framework/services/graphql.js    | 18 ++++++++++++++-
 package.json                                  |  4 ++--
 webpack.config.js                             |  2 +-
 yarn.lock                                     | 12 +++++-----
 9 files changed, 38 insertions(+), 45 deletions(-)
 delete mode 100644 client/coral-framework/graphql/anywhere.js

diff --git a/client/coral-embed-stream/src/actions/auth.js b/client/coral-embed-stream/src/actions/auth.js
index 4599a1cc7..22d46a768 100644
--- a/client/coral-embed-stream/src/actions/auth.js
+++ b/client/coral-embed-stream/src/actions/auth.js
@@ -304,8 +304,6 @@ const checkLoginSuccess = (user, isAdmin) => ({
   isAdmin
 });
 
-const ErrNotLoggedIn = new Error('Not logged in');
-
 export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
   dispatch(checkLoginRequest());
   rest('/auth')
@@ -314,7 +312,7 @@ export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
         if (storage) {
           storage.removeItem('token');
         }
-        throw ErrNotLoggedIn;
+        throw new Error('Not logged in');
       }
 
       // Reset the websocket.
@@ -329,9 +327,7 @@ export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
       }
     })
     .catch((error) => {
-      if (error !== ErrNotLoggedIn) {
-        console.error(error);
-      }
+      console.error(error);
       if (error.status && error.status === 401 && storage) {
 
         // Unauthorized.
diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index 8ab24d91f..0c46b45e3 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -141,18 +141,18 @@ export function findCommentWithId(nodes, id) {
   return findComment(nodes, (node) => node.id === id);
 }
 
-export function findCommentInEmbedQuery(props, callbackOrId) {
+export function findCommentInEmbedQuery(root, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
     callback = (node) => node.id === callbackOrId;
   }
-  if (props.asset.comment) {
-    return findComment([getTopLevelParent(props.asset.comment)], callback);
+  if (root.asset.comment) {
+    return findComment([getTopLevelParent(root.asset.comment)], callback);
   }
-  if (!props.asset.comments) {
+  if (!root.asset.comments) {
     return false;
   }
-  return findComment(props.asset.comments.nodes, callback);
+  return findComment(root.asset.comments.nodes, callback);
 }
 
 function findAndInsertFetchedComments(parent, comments, parent_id) {
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index b4f375632..dad69b960 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -108,7 +108,7 @@ class StreamContainer extends React.Component {
   }
 
   loadNewReplies = (parent_id) => {
-    const comment = findCommentInEmbedQuery(this.props, parent_id);
+    const comment = findCommentInEmbedQuery(this.props.root, parent_id);
 
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
diff --git a/client/coral-framework/graphql/anywhere.js b/client/coral-framework/graphql/anywhere.js
deleted file mode 100644
index 7a93f16ea..000000000
--- a/client/coral-framework/graphql/anywhere.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import graphql from '@coralproject/graphql-anywhere-optimized';
-import {createTypeGetter} from 'graphql-ast-tools';
-import introspectionData from './introspection.json';
-
-// Use typeGetter to get more optimized documents.
-const typeGetter = createTypeGetter(introspectionData);
-
-// Use global fragment cache for transformed fragments.
-const fragmentMap = {};
-
-export default (...args) => {
-  while (args.length < 7) {
-    args.push(undefined);
-  }
-
-  const transformOptions = {
-    typeGetter,
-    fragmentMap,
-  };
-
-  args[6] = transformOptions;
-  return graphql(...args);
-};
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 1328b169d..3ef6629c1 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -124,6 +124,10 @@ export async function createContext({
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
+    {
+      introspectionData,
+      optimize: process.env.NODE_ENV === 'production',
+    },
   );
   if (!notification) {
 
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index d7b132bd4..fb40ecf71 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -1,3 +1,4 @@
+import {transformDocument, createTypeGetter} from 'graphql-ast-tools';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
@@ -5,7 +6,18 @@ import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
  * @param  {string}  basename  base path of the url
  * @return {Object}  histor service
  */
-export function createGraphQLService(registry) {
+export function createGraphQLService(registry, {
+  introspectionData,
+  optimize = false,
+}) {
+  const transformOptions = {
+    typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
+
+    // Use shared fragment map.
+    // Attention: Fragment names must be unique otherwise weird things will happen.
+    fragmentMap: {},
+  };
+
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
@@ -14,6 +26,10 @@ export function createGraphQLService(registry) {
         : documentOrCallback;
       document = registry.resolveFragments(document);
 
+      if (optimize) {
+        document = transformDocument(document, transformOptions);
+      }
+
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly
       // which require the resolved typenames.
diff --git a/package.json b/package.json
index 1273015fe..4712a75c4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.2",
+  "version": "3.8.1",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,
@@ -106,7 +106,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-ast-tools": "0.2.3",
+    "graphql-ast-tools": "^0.1.5",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index 14ac7caf5..60a49b6eb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
-      'graphql-anywhere': path.resolve(__dirname, 'client/coral-framework/graphql/anywhere'),
+      'graphql-anywhere': '@coralproject/graphql-anywhere-optimized',
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index ea99f0cfa..c01e2e85a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,10 @@
     eslint-plugin-react "^7.3.0"
 
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.5.tgz#67c862bf908ea717d9521ea76266b5bc9f109c65"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.3.tgz#f92f3906bb04f001aef725697237786752c49bd6"
   dependencies:
-    graphql-ast-tools "^0.2.2"
+    graphql-ast-tools "^0.1.6"
 
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
@@ -3521,9 +3521,9 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@0.2.3, graphql-ast-tools@^0.2.2:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.3.tgz#447fb05905ebb90f0a5bba81d5715249e9937135"
+graphql-ast-tools@^0.1.5, graphql-ast-tools@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.6.tgz#48eb656434bf4c7dba2a0d4784f1fdb988ab70ed"
   dependencies:
     apollo-utilities "^1.0.3"
 

From 812a4ee7043c41269faaad560734f0fe1b617d3a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 8 Dec 2017 15:19:01 -0700
Subject: [PATCH 264/344] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4712a75c4..4d556c48b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 4477c0981ff6bbb97654af2fc50539b98c51960f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Dec 2017 23:38:10 +0100
Subject: [PATCH 265/344] Reapply optimizations

---
 client/coral-framework/graphql/anywhere.js   | 23 ++++++++++++++++++++
 client/coral-framework/services/bootstrap.js |  4 ----
 client/coral-framework/services/graphql.js   | 18 +--------------
 package.json                                 |  2 +-
 webpack.config.js                            |  2 +-
 yarn.lock                                    | 12 +++++-----
 6 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 client/coral-framework/graphql/anywhere.js

diff --git a/client/coral-framework/graphql/anywhere.js b/client/coral-framework/graphql/anywhere.js
new file mode 100644
index 000000000..7a93f16ea
--- /dev/null
+++ b/client/coral-framework/graphql/anywhere.js
@@ -0,0 +1,23 @@
+import graphql from '@coralproject/graphql-anywhere-optimized';
+import {createTypeGetter} from 'graphql-ast-tools';
+import introspectionData from './introspection.json';
+
+// Use typeGetter to get more optimized documents.
+const typeGetter = createTypeGetter(introspectionData);
+
+// Use global fragment cache for transformed fragments.
+const fragmentMap = {};
+
+export default (...args) => {
+  while (args.length < 7) {
+    args.push(undefined);
+  }
+
+  const transformOptions = {
+    typeGetter,
+    fragmentMap,
+  };
+
+  args[6] = transformOptions;
+  return graphql(...args);
+};
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 3ef6629c1..1328b169d 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -124,10 +124,6 @@ export async function createContext({
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
-    {
-      introspectionData,
-      optimize: process.env.NODE_ENV === 'production',
-    },
   );
   if (!notification) {
 
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index fb40ecf71..d7b132bd4 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -1,4 +1,3 @@
-import {transformDocument, createTypeGetter} from 'graphql-ast-tools';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
@@ -6,18 +5,7 @@ import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
  * @param  {string}  basename  base path of the url
  * @return {Object}  histor service
  */
-export function createGraphQLService(registry, {
-  introspectionData,
-  optimize = false,
-}) {
-  const transformOptions = {
-    typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
-
-    // Use shared fragment map.
-    // Attention: Fragment names must be unique otherwise weird things will happen.
-    fragmentMap: {},
-  };
-
+export function createGraphQLService(registry) {
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
@@ -26,10 +14,6 @@ export function createGraphQLService(registry, {
         : documentOrCallback;
       document = registry.resolveFragments(document);
 
-      if (optimize) {
-        document = transformDocument(document, transformOptions);
-      }
-
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly
       // which require the resolved typenames.
diff --git a/package.json b/package.json
index 4d556c48b..1273015fe 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-ast-tools": "^0.1.5",
+    "graphql-ast-tools": "0.2.3",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index 60a49b6eb..14ac7caf5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
-      'graphql-anywhere': '@coralproject/graphql-anywhere-optimized',
+      'graphql-anywhere': path.resolve(__dirname, 'client/coral-framework/graphql/anywhere'),
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index c01e2e85a..ea99f0cfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,10 @@
     eslint-plugin-react "^7.3.0"
 
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.3.tgz#f92f3906bb04f001aef725697237786752c49bd6"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.5.tgz#67c862bf908ea717d9521ea76266b5bc9f109c65"
   dependencies:
-    graphql-ast-tools "^0.1.6"
+    graphql-ast-tools "^0.2.2"
 
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
@@ -3521,9 +3521,9 @@ graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 
-graphql-ast-tools@^0.1.5, graphql-ast-tools@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.1.6.tgz#48eb656434bf4c7dba2a0d4784f1fdb988ab70ed"
+graphql-ast-tools@0.2.3, graphql-ast-tools@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/graphql-ast-tools/-/graphql-ast-tools-0.2.3.tgz#447fb05905ebb90f0a5bba81d5715249e9937135"
   dependencies:
     apollo-utilities "^1.0.3"
 

From ed959ca07a4d7f0bfa2696375a1e525b82ea0ea4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 11 Dec 2017 20:21:27 +0100
Subject: [PATCH 266/344] Integrate react-virtualized

---
 .../src/components/CommentDetails.js          |   6 +-
 .../routes/Moderation/components/Comment.css  |   1 +
 .../routes/Moderation/components/Comment.js   |   6 +
 .../components/ModerationLayout.css           |   3 +
 .../Moderation/components/ModerationQueue.css |   9 +-
 .../Moderation/components/ModerationQueue.js  | 154 +++++++++++++-----
 .../Moderation/components/ViewOptions.css     |   1 +
 .../Moderation/containers/Moderation.js       |   2 +-
 package.json                                  |   1 +
 yarn.lock                                     |  16 +-
 10 files changed, 148 insertions(+), 51 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Moderation/components/ModerationLayout.css

diff --git a/client/coral-admin/src/components/CommentDetails.js b/client/coral-admin/src/components/CommentDetails.js
index cd504a40f..418be0354 100644
--- a/client/coral-admin/src/components/CommentDetails.js
+++ b/client/coral-admin/src/components/CommentDetails.js
@@ -21,10 +21,11 @@ class CommentDetails extends Component {
     this.setState((state) => ({
       showDetail: !state.showDetail
     }));
+    this.props.clearHeightCache && this.props.clearHeightCache();
   }
 
   render() {
-    const {data, root, comment} = this.props;
+    const {data, root, comment, clearHeightCache} = this.props;
     const {showDetail} = this.state;
     const queryData = {
       root,
@@ -44,12 +45,14 @@ class CommentDetails extends Component {
         <Slot
           fill="adminCommentDetailArea"
           data={data}
+          clearHeightCache={clearHeightCache}
           queryData={queryData}
           more={showDetail}
         />
         {showDetail && <Slot
           fill="adminCommentMoreDetails"
           data={data}
+          clearHeightCache={clearHeightCache}
           queryData={queryData}
         />}
       </div>
@@ -61,6 +64,7 @@ CommentDetails.propTypes = {
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object.isRequired,
+  clearHeightCache: PropTypes.func,
 };
 
 export default CommentDetails;
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index 10cc707fb..029a8e5d1 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -10,6 +10,7 @@
   position: relative;
   transition: all 200ms;
   padding: 10px 0;
+  margin-top: 13px;
   min-height: 0;
 
   /*
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index cea49720b..9f913695a 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -65,6 +65,7 @@ class Comment extends React.Component {
       root: {settings},
       currentUserId,
       currentAsset,
+      clearHeightCache,
     } = this.props;
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
@@ -114,6 +115,7 @@ class Comment extends React.Component {
                 <Slot
                   fill="adminCommentInfoBar"
                   data={data}
+                  clearHeightCache={clearHeightCache}
                   queryData={queryData}
                 />
               </div>
@@ -145,6 +147,7 @@ class Comment extends React.Component {
               <Slot
                 fill="adminCommentContent"
                 data={data}
+                clearHeightCache={clearHeightCache}
                 queryData={queryData}
               />
               <div className={styles.sideActions}>
@@ -166,6 +169,7 @@ class Comment extends React.Component {
                 <Slot
                   fill="adminSideActions"
                   data={data}
+                  clearHeightCache={clearHeightCache}
                   queryData={queryData}
                 />
               </div>
@@ -176,6 +180,7 @@ class Comment extends React.Component {
           data={data}
           root={root}
           comment={comment}
+          clearHeightCache={clearHeightCache}
         />
       </li>
     );
@@ -191,6 +196,7 @@ Comment.propTypes = {
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
+  clearHeightCache: PropTypes.func,
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationLayout.css b/client/coral-admin/src/routes/Moderation/components/ModerationLayout.css
new file mode 100644
index 000000000..7214b4550
--- /dev/null
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationLayout.css
@@ -0,0 +1,3 @@
+.root {
+  height: 100%;
+}
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index 6f1d4ae95..f9e3aa59a 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -2,7 +2,10 @@
   padding: 8px 0;
   list-style: none;
   display: block;
-  margin-top: 16px;
+}
+
+:global(html) {
+  height: inherit;
 }
 
 .list {
@@ -15,12 +18,12 @@
 }
 
 .commentLeaveActive {
-  opacity: 0;
+  opacity: 0.1;
   transition: opacity 800ms;
 }
 
 .commentEnter {
-  opacity: 0;
+  opacity: 0.1;
 }
 
 .commentEnterActive {
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index dc4a8c74c..a2c09c5df 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -7,7 +7,8 @@ import EmptyCard from '../../../components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
 import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
-import {CSSTransitionGroup} from 'react-transition-group';
+import {WindowScroller, CellMeasurer, CellMeasurerCache, List} from 'react-virtualized';
+import throttle from 'lodash/throttle';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -43,14 +44,37 @@ function invalidateCursor(invalidated, state, props) {
   return {idCursors};
 }
 
+let keyMapper = null;
+
+// In this example, average cell height is assumed to be about 50px.
+// This value will be used for the initial `Grid` layout.
+// Width is not dynamic.
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+  defaultHeight: 250,
+  keyMapper: (index) => keyMapper(index),
+});
+
 class ModerationQueue extends React.Component {
   isLoadingMore = false;
+  cache = cache;
+  listRef = null;
 
   constructor(props) {
     super(props);
     this.state = {
       ...resetCursors(this.state, props),
     };
+    keyMapper = (index) => {
+      const view = this.getVisibleComments();
+      if (index < view.length) {
+        return view[index].id;
+      }
+      else if (index === view.length) {
+        return 'loadMore';
+      }
+      throw new Error(`unknown index ${index}`);
+    };
   }
 
   componentDidUpdate (prev) {
@@ -64,6 +88,10 @@ class ModerationQueue extends React.Component {
     }
   }
 
+  handleListRef = (list) => {
+    this.listRef = list;
+  };
+
   componentWillReceiveProps(next) {
     const {comments: prevComments} = this.props;
     const {comments: nextComments} = next;
@@ -94,6 +122,11 @@ class ModerationQueue extends React.Component {
     this.setState(resetCursors);
   };
 
+  reflowList = throttle(() => {
+    this.cache.clearAll();
+    this.listRef.recomputeRowHeights();
+  }, 500);
+
   // getVisibileComments returns a list containing comments
   // which comes after the `idCursor`.
   getVisibleComments() {
@@ -117,14 +150,68 @@ class ModerationQueue extends React.Component {
     return view;
   }
 
+  rowRenderer = ({
+    index,       // Index of row within collection
+    parent,
+    style        // Style object to be applied to row (to position it)
+  }) => {
+    if (index === parent.props.rowCount - 1) {
+      return (
+        <CellMeasurer
+          cache={this.cache}
+          columnIndex={0}
+          key={'loadMore'}
+          parent={parent}
+          rowIndex={index}
+        >
+          <div
+            style={style}
+          >
+            <LoadMore
+              loadMore={this.props.loadMore}
+              showLoadMore={this.props.comments.length < this.props.commentCount}
+            />
+          </div>
+        </CellMeasurer>
+      );
+    }
+    const comment = this.props.comments[index];
+    return (
+      <CellMeasurer
+        cache={this.cache}
+        columnIndex={0}
+        key={comment.id}
+        parent={parent}
+        rowIndex={index}
+      >
+        <div
+          style={style}
+        >
+          <Comment
+            data={this.props.data}
+            root={this.props.root}
+            comment={comment}
+            selected={comment.id === this.props.selectedCommentId}
+            viewUserDetail={this.props.viewUserDetail}
+            showBanUserDialog={this.props.showBanUserDialog}
+            showSuspendUserDialog={this.props.showSuspendUserDialog}
+            acceptComment={this.props.acceptComment}
+            rejectComment={this.props.rejectComment}
+            currentAsset={this.props.currentAsset}
+            currentUserId={this.props.currentUserId}
+            clearHeightCache={() => {this.cache.clear(index); this.listRef.recomputeRowHeights(index); }}
+          />
+        </div>
+      </CellMeasurer>
+    );
+  };
+
   render () {
     const {
       comments,
       selectedCommentId,
-      commentCount,
       singleView,
       viewUserDetail,
-      activeTab,
       ...props
     } = this.props;
 
@@ -167,46 +254,27 @@ class ModerationQueue extends React.Component {
           viewMore={this.viewNewComments}
           count={comments.length - view.length}
         />
-        <CSSTransitionGroup
-          key={activeTab}
-          component={'ul'}
-          className={styles.list}
-          transitionName={{
-            enter: styles.commentEnter,
-            enterActive: styles.commentEnterActive,
-            leave: styles.commentLeave,
-            leaveActive: styles.commentLeaveActive,
-          }}
-          transitionEnter={true}
-          transitionLeave={true}
-          transitionEnterTimeout={1000}
-          transitionLeaveTimeout={1000}
-        >
-          {
-            view
-              .map((comment) => {
-                return <Comment
-                  data={this.props.data}
-                  root={this.props.root}
-                  key={comment.id}
-                  comment={comment}
-                  selected={comment.id === selectedCommentId}
-                  viewUserDetail={viewUserDetail}
-                  showBanUserDialog={props.showBanUserDialog}
-                  showSuspendUserDialog={props.showSuspendUserDialog}
-                  acceptComment={props.acceptComment}
-                  rejectComment={props.rejectComment}
-                  currentAsset={props.currentAsset}
-                  currentUserId={this.props.currentUserId}
-                />;
-              })
-          }
-        </CSSTransitionGroup>
-
-        <LoadMore
-          loadMore={this.props.loadMore}
-          showLoadMore={comments.length < commentCount}
-        />
+        <WindowScroller onResize={this.reflowList}>
+          {({height, isScrolling, onChildScroll, scrollTop}) => (
+            <List
+              ref={this.handleListRef}
+              autoHeight
+              style={{
+                width: '100%',
+                outline: 'none',
+              }}
+              height={height}
+              width={1280}
+              scrollTop={scrollTop}
+              isScrolling={isScrolling}
+              onScroll={onChildScroll}
+              rowCount={view.length + 1}
+              deferredMeasurementCache={this.cache}
+              rowRenderer={this.rowRenderer}
+              rowHeight={this.cache.rowHeight}
+            />
+          )}
+        </WindowScroller>
       </div>
     );
   }
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
index 3e5aae32d..68f089c27 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
@@ -8,6 +8,7 @@
   overflow: visible;
   height: 144px;
   min-height: auto;
+  margin-top: 16px;
   z-index: 10;
 
   @media (--tablet) {
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index ca6f0224a..b936b4c30 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -178,7 +178,7 @@ class ModerationContainer extends Component {
 
   loadMore = (tab) => {
     const variables = {
-      limit: 10,
+      limit: 50,
       cursor: this.props.root[tab].endCursor,
       sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
diff --git a/package.json b/package.json
index 4d556c48b..f16053ab5 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "react-test-renderer": "15.5",
     "react-toastify": "^1.5.0",
     "react-transition-group": "^1.1.3",
+    "react-virtualized": "9.9.0",
     "recompose": "^0.23.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
diff --git a/yarn.lock b/yarn.lock
index c01e2e85a..81fb50604 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1020,7 +1020,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -2402,7 +2402,7 @@ doctypes@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
 
-dom-helpers@^3.2.0:
+"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.2.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
 
@@ -5451,7 +5451,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -7464,6 +7464,16 @@ react-transition-group@^1.1.2, react-transition-group@^1.1.3:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
+react-virtualized@9.9.0:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.9.0.tgz#799a6f23819eeb82860d59b82fad33d1d420325e"
+  dependencies:
+    babel-runtime "^6.11.6"
+    classnames "^2.2.3"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.5.4"
+
 react@^15.3.1, react@^15.4.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

From f32e4523e8eb7108e68a64636beb190e217fcb84 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 12 Dec 2017 12:53:54 +0100
Subject: [PATCH 267/344] Make view more coments work with virtualized

---
 .../src/routes/Moderation/components/ModerationQueue.js  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index a2c09c5df..d73cd04a5 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -119,7 +119,7 @@ class ModerationQueue extends React.Component {
   }
 
   viewNewComments = () => {
-    this.setState(resetCursors);
+    this.setState(resetCursors, () => this.reflowList());
   };
 
   reflowList = throttle(() => {
@@ -155,7 +155,9 @@ class ModerationQueue extends React.Component {
     parent,
     style        // Style object to be applied to row (to position it)
   }) => {
-    if (index === parent.props.rowCount - 1) {
+    const view = this.getVisibleComments();
+    const rowCount = view.length + 1;
+    if (index === rowCount - 1) {
       return (
         <CellMeasurer
           cache={this.cache}
@@ -175,7 +177,8 @@ class ModerationQueue extends React.Component {
         </CellMeasurer>
       );
     }
-    const comment = this.props.comments[index];
+
+    const comment = view[index];
     return (
       <CellMeasurer
         cache={this.cache}

From b12d5f6bd7c0754ddff136861446f2ee0f4b2517 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 12 Dec 2017 17:19:11 +0100
Subject: [PATCH 268/344] Reimplement keyboard navigation

---
 client/coral-admin/src/actions/moderation.js  |  5 ++
 .../coral-admin/src/constants/moderation.js   |  1 +
 client/coral-admin/src/reducers/moderation.js |  6 ++
 .../routes/Moderation/components/Comment.css  |  1 +
 .../routes/Moderation/components/Comment.js   | 21 +++++
 .../Moderation/components/Moderation.js       | 90 ++-----------------
 .../Moderation/components/ModerationQueue.js  | 60 ++++++++++++-
 .../Moderation/containers/Moderation.js       |  5 +-
 8 files changed, 102 insertions(+), 87 deletions(-)

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index a3ff2ca3e..18e31091f 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -34,3 +34,8 @@ export const storySearchChange = (value) => ({
 export const clearState = () => ({
   type: actions.MODERATION_CLEAR_STATE
 });
+
+export const selectCommentId = (id) => ({
+  type: actions.MODERATION_SELECT_COMMENT,
+  id,
+});
diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js
index cae13947d..8eb939d76 100644
--- a/client/coral-admin/src/constants/moderation.js
+++ b/client/coral-admin/src/constants/moderation.js
@@ -6,3 +6,4 @@ export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
 export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
 export const MODERATION_CLEAR_STATE = 'MODERATION_CLEAR_STATE';
+export const MODERATION_SELECT_COMMENT = 'MODERATION_SELECT_COMMENT';
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index 43ae81573..6a64b380a 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -7,6 +7,7 @@ const initialState = {
   storySearchString: '',
   shortcutsNoteVisible: 'show',
   sortOrder: 'DESC',
+  selectedCommentId: '',
 };
 
 export default function moderation (state = initialState, action) {
@@ -51,6 +52,11 @@ export default function moderation (state = initialState, action) {
       ...state,
       sortOrder: action.order,
     };
+  case actions.MODERATION_SELECT_COMMENT:
+    return {
+      ...state,
+      selectedCommentId: action.id,
+    };
   default:
     return state;
   }
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index 029a8e5d1..708761b95 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -12,6 +12,7 @@
   padding: 10px 0;
   margin-top: 13px;
   min-height: 0;
+  outline: 0;
 
   /*
    Fix rendering issues in Safari by promoting this
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 9f913695a..4c08f1559 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -20,6 +20,16 @@ import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
+  ref = null;
+
+  handleRef = (ref) => this.ref = ref;
+
+  handleFocusOrClick = () => {
+    if (!this.props.selected) {
+      this.props.selectComment();
+    }
+  };
+
   showSuspendUserDialog = () => {
     const {comment, showSuspendUserDialog} = this.props;
     return showSuspendUserDialog({
@@ -55,6 +65,12 @@ class Comment extends React.Component {
     : this.props.rejectComment({commentId: this.props.comment.id})
   );
 
+  componentDidUpdate(prev) {
+    if (!prev.selected && this.props.selected) {
+      this.ref.focus();
+    }
+  }
+
   render() {
     const {
       comment,
@@ -76,6 +92,9 @@ class Comment extends React.Component {
         tabIndex={0}
         className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected}, 'talk-admin-moderate-comment')}
         id={`comment_${comment.id}`}
+        onClick={this.handleFocusOrClick}
+        ref={this.handleRef}
+        onFocus={this.handleFocusOrClick}
       >
         <div className={styles.container}>
           <div className={styles.itemHeader}>
@@ -190,7 +209,9 @@ class Comment extends React.Component {
 Comment.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
+  selectComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   className: PropTypes.string,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 392db36e3..594d5d57f 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -12,15 +12,8 @@ import Slot from 'coral-framework/components/Slot';
 import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
-  constructor(props) {
-    super(props);
-    const comments = this.getComments(props);
 
-    this.state = {
-      selectedCommentId: comments[0] ? comments[0].id : null,
-    };
-
-  }
+  state = {};
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
@@ -30,8 +23,6 @@ class Moderation extends Component {
     key('esc', () => toggleModal(false));
     key('ctrl+f', () => this.openSearch());
     key('t', () => this.nextQueue());
-    key('j', () => this.select(true));
-    key('k', () => this.select(false));
     key('f', () => this.moderate(false));
     key('d', () => this.moderate(true));
     this.getMenuItems()
@@ -96,64 +87,6 @@ class Moderation extends Component {
     return root[activeTab].nodes;
   }
 
-  scrollTo = (toId, smooth = true) =>
-    document.querySelector(`#comment_${toId}`).scrollIntoView(smooth ? {behavior: 'smooth'} : {});
-
-  select = async (next, props = this.props, selectedCommentId = this.state.selectedCommentId) => {
-    const comments = this.getComments(props);
-
-    // No comments to be selected.
-    if (comments.length === 0){
-      return;
-    }
-
-    // Find current index if we have a selected comment.
-    const index = selectedCommentId
-      ? comments.findIndex((comment) => comment.id === selectedCommentId)
-      : null;
-
-    if (next) {
-
-      // Grab first one if we don't have a selected comment yet.
-      if (!selectedCommentId) {
-        this.setState({selectedCommentId: comments[0].id}, () => this.scrollTo(comments[0].id));
-        return;
-      }
-
-      // Select next one when we still have more comments left.
-      if (index < comments.length - 1) {
-        this.setState({selectedCommentId: comments[index + 1].id}, () => this.scrollTo(comments[index + 1].id));
-        return;
-      } else {
-
-        // We hit the end of the list, load more comments if we have.
-        if (comments.length < this.getActiveTabCount()) {
-          const res = await this.loadMore();
-
-          // If `loadMore` was already in progress, res would be false.
-          if (res) {
-
-            // Select next comment after loading has completed.
-            this.select(true);
-          }
-        }
-        return;
-      }
-    } else {
-
-      // We have no selected comment, so just skip it.
-      if (!selectedCommentId) {
-        return;
-      }
-
-      // If we still have previous comments take the one before.
-      if (index > 0) {
-        this.setState({selectedCommentId: comments[index - 1].id}, () => this.scrollTo(comments[index - 1].id));
-        return;
-      }
-    }
-  }
-
   loadMore = async () => {
     if (!this.isLoadingMore) {
       this.isLoadingMore = true;
@@ -176,8 +109,6 @@ class Moderation extends Component {
     key.unbind('esc');
     key.unbind('ctrl+f');
     key.unbind('t');
-    key.unbind('j');
-    key.unbind('k');
     key.unbind('f');
     key.unbind('d');
     this.getMenuItems()
@@ -186,11 +117,8 @@ class Moderation extends Component {
 
   componentWillReceiveProps(nextProps) {
 
-    if (this.props.activeTab !== nextProps.activeTab) {
-
-      // Reset selection when changing tabs.
-      this.select(true, nextProps, null);
-    } else {
+    // TODO: Adapt to react virtualized.
+    if (this.props.activeTab === nextProps.activeTab) {
 
       // Detect if comment has left the queue and find next or prev selected comment to set it
       // as the new selectedCommentId.
@@ -218,14 +146,6 @@ class Moderation extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
-
-    // Scroll to comment when changing from single wiew to normal view.
-    if (prevProps.moderation.singleView !== this.props.moderation.singleView && this.state.selectedCommentId) {
-      this.scrollTo(this.state.selectedCommentId, false);
-    }
-  }
-
   render () {
     const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
@@ -268,7 +188,7 @@ class Moderation extends Component {
             comments={comments.nodes}
             activeTab={activeTab}
             singleView={moderation.singleView}
-            selectedCommentId={this.state.selectedCommentId}
+            selectedCommentId={moderation.selectedCommentId}
             showBanUserDialog={props.showBanUserDialog}
             showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
@@ -277,6 +197,7 @@ class Moderation extends Component {
             commentCount={activeTabCount}
             currentUserId={this.props.auth.user.id}
             viewUserDetail={viewUserDetail}
+            selectCommentId={props.selectCommentId}
           />
           <ModerationKeysModal
             hideShortcutsNote={props.hideShortcutsNote}
@@ -307,6 +228,7 @@ class Moderation extends Component {
 Moderation.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   toggleModal: PropTypes.func.isRequired,
+  selectedCommentId: PropTypes.string,
   toggleStorySearch: PropTypes.func.isRequired,
   getModPath: PropTypes.func.isRequired,
   storySearchChange: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index d73cd04a5..3963e9c01 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -9,6 +9,7 @@ import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
 import {WindowScroller, CellMeasurer, CellMeasurerCache, List} from 'react-virtualized';
 import throttle from 'lodash/throttle';
+import key from 'keymaster';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -75,6 +76,46 @@ class ModerationQueue extends React.Component {
       }
       throw new Error(`unknown index ${index}`);
     };
+    const view = this.getVisibleComments();
+    if (view.length) {
+      props.selectCommentId(view[0].id);
+    }
+  }
+
+  componentDidMount() {
+    key('j', () => this.selectDown());
+    key('k', () => this.selectUp());
+  }
+
+  componentWillUnmount() {
+    key.unbind('j');
+    key.unbind('k');
+  }
+
+  async selectDown() {
+    const view = this.getVisibleComments();
+    const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
+    if (index === view.length - 1 && this.props.comments.length !== this.props.commentCount) {
+      await this.props.loadMore();
+      this.selectDown();
+      return;
+    }
+    if (index < view.length - 1) {
+      this.props.selectCommentId(view[index + 1].id);
+    }
+  }
+
+  selectUp() {
+    const view = this.getVisibleComments();
+    const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
+
+    if (index === 0 && view.length < this.props.comments.length) {
+      this.viewNewComments(() => this.selectUp());
+      return;
+    }
+    if (index > 0) {
+      this.props.selectCommentId(view[index - 1].id);
+    }
   }
 
   componentDidUpdate (prev) {
@@ -86,6 +127,15 @@ class ModerationQueue extends React.Component {
     if (prev.comments.length > 0 && comments.length === 0 && commentCount > 0) {
       this.props.loadMore();
     }
+
+    // Scroll to selected comment.
+    if (prev.selectedCommentId !== this.props.selectedCommentId) {
+
+      const view = this.getVisibleComments();
+      const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
+
+      this.listRef.scrollToRow(index);
+    }
   }
 
   handleListRef = (list) => {
@@ -118,8 +168,11 @@ class ModerationQueue extends React.Component {
     }
   }
 
-  viewNewComments = () => {
-    this.setState(resetCursors, () => this.reflowList());
+  viewNewComments = (callback) => {
+    this.setState(resetCursors, () => {
+      this.reflowList();
+      callback && callback();
+    });
   };
 
   reflowList = throttle(() => {
@@ -203,6 +256,7 @@ class ModerationQueue extends React.Component {
             currentAsset={this.props.currentAsset}
             currentUserId={this.props.currentUserId}
             clearHeightCache={() => {this.cache.clear(index); this.listRef.recomputeRowHeights(index); }}
+            selectComment={() => this.props.selectCommentId(comment.id)}
           />
         </div>
       </CellMeasurer>
@@ -244,6 +298,7 @@ class ModerationQueue extends React.Component {
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
             currentUserId={this.props.currentUserId}
+            selectComment={() => this.props.selectCommentId(comment.id)}
           />;
         </div>
       );
@@ -287,6 +342,7 @@ ModerationQueue.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,
+  selectCommentId: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index b936b4c30..d858cc856 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -23,7 +23,8 @@ import {
   toggleStorySearch,
   setSortOrder,
   storySearchChange,
-  clearState
+  clearState,
+  selectCommentId,
 } from 'actions/moderation';
 import withQueueConfig from '../hoc/withQueueConfig';
 import {notify} from 'coral-framework/actions/notification';
@@ -246,6 +247,7 @@ class ModerationContainer extends Component {
       activeTab={this.activeTab}
       queueConfig={currentQueueConfig}
       handleCommentChange={this.handleCommentChange}
+      selectedCommentId={this.props.selectedCommentId}
     />;
   }
 }
@@ -423,6 +425,7 @@ const mapDispatchToProps = (dispatch) => ({
     storySearchChange,
     clearState,
     notify,
+    selectCommentId,
   }, dispatch),
 });
 

From 51bd109f13b5afe3f34ca81ae504bc0108e57bb5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 12 Dec 2017 17:28:38 +0100
Subject: [PATCH 269/344] Fix some bugs

---
 client/coral-admin/src/routes/Moderation/components/Comment.js | 2 +-
 .../src/routes/Moderation/components/ModerationQueue.js        | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 4c08f1559..0856e4657 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -209,7 +209,7 @@ class Comment extends React.Component {
 Comment.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
-  selectComment: PropTypes.func.isRequired,
+  selectComment: PropTypes.func,
   rejectComment: PropTypes.func.isRequired,
   onClick: PropTypes.func,
   className: PropTypes.string,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 3963e9c01..87833151a 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -129,7 +129,7 @@ class ModerationQueue extends React.Component {
     }
 
     // Scroll to selected comment.
-    if (prev.selectedCommentId !== this.props.selectedCommentId) {
+    if (prev.selectedCommentId !== this.props.selectedCommentId && this.listRef) {
 
       const view = this.getVisibleComments();
       const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
@@ -298,7 +298,6 @@ class ModerationQueue extends React.Component {
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
             currentUserId={this.props.currentUserId}
-            selectComment={() => this.props.selectCommentId(comment.id)}
           />;
         </div>
       );

From 30073b88f1e6371e607af2577fd15e7fafcfd5cb Mon Sep 17 00:00:00 2001
From: Stephen Donner <stephen.donner@gmail.com>
Date: Wed, 13 Dec 2017 03:49:35 -0600
Subject: [PATCH 270/344] s/setup/setup

---
 docs/_docs/01-01-talk-quickstart.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_docs/01-01-talk-quickstart.md b/docs/_docs/01-01-talk-quickstart.md
index c5e7a20ee..811bfe5ed 100644
--- a/docs/_docs/01-01-talk-quickstart.md
+++ b/docs/_docs/01-01-talk-quickstart.md
@@ -26,7 +26,7 @@ to persist data. The following versions are supported:
 
 An optional dependency for Talk is
 [Docker](https://www.docker.com/community-edition#/download){:target="_blank"}.
-It is used during [development](#development) to setup the database and can be
+It is used during [development](#development) to set up the database and can be
 used to [install via Docker](#installation-from-docker).  We have tested Talk
 and this documentation with versions {{ site.versions.docker }}.
 
@@ -182,4 +182,4 @@ machine.
 
 At this point you've successfully installed, configured, and ran your very own
 instance of Talk! Continue through this documentation on this site to learn more
-on how to configure, develop with, and contribute to Talk!
\ No newline at end of file
+on how to configure, develop with, and contribute to Talk!

From df925f5a1a4743a15940ce6469508b09e9b506f6 Mon Sep 17 00:00:00 2001
From: Jeff Nelson <jtnelson1@gmail.com>
Date: Wed, 13 Dec 2017 07:38:10 -0600
Subject: [PATCH 271/344] Fix logic to generate asset_url even if the asset_id
 is provided so an error is avoided

---
 client/coral-embed/src/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index f60a88439..935972795 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -70,10 +70,9 @@ export class Talk {
     // Extract the asset url.
     if (opts.asset_url) {
       query.asset_url = opts.asset_url;
-    } else if (!opts.asset_id) {
+    } else {
 
-      // The asset url was not provided and the asset id was also not provided,
-      // we need to infer the asset url from details on the page.
+      // The asset url was not provided so we need to infer the asset url from // details on the page.
 
       try {
         query.asset_url = document.querySelector('link[rel="canonical"]').href;

From 5548deb6b55fedba3133233a416d88e94ddc4712 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 13 Dec 2017 15:06:01 +0100
Subject: [PATCH 272/344] Auto Load More and other bug fixes

---
 .../routes/Moderation/components/AutoLoadMore.js | 16 ++++++++++++++++
 .../routes/Moderation/components/Moderation.js   | 13 ++++++++-----
 .../Moderation/components/ModerationQueue.css    |  1 +
 .../Moderation/components/ModerationQueue.js     | 11 ++++++-----
 .../routes/Moderation/containers/Moderation.js   |  5 +++--
 client/coral-framework/hocs/withQuery.js         |  3 +++
 package.json                                     |  2 +-
 yarn.lock                                        | 10 +++++-----
 8 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js

diff --git a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
new file mode 100644
index 000000000..d2148f87f
--- /dev/null
+++ b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Spinner} from 'coral-ui';
+
+class AutoLoadMore extends React.Component {
+  componentDidMount() {
+    if(!this.props.loading) {
+      this.props.loadMore();
+    }
+  }
+
+  render() {
+    return <Spinner />;
+  }
+}
+
+export default AutoLoadMore;
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 594d5d57f..5967ff556 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -13,7 +13,9 @@ import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
 
-  state = {};
+  state = {
+    isLoadingMore: false,
+  };
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
@@ -88,15 +90,15 @@ class Moderation extends Component {
   }
 
   loadMore = async () => {
-    if (!this.isLoadingMore) {
-      this.isLoadingMore = true;
+    if (!this.state.isLoadingMore) {
+      this.setState({isLoadingMore: true});
       try {
         const result = await this.props.loadMore(this.props.activeTab);
-        this.isLoadingMore = false;
+        this.setState({isLoadingMore: false});
         return result;
       }
       catch (e) {
-        this.isLoadingMore = false;
+        this.setState({isLoadingMore: false});
         throw e;
       }
     }
@@ -194,6 +196,7 @@ class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
+            isLoadingMore={this.state.isLoadingMore}
             commentCount={activeTabCount}
             currentUserId={this.props.auth.user.id}
             viewUserDetail={viewUserDetail}
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index f9e3aa59a..e39bb67fe 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -2,6 +2,7 @@
   padding: 8px 0;
   list-style: none;
   display: block;
+  min-height: 650px;
 }
 
 :global(html) {
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 87833151a..e069c3033 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Comment from '../containers/Comment';
 import styles from './ModerationQueue.css';
 import EmptyCard from '../../../components/EmptyCard';
-import LoadMore from '../../../components/LoadMore';
+import AutoLoadMore from './AutoLoadMore';
 import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
 import {WindowScroller, CellMeasurer, CellMeasurerCache, List} from 'react-virtualized';
@@ -57,7 +57,6 @@ const cache = new CellMeasurerCache({
 });
 
 class ModerationQueue extends React.Component {
-  isLoadingMore = false;
   cache = cache;
   listRef = null;
 
@@ -222,9 +221,9 @@ class ModerationQueue extends React.Component {
           <div
             style={style}
           >
-            <LoadMore
+            <AutoLoadMore
               loadMore={this.props.loadMore}
-              showLoadMore={this.props.comments.length < this.props.commentCount}
+              loading={this.props.isLoadingMore}
             />
           </div>
         </CellMeasurer>
@@ -304,6 +303,7 @@ class ModerationQueue extends React.Component {
     }
 
     const view = this.getVisibleComments();
+    const hasMore = this.props.comments.length < this.props.commentCount;
 
     return (
       <div className={styles.root}>
@@ -325,7 +325,7 @@ class ModerationQueue extends React.Component {
               scrollTop={scrollTop}
               isScrolling={isScrolling}
               onScroll={onChildScroll}
-              rowCount={view.length + 1}
+              rowCount={hasMore ? view.length + 1 : view.length}
               deferredMeasurementCache={this.cache}
               rowRenderer={this.rowRenderer}
               rowHeight={this.cache.rowHeight}
@@ -350,6 +350,7 @@ ModerationQueue.propTypes = {
   loadMore: PropTypes.func.isRequired,
   selectedCommentId: PropTypes.string,
   singleView: PropTypes.bool,
+  isLoadingMore: PropTypes.bool,
   activeTab: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index d858cc856..29b64f0aa 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -179,7 +179,7 @@ class ModerationContainer extends Component {
 
   loadMore = (tab) => {
     const variables = {
-      limit: 50,
+      limit: 20,
       cursor: this.props.root[tab].endCursor,
       sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
@@ -363,7 +363,8 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
         ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
         ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
-        sortOrder: $sortOrder
+        sortOrder: $sortOrder,
+        limit: 20,
       }) {
         ...CoralAdmin_Moderation_CommentConnection
       }
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 280191f89..ffd5a1671 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -83,6 +83,9 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     // Handle any pending susbcription data in the subscription queue at max once every second.
     // Updates are batched in written into apollo in one go.
     processSubscriptionQueue = throttle(() => {
+      if (!this.subscriptionQueue.length) {
+        return;
+      }
       const variables = typeof this.wrappedOptions === 'function'
         ? this.wrappedOptions(this.props).variables
         : this.wrappedOptions.variables;
diff --git a/package.json b/package.json
index f16053ab5..ab37b62f5 100644
--- a/package.json
+++ b/package.json
@@ -167,7 +167,7 @@
     "react-test-renderer": "15.5",
     "react-toastify": "^1.5.0",
     "react-transition-group": "^1.1.3",
-    "react-virtualized": "9.9.0",
+    "react-virtualized": "9.13.0",
     "recompose": "^0.23.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
diff --git a/yarn.lock b/yarn.lock
index 81fb50604..27728e2ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1020,7 +1020,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
+babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -7464,11 +7464,11 @@ react-transition-group@^1.1.2, react-transition-group@^1.1.3:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-virtualized@9.9.0:
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.9.0.tgz#799a6f23819eeb82860d59b82fad33d1d420325e"
+react-virtualized@9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.13.0.tgz#83e4d984271a37631225e5fe6faeaeada6e59f53"
   dependencies:
-    babel-runtime "^6.11.6"
+    babel-runtime "^6.23.0"
     classnames "^2.2.3"
     dom-helpers "^2.4.0 || ^3.0.0"
     loose-envify "^1.3.0"

From 2779734ec0bfda8278f1bbf483550ebe9dff392c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 13 Dec 2017 15:25:47 +0100
Subject: [PATCH 273/344] Workaround

---
 .../src/routes/Moderation/components/ModerationQueue.js        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index e069c3033..118d2fea3 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -84,6 +84,9 @@ class ModerationQueue extends React.Component {
   componentDidMount() {
     key('j', () => this.selectDown());
     key('k', () => this.selectUp());
+
+    // TODO: Workaround for issue https://github.com/bvaughn/react-virtualized/issues/866
+    this.reflowList();
   }
 
   componentWillUnmount() {

From 34289e3340365ce2bf44b4f7f8aadbfcf192bbc9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 12:35:26 +0100
Subject: [PATCH 274/344] Refactor view

---
 .../Moderation/components/ModerationQueue.js  | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 118d2fea3..29aa2c9c3 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -18,14 +18,15 @@ const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 // comments to show. The spare cursor functions as a backup in case one
 // of the comments gets deleted.
 function resetCursors(state, props) {
+  let idCursors = [];
   if (props.comments && props.comments.length) {
-    const idCursors = [props.comments[0].id];
+    idCursors.push(props.comments[0].id);
     if (props.comments[1]) {
       idCursors.push(props.comments[1].id);
     }
-    return {idCursors};
   }
-  return {idCursors: []};
+  const view = getVisibleComments(props.comments, idCursors[0]);
+  return {idCursors, view};
 }
 
 // invalidateCursor is called whenever a comment is removed which is referenced
@@ -42,7 +43,29 @@ function invalidateCursor(invalidated, state, props) {
       idCursors.push(nextInLine.id);
     }
   }
-  return {idCursors};
+  const view = getVisibleComments(props.comments, idCursors[0]);
+  return {idCursors, view};
+}
+
+// getVisibileComments returns a list containing comments
+// which comes after the `idCursor`.
+function getVisibleComments(comments, idCursor) {
+
+  if (!comments) {
+    return [];
+  }
+
+  const view = [];
+  let pastCursor = false;
+  comments.forEach((comment) => {
+    if (comment.id === idCursor) {
+      pastCursor = true;
+    }
+    if (pastCursor) {
+      view.push(comment);
+    }
+  });
+  return view;
 }
 
 let keyMapper = null;
@@ -66,7 +89,7 @@ class ModerationQueue extends React.Component {
       ...resetCursors(this.state, props),
     };
     keyMapper = (index) => {
-      const view = this.getVisibleComments();
+      const view = this.state.view;
       if (index < view.length) {
         return view[index].id;
       }
@@ -75,9 +98,8 @@ class ModerationQueue extends React.Component {
       }
       throw new Error(`unknown index ${index}`);
     };
-    const view = this.getVisibleComments();
-    if (view.length) {
-      props.selectCommentId(view[0].id);
+    if (this.state.view.length) {
+      props.selectCommentId(this.state.view[0].id);
     }
   }
 
@@ -95,7 +117,7 @@ class ModerationQueue extends React.Component {
   }
 
   async selectDown() {
-    const view = this.getVisibleComments();
+    const view = this.state.view;
     const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
     if (index === view.length - 1 && this.props.comments.length !== this.props.commentCount) {
       await this.props.loadMore();
@@ -108,7 +130,7 @@ class ModerationQueue extends React.Component {
   }
 
   selectUp() {
-    const view = this.getVisibleComments();
+    const view = this.state.view;
     const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
 
     if (index === 0 && view.length < this.props.comments.length) {
@@ -133,7 +155,7 @@ class ModerationQueue extends React.Component {
     // Scroll to selected comment.
     if (prev.selectedCommentId !== this.props.selectedCommentId && this.listRef) {
 
-      const view = this.getVisibleComments();
+      const view = this.state.view;
       const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
 
       this.listRef.scrollToRow(index);
@@ -155,7 +177,7 @@ class ModerationQueue extends React.Component {
 
     if (
       prevComments && nextComments &&
-        nextComments.length < prevComments.length
+      nextComments.length < prevComments.length
     ) {
 
       // Invalidate first cursor if referenced comment was removed.
@@ -167,6 +189,11 @@ class ModerationQueue extends React.Component {
       if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
         this.setState(invalidateCursor(1, this.state, next));
       }
+      return;
+    }
+
+    if (prevComments !== nextComments) {
+      this.setState({view: getVisibleComments(nextComments, this.state.idCursors[0])});
     }
   }
 
@@ -182,35 +209,12 @@ class ModerationQueue extends React.Component {
     this.listRef.recomputeRowHeights();
   }, 500);
 
-  // getVisibileComments returns a list containing comments
-  // which comes after the `idCursor`.
-  getVisibleComments() {
-    const {comments} = this.props;
-    const idCursor = this.state.idCursors[0];
-
-    if (!comments) {
-      return [];
-    }
-
-    const view = [];
-    let pastCursor = false;
-    comments.forEach((comment) => {
-      if (comment.id === idCursor) {
-        pastCursor = true;
-      }
-      if (pastCursor) {
-        view.push(comment);
-      }
-    });
-    return view;
-  }
-
   rowRenderer = ({
     index,       // Index of row within collection
     parent,
     style        // Style object to be applied to row (to position it)
   }) => {
-    const view = this.getVisibleComments();
+    const view = this.state.view;
     const rowCount = view.length + 1;
     if (index === rowCount - 1) {
       return (
@@ -305,13 +309,13 @@ class ModerationQueue extends React.Component {
       );
     }
 
-    const view = this.getVisibleComments();
+    const view = this.state.view;
     const hasMore = this.props.comments.length < this.props.commentCount;
 
     return (
       <div className={styles.root}>
         <ViewMore
-          viewMore={this.viewNewComments}
+          viewMore={() => this.viewNewComments()}
           count={comments.length - view.length}
         />
         <WindowScroller onResize={this.reflowList}>

From 5e6d22f1afa17d3c07c7cb99bb4c51b95fa569d0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 13:38:01 +0100
Subject: [PATCH 275/344] Handle removing comments from queue

---
 .../Moderation/components/Moderation.js       | 34 +------------
 .../Moderation/components/ModerationQueue.js  | 49 +++++++++++++++----
 2 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 5967ff556..e2353a2a2 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -67,8 +67,7 @@ class Moderation extends Component {
   }
 
   moderate = (accept) => {
-    const {acceptComment, rejectComment} = this.props;
-    const {selectedCommentId} = this.state;
+    const {acceptComment, rejectComment, moderation: {selectedCommentId}} = this.props;
 
     // Accept or reject only if there's a selected comment
     if(selectedCommentId != null){
@@ -117,37 +116,6 @@ class Moderation extends Component {
       .forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
   }
 
-  componentWillReceiveProps(nextProps) {
-
-    // TODO: Adapt to react virtualized.
-    if (this.props.activeTab === nextProps.activeTab) {
-
-      // Detect if comment has left the queue and find next or prev selected comment to set it
-      // as the new selectedCommentId.
-      const prevComments = this.getComments(this.props);
-      const nextComments = this.getComments(nextProps);
-      if (nextComments.length < prevComments.length) {
-
-        // Comments have changed, now check if our selected comment has left the queue.
-        if (
-          this.state.selectedCommentId &&
-          !nextComments.some((comment) => comment.id === this.state.selectedCommentId)
-        ) {
-
-          // Determine a comment to select.
-          const prevIndex = prevComments.findIndex((comment) => comment.id === this.state.selectedCommentId);
-          if (prevIndex !== prevComments.length - 1) {
-            this.setState({selectedCommentId: prevComments[prevIndex + 1].id});
-          } else if(prevIndex > 0) {
-            this.setState({selectedCommentId: prevComments[prevIndex - 1].id});
-          } else {
-            this.setState({selectedCommentId: null});
-          }
-        }
-      }
-    }
-  }
-
   render () {
     const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 29aa2c9c3..4f2f108b4 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -43,8 +43,7 @@ function invalidateCursor(invalidated, state, props) {
       idCursors.push(nextInLine.id);
     }
   }
-  const view = getVisibleComments(props.comments, idCursors[0]);
-  return {idCursors, view};
+  return idCursors;
 }
 
 // getVisibileComments returns a list containing comments
@@ -175,6 +174,8 @@ class ModerationQueue extends React.Component {
       return;
     }
 
+    let idCursors = this.state.idCursors;
+
     if (
       prevComments && nextComments &&
       nextComments.length < prevComments.length
@@ -182,18 +183,40 @@ class ModerationQueue extends React.Component {
 
       // Invalidate first cursor if referenced comment was removed.
       if (this.state.idCursors[0] && !hasComment(nextComments, this.state.idCursors[0])) {
-        this.setState(invalidateCursor(0, this.state, next));
+        idCursors = invalidateCursor(0, this.state, next);
       }
 
       // Invalidate second cursor if referenced comment was removed.
       if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
-        this.setState(invalidateCursor(1, this.state, next));
+        idCursors = invalidateCursor(1, this.state, next);
+      }
+
+      if (
+        this.props.selectedCommentId &&
+        !hasComment(nextComments, this.props.selectedCommentId)
+      ) {
+        const view = this.state.view;
+        let nextSelectedCommentId = null;
+
+        // Determine a comment to select.
+        const prevIndex = view.findIndex((comment) => comment.id === this.props.selectedCommentId);
+        if (prevIndex !== view.length - 1) {
+          nextSelectedCommentId = view[prevIndex + 1].id;
+        } else if(prevIndex > 0) {
+          nextSelectedCommentId = view[prevIndex - 1].id;
+        }
+        this.props.selectCommentId(nextSelectedCommentId);
       }
-      return;
     }
 
     if (prevComments !== nextComments) {
-      this.setState({view: getVisibleComments(nextComments, this.state.idCursors[0])});
+      const nextView = getVisibleComments(nextComments, idCursors[0]);
+      this.setState({idCursors, view: nextView});
+
+      // TODO: removing a comment from the list seems to render incorrect..
+      // Find first changed comment and perform a reflow.
+      const index = this.state.view.findIndex((comment, i) => nextView[i] !== comment);
+      this.reflowList(index);
     }
   }
 
@@ -204,9 +227,15 @@ class ModerationQueue extends React.Component {
     });
   };
 
-  reflowList = throttle(() => {
-    this.cache.clearAll();
-    this.listRef.recomputeRowHeights();
+  reflowList = throttle((index) => {
+    if (index >= 0) {
+      this.cache.clear(index);
+      this.listRef.recomputeRowHeights(index);
+    }
+    else {
+      this.cache.clearAll();
+      this.listRef.recomputeRowHeights();
+    }
   }, 500);
 
   rowRenderer = ({
@@ -261,7 +290,7 @@ class ModerationQueue extends React.Component {
             rejectComment={this.props.rejectComment}
             currentAsset={this.props.currentAsset}
             currentUserId={this.props.currentUserId}
-            clearHeightCache={() => {this.cache.clear(index); this.listRef.recomputeRowHeights(index); }}
+            clearHeightCache={() => this.reflowList(index)}
             selectComment={() => this.props.selectCommentId(comment.id)}
           />
         </div>

From f32bb5ce8f80ab62fed1bcea14ca8291f83e30ed Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 13:55:08 +0100
Subject: [PATCH 276/344] Small adjustments

---
 .../src/routes/Moderation/components/ModerationQueue.js    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 4f2f108b4..0ae6fc2e4 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -69,9 +69,6 @@ function getVisibleComments(comments, idCursor) {
 
 let keyMapper = null;
 
-// In this example, average cell height is assumed to be about 50px.
-// This value will be used for the initial `Grid` layout.
-// Width is not dynamic.
 const cache = new CellMeasurerCache({
   fixedWidth: true,
   defaultHeight: 250,
@@ -213,9 +210,9 @@ class ModerationQueue extends React.Component {
       const nextView = getVisibleComments(nextComments, idCursors[0]);
       this.setState({idCursors, view: nextView});
 
-      // TODO: removing a comment from the list seems to render incorrect..
+      // TODO: removing or adding a comment from the list seems to render incorrect, is this a bug?
       // Find first changed comment and perform a reflow.
-      const index = this.state.view.findIndex((comment, i) => nextView[i] !== comment);
+      const index = this.state.view.findIndex((comment, i) => !nextView[i] || nextView[i].id !== comment.id);
       this.reflowList(index);
     }
   }

From 62c2d551f80c7fbe4429746859479984bc4e236e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 15:57:44 +0100
Subject: [PATCH 277/344] Append comments only

---
 client/coral-admin/src/routes/Moderation/graphql.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index 866218d73..8ee728a5e 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -45,17 +45,14 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
     return root;
   }
 
-  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
   const changes = {
     [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
   };
 
   if (shouldCommentBeAdded(root, queue, comment, sortOrder)) {
-    const nodes = root[queue].nodes.concat(comment).sort(sortAlgo);
+    const nodes = root[queue].nodes.concat(comment);
     changes[queue] = {
       nodes: {$set: nodes},
-      startCursor: {$set: nodes[0].created_at},
-      endCursor: {$set: nodes[nodes.length - 1].created_at},
     };
   }
 

From 60f6c63c8a089b15e5f65c48b25c578ade8eaf5d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 16:29:31 +0100
Subject: [PATCH 278/344] Restrict notifications to comments which are rendered

---
 .../Moderation/components/ModerationQueue.js  | 15 ++++++------
 .../src/routes/Moderation/graphql.js          | 23 +++++++++++++------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 0ae6fc2e4..13a09e1ed 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -166,7 +166,7 @@ class ModerationQueue extends React.Component {
     const {comments: prevComments} = this.props;
     const {comments: nextComments} = next;
 
-    if (!prevComments && nextComments) {
+    if (!prevComments && nextComments || !prevComments.length && nextComments.length) {
       this.setState(resetCursors);
       return;
     }
@@ -227,11 +227,11 @@ class ModerationQueue extends React.Component {
   reflowList = throttle((index) => {
     if (index >= 0) {
       this.cache.clear(index);
-      this.listRef.recomputeRowHeights(index);
+      this.listRef && this.listRef.recomputeRowHeights(index);
     }
     else {
       this.cache.clearAll();
-      this.listRef.recomputeRowHeights();
+      this.listRef && this.listRef.recomputeRowHeights();
     }
   }, 500);
 
@@ -243,6 +243,7 @@ class ModerationQueue extends React.Component {
     const view = this.state.view;
     const rowCount = view.length + 1;
     if (index === rowCount - 1) {
+      const hasMore = this.props.comments.length < this.props.commentCount;
       return (
         <CellMeasurer
           cache={this.cache}
@@ -253,11 +254,12 @@ class ModerationQueue extends React.Component {
         >
           <div
             style={style}
+            id={'end-of-comment-list'}
           >
-            <AutoLoadMore
+            {hasMore && <AutoLoadMore
               loadMore={this.props.loadMore}
               loading={this.props.isLoadingMore}
-            />
+            />}
           </div>
         </CellMeasurer>
       );
@@ -336,7 +338,6 @@ class ModerationQueue extends React.Component {
     }
 
     const view = this.state.view;
-    const hasMore = this.props.comments.length < this.props.commentCount;
 
     return (
       <div className={styles.root}>
@@ -358,7 +359,7 @@ class ModerationQueue extends React.Component {
               scrollTop={scrollTop}
               isScrolling={isScrolling}
               onScroll={onChildScroll}
-              rowCount={hasMore ? view.length + 1 : view.length}
+              rowCount={view.length + 1}
               deferredMeasurementCache={this.cache}
               rowRenderer={this.rowRenderer}
               rowHeight={this.cache.rowHeight}
diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index 8ee728a5e..e99bb4a7e 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -59,6 +59,11 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
   return update(root, changes);
 }
 
+export function sortComments(nodes, sortOrder) {
+  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
+  return nodes.sort(sortAlgo);
+}
+
 /**
  * getCommentQueues determines in which queues a comment should be placed.
  */
@@ -83,6 +88,14 @@ function getCommentQueues(comment, queueConfig) {
   return queues;
 }
 
+function isVisible(id) {
+  return !!document.getElementById(`comment_${id}`);
+}
+
+function isEndOfListVisible(root, queue) {
+  return root[queue].nodes.length === 0 || !!document.getElementById('end-of-comment-list');
+}
+
 /**
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
@@ -111,22 +124,18 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
         next = addCommentToQueue(next, queue, comment, sortOrder);
-        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sortOrder)) {
+        if (notify && activeQueue === queue && isEndOfListVisible(root, queue)) {
           showNotificationOnce();
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
-      if (notify && activeQueue === queue) {
+      if (notify && isVisible(comment.id)) {
         showNotificationOnce();
       }
     }
 
-    if (
-      notify
-      && queueHasComment(next, queue, comment.id)
-      && activeQueue === queue
-    ) {
+    if (notify && isVisible(comment.id)) {
       showNotificationOnce();
     }
   });

From 0bda44e97f504b3f0e260b202856decc940026a0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 16:51:50 +0100
Subject: [PATCH 279/344] Fix cursor bug

---
 .../src/routes/Moderation/components/ModerationQueue.js      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 13a09e1ed..00dddf6d6 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -166,8 +166,9 @@ class ModerationQueue extends React.Component {
     const {comments: prevComments} = this.props;
     const {comments: nextComments} = next;
 
-    if (!prevComments && nextComments || !prevComments.length && nextComments.length) {
-      this.setState(resetCursors);
+    // New comments where added and our cursor list is incomplete.
+    if (this.state.idCursors.length < 2 && nextComments.length > this.state.idCursors.length) {
+      this.setState(resetCursors(this.state, next));
       return;
     }
 

From 0b774402cf4238ede59a7fe284537b08f051da2f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 18:19:00 +0100
Subject: [PATCH 280/344] Introduce dangling comments and queue cleanup

---
 .../routes/Moderation/components/Comment.css  |  4 +
 .../routes/Moderation/components/Comment.js   |  4 +-
 .../Moderation/components/Moderation.js       |  4 +
 .../Moderation/components/ModerationQueue.css | 18 -----
 .../Moderation/components/ModerationQueue.js  | 22 ++++--
 .../Moderation/containers/Moderation.js       | 19 ++++-
 .../src/routes/Moderation/graphql.js          | 79 ++++++++++++++-----
 7 files changed, 105 insertions(+), 45 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index 708761b95..119688b73 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -27,6 +27,10 @@
   }
 }
 
+.dangling {
+  background-color: #efefef;
+}
+
 .container {
   padding: 0 14px;
 }
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 0856e4657..293071cec 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -82,6 +82,7 @@ class Comment extends React.Component {
       currentUserId,
       currentAsset,
       clearHeightCache,
+      dangling,
     } = this.props;
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
@@ -90,7 +91,7 @@ class Comment extends React.Component {
     return (
       <li
         tabIndex={0}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected}, 'talk-admin-moderate-comment')}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected, [styles.dangling]: dangling}, 'talk-admin-moderate-comment')}
         id={`comment_${comment.id}`}
         onClick={this.handleFocusOrClick}
         ref={this.handleRef}
@@ -213,6 +214,7 @@ Comment.propTypes = {
   rejectComment: PropTypes.func.isRequired,
   onClick: PropTypes.func,
   className: PropTypes.string,
+  dangling: PropTypes.bool,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index e2353a2a2..12412b244 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -164,11 +164,13 @@ class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
+            commentBelongToQueue={this.props.commentBelongToQueue}
             isLoadingMore={this.state.isLoadingMore}
             commentCount={activeTabCount}
             currentUserId={this.props.auth.user.id}
             viewUserDetail={viewUserDetail}
             selectCommentId={props.selectCommentId}
+            cleanUpQueue={props.cleanUpQueue}
           />
           <ModerationKeysModal
             hideShortcutsNote={props.hideShortcutsNote}
@@ -202,10 +204,12 @@ Moderation.propTypes = {
   selectedCommentId: PropTypes.string,
   toggleStorySearch: PropTypes.func.isRequired,
   getModPath: PropTypes.func.isRequired,
+  cleanUpQueue: PropTypes.func.isRequired,
   storySearchChange: PropTypes.func.isRequired,
   moderation: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
   queueConfig: PropTypes.object.isRequired,
+  commentBelongToQueue: PropTypes.func.isRequired,
   handleCommentChange: PropTypes.func.isRequired,
   setSortOrder: PropTypes.func.isRequired,
   showBanUserDialog: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index e39bb67fe..4110966b8 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -14,21 +14,3 @@
   margin: 0;
 }
 
-.commentLeave {
-  opacity: 1.0;
-}
-
-.commentLeaveActive {
-  opacity: 0.1;
-  transition: opacity 800ms;
-}
-
-.commentEnter {
-  opacity: 0.1;
-}
-
-.commentEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms;
-}
-
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 00dddf6d6..bda02ee10 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -110,12 +110,18 @@ class ModerationQueue extends React.Component {
   componentWillUnmount() {
     key.unbind('j');
     key.unbind('k');
+
+    this.props.cleanUpQueue(this.props.activeTab);
+  }
+
+  getCommentCountWithoutDagling(props = this.props) {
+    return props.comments.filter((comment) => props.commentBelongToQueue(props.activeTab, comment)).length;
   }
 
   async selectDown() {
     const view = this.state.view;
     const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
-    if (index === view.length - 1 && this.props.comments.length !== this.props.commentCount) {
+    if (index === view.length - 1 && this.getCommentCountWithoutDagling() !== this.props.commentCount) {
       await this.props.loadMore();
       this.selectDown();
       return;
@@ -139,20 +145,20 @@ class ModerationQueue extends React.Component {
   }
 
   componentDidUpdate (prev) {
-    const {comments, commentCount} = this.props;
+    const {commentCount, selectedCommentId} = this.props;
 
     // if the user just moderated the last (visible) comment
     // AND there are more comments available on the server,
     // go ahead and load more comments
-    if (prev.comments.length > 0 && comments.length === 0 && commentCount > 0) {
+    if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) {
       this.props.loadMore();
     }
 
     // Scroll to selected comment.
-    if (prev.selectedCommentId !== this.props.selectedCommentId && this.listRef) {
+    if (prev.selectedCommentId !== selectedCommentId && this.listRef) {
 
       const view = this.state.view;
-      const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
+      const index = view.findIndex(({id}) => id === selectedCommentId);
 
       this.listRef.scrollToRow(index);
     }
@@ -244,7 +250,7 @@ class ModerationQueue extends React.Component {
     const view = this.state.view;
     const rowCount = view.length + 1;
     if (index === rowCount - 1) {
-      const hasMore = this.props.comments.length < this.props.commentCount;
+      const hasMore = this.getCommentCountWithoutDagling() < this.props.commentCount;
       return (
         <CellMeasurer
           cache={this.cache}
@@ -282,6 +288,7 @@ class ModerationQueue extends React.Component {
             data={this.props.data}
             root={this.props.root}
             comment={comment}
+            dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)}
             selected={comment.id === this.props.selectedCommentId}
             viewUserDetail={this.props.viewUserDetail}
             showBanUserDialog={this.props.showBanUserDialog}
@@ -380,7 +387,8 @@ ModerationQueue.propTypes = {
   showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
-  comments: PropTypes.array.isRequired,
+  commentBelongToQueue: PropTypes.func.isRequired,
+  cleanUpQueue: PropTypes.func.isRequired,
   commentCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
   selectedCommentId: PropTypes.string,
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 29b64f0aa..e723d4fe0 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -11,7 +11,7 @@ import NotFoundAsset from '../components/NotFoundAsset';
 import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {handleCommentChange} from '../graphql';
+import {handleCommentChange, commentBelongToQueue, cleanUpQueue} from '../graphql';
 
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
@@ -169,6 +169,14 @@ class ModerationContainer extends Component {
     }
   }
 
+  cleanUpQueue = (queue) => {
+    if (!this.props.data.loading) {
+      this.props.data.updateQuery((query) => {
+        return cleanUpQueue(query, queue, this.props.queueConfig);
+      });
+    }
+  }
+
   acceptComment = ({commentId}) => {
     return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
   }
@@ -177,6 +185,10 @@ class ModerationContainer extends Component {
     return this.props.setCommentStatus({commentId, status: 'REJECTED'});
   }
 
+  commentBelongToQueue = (queue, comment) => {
+    return commentBelongToQueue(queue, comment, this.props.queueConfig);
+  }
+
   loadMore = (tab) => {
     const variables = {
       limit: 20,
@@ -248,6 +260,8 @@ class ModerationContainer extends Component {
       queueConfig={currentQueueConfig}
       handleCommentChange={this.handleCommentChange}
       selectedCommentId={this.props.selectedCommentId}
+      commentBelongToQueue={this.commentBelongToQueue}
+      cleanUpQueue={this.cleanUpQueue}
     />;
   }
 }
@@ -389,6 +403,9 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
       organizationName
       moderation
     }
+    me {
+      id
+    }
     ...${getDefinitionName(Comment.fragments.root)}
   }
   ${Comment.fragments.root}
diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index e99bb4a7e..ec6bc4f88 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -16,16 +16,21 @@ function queueHasComment(root, queue, id) {
   return root[queue].nodes.find((c) => c.id === id);
 }
 
-function removeCommentFromQueue(root, queue, id) {
+function removeCommentFromQueue(root, queue, id, dangling = false) {
   if (!queueHasComment(root, queue, id)) {
     return root;
   }
-  return update(root, {
+  const changes = {
     [`${queue}Count`]: {$set: root[`${queue}Count`] - 1},
-    [queue]: {
+  };
+
+  if (!dangling) {
+    changes[queue] = {
       nodes: {$apply: (nodes) => nodes.filter((c) => c.id !== id)},
-    },
-  });
+    };
+  }
+
+  return update(root, changes);
 }
 
 function shouldCommentBeAdded(root, queue, comment, sortOrder) {
@@ -70,24 +75,28 @@ export function sortComments(nodes, sortOrder) {
 function getCommentQueues(comment, queueConfig) {
   const queues = [];
   Object.keys(queueConfig).forEach((key) => {
-    const {action_type, statuses, tags} = queueConfig[key];
-    let addToQueues = true;
-    if (statuses && statuses.indexOf(comment.status) === -1) {
-      addToQueues = false;
-    }
-    if (tags && (!comment.tags || !comment.tags.some((tagLink) => tags.indexOf(tagLink.tag.name) >= 0))) {
-      addToQueues = false;
-    }
-    if (action_type && (!comment.actions || !comment.actions.some((a) => a.__typename.toLowerCase() === `${action_type.toLowerCase()}action`))) {
-      addToQueues = false;
-    }
-    if (addToQueues) {
+    if (commentBelongToQueue(key, comment, queueConfig)) {
       queues.push(key);
     }
   });
   return queues;
 }
 
+export function commentBelongToQueue(queue, comment, queueConfig) {
+  const {action_type, statuses, tags} = queueConfig[queue];
+  let belong = true;
+  if (statuses && statuses.indexOf(comment.status) === -1) {
+    belong = false;
+  }
+  if (tags && (!comment.tags || !comment.tags.some((tagLink) => tags.indexOf(tagLink.tag.name) >= 0))) {
+    belong = false;
+  }
+  if (action_type && (!comment.actions || !comment.actions.some((a) => a.__typename.toLowerCase() === `${action_type.toLowerCase()}action`))) {
+    belong = false;
+  }
+  return belong;
+}
+
 function isVisible(id) {
   return !!document.getElementById(`comment_${id}`);
 }
@@ -96,6 +105,37 @@ function isEndOfListVisible(root, queue) {
   return root[queue].nodes.length === 0 || !!document.getElementById('end-of-comment-list');
 }
 
+function applyCommentChanges(root, comment, queueConfig) {
+  const queues = Object.keys(queueConfig);
+  for (let i = 0; i < queues.length; i++) {
+    const queue = queues[i];
+    const index = root[queue].nodes.findIndex(({id}) => id === comment.id);
+    if (index > -1) {
+      return update(root, {
+        [queue]: {
+          nodes: {
+            [index]: {$merge: comment},
+          },
+        },
+      });
+    }
+  }
+  return root;
+}
+
+export function cleanUpQueue(root, queue, queueConfig) {
+  return update(root, {
+    [queue]: {
+      nodes: {
+        $apply: (nodes) =>
+          sortComments(
+            nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig))
+          ).slice(0, 50),
+      },
+    },
+  });
+}
+
 /**
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
@@ -129,7 +169,8 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
-      next = removeCommentFromQueue(next, queue, comment.id);
+      const dangling = activeQueue === queue && comment.status_history[comment.status_history.length - 1].assigned_by.id !== root.me.id;
+      next = removeCommentFromQueue(next, queue, comment.id, dangling);
       if (notify && isVisible(comment.id)) {
         showNotificationOnce();
       }
@@ -138,6 +179,8 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
     if (notify && isVisible(comment.id)) {
       showNotificationOnce();
     }
+
+    next = applyCommentChanges(next, comment, queueConfig);
   });
   return next;
 }

From 243d0c1493a7a13253598ff1ee078e83c1854b05 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 18:33:49 +0100
Subject: [PATCH 281/344] Limit to 100 comments

---
 client/coral-admin/src/routes/Moderation/graphql.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index ec6bc4f88..f028d9c42 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -130,7 +130,7 @@ export function cleanUpQueue(root, queue, queueConfig) {
         $apply: (nodes) =>
           sortComments(
             nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig))
-          ).slice(0, 50),
+          ).slice(0, 100),
       },
     },
   });

From defc4049cb0cbf3e6c9c0cd44c0d26cb184b3d82 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 19:47:42 +0100
Subject: [PATCH 282/344] Sort correctly + refactors and comments

---
 .../Moderation/components/AutoLoadMore.js     |   9 +
 .../Moderation/components/ModerationQueue.js  | 241 ++++++++++--------
 .../Moderation/containers/Moderation.js       |   2 +-
 .../src/routes/Moderation/graphql.js          |  16 +-
 4 files changed, 153 insertions(+), 115 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
index d2148f87f..4ba7c3298 100644
--- a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
+++ b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import {Spinner} from 'coral-ui';
+import PropTypes from 'prop-types';
 
+/**
+ * AutoLoadMore with call `loadMore` the moment it is rendered and shows a Spinner.
+ */
 class AutoLoadMore extends React.Component {
   componentDidMount() {
     if(!this.props.loading) {
@@ -13,4 +17,9 @@ class AutoLoadMore extends React.Component {
   }
 }
 
+AutoLoadMore.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  loadMore: PropTypes.func.isRequired,
+};
+
 export default AutoLoadMore;
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index bda02ee10..48ad67f54 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -14,9 +14,9 @@ import key from 'keymaster';
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
 // resetCursors will return the id cursors of the first and second comment of
-// the current comment list. The cursors are used to dertermine which
-// comments to show. The spare cursor functions as a backup in case one
-// of the comments gets deleted.
+// the current comment The spare cursor functions as a backup in case one
+// of the comments gets deleted. Additionally the new view based on the new
+// cursors are also returned.
 function resetCursors(state, props) {
   let idCursors = [];
   if (props.comments && props.comments.length) {
@@ -67,8 +67,12 @@ function getVisibleComments(comments, idCursor) {
   return view;
 }
 
+// Current keymapper to use for the CellMeasurer Cache.
 let keyMapper = null;
 
+// CellMeasurerCache is used to measure the size of the elements
+// of the virtual list. We use a global one with a keyMapper that
+// should resolve to a comment id, which is then used to cache the height.
 const cache = new CellMeasurerCache({
   fixedWidth: true,
   defaultHeight: 250,
@@ -76,7 +80,6 @@ const cache = new CellMeasurerCache({
 });
 
 class ModerationQueue extends React.Component {
-  cache = cache;
   listRef = null;
 
   constructor(props) {
@@ -84,6 +87,8 @@ class ModerationQueue extends React.Component {
     this.state = {
       ...resetCursors(this.state, props),
     };
+
+    // Set keyMapper to map to comment ids.
     keyMapper = (index) => {
       const view = this.state.view;
       if (index < view.length) {
@@ -94,6 +99,8 @@ class ModerationQueue extends React.Component {
       }
       throw new Error(`unknown index ${index}`);
     };
+
+    // Select first comment.
     if (this.state.view.length) {
       props.selectCommentId(this.state.view[0].id);
     }
@@ -111,9 +118,92 @@ class ModerationQueue extends React.Component {
     key.unbind('j');
     key.unbind('k');
 
+    // When switching queues, clean it up first.
+    // Removes dangling comments and reduce overly large
+    // lists and restore chronological order.
     this.props.cleanUpQueue(this.props.activeTab);
   }
 
+  componentWillReceiveProps(next) {
+    const {comments: prevComments} = this.props;
+    const {comments: nextComments} = next;
+
+    // New comments where added and our cursor list is incomplete.
+    if (this.state.idCursors.length < 2 && nextComments.length > this.state.idCursors.length) {
+      this.setState(resetCursors(this.state, next));
+      return;
+    }
+
+    let idCursors = this.state.idCursors;
+
+    // Comments have been removed.
+    if (
+      prevComments && nextComments &&
+      nextComments.length < prevComments.length
+    ) {
+
+      // Invalidate first cursor if referenced comment was removed.
+      if (this.state.idCursors[0] && !hasComment(nextComments, this.state.idCursors[0])) {
+        idCursors = invalidateCursor(0, this.state, next);
+      }
+
+      // Invalidate second cursor if referenced comment was removed.
+      if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
+        idCursors = invalidateCursor(1, this.state, next);
+      }
+
+      // Selected comment was removed, determine and set next selected comment.
+      if (
+        this.props.selectedCommentId &&
+        !hasComment(nextComments, this.props.selectedCommentId)
+      ) {
+        const view = this.state.view;
+        let nextSelectedCommentId = null;
+
+        // Determine a comment to select.
+        const prevIndex = view.findIndex((comment) => comment.id === this.props.selectedCommentId);
+        if (prevIndex !== view.length - 1) {
+          nextSelectedCommentId = view[prevIndex + 1].id;
+        } else if(prevIndex > 0) {
+          nextSelectedCommentId = view[prevIndex - 1].id;
+        }
+        this.props.selectCommentId(nextSelectedCommentId);
+      }
+    }
+
+    // Comments changed.
+    if (prevComments !== nextComments) {
+      const nextView = getVisibleComments(nextComments, idCursors[0]);
+      this.setState({idCursors, view: nextView});
+
+      // TODO: removing or adding a comment from the list seems to render incorrect, is this a bug?
+      // Find first changed comment and perform a reflow.
+      const index = this.state.view.findIndex((comment, i) => !nextView[i] || nextView[i].id !== comment.id);
+      this.reflowList(index);
+    }
+  }
+
+  componentDidUpdate (prev) {
+    const {commentCount, selectedCommentId} = this.props;
+
+    // If the user just moderated the last (visible) comment
+    // AND there are more comments available on the server,
+    // go ahead and load more comments
+    if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) {
+      this.props.loadMore();
+    }
+
+    // Scroll to selected comment.
+    if (prev.selectedCommentId !== selectedCommentId && this.listRef) {
+
+      const view = this.state.view;
+      const index = view.findIndex(({id}) => id === selectedCommentId);
+
+      this.listRef.scrollToRow(index);
+    }
+  }
+
+  // Returns comment counts without dangling comments.
   getCommentCountWithoutDagling(props = this.props) {
     return props.comments.filter((comment) => props.commentBelongToQueue(props.activeTab, comment)).length;
   }
@@ -144,86 +234,10 @@ class ModerationQueue extends React.Component {
     }
   }
 
-  componentDidUpdate (prev) {
-    const {commentCount, selectedCommentId} = this.props;
-
-    // if the user just moderated the last (visible) comment
-    // AND there are more comments available on the server,
-    // go ahead and load more comments
-    if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) {
-      this.props.loadMore();
-    }
-
-    // Scroll to selected comment.
-    if (prev.selectedCommentId !== selectedCommentId && this.listRef) {
-
-      const view = this.state.view;
-      const index = view.findIndex(({id}) => id === selectedCommentId);
-
-      this.listRef.scrollToRow(index);
-    }
-  }
-
   handleListRef = (list) => {
     this.listRef = list;
   };
 
-  componentWillReceiveProps(next) {
-    const {comments: prevComments} = this.props;
-    const {comments: nextComments} = next;
-
-    // New comments where added and our cursor list is incomplete.
-    if (this.state.idCursors.length < 2 && nextComments.length > this.state.idCursors.length) {
-      this.setState(resetCursors(this.state, next));
-      return;
-    }
-
-    let idCursors = this.state.idCursors;
-
-    if (
-      prevComments && nextComments &&
-      nextComments.length < prevComments.length
-    ) {
-
-      // Invalidate first cursor if referenced comment was removed.
-      if (this.state.idCursors[0] && !hasComment(nextComments, this.state.idCursors[0])) {
-        idCursors = invalidateCursor(0, this.state, next);
-      }
-
-      // Invalidate second cursor if referenced comment was removed.
-      if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
-        idCursors = invalidateCursor(1, this.state, next);
-      }
-
-      if (
-        this.props.selectedCommentId &&
-        !hasComment(nextComments, this.props.selectedCommentId)
-      ) {
-        const view = this.state.view;
-        let nextSelectedCommentId = null;
-
-        // Determine a comment to select.
-        const prevIndex = view.findIndex((comment) => comment.id === this.props.selectedCommentId);
-        if (prevIndex !== view.length - 1) {
-          nextSelectedCommentId = view[prevIndex + 1].id;
-        } else if(prevIndex > 0) {
-          nextSelectedCommentId = view[prevIndex - 1].id;
-        }
-        this.props.selectCommentId(nextSelectedCommentId);
-      }
-    }
-
-    if (prevComments !== nextComments) {
-      const nextView = getVisibleComments(nextComments, idCursors[0]);
-      this.setState({idCursors, view: nextView});
-
-      // TODO: removing or adding a comment from the list seems to render incorrect, is this a bug?
-      // Find first changed comment and perform a reflow.
-      const index = this.state.view.findIndex((comment, i) => !nextView[i] || nextView[i].id !== comment.id);
-      this.reflowList(index);
-    }
-  }
-
   viewNewComments = (callback) => {
     this.setState(resetCursors, () => {
       this.reflowList();
@@ -233,11 +247,11 @@ class ModerationQueue extends React.Component {
 
   reflowList = throttle((index) => {
     if (index >= 0) {
-      this.cache.clear(index);
+      cache.clear(index);
       this.listRef && this.listRef.recomputeRowHeights(index);
     }
     else {
-      this.cache.clearAll();
+      cache.clearAll();
       this.listRef && this.listRef.recomputeRowHeights();
     }
   }, 500);
@@ -249,38 +263,31 @@ class ModerationQueue extends React.Component {
   }) => {
     const view = this.state.view;
     const rowCount = view.length + 1;
+
+    let child = null;
+    let key = null;
+
+    // Last element of list is our AutoLoadMore component and contains an
+    // id indicating that this is the last element in list.
     if (index === rowCount - 1) {
       const hasMore = this.getCommentCountWithoutDagling() < this.props.commentCount;
-      return (
-        <CellMeasurer
-          cache={this.cache}
-          columnIndex={0}
-          key={'loadMore'}
-          parent={parent}
-          rowIndex={index}
+      key = 'end-of-comment-list';
+      child = (
+        <div
+          style={style}
+          id={'end-of-comment-list'}
         >
-          <div
-            style={style}
-            id={'end-of-comment-list'}
-          >
-            {hasMore && <AutoLoadMore
-              loadMore={this.props.loadMore}
-              loading={this.props.isLoadingMore}
-            />}
-          </div>
-        </CellMeasurer>
+          {hasMore && <AutoLoadMore
+            loadMore={this.props.loadMore}
+            loading={this.props.isLoadingMore}
+          />}
+        </div>
       );
     }
-
-    const comment = view[index];
-    return (
-      <CellMeasurer
-        cache={this.cache}
-        columnIndex={0}
-        key={comment.id}
-        parent={parent}
-        rowIndex={index}
-      >
+    else {
+      const comment = view[index];
+      key = comment.id;
+      child = (
         <div
           style={style}
         >
@@ -301,6 +308,18 @@ class ModerationQueue extends React.Component {
             selectComment={() => this.props.selectCommentId(comment.id)}
           />
         </div>
+      );
+    }
+
+    return (
+      <CellMeasurer
+        cache={cache}
+        columnIndex={0}
+        key={key}
+        parent={parent}
+        rowIndex={index}
+      >
+        {child}
       </CellMeasurer>
     );
   };
@@ -368,9 +387,9 @@ class ModerationQueue extends React.Component {
               isScrolling={isScrolling}
               onScroll={onChildScroll}
               rowCount={view.length + 1}
-              deferredMeasurementCache={this.cache}
+              deferredMeasurementCache={cache}
               rowRenderer={this.rowRenderer}
-              rowHeight={this.cache.rowHeight}
+              rowHeight={cache.rowHeight}
             />
           )}
         </WindowScroller>
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index e723d4fe0..38b5b67d9 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -172,7 +172,7 @@ class ModerationContainer extends Component {
   cleanUpQueue = (queue) => {
     if (!this.props.data.loading) {
       this.props.data.updateQuery((query) => {
-        return cleanUpQueue(query, queue, this.props.queueConfig);
+        return cleanUpQueue(query, queue, this.props.moderation.sortOrder, this.props.queueConfig);
       });
     }
   }
diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index f028d9c42..f76f28563 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -64,7 +64,7 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
   return update(root, changes);
 }
 
-export function sortComments(nodes, sortOrder) {
+function sortComments(nodes, sortOrder) {
   const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
   return nodes.sort(sortAlgo);
 }
@@ -82,6 +82,9 @@ function getCommentQueues(comment, queueConfig) {
   return queues;
 }
 
+/**
+ * Return whether or not the comment belongs to the queue.
+ */
 export function commentBelongToQueue(queue, comment, queueConfig) {
   const {action_type, statuses, tags} = queueConfig[queue];
   let belong = true;
@@ -123,13 +126,17 @@ function applyCommentChanges(root, comment, queueConfig) {
   return root;
 }
 
-export function cleanUpQueue(root, queue, queueConfig) {
+/**
+ * Remove dangling comments, sort and resize queues.
+ */
+export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
   return update(root, {
     [queue]: {
       nodes: {
         $apply: (nodes) =>
           sortComments(
-            nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig))
+            nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig)),
+            sortOrder,
           ).slice(0, 100),
       },
     },
@@ -180,6 +187,9 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
       showNotificationOnce();
     }
 
+    // We need to apply every comment change, because we use
+    // batched subscription handler which bypasses apollo that would
+    // have done that for us.
     next = applyCommentChanges(next, comment, queueConfig);
   });
   return next;

From 33781c3d161bd99b9b1ae0be099a9e0dc39ae623 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:01:33 +0100
Subject: [PATCH 283/344] Fix view new comments

---
 client/coral-admin/src/routes/Moderation/graphql.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index f76f28563..13ff2ed5a 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -55,7 +55,17 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
   };
 
   if (shouldCommentBeAdded(root, queue, comment, sortOrder)) {
-    const nodes = root[queue].nodes.concat(comment);
+    const cursor = new Date(root[queue].startCursor);
+    const date = new Date(comment.created_at);
+
+    let append = sortOrder === 'ASC'
+      ? date >= cursor
+      : date <= cursor;
+
+    const nodes = append
+      ? root[queue].nodes.concat(comment)
+      : [comment].concat(...root[queue].nodes);
+
     changes[queue] = {
       nodes: {$set: nodes},
     };

From d4051f682814064e1602a5e087f4866514f5b890 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:08:09 +0100
Subject: [PATCH 284/344] Fix view more styling

---
 .../src/routes/Moderation/components/ModerationQueue.css       | 3 +--
 .../src/routes/Moderation/components/ModerationQueue.js        | 2 +-
 .../coral-admin/src/routes/Moderation/components/ViewMore.css  | 3 +++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index 4110966b8..78959be1b 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -10,7 +10,6 @@
 }
 
 .list {
-  padding: 0;
-  margin: 0;
+  outline: none;
 }
 
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 48ad67f54..c3977c7bb 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -377,9 +377,9 @@ class ModerationQueue extends React.Component {
             <List
               ref={this.handleListRef}
               autoHeight
+              className={styles.list}
               style={{
                 width: '100%',
-                outline: 'none',
               }}
               height={height}
               width={1280}
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewMore.css b/client/coral-admin/src/routes/Moderation/components/ViewMore.css
index 2dcce0da5..8e80ea5ec 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewMore.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewMore.css
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
+  margin-bottom: -8px;
 }
 
 .viewMore {
@@ -13,6 +14,8 @@
   background-color: #2376D8;
   cursor: pointer;
   text-transform: capitalize;
+  margin: 0;
+  margin-bottom: 8px;
 }
 
 .viewMore:hover {

From c66c100dcbc5b9347ed166ca9a63514c78cc17f5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:27:19 +0100
Subject: [PATCH 285/344] Cache callbacks to preserve immutability

---
 .../Moderation/components/ModerationQueue.js   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index c3977c7bb..6abe37d25 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -81,6 +81,10 @@ const cache = new CellMeasurerCache({
 
 class ModerationQueue extends React.Component {
   listRef = null;
+  callbackCaches = {
+    clearHeightCache: {},
+    selectCommentId: {},
+  };
 
   constructor(props) {
     super(props);
@@ -286,6 +290,16 @@ class ModerationQueue extends React.Component {
     }
     else {
       const comment = view[index];
+
+      // Use callback cache so not to change the identity of these arrow functions.
+      // Otherwise shallow compare will fail to optimize.
+      if (!this.callbackCaches.clearHeightCache[index]) {
+        this.callbackCaches.clearHeightCache[index] = () => this.reflowList(index);
+      }
+      if (!this.callbackCaches.selectCommentId[comment.id]) {
+        this.callbackCaches.selectCommentId[comment.id] = () => this.props.selectCommentId(comment.id);
+      }
+
       key = comment.id;
       child = (
         <div
@@ -304,8 +318,8 @@ class ModerationQueue extends React.Component {
             rejectComment={this.props.rejectComment}
             currentAsset={this.props.currentAsset}
             currentUserId={this.props.currentUserId}
-            clearHeightCache={() => this.reflowList(index)}
-            selectComment={() => this.props.selectCommentId(comment.id)}
+            clearHeightCache={this.callbackCaches.clearHeightCache[index]}
+            selectComment={this.callbackCaches.selectCommentId[comment.id]}
           />
         </div>
       );

From 5446abe3a997a273760aed46822d705815a02493 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:37:51 +0100
Subject: [PATCH 286/344] Fix bug with featured comments

---
 client/coral-admin/src/routes/Moderation/containers/Comment.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Comment.js b/client/coral-admin/src/routes/Moderation/containers/Comment.js
index 299c7cecb..972d6bd9a 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Comment.js
@@ -48,6 +48,9 @@ export default withFragments({
         edited
       }
       status_history {
+        assigned_by {
+          id
+        }
         type
       }
       hasParent

From 2b312dbf8e2fbc00e87b824ca94eeb6b4448f136 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:41:05 +0100
Subject: [PATCH 287/344] Next try

---
 .../src/routes/Moderation/containers/Comment.js           | 3 ---
 .../client/containers/ModSubscription.js                  | 8 ++++++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Comment.js b/client/coral-admin/src/routes/Moderation/containers/Comment.js
index 972d6bd9a..299c7cecb 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Comment.js
@@ -48,9 +48,6 @@ export default withFragments({
         edited
       }
       status_history {
-        assigned_by {
-          id
-        }
         type
       }
       hasParent
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js b/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
index 0e9fc8c89..7e8d7d426 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
@@ -65,6 +65,14 @@ const COMMENT_FEATURED_SUBSCRIPTION = gql`
     commentFeatured(asset_id: $assetId) {
       comment {
         ...${getDefinitionName(Comment.fragments.comment)}
+        status_history {
+          type
+          created_at
+          assigned_by {
+            id
+            username
+          }
+        }
       }
       user {
         id

From 19568afde54065c8864f6f45f52480ad7986a023 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 21:08:13 +0100
Subject: [PATCH 288/344] Reduce view more movements

---
 .../src/routes/Moderation/components/ModerationQueue.css      | 1 +
 .../coral-admin/src/routes/Moderation/components/ViewMore.css | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index 78959be1b..465c7ccbd 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -3,6 +3,7 @@
   list-style: none;
   display: block;
   min-height: 650px;
+  margin-top: 16px;
 }
 
 :global(html) {
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewMore.css b/client/coral-admin/src/routes/Moderation/components/ViewMore.css
index 8e80ea5ec..e5c572ef5 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewMore.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewMore.css
@@ -2,7 +2,6 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  margin-bottom: -8px;
 }
 
 .viewMore {
@@ -15,7 +14,8 @@
   cursor: pointer;
   text-transform: capitalize;
   margin: 0;
-  margin-bottom: 8px;
+  margin-top: -18px;
+  margin-bottom: -4px;
 }
 
 .viewMore:hover {

From 36d535546c2240f24463d783ab8c05dc4632710a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 15:03:35 -0600
Subject: [PATCH 289/344] plugins serverside can now provide translations

---
 services/i18n.js | 81 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/services/i18n.js b/services/i18n.js
index 4c65ed1d4..9d74ec0e4 100644
--- a/services/i18n.js
+++ b/services/i18n.js
@@ -1,22 +1,56 @@
-const has = require('lodash/has');
-const get = require('lodash/get');
-
-const yaml = require('yamljs');
-
-const da = yaml.load('./locales/da.yml');
-const es = yaml.load('./locales/es.yml');
-const en = yaml.load('./locales/en.yml');
-const fr = yaml.load('./locales/fr.yml');
-const pt_BR = yaml.load('./locales/pt_BR.yml');
-
+const fs = require('fs');
+const path = require('path');
+const debug = require('debug')('talk:services:i18n');
 const accepts = require('accepts');
+const _ = require('lodash');
+const yaml = require('yamljs');
+const plugins = require('./plugins');
 
-// default language
-let defaultLanguage = 'en';
+const resolve = (...paths) => path.resolve(path.join(__dirname, '..', 'locales', ...paths));
+
+// Load all the translations.
+let translations = fs.readdirSync(resolve())
+
+  // Resolve all the filenames relative the the locales directory.
+  .map((filename) => resolve(filename))
+
+  // Translations are only yml/yaml files.
+  .filter((filename) => /\.(yaml|yml)$/.test(filename))
+
+  // Load the translation files from disk.
+  .map((filename) => fs.readFileSync(filename, 'utf8'))
+
+  // Load the translation files.
+  .reduce((packs, contents) => {
+
+    const pack = yaml.parse(contents);
+
+    return _.merge(packs, pack);
+  }, {});
+
+// Create a list of all supported translations.
+const languages = Object.keys(translations);
+
+let defaultLanguage = process.env.TALK_DEFAULT_LANG || 'en';
 let language = defaultLanguage;
-const languages = ['en', 'da', 'es', 'fr', 'pt_BR'];
 
-const translations = Object.assign(en, es, fr, pt_BR, da);
+let loadedPluginTranslations = false;
+const loadPluginTranslations = () => {
+  if (loadedPluginTranslations) {
+    return;
+  }
+
+  // Load the plugin translations.
+  plugins.forEach('server', 'translations').forEach(({plugin, translations: filename}) => {
+    debug(`added plugin '${plugin.name}'`);
+
+    const pack = yaml.parse(fs.readFileSync(filename, 'utf8'));
+
+    translations = _.merge(translations, pack);
+  });
+
+  loadedPluginTranslations = true;
+};
 
 /**
  * Exposes a service object to allow translations.
@@ -28,6 +62,11 @@ const i18n = {
    * Create the new Task kue.
    */
   init(req) {
+
+    // Loads the translations into the translations array from plugins. This is
+    // done lazily to ensure that we don't have an import cycle.
+    loadPluginTranslations();
+
     const lang = accepts(req).language(languages);
     language = lang ? lang : defaultLanguage;
   },
@@ -37,13 +76,15 @@ const i18n = {
    */
   t(key, ...replacements) {
 
-    if (has(translations[language], key)) {
+    // Check if the translation exists on the object.
+    if (_.has(translations[language], key)) {
 
-      let translation = get(translations[language], key);
+      // Get the translation value.
+      let translation = _.get(translations[language], key);
 
-      // replace any {n} with the arguments passed to this method
-      replacements.forEach((str, i) => {
-        translation = translation.replace(new RegExp(`\\{${i}\\}`, 'g'), str);
+      // Replace any {n} with the arguments passed to this method.
+      replacements.forEach((str, n) => {
+        translation = translation.replace(new RegExp(`\\{${n}\\}`, 'g'), str);
       });
 
       return translation;

From d3965924aa8b32dbea1aeff8ffd6eae145ea0b3b Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 15:51:53 -0600
Subject: [PATCH 290/344] fixed template

---
 services/email/email-confirm.html.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/email/email-confirm.html.ejs b/services/email/email-confirm.html.ejs
index 8a1bd05f7..76a8ea47b 100644
--- a/services/email/email-confirm.html.ejs
+++ b/services/email/email-confirm.html.ejs
@@ -1,3 +1,3 @@
 <p><%= t('email.confirm.has_been_requested') %> <b><%= email %></b>.</p>
-<p><%= t('email.confirm.to_confirm') %> <a href="<%= BASE_URL %>admin/confirm-email#<%= token %>">Confirm Email</a></p>
+<p><%= t('email.confirm.to_confirm') %> <a href="<%= BASE_URL %>admin/confirm-email#<%= token %>"><%= t('email.confirm.confirm_email') %></a></p>
 <p><%= t('email.confirm.if_you_did_not') %></p>

From d9654b52cf89f9f7e24384538522b5eb4418ca51 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 16:09:41 -0600
Subject: [PATCH 291/344] some fixes

---
 services/i18n.js   | 11 +++++------
 services/mailer.js |  6 +++---
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/services/i18n.js b/services/i18n.js
index 9d74ec0e4..338f6680a 100644
--- a/services/i18n.js
+++ b/services/i18n.js
@@ -41,7 +41,7 @@ const loadPluginTranslations = () => {
   }
 
   // Load the plugin translations.
-  plugins.forEach('server', 'translations').forEach(({plugin, translations: filename}) => {
+  plugins.get('server', 'translations').forEach(({plugin, translations: filename}) => {
     debug(`added plugin '${plugin.name}'`);
 
     const pack = yaml.parse(fs.readFileSync(filename, 'utf8'));
@@ -62,11 +62,6 @@ const i18n = {
    * Create the new Task kue.
    */
   init(req) {
-
-    // Loads the translations into the translations array from plugins. This is
-    // done lazily to ensure that we don't have an import cycle.
-    loadPluginTranslations();
-
     const lang = accepts(req).language(languages);
     language = lang ? lang : defaultLanguage;
   },
@@ -76,6 +71,10 @@ const i18n = {
    */
   t(key, ...replacements) {
 
+    // Loads the translations into the translations array from plugins. This is
+    // done lazily to ensure that we don't have an import cycle.
+    loadPluginTranslations();
+
     // Check if the translation exists on the object.
     if (_.has(translations[language], key)) {
 
diff --git a/services/mailer.js b/services/mailer.js
index a4f694b30..0a085ea4a 100644
--- a/services/mailer.js
+++ b/services/mailer.js
@@ -99,8 +99,8 @@ const mailer = module.exports = {
 
     attachLocals(locals);
 
-    // Attach the templating function.
-    locals['t'] = i18n.t;
+    // Attach the translation function.
+    locals.t = i18n.t;
 
     return Promise.all([
 
@@ -112,7 +112,7 @@ const mailer = module.exports = {
     ])
       .then(([html, text]) => {
 
-      // Create the job.
+        // Create the job.
         return mailer.task.create({
           title: 'Mail',
           message: {

From d207b240f2ddd7fc27438a495020ba18890d6b42 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 16:28:08 -0600
Subject: [PATCH 292/344] added support for changing the subject prefi

---
 config.js                                  | 3 +++
 docs/_docs/02-02-advanced-configuration.md | 8 +++++++-
 services/mailer.js                         | 5 +++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/config.js b/config.js
index 76d488a0d..e14997be9 100644
--- a/config.js
+++ b/config.js
@@ -20,6 +20,9 @@ const CONFIG = {
   // WEBPACK indicates when webpack is currently building.
   WEBPACK: process.env.WEBPACK === 'TRUE',
 
+  // EMAIL_SUBJECT_PREFIX is the string before emails in the subject.
+  EMAIL_SUBJECT_PREFIX: process.env.TALK_EMAIL_SUBJECT_PREFIX || '[Talk]',
+
   // When TRUE, it ensures that database indexes created in core will not add
   // indexes.
   CREATE_MONGO_INDEXES: process.env.DISABLE_CREATE_MONGO_INDEXES !== 'TRUE',
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 94a6b402d..47be44fcc 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -460,4 +460,10 @@ Could be read as:
 ## TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF
 
 When `TRUE`, staff members will have their accounts and comments moderated the
-same as any other user in the system. (Default `FALSE`)
\ No newline at end of file
+same as any other user in the system. (Default `FALSE`)
+
+## TALK_EMAIL_SUBJECT_PREFIX
+
+The prefix for the subject of emails sent. An email with the specified subject
+of `Email Confirmation` would then be sent as `[Talk] Email Confirmation`.
+(Default `[Talk]`)
\ No newline at end of file
diff --git a/services/mailer.js b/services/mailer.js
index 0a085ea4a..4433b9ef5 100644
--- a/services/mailer.js
+++ b/services/mailer.js
@@ -13,7 +13,8 @@ const {
   SMTP_USERNAME,
   SMTP_PORT,
   SMTP_PASSWORD,
-  SMTP_FROM_ADDRESS
+  SMTP_FROM_ADDRESS,
+  EMAIL_SUBJECT_PREFIX,
 } = require('../config');
 
 // load all the templates as strings
@@ -95,7 +96,7 @@ const mailer = module.exports = {
     }
 
     // Prefix the subject with `[Talk]`.
-    subject = `[Talk] ${subject}`;
+    subject = `${EMAIL_SUBJECT_PREFIX} ${subject}`;
 
     attachLocals(locals);
 

From eb9827a3aec8a9a4904eb106b92ca8f669ed1ba4 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 16:48:03 -0600
Subject: [PATCH 293/344] more fixes for i18n

---
 config.js          |  4 +++
 middleware/i18n.js |  6 +++++
 routes/index.js    | 13 ++++-----
 services/i18n.js   | 66 +++++++++++++++++++++-------------------------
 4 files changed, 47 insertions(+), 42 deletions(-)
 create mode 100644 middleware/i18n.js

diff --git a/config.js b/config.js
index e14997be9..d3a6344cc 100644
--- a/config.js
+++ b/config.js
@@ -23,6 +23,10 @@ const CONFIG = {
   // EMAIL_SUBJECT_PREFIX is the string before emails in the subject.
   EMAIL_SUBJECT_PREFIX: process.env.TALK_EMAIL_SUBJECT_PREFIX || '[Talk]',
 
+  // DEFAULT_LANG is the default language used for server sent emails and
+  // rendered text.
+  DEFAULT_LANG: process.env.TALK_DEFAULT_LANG || 'en',
+
   // When TRUE, it ensures that database indexes created in core will not add
   // indexes.
   CREATE_MONGO_INDEXES: process.env.DISABLE_CREATE_MONGO_INDEXES !== 'TRUE',
diff --git a/middleware/i18n.js b/middleware/i18n.js
new file mode 100644
index 000000000..c2ca2436a
--- /dev/null
+++ b/middleware/i18n.js
@@ -0,0 +1,6 @@
+const i18n = require('../services/i18n');
+
+module.exports = (req, res, next) => {
+  res.locals.t = i18n.request(req);
+  next();
+};
diff --git a/routes/index.js b/routes/index.js
index 0ee012a79..a769d6b6f 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -7,7 +7,7 @@ const debug = require('debug')('talk:routes');
 const enabled = require('debug').enabled;
 const errors = require('../errors');
 const express = require('express');
-const i18n = require('../services/i18n');
+const i18n = require('../middleware/i18n');
 const path = require('path');
 const plugins = require('../services/plugins');
 const pubsub = require('../middleware/pubsub');
@@ -64,6 +64,9 @@ if (!DISABLE_STATIC_SERVER) {
   router.get('/embed.js.map', serveFile('../dist/embed.js.map'));
 }
 
+// Add the i18n middleware to all routes.
+router.use(i18n);
+
 //==============================================================================
 // STATIC ROUTES
 //==============================================================================
@@ -116,19 +119,19 @@ if (process.env.NODE_ENV !== 'production') {
     });
   });
 
-  // GraphQL documention.
+  // GraphQL documentation.
   router.get('/admin/docs', (req, res) => {
     res.render('admin/docs');
   });
 
 }
 
+router.use('/api/v1', require('./api'));
+
 //==============================================================================
 // ROUTES
 //==============================================================================
 
-router.use('/api/v1', require('./api'));
-
 // Development routes.
 if (process.env.NODE_ENV !== 'production') {
   router.use('/assets', staticTemplate, require('./assets'));
@@ -184,8 +187,6 @@ router.use('/', (err, req, res, next) => {
     console.error(err);
   }
 
-  i18n.init(req);
-
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {
diff --git a/services/i18n.js b/services/i18n.js
index 338f6680a..cd1bacd93 100644
--- a/services/i18n.js
+++ b/services/i18n.js
@@ -5,6 +5,7 @@ const accepts = require('accepts');
 const _ = require('lodash');
 const yaml = require('yamljs');
 const plugins = require('./plugins');
+const {DEFAULT_LANG} = require('../config');
 
 const resolve = (...paths) => path.resolve(path.join(__dirname, '..', 'locales', ...paths));
 
@@ -31,9 +32,6 @@ let translations = fs.readdirSync(resolve())
 // Create a list of all supported translations.
 const languages = Object.keys(translations);
 
-let defaultLanguage = process.env.TALK_DEFAULT_LANG || 'en';
-let language = defaultLanguage;
-
 let loadedPluginTranslations = false;
 const loadPluginTranslations = () => {
   if (loadedPluginTranslations) {
@@ -52,46 +50,42 @@ const loadPluginTranslations = () => {
   loadedPluginTranslations = true;
 };
 
+const t = (language) => (key, ...replacements) => {
+
+  // Loads the translations into the translations array from plugins. This is
+  // done lazily to ensure that we don't have an import cycle.
+  loadPluginTranslations();
+
+  // Check if the translation exists on the object.
+  if (_.has(translations[language], key)) {
+
+    // Get the translation value.
+    let translation = _.get(translations[language], key);
+
+    // Replace any {n} with the arguments passed to this method.
+    replacements.forEach((str, n) => {
+      translation = translation.replace(new RegExp(`\\{${n}\\}`, 'g'), str);
+    });
+
+    return translation;
+  } else {
+    console.warn(`${key} language key not set`);
+    return key;
+  }
+};
+
 /**
  * Exposes a service object to allow translations.
  * @type {Object}
  */
 const i18n = {
-
-  /**
-   * Create the new Task kue.
-   */
-  init(req) {
+  request(req) {
     const lang = accepts(req).language(languages);
-    language = lang ? lang : defaultLanguage;
-  },
-
-  /**
-   * Translates a key.
-   */
-  t(key, ...replacements) {
-
-    // Loads the translations into the translations array from plugins. This is
-    // done lazily to ensure that we don't have an import cycle.
-    loadPluginTranslations();
-
-    // Check if the translation exists on the object.
-    if (_.has(translations[language], key)) {
-
-      // Get the translation value.
-      let translation = _.get(translations[language], key);
-
-      // Replace any {n} with the arguments passed to this method.
-      replacements.forEach((str, n) => {
-        translation = translation.replace(new RegExp(`\\{${n}\\}`, 'g'), str);
-      });
-
-      return translation;
-    } else {
-      console.warn(`${key} language key not set`);
-      return key;
-    }
+    const language = lang ? lang : DEFAULT_LANG;
+
+    return t(language);
   },
+  t: t(DEFAULT_LANG),
 };
 
 module.exports = i18n;

From fdd5cbb0d759528ed9a627d77dc870403468cfdf Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 14 Dec 2017 16:56:24 -0600
Subject: [PATCH 294/344] moved email contents to translation files

---
 locales/en.yml    |  5 +++++
 services/users.js | 39 ++++++++++++++++++---------------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/locales/en.yml b/locales/en.yml
index f1d566475..9961cfe64 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -166,6 +166,11 @@ en:
     minute: "minute"
     minutes_plural: "minutes"
   email:
+    suspended:
+      subject: "Your account has been suspended"
+    banned:
+      subject: "Your account has been banned"
+      body: "In accordance with The Coral Project’s community guidelines, your account has been banned. You are now longer allowed to comment, flag or engage with our community."
     confirm:
       has_been_requested: "A email confirmation has been requested for the following account:"
       to_confirm: "To confirm the account, please visit the following link:"
diff --git a/services/users.js b/services/users.js
index fbaf89609..ef3cf7a34 100644
--- a/services/users.js
+++ b/services/users.js
@@ -24,6 +24,7 @@ const RECAPTCHA_INCORRECT_TRIGGER = 5; // after 3 incorrect attempts, recaptcha
 const ActionsService = require('./actions');
 const MailerService = require('./mailer');
 const Wordlist = require('./wordlist');
+const i18n = require('./i18n');
 const Domainlist = require('./domainlist');
 const {escapeRegExp} = require('./regex');
 
@@ -430,16 +431,14 @@ module.exports = class UsersService {
     if (status === 'BANNED') {
       let localProfile = user.profiles.find((profile) => profile.provider === 'local');
       if (localProfile) {
-        const options =
-          {
-            template: 'banned',              // needed to know which template to render!
-            locals: {                            // specifies the template locals.
-              body: 'In accordance with The Coral Project’s community guidelines, your account has been banned. You are now longer allowed to comment, flag or engage with our community.'
-            },
-            subject: 'Your account has been banned',
-            to: localProfile.id  // This only works if the user has registered via e-mail.
-            // We may want a standard way to access a user's e-mail address in the future
-          };
+        const options = {
+          template: 'banned',
+          locals: {
+            body: i18n.t('email.banned.body'),
+          },
+          subject: i18n.t('email.banned.subject'),
+          to: localProfile.id
+        };
         await MailerService.sendSimple(options);
       }
     }
@@ -467,16 +466,14 @@ module.exports = class UsersService {
     if (message) {
       let localProfile = user.profiles.find((profile) => profile.provider === 'local');
       if (localProfile) {
-        const options =
-          {
-            template: 'suspension',              // needed to know which template to render!
-            locals: {                            // specifies the template locals.
-              body: message
-            },
-            subject: 'Your account has been suspended',
-            to: localProfile.id  // This only works if the user has registered via e-mail.
-            // We may want a standard way to access a user's e-mail address in the future
-          };
+        const options = {
+          template: 'suspension',
+          locals: {
+            body: message
+          },
+          subject: i18n.t('email.suspended.subject'),
+          to: localProfile.id,
+        };
 
         await MailerService.sendSimple(options);
       }
@@ -509,7 +506,7 @@ module.exports = class UsersService {
           locals: {                            // specifies the template locals.
             body: message
           },
-          subject: 'Email Suspension',
+          subject: i18n.t('email.suspended.subject'),
           to: localProfile.id  // This only works if the user has registered via e-mail.
           // We may want a standard way to access a user's e-mail address in the future
         };

From 6850dd1a5359c00256461021748fb6fde4ee8254 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 15 Dec 2017 15:49:56 -0600
Subject: [PATCH 295/344] redis optim

- removes call for comment count when we already have
  totalCommentCount
- removes job processor cleaner on non-processing nodes
- fixed some template issues
---
 .../coral-embed-stream/src/graphql/utils.js   |  4 ++--
 .../src/tabs/stream/containers/Stream.js      |  2 --
 config.js                                     |  4 ++++
 routes/index.js                               |  4 ++--
 services/kue.js                               | 19 +++++++++++++++----
 services/settings.js                          |  3 ++-
 views/graphiql.ejs                            |  2 +-
 7 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index f4be867dd..dbe39933e 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -38,7 +38,7 @@ function applyToCommentsOrigin(root, callback) {
 function findAndInsertComment(parent, comment) {
   const isAsset = parent.__typename === 'Asset';
   const [connectionField, countField, action] = isAsset
-    ? ['comments', 'commentCount', '$unshift']
+    ? ['comments', 'totalCommentCount', '$unshift']
     : ['replies', 'replyCount', '$push'];
 
   if (
@@ -79,7 +79,7 @@ export function insertCommentIntoEmbedQuery(root, comment) {
 
 function findAndRemoveComment(parent, id) {
   const [connectionField, countField] = parent.__typename === 'Asset'
-    ? ['comments', 'commentCount']
+    ? ['comments', 'totalCommentCount']
     : ['replies', 'replyCount'];
 
   const connection = parent[connectionField];
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index e132ab954..1f80fe326 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -324,7 +324,6 @@ const fragments = {
         charCount
         requireEmailConfirmation
       }
-      commentCount @skip(if: $hasComment)
       totalCommentCount @skip(if: $hasComment)
       comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
         nodes {
@@ -345,7 +344,6 @@ const fragments = {
 const mapStateToProps = (state) => ({
   auth: state.auth,
   refetching: state.embed.refetching,
-  commentCountCache: state.stream.commentCountCache,
   activeReplyBox: state.stream.activeReplyBox,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
diff --git a/config.js b/config.js
index 76d488a0d..497573ab2 100644
--- a/config.js
+++ b/config.js
@@ -24,6 +24,10 @@ const CONFIG = {
   // indexes.
   CREATE_MONGO_INDEXES: process.env.DISABLE_CREATE_MONGO_INDEXES !== 'TRUE',
 
+  // SETTINGS_CACHE_TIME is the time that we'll cache the settings in redis before
+  // fetching again.
+  SETTINGS_CACHE_TIME: ms(process.env.TALK_SETTINGS_CACHE_TIME || '1hr'),
+
   //------------------------------------------------------------------------------
   // JWT based configuration
   //------------------------------------------------------------------------------
diff --git a/routes/index.js b/routes/index.js
index 0ee012a79..8fc9e8f3f 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -110,9 +110,9 @@ router.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
 if (process.env.NODE_ENV !== 'production') {
 
   // Interactive graphiql interface.
-  router.use('/api/v1/graph/iql', (req, res) => {
+  router.use('/api/v1/graph/iql', staticTemplate, (req, res) => {
     res.render('graphiql', {
-      endpointURL: `${req.app.locals.BASE_URL}api/v1/graph/ql`
+      endpointURL: 'api/v1/graph/ql'
     });
   });
 
diff --git a/services/kue.js b/services/kue.js
index 01806632e..a3eb6d985 100644
--- a/services/kue.js
+++ b/services/kue.js
@@ -9,7 +9,8 @@ const kue = require('kue');
 // singleton Queue instance. So you can configure and use only a single Queue
 // object within your node.js process.
 let queue = null;
-const getQueue = () => {
+let isManaging = false;
+const getQueue = ({managed = false} = {}) => {
   if (queue) {
     return queue;
   }
@@ -21,8 +22,16 @@ const getQueue = () => {
     }
   });
 
-  // Watch for stuck jobs to manage.
-  queue.watchStuckJobs(1000);
+  // If this is a managed queue, and we aren't managing yet, then start the
+  // management.
+  if (managed && !isManaging) {
+
+    // Watch for stuck jobs to manage.
+    queue.watchStuckJobs(60000);
+
+    // Mark that we've now started management routines.
+    isManaging = true;
+  }
 
   return queue;
 };
@@ -67,7 +76,9 @@ class Task {
    * Process jobs for the queue.
    */
   process(callback) {
-    return getQueue().process(this.name, callback);
+
+    // Get the queue in managed mode.
+    return getQueue({managed: true}).process(this.name, callback);
   }
 
   /**
diff --git a/services/settings.js b/services/settings.js
index e8537c9c9..72915f43b 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -2,6 +2,7 @@ const SettingModel = require('../models/setting');
 const cache = require('./cache');
 const errors = require('../errors');
 const {dotize} = require('./utils');
+const {SETTINGS_CACHE_TIME} = require('../config');
 
 /**
  * The selector used to uniquely identify the settings document.
@@ -35,7 +36,7 @@ module.exports = class SettingsService {
     if (process.env.NODE_ENV === 'production') {
 
       // When in production, wrap the settings retrieval with a cache.
-      const settings = await cache.h.wrap('settings', fields, 60, () => retrieve(fields));
+      const settings = await cache.h.wrap('settings', fields, SETTINGS_CACHE_TIME / 1000, () => retrieve(fields));
 
       return new SettingModel(settings);
     }
diff --git a/views/graphiql.ejs b/views/graphiql.ejs
index 5f1759c0d..b6d609de6 100644
--- a/views/graphiql.ejs
+++ b/views/graphiql.ejs
@@ -50,7 +50,7 @@
       }
     }
     // We don't use safe-serialize for location, because it's not client input.
-    var fetchURL = locationQuery(otherParams, '<%= endpointURL %>');
+    var fetchURL = locationQuery(otherParams, '<%= BASE_URL %><%= endpointURL %>');
 
     // Defines a GraphQL fetcher using the fetch API.
     function graphQLFetcher(graphQLParams) {

From 9a0fb95d0674836afd86be5f1ef80eb9b0c45402 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 18 Dec 2017 15:03:54 +0100
Subject: [PATCH 296/344] Pagination fixes

---
 .../Moderation/components/Moderation.js       |  1 +
 .../Moderation/components/ModerationQueue.js  |  5 +-
 .../Moderation/containers/Moderation.js       |  1 -
 .../src/routes/Moderation/graphql.js          | 72 ++++++++++++-------
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 12412b244..da0745acc 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -156,6 +156,7 @@ class Moderation extends Component {
             root={this.props.root}
             currentAsset={asset}
             comments={comments.nodes}
+            hasNextPage={comments.hasNextPage}
             activeTab={activeTab}
             singleView={moderation.singleView}
             selectedCommentId={moderation.selectedCommentId}
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 6abe37d25..fbb116cd7 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -274,14 +274,13 @@ class ModerationQueue extends React.Component {
     // Last element of list is our AutoLoadMore component and contains an
     // id indicating that this is the last element in list.
     if (index === rowCount - 1) {
-      const hasMore = this.getCommentCountWithoutDagling() < this.props.commentCount;
       key = 'end-of-comment-list';
       child = (
         <div
           style={style}
           id={'end-of-comment-list'}
         >
-          {hasMore && <AutoLoadMore
+          {this.props.hasNextPage && <AutoLoadMore
             loadMore={this.props.loadMore}
             loading={this.props.isLoadingMore}
           />}
@@ -427,6 +426,8 @@ ModerationQueue.propTypes = {
   selectedCommentId: PropTypes.string,
   singleView: PropTypes.bool,
   isLoadingMore: PropTypes.bool,
+  hasNextPage: PropTypes.bool,
+  comments: PropTypes.array,
   activeTab: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 38b5b67d9..9ea3baf00 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -207,7 +207,6 @@ class ModerationContainer extends Component {
           [tab]: {
             nodes: {$push: comments.nodes},
             hasNextPage: {$set: comments.hasNextPage},
-            startCursor: {$set: comments.startCursor},
             endCursor: {$set: comments.endCursor},
           },
         });
diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index 13ff2ed5a..5758315eb 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -45,7 +45,7 @@ function shouldCommentBeAdded(root, queue, comment, sortOrder) {
     : new Date(comment.created_at) >= cursor;
 }
 
-function addCommentToQueue(root, queue, comment, sortOrder) {
+function addCommentToQueue(root, queue, comment, sortOrder, cleanup) {
   if (queueHasComment(root, queue, comment.id)) {
     return root;
   }
@@ -54,24 +54,32 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
     [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
   };
 
-  if (shouldCommentBeAdded(root, queue, comment, sortOrder)) {
-    const cursor = new Date(root[queue].startCursor);
-    const date = new Date(comment.created_at);
-
-    let append = sortOrder === 'ASC'
-      ? date >= cursor
-      : date <= cursor;
-
-    const nodes = append
-      ? root[queue].nodes.concat(comment)
-      : [comment].concat(...root[queue].nodes);
-
-    changes[queue] = {
-      nodes: {$set: nodes},
-    };
+  if (!shouldCommentBeAdded(root, queue, comment, sortOrder)) {
+    return update(root, changes);
   }
 
-  return update(root, changes);
+  const cursor = new Date(root[queue].startCursor);
+  const date = new Date(comment.created_at);
+
+  let append = sortOrder === 'ASC'
+    ? date >= cursor
+    : date <= cursor;
+
+  const nodes = append
+    ? root[queue].nodes.concat(comment)
+    : [comment].concat(...root[queue].nodes);
+
+  changes[queue] = {
+    nodes: {$set: nodes},
+  };
+
+  const next = update(root, changes);
+
+  if (!cleanup) {
+    return next;
+  }
+
+  return cleanUpQueue(next, queue, sortOrder);
 }
 
 function sortComments(nodes, sortOrder) {
@@ -138,17 +146,31 @@ function applyCommentChanges(root, comment, queueConfig) {
 
 /**
  * Remove dangling comments, sort and resize queues.
+ * If queueConfig is omitted, dangling comments are not removed.
  */
 export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
+  let nodes = root[queue].nodes;
+  let hasNextPage = root[queue].hasNextPage;
+
+  if (queueConfig) {
+    nodes = root[queue].nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig));
+  }
+
+  nodes = sortComments(
+    nodes,
+    sortOrder,
+  );
+
+  if (nodes.length > 2) {
+    nodes = nodes.slice(0, 2);
+    hasNextPage = true;
+  }
+
   return update(root, {
     [queue]: {
-      nodes: {
-        $apply: (nodes) =>
-          sortComments(
-            nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig)),
-            sortOrder,
-          ).slice(0, 100),
-      },
+      nodes: {$set: nodes},
+      endCursor: {$set: nodes[nodes.length - 1].created_at},
+      hasNextPage: {$set: hasNextPage},
     },
   });
 }
@@ -180,7 +202,7 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
   Object.keys(queueConfig).forEach((queue) => {
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
-        next = addCommentToQueue(next, queue, comment, sortOrder);
+        next = addCommentToQueue(next, queue, comment, sortOrder, activeQueue !== queue);
         if (notify && activeQueue === queue && isEndOfListVisible(root, queue)) {
           showNotificationOnce();
         }

From 75a944eba8e2660bd7fc1af93911f00fd3975e25 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 08:02:43 -0700
Subject: [PATCH 297/344] upgrades, fixes to comment count logic

---
 .../coral-embed-stream/src/graphql/utils.js   |  14 -
 graph/mutators/comment.js                     |   2 +-
 yarn.lock                                     | 543 +++++++++++-------
 3 files changed, 325 insertions(+), 234 deletions(-)

diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index dbe39933e..177f131dc 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -67,13 +67,6 @@ function findAndInsertComment(parent, comment) {
 }
 
 export function insertCommentIntoEmbedQuery(root, comment) {
-
-  // Increase total comment count by one.
-  root = update(root, {
-    asset: {
-      totalCommentCount: {$apply: (c) => c + 1},
-    },
-  });
   return applyToCommentsOrigin(root, (origin) => findAndInsertComment(origin, comment));
 }
 
@@ -104,13 +97,6 @@ function findAndRemoveComment(parent, id) {
 }
 
 export function removeCommentFromEmbedQuery(root, id) {
-
-  // Decrease total comment by one.
-  root = update(root, {
-    asset: {
-      totalCommentCount: {$apply: (c) => c - 1},
-    },
-  });
   return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
 }
 
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index bd8ab18fd..d5a131cc5 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -178,7 +178,7 @@ const createComment = async (context, {tags = [], body, asset_id, parent_id = nu
   // just added a new comment, hence the counts should be updated. We should
   // perform these increments in the event that we do have a new comment that
   // is approved or without a comment.
-  if (status === 'NONE' || status === 'APPROVED') {
+  if (status === 'NONE' || status === 'ACCEPTED') {
     if (parent_id === null) {
       Comments.parentCountByAssetID.incr(asset_id);
     }
diff --git a/yarn.lock b/yarn.lock
index ea99f0cfa..c5765d87d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,6 +24,12 @@
     git-url-parse "^6.0.2"
     shelljs "^0.7.0"
 
+"@remy/pstree@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@remy/pstree/-/pstree-1.1.0.tgz#414045d4fec60946604f3718023052aaf49bd8d3"
+  dependencies:
+    ps-tree "^1.1.0"
+
 "@types/express-serve-static-core@*":
   version "4.0.53"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.53.tgz#1723a35d1447f2c55e13c8721eab3448e42f4d82"
@@ -78,7 +84,11 @@ abab@^1.0.0, abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
 
-abbrev@1, abbrev@1.0.x:
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
@@ -125,10 +135,14 @@ acorn@^4.0.3, acorn@^4.0.4, acorn@~4.0.2:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
 
+acorn@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
@@ -145,8 +159,8 @@ ajv-keywords@^1.1.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
 ajv-keywords@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
 ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
@@ -155,7 +169,7 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.2.0, ajv@^5.2.3:
+ajv@^5.0.0, ajv@^5.1.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
@@ -164,6 +178,15 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.2.0, ajv@^5.2.3:
     json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.2.3, ajv@^5.3.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -180,9 +203,9 @@ always-error@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/always-error/-/always-error-1.0.0.tgz#95c84042cfa86f38c86ca6c2cc42c0a0103441b2"
 
-am-i-a-dependency@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/am-i-a-dependency/-/am-i-a-dependency-1.0.0.tgz#7c0e2eb126045350852e26e44f6781b3ed387919"
+am-i-a-dependency@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/am-i-a-dependency/-/am-i-a-dependency-1.1.2.tgz#f9d3422304d6f642f821e4c407565035f6167f1f"
 
 amdefine@>=0.0.4:
   version "1.0.1"
@@ -198,10 +221,6 @@ ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
-ansi-escapes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
-
 ansi-escapes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
@@ -384,8 +403,8 @@ assertion-error@^1.0.1:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c"
 
 ast-types@0.x.x:
-  version "0.9.14"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.14.tgz#d34ba5dffb9d15a44351fd2a9d82e4ab2838b5ba"
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"
 
 astral-regex@^1.0.0:
   version "1.0.0"
@@ -409,12 +428,18 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@2.4.1, async@^2.1.2, async@^2.1.4:
+async@2.4.1, async@^2.1.2:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
   dependencies:
     lodash "^4.14.0"
 
+async@^2.1.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
 async@~0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
@@ -1113,8 +1138,8 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
 
 binary-extensions@^1.0.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
 
 bl@^1.0.0:
   version "1.2.1"
@@ -1136,7 +1161,7 @@ bluebird@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
-bluebird@^3.3.4, bluebird@^3.4.6, bluebird@^3.5.0, bluebird@^3.5.1:
+bluebird@3.5.1, bluebird@^3.3.4, bluebird@^3.4.6, bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1182,12 +1207,12 @@ boom@5.x.x:
     hoek "4.x.x"
 
 bowser@^1.7.2:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.8.0.tgz#889d46ac922ec5db8297672747362ef836781ba7"
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.8.1.tgz#49785777e7302febadb1a5b71d9a646520ed310d"
 
 boxen@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.2.tgz#3f1d4032c30ffea9d4b02c322eaf2ea741dcbce5"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
   dependencies:
     ansi-align "^2.0.0"
     camelcase "^4.0.0"
@@ -1195,7 +1220,7 @@ boxen@^1.2.1:
     cli-boxes "^1.0.0"
     string-width "^2.0.0"
     term-size "^1.2.0"
-    widest-line "^1.0.0"
+    widest-line "^2.0.0"
 
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.8"
@@ -1468,9 +1493,9 @@ chain-function@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
 
-chalk@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+chalk@2.3.0, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -1486,14 +1511,6 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.0.tgz#477b3bf2f9b8fd5ca9e429747e37f724ee7af240"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
 change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -1504,6 +1521,10 @@ character-parser@^2.1.1:
   dependencies:
     is-regex "^1.0.3"
 
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
 charenc@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
@@ -1711,12 +1732,18 @@ codemirror@*:
   version "5.30.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.30.0.tgz#86e57dd5ea5535acbcf9c720797b4cefe05b5a70"
 
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.3.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
   dependencies:
     color-name "^1.1.1"
 
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
 color-name@^1.0.0, color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -1771,7 +1798,7 @@ combined-stream@~0.0.4:
   dependencies:
     delayed-stream "0.0.5"
 
-commander@2.11.0, commander@^2.11.0, commander@^2.9.0:
+commander@2.11.0, commander@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
@@ -1787,6 +1814,10 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@^2.9.0:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
 commander@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
@@ -2187,14 +2218,13 @@ cz-conventional-changelog@1.1.5:
   dependencies:
     word-wrap "^1.0.3"
 
-cz-conventional-changelog@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cz-conventional-changelog/-/cz-conventional-changelog-2.0.0.tgz#55a979afdfe95e7024879d2a0f5924630170b533"
+cz-conventional-changelog@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cz-conventional-changelog/-/cz-conventional-changelog-2.1.0.tgz#2f4bc7390e3244e4df293e6ba351e4c740a7c764"
   dependencies:
     conventional-commit-types "^2.0.0"
     lodash.map "^4.5.1"
     longest "^1.0.1"
-    pad-right "^0.2.2"
     right-pad "^1.0.1"
     word-wrap "^1.0.3"
 
@@ -2228,13 +2258,13 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@*, debug@3.1.0, debug@^3.0.1, debug@^3.1.0:
+debug@*, debug@3.1.0, debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.6.3, debug@^2.6.8, debug@^2.6.9:
+debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2356,6 +2386,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
 dialog-polyfill@^0.4.9:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/dialog-polyfill/-/dialog-polyfill-0.4.9.tgz#c690b3727c3d82e0f947bd5b910b32af8a2ef57d"
@@ -2391,12 +2425,11 @@ dns-prefetch-control@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dns-prefetch-control/-/dns-prefetch-control-0.1.0.tgz#60ddb457774e178f1f9415f0cabb0e85b0b300b2"
 
-doctrine@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+doctrine@^2.0.0, doctrine@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
   dependencies:
     esutils "^2.0.2"
-    isarray "^1.0.0"
 
 doctypes@^1.1.0:
   version "1.1.0"
@@ -2481,11 +2514,7 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-0.8.3.tgz#db8aac47ff80a7df82b4c82c126fe8970870626f"
-
-ejs@^2.5.7:
+ejs@2.5.7, ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
@@ -2547,15 +2576,14 @@ env-rewrite@^1.0.2:
   resolved "https://registry.yarnpkg.com/env-rewrite/-/env-rewrite-1.0.2.tgz#3e344a95af1bdaab34a559479b8be3abd0804183"
 
 enzyme-adapter-react-15@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-15/-/enzyme-adapter-react-15-1.0.2.tgz#350393ba85670936b8f9179257b1a6510f6aae3c"
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-15/-/enzyme-adapter-react-15-1.0.5.tgz#99f9a03ff2c2303e517342935798a6bdfbb75fac"
   dependencies:
-    enzyme-adapter-utils "^1.0.0"
+    enzyme-adapter-utils "^1.1.0"
     lodash "^4.17.4"
     object.assign "^4.0.4"
     object.values "^1.0.4"
     prop-types "^15.5.10"
-    react-test-renderer "^15.5.0"
 
 enzyme-adapter-react-16@^1.0.0:
   version "1.0.2"
@@ -2568,9 +2596,9 @@ enzyme-adapter-react-16@^1.0.0:
     prop-types "^15.5.10"
     react-test-renderer "^16.0.0-0"
 
-enzyme-adapter-utils@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.0.1.tgz#fcd81223339a55a312f7552641e045c404084009"
+enzyme-adapter-utils@^1.0.0, enzyme-adapter-utils@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2"
   dependencies:
     lodash "^4.17.4"
     object.assign "^4.0.4"
@@ -2603,7 +2631,17 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.6.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-abstract@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
   dependencies:
@@ -2693,31 +2731,31 @@ eslint-scope@^3.7.1:
     estraverse "^4.1.1"
 
 eslint@^4.5.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.9.0.tgz#76879d274068261b191fe0f2f56c74c2f4208e8b"
+  version "4.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.13.1.tgz#0055e0014464c7eb7878caf549ef2941992b444f"
   dependencies:
-    ajv "^5.2.0"
+    ajv "^5.3.0"
     babel-code-frame "^6.22.0"
     chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
     debug "^3.0.1"
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
     eslint-scope "^3.7.1"
-    espree "^3.5.1"
+    espree "^3.5.2"
     esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^9.17.0"
+    globals "^11.0.1"
     ignore "^3.3.3"
     imurmurhash "^0.1.4"
     inquirer "^3.0.6"
     is-resolvable "^1.0.0"
     js-yaml "^3.9.1"
-    json-stable-stringify "^1.0.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
     lodash "^4.17.4"
     minimatch "^3.0.2"
@@ -2734,11 +2772,11 @@ eslint@^4.5.0:
     table "^4.0.1"
     text-table "~0.2.0"
 
-espree@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+espree@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^5.1.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@3.x.x, esprima@^3.1.3:
@@ -2913,11 +2951,11 @@ extend@^1.2.1:
   resolved "https://registry.yarnpkg.com/extend/-/extend-1.3.0.tgz#d1516fb0ff5624d2ebf9123ea1dac5a1994004f8"
 
 external-editor@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.5.tgz#52c249a3981b9ba187c7cacf5beb50bf1d91a6bc"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
   dependencies:
+    chardet "^0.4.0"
     iconv-lite "^0.4.17"
-    jschardet "^1.4.2"
     tmp "^0.0.33"
 
 extglob@^0.3.1:
@@ -2926,10 +2964,14 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extsprintf@1.3.0, extsprintf@^1.2.0:
+extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
 eyes@0.1.x:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
@@ -2938,6 +2980,10 @@ fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
 
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
 fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
@@ -3185,7 +3231,15 @@ fs-extra@^0.24.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^4.0.1, fs-extra@^4.0.2:
+fs-extra@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
   dependencies:
@@ -3207,7 +3261,14 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@^1.0.0, fsevents@^1.1.1:
+fsevents@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fsevents@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
   dependencies:
@@ -3327,29 +3388,30 @@ ggit@1.23.1:
     ramda "0.24.1"
     semver "5.4.1"
 
-ggit@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ggit/-/ggit-2.0.1.tgz#6cdfbb2bac9b63108a9609923eeca44205a9e8f4"
+ggit@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/ggit/-/ggit-2.4.0.tgz#b99d981f3ede2a3a8a8e4bbff578bc277d400588"
   dependencies:
     always-error "1.0.0"
-    bluebird "3.5.0"
+    bluebird "3.5.1"
     chdir-promise "0.4.1"
     check-more-types "2.24.0"
     cli-table "0.3.1"
     colors "1.1.2"
     commander "2.11.0"
     d3-helpers "0.3.0"
-    debug "2.6.8"
+    debug "3.1.0"
     find-up "2.1.0"
     glob "7.1.2"
     lazy-ass "1.6.0"
     lodash "4.17.4"
-    moment "2.18.1"
+    moment "2.19.1"
+    moment-timezone "0.5.13"
     optimist "0.6.1"
-    pluralize "6.0.0"
+    pluralize "7.0.0"
     q "2.0.3"
     quote "0.4.0"
-    ramda "0.24.1"
+    ramda "0.25.0"
     semver "5.4.1"
 
 git-up@^2.0.0:
@@ -3433,12 +3495,16 @@ glob@^5.0.3:
     path-is-absolute "^1.0.0"
 
 global-dirs@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.0.tgz#10d34039e0df04272e262cf24224f7209434df4f"
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
   dependencies:
     ini "^1.3.4"
 
-globals@^9.17.0, globals@^9.18.0:
+globals@^11.0.1:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
+
+globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -3810,9 +3876,9 @@ home-or-tmp@^2.0.0:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-hooks-fixed@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hooks-fixed/-/hooks-fixed-2.0.0.tgz#a01d894d52ac7f6599bbb1f63dfc9c411df70cba"
+hooks-fixed@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hooks-fixed/-/hooks-fixed-2.0.2.tgz#20076daa07e77d8a6106883ce3f1722e051140b0"
 
 hosted-git-info@^2.1.4:
   version "2.5.0"
@@ -3958,8 +4024,8 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.3.3:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.5.tgz#c4e715455f6073a8d7e5dae72d2fc9d71663dba6"
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
 immutability-helper@^2.2.0:
   version "2.4.0"
@@ -3997,7 +4063,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -4005,10 +4071,14 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-ini@^1.3.0, ini@^1.3.4, ini@~1.3.0:
+ini@^1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
 inquirer-confirm@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/inquirer-confirm/-/inquirer-confirm-0.2.2.tgz#6f406d037bf9d9e455ef0f953929f357fe9a8848"
@@ -4047,26 +4117,7 @@ inquirer@0.8.2:
     rx "^2.4.3"
     through "^2.3.6"
 
-inquirer@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.1.tgz#06ceb0f540f45ca548c17d6840959878265fa175"
-  dependencies:
-    ansi-escapes "^2.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
-inquirer@^3.0.6, inquirer@^3.2.2:
+inquirer@3.3.0, inquirer@^3.0.6, inquirer@^3.2.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
@@ -4086,8 +4137,8 @@ inquirer@^3.0.6, inquirer@^3.2.2:
     through "^2.3.6"
 
 interpret@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
 invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
@@ -4135,7 +4186,7 @@ ip@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.0.1.tgz#c7e356cdea225ae71b36d70f2e71a92ba4e42590"
 
-ip@^1.1.2:
+ip@^1.1.2, ip@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
@@ -4157,7 +4208,11 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.1.5, is-buffer@~1.1.1:
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-buffer@~1.1.1:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
@@ -4306,8 +4361,8 @@ is-path-in-cwd@^1.0.0:
     is-path-inside "^1.0.0"
 
 is-path-inside@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
   dependencies:
     path-is-inside "^1.0.1"
 
@@ -4342,10 +4397,8 @@ is-regex@^1.0.3, is-regex@^1.0.4:
     has "^1.0.1"
 
 is-resolvable@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
-  dependencies:
-    tryit "^1.0.1"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
 
 is-retry-allowed@^1.0.0:
   version "1.1.0"
@@ -4793,10 +4846,6 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jschardet@^1.4.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9"
-
 jsdom@^7.0.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-7.2.2.tgz#40b402770c2bda23469096bee91ab675e3b1fc6e"
@@ -4878,6 +4927,10 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -5091,8 +5144,8 @@ libqp@1.1.0:
   resolved "https://registry.yarnpkg.com/libqp/-/libqp-1.1.0.tgz#f5e6e06ad74b794fb5b5b66988bf728ef1dedbe8"
 
 license-webpack-plugin@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.1.0.tgz#99117ae985fb6c2a70df301b8a1ae0268f17f433"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.1.1.tgz#76b2cedccc78f139fd7877e576f756cfc141b8c2"
   dependencies:
     ejs "^2.5.7"
 
@@ -5301,7 +5354,7 @@ lodash.foreach@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
 
-lodash.get@^4.4.2:
+lodash.get@4.4.2, lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
 
@@ -5488,10 +5541,10 @@ mailcomposer@4.0.1:
     libmime "3.0.0"
 
 make-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
   dependencies:
-    pify "^2.3.0"
+    pify "^3.0.0"
 
 make-error-cause@^1.0.1:
   version "1.2.2"
@@ -5513,10 +5566,14 @@ map-stream@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
 
-marked@*, marked@^0.3.5, marked@^0.3.6:
+marked@*, marked@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
+marked@^0.3.6:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.7.tgz#80ef3bbf1bd00d1c9cfebe42ba1b8c85da258d0d"
+
 material-design-lite@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/material-design-lite/-/material-design-lite-1.3.0.tgz#d004ce3fee99a1eeb74a78b8a325134a5f1171d3"
@@ -5653,7 +5710,7 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8, minimist@~0.0.1:
+minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -5661,6 +5718,10 @@ minimist@^1.1.1, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -5713,14 +5774,24 @@ mocha@^3.1.2:
     mkdirp "0.5.1"
     supports-color "3.1.2"
 
+moment-timezone@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.13.tgz#99ce5c7d827262eb0f1f702044177f60745d7b90"
+  dependencies:
+    moment ">= 2.9.0"
+
 moment@2.18.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
-moment@2.x.x, moment@^2.10.3, moment@^2.18.1:
+moment@2.19.1, moment@^2.10.3:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
+moment@2.x.x, "moment@>= 2.9.0", moment@^2.18.1:
+  version "2.19.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.4.tgz#17e5e2c6ead8819c8ecfad83a0acccb312e94682"
+
 mongodb-core@2.1.17:
   version "2.1.17"
   resolved "https://registry.yarnpkg.com/mongodb-core/-/mongodb-core-2.1.17.tgz#a418b337a14a14990fb510b923dee6a813173df8"
@@ -5737,17 +5808,18 @@ mongodb@2.2.33:
     readable-stream "2.2.7"
 
 mongoose@^4.12.3:
-  version "4.12.3"
-  resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-4.12.3.tgz#7099bf8ce4945150001f4c2462e56c9e958ddcb9"
+  version "4.13.7"
+  resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-4.13.7.tgz#f760c770e6c8cdf34a6fe8b7443882b5fced1032"
   dependencies:
     async "2.1.4"
     bson "~1.0.4"
-    hooks-fixed "2.0.0"
+    hooks-fixed "2.0.2"
     kareem "1.5.0"
+    lodash.get "4.4.2"
     mongodb "2.2.33"
     mpath "0.3.0"
     mpromise "0.5.5"
-    mquery "2.3.2"
+    mquery "2.3.3"
     ms "2.0.0"
     muri "1.3.0"
     regexp-clone "0.0.1"
@@ -5775,23 +5847,27 @@ mpromise@0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mpromise/-/mpromise-0.5.5.tgz#f5b24259d763acc2257b0a0c8c6d866fd51732e6"
 
-mquery@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/mquery/-/mquery-2.3.2.tgz#e2c60ad117cf080f2efb1ecdd144e7bbffbfca11"
+mquery@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/mquery/-/mquery-2.3.3.tgz#221412e5d4e7290ca5582dd16ea8f190a506b518"
   dependencies:
-    bluebird "^3.5.0"
-    debug "^2.6.9"
-    regexp-clone "^0.0.1"
+    bluebird "3.5.0"
+    debug "2.6.9"
+    regexp-clone "0.0.1"
     sliced "0.0.5"
 
 ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
-ms@2.0.0, ms@^2.0.0:
+ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+ms@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+
 muri@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/muri/-/muri-1.3.0.tgz#aeccf3db64c56aa7c5b34e00f95b7878527a4721"
@@ -5813,8 +5889,8 @@ mute-stream@0.0.7:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
 nan@^2.3.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
 
 native-promise-only@^0.8.1:
   version "0.8.1"
@@ -5864,11 +5940,11 @@ nib@~1.1.2:
     stylus "0.54.5"
 
 nightwatch@^0.9.16:
-  version "0.9.16"
-  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-0.9.16.tgz#c4ac3ec711b0ff047c3dca9c6557365ee236519f"
+  version "0.9.19"
+  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-0.9.19.tgz#4bd9757273d30b845f04847a98b71be9bb7c4b3b"
   dependencies:
     chai-nightwatch "~0.1.x"
-    ejs "0.8.3"
+    ejs "2.5.7"
     lodash.clone "3.0.3"
     lodash.defaultsdeep "4.3.2"
     minimatch "3.0.3"
@@ -5958,10 +6034,11 @@ node-notifier@^5.0.2:
     shellwords "^0.1.0"
     which "^1.2.12"
 
-node-pre-gyp@^0.6.36:
-  version "0.6.38"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
   dependencies:
+    detect-libc "^1.0.2"
     hawk "3.1.3"
     mkdirp "^0.5.1"
     nopt "^4.0.1"
@@ -6037,19 +6114,19 @@ nodemailer@^2.6.4:
     socks "1.1.9"
 
 nodemon@^1.11.0:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.12.1.tgz#996a56dc49d9f16bbf1b78a4de08f13634b3878d"
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.13.3.tgz#92d23e6b91dca351215a4b8a50d2bd838cd0f9e3"
   dependencies:
+    "@remy/pstree" "^1.1.0"
     chokidar "^1.7.0"
     debug "^2.6.8"
     es6-promise "^3.3.1"
     ignore-by-default "^1.0.1"
     lodash.defaults "^3.1.2"
     minimatch "^3.0.4"
-    ps-tree "^1.1.0"
     touch "^3.1.0"
     undefsafe "0.0.3"
-    update-notifier "^2.2.0"
+    update-notifier "^2.3.0"
 
 nomnom@~1.6.2:
   version "1.6.2"
@@ -6323,12 +6400,6 @@ package-json@^4.0.0:
     registry-url "^3.0.3"
     semver "^5.1.0"
 
-pad-right@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/pad-right/-/pad-right-0.2.2.tgz#6fbc924045d244f2a2a244503060d3bfc6009774"
-  dependencies:
-    repeat-string "^1.5.2"
-
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -6380,8 +6451,8 @@ parseurl@~1.3.2:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
 
 passport-jwt@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/passport-jwt/-/passport-jwt-3.0.0.tgz#7d9e4ff0fa0522108540ce1fcfa83bbd8faa29c9"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/passport-jwt/-/passport-jwt-3.0.1.tgz#e4f7276dad8bd251d43c6fc38883130b963272f6"
   dependencies:
     jsonwebtoken "^7.0.0"
     passport-strategy "^1.0.0"
@@ -6531,7 +6602,7 @@ pluralize@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-6.0.0.tgz#d9b51afad97d3d51075cc1ddba9b132cacccb7ba"
 
-pluralize@^7.0.0:
+pluralize@7.0.0, pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
@@ -6963,21 +7034,21 @@ postcss@^6.0.1:
     supports-color "^4.4.0"
 
 pre-git@^3.15.3:
-  version "3.15.3"
-  resolved "https://registry.yarnpkg.com/pre-git/-/pre-git-3.15.3.tgz#834a598a0608b821ba1e9e217f58d510bc7b0ca9"
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/pre-git/-/pre-git-3.16.0.tgz#a7656bc5f277185fd213c78f39f24f2cb603eb61"
   dependencies:
-    bluebird "3.5.0"
-    chalk "2.0.1"
+    bluebird "3.5.1"
+    chalk "2.3.0"
     check-more-types "2.24.0"
     conventional-commit-message "1.1.0"
-    cz-conventional-changelog "2.0.0"
-    debug "2.6.8"
-    ggit "2.0.1"
-    inquirer "3.2.1"
+    cz-conventional-changelog "2.1.0"
+    debug "2.6.9"
+    ggit "2.4.0"
+    inquirer "3.3.0"
     lazy-ass "1.6.0"
     require-relative "0.8.7"
     shelljs "0.7.8"
-    simple-commit-message "3.3.1"
+    simple-commit-message "3.3.2"
     validate-commit-msg "2.14.0"
     word-wrap "1.2.3"
 
@@ -7033,11 +7104,7 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-progress@1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
-
-progress@^2.0.0:
+progress@2.0.0, progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
 
@@ -7254,8 +7321,8 @@ query-string@^4.1.0, query-string@^4.2.2:
     strict-uri-encode "^1.0.0"
 
 query-string@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.0.0.tgz#fbdf7004b4d2aff792f9871981b7a2794f555947"
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.0.1.tgz#6e2b86fe0e08aef682ecbe86e85834765402bd88"
   dependencies:
     decode-uri-component "^0.2.0"
     object-assign "^4.1.0"
@@ -7287,6 +7354,10 @@ ramda@0.24.1, ramda@^0.24.1:
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
 
+ramda@0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
+
 randexp@^0.4.2:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
@@ -7433,7 +7504,7 @@ react-tagsinput@^3.17.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
 
-react-test-renderer@15.5, react-test-renderer@^15.5.0:
+react-test-renderer@15.5:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc"
   dependencies:
@@ -7510,7 +7581,7 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-readable-stream@1.1, readable-stream@1.1.x:
+readable-stream@1.1:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
   dependencies:
@@ -7519,7 +7590,28 @@ readable-stream@1.1, readable-stream@1.1.x:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@2, readable-stream@2.2.7, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
+readable-stream@1.1.x:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@2.2.7, readable-stream@^2.0.1, readable-stream@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.7.tgz#07057acbe2467b22042d36f98c5ad507054e95b1"
   dependencies:
@@ -7654,7 +7746,7 @@ regex-cache@^0.4.2:
   dependencies:
     is-equal-shallow "^0.1.3"
 
-regexp-clone@0.0.1, regexp-clone@^0.0.1:
+regexp-clone@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/regexp-clone/-/regexp-clone-0.0.1.tgz#a7c2e09891fdbf38fbb10d376fb73003e68ac589"
 
@@ -7836,7 +7928,13 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.4.0:
+resolve@^1.1.6, resolve@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.1.7:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
   dependencies:
@@ -7930,7 +8028,7 @@ rx@^2.4.3:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.5.3.tgz#21adc7d80f02002af50dae97fd9dbf248755f566"
 
-safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
@@ -7979,17 +8077,17 @@ select@^1.1.2:
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
 
 selenium-standalone@^6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.11.0.tgz#eb21ff65f3b2ece75061b35d4f9e7572ac0280c2"
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.12.0.tgz#789730db09a105f1cce12c6424d795d11c543bd4"
   dependencies:
     async "^2.1.4"
     commander "^2.9.0"
     cross-spawn "^5.1.0"
-    debug "^2.6.3"
+    debug "^3.0.0"
     lodash "^4.17.4"
     minimist "^1.2.0"
     mkdirp "^0.5.1"
-    progress "1.1.8"
+    progress "2.0.0"
     request "2.79.0"
     tar-stream "1.5.2"
     urijs "^1.18.4"
@@ -8098,13 +8196,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-simple-commit-message@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/simple-commit-message/-/simple-commit-message-3.3.1.tgz#b69026a9692e0f470233a4c5c1df3432cdb50560"
+simple-commit-message@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/simple-commit-message/-/simple-commit-message-3.3.2.tgz#52bdadb7f4f680d8b29c07af1826a6611f7ee783"
   dependencies:
-    am-i-a-dependency "1.0.0"
+    am-i-a-dependency "1.1.2"
     check-more-types "2.24.0"
-    debug "2.6.8"
+    debug "2.6.9"
     ggit "1.23.1"
     hr "0.1.3"
     inquirer "0.12.0"
@@ -8169,7 +8267,7 @@ sliced@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
 
-smart-buffer@^1.0.4:
+smart-buffer@^1.0.13, smart-buffer@^1.0.4:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
 
@@ -8210,13 +8308,20 @@ socks-proxy-agent@2:
     extend "3"
     socks "~1.1.5"
 
-socks@1.1.9, socks@~1.1.5:
+socks@1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.9.tgz#628d7e4d04912435445ac0b6e459376cb3e6d691"
   dependencies:
     ip "^1.1.2"
     smart-buffer "^1.0.4"
 
+socks@~1.1.5:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.10.tgz#5b8b7fc7c8f341c53ed056e929b7bf4de8ba7b5a"
+  dependencies:
+    ip "^1.1.4"
+    smart-buffer "^1.0.13"
+
 sort-keys@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@@ -8303,7 +8408,11 @@ stack-trace@0.0.x:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
 
-"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
@@ -8364,7 +8473,7 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
-string_decoder@~1.0.0:
+string_decoder@~1.0.0, string_decoder@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
   dependencies:
@@ -8529,8 +8638,8 @@ tapable@^0.2.7, tapable@~0.2.5:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
 
 tar-pack@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
   dependencies:
     debug "^2.2.0"
     fstream "^1.0.10"
@@ -8641,8 +8750,8 @@ title-case-minors@^1.0.0:
   resolved "https://registry.yarnpkg.com/title-case-minors/-/title-case-minors-1.0.0.tgz#51f17037c294747a1d1cda424b5004c86d8eb115"
 
 tlds@^1.196.0:
-  version "1.198.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.198.0.tgz#e7413ea5cccb5e1f4de2a1f45230b0c80994a886"
+  version "1.199.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.199.0.tgz#a4fc8c3058216488a80aaaebb427925007e55217"
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -8729,10 +8838,6 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
-
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -8865,7 +8970,7 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
-update-notifier@^2.2.0:
+update-notifier@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
   dependencies:
@@ -9116,11 +9221,11 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2"
 
-widest-line@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+widest-line@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.0.tgz#0142a4e8a243f8882c0233aa0e0281aa76152273"
   dependencies:
-    string-width "^1.0.1"
+    string-width "^2.1.1"
 
 window-size@0.1.0:
   version "0.1.0"
@@ -9395,8 +9500,8 @@ yargs@~3.10.0:
     window-size "0.1.0"
 
 yauzl@^2.5.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.8.0.tgz#79450aff22b2a9c5a41ef54e02db907ccfbf9ee2"
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.9.1.tgz#a81981ea70a57946133883f029c5821a89359a7f"
   dependencies:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.0.1"

From d7a5e613fad3b5cfaba883018225b151ee8a2096 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 12:19:46 -0300
Subject: [PATCH 298/344] Adding reducer

---
 .../client/reducer.js                         | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 plugins/talk-plugin-featured-comments/client/reducer.js

diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
new file mode 100644
index 000000000..3840155b3
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/reducer.js
@@ -0,0 +1,22 @@
+import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+
+const initialState = {
+  showFeaturedDialog: false,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+  case OPEN_FEATURED_DIALOG:
+    return {
+      ...state,
+      showFeaturedDialog: true,
+    };
+  case CLOSE_FEATURED_DIALOG:
+    return {
+      ...state,
+      showFeaturedDialog: false,
+    };
+  default :
+    return state;
+  }
+}

From 5a1393c0396b689721da05c9d6e536774938ebb2 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 12:20:06 -0300
Subject: [PATCH 299/344] Adding translations

---
 .../talk-plugin-featured-comments/client/translations.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/plugins/talk-plugin-featured-comments/client/translations.yml b/plugins/talk-plugin-featured-comments/client/translations.yml
index ea504cc9e..460a76be9 100644
--- a/plugins/talk-plugin-featured-comments/client/translations.yml
+++ b/plugins/talk-plugin-featured-comments/client/translations.yml
@@ -9,6 +9,10 @@ en:
     notify_self_featured: 'The comment from {0} is now featured and approved'
     notify_featured: '{0} featured and approved comment "{1}"'
     notify_unfeatured: '{0} unfeatured comment "{1}"'
+    feature_comment: Feature comment?
+    are_you_sure: Are you sure you would like to feature this comment?
+    cancel: Cancel
+    yes_feature_comment: Yes, feature comment
 es:
   talk-plugin-featured-comments:
     un_feature: Desmarcar
@@ -17,3 +21,7 @@ es:
     featured_comments: Comentarios Remarcados
     go_to_conversation: Ir al comentario
     tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos
+    feature_comment: Destacar comentario?
+    are_you_sure: Está seguro que desea destacar este comentario?
+    cancel: Cancelar
+    yes_feature_comment: Si, destacar comentario
\ No newline at end of file

From 02da749c656df814819dfadbd744204881481d90 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 12:20:20 -0300
Subject: [PATCH 300/344] Adding containers and components

---
 .../components/FeaturedConfirmation.css       | 38 ++++++++++++++
 .../client/components/FeaturedConfirmation.js | 50 +++++++++++++++++++
 .../client/containers/FeaturedConfirmation.js | 17 +++++++
 .../client/index.js                           |  3 +-
 4 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css
new file mode 100644
index 000000000..9a8b93eec
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css
@@ -0,0 +1,38 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+  
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+  
+.close {
+  display: block;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+}
+
+  
+.cancel {
+  margin-right: 5px;
+}
+
+.perform {
+  min-width: 90px;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js
new file mode 100644
index 000000000..5acd29183
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import {Dialog} from 'coral-ui';
+import styles from './FeaturedConfirmation.css';
+
+import Button from 'coral-ui/components/Button';
+import t from 'coral-framework/services/i18n';
+
+const FeaturedConfirmation = ({open, onCancel, onPerform}) => (
+  <Dialog
+    className={cn(styles.dialog, 'talk-featured-dialog')}
+    id="banUserDialog"
+    open={open}
+    onCancel={onCancel} >
+    <span className={styles.close} onClick={onCancel}>×</span>
+    <div className={styles.header}>
+      <h2>
+        {t('talk-plugin-featured-comments.feature_comment')}
+      </h2>
+    </div>
+    <div className={styles.separator}>
+      <h3>{t('talk-plugin-featured-comments.are_you_sure')}</h3>
+    </div>
+    <div className={styles.buttons}>
+      <Button
+        className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
+        cStyle="cancel"
+        onClick={onCancel}
+        raised >
+        {t('talk-plugin-featured-comments.cancel')}
+      </Button>
+      <Button 
+        className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
+        cStyle="black"
+        onClick={onPerform}
+        raised >
+        {t('talk-plugin-featured-comments.yes_feature_comment')}
+      </Button>
+    </div>
+  </Dialog>
+);
+
+FeaturedConfirmation.propTypes = {
+  open: PropTypes.bool,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default FeaturedConfirmation;
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js
new file mode 100644
index 000000000..f12ba76cf
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js
@@ -0,0 +1,17 @@
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import FeaturedConfirmation from '../components/FeaturedConfirmation';
+import {withTags, connect} from 'plugin-api/beta/client/hocs';
+import {closeMenu} from 'plugins/talk-plugin-moderation-actions/client/actions';
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeMenu,
+  }, dispatch);
+
+const enhance = compose(
+  withTags('featured'),
+  connect(null, mapDispatchToProps),
+);
+
+export default enhance(FeaturedConfirmation);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 7a0b9827d..21d61d21a 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -6,6 +6,7 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
+import FeaturedConfirmation from './containers/FeaturedConfirmation';
 import {gql} from 'react-apollo';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
@@ -18,7 +19,7 @@ export default {
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
-    adminModeration: [ModSubscription],
+    adminModeration: [ModSubscription, FeaturedConfirmation],
     adminCommentInfoBar: [ModTag],
   },
   mutations: {

From f0330ed21c59f3d8bd535079d6c16a1b06d1e576 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 08:35:17 -0700
Subject: [PATCH 301/344] fixed version paths

---
 nightwatch.conf.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index e04cc04a8..260738e35 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -9,13 +9,13 @@ module.exports = {
   globals_path: './test/e2e/globals',
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-standalone/.selenium/selenium-server/3.6.0-server.jar',
+    server_path: 'node_modules/selenium-standalone/.selenium/selenium-server/3.7.1-server.jar',
     log_path: './test/e2e/',
     host: '127.0.0.1',
     port: 6666,
     cli_args: {
       'webdriver.chrome.driver': 'node_modules/selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver',
-      'webdriver.gecko.driver': 'node_modules/selenium-standalone/.selenium/geckodriver/0.19.0-x64-geckodriver',
+      'webdriver.gecko.driver': 'node_modules/selenium-standalone/.selenium/geckodriver/0.19.1-x64-geckodriver',
     }
   },
   test_settings: {

From 5b8f335b2aa8aa77b9ff9682568929e522cd9e97 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 18 Dec 2017 16:41:05 +0100
Subject: [PATCH 302/344] Fix new admin comments not showing up in premod

---
 client/coral-embed-stream/src/graphql/index.js             | 7 ++++++-
 .../src/tabs/stream/containers/Stream.js                   | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index d77e6356a..542a767e2 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -193,7 +193,12 @@ export default {
       },
       updateQueries: {
         CoralEmbedStream_Embed: (prev, {mutationResult: {data: {createComment: {comment}}}}) => {
-          if (prev.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED' || comment.status === 'SYSTEM_WITHHELD') {
+          if (
+            prev.me.roles.indexOf('ADMIN') === -1 && prev.asset.settings.moderation === 'PRE' ||
+            comment.status === 'PREMOD' ||
+            comment.status === 'REJECTED' ||
+            comment.status === 'SYSTEM_WITHHELD'
+          ) {
             return prev;
           }
           return insertCommentIntoEmbedQuery(prev, comment);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index e132ab954..bdd63b821 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -285,6 +285,7 @@ const fragments = {
         ignoredUsers {
           id
         }
+        roles
       }
       settings {
         organizationName

From 4d6f38a3d9d6af4354d0985cca09571628fb3430 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 12:43:46 -0300
Subject: [PATCH 303/344] wip

---
 .../client/actions.js                         |  9 +++++
 ...redConfirmation.css => FeaturedDialog.css} |  0
 ...turedConfirmation.js => FeaturedDialog.js} | 11 +++--
 .../client/components/ModTag.js               | 19 +++++----
 .../client/constants.js                       |  4 ++
 .../client/containers/FeaturedConfirmation.js | 17 --------
 .../client/containers/FeaturedDialog.js       | 40 +++++++++++++++++++
 .../client/containers/ModTag.js               |  3 +-
 8 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/actions.js
 rename plugins/talk-plugin-featured-comments/client/components/{FeaturedConfirmation.css => FeaturedDialog.css} (100%)
 rename plugins/talk-plugin-featured-comments/client/components/{FeaturedConfirmation.js => FeaturedDialog.js} (84%)
 create mode 100644 plugins/talk-plugin-featured-comments/client/constants.js
 delete mode 100644 plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js

diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
new file mode 100644
index 000000000..c5c81baa8
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -0,0 +1,9 @@
+import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+
+export const openFeaturedDialog = () => ({
+  type: OPEN_FEATURED_DIALOG
+});
+
+export const closeFeaturedDialog = () => ({
+  type: CLOSE_FEATURED_DIALOG,
+});
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css
similarity index 100%
rename from plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.css
rename to plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
similarity index 84%
rename from plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js
rename to plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index 5acd29183..3408e0d6e 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedConfirmation.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -2,12 +2,11 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
-import styles from './FeaturedConfirmation.css';
-
+import styles from './FeaturedDialog.css';
+import {t} from 'plugin-api/beta/client/services';
 import Button from 'coral-ui/components/Button';
-import t from 'coral-framework/services/i18n';
 
-const FeaturedConfirmation = ({open, onCancel, onPerform}) => (
+const FeaturedDialog = ({open, onCancel, onPerform}) => (
   <Dialog
     className={cn(styles.dialog, 'talk-featured-dialog')}
     id="banUserDialog"
@@ -41,10 +40,10 @@ const FeaturedConfirmation = ({open, onCancel, onPerform}) => (
   </Dialog>
 );
 
-FeaturedConfirmation.propTypes = {
+FeaturedDialog.propTypes = {
   open: PropTypes.bool,
   onPerform: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
 };
 
-export default FeaturedConfirmation;
+export default FeaturedDialog;
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index 0664f07cd..c66b688ab 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ModTag.css';
 import {t} from 'plugin-api/beta/client/services';
@@ -29,15 +30,6 @@ export default class ModTag extends React.Component {
     });
   }
 
-  postTag = async () => {
-    try {
-      await this.props.postTag();
-    }
-    catch(err) {
-      this.props.notify('error', getErrorMessages(err));
-    }
-  }
-
   render() {
     const {alreadyTagged, deleteTag} = this.props;
 
@@ -51,10 +43,17 @@ export default class ModTag extends React.Component {
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={this.postTag} >
+        onClick={this.props.openFeaturedDialog} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>
     );
   }
 }
+
+ModTag.propTypes = {
+  alreadyTagged: PropTypes.bool,
+  deleteTag: PropTypes.func,
+  notify: PropTypes.func,
+  openFeaturedDialog: PropTypes.func,
+};
diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js
new file mode 100644
index 000000000..912f6f002
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/constants.js
@@ -0,0 +1,4 @@
+const prefix = 'TALK_FEATURED_COMMENTS_ACTIONS';
+
+export const OPEN_FEATURED_DIALOG = `${prefix}_OPEN_FEATURED_DIALOG`;
+export const CLOSE_FEATURED_DIALOG = `${prefix}_CLOSE_FEATURED_DIALOG`;
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js
deleted file mode 100644
index f12ba76cf..000000000
--- a/plugins/talk-plugin-featured-comments/client/containers/FeaturedConfirmation.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
-import FeaturedConfirmation from '../components/FeaturedConfirmation';
-import {withTags, connect} from 'plugin-api/beta/client/hocs';
-import {closeMenu} from 'plugins/talk-plugin-moderation-actions/client/actions';
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    closeMenu,
-  }, dispatch);
-
-const enhance = compose(
-  withTags('featured'),
-  connect(null, mapDispatchToProps),
-);
-
-export default enhance(FeaturedConfirmation);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
new file mode 100644
index 000000000..b5d6ddd2d
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import FeaturedDialog from '../components/FeaturedDialog';
+import {withTags, connect} from 'plugin-api/beta/client/hocs';
+import {closeFeaturedDialog} from '../actions';
+
+class FeaturedDialogContainer extends React.Component {
+  render() {
+    const {showFeaturedDialog, closeFeaturedDialog, postTag} = this.props;
+    return <FeaturedDialog
+      open={showFeaturedDialog}
+      onCancel={closeFeaturedDialog}
+      onPerform={postTag}
+    />;
+  }
+}
+
+FeaturedDialogContainer.propTypes = {
+  showFeaturedDialog: PropTypes.func,
+  closeFeaturedDialog: PropTypes.func,
+  postTag: PropTypes.func,
+};
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
+  showFeaturedDialog: state.showFeaturedDialog,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeFeaturedDialog,
+  }, dispatch);
+
+const enhance = compose(
+  withTags('featured'),
+  connect(mapStateToProps, mapDispatchToProps),
+);
+
+export default enhance(FeaturedDialogContainer);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
index 88aee73f6..35e7edfcd 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
@@ -2,11 +2,13 @@ import ModTag from '../components/ModTag';
 import {withTags, connect} from 'plugin-api/beta/client/hocs';
 import {gql, compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
+import {openFeaturedDialog} from '../actions';
 import {notify} from 'plugin-api/beta/client/actions/notification';
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    openFeaturedDialog,
   }, dispatch);
 
 const fragments = {
@@ -24,4 +26,3 @@ const enhance = compose(
 );
 
 export default enhance(ModTag);
-

From 338c23dc3dda86cf4fa4b84cda9fe6c411a5778b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 12:46:24 -0300
Subject: [PATCH 304/344] unnecesary class

---
 .../client/components/FeaturedDialog.js       | 18 ++++++++--------
 .../client/containers/FeaturedDialog.js       | 21 +------------------
 2 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index 3408e0d6e..cad872e12 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -6,13 +6,13 @@ import styles from './FeaturedDialog.css';
 import {t} from 'plugin-api/beta/client/services';
 import Button from 'coral-ui/components/Button';
 
-const FeaturedDialog = ({open, onCancel, onPerform}) => (
+const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
   <Dialog
     className={cn(styles.dialog, 'talk-featured-dialog')}
     id="banUserDialog"
-    open={open}
-    onCancel={onCancel} >
-    <span className={styles.close} onClick={onCancel}>×</span>
+    open={showFeaturedDialog}
+    onCancel={closeFeaturedDialog} >
+    <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
     <div className={styles.header}>
       <h2>
         {t('talk-plugin-featured-comments.feature_comment')}
@@ -25,14 +25,14 @@ const FeaturedDialog = ({open, onCancel, onPerform}) => (
       <Button
         className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
         cStyle="cancel"
-        onClick={onCancel}
+        onClick={closeFeaturedDialog}
         raised >
         {t('talk-plugin-featured-comments.cancel')}
       </Button>
       <Button 
         className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
         cStyle="black"
-        onClick={onPerform}
+        onClick={postTag}
         raised >
         {t('talk-plugin-featured-comments.yes_feature_comment')}
       </Button>
@@ -41,9 +41,9 @@ const FeaturedDialog = ({open, onCancel, onPerform}) => (
 );
 
 FeaturedDialog.propTypes = {
-  open: PropTypes.bool,
-  onPerform: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
+  showFeaturedDialog: PropTypes.bool,
+  postTag: PropTypes.func.isRequired,
+  closeFeaturedDialog: PropTypes.func.isRequired,
 };
 
 export default FeaturedDialog;
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
index b5d6ddd2d..66e9a6a30 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
@@ -1,28 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
 import FeaturedDialog from '../components/FeaturedDialog';
 import {withTags, connect} from 'plugin-api/beta/client/hocs';
 import {closeFeaturedDialog} from '../actions';
 
-class FeaturedDialogContainer extends React.Component {
-  render() {
-    const {showFeaturedDialog, closeFeaturedDialog, postTag} = this.props;
-    return <FeaturedDialog
-      open={showFeaturedDialog}
-      onCancel={closeFeaturedDialog}
-      onPerform={postTag}
-    />;
-  }
-}
-
-FeaturedDialogContainer.propTypes = {
-  showFeaturedDialog: PropTypes.func,
-  closeFeaturedDialog: PropTypes.func,
-  postTag: PropTypes.func,
-};
-
 const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
   showFeaturedDialog: state.showFeaturedDialog,
 });
@@ -37,4 +18,4 @@ const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
 );
 
-export default enhance(FeaturedDialogContainer);
+export default enhance(FeaturedDialog);

From fbcd390220ceacaf61398d4ed3d5e6fd54f7a93a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 18 Dec 2017 16:52:57 +0100
Subject: [PATCH 305/344] Fix load more issue

---
 client/coral-admin/src/containers/UserDetail.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 702ca4d81..01ceeedc0 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -128,7 +128,7 @@ class UserDetailContainer extends React.Component {
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
   }
   ${commentConnectionFragment}

From c699e044fd47fbc4309f3652156e1dea077f6636 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 08:55:49 -0700
Subject: [PATCH 306/344] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1273015fe..2a7ed4481 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From 9fb8e01cd2d55c47237ba0c54c3a8ebeea85ca88 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 13:34:48 -0300
Subject: [PATCH 307/344] working, still wip

---
 plugin-api/beta/client/hocs/withTags.js                |  7 ++++---
 .../talk-plugin-featured-comments/client/actions.js    |  6 ++++--
 .../client/components/FeaturedDialog.js                |  5 ++---
 .../client/components/ModTag.js                        |  7 ++++---
 .../client/containers/FeaturedDialog.js                |  4 +++-
 plugins/talk-plugin-featured-comments/client/index.js  |  6 ++++--
 .../talk-plugin-featured-comments/client/reducer.js    | 10 ++++++++++
 7 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js
index 66fd7ad2e..14ae4fcf4 100644
--- a/plugin-api/beta/client/hocs/withTags.js
+++ b/plugin-api/beta/client/hocs/withTags.js
@@ -87,7 +87,7 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
     }
 
     render() {
-      const {root, asset, comment, user, config} = this.props;
+      const {root, asset, comment, user, config, ...rest} = this.props;
 
       const alreadyTagged = isTagged(comment.tags, TAG);
 
@@ -100,6 +100,7 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
         postTag={this.postTag}
         deleteTag={this.deleteTag}
         config={config}
+        {...rest}
       />;
     }
   }
@@ -134,9 +135,9 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
         ${fragments.comment ? fragments.comment : ''}
       `
     }),
-    connect(mapStateToProps, mapDispatchToProps),
     withAddTag,
-    withRemoveTag
+    withRemoveTag,
+    connect(mapStateToProps, mapDispatchToProps),
   );
 
   WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;
diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
index c5c81baa8..d212ae736 100644
--- a/plugins/talk-plugin-featured-comments/client/actions.js
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -1,7 +1,9 @@
 import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
 
-export const openFeaturedDialog = () => ({
-  type: OPEN_FEATURED_DIALOG
+export const openFeaturedDialog = (comment, asset) => ({
+  type: OPEN_FEATURED_DIALOG,
+  comment,
+  asset,
 });
 
 export const closeFeaturedDialog = () => ({
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index cad872e12..4975f8e59 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -9,7 +9,7 @@ import Button from 'coral-ui/components/Button';
 const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
   <Dialog
     className={cn(styles.dialog, 'talk-featured-dialog')}
-    id="banUserDialog"
+    id="talkFeaturedDialog"
     open={showFeaturedDialog}
     onCancel={closeFeaturedDialog} >
     <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
@@ -41,8 +41,7 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
 );
 
 FeaturedDialog.propTypes = {
-  showFeaturedDialog: PropTypes.bool,
-  postTag: PropTypes.func.isRequired,
+  showFeaturedDialog: PropTypes.bool.isRequired,
   closeFeaturedDialog: PropTypes.func.isRequired,
 };
 
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index c66b688ab..c3cced4f2 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -4,7 +4,6 @@ import cn from 'classnames';
 import styles from './ModTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
 
 export default class ModTag extends React.Component {
   constructor() {
@@ -31,7 +30,7 @@ export default class ModTag extends React.Component {
   }
 
   render() {
-    const {alreadyTagged, deleteTag} = this.props;
+    const {alreadyTagged, deleteTag, comment, asset} = this.props;
 
     return alreadyTagged ? (
       <span className={cn(styles.tag, styles.featured)}
@@ -43,7 +42,7 @@ export default class ModTag extends React.Component {
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={this.props.openFeaturedDialog} >
+        onClick={() => this.props.openFeaturedDialog(comment, asset)} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>
@@ -56,4 +55,6 @@ ModTag.propTypes = {
   deleteTag: PropTypes.func,
   notify: PropTypes.func,
   openFeaturedDialog: PropTypes.func,
+  comment: PropTypes.object,
+  asset: PropTypes.object,
 };
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
index 66e9a6a30..0440e9d08 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
@@ -6,6 +6,8 @@ import {closeFeaturedDialog} from '../actions';
 
 const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
   showFeaturedDialog: state.showFeaturedDialog,
+  comment: state.comment,
+  asset: state.asset,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -14,8 +16,8 @@ const mapDispatchToProps = (dispatch) =>
   }, dispatch);
 
 const enhance = compose(
-  withTags('featured'),
   connect(mapStateToProps, mapDispatchToProps),
+  withTags('featured'),
 );
 
 export default enhance(FeaturedDialog);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 21d61d21a..304bff647 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -6,20 +6,22 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
-import FeaturedConfirmation from './containers/FeaturedConfirmation';
+import FeaturedDialog from './containers/FeaturedDialog';
 import {gql} from 'react-apollo';
+import reducer from './reducer';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
   translations,
+  reducer,
   slots: {
     streamTabsPrepend: [Tab],
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
-    adminModeration: [ModSubscription, FeaturedConfirmation],
+    adminModeration: [ModSubscription, FeaturedDialog],
     adminCommentInfoBar: [ModTag],
   },
   mutations: {
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
index 3840155b3..eb6d302ff 100644
--- a/plugins/talk-plugin-featured-comments/client/reducer.js
+++ b/plugins/talk-plugin-featured-comments/client/reducer.js
@@ -2,6 +2,13 @@ import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
 
 const initialState = {
   showFeaturedDialog: false,
+  comment: {
+    id: null,
+    tags: []
+  },
+  asset: {
+    id: null,
+  },
 };
 
 export default function reducer(state = initialState, action) {
@@ -9,11 +16,14 @@ export default function reducer(state = initialState, action) {
   case OPEN_FEATURED_DIALOG:
     return {
       ...state,
+      comment: action.comment,
+      asset: action.asset,
       showFeaturedDialog: true,
     };
   case CLOSE_FEATURED_DIALOG:
     return {
       ...state,
+      featuredCommentId: null,
       showFeaturedDialog: false,
     };
   default :

From 8f1f875d76b0d3dd1a212ab78a88ca89882fda2f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 13:36:30 -0300
Subject: [PATCH 308/344] less data to the store

---
 plugins/talk-plugin-featured-comments/client/actions.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
index d212ae736..e16f06f48 100644
--- a/plugins/talk-plugin-featured-comments/client/actions.js
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -2,8 +2,13 @@ import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
 
 export const openFeaturedDialog = (comment, asset) => ({
   type: OPEN_FEATURED_DIALOG,
-  comment,
-  asset,
+  comment: {
+    id: comment.id,
+    tags: comment.tags,
+  },
+  asset: {
+    id: asset.id,
+  },
 });
 
 export const closeFeaturedDialog = () => ({

From 6ad218782e7531d314e9c0560b7a4456ef09da60 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 13:39:02 -0300
Subject: [PATCH 309/344] styling

---
 .../client/components/FeaturedDialog.css               |  5 ++++-
 .../client/components/FeaturedDialog.js                | 10 +++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css
index 9a8b93eec..4326d5c5c 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css
@@ -22,7 +22,6 @@
   right: 20px;
 }
 
-  
 .cancel {
   margin-right: 5px;
 }
@@ -36,3 +35,7 @@
   margin-bottom: 6px;
   text-align: right;
 }
+
+.content {
+  margin-bottom: 20px;
+}
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index 4975f8e59..f49148f24 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -13,13 +13,9 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
     open={showFeaturedDialog}
     onCancel={closeFeaturedDialog} >
     <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
-    <div className={styles.header}>
-      <h2>
-        {t('talk-plugin-featured-comments.feature_comment')}
-      </h2>
-    </div>
-    <div className={styles.separator}>
-      <h3>{t('talk-plugin-featured-comments.are_you_sure')}</h3>
+    <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
+    <div className={styles.content}>
+      {t('talk-plugin-featured-comments.are_you_sure')}
     </div>
     <div className={styles.buttons}>
       <Button

From 278e1cec1dec481dfc64cd6b588d542280c24c4a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 13:42:59 -0300
Subject: [PATCH 310/344] done

---
 .../client/components/FeaturedDialog.js       | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index f49148f24..81c054ae8 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -6,35 +6,43 @@ import styles from './FeaturedDialog.css';
 import {t} from 'plugin-api/beta/client/services';
 import Button from 'coral-ui/components/Button';
 
-const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
-  <Dialog
-    className={cn(styles.dialog, 'talk-featured-dialog')}
-    id="talkFeaturedDialog"
-    open={showFeaturedDialog}
-    onCancel={closeFeaturedDialog} >
-    <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
-    <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
-    <div className={styles.content}>
-      {t('talk-plugin-featured-comments.are_you_sure')}
-    </div>
-    <div className={styles.buttons}>
-      <Button
-        className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
-        cStyle="cancel"
-        onClick={closeFeaturedDialog}
-        raised >
-        {t('talk-plugin-featured-comments.cancel')}
-      </Button>
-      <Button 
-        className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
-        cStyle="black"
-        onClick={postTag}
-        raised >
-        {t('talk-plugin-featured-comments.yes_feature_comment')}
-      </Button>
-    </div>
-  </Dialog>
-);
+const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
+
+  const onPerform = async () => {
+    await postTag();
+    await closeFeaturedDialog();
+  };
+
+  return (
+    <Dialog
+      className={cn(styles.dialog, 'talk-featured-dialog')}
+      id="talkFeaturedDialog"
+      open={showFeaturedDialog}
+      onCancel={closeFeaturedDialog} >
+      <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
+      <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
+      <div className={styles.content}>
+        {t('talk-plugin-featured-comments.are_you_sure')}
+      </div>
+      <div className={styles.buttons}>
+        <Button
+          className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
+          cStyle="cancel"
+          onClick={closeFeaturedDialog}
+          raised >
+          {t('talk-plugin-featured-comments.cancel')}
+        </Button>
+        <Button 
+          className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
+          cStyle="black"
+          onClick={onPerform}
+          raised >
+          {t('talk-plugin-featured-comments.yes_feature_comment')}
+        </Button>
+      </div>
+    </Dialog>
+  );
+};
 
 FeaturedDialog.propTypes = {
   showFeaturedDialog: PropTypes.bool.isRequired,

From f7d1543aa321bf403768eac4b1032cff08d40225 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 10:24:11 -0700
Subject: [PATCH 311/344] fixes for sorted window handler

---
 test/e2e/utils/SortedWindowHandler.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/test/e2e/utils/SortedWindowHandler.js b/test/e2e/utils/SortedWindowHandler.js
index f57856814..cb8195978 100644
--- a/test/e2e/utils/SortedWindowHandler.js
+++ b/test/e2e/utils/SortedWindowHandler.js
@@ -25,8 +25,28 @@ class SortedWindowHandler {
    */
   windowHandles(callback) {
     this.client.windowHandles((result) => {
-      this.handles = this.handles.filter((handle) => result.value.includes(handle));
-      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
+      if (Array.isArray(result.value)) {
+        this.handles = this.handles.filter((handle) => {
+          for (let i = 0; i < result.value.length; i++) {
+            if (result.value[i] === handle) {
+              return true;
+            }
+          }
+
+          return false;
+        });
+      } else {
+        this.handles = [];
+      }
+      const remaining = result.value.filter((handle) => {
+        for (let i = 0; i < this.handles.length; i++) {
+          if (this.handles[i] === handle) {
+            return false;
+          }
+        }
+
+        return true;
+      });
       if (remaining.length === 1) {
         this.handles.push(remaining[0]);
       }

From 0e01d40aa7b2429d4860eee9ab7b118ab1fccbc9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 18 Dec 2017 19:01:43 +0100
Subject: [PATCH 312/344] Fix sign in on profile tab

---
 client/coral-framework/hocs/withQuery.js      | 24 +++++++++++++------
 .../containers/ProfileContainer.js            |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 280191f89..15ec62a47 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -49,8 +49,9 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     memoized = null;
     resolvedDocument = null;
     lastNetworkStatus = null;
-    data = null;
     name = '';
+    apolloData = null;
+    data = null;
 
     // Pending subscription data.
     subscriptionQueue = [];
@@ -151,6 +152,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     };
 
     nextData(data) {
+      this.apolloData = data;
       this.emitWhenNeeded(data);
 
       // If data was previously set, we update it in a immutable way.
@@ -181,16 +183,24 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           variables: data.variables,
           networkStatus: data.networkStatus,
           loading: data.loading,
-          startPolling: data.startPolling,
-          stopPolling: data.stopPolling,
-          refetch: data.refetch,
-          updateQuery: data.updateQuery,
           subscribeToMoreThrottled: this.subscribeToMoreThrottled,
+          startPolling: (...args) => {
+            return this.apolloData.startPolling(...args);
+          },
+          stopPolling: (...args) => {
+            return this.apolloData.stopPolling(...args);
+          },
+          updateQuery: (...args) => {
+            return this.apolloData.updateQuery(...args);
+          },
+          refetch: (...args) => {
+            return this.apolloData.refetch(...args);
+          },
           subscribeToMore: (stmArgs) => {
             const resolvedDocument = this.resolveDocument(stmArgs.document);
 
             // Resolve document fragments before passing it to `apollo-client`.
-            return data.subscribeToMore({
+            return this.apolloData.subscribeToMore({
               ...stmArgs,
               document: resolvedDocument,
               onError: (err) => {
@@ -209,7 +219,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
               {variables: lmArgs.variables});
 
             // Resolve document fragments before passing it to `apollo-client`.
-            return data.fetchMore({
+            return this.apolloData.fetchMore({
               ...lmArgs,
               query: resolvedDocument,
             })
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 1ad8b98c9..5b4f5f0ed 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -61,7 +61,7 @@ class ProfileContainer extends Component {
       return <NotLoggedIn showSignInDialog={showSignInDialog} />;
     }
 
-    if (loading) {
+    if (loading || !me) {
       return <Spinner />;
     }
 

From 82fd56dc6716d7840c0922963f1a781b2ea7433a Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 18 Dec 2017 13:09:39 -0500
Subject: [PATCH 313/344] Update permalink copy to Share on stream

---
 locales/da.yml    | 2 +-
 locales/en.yml    | 2 +-
 locales/es.yml    | 2 +-
 locales/fr.yml    | 2 +-
 locales/pt_BR.yml | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/locales/da.yml b/locales/da.yml
index 0a5152cd9..d4544043c 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -285,7 +285,7 @@ da:
   no_like_bio: "Jeg kan ikke lide denne biografi"
   no_like_username: "Jeg kan ikke lide dette brugernavn"
   other: "Andet"
-  permalink: "Link"
+  permalink: "Delen"
   personal_info: "Denne kommentar afslører personligt identificerbare oplysninger"
   post: "Post"
   profile: "Profil"
diff --git a/locales/en.yml b/locales/en.yml
index f1d566475..a2197652e 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -297,7 +297,7 @@ en:
   no_like_bio: "I don't like this bio"
   no_like_username: "I don't like this username"
   other: Other
-  permalink: Link
+  permalink: Share
   personal_info: "This comment reveals personally identifiable information"
   post: Post
   profile: Profile
diff --git a/locales/es.yml b/locales/es.yml
index 9441253c7..74dc325d8 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -283,7 +283,7 @@ es:
   no_like_bio: "No me gusta esta biografia"
   no_like_username: "No me gusta este nombre de usuario"
   other: Otro
-  permalink: Enlace
+  permalink: Compartir
   personal_info: "Este comentario muestra información personal"
   post: Publicar
   profile: Perfil
diff --git a/locales/fr.yml b/locales/fr.yml
index 31ad3ca91..e9f291b65 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -237,7 +237,7 @@ fr:
   no_like_bio: "Je n'aime pas cette biographie"
   no_like_username: "Je n'aime pas ce nom d'utilisateur"
   other: Autre
-  permalink: Lien
+  permalink: Partager
   personal_info: "Ce commentaire révèle des informations personnelles identifiables"
   post: Publier
   profile: Profil
diff --git a/locales/pt_BR.yml b/locales/pt_BR.yml
index bdfe72d5a..7ed111287 100644
--- a/locales/pt_BR.yml
+++ b/locales/pt_BR.yml
@@ -288,7 +288,7 @@ pt_BR:
   no_like_bio: "Eu não gosto dessa descrição de perfil"
   no_like_username: "Eu não gosto deste nome de usuário"
   other: Outro
-  permalink: Link
+  permalink: Compartilhar
   personal_info: "Este comentário revela informações de identificação pessoal"
   post: Publicar
   profile: Perfil

From 1cdef8f86471abcf775a46dff424bfec2409d83d Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 15:20:06 -0300
Subject: [PATCH 314/344] bounded

---
 .../client/components/ModTag.js                             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index c3cced4f2..70f51dcbc 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -29,6 +29,10 @@ export default class ModTag extends React.Component {
     });
   }
 
+  openFeaturedDialog = (comment, asset) => {
+    this.props.openFeaturedDialog(comment, asset);
+  }
+
   render() {
     const {alreadyTagged, deleteTag, comment, asset} = this.props;
 
@@ -42,7 +46,7 @@ export default class ModTag extends React.Component {
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={() => this.props.openFeaturedDialog(comment, asset)} >
+        onClick={() => this.openFeaturedDialog(comment, asset)} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>

From 35c88ffab4f2c30c436ed2c843862ece26d274d3 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 18 Dec 2017 15:21:02 -0300
Subject: [PATCH 315/344] spreading the rest first

---
 plugin-api/beta/client/hocs/withTags.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js
index 14ae4fcf4..3edc66824 100644
--- a/plugin-api/beta/client/hocs/withTags.js
+++ b/plugin-api/beta/client/hocs/withTags.js
@@ -92,6 +92,7 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
       const alreadyTagged = isTagged(comment.tags, TAG);
 
       return <WrappedComponent
+        {...rest}
         root={root}
         asset={asset}
         comment={comment}
@@ -100,7 +101,6 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
         postTag={this.postTag}
         deleteTag={this.deleteTag}
         config={config}
-        {...rest}
       />;
     }
   }

From 583ab0ff741cf96d6b7c820956d8401a4eef0fc9 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 12:42:58 -0700
Subject: [PATCH 316/344] disabling firefox,edge

---
 scripts/e2e-ci.sh | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 3e9726340..b86edb319 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -8,7 +8,10 @@ E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
-BROWSERS="chrome,firefox,edge" #ie safari
+
+# FIXME: disabled firefox,edge until fixing pass is done
+# BROWSERS="chrome,firefox,edge" #ie safari
+BROWSERS="chrome"
 
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack

From 3121ffb55a2a607e1c1bb749516c1d05d00970f8 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Mon, 18 Dec 2017 17:31:25 -0500
Subject: [PATCH 317/344] Version 3.9.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2a7ed4481..6a0e7a482 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,

From dbd106d523c9d6ef9e32102a5cc1292ec96a0cc3 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 18 Dec 2017 16:24:28 -0700
Subject: [PATCH 318/344] added support for plugging into schema level resolve

---
 graph/connectors.js | 10 +++++++++-
 graph/schema.js     | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/graph/connectors.js b/graph/connectors.js
index cc7e45d21..c71942bc4 100644
--- a/graph/connectors.js
+++ b/graph/connectors.js
@@ -1,3 +1,6 @@
+const debug = require('debug')('talk:graph:connectors');
+const merge = require('lodash/merge');
+
 // Errors.
 const errors = require('../errors');
 
@@ -76,4 +79,9 @@ const connectors = {
   },
 };
 
-module.exports = connectors;
+module.exports = Plugins.get('server', 'connectors').reduce((defaultConnectors, {plugin, connectors: pluginConnectors}) => {
+  debug(`adding plugin '${plugin.name}'`);
+
+  // Merge in the plugin connectors.
+  return merge(defaultConnectors, pluginConnectors);
+}, connectors);
diff --git a/graph/schema.js b/graph/schema.js
index d4cd9f890..d9df096a4 100644
--- a/graph/schema.js
+++ b/graph/schema.js
@@ -1,4 +1,8 @@
-const {makeExecutableSchema} = require('graphql-tools');
+const {
+  makeExecutableSchema,
+  addSchemaLevelResolveFunction,
+} = require('graphql-tools');
+const debug = require('debug')('talk:graph:schema');
 const {decorateWithHooks} = require('./hooks');
 const {decorateWithErrorHandler} = require('./errorHandler');
 
@@ -14,4 +18,11 @@ decorateWithHooks(schema, plugins.get('server', 'hooks'));
 // Handle errors like masking in production and mutation errors.
 decorateWithErrorHandler(schema);
 
+// For each schemaLevelResolveFunction, add it to the schema.
+plugins.get('server', 'schemaLevelResolveFunction').forEach(({plugin, schemaLevelResolveFunction}) => {
+  debug(`added schemaLevelResolveFunction from plugin '${plugin.name}'`);
+
+  addSchemaLevelResolveFunction(schema, schemaLevelResolveFunction);
+});
+
 module.exports = schema;

From e78f17460f997fdef389ab9b4e65d51004efe6ba Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 14:27:34 +0100
Subject: [PATCH 319/344] Fix wrong spec

---
 test/e2e/specs/04_userStatus.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 5a7593e53..41540db65 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -94,6 +94,14 @@ module.exports = {
     comments
       .waitForElementVisible('@restrictedMessageBox');
   },
+  'user should not be able to comment': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .waitForElementNotPresent('@commentBoxTextarea')
+      .waitForElementNotPresent('@commentBoxPostButton');
+  },
   'user picks another username': (client) => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
@@ -106,12 +114,12 @@ module.exports = {
       .click('@suspendedAccountSubmitButton')
       .waitForElementNotPresent('@suspendedAccountInput');
   },
-  'user should not be able to comment': (client) => {
+  'user should be able to comment': (client) => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
     comments
-      .waitForElementNotPresent('@commentBoxTextarea')
-      .waitForElementNotPresent('@commentBoxPostButton');
+      .waitForElementVisible('@commentBoxTextarea')
+      .waitForElementVisible('@commentBoxPostButton');
   },
 };

From 4116e206a37296175f9c06c7ceaee9edad887fe6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 14:41:51 +0100
Subject: [PATCH 320/344] Configurable timeout

---
 scripts/e2e-ci.sh   |  5 ++++-
 scripts/e2e.js      | 10 +++++++---
 test/e2e/globals.js |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index b86edb319..5e0bf00b3 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -6,6 +6,9 @@ CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
+# Timeout for WaitForConditions.
+E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
+
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
 
@@ -15,7 +18,7 @@ BROWSERS="chrome"
 
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --browsers $BROWSERS
+  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers $BROWSERS
 else
   # When browserstack is not available test locally using chrome headless.
   echo Testing locally
diff --git a/scripts/e2e.js b/scripts/e2e.js
index 97e321310..2f99bc5d9 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -59,7 +59,7 @@ function seleniumInstall() {
   });
 }
 
-function nightwatch(env, config, reportsFolder, browserstack) {
+function nightwatch(env, config, reportsFolder, browserstack, timeout) {
   return new Promise((resolve, reject) => {
     try {
       const nw = childProcess.spawn(
@@ -71,6 +71,7 @@ function nightwatch(env, config, reportsFolder, browserstack) {
             'BROWSERSTACK_KEY': browserstack.key,
             'BROWSERSTACK_USER': browserstack.user,
             'REPORTS_FOLDER': `${reportsFolder}/${env}`,
+            'WAIT_FOR_TIMEOUT': timeout,
           }),
           stdio: 'inherit',
         });
@@ -111,13 +112,13 @@ function printSection(txt) {
   console.log('*****************************'.magenta);
 }
 
-async function runBrowserTests(browsers, config, retries = 1, reportsFolder, browserstack) {
+async function runBrowserTests(browsers, config, retries = 1, reportsFolder, browserstack, timeout) {
   const succeeded = {};
   for (let browser of browsers) {
     for (let t = 0; t < retries + 1; t++) {
       try {
         printSection(`e2e test for ${browser} #${t}`);
-        await nightwatch(browser, config, reportsFolder, browserstack);
+        await nightwatch(browser, config, reportsFolder, browserstack, timeout);
         succeeded[browser] = t;
         console.log(`\n==> Succeeded e2e for ${browser} #${t}\n`.green);
         break;
@@ -143,6 +144,7 @@ async function start(program) {
   const date = new Date().toISOString()
     .replace(/[T.]/g, '-')
     .replace(/:/g, '');
+  const timeout = program.timeout;
   const reportsFolder = `${program.reportsFolder}/${date}`;
   let exitCode = 0;
   let config = 'nightwatch.conf.js';
@@ -175,6 +177,7 @@ async function start(program) {
       retries,
       reportsFolder,
       browserstack,
+      timeout,
     );
     if (!succeeded) {
       exitCode = 1;
@@ -202,6 +205,7 @@ program
   .option('-r, --retries [number]', 'Number of retries before failing', '1')
   .option('--headless', 'Start in headless mode for local e2e')
   .option('--reports-folder [folder]', 'Reports folder', './test/e2e/reports')
+  .option('--timeout [number]', 'Timeout for WaitForConditions', '5000')
   .parse(process.argv);
 
 start(program);
diff --git a/test/e2e/globals.js b/test/e2e/globals.js
index 4d2740404..10549e2e7 100644
--- a/test/e2e/globals.js
+++ b/test/e2e/globals.js
@@ -11,7 +11,7 @@ module.exports = {
     shutdown();
     done();
   },
-  waitForConditionTimeout: 5000,
+  waitForConditionTimeout: parseInt(process.env.WAIT_FOR_TIMEOUT) || 5000,
   testData: {
     admin: {
       email: 'admin@test.com',

From 71f0887a820dfe6356d6d40b419ef14ad6d75791 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 14:42:29 +0100
Subject: [PATCH 321/344] Make browsers configurable through ENV E2E_BROWSERS

---
 scripts/e2e-ci.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 5e0bf00b3..8a90ed3bd 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -13,12 +13,12 @@ E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
 
 # FIXME: disabled firefox,edge until fixing pass is done
-# BROWSERS="chrome,firefox,edge" #ie safari
-BROWSERS="chrome"
+# E2E_BROWSERS=${E2E_BROWSERS:-chrome,firefox,edge} #ie safari
+E2E_BROWSERS=${E2E_BROWSERS:-chrome}
 
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers $BROWSERS
+  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS"
 else
   # When browserstack is not available test locally using chrome headless.
   echo Testing locally

From 7a4b87f7438665f0e88ece6e04a414c640527ea6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 14:42:54 +0100
Subject: [PATCH 322/344] Fix popup issues

---
 test/e2e/page_objects/embedStream.js  | 21 +++++-------------
 test/e2e/utils/SortedWindowHandler.js | 32 +++++++++++----------------
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 1cecad2a3..0a31745e4 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -62,24 +62,12 @@ module.exports = {
           // Focusing on the Login PopUp
           windowHandler.windowHandles((handles) => {
             this.api.switchWindow(handles[1]);
-          });
 
-          const popup = this.api.page.popup().ready();
-          callback(popup);
+            const popup = this.api.page.popup().ready();
+            callback(popup);
 
-          // Give a tiny bit of time to let popup close.
-          this.api.pause(50);
-
-          if (this.api.capabilities.browserName === 'MicrosoftEdge') {
-
-            // More time for edge.
-            // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/7393dbfda8387e43b6d5851f359b0c07db414973
-            this.api.pause(1000);
-          }
-
-          // Focusing on the Embed Window
-          windowHandler.windowHandles((handles) => {
-            this.api.switchWindow(handles[0]);
+            // Focus on the Embed Window.
+            windowHandler.pop();
 
             // For some reasons firefox does not automatically load auth after login.
             // https://www.browserstack.com/automate/builds/37650cb4e66c6edce0ba0800a1c1b7e7f74bf991/sessions/7a4e9da69b0f9ecdf8b7fa9150639e47b1532cb0#automate_button
@@ -89,6 +77,7 @@ module.exports = {
               this.parent.switchToIframe();
             }
           });
+
           return this;
         },
         logout() {
diff --git a/test/e2e/utils/SortedWindowHandler.js b/test/e2e/utils/SortedWindowHandler.js
index cb8195978..a23f71506 100644
--- a/test/e2e/utils/SortedWindowHandler.js
+++ b/test/e2e/utils/SortedWindowHandler.js
@@ -25,28 +25,14 @@ class SortedWindowHandler {
    */
   windowHandles(callback) {
     this.client.windowHandles((result) => {
-      if (Array.isArray(result.value)) {
-        this.handles = this.handles.filter((handle) => {
-          for (let i = 0; i < result.value.length; i++) {
-            if (result.value[i] === handle) {
-              return true;
-            }
-          }
 
-          return false;
-        });
-      } else {
-        this.handles = [];
+      if (result.value.message) {
+        throw new Error(result.value.message);
       }
-      const remaining = result.value.filter((handle) => {
-        for (let i = 0; i < this.handles.length; i++) {
-          if (this.handles[i] === handle) {
-            return false;
-          }
-        }
 
-        return true;
-      });
+      this.handles = this.handles.filter((handle) => result.value.includes(handle));
+      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
+
       if (remaining.length === 1) {
         this.handles.push(remaining[0]);
       }
@@ -56,6 +42,14 @@ class SortedWindowHandler {
       callback(this.handles);
     });
   }
+
+  /**
+   *  Switch to main window handle and remove latest handle.
+   */
+  pop() {
+    this.client.switchWindow(this.handles[0]);
+    this.handles.splice(-1, 1);
+  }
 }
 
 module.exports = SortedWindowHandler;

From 82e617b19b1deab14188fa366c1c1aa019e1f42c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 14:48:58 +0100
Subject: [PATCH 323/344] Enable firefox and edge

---
 scripts/e2e-ci.sh | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 8a90ed3bd..64f749196 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -12,9 +12,7 @@ E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
 
-# FIXME: disabled firefox,edge until fixing pass is done
-# E2E_BROWSERS=${E2E_BROWSERS:-chrome,firefox,edge} #ie safari
-E2E_BROWSERS=${E2E_BROWSERS:-chrome}
+E2E_BROWSERS=${E2E_BROWSERS:-chrome,firefox,edge} #ie safari
 
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack

From d06ff8c93c7c736b1fe93584567a613fa96f37e1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 15:56:54 +0100
Subject: [PATCH 324/344] Double default WaitForTimeout

---
 scripts/e2e.js      | 2 +-
 test/e2e/globals.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e.js b/scripts/e2e.js
index 2f99bc5d9..d1d06e99a 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -205,7 +205,7 @@ program
   .option('-r, --retries [number]', 'Number of retries before failing', '1')
   .option('--headless', 'Start in headless mode for local e2e')
   .option('--reports-folder [folder]', 'Reports folder', './test/e2e/reports')
-  .option('--timeout [number]', 'Timeout for WaitForConditions', '5000')
+  .option('--timeout [number]', 'Timeout for WaitForConditions', '10000')
   .parse(process.argv);
 
 start(program);
diff --git a/test/e2e/globals.js b/test/e2e/globals.js
index 10549e2e7..09b297a24 100644
--- a/test/e2e/globals.js
+++ b/test/e2e/globals.js
@@ -11,7 +11,7 @@ module.exports = {
     shutdown();
     done();
   },
-  waitForConditionTimeout: parseInt(process.env.WAIT_FOR_TIMEOUT) || 5000,
+  waitForConditionTimeout: parseInt(process.env.WAIT_FOR_TIMEOUT) || 10000,
   testData: {
     admin: {
       email: 'admin@test.com',

From e4f1f5d08b58b2a1f80567625d246d80ad779dd9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 16:14:59 +0100
Subject: [PATCH 325/344] Allow disabling e2e in ci

---
 scripts/e2e-ci.sh | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 64f749196..c9ee437e8 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -2,6 +2,7 @@
 
 REPORTS_FOLDER=${CIRCLE_TEST_REPORTS:-./test/e2e/reports}
 CIRCLE_BRANCH=${CIRCLE_BRANCH:-master}
+E2E_DISABLE=${E2E_DISABLE:-false}
 
 # Amount of retries before failure.
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
@@ -14,6 +15,12 @@ E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
 
 E2E_BROWSERS=${E2E_BROWSERS:-chrome,firefox,edge} #ie safari
 
+
+if [[ "${E2E_DISABLE}" == "true" ]]; then
+  echo E2E is disabled.
+  exit
+fi
+
 if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack
   yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS"

From 1fce2451c71a0afaf0ec0ec774d634fc94e7a012 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 16:16:59 +0100
Subject: [PATCH 326/344] Remove some blank lines

---
 scripts/e2e-ci.sh | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index c9ee437e8..95672c5d7 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -12,10 +12,8 @@ E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.
-
 E2E_BROWSERS=${E2E_BROWSERS:-chrome,firefox,edge} #ie safari
 
-
 if [[ "${E2E_DISABLE}" == "true" ]]; then
   echo E2E is disabled.
   exit

From f12abbf39ed51cf22f3d477e356aa9d0c6293303 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 16:26:55 +0100
Subject: [PATCH 327/344] Default timeout to 10000 for ci

---
 scripts/e2e-ci.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/e2e-ci.sh b/scripts/e2e-ci.sh
index 95672c5d7..a509ccee7 100755
--- a/scripts/e2e-ci.sh
+++ b/scripts/e2e-ci.sh
@@ -8,7 +8,7 @@ E2E_DISABLE=${E2E_DISABLE:-false}
 E2E_MAX_RETRIES=${E2E_MAX_RETRIES:-1}
 
 # Timeout for WaitForConditions.
-E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-5000}
+E2E_WAIT_FOR_TIMEOUT=${E2E_WAIT_FOR_TIMEOUT:-10000}
 
 # Safari >= 8 has issues connecting to browserstack-local. Safari < 8 is too old.
 # IE 64bit has issues with receiving keyboard input. Let's wait for them to fix it.

From e2d8562868f85ff5a2245004e8ae8f348266de77 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 19 Dec 2017 09:13:01 -0700
Subject: [PATCH 328/344] added support for app plugin hook

---
 app.js           | 21 +++++++++++++++++++++
 graph/context.js | 16 ++++++++++------
 plugins.js       |  5 +++--
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/app.js b/app.js
index b65126aa0..c180d2c04 100644
--- a/app.js
+++ b/app.js
@@ -1,8 +1,10 @@
 const express = require('express');
 const morgan = require('morgan');
 const path = require('path');
+const uuid = require('uuid');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
+const plugins = require('./services/plugins');
 const compression = require('compression');
 const {HELMET_CONFIGURATION} = require('./config');
 const {MOUNT_PATH} = require('./url');
@@ -11,6 +13,25 @@ const debug = require('debug')('talk:app');
 
 const app = express();
 
+// Request Identity Middleware
+app.use((req, res, next) => {
+  req.id = uuid.v4();
+
+  next();
+});
+
+//==============================================================================
+// PLUGIN PRE APPLICATION MIDDLEWARE
+//==============================================================================
+
+// Inject server route plugins.
+plugins.get('server', 'app').forEach(({plugin, app: callback}) => {
+  debug(`added plugin '${plugin.name}'`);
+
+  // Pass the app to the plugin to mount it's routes.
+  callback(app);
+});
+
 //==============================================================================
 // APPLICATION WIDE MIDDLEWARE
 //==============================================================================
diff --git a/graph/context.js b/graph/context.js
index d6d85a651..e894c1534 100644
--- a/graph/context.js
+++ b/graph/context.js
@@ -42,14 +42,15 @@ const decorateContextPlugins = (context, contextPlugins) => {
  * Stores the request context.
  */
 class Context {
-  constructor({user = null}) {
+  constructor(parent) {
 
-    // Generate a new context id for the request.
-    this.id = uuid.v4();
+    // Generate a new context id for the request if the parent doesn't provide
+    // one.
+    this.id = parent.id || uuid.v4();
 
-    // Load the current logged in user to `user`, otherwise this'll be null.
-    if (user) {
-      this.user = user;
+    // Load the current logged in user to `user`, otherwise this will be null.
+    if (parent.user) {
+      this.user = parent.user;
     }
 
     // Attach the connectors.
@@ -66,6 +67,9 @@ class Context {
 
     // Bind the publish/subscribe to the context.
     this.pubsub = pubsub.getClient();
+
+    // Bind the parent context.
+    this.parent = parent;
   }
 }
 
diff --git a/plugins.js b/plugins.js
index dfe3d3312..487825be7 100644
--- a/plugins.js
+++ b/plugins.js
@@ -55,7 +55,8 @@ const hookSchemas = {
   loaders: Joi.func().maxArity(1),
   mutators: Joi.func().maxArity(1),
   resolvers: Joi.object().pattern(/\w/, Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.func())),
-  typeDefs: Joi.string()
+  typeDefs: Joi.string(),
+  schemaLevelResolveFunction: Joi.func(),
 };
 
 /**
@@ -172,7 +173,7 @@ class PluginSection {
     if (this.required) {
       return;
     }
-    
+
     this.required = true;
     this.plugins.forEach((plugin) => {
 

From 66287f5b7d9166d790846ad04239ea79fef97039 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 18:27:19 +0100
Subject: [PATCH 329/344] Fix dialog not rendering fully in firefox

---
 client/coral-ui/components/Dialog.css | 4 ++++
 client/coral-ui/components/Dialog.js  | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-ui/components/Dialog.css

diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css
new file mode 100644
index 000000000..b5872c12c
--- /dev/null
+++ b/client/coral-ui/components/Dialog.css
@@ -0,0 +1,4 @@
+
+.dialog {
+  position: fixed;
+}
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index a7d34a512..d847efaea 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/client/coral-ui/components/Dialog.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
+import styles from './Dialog.css';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -54,7 +55,7 @@ export default class Dialog extends Component {
     return (
       <dialog
         ref={(el) => { this.dialog = el; }}
-        className={`mdl-dialog ${className}`}
+        className={`mdl-dialog ${className} ${styles.dialog}`}
         {...rest}
       >
         {children}

From 88e9faea00ddd06b09843b009d8cd31da7f77bd2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 18:48:44 +0100
Subject: [PATCH 330/344] Increase e2e stability

---
 test/e2e/page_objects/admin.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index aa3b58ab5..fd2571707 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -137,6 +137,10 @@ module.exports = {
           this.parent
             .click('@drawerOverlay')
             .waitForElementNotPresent('@drawerOverlay');
+
+          // Wait a bit to let animations terminate cleanly.
+          this.api.pause(200);
+
           return this.parent;
         },
       }],

From f25cc56ddb8eb20116f6d5038d1400539838170e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 19:15:45 +0100
Subject: [PATCH 331/344] Use Portal to put dialogs to the end of the document

---
 client/coral-ui/components/Dialog.css |  1 -
 client/coral-ui/components/Dialog.js  | 17 ++++++++++-------
 package.json                          |  1 +
 yarn.lock                             |  6 ++++++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css
index b5872c12c..9e7700299 100644
--- a/client/coral-ui/components/Dialog.css
+++ b/client/coral-ui/components/Dialog.css
@@ -1,4 +1,3 @@
 
 .dialog {
-  position: fixed;
 }
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index d847efaea..bba386026 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/client/coral-ui/components/Dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 import styles from './Dialog.css';
+import {Portal} from 'react-portal';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -53,13 +54,15 @@ export default class Dialog extends Component {
     const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line
 
     return (
-      <dialog
-        ref={(el) => { this.dialog = el; }}
-        className={`mdl-dialog ${className} ${styles.dialog}`}
-        {...rest}
-      >
-        {children}
-      </dialog>
+      <Portal>
+        <dialog
+          ref={(el) => { this.dialog = el; }}
+          className={`mdl-dialog ${className} ${styles.dialog}`}
+          {...rest}
+        >
+          {children}
+        </dialog>
+      </Portal>
     );
   }
 }
diff --git a/package.json b/package.json
index da084504d..de3b617a2 100644
--- a/package.json
+++ b/package.json
@@ -160,6 +160,7 @@
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
+    "react-portal": "^4.1.2",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 282e501e1..c380bcd3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7473,6 +7473,12 @@ react-paginate@^5.0.0:
     prop-types "^15.6.0"
     react-addons-create-fragment "^15.0.0"
 
+react-portal@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-recaptcha@^2.2.6:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7"

From 88d3a53165cf46e15a93da6931c2f94272fb1c27 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 19:24:39 +0100
Subject: [PATCH 332/344] Make backdrop work

---
 client/coral-ui/components/Dialog.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css
index 9e7700299..7c260cbbf 100644
--- a/client/coral-ui/components/Dialog.css
+++ b/client/coral-ui/components/Dialog.css
@@ -1,3 +1,14 @@
 
 .dialog {
 }
+
+:global(.backdrop) {
+  z-index: 100148;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: black;
+  opacity: 0.1;
+}

From 689fb4baf0c78ce531c9e04caab27f127313db44 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 19:26:22 +0100
Subject: [PATCH 333/344] Remove z-index

---
 client/coral-ui/components/Dialog.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css
index 7c260cbbf..47bc43918 100644
--- a/client/coral-ui/components/Dialog.css
+++ b/client/coral-ui/components/Dialog.css
@@ -3,7 +3,6 @@
 }
 
 :global(.backdrop) {
-  z-index: 100148;
   left: 0;
   top: 0;
   width: 100%;

From f2f7742709073b3ba01c0184285a789321a5ebd9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 19:40:16 +0100
Subject: [PATCH 334/344] Adapt e2e

---
 test/e2e/page_objects/admin.js  | 8 ++++----
 test/e2e/specs/04_userStatus.js | 7 +++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index fd2571707..c76a45d9e 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -57,6 +57,10 @@ module.exports = {
     suspendUserDialog: '.talk-admin-suspend-user-dialog',
     suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
     supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
+    usernameDialog: '.talk-reject-username-dialog',
+    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message',
     toast: '.toastify',
     toastClose: '.toastify__close',
   },
@@ -97,10 +101,6 @@ module.exports = {
         flaggedUser:'.talk-admin-community-flagged-user',
         flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
         flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
-        usernameDialog: '.talk-reject-username-dialog',
-        usernameDialogButtons: '.talk-reject-username-dialog-buttons',
-        usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
-        usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
       },
       sections: {
         people: {
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 41540db65..f4a4455f0 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -64,15 +64,18 @@ module.exports = {
       .click('@flaggedUserRejectButton');
   },
   'admin suspends the user': (client) => {
+    const adminPage = client.page.admin();
     const community = client.page.admin().section.community;
 
-    community
+    adminPage
       .waitForElementVisible('@usernameDialog')
       .waitForElementVisible('@usernameDialogButtons')
       .waitForElementVisible('@usernameDialogSuspend')
       .click('@usernameDialogSuspend')
       .waitForElementVisible('@usernameDialogSuspensionMessage')
-      .click('@usernameDialogSuspend')
+      .click('@usernameDialogSuspend'),
+
+    community
       .waitForElementNotPresent('@flaggedUser');
   },
   'admin logs out': (client) => {

From 349341400d97622e3f267ccbd24fd94e1209b296 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 20:39:41 +0100
Subject: [PATCH 335/344] Fix error when queue is empty

---
 client/coral-admin/src/routes/Moderation/graphql.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index 5758315eb..e4d7940ed 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -152,6 +152,10 @@ export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
   let nodes = root[queue].nodes;
   let hasNextPage = root[queue].hasNextPage;
 
+  if (!nodes.length) {
+    return root;
+  }
+
   if (queueConfig) {
     nodes = root[queue].nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig));
   }

From e8553c50352c9108bae6db29694d4e820db2a01b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 20:46:59 +0100
Subject: [PATCH 336/344] Revert debug code :-D

---
 client/coral-admin/src/routes/Moderation/graphql.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index e4d7940ed..86bc524b8 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -165,8 +165,8 @@ export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
     sortOrder,
   );
 
-  if (nodes.length > 2) {
-    nodes = nodes.slice(0, 2);
+  if (nodes.length > 100) {
+    nodes = nodes.slice(0, 100);
     hasNextPage = true;
   }
 

From f27de815e6d5a87f041e8a0b3ebdd63b852129b1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 20:48:59 +0100
Subject: [PATCH 337/344] Minor syntax issue

---
 test/e2e/specs/04_userStatus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index f4a4455f0..011f59056 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -73,7 +73,7 @@ module.exports = {
       .waitForElementVisible('@usernameDialogSuspend')
       .click('@usernameDialogSuspend')
       .waitForElementVisible('@usernameDialogSuspensionMessage')
-      .click('@usernameDialogSuspend'),
+      .click('@usernameDialogSuspend');
 
     community
       .waitForElementNotPresent('@flaggedUser');

From df0ab7c1dc4158e4738109da96e394917dd4a32d Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 19 Dec 2017 15:11:11 -0700
Subject: [PATCH 338/344] removed body-parser in favor of express.json()

---
 package.json    | 1 -
 routes/index.js | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index de3b617a2..c46a4caaa 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,6 @@
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "^6.23.0",
     "bcryptjs": "^2.4.3",
-    "body-parser": "1.18.2",
     "bowser": "^1.7.2",
     "cli-table": "^0.3.1",
     "clipboard": "^1.7.1",
diff --git a/routes/index.js b/routes/index.js
index 454e32f58..af7edec3b 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,7 +1,6 @@
 const accepts = require('accepts');
 const apollo = require('graphql-server-express');
 const authentication = require('../middleware/authentication');
-const bodyParser = require('body-parser');
 const cookieParser = require('cookie-parser');
 const debug = require('debug')('talk:routes');
 const enabled = require('debug').enabled;
@@ -82,7 +81,7 @@ router.use('/embed', staticTemplate, require('./embed'));
 router.use(cookieParser());
 
 // Parse the body json if it's there.
-router.use(bodyParser.json());
+router.use(express.json());
 
 const passportDebug = require('debug')('talk:passport');
 

From b46b392af4e15a87c9218821027cdeb2ef38e15c Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 20 Dec 2017 09:31:59 -0700
Subject: [PATCH 339/344] added subscription hooks

---
 graph/subscriptions.js | 37 ++++++++++++++++++++++++++++++++++---
 plugins.js             |  4 ++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/graph/subscriptions.js b/graph/subscriptions.js
index 59dd6e923..60afc9c45 100644
--- a/graph/subscriptions.js
+++ b/graph/subscriptions.js
@@ -5,6 +5,7 @@ const debug = require('debug')('talk:graph:subscriptions');
 const pubsub = require('../services/pubsub');
 const schema = require('./schema');
 const Context = require('./context');
+const plugins = require('../services/plugins');
 
 const {deserializeUser} = require('../services/subscriptions');
 const setupFunctions = require('./setupFunctions');
@@ -16,16 +17,42 @@ const {
 
 const {BASE_PATH} = require('../url');
 
-const onConnect = ({token}, connection) => {
+// Collect all the plugin hooks that should be executed onConnect and
+// onDisconnect.
+const hooks = plugins.get('server', 'websockets')
+  .map(({plugin, websockets}) => {
+    debug(`added websocket hooks ${Object.keys(websockets)} from plugin '${plugin.name}'`);
+
+    return websockets;
+  })
+  .reduce((hooks, {onConnect = null, onDisconnect = null}) => {
+    if (onConnect) {
+      hooks.onConnect.push(onConnect);
+    }
+
+    if (onDisconnect) {
+      hooks.onDisconnect.push(onDisconnect);
+    }
+
+    return hooks;
+  }, {
+    onConnect: [],
+    onDisconnect: [],
+  });
+
+const onConnect = async (connectionParams, connection) => {
 
   // Attach the token from the connection options if it was provided.
-  if (token) {
+  if (connectionParams.token) {
 
     debug('token sent via onConnect, attaching to the headers of the upgrade request');
 
     // Attach it to the upgrade request.
-    connection.upgradeReq.headers['authorization'] = `Bearer ${token}`;
+    connection.upgradeReq.headers['authorization'] = `Bearer ${connectionParams.token}`;
   }
+
+  // Call all the hooks.
+  await Promise.all(hooks.onConnect.map((hook) => hook(connectionParams, connection)));
 };
 
 const onOperation = (parsedMessage, baseParams, connection) => {
@@ -52,6 +79,9 @@ const onOperation = (parsedMessage, baseParams, connection) => {
   return baseParams;
 };
 
+const onDisconnect = (connection) =>
+  Promise.all(hooks.onDisconnect.map((hook) => hook(connection)));
+
 /**
  * This creates a new subscription manager.
  */
@@ -62,6 +92,7 @@ const createSubscriptionManager = (server) => new SubscriptionServer({
     setupFunctions,
   }),
   onConnect,
+  onDisconnect,
   onOperation,
   keepAlive: ms(KEEP_ALIVE)
 }, {
diff --git a/plugins.js b/plugins.js
index 487825be7..577289b25 100644
--- a/plugins.js
+++ b/plugins.js
@@ -57,6 +57,10 @@ const hookSchemas = {
   resolvers: Joi.object().pattern(/\w/, Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.func())),
   typeDefs: Joi.string(),
   schemaLevelResolveFunction: Joi.func(),
+  websockets: Joi.object({
+    onConnect: Joi.func(),
+    onDisconnect: Joi.func(),
+  }),
 };
 
 /**

From 2233d993c21ee2db32a4a7ce3abe80ff38702417 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 20 Dec 2017 15:27:55 -0700
Subject: [PATCH 340/344] fixed expiry loading

---
 graph/loaders/util.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/graph/loaders/util.js b/graph/loaders/util.js
index fe2a4e3d0..4d43d1811 100644
--- a/graph/loaders/util.js
+++ b/graph/loaders/util.js
@@ -72,8 +72,10 @@ class SharedCacheDataLoader extends DataLoader {
   constructor(prefix, expiry, batchLoadFn, options) {
     super(SharedCacheDataLoader.batchLoadFn(prefix, expiry, batchLoadFn), options);
 
+    // Expiry is provided as a number in ms, we're using commands optimized for
+    // seconds, so convert this to seconds.
+    this._expiry = Math.floor(expiry / 1000);
     this._prefix = prefix;
-    this._expiry = expiry;
     this._keyFunc = SharedCacheDataLoader.keyFunc(this._prefix);
   }
 

From 2d6a05433a626386e7a211c7478b6978d7c14016 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 21 Dec 2017 15:55:18 +0100
Subject: [PATCH 341/344] Mark single dangling comments, reflow issues and
 scroll enhancement

---
 .../Moderation/components/ModerationQueue.js  | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index fbb116cd7..59c3b8b7e 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -190,6 +190,29 @@ class ModerationQueue extends React.Component {
   componentDidUpdate (prev) {
     const {commentCount, selectedCommentId} = this.props;
 
+    // Switching to multi mode.
+    if (prev.singleView && !this.props.singleView) {
+
+      // Reflow virtual list.
+      this.reflowList();
+
+      // Scroll to selected comment.
+      if (this.props.selectedCommentId) {
+        const view = this.state.view;
+        const index = view.findIndex(({id}) => id === selectedCommentId);
+        this.listRef.scrollToRow(index);
+      }
+    }
+
+    // Switching to single mode.
+    if (!prev.singleView && this.props.singleView) {
+
+      // Scroll to comment.
+      if (this.props.selectedCommentId) {
+        document.querySelector(`#comment_${this.props.selectedCommentId}`).scrollIntoView();
+      }
+    }
+
     // If the user just moderated the last (visible) comment
     // AND there are more comments available on the server,
     // go ahead and load more comments
@@ -197,7 +220,7 @@ class ModerationQueue extends React.Component {
       this.props.loadMore();
     }
 
-    // Scroll to selected comment.
+    // Scroll to new selected comment.
     if (prev.selectedCommentId !== selectedCommentId && this.listRef) {
 
       const view = this.state.view;
@@ -372,6 +395,7 @@ class ModerationQueue extends React.Component {
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
             currentUserId={this.props.currentUserId}
+            dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)}
           />;
         </div>
       );

From f9e289561e4ed3335b2d12fc75047b866f85af02 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 21 Dec 2017 18:29:18 +0100
Subject: [PATCH 342/344] Refactor

---
 .../Moderation/components/ModerationQueue.js  | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 59c3b8b7e..72df10682 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -195,22 +195,17 @@ class ModerationQueue extends React.Component {
 
       // Reflow virtual list.
       this.reflowList();
-
-      // Scroll to selected comment.
-      if (this.props.selectedCommentId) {
-        const view = this.state.view;
-        const index = view.findIndex(({id}) => id === selectedCommentId);
-        this.listRef.scrollToRow(index);
-      }
     }
 
-    // Switching to single mode.
-    if (!prev.singleView && this.props.singleView) {
+    if (
 
-      // Scroll to comment.
-      if (this.props.selectedCommentId) {
-        document.querySelector(`#comment_${this.props.selectedCommentId}`).scrollIntoView();
-      }
+      // Switching mode.
+      prev.singleView !== this.props.singleView ||
+
+      // Select different comment.
+      prev.selectedCommentId !== selectedCommentId && selectedCommentId
+    ) {
+      this.scrollToSelectedComment();
     }
 
     // If the user just moderated the last (visible) comment
@@ -219,15 +214,6 @@ class ModerationQueue extends React.Component {
     if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) {
       this.props.loadMore();
     }
-
-    // Scroll to new selected comment.
-    if (prev.selectedCommentId !== selectedCommentId && this.listRef) {
-
-      const view = this.state.view;
-      const index = view.findIndex(({id}) => id === selectedCommentId);
-
-      this.listRef.scrollToRow(index);
-    }
   }
 
   // Returns comment counts without dangling comments.
@@ -265,6 +251,17 @@ class ModerationQueue extends React.Component {
     this.listRef = list;
   };
 
+  scrollToSelectedComment = (props = this.props, state = this.state) => {
+    if (props.singleMode) {
+      document.querySelector(`#comment_${props.selectedCommentId}`).scrollIntoView();
+    }
+    else if(this.listRef) {
+      const view = state.view;
+      const index = view.findIndex(({id}) => id === props.selectedCommentId);
+      this.listRef.scrollToRow(index);
+    }
+  }
+
   viewNewComments = (callback) => {
     this.setState(resetCursors, () => {
       this.reflowList();

From e34f96832a6115c8238a8bb6f6418a60b1d821c6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 21 Dec 2017 18:36:15 +0100
Subject: [PATCH 343/344] Refactor

---
 .../Moderation/components/ModerationQueue.js  | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 72df10682..77851d568 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -190,28 +190,22 @@ class ModerationQueue extends React.Component {
   componentDidUpdate (prev) {
     const {commentCount, selectedCommentId} = this.props;
 
-    // Switching to multi mode.
-    if (prev.singleView && !this.props.singleView) {
+    const switchedToMultiMode = prev.singleView && !this.props.singleView;
+    const switchedMode = prev.singleView !== this.props.singleView;
+    const selectedDifferentComment = prev.selectedCommentId !== selectedCommentId && selectedCommentId;
+    const moderatedLastComment = prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
+
+    if (switchedToMultiMode) {
 
       // Reflow virtual list.
       this.reflowList();
     }
 
-    if (
-
-      // Switching mode.
-      prev.singleView !== this.props.singleView ||
-
-      // Select different comment.
-      prev.selectedCommentId !== selectedCommentId && selectedCommentId
-    ) {
+    if (switchedMode || selectedDifferentComment) {
       this.scrollToSelectedComment();
     }
 
-    // If the user just moderated the last (visible) comment
-    // AND there are more comments available on the server,
-    // go ahead and load more comments
-    if (prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0 && commentCount > 0) {
+    if (moderatedLastComment && commentCount > 0) {
       this.props.loadMore();
     }
   }

From 111af0acf86b58fa1fd01397577282b1fae5efa4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 21 Dec 2017 18:43:39 +0100
Subject: [PATCH 344/344] More refactor

---
 .../src/routes/Moderation/components/ModerationQueue.js        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 77851d568..83678a4c1 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -194,6 +194,7 @@ class ModerationQueue extends React.Component {
     const switchedMode = prev.singleView !== this.props.singleView;
     const selectedDifferentComment = prev.selectedCommentId !== selectedCommentId && selectedCommentId;
     const moderatedLastComment = prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
+    const hasMoreComment = commentCount > 0;
 
     if (switchedToMultiMode) {
 
@@ -205,7 +206,7 @@ class ModerationQueue extends React.Component {
       this.scrollToSelectedComment();
     }
 
-    if (moderatedLastComment && commentCount > 0) {
+    if (moderatedLastComment && hasMoreComment) {
       this.props.loadMore();
     }
   }