Fix merge conflict

.gitignore

@@ -13,6 +13,7 @@ client/coral-framework/graphql/introspection.json
 .idea/
 *.swp
 *.DS_STORE
+.prettierrc.json
 
 coverage/
 test/e2e/reports/
@@ -52,3 +53,4 @@ plugins/*
 !plugins/talk-plugin-slack-notifications
 
 **/node_modules/*
+yarn-error.log

.nodemon.json

@@ -1,5 +1,11 @@
 {
+  "exec": "npm-run-all --parallel generate-introspection start:development",
   "verbose": true,
   "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
-  "ext": "js,json,graphql"
+  "ext": "js,json,graphql",
+  "watch": [
+    ".",
+    "bin/cli",
+    "bin/cli-serve"
+  ]
 }

.nsprc

@@ -1,5 +1,6 @@
 {
   "exceptions": [
-    "https://nodesecurity.io/advisories/531"
+    "https://nodesecurity.io/advisories/531",
+    "https://nodesecurity.io/advisories/532"
   ]
-}
+}

app.js

@@ -1,19 +1,38 @@
 const express = require('express');
-const bodyParser = require('body-parser');
 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 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');
+const {ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT} = require('./config');
 
 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
 //==============================================================================
@@ -23,6 +42,22 @@ if (process.env.NODE_ENV !== 'test') {
   app.use(morgan('dev'));
 }
 
+if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {
+  const {Engine} = require('apollo-engine');
+
+  const engine = new Engine({
+    engineConfig: {
+      apiKey: APOLLO_ENGINE_KEY
+    },
+    graphqlPort: PORT,
+    endpoint: `${MOUNT_PATH}api/v1/graph/ql`,
+  });
+
+  engine.start();
+
+  app.use(engine.expressMiddleware());
+}
+
 // Trust the first proxy in front of us, this will enable us to trust the fact
 // that SSL was terminated correctly.
 app.set('trust proxy', 1);
@@ -36,12 +71,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 +82,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.

bin/cli

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const {head, map} = require('lodash');
 const Matcher = require('did-you-mean');
 

bin/cli-assets

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');

bin/cli-jobs

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
 const util = require('./util');
@@ -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);

bin/cli-migration

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const util = require('./util');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');

bin/cli-plugins

@@ -7,7 +7,7 @@
 // Interface heavily inspired by the yarn package manager:
 // https://yarnpkg.com/
 
-const program = require('./commander');
+const program = require('commander');
 const inquirer = require('inquirer');
 
 // Make things colorful!

bin/cli-serve

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
-const program = require('./commander');
+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);
+});
 

bin/cli-settings

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const program = require('./commander');
+const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingsService = require('../services/settings');

bin/cli-setup

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingModel = require('../models/setting');

bin/cli-token

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const mongoose = require('../services/mongoose');
 const TokensService = require('../services/tokens');
 const util = require('./util');

bin/cli-users

@@ -4,14 +4,17 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+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) {
@@ -34,11 +37,11 @@ function getUserCreateAnswers(options) {
       password: options.password,
       confirmPassword: options.password,
       username: options.name,
-      roles: []
+      role: 'COMMENTER'
     };
 
     if (options.role && USER_ROLES.indexOf(options.role) > -1) {
-      user.roles = [options.role];
+      user.roles = options.role;
     }
 
     return Promise.resolve(user);
@@ -87,9 +90,9 @@ function getUserCreateAnswers(options) {
       }
     },
     {
-      name: 'roles',
+      name: 'role',
       message: 'User Role',
-      type: 'checkbox',
+      type: 'list',
       choices: USER_ROLES
     }
   ]);
@@ -106,42 +109,55 @@ async function createUser(options) {
     }
 
     const user = await UsersService.createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim());
-    console.log(`Created user ${user.id}.`);
-
-    if (answers.roles.length > 0) {
-      return Promise.all(answers.roles.map((role) => {
-        return UsersService
-          .addRoleToUser(user.id, role)
-          .then(() => {
-            console.log(`Added the role ${role} to User ${user.id}.`);
-          });
-      }));
-    }
+    await UsersService.setRole(user.id, answers.role);
+    await UsersService.sendEmailConfirmation(user, answers.email.trim());
 
+    console.log(`Created User ${user.id}.`);
     util.shutdown();
-
   } 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);
+  }
 }
 
 /**
@@ -241,19 +257,19 @@ function listUsers() {
       });
 
       users.forEach((user) => {
-        let state = user.disabled ? 'Disabled' : 'Enabled';
         const profile = user.profiles.find(({provider}) => provider === 'local');
+        let state;
         if (profile && profile.metadata && profile.metadata.confirmed_at) {
-          state += ', Verified';
+          state = 'Verified';
         } else {
-          state += ', Unverified';
+          state = 'Unverified';
         }
 
         table.push([
           user.id,
           user.username,
           user.profiles.map((p) => p.provider).join(', '),
-          user.roles.join(', '),
+          user.role,
           user.status,
           state
         ]);
@@ -291,117 +307,30 @@ function mergeUsers(dstUserID, srcUserID) {
  * @param  {String} userUD id of the user to add the role to
  * @param  {String} role   the role to add
  */
-function addRole(userID, role) {
+async function setRole(userID, role, options) {
+  try {
+    if (options.interactive || !role) {
+      const answers = await inquirer.prompt([
+        {
+          name: 'role',
+          message: 'User Role',
+          type: 'list',
+          choices: USER_ROLES
+        }
+      ]);
 
-  if (USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
+      role = answers.role;
+    }
+
+    await UsersService.setRole(userID, role);
+
+    console.log(`Set User ${userID} to the ${role} role.`);
+    util.shutdown();
+  } catch (err) {
+    console.error(err);
     util.shutdown(1);
-    return;
   }
 
-  UsersService
-    .addRoleToUser(userID, role)
-    .then(() => {
-      console.log(`Added the ${role} role to User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Removes a role from a user
- * @param  {String} userUD id of the user to remove the role from
- * @param  {String} role   the role to remove
- */
-function removeRole(userID, role) {
-
-  if (USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
-    util.shutdown(1);
-    return;
-  }
-
-  UsersService
-    .removeRoleFromUser(userID, role)
-    .then(() => {
-      console.log(`Removed the ${role} role from User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Ban a user
- * @param  {String} userID id of the user to ban
- */
-function ban(userID) {
-  UsersService
-    .setStatus(userID, 'BANNED')
-    .then(() => {
-      console.log(`Banned the User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Unban a user
- * @param  {String} userUD id of the user to remove the role from
- */
-function unban(userID) {
-  UsersService
-    .setStatus(userID, 'ACTIVE')
-    .then(() => {
-      console.log(`Unban the User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Disable a given user.
- * @param  {String} userID the ID of a user to disable
- */
-function disableUser(userID) {
-  UsersService
-    .disableUser(userID)
-    .then(() => {
-      console.log(`User ${userID} was disabled.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Enabled a given user.
- * @param  {String} userID the ID of a user to enable
- */
-function enableUser(userID) {
-  UsersService
-    .enableUser(userID)
-    .then(() => {
-      console.log(`User ${userID} was enabled.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
 }
 
 /**
@@ -463,34 +392,10 @@ program
   .action(mergeUsers);
 
 program
-  .command('addrole <userID> <role>')
-  .description('adds a role to a given user')
-  .action(addRole);
-
-program
-  .command('removerole <userID> <role>')
-  .description('removes a role from a given user')
-  .action(removeRole);
-
-program
-  .command('ban <userID>')
-  .description('ban a given user')
-  .action(ban);
-
-program
-  .command('uban <userID>')
-  .description('unban a given user')
-  .action(unban);
-
-program
-  .command('disable <userID>')
-  .description('disable a given user from logging in')
-  .action(disableUser);
-
-program
-  .command('enable <userID>')
-  .description('enable a given user from logging in')
-  .action(enableUser);
+  .command('setrole <userID> [role]')
+  .option('-i, --interactive', 'Enable interactive mode')
+  .description('sets the role on a user')
+  .action(setRole);
 
 program
   .command('verify <userID> <email>')

bin/cli-verify

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const program = require('commander');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
 const databaseVerifications = require('./verifications/database');

bin/commander.js

@@ -1,51 +0,0 @@
-const pkg = require('../package.json');
-const dotenv = require('dotenv');
-const fs = require('fs');
-const program = require('commander');
-
-//==============================================================================
-// Setting up the program command line arguments.
-//==============================================================================
-
-const parseArgs = require('minimist')(process.argv.slice(2), {
-  alias: {
-    'c': 'config'
-  },
-  string: [
-    'config',
-    'pid'
-  ],
-  default: {
-    'config': null,
-    'pid': null
-  }
-});
-
-/**
- * If the config flag is present, then we have to load the configuration from
- * the file specified. We will then load those values into the environment.
- */
-if (parseArgs.config) {
-  let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'}));
-
-  Object.keys(envConfig).forEach((k) => {
-    process.env[k] = envConfig[k];
-  });
-}
-
-/**
- * If the pid flag is present, then we have to create a pid file at the location
- * specified.
- */
-if (parseArgs.pid) {
-  const util = require('./util');
-
-  console.log('Wrote PID');
-
-  util.pid(parseArgs.pid);
-}
-
-module.exports = program
-  .version(pkg.version)
-  .option('-c, --config [path]', 'Specify the configuration file to load')
-  .option('--pid [path]', 'Specify a path to output the current PID to');

bin/util.js

@@ -1,5 +1,4 @@
 const debug = require('debug')('talk:util');
-const fs = require('fs');
 
 const util = module.exports = {};
 
@@ -49,43 +48,6 @@ util.onshutdown = (jobs) => {
   util.toshutdown = util.toshutdown.concat(jobs);
 };
 
-/**
- * Register a PID file to be maintained for the lifespan of the process.
- * @param  {String} path path to the PID file to create
- */
-util.pid = (path) => {
-  if (!/\//.test(path)) {
-    if (!/\.pid/.test(path)) {
-      path += '.pid';
-    }
-    path = `/tmp/${path}`;
-  }
-
-  const pid = `${process.pid.toString()}\n`;
-
-  fs.writeFile(path, pid, (err) => {
-    if (err) {
-      console.error(`Can't write PID file: ${err}`);
-      throw err;
-    }
-
-    // Add the cleanup for the fs onto the shutdown.
-    util.onshutdown([
-      () => new Promise((resolve, reject) => {
-
-        // Remove the pid file.
-        fs.unlink(path, (err) => {
-          if (err) {
-            return reject(err);
-          }
-
-          return resolve();
-        });
-      })
-    ]);
-  });
-};
-
 // Attach to the SIGTERM + SIGINT handles to ensure a clean shutdown in the
 // event that we have an external event. SIGUSR2 is called when the app is asked
 // to be 'killed', same procedure here.

bin/verifications/database/action_counts.js

@@ -0,0 +1,185 @@
+const UserModel = require('../../../models/user');
+const CommentModel = require('../../../models/comment');
+const ActionsService = require('../../../services/actions');
+const {arrayJoinBy} = require('../../../graph/loaders/util');
+const sc = require('snake-case');
+const debug = require('debug')('talk:cli:verify');
+
+const MODELS = [
+  UserModel,
+  CommentModel,
+];
+
+async function processBatch(Model, documents) {
+
+  // Get an array of all the document id's.
+  const documentIDs = documents.map(({id}) => id);
+
+  // Store all the operations on this batch in this array that we'll return
+  // later.
+  const operations = [];
+
+  // Get the action summaries for this batch.
+  const totalActionSummaries = await ActionsService
+    .getActionSummaries(documentIDs)
+    .then(arrayJoinBy(documentIDs, 'item_id'));
+
+  // Iterate over the documents.
+  for (let i = 0; i < documents.length; i++) {
+    const document = documents[i];
+    const actionSummaries = totalActionSummaries[i];
+
+    let ops = [];
+
+    for (const actionSummary of actionSummaries) {
+      if (actionSummary.group_id === null) {
+        continue;
+      }
+
+      // And we generate the group id.
+      const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+      const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
+
+      if (GROUP_ID.length <= 0) {
+        continue;
+      }
+
+      // And we add a new batch operation if the action summary is associated
+      // with a group.
+      const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
+
+      // Check that the action summaries match the cached counts.
+      if (
+        !document.action_counts ||
+        !(ACTION_COUNT_FIELD in document.action_counts) ||
+        document.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count
+      ) {
+
+        // Batch updates for those changes.
+        ops.push({
+          [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
+        });
+      }
+    }
+
+    // Group all the action summaries together from all the different group
+    // ids.
+    let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
+      const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+
+      if (!(ACTION_TYPE in acc)) {
+        acc[ACTION_TYPE] = 0;
+      }
+
+      acc[ACTION_TYPE] += actionSummary.count;
+
+      return acc;
+    }, {});
+
+    for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
+      const count = groupedActionSummaries[ACTION_COUNT_FIELD];
+
+      // Check that the action summaries match the cached counts.
+      if (
+        !document.action_counts ||
+        !(ACTION_COUNT_FIELD in document.action_counts) ||
+        document.action_counts[ACTION_COUNT_FIELD] !== count
+      ) {
+
+        // Batch updates for those changes.
+        ops.push({
+          [`action_counts.${ACTION_COUNT_FIELD}`]: count,
+        });
+      }
+    }
+
+    // If this comment has action summaries that should be updated, then
+    // perform an update!
+    if (ops.length > 0) {
+      operations.push({
+        updateOne: {
+          filter: {
+            id: document.id
+          },
+          update: {
+            $set: Object.assign({}, ...ops),
+          },
+        },
+      });
+    }
+  }
+
+  return operations;
+}
+
+module.exports = async ({fix, batch}) => {
+  for (const Model of MODELS) {
+    const cursor = Model
+      .collection
+      .find({})
+      .project({
+        id: 1,
+        action_counts: 1
+      })
+      .sort({created_at: 1});
+
+    let operations = [];
+    let documents = [];
+
+    // While there are documents to process.
+    while (await cursor.hasNext()) {
+
+      // Load the document.
+      const document = await cursor.next();
+
+      // Push the document into the documents array.
+      documents.push(document);
+
+      // Check to see if the length of the documents array requires us to
+      // process it.
+      if (documents.length > batch) {
+
+        // Process this batch.
+        let batchOperations = await processBatch(Model, documents);
+
+        // Push the batch operations into the model operations.
+        operations.push(...batchOperations);
+
+        // Clear this batch contents.
+        documents = [];
+      }
+    }
+
+    // Check to see if there are any documents left over.
+    if (documents.length > 0) {
+
+      // Process this batch.
+      let batchOperations = await processBatch(Model, documents);
+
+      // Push the batch operations into the model operations.
+      operations.push(...batchOperations);
+    }
+
+    const OPERATIONS_LENGTH = operations.length;
+
+    console.log(`action_counts.js: ${OPERATIONS_LENGTH} ${Model.collection.name} need their action counts fixed.`);
+
+    // If fix was enabled, execute the batch writes.
+    if (OPERATIONS_LENGTH > 0) {
+      if (fix) {
+        debug(`action_counts.js: fixing ${OPERATIONS_LENGTH} ${Model.collection.name}...`);
+
+        while (operations.length) {
+          let result = await Model.collection.bulkWrite(operations.splice(0, batch));
+
+          debug(`action_counts.js: fixed batch of ${result.modifiedCount} ${Model.collection.name}.`);
+        }
+
+        console.log(`action_counts.js: applied all ${OPERATIONS_LENGTH} fixes to ${Model.collection.name}.`);
+      } else {
+        console.warn('Skipping fixing, --fix was not enabled, pass --fix to fix these errors');
+      }
+    }
+  }
+};
+

bin/verifications/database/comment_replies.js

@@ -1,7 +1,5 @@
 const CommentModel = require('../../../models/comment');
-const ActionsService = require('../../../services/actions');
-const {arrayJoinBy, singleJoinBy} = require('../../../graph/loaders/util');
-const sc = require('snake-case');
+const {singleJoinBy} = require('../../../graph/loaders/util');
 const debug = require('debug')('talk:cli:verify');
 
 const getBatch = async (limit, offset) => CommentModel
@@ -55,15 +53,9 @@ module.exports = async ({fix, limit, batch}) => {
       .then(singleJoinBy(commentIDs, '_id'))
       .then((results) => results.map((result) => result ? result.count : 0));
 
-    // Get their action summaries.
-    let allActionSummaries = await ActionsService
-      .getActionSummaries(commentIDs)
-      .then(arrayJoinBy(commentIDs, 'item_id'));
-
     // Loop over the comments, with their action summaries.
     for (let i = 0; i < comments.length; i++) {
       let comment = comments[i];
-      let actionSummaries = allActionSummaries[i];
       let replyCount = allReplyCounts[i];
 
       // And check to see if the action summaries we just computed match what is
@@ -77,61 +69,6 @@ module.exports = async ({fix, limit, batch}) => {
         });
       }
 
-      // First we process all the group id's.
-      for (let actionSummary of actionSummaries) {
-        if (actionSummary.group_id === null) {
-          continue;
-        }
-
-        // And we generate the group id.
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-        const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
-
-        if (GROUP_ID.length <= 0) {
-          continue;
-        }
-
-        // And we add a new batch operation if the action summary is associated
-        // with a group.
-        const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
-          });
-        }
-      }
-
-      // Group all the action summaries together from all the different group
-      // ids.
-      let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-
-        if (!(ACTION_TYPE in acc)) {
-          acc[ACTION_TYPE] = 0;
-        }
-
-        acc[ACTION_TYPE] += actionSummary.count;
-
-        return acc;
-      }, {});
-
-      for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
-        const count = groupedActionSummaries[ACTION_COUNT_FIELD];
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: count,
-          });
-        }
-      }
-
       // If this comment has action summaries that should be updated, then
       // perform an update!
       if (commentOperations.length > 0) {

bin/verifications/database/index.js

@@ -6,7 +6,8 @@
 //
 //   async ({fix = false, batch = 1000}) => {}
 //
-// where their options are derrived.
+// where their options are derived.
 module.exports = [
-  require('./comments'),
+  require('./comment_replies'),
+  require('./action_counts'),
 ];

circle.yml

@@ -7,6 +7,8 @@ machine:
   environment:
     PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
     NODE_ENV: "test"
+    MOCHA_FILE: "${CIRCLE_TEST_REPORTS}/junit/test-results.xml"
+    MOCHA_REPORTER: "mocha-junit-reporter"
   pre:
     # TODO: use the following to add in support for MongoDB 3.4.
     # # Upgrade the database version to 3.4.
@@ -47,10 +49,11 @@ database:
 test:
   override:
     # Run the tests using the junit reporter.
-    - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
+    - yarn test
+    # Run the end to end tests
+    - yarn e2e:ci
     # Check dependancies using nsp.
     - nsp check
-    - yarn e2e-ci
 
 deployment:
   release:

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 */}
 

client/coral-admin/src/actions/banUserDialog.js

@@ -4,4 +4,3 @@ export const showBanUserDialog = ({userId, username, commentId, commentStatus})
   ({type: SHOW_BAN_USER_DIALOG, userId, username, commentId, commentStatus});
 
 export const hideBanUserDialog = () => ({type: HIDE_BAN_USER_DIALOG});
-

client/coral-admin/src/actions/community.js

@@ -7,8 +7,6 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
-  SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
@@ -56,20 +54,6 @@ export const setSearchValue = (value) => ({
   value,
 });
 
-export const setRole = (id, role) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
-    .then(() => {
-      return dispatch({type: SET_ROLE, id, role});
-    });
-};
-
-export const setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
-    .then(() => {
-      return dispatch({type: SET_COMMENTER_STATUS, id, status});
-    });
-};
-
 // Ban User Dialog
 export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
 export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});

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,
+});

client/coral-admin/src/components/AccountHistory.css

@@ -0,0 +1,30 @@
+.table {
+  flex-direction: column;
+}
+
+.table, .headerRow, .row {
+  display: flex;
+}
+
+.headerRowItem, .item {
+  flex: 1;
+  padding: 20px;
+
+  &:nth-child(2) {
+    flex: 2;
+  }
+}
+
+.headerRowItem {
+  color: #595959;
+  font-weight: bold;
+}
+
+.headerRow, .row {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.action {
+  color: black;
+  font-weight: bold;
+}

client/coral-admin/src/components/AccountHistory.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './AccountHistory.css';
+import cn from 'classnames';
+import flatten from 'lodash/flatten';
+import orderBy from 'lodash/orderBy';
+import moment from 'moment';
+
+const buildUserHistory = (userState = {}) => {
+  return orderBy(flatten(Object.keys(userState.status)
+    .filter((k) => k !== '__typename')
+    .map((k) => userState.status[k].history)), 'created_at', 'desc');
+};
+
+const buildActionResponse = (typename, status) => {
+  const actionResponses = {
+    'UsernameStatusHistory' : `Username Status: ${status}`,
+    'BannedStatusHistory': status ? 'User banned' : 'Ban removed',
+    'SuspensionStatusHistory': status ? 'Account Suspended' : 'Suspension removed'
+  };
+
+  return actionResponses[typename];
+};
+
+class AccountHistory extends React.Component {
+  render() {
+    const {userState} = this.props;
+    const userHistory = buildUserHistory(userState);
+    return (
+      <div>
+        <div className={cn(styles.table, 'talk-admin-account-history')}>
+          <div className={cn(styles.headerRow, 'talk-admin-account-history-header-row')}>
+            <div className={styles.headerRowItem}>Date</div>
+            <div className={styles.headerRowItem}>Action</div>
+            <div className={styles.headerRowItem}>Moderation</div>
+          </div>
+          {
+            userHistory.map((h, i) => (
+              <div className={cn(styles.row, 'talk-admin-account-history-row')} key={i}>
+                <div className={cn(styles.item, 'talk-admin-account-history-row-date')}>
+                  {moment(new Date(h.created_at)).format('MMM DD, YYYY')}
+                </div>
+                <div className={cn(styles.item, styles.action, 'talk-admin-account-history-row-status')}>
+                  {buildActionResponse(h.__typename, h.status)}
+                </div>
+                <div className={cn(styles.item, 'talk-admin-account-history-row-assigned-by')}>
+                  {h.assigned_by ? h.assigned_by.username : 'SYSTEM'}
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+AccountHistory.propTypes = {
+  history: PropTypes.array,
+  userState: PropTypes.object,
+};
+
+export default AccountHistory;

client/coral-admin/src/components/ActionsMenu.css

@@ -8,9 +8,6 @@
   color: black;
   > :global(.mdl-menu__container) {
     margin-left: 10px;
-    > :global(.mdl-menu__outline) {
-      box-shadow: none;
-    }
   }
 }
 
@@ -18,12 +15,13 @@
   box-shadow: none;
   color: white;
   background-color: #616161;
+  border-color: #616161;
 }
 
 .arrowIcon {
   margin-left: 6px;
   margin-right: 0;
-  vertical-align: middle;
+  vertical-align: middle; 
   margin-right: 0;
   font-size: 14px;
 }
@@ -33,8 +31,10 @@
 }
 
 .menuItem {
-  background-color: #2a2a2a;
-  color: white;
+  color: #2a2a2a;
+  background-color: white;
+  font-size: 0.95em;
+
   &:first-child {
     margin-bottom: 1px;
     border-radius: 2px 2px 0px 0px;
@@ -43,7 +43,8 @@
     border-radius: 0px 0px 2px 2px;
   }
   &:hover, &:active, &:focus {
-    background-color: #767676;
+    background-color: #e2e2e2;
+    border-color: #616161;
   }
   &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
     background-color: #262626;

client/coral-admin/src/components/ActionsMenu.js

@@ -32,17 +32,18 @@ class ActionsMenu extends React.Component {
   };
 
   render() {
+    const {className = '', buttonClassNames = '', label = ''} = 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})}
+          className={cn(styles.button, {[styles.buttonOpen]: this.state.open}, buttonClassNames)}
           disabled={false}
           id={this.id}
           onClick={this.syncOpenState}
           icon={this.props.icon}
           raised>
-          {t('modqueue.actions')}
+          {label ? label : t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}
@@ -59,6 +60,9 @@ class ActionsMenu extends React.Component {
 ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  buttonClassNames: PropTypes.string,
 };
 
 export default ActionsMenu;

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;

client/coral-admin/src/components/BanUserDialog.css

@@ -1,153 +1,153 @@
 .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: 500px;
+  width: 400px;
   top: 50%;
   transform: translateY(-50%);
-  height: 184px;
   padding: 20px;
+  border-radius: 4px;
+}
 
-  h2 {
-    color: black;
-    font-size: 1.76em;
-    font-weight: 500;
-    margin: 0;
-  }
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
 
-  h3 {
-    color: black;
-    font-size: 1.4em;
-    font-weight: 500;
-    margin: 0;
-  }
+.subheader {
+  color: black;
+  font-size: 1.3em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
 }
 
 .textField {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .textField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
+  font-size: 1.08em;
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 
 .textField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
+  width: 100%;
+  display: block;
+  border: none;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 10px 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
 }
 
 .footer {
-    margin: 20px auto 10px;
-    text-align: center;
+  margin: 20px auto 10px;
+  text-align: center;
 }
 
 .footer span {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 .footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0 5px;
 }
 
 .socialConnections {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .signInButton {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
 }
 
 .close:hover {
-    color: #6b6b6b;
+  color: #6b6b6b;
 }
 
 input.error{
-    border: solid 2px #f44336;
+  border: solid 2px #f44336;
 }
 
 .errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
+  color: grey;
+  font-weight: 600;
+  padding: 3px 0 16px;
 }
 
 .alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
 }
 
 .alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
+  border: solid 1px #1ec00e;
+  background: #cbf1b8;
+  color: #006900;
 }
 
 .alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
+  background: #FFEBEE;
+  color: #B71C1C;
 }
 
 .userBox a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0px;
 }
 
 .attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #B71C1C;
+  color: #FFEBEE;
+  font-weight: bolder;
+  padding: 4px;
+  vertical-align: middle;
+  border-radius: 20px;
+  box-sizing: border-box;
+  font-size: 9px;
+  line-height: 7px;
+  text-align: center;
+  margin-right: 5px;
 }
 
 .action {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .passwordRequestSuccess {
-    border: 1px solid green;
-    background-color: lightgreen;
-    padding: 10px;
+  border: 1px solid green;
+  background-color: lightgreen;
+  padding: 10px;
 }
 
 .passwordRequestFailure {
-    border: 1px solid orange;
-    background-color: 1px solid coral;
-    padding: 10px;
+  border: 1px solid orange;
+  background-color: 1px solid coral;
+  padding: 10px;
 }
 
 .cancel {
@@ -160,6 +160,20 @@ input.error{
 }
 
 .buttons {
-  margin: 20px;
-  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}
+
+.legend {
+  padding: 0;
+  font-weight: bold;
+}
+
+.messageInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
 }

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';
@@ -6,33 +7,132 @@ import styles from './BanUserDialog.css';
 import Button from 'coral-ui/components/Button';
 import t from 'coral-framework/services/i18n';
 
-const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
-  <Dialog
-    className={styles.dialog}
-    id="banUserDialog"
-    open={open}
-    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 cStyle="cancel" className={styles.cancel} onClick={onCancel} raised>
-          {t('bandialog.cancel')}
-        </Button>
-        <Button cStyle="black" className={styles.ban} onClick={onPerform} raised>
-          {t('bandialog.yes_ban_user')}
-        </Button>
-      </div>
-    </div>
-  </Dialog>
-);
+const initialState = {step: 0, message: ''};
+
+class BanUserDialog extends React.Component {
+  
+  state = initialState;
+
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+  
+  handleMessageChange = (e) => {
+    const {value: message} = e; 
+    this.setState({message});
+  }
+
+  goToStep1 = () => {
+    this.setState({
+      step: 1,
+      message: t(
+        'bandialog.email_message_ban',
+        this.props.username,
+      ),
+    });
+  }
+
+  renderStep0() {
+    const {
+      onCancel,
+      username,
+      info,
+    } = this.props;
+
+    return (
+      <section>
+        <h2 className={styles.header}>
+          {t('bandialog.ban_user')}
+        </h2>
+        <h3 className={styles.subheader}>
+          {t('bandialog.are_you_sure', username)}
+        </h3>
+        <p className={styles.description}>
+          {info}
+        </p>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="white"
+            onClick={onCancel}
+            raised >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button 
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={this.goToStep1}
+            raised >
+            {t('bandialog.yes_ban_user')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  renderStep1() {
+    const {
+      onCancel,
+      onPerform,
+    } = this.props;
+    const {message} = this.state;
+
+    return (
+      <section>
+        <h2 className={styles.header}>
+          {t('bandialog.notify_ban_headline')}
+        </h2>
+        <p className={styles.description}>
+          {t('bandialog.notify_ban_description')}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>{t('bandialog.write_a_message')}</legend>
+          <textarea
+            rows={5}
+            className={styles.messageInput}
+            value={message}
+            onChange={this.handleMessageChange}
+          />
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="white"
+            onClick={onCancel}
+            raised >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button 
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={onPerform}
+            raised >
+            {t('bandialog.send')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  render() {
+    const {step} = this.state;
+    const {open, onCancel} = this.props;
+    return (
+      <Dialog
+        className={cn(styles.dialog, 'talk-ban-user-dialog')}
+        id="banUserDialog"
+        open={open}
+        onCancel={onCancel}
+        title={t('bandialog.ban_user')} >
+        <span className={styles.close} onClick={onCancel}>×</span>
+        {step === 0 && this.renderStep0()}
+        {step === 1 && this.renderStep1()}
+      </Dialog>
+    );
+  }
+}
 
 BanUserDialog.propTypes = {
   open: PropTypes.bool,

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;

client/coral-admin/src/components/CommentLabels.js

@@ -17,7 +17,7 @@ function getUserFlaggedType(actions) {
     .some((action) =>
       action.__typename === 'FlagAction' &&
       action.user &&
-      action.user.roles.some((role) => staffRoles.includes(role))
+      staffRoles.includes(action.user.role)
     ) ? 'Staff' : 'User';
 }
 

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

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';
 
@@ -61,7 +62,7 @@ class SuspendUserDialog extends React.Component {
     const {onCancel, username} = this.props;
     const {duration} = this.state;
     return (
-      <section>
+      <section className="talk-admin-suspend-user-dialog-step-0">
         <h1 className={styles.header}>
           {t('suspenduser.title_suspend')}
         </h1>
@@ -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>
@@ -96,10 +97,10 @@ class SuspendUserDialog extends React.Component {
   }
 
   renderStep1() {
-    const {onCancel, username} = this.props;
     const {message} = this.state;
+    const {onCancel, username} = this.props;
     return (
-      <section>
+      <section className="talk-admin-suspend-user-dialog-step-1">
         <h1 className={styles.header}>
           {t('suspenduser.title_notify')}
         </h1>
@@ -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}
       >

client/coral-admin/src/components/UserDetail.css

@@ -94,33 +94,16 @@
   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;
-  }
-}
-
-.active {
-  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;
@@ -139,28 +122,67 @@
   margin-left: 15px;
 }
 
-.loadMore>button {
-  background-color: #696969;
-  &: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;
   }
-}
+}
+
+.tabBar {
+  padding: 0 0 0 10px;
+  margin: 0;
+  align-self: center;
+  list-style: none;
+  box-sizing: border-box;
+  border: none;
+}
+
+.tab {
+  display: inline-block;
+  margin-right: 10px;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.tabButton {
+  border: none;
+  background: white;
+  border-radius: 0;
+  font-size: 1em;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.tabButtonActive {
+  font-weight: bold;
+  border-bottom: 3px solid #F36451;
+}
+.username {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.actionsMenu {
+  display: inline-block;
+}
+
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
+}
+
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
+}

client/coral-admin/src/components/UserDetail.js

@@ -1,42 +1,23 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
+import capitalize from 'lodash/capitalize';
+import {getErrorMessages} from 'coral-framework/utils';
 import styles from './UserDetail.css';
-import {Icon, Drawer, Spinner} from 'coral-ui';
+import RejectButton from './RejectButton';
+import ApproveButton from './ApproveButton';
+import AccountHistory from './AccountHistory';
 import {Slot} from 'coral-framework/components';
+import UserDetailCommentList from '../components/UserDetailCommentList';
+import {getReliability, isSuspended, isBanned} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
-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';
-import {getErrorMessages} from 'coral-framework/utils';
+import {Icon, Drawer, Spinner, TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import UserInfoTooltip from './UserInfoTooltip';
 
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
+class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
     try {
@@ -82,13 +63,19 @@ export default class UserDetail extends React.Component {
     }
   }
 
-  showAll = () => {
-    this.props.changeStatus('all');
+  changeTab = (tab) => {
+    this.props.changeStatus(tab);
   }
 
-  showRejected = () => {
-    this.props.changeStatus('rejected');
-  }
+  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
+  });
+
+  showBanUserDialog = () => this.props.showBanUserDialog({
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
+  });
 
   renderLoading() {
     return (
@@ -100,15 +87,30 @@ export default class UserDetail extends React.Component {
     );
   }
 
+  getActionMenuLabel() {
+    const {root: {user}} = this.props;
+
+    if (isBanned(user)) {
+      return 'Banned';
+    } else if (isSuspended(user)) {
+      return 'Suspended';
+    }
+
+    return '';
+  }
+
   renderLoaded() {
     const {
       data,
       root,
       root: {
+        me,
         user,
         totalComments,
         rejectedComments,
-        comments: {nodes, hasNextPage}
+        comments: {
+          nodes,
+        }
       },
       activeTab,
       selectedCommentIds,
@@ -116,20 +118,59 @@ export default class UserDetail extends React.Component {
       hideUserDetail,
       viewUserDetail,
       loadMore,
-      toggleSelectAll
+      toggleSelectAll,
+      unBanUser,
+      unSuspendUser,
     } = this.props;
 
     let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
-      // if totalComments is 0, you're dividing by zero, which is naughty
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
       rejectedPercent = 0;
     }
 
+    const banned = isBanned(user);
+    const suspended = isSuspended(user);
+    
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
+        <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
+          <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
+            {user.username}
+          </h3>
+
+          {user.id &&
+            <ActionsMenu
+              icon="person"
+              className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
+              buttonClassNames={cn({
+                [styles.actionsMenuSuspended]: suspended,
+                [styles.actionsMenuBanned]: banned,
+              }, 'talk-admin-user-detail-actions-button')}
+              label={this.getActionMenuLabel()}>
+
+              {suspended ? <ActionsMenuItem
+                onClick={() => unSuspendUser({id: user.id})}>
+                Remove Suspension
+              </ActionsMenuItem> : <ActionsMenuItem
+                disabled={me.id === user.id}
+                onClick={this.showSuspenUserDialog}>
+                Suspend User
+              </ActionsMenuItem>}
+
+              {banned ? <ActionsMenuItem
+                onClick={() => unBanUser({id: user.id})}>
+                Remove Ban
+              </ActionsMenuItem> : <ActionsMenuItem
+                disabled={me.id === user.id}
+                onClick={this.showBanUserDialog}>
+                Ban User
+              </ActionsMenuItem>}
+
+            </ActionsMenu>
+          }
+
+          {(banned || suspended) && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
 
           <div>
             <ul className={styles.userDetailList}>
@@ -173,15 +214,37 @@ export default class UserDetail extends React.Component {
             data={this.props.data}
             queryData={{root, user}}
           />
+
           <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>
+                  <TabBar
+                    onTabClick={this.changeTab}
+                    activeTab={activeTab}
+                    className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
+                    aria-controls='talk-admin-user-detail-content'
+                    tabClassNames={{
+                      button: styles.tabButton,
+                      buttonActive: styles.tabButtonActive,
+                    }} >
+                    <Tab
+                      tabId={'all'}
+                      className={cn(styles.tab, styles.button, 'talk-admin-user-detail-all-tab')} >
+                      All
+                    </Tab>
+                    <Tab
+                      tabId={'rejected'}
+                      className={cn(styles.tab, 'talk-admin-user-detail-rejected-tab')} >
+                      Rejected
+                    </Tab>
+                    <Tab tabId={'history'} className={cn(styles.tab, styles.button, 'talk-admin-user-detail-history-tab')}>
+                      Account History
+                    </Tab>
+                  </TabBar>
                 )
                 : (
                   <div className={styles.bulkActionGroup}>
@@ -197,41 +260,55 @@ export default class UserDetail extends React.Component {
                   </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>
+
+            {(activeTab === 'all' || activeTab === 'rejected') && (
+              <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;
-                return <Comment
-                  key={comment.id}
-                  user={user}
-                  root={root}
-                  data={data}
-                  comment={comment}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  viewUserDetail={viewUserDetail}
-                />;
-              })
-            }
-          </div>
-          <LoadMore
-            className={styles.loadMore}
-            loadMore={loadMore}
-            showLoadMore={hasNextPage}
-          />
+
+          <TabContent activeTab={activeTab} className='talk-admin-user-detail-content'>
+            <TabPane tabId={'all'} className={'talk-admin-user-detail-all-tab-pane'}>
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+              />
+            </TabPane>
+            <TabPane tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab-pane'}>
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+              />
+            </TabPane>
+            <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>
+              <AccountHistory
+                userState={user.state}
+              />
+            </TabPane>
+          </TabContent>
         </Drawer>
       </ClickOutside>
     );
@@ -244,3 +321,31 @@ export default class UserDetail extends React.Component {
     return this.renderLoaded();
   }
 }
+
+UserDetail.propTypes = {
+  userId: PropTypes.string.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeStatus: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
+};
+
+export default UserDetail;

client/coral-admin/src/components/UserDetailCommentList.css

@@ -0,0 +1,11 @@
+.commentList {
+  clear: both;
+}
+
+.loadMore > button {
+  background-color: #696969;
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
+}

client/coral-admin/src/components/UserDetailCommentList.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './UserDetailCommentList.css';
+import LoadMore from '../components/LoadMore';
+import Comment from '../containers/UserDetailComment';
+
+const UserDetailCommentList = (props) => {
+  const {
+    data,
+    root,
+    root: {
+      user,
+      comments: {
+        nodes,
+        hasNextPage}
+    },
+    acceptComment,
+    rejectComment,
+    selectedCommentIds,
+    toggleSelect,
+    viewUserDetail,
+    loadMore,
+  } = props;
+
+  return (
+    <div className={cn(styles.commentList, 'talk-admin-user-detail-comment-list')}>
+      {
+        nodes.map((comment) => {
+          const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+          return <Comment
+            key={comment.id}
+            user={user}
+            root={root}
+            data={data}
+            comment={comment}
+            acceptComment={acceptComment}
+            rejectComment={rejectComment}
+            selected={selected}
+            toggleSelect={toggleSelect}
+            viewUserDetail={viewUserDetail}
+          />;
+        })
+      }
+      <LoadMore
+        className={styles.loadMore}
+        loadMore={loadMore}
+        showLoadMore={hasNextPage}
+      />
+    </div>
+  );
+};
+
+UserDetailCommentList.propTypes = {
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+};
+
+export default UserDetailCommentList;

client/coral-admin/src/components/UserInfoTooltip.css

@@ -0,0 +1,69 @@
+.userInfo {
+  position: relative;
+  display: inline-block;
+}
+
+.icon {
+  font-size: 16px;
+  color: #616161;
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  right: 0px;
+  width: 140px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  right: 0px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 0px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.strongItem {
+  margin-right: 3px;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}

client/coral-admin/src/components/UserInfoTooltip.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import {Icon} from 'coral-ui';
+import styles from './UserInfoTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import moment from 'moment';
+
+const initialState = {menuVisible: false};
+
+class UserInfoTooltip extends React.Component {
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({menuVisible: !this.state.menuVisible});
+  }
+
+  hideMenu = () => {
+    this.setState({menuVisible: false});
+  }
+
+  getLastHistoryItem = (user, status = 'banned') => {
+    const userHistory = user.state.status[status].history;
+    return userHistory[userHistory.length - 1];
+  }
+
+  render() {
+    const {menuVisible} = this.state;
+    const {user, banned, suspended} = this.props;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.userInfo, 'talk-admin-user-info-tooltip')}>
+          <span onClick={this.toogleMenu} className={cn(styles.icon, 'talk-admin-user-info-tooltip-icon')}>
+            <Icon name="info_outline" />
+          </span>
+
+          {menuVisible && (
+            <div className={cn(styles.menu, 'talk-admin-user-info-tooltip-menu')}>
+              {
+                banned && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-banned')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>Banned On</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'banned').created_at)).format('MMMM Do YYYY, h:mm:ss a')}</span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>By</strong>
+                        <span>{this.getLastHistoryItem(user, 'banned').assigned_by.username}</span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+
+              {
+                suspended && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-suspended')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>Suspension</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>By</strong>
+                        <span>{this.getLastHistoryItem(user, 'suspension').assigned_by.username}</span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>Start</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'suspension').created_at)).format('MMMM Do YYYY, h:mm:ss a')}</span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong className={styles.strongItem}>End</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'suspension').until)).format('MMMM Do YYYY, h:mm:ss a')}</span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+UserInfoTooltip.propTypes = {
+  user: PropTypes.object,
+  banned: PropTypes.bool,
+  suspended: PropTypes.bool,
+};
+
+export default UserInfoTooltip;

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
@@ -87,7 +80,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>

client/coral-admin/src/constants/community.js

@@ -6,8 +6,6 @@ export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_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 FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
 export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;

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';

client/coral-admin/src/containers/BanUserDialog.js

@@ -1,9 +1,10 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import BanUserDialog from '../components/BanUserDialog';
 import {hideBanUserDialog} from '../actions/banUserDialog';
-import {withSetUserStatus, withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import {withBanUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {compose} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 import {getErrorMessages} from 'coral-framework/utils';
@@ -12,9 +13,9 @@ import {notify} from 'coral-framework/actions/notification';
 class BanUserDialogContainer extends Component {
 
   banUser = async () => {
-    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog, notify} = this.props;
+    const {userId, commentId, commentStatus, banUser, setCommentStatus, hideBanUserDialog, notify} = this.props;
     try {
-      await setUserStatus({userId, status: 'BANNED'});
+      await banUser({id: userId, message: ''});
       hideBanUserDialog();
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
         await setCommentStatus({commentId, status: 'REJECTED'});
@@ -46,6 +47,14 @@ class BanUserDialogContainer extends Component {
   }
 }
 
+BanUserDialogContainer.propTypes = {
+  banUser: PropTypes.func.isRequired,
+  hideBanUserDialog: PropTypes.func,
+  open: PropTypes.bool,
+  username: PropTypes.string,
+  commentStatus: PropTypes.string,
+};
+
 const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, commentStatus}}) => ({
   open,
   userId,
@@ -62,7 +71,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export default compose(
-  withSetUserStatus,
+  withBanUser,
   withSetCommentStatus,
   connect(
     mapStateToProps,

client/coral-admin/src/containers/CommentLabels.js

@@ -25,7 +25,7 @@ export default withFragments({
         }
         user {
           id
-          roles
+          role
         }
       }
       ${getSlotFragmentSpreads(slots, 'comment')}

client/coral-admin/src/containers/Header.js

@@ -14,11 +14,15 @@ export default withQuery(gql`
     })
     flaggedUsernamesCount: userCount(query: {
       action_type: FLAG,
-      statuses: [PENDING]
+      state: {
+        status: {
+          username: [SET, CHANGED]
+        }
+      }
     })
   }
 `, {
     options: {
-      pollInterval: 5000
+      pollInterval: 10000
     }
   })(Header);

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.string,
+};
+
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
       __typename

client/coral-admin/src/containers/UserDetail.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {compose, gql} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -13,13 +14,15 @@ import {
   toggleSelectCommentInUserDetail,
   toggleSelectAllCommentInUserDetail
 } from 'coral-admin/src/actions/userDetail';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import {withSetCommentStatus, withUnBanUser, withUnSuspendUser} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 
 const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+  fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
     nodes {
       ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
@@ -125,10 +128,23 @@ class UserDetailContainer extends React.Component {
   }
 }
 
+UserDetailContainer.propTypes = {
+  changeUserDetailStatuses: PropTypes.func,
+  toggleSelectCommentInUserDetail: PropTypes.func,
+  toggleSelectAllCommentInUserDetail: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object,
+  setCommentStatus: PropTypes.func,
+  clearUserDetailSelections: PropTypes.func,
+  selectedCommentIds: PropTypes.array,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
+};
+
 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}
@@ -147,15 +163,52 @@ export const withUserDetailQuery = withQuery(gql`
       reliable {
         flagger
       }
+      state {
+        status {
+          suspension {
+            until
+            history {
+              until
+              created_at
+              assigned_by {
+                username
+              }
+            }
+          }
+          banned {
+            status
+            history {
+              status
+              assigned_by {
+                username
+              }
+              created_at
+            }
+          }
+          username {
+            status
+            history {
+              status
+              assigned_by {
+                username
+              }
+              created_at
+            }
+          }
+        }
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
+    me {
+      id
+    }
     totalComments: commentCount(query: {author_id: $author_id, statuses: []})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
     comments: comments(query: {
       author_id: $author_id,
       statuses: $statuses
     }) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
     ...${getDefinitionName(UserDetailComment.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}
@@ -181,6 +234,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
+    showBanUserDialog,
+    showSuspendUserDialog,
     changeUserDetailStatuses,
     clearUserDetailSelections,
     toggleSelectCommentInUserDetail,
@@ -195,4 +250,6 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withUserDetailQuery,
   withSetCommentStatus,
+  withUnBanUser,
+  withUnSuspendUser,
 )(UserDetailContainer);

client/coral-admin/src/graphql/index.js

@@ -1,45 +1,157 @@
 import update from 'immutability-helper';
-import mapValues from 'lodash/mapValues';
+import {mapLeaves} from 'coral-framework/utils';
+import {gql} from 'react-apollo';
 
-// 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);
+const userStatusFragment = gql`
+  fragment Talk_UpdateUserStatus on User {
+    state {
+      status {
+        banned {
+          status
+        }
+        suspension {
+          until
+        }
+      }
     }
-    return mapper(val);
-  });
-}
+  }`;
 
 export default {
   mutations: {
-    SetUserStatus: ({variables: {status, userId}}) => ({
+    SetUserRole: ({variables: {id: userId, role}}) => ({
       updateQueries: {
         TalkAdmin_Community: (prev) => {
-          if (status !== 'APPROVED') {
+
+          const updated = update(prev, {
+            users: {
+              nodes: {
+                $apply: (nodes) => nodes.map((node) => {
+                  if (node.id === userId) {
+                    node.role = role;
+                  }
+                  
+                  return node;
+                })
+              },
+            },
+          });
+          
+          return updated;
+        }
+      }
+    }),
+    SuspendUser: ({variables: {input: {id, until}}}) => ({
+      update: (proxy) => {
+        const fragmentId = `User_${id}`;
+
+        const data = proxy.readFragment({fragment: userStatusFragment, id: fragmentId});
+
+        const updated = update(data, {
+          state : {
+            status: {
+              suspension: {
+                until: {$set: until}
+              }
+            }
+          }
+        });
+
+        proxy.writeFragment({fragment: userStatusFragment, id: fragmentId, data: updated});
+      }
+    }),
+    UnSuspendUser: ({variables: {input: {id}}}) => ({
+      update: (proxy) => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({fragment: userStatusFragment, id: fragmentId});
+
+        const updated = update(data, {
+          state : {
+            status: {
+              suspension: {
+                until: {$set: null}
+              }
+            }
+          }
+        });
+
+        proxy.writeFragment({fragment: userStatusFragment, id: fragmentId, data: updated});
+      },
+    }),
+    BanUser: ({variables: {input: {id}}}) => ({
+      update: (proxy) => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({fragment: userStatusFragment, id: fragmentId});
+        
+        const updated = update(data, {
+          state : {
+            status: {
+              banned: {
+                status: {$set: true}
+              }
+            }
+          }
+        });
+
+        proxy.writeFragment({fragment: userStatusFragment, id: fragmentId, data: updated});
+      }
+    }),
+    UnBanUser: ({variables: {input: {id}}}) => ({
+      update: (proxy) => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({fragment: userStatusFragment, id: fragmentId});
+
+        const updated = update(data, {
+          state : {
+            status: {
+              banned: {
+                status: {$set: false}
+              }
+            }
+          }
+        });
+
+        proxy.writeFragment({fragment: userStatusFragment, id: fragmentId, data: updated});
+      }
+    }),
+    SetUserBanStatus: ({variables: {status, id}}) => ({
+      updateQueries: {
+        TalkAdmin_Community: (prev) => {
+          if (!status) {
             return prev;
           }
           const updated = update(prev, {
             users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== id)},
             },
           });
           return updated;
         }
       }
     }),
-    RejectUsername: ({variables: {input: {id: userId}}})  => ({
+    ApproveUsername: ({variables: {id}}) => ({
       updateQueries: {
         TalkAdmin_Community: (prev) => {
           const updated = update(prev, {
-            users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+            flaggedUsers: {
+              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== id)},
             },
           });
           return updated;
         }
       }
     }),
+    RejectUsername: ({variables: {id: userId}})  => ({
+      updateQueries: {
+        TalkAdmin_Community: (prev) => {
+          const updated = update(prev, {
+            flaggedUsers: {
+              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+            },
+          });
+          return updated;
+        }
+      },
+    }),
     UpdateSettings: ({variables: {input}})  => ({
       updateQueries: {
         TalkAdmin_Configure: (prev) => {
@@ -52,4 +164,3 @@ export default {
     }),
   },
 };
-

client/coral-admin/src/reducers/community.js

@@ -5,8 +5,6 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
-  SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
@@ -60,27 +58,6 @@ export default function community (state = initialState, action) {
       ...state,
       pagePeople: action.page,
     };
-  case SET_ROLE : {
-    const commenters = state.users;
-    const idx = commenters.findIndex((el) => el.id === action.id);
-
-    commenters[idx].roles[0] = action.role;
-    return {
-      ...state,
-      users: commenters.map((id) => id),
-    };
-  }
-  case SET_COMMENTER_STATUS: {
-    const commenters = state.users;
-    const idx = commenters.findIndex((el) => el.id === action.id);
-
-    commenters[idx].status = action.status;
-    return {
-      ...state,
-      users: commenters.map((id) => id),
-    };
-
-  }
   case SORT_UPDATE :
     return {
       ...state,

client/coral-admin/src/reducers/dashboard.js

@@ -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;
-}

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,

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;
   }

client/coral-admin/src/routes/Community/components/Community.js

@@ -12,7 +12,11 @@ class Community extends Component {
     const activeTab = route.path === ':id' ? 'flagged' : route.path;
 
     if (activeTab === 'people') {
-      return <People community={community} />;
+      return <People 
+        community={community}
+        data={this.props.data}
+        root={this.props.root}
+      />;
     }
 
     return (

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>

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -13,8 +13,6 @@ class FlaggedAccounts extends React.Component {
     const {
       users,
       loadMore,
-      showBanUserDialog,
-      showSuspendUserDialog,
       showRejectUsernameDialog,
       approveUser,
       me,
@@ -48,8 +46,6 @@ class FlaggedAccounts extends React.Component {
                       <FlaggedUser
                         user={user}
                         key={user.id}
-                        showBanUserDialog={showBanUserDialog}
-                        showSuspendUserDialog={showSuspendUserDialog}
                         showRejectUsernameDialog={showRejectUsernameDialog}
                         approveUser={approveUser}
                         me={me}
@@ -74,8 +70,6 @@ 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,

client/coral-admin/src/routes/Community/components/FlaggedUser.js

@@ -4,8 +4,6 @@ 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';
 
@@ -19,18 +17,10 @@ const shortReasons = {
 
 class User extends React.Component {
 
-  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
-  showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
   viewAuthorDetail = () => this.props.viewUserDetail(this.props.user.id);
+
   showRejectUsernameDialog = () => this.props.showRejectUsernameDialog({id: this.props.user.id});
+
   approveUser = () => this.props.approveUser({
     userId: this.props.user.id,
   });
@@ -40,7 +30,6 @@ class User extends React.Component {
       user,
       viewUserDetail,
       selected,
-      me,
       className,
     } = this.props;
 
@@ -55,20 +44,6 @@ class User extends React.Component {
                 className={styles.button}>
                 {user.username}
               </button>
-              {me.id !== user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showSuspenUserDialog}>
-                    Suspend User
-                  </ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
             </div>
           </div>
           <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
@@ -136,8 +111,6 @@ class User extends React.Component {
 }
 
 User.propTypes = {
-  showSuspendUserDialog: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,

client/coral-admin/src/routes/Community/components/People.js

@@ -1,74 +1,190 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './styles.css';
-import Table from './Table';
-import {Icon} from 'coral-ui';
+import {Icon, Dropdown, Option} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
-
+import LoadMore from '../../../components/LoadMore';
 import PropTypes from 'prop-types';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import {isSuspended, isBanned} from 'coral-framework/utils/user';
+import moment from 'moment';
 
-const People = (props) => {
-  const {
-    users = [],
-    searchValue,
-    onSearchChange,
-    onHeaderClickHandler,
-    onPageChange,
-    totalPages,
-    page,
-    setRole,
-    setCommenterStatus,
-    viewUserDetail,
-  } = props;
+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 hasResults = !!users.length;
+class People extends React.Component {
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.leftColumn}>
-        <div className={styles.searchBox}>
-          <Icon name='search' className={styles.searchIcon}/>
-          <input
-            id="commenters-search"
-            type="text"
-            className={styles.searchBoxInput}
-            value={searchValue}
-            onChange={onSearchChange}
-            placeholder={t('streams.search')}
-          />
+  getActionMenuLabel = (user) => {
+    if (isBanned(user)) {
+      return 'Banned';
+    } else if (isSuspended(user)) {
+      return 'Suspended';
+    }
+    return '';
+  };
+
+  unSuspendUser = (input) => {
+    this.props.unSuspendUser(input);
+  }
+
+  unBanUser = (input) => {
+    this.props.unBanUser(input);
+  }
+
+  showBanUserDialog = (input) => {
+    this.props.showBanUserDialog(input);
+  }
+
+  showSuspendUserDialog = (input) => {
+    this.props.showSuspendUserDialog(input);
+  }
+
+  render () {
+    const {
+      onSearchChange,
+      users = [],
+      setUserRole,
+      viewUserDetail,
+      loadMore,
+    } = this.props;
+    
+    const hasResults = !!users.nodes.length;
+    
+    return (
+      <div className={cn(styles.container, 'talk-admin-community-people-container')}>
+        <div className={styles.leftColumn}>
+          <div className={styles.searchBox}>
+            <Icon name='search' className={styles.searchIcon}/>
+            <input
+              id="commenters-search"
+              type="text"
+              className={styles.searchBoxInput}
+              defaultValue=''
+              onChange={onSearchChange}
+              placeholder={t('streams.search')}
+            />
+          </div>
+        </div>
+        <div className={styles.mainContent}>
+          {
+            hasResults
+              ? <div>
+                <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" >
+                            {header.title}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {users.nodes.map((user, i)=> (
+                        <tr key={i} className="talk-admin-community-people-row">
+                          <td className="mdl-data-table__cell--non-numeric">
+                            <button onClick={() => {viewUserDetail(user.id);}} className={cn(styles.username, styles.button)}>{user.username}</button>
+                            <span className={styles.email}>{user.profiles.map(({id}) => id)}</span>
+                          </td>
+                          <td className="mdl-data-table__cell--non-numeric">
+                            {moment(new Date(user.created_at)).format('MMMM Do YYYY, h:mm:ss a')}
+                          </td>
+                          <td className="mdl-data-table__cell--non-numeric">
+                            <ActionsMenu
+                              icon="person"
+                              className={cn(styles.actionsMenu, 'talk-admin-community-people-dd-status')}
+                              buttonClassNames={cn(styles.actionsMenuButton, {
+                                [styles.actionsMenuSuspended]: isSuspended(user),
+                                [styles.actionsMenuBanned]: isBanned(user),
+                              }, 'talk-admin-user-detail-actions-button')}
+                              label={this.getActionMenuLabel(user)} >
+                              
+                              {isSuspended(user) ? <ActionsMenuItem
+                                onClick={() => this.unSuspendUser({id: user.id})}>
+                                Remove Suspension
+                              </ActionsMenuItem> : <ActionsMenuItem
+                                onClick={() => this.showSuspendUserDialog({
+                                  userId: user.id,
+                                  username: user.username,
+                                })}>
+                                Suspend User
+                              </ActionsMenuItem>}
+
+                              {isBanned(user) ? <ActionsMenuItem
+                                onClick={() => this.unBanUser({id: user.id})}>
+                                Remove Ban
+                              </ActionsMenuItem> : <ActionsMenuItem
+                                onClick={() => this.showBanUserDialog({
+                                  userId: user.id,
+                                  username: user.username,
+                                })}>
+                                Ban User
+                              </ActionsMenuItem>}
+  
+                            </ActionsMenu>
+                          </td>
+                          <td className="mdl-data-table__cell--non-numeric">
+                            <Dropdown
+                              containerClassName="talk-admin-community-people-dd-role"
+                              value={user.role}
+                              placeholder={t('community.role')}
+                              onChange={(role) => setUserRole(user.id, role)}>
+                              <Option value={'COMMENTER'} label={t('community.commenter')} />
+                              <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>
+                </div>
+                <LoadMore
+                  loadMore={loadMore}
+                  showLoadMore={users.hasNextPage}
+                />
+              </div>
+              : <EmptyCard>{t('community.no_results')}</EmptyCard>
+          }
         </div>
       </div>
-      <div className={styles.mainContent}>
-        {
-          hasResults
-            ? <Table
-              users={users}
-              setRole={setRole}
-              viewUserDetail={viewUserDetail}
-              setCommenterStatus={setCommenterStatus}
-              onHeaderClickHandler={onHeaderClickHandler}
-              pageCount={totalPages}
-              onPageChange={onPageChange}
-              page={page}
-            />
-            : <EmptyCard>{t('community.no_results')}</EmptyCard>
-        }
-      </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 People.propTypes = {
-  onHeaderClickHandler: PropTypes.func,
-  users: PropTypes.array,
-  page: PropTypes.number.isRequired,
-  searchValue: PropTypes.string,
-  onSearchChange: PropTypes.func,
-  totalPages: PropTypes.number,
-  onPageChange: PropTypes.func,
-  setCommenterStatus: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
+  users: PropTypes.object.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  setUserRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  loadMore: PropTypes.func.isRequired,
 };
 
 export default People;

client/coral-admin/src/routes/Community/components/RejectUsernameDialog.css

@@ -2,7 +2,7 @@
 .modalButtons {
   display: flex;
   justify-content: flex-end;
-  margin-top: 50px;
+  margin-top: 20px;
 }
 
 .emailInput {

client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js

@@ -45,7 +45,7 @@ class RejectUsernameDialog extends Component  {
     const next = () => this.setState({stage: stage + 1});
     const suspend = async () => {
       try {
-        await rejectUsername({id: user.id, message: this.state.email});
+        await rejectUsername(user.id);
         this.props.handleClose();
       } catch (err) {
 
@@ -70,7 +70,7 @@ class RejectUsernameDialog extends Component  {
     const {stage} = this.state;
 
     return <Dialog
-      className={cn(styles.suspendDialog, 'talk-reject-username-dialog')}
+      className={cn(styles.suspendDialog, 'talk-admin-reject-username-dialog')}
       id="rejectUsernameDialog"
       open={open}
       onClose={handleClose}
@@ -79,28 +79,28 @@ class RejectUsernameDialog extends Component  {
       <div className={styles.title}>
         {t(stages[stage].title, t('reject_username.username'))}
       </div>
-      <div className={styles.container}>
+      <div className={cn(styles.container, `talk-admin-reject-username-dialog-step-${stage}`)}>
         <div className={styles.description}>
           {t(stages[stage].description, t('reject_username.username'))}
         </div>
-        {
+        {/* {
           stage === 1 &&
                 <div className={styles.writeContainer}>
                   <div className={styles.emailMessage}>{t('reject_username.write_message')}</div>
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
-                      className={cn(styles.emailInput, 'talk-reject-username-dialog-suspension-message')}
+                      className={cn(styles.emailInput, 'talk-admin-reject-username-dialog-suspension-message')}
                       value={this.state.email}
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
-        }
-        <div className={cn(styles.modalButtons, 'talk-reject-username-dialog-buttons')}>
+        } */}
+        <div className={cn(styles.modalButtons, 'talk-admin-reject-username-dialog-buttons')}>
           {Object.keys(stages[stage].options).map((key, i) => (
             <Button
               key={i}
-              className={cn('talk-reject-username-dialog-button', `talk-reject-username-dialog-button-${key}`)}
+              className={cn('talk-admin-username-dialog-button', `talk-admin-reject-username-dialog-button-${key}`)}
               onClick={this.onActionClick(stage, i)} >
               {t(stages[stage].options[key], t('reject_username.username'))}
             </Button>

client/coral-admin/src/routes/Community/components/Table.css

@@ -1,69 +0,0 @@
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-}
-
-th.header {
-  font-size: 1.1em;
-}
-
-th.header:hover {
-  cursor: pointer;
-}
-
-th.header:nth-child(2), th.header:nth-child(3) {
-  width: 100px;
-}
-
-.button {
-  composes: buttonReset from 'coral-framework/styles/reset.css';
-  &:hover {
-    background-color: #D0D0D0;
-  }
-}
-
-.username, .email {
-  max-width: 215px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.email {
-  display: block;
-}
-
-.selectField {
-  position: relative;
-  width: 150px;
-  height: 36px;
-  background: #2c2c2c;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 2px;
-  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);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-

client/coral-admin/src/routes/Community/components/Table.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import styles from './Table.css';
-import t from 'coral-framework/services/i18n';
-import PropTypes from 'prop-types';
-import {Paginate, Dropdown, Option} from 'coral-ui';
-import cn from 'classnames';
-
-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, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, page, 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>
-      </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}
-      page={page - 1}
-      onPageChange={onPageChange}
-    />
-  </div>
-);
-
-Table.propTypes = {
-  users: PropTypes.array,
-  onHeaderClickHandler: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
-  setCommenterStatus: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
-  pageCount: PropTypes.number.isRequired,
-  page: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-};
-
-export default Table;

client/coral-admin/src/routes/Community/components/styles.css

@@ -240,3 +240,97 @@
   }
 }
 
+/* ========================================================================== */
+/* TABLE */
+/* ========================================================================== */
+
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+}
+
+th.header {
+  font-size: 1.1em;
+}
+
+th.header:hover {
+  cursor: pointer;
+}
+
+th.header:nth-child(2), th.header:nth-child(3) {
+  width: 100px;
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  &:hover {
+    background-color: #D0D0D0;
+  }
+}
+
+.username, .email {
+  max-width: 215px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.email {
+  display: block;
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  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);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+
+.actionsMenu {
+  font-size: 1em;
+}
+
+.actionsMenu .actionsMenuButton {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  font-size: 0.98em;
+}
+
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
+}
+
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
+}

client/coral-admin/src/routes/Community/containers/Community.js

@@ -3,9 +3,10 @@ import {bindActionCreators} from 'redux';
 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 {withRejectUsername} from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
+import People from '../containers/People';
 import {hideRejectUsernameDialog} from '../../../actions/community';
 import Community from '../components/Community';
 
@@ -20,17 +21,25 @@ const mapDispatchToProps = (dispatch) =>
 
 const withData = withQuery(gql`
   query TalkAdmin_Community {
-    flaggedUsernamesCount: userCount(query: {
-      action_type: FLAG,
-      statuses: [PENDING]
-    })
+    flaggedUsernamesCount: userCount(
+      query:{
+        action_type: FLAG,
+        state: {
+          status: {
+            username: [SET, CHANGED]
+          }
+        }
+      }
+    )
     ...${getDefinitionName(FlaggedAccounts.fragments.root)}
     ...${getDefinitionName(FlaggedUser.fragments.root)}
+    ...${getDefinitionName(People.fragments.root)}
     me {
       ...${getDefinitionName(FlaggedUser.fragments.me)}
       __typename
     }
   }
+  ${People.fragments.root}
   ${FlaggedAccounts.fragments.root}
   ${FlaggedUser.fragments.root}
   ${FlaggedUser.fragments.me}
@@ -42,7 +51,6 @@ const withData = withQuery(gql`
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withSetUserStatus,
   withRejectUsername,
   withData
 )(Community);

client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js

@@ -5,10 +5,7 @@ import {compose, gql} from 'react-apollo';
 import {withFragments} from 'plugin-api/beta/client/hocs';
 import {Spinner} from 'coral-ui';
 import PropTypes from 'prop-types';
-
-import {withSetUserStatus} from 'coral-framework/graphql/mutations';
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
+import {withApproveUsername} from 'coral-framework/graphql/mutations';
 import {showRejectUsernameDialog} from '../../../actions/community';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {getDefinitionName} from 'coral-framework/utils';
@@ -24,11 +21,8 @@ class FlaggedAccountsContainer extends Component {
     super(props);
   }
 
-  approveUser = ({userId}) => {
-    return this.props.setUserStatus({
-      userId,
-      status: 'APPROVED'
-    });
+  approveUser = ({userId: id}) => {
+    return this.props.approveUsername(id);
   }
 
   loadMore = () => {
@@ -40,7 +34,7 @@ class FlaggedAccountsContainer extends Component {
       },
       updateQuery: (previous, {fetchMoreResult:{users}}) => {
         const updated = update(previous, {
-          users: {
+          flaggedUsers: {
             nodes: {
               $apply: (nodes) => appendNewNodes(nodes, users.nodes),
             },
@@ -63,15 +57,13 @@ class FlaggedAccountsContainer extends Component {
     }
     return (
       <FlaggedAccounts
-        showBanUserDialog={this.props.showBanUserDialog}
-        showSuspendUserDialog={this.props.showSuspendUserDialog}
         showRejectUsernameDialog={this.props.showRejectUsernameDialog}
         viewUserDetail={this.props.viewUserDetail}
         approveUser={this.approveUser}
         loadMore={this.loadMore}
         data={this.props.data}
         root={this.props.root}
-        users={this.props.root.users}
+        users={this.props.root.flaggedUsers}
         me={this.props.root.me}
       />
     );
@@ -79,18 +71,25 @@ class FlaggedAccountsContainer extends Component {
 }
 
 FlaggedAccountsContainer.propTypes = {
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
-  setUserStatus: PropTypes.func,
+  approveUsername: PropTypes.func,
   data: PropTypes.object,
-  root: PropTypes.object
+  root: PropTypes.object,
 };
 
 const LOAD_MORE_QUERY = gql`
   query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
-    users(query:{action_type: FLAG, statuses: [PENDING], limit: $limit, cursor: $cursor}){
+    flaggedUsers: users(query:{
+        action_type: FLAG,
+        state: {
+          status: {
+            username: [PENDING]
+          }
+        },
+        limit: $limit,
+        cursor: $cursor
+      }){
       hasNextPage
       endCursor
       nodes {
@@ -104,19 +103,25 @@ const LOAD_MORE_QUERY = gql`
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    showBanUserDialog,
-    showSuspendUserDialog,
     showRejectUsernameDialog,
     viewUserDetail,
   }, dispatch);
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withSetUserStatus,
+  withApproveUsername,
   withFragments({
     root: gql`
       fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
-        users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
+        flaggedUsers: users(query:{
+            action_type: FLAG,
+            state: {
+              status: {
+                username: [SET, CHANGED]
+              }
+            }
+            limit: 10
+          }){
           hasNextPage
           endCursor
           nodes {

client/coral-admin/src/routes/Community/containers/FlaggedUser.js

@@ -17,8 +17,20 @@ export default withFragments({
     fragment TalkAdminCommunity_FlaggedUser_user on User {
       id
       username
-      status
-      roles
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
+      }
+      role
       actions{
         id
         created_at

client/coral-admin/src/routes/Community/containers/People.js

@@ -1,104 +1,164 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-
+import {withFragments} from 'plugin-api/beta/client/hocs';
+import {withUnBanUser, withUnSuspendUser, withSetUserRole} from 'coral-framework/graphql/mutations';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
-
-import {
-  fetchUsers,
-  updateSorting,
-  setPage,
-  hideRejectUsernameDialog,
-  setCommenterStatus,
-  setRole,
-  setSearchValue,
-} from '../../../actions/community';
+import {appendNewNodes} from 'plugin-api/beta/client/utils';
+import update from 'immutability-helper';
+import {Spinner} from 'coral-ui';
 
 class PeopleContainer extends React.Component {
-  timer=null;
-
-  fetchUsers = (query = {}) => {
-    const {community} = this.props;
-
-    this.props.fetchUsers({
-      value: community.searchValue,
-      field: community.fieldPeople,
-      asc: community.ascPeople,
-      ...query
-    });
-  }
-
-  componentWillMount() {
-    this.fetchUsers();
-  }
+  timer = null;
 
   onKeyDownHandler = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
-      this.fetchUsers();
+
+      // this.fetchUsers();
     }
   }
 
   onSearchChange = (e) => {
     const value = e.target.value;
+    console.log(value);
 
-    this.props.setSearchValue(value);
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.fetchUsers({value});
-    }, 350);
+    // clearTimeout(this.timer);
+
+    // this.timer = setTimeout(() => {
+    //   // this.fetchUsers({value});
+    // }, 350);
   }
 
-  onHeaderClickHandler = (sort) => {
-    this.props.updateSorting(sort);
-    this.fetchUsers();
+  setUserRole = async (id, role) => {
+    await this.props.setUserRole(id, role);
   }
 
-  onPageChange = ({selected}) => {
-    const page = selected + 1;
-    this.props.setPage(page);
-    this.fetchUsers({page});
-  }
+  loadMore = () => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        limit: 5,
+        cursor: this.props.root.users.endCursor,
+      },
+      updateQuery: (previous, {fetchMoreResult:{users}}) => {
+        const updated = update(previous, {
+          flaggedUsers: {
+            nodes: {
+              $apply: (nodes) => appendNewNodes(nodes, users.nodes),
+            },
+            hasNextPage: {$set: users.hasNextPage},
+            endCursor: {$set: users.endCursor},
+          },
+        });
+        return updated;
+      },
+    });
+  };
 
   render() {
+
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (this.props.data.loading) {
+      return <div><Spinner/></div>;
+    }
+
     return <People
-      users={this.props.community.users}
-      searchValue={this.props.community.searchValue}
-      onSearchChange={this.onSearchChange}
-      onHeaderClickHandler={this.onHeaderClickHandler}
-      onPageChange={this.onPageChange}
-      totalPages={this.props.community.totalPagesPeople}
-      setCommenterStatus={this.props.setCommenterStatus}
-      setRole={this.props.setRole}
-      page={this.props.community.pagePeople}
+      onSearchChange={this.onSearchChange}  
       viewUserDetail={this.props.viewUserDetail}
+      setUserRole={this.setUserRole}
+      showSuspendUserDialog={this.props.showSuspendUserDialog}
+      showBanUserDialog={this.props.showBanUserDialog}
+      unBanUser={this.props.unBanUser}
+      unSuspendUser={this.props.unSuspendUser}
+      data={this.props.data}
+      root={this.props.root}
+      users={this.props.root.users}
+      loadMore={this.loadMore}
     />;
   }
 }
 
 PeopleContainer.propTypes = {
-  setPage: PropTypes.func,
-  fetchUsers: PropTypes.func,
-  updateSorting: PropTypes.func,
-  setRole: PropTypes.func.isRequired,
-  setCommenterStatus: PropTypes.func.isRequired,
-  setSearchValue: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
+  setUserRole: PropTypes.func.isRequired,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object,
 };
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    setPage,
-    fetchUsers,
-    updateSorting,
-    hideRejectUsernameDialog,
-    setCommenterStatus,
-    setRole,
     viewUserDetail,
-    setSearchValue,
+    showSuspendUserDialog,
+    showBanUserDialog,
   }, dispatch);
 
-export default connect(null, mapDispatchToProps)(PeopleContainer);
+const LOAD_MORE_QUERY = gql`
+  query TalkAdminCommunity_People_LoadMoreUsers($limit: Int, $cursor: Cursor) {
+    users(query: {}){
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        id
+        username
+        created_at
+        profiles {
+          id
+          provider
+        }
+      }
+    }
+  }
+`;
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withSetUserRole,
+  withUnSuspendUser,
+  withUnBanUser,
+  withFragments({
+    root: gql`
+      fragment TalkAdminCommunity_People_root on RootQuery {
+        users(query: {}){
+          hasNextPage
+          endCursor
+          nodes {
+            __typename
+            id
+            username
+            role
+            created_at
+            profiles {
+              id
+              provider
+            }
+            state {
+              status {
+                banned {
+                  status
+                }
+                suspension {
+                  until
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+  }),
+)(PeopleContainer);

client/coral-admin/src/routes/Configure/components/EmbedLink.js

@@ -5,6 +5,7 @@ import styles from './EmbedLink.css';
 import {Button} from 'coral-ui';
 import {BASE_URL} from 'coral-framework/constants/url';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
+import {stripIndent} from 'common-tags';
 
 class EmbedLink extends Component {
 
@@ -23,17 +24,16 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const coralJsUrl = join(BASE_URL, '/embed.js');
-    const nonce = String(Math.random()).slice(2);
-    const streamElementId = `coral_talk_${nonce}`;
-    const embedText = `
-<div id="${streamElementId}"></div>
-<script src="${coralJsUrl}" async onload="
-  Coral.Talk.render(document.getElementById('${streamElementId}'), {
-    talk: '${BASE_URL}'
-  });
-"></script>
-    `.trim();
+    const coralJsUrl = join(BASE_URL, '/static/embed.js');
+    const embedText = stripIndent`
+      <div id="coral_talk_stream"></div>
+      <script src="${coralJsUrl}" async onload="
+        Coral.Talk.render(document.getElementById('coral_talk_stream'), {
+          talk: '${BASE_URL}'
+        });
+      "></script>
+    `;
+
     return (
       <ConfigureCard title={'Embed Comment Stream'}>
         <p>{t('configure.copy_and_paste')}</p>

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,

client/coral-admin/src/routes/Configure/components/StreamSettings.css

@@ -53,3 +53,6 @@
 
 
 
+.autoCloseWrapper {
+  display: flex;
+}

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
@@ -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 */}
@@ -203,6 +205,8 @@ class StreamSettings extends React.Component {
           fill="adminStreamSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );

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,

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,
 };

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);

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);

client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js

@@ -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;

client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js

@@ -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;

client/coral-admin/src/routes/Dashboard/components/Dashboard.css

@@ -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;
-  }
-}

client/coral-admin/src/routes/Dashboard/components/Dashboard.js

@@ -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>
-);

client/coral-admin/src/routes/Dashboard/components/FlagWidget.js

@@ -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;

client/coral-admin/src/routes/Dashboard/components/LikeWidget.js

@@ -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;

client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js

@@ -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;

client/coral-admin/src/routes/Dashboard/components/Widget.css

@@ -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;
-}

client/coral-admin/src/routes/Dashboard/containers/Dashboard.js

@@ -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);

client/coral-admin/src/routes/Dashboard/index.js

@@ -1 +0,0 @@
-export {default} from './containers/Dashboard.js';

client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js

@@ -0,0 +1,25 @@
+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) {
+      this.props.loadMore();
+    }
+  }
+
+  render() {
+    return <Spinner />;
+  }
+}
+
+AutoLoadMore.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  loadMore: PropTypes.func.isRequired,
+};
+
+export default AutoLoadMore;

client/coral-admin/src/routes/Moderation/components/Comment.css

@@ -10,7 +10,9 @@
   position: relative;
   transition: all 200ms;
   padding: 10px 0;
+  margin-top: 13px;
   min-height: 0;
+  outline: 0;
 
   /*
    Fix rendering issues in Safari by promoting this
@@ -25,6 +27,10 @@
   }
 }
 
+.dangling {
+  background-color: #efefef;
+}
+
 .container {
   padding: 0 14px;
 }

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -8,8 +8,6 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
@@ -19,25 +17,14 @@ import RejectButton from 'coral-admin/src/components/RejectButton';
 import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
+  ref = null;
 
-  showSuspendUserDialog = () => {
-    const {comment, showSuspendUserDialog} = this.props;
-    return showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
+  handleRef = (ref) => (this.ref = ref);
 
-  showBanUserDialog = () => {
-    const {comment, showBanUserDialog} = this.props;
-    return showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
+  handleFocusOrClick = () => {
+    if (!this.props.selected) {
+      this.props.selectComment();
+    }
   };
 
   viewUserDetail = () => {
@@ -45,15 +32,21 @@ class Comment extends React.Component {
     return viewUserDetail(comment.user.id);
   };
 
-  approve = () => (this.props.comment.status === 'ACCEPTED'
-    ? null
-    : this.props.acceptComment({commentId: this.props.comment.id})
-  );
+  approve = () =>
+    this.props.comment.status === 'ACCEPTED'
+      ? null
+      : this.props.acceptComment({commentId: this.props.comment.id});
 
-  reject = () => (this.props.comment.status === 'REJECTED'
-    ? null
-    : this.props.rejectComment({commentId: this.props.comment.id})
-  );
+  reject = () =>
+    this.props.comment.status === 'REJECTED'
+      ? null
+      : this.props.rejectComment({commentId: this.props.comment.id});
+
+  componentDidUpdate(prev) {
+    if (!prev.selected && this.props.selected) {
+      this.ref.focus();
+    }
+  }
 
   render() {
     const {
@@ -63,8 +56,9 @@ class Comment extends React.Component {
       data,
       root,
       root: {settings},
-      currentUserId,
       currentAsset,
+      clearHeightCache,
+      dangling,
     } = this.props;
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
@@ -73,47 +67,48 @@ 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, [styles.dangling]: dangling},
+          '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}>
             <div className={styles.author}>
-              {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
-                    {comment.user.username}
-                  </span>
-                )
-              }
+              <span
+                className={cn(
+                  styles.username,
+                  'talk-admin-moderate-comment-username'
+                )}
+                onClick={this.viewUserDetail}
+              >
+                {comment.user.username}
+              </span>
+
               <span className={styles.created}>
                 {timeago(comment.created_at)}
               </span>
-              {
-                (comment.editing && comment.editing.edited)
-                  ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                  : null
-              }
-              {currentUserId !== comment.user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showSuspendUserDialog}>
-                    Suspend User</ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
+              {comment.editing && comment.editing.edited ? (
+                <span>
+                  &nbsp;<span className={styles.editedMarker}>
+                    ({t('comment.edited')})
+                  </span>
+                </span>
+              ) : null}
               <div className={styles.adminCommentInfoBar}>
-                <CommentLabels
-                  comment={comment}
-                />
+                <CommentLabels comment={comment} />
                 <Slot
                   fill="adminCommentInfoBar"
                   data={data}
+                  clearHeightCache={clearHeightCache}
                   queryData={queryData}
                 />
               </div>
@@ -122,8 +117,11 @@ class Comment extends React.Component {
 
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!currentAsset &&
-              <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+            {!currentAsset && (
+              <Link to={`/admin/moderate/${comment.asset.id}`}>
+                {t('modqueue.moderate')}
+              </Link>
+            )}
           </div>
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
@@ -132,8 +130,7 @@ class Comment extends React.Component {
                   suspectWords={settings.wordlist.suspect}
                   bannedWords={settings.wordlist.banned}
                   body={comment.body}
-                />
-                {' '}
+                />{' '}
                 <a
                   className={styles.external}
                   href={`${comment.asset.url}?commentId=${comment.id}`}
@@ -145,6 +142,7 @@ class Comment extends React.Component {
               <Slot
                 fill="adminCommentContent"
                 data={data}
+                clearHeightCache={clearHeightCache}
                 queryData={queryData}
               />
               <div className={styles.sideActions}>
@@ -166,6 +164,7 @@ class Comment extends React.Component {
                 <Slot
                   fill="adminSideActions"
                   data={data}
+                  clearHeightCache={clearHeightCache}
                   queryData={queryData}
                 />
               </div>
@@ -176,6 +175,7 @@ class Comment extends React.Component {
           data={data}
           root={root}
           comment={comment}
+          clearHeightCache={clearHeightCache}
         />
       </li>
     );
@@ -185,12 +185,14 @@ class Comment extends React.Component {
 Comment.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
+  selectComment: PropTypes.func,
   rejectComment: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   className: PropTypes.string,
+  dangling: PropTypes.bool,
   currentAsset: PropTypes.object,
-  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,
@@ -200,12 +202,12 @@ Comment.propTypes = {
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
       id: PropTypes.string,
-      status: PropTypes.string
+      status: PropTypes.string,
     }).isRequired,
     asset: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     }),
   }),
   data: PropTypes.object.isRequired,

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -12,15 +12,9 @@ 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 = {
+    isLoadingMore: false,
+  };
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
@@ -30,17 +24,16 @@ 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()
-      .forEach((menuItem, idx) => key(`${idx + 1}`, () => this.selectQueue(menuItem)));
+    this.getMenuItems().forEach((menuItem, idx) =>
+      key(`${idx + 1}`, () => this.selectQueue(menuItem))
+    );
   }
 
   onClose = () => {
     this.props.toggleModal(false);
-  }
+  };
 
   nextQueue = () => {
     const activeTab = this.props.activeTab;
@@ -48,39 +41,45 @@ class Moderation extends Component {
     const menuItems = this.getMenuItems();
 
     const activeTabIndex = menuItems.findIndex((item) => item === activeTab);
-    const nextQueueIndex = (activeTabIndex === menuItems.length - 1) ? 0 : activeTabIndex + 1;
+    const nextQueueIndex =
+      activeTabIndex === menuItems.length - 1 ? 0 : activeTabIndex + 1;
 
     this.selectQueue(menuItems[nextQueueIndex]);
-  }
+  };
 
   selectQueue = (key) => {
     const assetId = this.props.data.variables.asset_id;
     this.props.router.push(this.props.getModPath(key, assetId));
-  }
+  };
 
   getMenuItems = () => Object.keys(this.props.queueConfig);
 
   closeSearch = () => {
     const {toggleStorySearch} = this.props;
     toggleStorySearch(false);
-  }
+  };
 
   openSearch = () => {
     this.props.toggleStorySearch(true);
-  }
+  };
 
   getActiveTabCount = (props = this.props) => {
     return props.root[`${props.activeTab}Count`];
-  }
+  };
 
   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){
+    if (selectedCommentId != null) {
       const comments = this.getComments();
-      const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const commentIdx = comments.findIndex(
+        (comment) => comment.id === selectedCommentId
+      );
       const comment = comments[commentIdx];
 
       if (accept) {
@@ -89,86 +88,27 @@ class Moderation extends Component {
         comment.status !== 'REJECTED' && rejectComment({commentId: comment.id});
       }
     }
-  }
+  };
 
   getComments = (props = this.props) => {
     const {root, activeTab} = props;
     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;
+    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;
+      } catch (e) {
+        this.setState({isLoadingMore: false});
         throw e;
       }
     }
     return false;
-  }
+  };
 
   componentWillUnmount() {
     key.unbind('s');
@@ -176,58 +116,23 @@ 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()
-      .forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
+    this.getMenuItems().forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
   }
 
-  componentWillReceiveProps(nextProps) {
-
-    if (this.props.activeTab !== nextProps.activeTab) {
-
-      // Reset selection when changing tabs.
-      this.select(true, nextProps, null);
-    } else {
-
-      // 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});
-          }
-        }
-      }
-    }
-  }
-
-  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;
+  render() {
+    const {
+      root,
+      data,
+      moderation,
+      viewUserDetail,
+      activeTab,
+      getModPath,
+      queueConfig,
+      handleCommentChange,
+      ...props
+    } = this.props;
     const {asset} = root;
     const assetId = asset && asset.id;
 
@@ -238,7 +143,7 @@ class Moderation extends Component {
       key: queue,
       name: queueConfig[queue].name,
       icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`]
+      count: root[`${queue}Count`],
     }));
 
     return (
@@ -255,7 +160,9 @@ class Moderation extends Component {
           items={menuItems}
           activeTab={activeTab}
         />
-        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+        <div
+          className={cn(styles.container, 'talk-admin-moderation-container')}
+        >
           <ViewOptions
             selectSort={this.props.setSortOrder}
             sort={this.props.moderation.sortOrder}
@@ -266,17 +173,20 @@ class Moderation extends Component {
             root={this.props.root}
             currentAsset={asset}
             comments={comments.nodes}
+            hasNextPage={comments.hasNextPage}
             activeTab={activeTab}
             singleView={moderation.singleView}
             selectedCommentId={this.state.selectedCommentId}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             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}
@@ -297,7 +207,7 @@ class Moderation extends Component {
           queryData={{root, asset}}
           activeTab={activeTab}
           handleCommentChange={handleCommentChange}
-          fill='adminModeration'
+          fill="adminModeration"
         />
       </div>
     );
@@ -307,16 +217,17 @@ 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,
+  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,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   loadMore: PropTypes.func.isRequired,

client/coral-admin/src/routes/Moderation/components/ModerationLayout.css

@@ -0,0 +1,3 @@
+.root {
+  height: 100%;
+}

client/coral-admin/src/routes/Moderation/components/ModerationQueue.css

@@ -2,29 +2,15 @@
   padding: 8px 0;
   list-style: none;
   display: block;
+  min-height: 650px;
   margin-top: 16px;
 }
 
+:global(html) {
+  height: inherit;
+}
+
 .list {
-  padding: 0;
-  margin: 0;
-}
-
-.commentLeave {
-  opacity: 1.0;
-}
-
-.commentLeaveActive {
-  opacity: 0;
-  transition: opacity 800ms;
-}
-
-.commentEnter {
-  opacity: 0;
-}
-
-.commentEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms;
+  outline: none;
 }
 

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -4,26 +4,34 @@ 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 {CSSTransitionGroup} from 'react-transition-group';
+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);
 
 // 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) {
-    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
@@ -40,91 +48,335 @@ function invalidateCursor(invalidated, state, props) {
       idCursors.push(nextInLine.id);
     }
   }
-  return {idCursors};
+  return idCursors;
 }
 
+// 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;
+}
+
+// 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,
+  keyMapper: (index) => keyMapper(index),
+});
+
 class ModerationQueue extends React.Component {
-  isLoadingMore = false;
+  listRef = null;
+  callbackCaches = {
+    clearHeightCache: {},
+    selectCommentId: {},
+  };
 
   constructor(props) {
     super(props);
     this.state = {
       ...resetCursors(this.state, props),
     };
+
+    // Set keyMapper to map to comment ids.
+    keyMapper = (index) => {
+      const view = this.state.view;
+      if (index < view.length) {
+        return view[index].id;
+      } else if (index === view.length) {
+        return 'loadMore';
+      }
+      throw new Error(`unknown index ${index}`);
+    };
+
+    // Select first comment.
+    if (this.state.view.length) {
+      props.selectCommentId(this.state.view[0].id);
+    }
   }
 
-  componentDidUpdate (prev) {
-    const {comments, commentCount} = this.props;
+  componentDidMount() {
+    key('j', () => this.selectDown());
+    key('k', () => this.selectUp());
 
-    // 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) {
-      this.props.loadMore();
-    }
+    // TODO: Workaround for issue https://github.com/bvaughn/react-virtualized/issues/866
+    this.reflowList();
+  }
+
+  componentWillUnmount() {
+    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;
 
-    if (!prevComments && nextComments) {
-      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;
     }
 
+    let idCursors = this.state.idCursors;
+
+    // Comments have been removed.
     if (
-      prevComments && nextComments &&
-        nextComments.length < prevComments.length
+      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])) {
-        this.setState(invalidateCursor(0, this.state, next));
+      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])) {
-        this.setState(invalidateCursor(1, this.state, next));
+      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);
     }
   }
 
-  viewNewComments = () => {
-    this.setState(resetCursors);
+  componentDidUpdate(prev) {
+    const {commentCount, selectedCommentId} = this.props;
+
+    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;
+    const hasMoreComment = commentCount > 0;
+
+    if (switchedToMultiMode) {
+
+      // Reflow virtual list.
+      this.reflowList();
+    }
+
+    if (switchedMode || selectedDifferentComment) {
+      this.scrollToSelectedComment();
+    }
+
+    if (moderatedLastComment && hasMoreComment) {
+      this.props.loadMore();
+    }
+  }
+
+  // Returns comment counts without dangling comments.
+  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.getCommentCountWithoutDagling() !== 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.state.view;
+    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);
+    }
+  }
+
+  handleListRef = (list) => {
+    this.listRef = list;
   };
 
-  // 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 [];
+  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);
     }
-
-    const view = [];
-    let pastCursor = false;
-    comments.forEach((comment) => {
-      if (comment.id === idCursor) {
-        pastCursor = true;
-      }
-      if (pastCursor) {
-        view.push(comment);
-      }
-    });
-    return view;
   }
 
-  render () {
+  viewNewComments = (callback) => {
+    this.setState(resetCursors, () => {
+      this.reflowList();
+      callback && callback();
+    });
+  };
+
+  reflowList = throttle((index) => {
+    if (index >= 0) {
+      cache.clear(index);
+      this.listRef && this.listRef.recomputeRowHeights(index);
+    } else {
+      cache.clearAll();
+      this.listRef && this.listRef.recomputeRowHeights();
+    }
+  }, 500);
+
+  rowRenderer = ({
+    index, // Index of row within collection
+    parent,
+    style, // Style object to be applied to row (to position it)
+  }) => {
+    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) {
+      key = 'end-of-comment-list';
+      child = (
+        <div style={style} id={'end-of-comment-list'}>
+          {this.props.hasNextPage && (
+            <AutoLoadMore
+              loadMore={this.props.loadMore}
+              loading={this.props.isLoadingMore}
+            />
+          )}
+        </div>
+      );
+    } 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 style={style}>
+          <Comment
+            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}
+            acceptComment={this.props.acceptComment}
+            rejectComment={this.props.rejectComment}
+            currentAsset={this.props.currentAsset}
+            currentUserId={this.props.currentUserId}
+            clearHeightCache={this.callbackCaches.clearHeightCache[index]}
+            selectComment={this.callbackCaches.selectCommentId[comment.id]}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <CellMeasurer
+        cache={cache}
+        columnIndex={0}
+        key={key}
+        parent={parent}
+        rowIndex={index}
+      >
+        {child}
+      </CellMeasurer>
+    );
+  };
+
+  render() {
     const {
       comments,
       selectedCommentId,
-      commentCount,
       singleView,
       viewUserDetail,
-      activeTab,
       ...props
     } = this.props;
 
@@ -137,7 +389,9 @@ class ModerationQueue extends React.Component {
     }
 
     if (singleView) {
-      const index = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const index = comments.findIndex(
+        (comment) => comment.id === selectedCommentId
+      );
       const comment = comments[index];
       return (
         <div className={styles.root}>
@@ -148,82 +402,65 @@ class ModerationQueue extends React.Component {
             comment={comment}
             selected={true}
             viewUserDetail={viewUserDetail}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
             currentUserId={this.props.currentUserId}
+            dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)}
           />;
         </div>
       );
     }
 
-    const view = this.getVisibleComments();
+    const view = this.state.view;
 
     return (
       <div className={styles.root}>
         <ViewMore
-          viewMore={this.viewNewComments}
+          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
+              className={styles.list}
+              style={{
+                width: '100%',
+              }}
+              height={height}
+              width={1280}
+              scrollTop={scrollTop}
+              isScrolling={isScrolling}
+              onScroll={onChildScroll}
+              rowCount={view.length + 1}
+              deferredMeasurementCache={cache}
+              rowRenderer={this.rowRenderer}
+              rowHeight={cache.rowHeight}
+            />
+          )}
+        </WindowScroller>
       </div>
     );
   }
 }
 
 ModerationQueue.propTypes = {
+  selectCommentId: PropTypes.func.isRequired,
+  selectedCommentId: PropTypes.string,
   viewUserDetail: PropTypes.func.isRequired,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  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,
   singleView: PropTypes.bool,
+  isLoadingMore: PropTypes.bool,
+  hasNextPage: PropTypes.bool,
+  comments: PropTypes.array,
   activeTab: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,

client/coral-admin/src/routes/Moderation/components/ViewMore.css

@@ -13,6 +13,9 @@
   background-color: #2376D8;
   cursor: pointer;
   text-transform: capitalize;
+  margin: 0;
+  margin-top: -18px;
+  margin-bottom: -4px;
 }
 
 .viewMore:hover {

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) {

client/coral-admin/src/routes/Moderation/containers/Comment.js

@@ -37,7 +37,19 @@ export default withFragments({
       user {
         id
         username
-        status
+        state {
+          status {
+            username {
+              status
+            }
+            banned {
+              status
+            }
+            suspension {
+              until
+            }
+          }
+        }
       }
       asset {
         id
@@ -47,6 +59,9 @@ export default withFragments({
       editing {
         edited
       }
+      status_history {
+        type
+      }
       hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -11,10 +11,12 @@ 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';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
@@ -23,7 +25,8 @@ import {
   toggleStorySearch,
   setSortOrder,
   storySearchChange,
-  clearState
+  clearState,
+  selectCommentId,
 } from 'actions/moderation';
 import withQueueConfig from '../hoc/withQueueConfig';
 import {notify} from 'coral-framework/actions/notification';
@@ -66,15 +69,17 @@ class ModerationContainer extends Component {
   };
 
   get activeTab() {
-
     const {root: {asset, settings}} = this.props;
     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;
@@ -85,49 +90,101 @@ class ModerationContainer extends Component {
       {
         document: COMMENT_ADDED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentAdded: comment}}}) => {
+        updateQuery: (
+          prev,
+          {subscriptionData: {data: {commentAdded: comment}}}
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_ACCEPTED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentAccepted: 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_accepted', user.username, prepareNotificationText(comment.body));
+        updateQuery: (
+          prev,
+          {subscriptionData: {data: {commentAccepted: 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_accepted',
+                user.username,
+                prepareNotificationText(comment.body)
+              );
           return this.handleCommentChange(prev, comment, notifyText);
         },
       },
       {
         document: COMMENT_REJECTED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentRejected: 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_rejected', user.username, prepareNotificationText(comment.body));
+        updateQuery: (
+          prev,
+          {subscriptionData: {data: {commentRejected: 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_rejected',
+                user.username,
+                prepareNotificationText(comment.body)
+              );
+          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,
-        updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
+        updateQuery: (
+          prev,
+          {subscriptionData: {data: {commentEdited: comment}}}
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_FLAGGED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
+        updateQuery: (
+          prev,
+          {subscriptionData: {data: {commentFlagged: comment}}}
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMore(param));
+    this.subscriptions = parameters.map((param) =>
+      this.props.data.subscribeToMoreThrottled(param)
+    );
   }
 
   unsubscribe() {
@@ -152,22 +209,41 @@ class ModerationContainer extends Component {
   componentWillReceiveProps(nextProps) {
 
     // Resubscribe when we change between assets.
-    if(this.props.data.variables.asset_id !== nextProps.data.variables.asset_id) {
+    if (
+      this.props.data.variables.asset_id !== nextProps.data.variables.asset_id
+    ) {
       this.resubscribe(nextProps.data.variables);
     }
   }
 
+  cleanUpQueue = (queue) => {
+    if (!this.props.data.loading) {
+      this.props.data.updateQuery((query) => {
+        return cleanUpQueue(
+          query,
+          queue,
+          this.props.moderation.sortOrder,
+          this.props.queueConfig
+        );
+      });
+    }
+  };
+
   acceptComment = ({commentId}) => {
     return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
-  }
+  };
 
   rejectComment = ({commentId}) => {
     return this.props.setCommentStatus({commentId, status: 'REJECTED'});
-  }
+  };
+
+  commentBelongToQueue = (queue, comment) => {
+    return commentBelongToQueue(queue, comment, this.props.queueConfig);
+  };
 
   loadMore = (tab) => {
     const variables = {
-      limit: 10,
+      limit: 20,
       cursor: this.props.root[tab].endCursor,
       sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
@@ -178,20 +254,19 @@ class ModerationContainer extends Component {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+      updateQuery: (prev, {fetchMoreResult: {comments}}) => {
         return update(prev, {
           [tab]: {
             nodes: {$push: comments.nodes},
             hasNextPage: {$set: comments.hasNextPage},
-            startCursor: {$set: comments.startCursor},
             endCursor: {$set: comments.endCursor},
           },
         });
-      }
+      },
     });
   };
 
-  render () {
+  render() {
     const {root, root: {asset, settings}, data} = this.props;
     const assetId = getAssetId(this.props);
 
@@ -207,14 +282,15 @@ class ModerationContainer extends Component {
       }
     }
 
-    if(data.loading) {
+    if (data.loading) {
 
       // loading.
       return <Spinner />;
     }
 
-    const premodEnabled = assetId ? isPremod(asset.settings.moderation) :
-      isPremod(settings.moderation);
+    const premodEnabled = assetId
+      ? isPremod(asset.settings.moderation)
+      : isPremod(settings.moderation);
 
     const currentQueueConfig = Object.assign({}, this.props.queueConfig);
 
@@ -226,16 +302,21 @@ class ModerationContainer extends Component {
       delete currentQueueConfig.premod;
     }
 
-    return <Moderation
-      {...this.props}
-      getModPath={getModPath}
-      loadMore={this.loadMore}
-      acceptComment={this.acceptComment}
-      rejectComment={this.rejectComment}
-      activeTab={this.activeTab}
-      queueConfig={currentQueueConfig}
-      handleCommentChange={this.handleCommentChange}
-    />;
+    return (
+      <Moderation
+        {...this.props}
+        getModPath={getModPath}
+        loadMore={this.loadMore}
+        acceptComment={this.acceptComment}
+        rejectComment={this.rejectComment}
+        activeTab={this.activeTab}
+        queueConfig={currentQueueConfig}
+        handleCommentChange={this.handleCommentChange}
+        selectedCommentId={this.props.selectedCommentId}
+        commentBelongToQueue={this.commentBelongToQueue}
+        cleanUpQueue={this.cleanUpQueue}
+      />
+    );
   }
 }
 const COMMENT_ADDED_SUBSCRIPTION = gql`
@@ -299,6 +380,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}) {
@@ -325,27 +423,57 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const withModQueueQuery = withQuery(({queueConfig}) => gql`
+const withModQueueQuery = withQuery(
+  ({queueConfig}) => gql`
   query CoralAdmin_Moderation($asset_id: ID, $sortOrder: SORT_ORDER, $allAssets: Boolean!, $nullStatuses: [COMMENT_STATUS!]) {
-    ${Object.keys(queueConfig).map((queue) => `
+    ${Object.keys(queueConfig).map(
+    (queue) => `
       ${queue}: comments(query: {
-        statuses: ${queueConfig[queue].statuses ? `[${queueConfig[queue].statuses.join(', ')}],` : '$nullStatuses'}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        statuses: ${
+  queueConfig[queue].statuses
+    ? `[${queueConfig[queue].statuses.join(', ')}],`
+    : '$nullStatuses'
+}
+        ${
+  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
       }
-    `)}
-    ${Object.keys(queueConfig).map((queue) => `
+    `
+  )}
+    ${Object.keys(queueConfig).map(
+    (queue) => `
       ${queue}Count: commentCount(query: {
-        statuses: ${queueConfig[queue].statuses ? `[${queueConfig[queue].statuses.join(', ')}],` : '$nullStatuses'}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        statuses: ${
+  queueConfig[queue].statuses
+    ? `[${queueConfig[queue].statuses.join(', ')}],`
+    : '$nullStatuses'
+}
+        ${
+  queueConfig[queue].tags
+    ? `tags: ["${queueConfig[queue].tags.join('", "')}"],`
+    : ''
+}
+        ${
+  queueConfig[queue].action_type
+    ? `action_type: ${queueConfig[queue].action_type}`
+    : ''
+}
         asset_id: $asset_id,
       })
-    `)}
+    `
+  )}
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
@@ -358,24 +486,29 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
       organizationName
       moderation
     }
+    me {
+      id
+    }
     ...${getDefinitionName(Comment.fragments.root)}
   }
   ${Comment.fragments.root}
   ${commentConnectionFragment}
-`, {
-  options: (props) => {
-    const id = getAssetId(props);
-    return {
-      variables: {
-        asset_id: id,
-        sortOrder: props.moderation.sortOrder,
-        allAssets: id === null,
-        nullStatuses: null,
-      },
-      fetchPolicy: 'network-only'
-    };
-  },
-});
+`,
+  {
+    options: (props) => {
+      const id = getAssetId(props);
+      return {
+        variables: {
+          asset_id: id,
+          sortOrder: props.moderation.sortOrder,
+          allAssets: id === null,
+          nullStatuses: null,
+        },
+        fetchPolicy: 'network-only',
+      };
+    },
+  }
+);
 
 const mapStateToProps = (state) => ({
   moderation: state.moderation,
@@ -383,24 +516,26 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    toggleModal,
-    singleView,
-    showBanUserDialog,
-    hideShortcutsNote,
-    toggleStorySearch,
-    showSuspendUserDialog,
-    viewUserDetail,
-    setSortOrder,
-    storySearchChange,
-    clearState,
-    notify,
-  }, dispatch),
+  ...bindActionCreators(
+    {
+      toggleModal,
+      singleView,
+      hideShortcutsNote,
+      toggleStorySearch,
+      viewUserDetail,
+      setSortOrder,
+      storySearchChange,
+      clearState,
+      notify,
+      selectCommentId,
+    },
+    dispatch
+  ),
 });
 
 export default compose(
   withQueueConfig(baseQueueConfig),
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
-  withModQueueQuery,
+  withModQueueQuery
 )(ModerationContainer);

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) {
@@ -40,26 +45,46 @@ 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;
   }
 
-  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);
-    changes[queue] = {
-      nodes: {$set: nodes},
-      startCursor: {$set: nodes[0].created_at},
-      endCursor: {$set: nodes[nodes.length - 1].created_at},
-    };
+  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) {
+  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
+  return nodes.sort(sortAlgo);
 }
 
 /**
@@ -68,24 +93,92 @@ function addCommentToQueue(root, queue, comment, 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;
 }
 
+/**
+ * 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;
+  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}`);
+}
+
+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;
+}
+
+/**
+ * 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 (!nodes.length) {
+    return root;
+  }
+
+  if (queueConfig) {
+    nodes = root[queue].nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig));
+  }
+
+  nodes = sortComments(
+    nodes,
+    sortOrder,
+  );
+
+  if (nodes.length > 100) {
+    nodes = nodes.slice(0, 100);
+    hasNextPage = true;
+  }
+
+  return update(root, {
+    [queue]: {
+      nodes: {$set: nodes},
+      endCursor: {$set: nodes[nodes.length - 1].created_at},
+      hasNextPage: {$set: hasNextPage},
+    },
+  });
+}
+
 /**
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
@@ -113,25 +206,27 @@ 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);
-        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sortOrder)) {
+        next = addCommentToQueue(next, queue, comment, sortOrder, activeQueue !== queue);
+        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) {
+      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();
       }
     }
 
-    if (
-      notify
-      && queueHasComment(next, queue, comment.id)
-      && activeQueue === queue
-    ) {
+    if (notify && isVisible(comment.id)) {
       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;
 }

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')}