Merge pull request #865 from clintabrown/fix-routes-mount-path

Fix paths when TALK_ROOT_URL_MOUNT_PATH is set to true

.dockerignore

@@ -1,9 +1,10 @@
 # excluded because we'll likely need to rebuild this.
 node_modules
 
-# scripts are used during development and testing, not
+# most scripts are used during development and testing, not
 # production.
 scripts
+!scripts/generateIntrospectionResult.js
 
 # documentation should not be visable in production.
 docs

.eslintignore

@@ -3,15 +3,16 @@ docs
 client/lib
 **/*.html
 plugins/*
-!plugins/coral-plugin-facebook-auth
-!plugins/coral-plugin-auth
-!plugins/coral-plugin-respect
-!plugins/coral-plugin-offtopic
-!plugins/coral-plugin-like
-!plugins/coral-plugin-mod
-!plugins/coral-plugin-love
-!plugins/coral-plugin-viewing-options
-!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-facebook-auth
+!plugins/talk-plugin-auth
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-like
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-love
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured
+!plugins/talk-plugin-featured-comments
+
 node_modules

.gitignore

@@ -5,27 +5,30 @@ dist
 npm-debug.log*
 dump.rdb
 
+client/coral-framework/graphql/introspection.json
+
 .env
 *.cfg
 
 .idea/
 *.swp
+*.DS_STORE
 
 test/e2e/reports
 coverage/
 
 plugins.json
 plugins/*
-!plugins/coral-plugin-facebook-auth
-!plugins/coral-plugin-auth
-!plugins/coral-plugin-respect
-!plugins/coral-plugin-offtopic
-!plugins/coral-plugin-like
-!plugins/coral-plugin-mod
-!plugins/coral-plugin-love
-!plugins/coral-plugin-viewing-options
-!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-facebook-auth
+!plugins/talk-plugin-auth
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-like
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-love
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured
+!plugins/talk-plugin-featured-comments
 
 **/node_modules/*

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:7.8
+FROM node:8
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -17,7 +17,6 @@ RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
     cli plugins reconcile && \
     yarn build && \
-    yarn install --production && \
     yarn cache clean
 
 # Ensure the runtime of the container is in production mode.

INSTALL.md

@@ -1,275 +0,0 @@
-## Contents
-
-- [Installation](#installation) - install the application on a machine
-	- [Via Docker](#installation-from-docker)
-	- [Via Source](#installation-from-source)
-- [Setup](#setup) - setup the application for first use
-- [Usage](#usage) - connect the application to a website
-
-# Installation
-
-## Requirements
-
-- Any flavour of Linux, OSX or Windows
-- 1GB memory (minimum)
-- 5GB storage (minimum)
-- [MongoDB](https://www.mongodb.com/) v3.4 or later
-- [Redis](https://redis.io/) v3.2 or later
-- SSL Certificate
-  - This application assumes that you will be serving this application in a
-    production environment, and therefore requires that you serve it behind a
-    webserver with a valid SSL certificate. This is chosen in order to secure
-    user's sessions.
-
-## Installation From Docker
-
-We currently support packaging the Talk application via Docker, which automates
-the dependency install and asset build process. This is the recommended way to
-deploy the application when used in production.
-
-Available as [coralproject/talk](https://hub.docker.com/r/coralproject/talk/) on Docker Hub.
-
-Images are tagged using the following notation:
-
-- `x` (where `x` is the major version number): any minor or patch updates will be included in this. If you're ok getting
-  new features occasionally and all the bug fixes, this is the tag for you.
-- `x.y` (where `y` is the minor version number): any patch updates will be
-  included with this tag. If you like getting fixes and having features change
-  only when you want, this is the tag for you. **(recommended)**
-- `x.y.z` (where `z` is the patch version): this tag never gets updated, and
-  essentially freezes your version, this should only be used when you are either
-  extending Talk or are sure of a specific version you want to freeze.
-
-We provide tags with `*-onbuild` that can be used for easy plugin integration and
-acts as a customization endpoint. Instructions are provided in the `PLUGINS.md`
-document as to how to use it.
-
-### Requirements
-
-There are some runtime requirements for running Talk for Docker:
-
-- [Docker](https://www.docker.com/) v1.13.0 or later
-- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
-
-_Please be sure to check the versions of these requirements. Incorrect versions
-of these may lead to unexpected errors!_
-
-### Installing
-
-An example docker-compose.yml:
-
-```yaml
-version: '2'
-services:
-  talk:
-    image: coralproject/talk:1.5
-    restart: always
-    ports:
-      - "5000:5000"
-    depends_on:
-      - mongo
-      - redis
-    environment:
-      - TALK_MONGO_URL=mongodb://mongo/talk
-      - TALK_REDIS_URL=redis://redis
-  mongo:
-    image: mongo:3.2
-    restart: always
-    volumes:
-      - mongo:/data/db
-  redis:
-    image: redis:3.2
-    restart: always
-    volumes:
-      - redis:/data
-volumes:
-  mongo:
-    external: false
-  redis:
-    external: false
-```
-
-At this stage, you should refer to the `README.md` for configuration variables
-that are specific to your installation. Some pre-defined fields have been filled
-in the above example which are consistent with Docker Compose naming conventions
-for [Docker Links](https://docs.docker.com/compose/networking/#links).
-
-### Scaling
-
-If you are interested in splitting apart services, you can simply adjust the
-command being executed in the container to optimize for your use case. An
-example would be if you wanted to run the API server and the job processor
-on different machines. You can achieve this easily with docker compose:
-
-```yaml
-version: '2'
-services:
-  talk-api:
-    image: coralproject/talk:1.5
-    command: cli serve
-    restart: always
-    ports:
-      - "5000:5000"
-    depends_on:
-      - mongo
-      - redis
-    environment:
-      - TALK_MONGO_URL=mongodb://mongo/talk
-      - TALK_REDIS_URL=redis://redis
-  talk-jobs:
-    image: coralproject/talk:1.5
-    command: cli jobs process
-    restart: always
-    ports:
-      - "5001:5000"
-    depends_on:
-      - mongo
-      - redis
-    environment:
-      - TALK_MONGO_URL=mongodb://mongo/talk
-      - TALK_REDIS_URL=redis://redis
-  mongo:
-    image: mongo:3.2
-    restart: always
-    volumes:
-      - mongo:/data/db
-  redis:
-    image: redis:3.2
-    restart: always
-    volumes:
-      - redis:/data
-volumes:
-  mongo:
-    external: false
-  redis:
-    external: false
-```
-
-Note that the only difference is in the `command` key. From this, you are able
-to discretely control which modules are running in order to have the maximum
-flexibility when managing your application.
-
-### Running
-
-If you're using docker compose:
-
-```bash
-# Start the services using compose
-docker-compose up -d
-```
-
-If you're using plain docker:
-
-```bash
-docker run -d -P coralproject/talk:latest
-```
-
-## Installation From Source
-
-This provides information on how to setup the application from source. Note that
-this is not recommended for production deploys, but will work for development
-and testing purposes.
-
-### Requirements
-
-There are some runtime requirements for running Talk from source:
-
-- [Node](https://nodejs.org/) ~7.8
-- [Yarn](https://yarnpkg.com/) ^0.22.0
-
-_Please be sure to check the versions of these requirements. Incorrect versions
-of these may lead to unexpected errors!_
-
-### Installing
-
-#### Download
-
-It is highly recommended that you download a released version as the code
-available in `master` may not be stable. You can download the latest release
-from the [releases page](https://github.com/coralproject/talk/releases).
-
-You can also clone the git repository via:
-
-```bash
-git clone https://github.com/coralproject/talk.git
-```
-
-#### Building
-
-We now have to install the dependencies and build the static assets.
-
-```bash
-# Install package dependancies
-yarn
-
-# Build static files
-yarn build
-```
-
-After you create/modify the `plugins.json` (refer to `PLUGINS.md` for plugin
-docs) file, you can re-run the following to install their dependencies:
-
-```bash
-# Reconcile plugins
-./bin/cli plugins reconcile
-
-# Build static files
-yarn build
-```
-
-### Running
-
-Refer to the `README.md` file for required configuration variables to add to the
-environment.
-
-You can start the server after configuring the server using the command:
-
-```bash
-yarn start
-```
-
-This will setup the server to serve everything on a single node.js process and
-is designed to be used in production.
-
-You can see other scripts we've made available by consulting the `package.json`
-file under the `scripts` key including:
-
-- `yarn test` run unit tests
-- `yarn e2e` run end to end tests
-- `yarn build-watch` watch for changes to client files and build static assets
-- `yarn dev-start` watch for changes to server files and reload the server while
-  also sourcing a `.env` file in your local directory for configuration
-
-# Setup
-
-Once you've installed Talk (either via Docker or source), you still need to
-setup the application. If you are unfamiliar with any terminology used in the
-setup process, refer to the `TERMINOLOGY.md` document.
-
-## Via Web
-
-If you want to perform your setup via the web, you can navigate to your
-installation of Talk at the path `/admin/install`. There you will be asked a
-series of questions for your installation.
-
-## Via CLI
-
-If you want to perform your setup through the terminal, you can simply run:
-
-```bash
-cli setup
-```
-
-And follow the instructions to perform initial setup and create your first user
-account.
-
-
-# Usage
-
-After setup is complete, you can then refer to the `/admin/configure` path to
-get the embed code that you can copy/paste onto your blog or website in order to
-start using Talk.
-
-_In order for the embed to work correctly, you will need to whitelist the domain
-that is allowed to embed your site on the `/admin/configure` page, failure to do
-so will result in the comment stream not loading._

PLUGINS.md

@@ -1,3 +0,0 @@
-# Talk Plugins
-
-Our documentation for Talk has moved! Utilize [this hyperlink](https://coralproject.github.io/talk/plugins.html) via click or tap to navigate your browser to the new location!

README.md

@@ -5,105 +5,21 @@ Online comments are broken. Our open-source Talk tool rethinks how moderation, c
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
 
-## Contributing to Talk
+## Important Links
 
-See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
+- Developer Documentation & Setup Guides: https://coralproject.github.io/talk/
 
-## Documentation
+- Pivotal Tracker Backlog & Release Schedule: https://www.pivotaltracker.com/n/projects/1863625
 
-### General
+## Learn More about Coral
 
-See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.html).
+- Community Forums: https://community.coralproject.net/
 
-### Plugins
+- Website: https://coralproject.net
 
-See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
+- Blog: https://blog.coralproject.net
 
-### Recipes
-
-Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
-
-## Usage
-
-### Installation
-
-To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md).
-
-To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
-
-### Configuration
-
-The Talk application looks for the following configuration values either as environment variables:
-
-- `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
-- `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
-- `TALK_ROOT_URL` (*required*) - root url of the installed application externally
-available in the format: `<scheme>://<host>` without the path.
-- `TALK_JWT_SECRET` (*required*) - a long and cryptographical secure random string which will be used to
-sign and verify tokens via a `HS256` algorithm.
-- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
-- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
-- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
-- `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
-  SMTP provider.
-- `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
-- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
-- `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
-- `TALK_SMTP_PORT` (*required for email*) - SMTP port.
-- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
-- `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
-- `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
-- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
-- `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
-
-Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
-alternative methods of loading configuration during development.
-
-### Running Migrations
-
-We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
-
-### Using Trust
-
-Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
-
-Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
-
-## Supported Browsers
-
-### Web
-
-- Chrome: latest 2 versions
-- Firefox: latest 2 versions, and most recent extended support version, if any
-- Safari: latest 2 versions
-- Internet Explorer: IE Edge, 11
-
-### iOS Devices
-
-- iPad
-- iPad Pro
-- iPhone 7 Plus
-- iPhone 7
-- iPhone 6 Plus
-- iPhone 6
-- iPhone 5
-
-### iOS Browsers
-
-- Chrome for iOS: latest version
-- Firefox for iOS: latest version
-- Safari for iOS: latest version
-
-### Android Devices
-
-- Galaxy S5
-- Nexus 5X
-- Nexus 6P
-
-### Android Browsers
-
-- Chrome for Android: latest version
-- Firefox for Android: latest version
+- Community Guides for Journalism: https://guides.coralproject.net/ 
 
 ## License
 

TERMINOLOGY.md

@@ -1,73 +0,0 @@
-# Product's Terminology
-
-This is a guide to have a common language to talk about "Talk".
-
-## Definitions
-
-* Site - a top level site, aka nytimes.com
-* Section - the section of a site, aka, Politics.
-* Subsection - the section of a site, aka, Politics.
-* Asset - An article/video/etc identified by URL.
-
-* Embed - Things we put on a asset: comment box, ToS, Stream, etc…
-* Stream - All the activity on a certain asset. Container for Comments, actions, user
-* Thread - defined by a parent and everything below. All replies to a comment and their replies, etc…
-* Comment - a kind of user-generated content submitted by a comment author
-  * A parent comment has replies to it
-  * A child comments is a reply to another comment
-  * A comment can be both a parent comment and a child of another comment
-  * A top-level comment is a comment that is not a reply to any other comment
-  * A nth-level comment refers to the number of replies away from the top-level comment
-
-* User - an item to represent a person using Talk. It could be a moderator, reader, etc.
-* User Roles:
-  * Active: some who takes action (logged in or not)
-  * Passive: some who just reads, no actions performed
-  * Comment Author: The user who wrote the comment
-  * Staff Member: someone who works for an organization (tagged for leverage in trust)
-  * Moderator: someone with the ability to access the moderation queue and perform moderation actions
-  * Administrator: has the ability to change the setup of their coral space
-* Public Profile: information about users shown in public
-* Private Profile: information about users shown only to user about themselves
-* Protected Profile: information about users that only moderators and admins can see
-
-* Queue - Group of items based on a query, aka - moderation queue
-* Target - The item/s on which an action is performed
-
-##  Actions
-
-Actions are performed by users on items. Actions themselves are items. This requires two relationships: action on item, and user performs action.
-
-### Flag
-* A Flagger(user) performs a Flag
-* A Flag is performed on a Comment or a username or profile content
-
-
-## Moderation Actions and Status
-
-Comments contain a field `status`. As moderation actions are peformed, the status changes.
-
-* Initial status is empty.
-* When a moderator Approves, the status is set to 'approved'.
-* When a moderator Rejects, the status is set to 'reject'.
-
-### Pre and post moderation
-
-Comments can be set to be premoderated or postmoderated. 
-
-Premoderation means that moderation has to occur _before_ a comment is shown on the site:
-
-* New comments are shown in the moderator queues immediately. 
-* The are not shown to users until (aka in streams) until they are approved by a moderator.
-
-Postmoderation means that comments appear on the site _before_ any moderation action is taken.
-
-* New comments appear in comment streams immediately.
-* New comments do not appear in moderation queues unless they are flagged by other users.
-
-### Word lists
-
-* Banned words - words that the site never allows in a comment
-* Suspect words - words whose usage needs to be approved by a moderator before being shown in the stream
-* Approved words - words that are usually Banned or Suspect sitewide, but approved for use in a specific article stream
-

app.js

@@ -3,69 +3,42 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
-const authentication = require('./middleware/authentication');
-const {passport} = require('./services/passport');
-const plugins = require('./services/plugins');
-const i18n = require('./services/i18n');
-const enabled = require('debug').enabled;
-const errors = require('./errors');
-const {createGraphOptions} = require('./graph');
-const apollo = require('graphql-server-express');
-const accepts = require('accepts');
 const compression = require('compression');
 const cookieParser = require('cookie-parser');
+const {BASE_URL, BASE_PATH, MOUNT_PATH} = require('./url');
+const routes = require('./routes');
+const debug = require('debug')('talk:app');
 
 const app = express();
 
-// Middleware declarations.
+//==============================================================================
+// APPLICATION WIDE MIDDLEWARE
+//==============================================================================
 
 // Add the logging middleware only if we aren't testing.
-if (app.get('env') !== 'test') {
+if (process.env.NODE_ENV !== 'test') {
   app.use(morgan('dev'));
 }
 
-//==============================================================================
-// APP MIDDLEWARE
-//==============================================================================
-
+// 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);
 
-// We disable frameward on helmet to allow crossdomain injection of the embed
+// Enable a suite of security good practices through helmet. We disable
+// frameguard to allow crossdomain injection of the embed.
 app.use(helmet({
-  frameguard: false
+  frameguard: false,
 }));
+
+// 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());
 
-//==============================================================================
-// STATIC FILES
-//==============================================================================
-
-// If the application is in production mode, then add gzip rewriting for the
-// content.
-if (process.env.NODE_ENV === 'production') {
-  app.get('*.js', (req, res, next) => {
-    const accept = accepts(req);
-    if (accept.encoding(['gzip']) === 'gzip') {
-
-      // Adjsut the headers on the request by adding a content type header
-      // because express won't be able to detect the mime-type with the .gz
-      // extension and we need to decalre support for the gzip encoding.
-      res.set('Content-Type', 'application/javascript');
-      res.set('Content-Encoding', 'gzip');
-
-      // Rewrite the url so that the gzip version will be served instead.
-      req.url = `${req.url}.gz`;
-    }
-
-    next();
-  });
-}
-
-app.use('/client', express.static(path.join(__dirname, 'dist')));
-app.use('/public', express.static(path.join(__dirname, 'public')));
-
 //==============================================================================
 // VIEW CONFIGURATION
 //==============================================================================
@@ -73,105 +46,19 @@ app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
-//==============================================================================
-// PASSPORT MIDDLEWARE
-//==============================================================================
-
-const passportDebug = require('debug')('talk:passport');
-
-// Install the passport plugins.
-plugins.get('server', 'passport').forEach((plugin) => {
-  passportDebug(`added plugin '${plugin.plugin.name}'`);
-
-  // Pass the passport.js instance to the plugin to allow it to inject it's
-  // functionality.
-  plugin.passport(passport);
-});
-
-// Setup the PassportJS Middleware.
-app.use(passport.initialize());
-
-// Attach the authentication middleware, this will be responsible for decoding
-// (if present) the JWT on the request.
-app.use('/api', authentication);
-
-//==============================================================================
-// GraphQL Router
-//==============================================================================
-
-// GraphQL endpoint.
-app.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
-
-// Only include the graphiql tool if we aren't in production mode.
-if (app.get('env') !== 'production') {
-
-  // Interactive graphiql interface.
-  app.use('/api/v1/graph/iql', (req, res) => {
-    res.render('graphiql', {
-      endpointURL: '/api/v1/graph/ql'
-    });
-  });
-
-  // GraphQL documention.
-  app.get('/admin/docs', (req, res) => {
-    res.render('admin/docs');
-  });
-
-}
-
 //==============================================================================
 // ROUTES
 //==============================================================================
 
-app.use('/', require('./routes'));
+// Apply the BASE_PATH, BASE_URL, and MOUNT_PATH on the app.locals, which will
+// make them available on the templates and the routers.
+app.locals.BASE_URL = BASE_URL;
+app.locals.BASE_PATH = BASE_PATH;
+app.locals.MOUNT_PATH = MOUNT_PATH;
 
-//==============================================================================
-// ERROR HANDLING
-//==============================================================================
+debug(`mounting routes on the ${MOUNT_PATH} path`);
 
-// Catch 404 and forward to error handler.
-app.use((req, res, next) => {
-  next(errors.ErrNotFound);
-});
-
-// General error handler. Respond with the message and error if we have it while
-// returning a status code that makes sense.
-app.use('/api', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    if (app.get('env') !== 'test' || enabled('talk:errors')) {
-      console.error(err);
-    }
-  }
-
-  if (err instanceof errors.APIError) {
-    res.status(err.status).json({
-      message: err.message,
-      error: err
-    });
-  } else {
-    res.status(500).json({});
-  }
-});
-
-app.use('/', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    console.error(err);
-  }
-
-  i18n.init(req);
-  
-  if (err instanceof errors.APIError) {
-    res.status(err.status);
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  } else {
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  }
-});
+// Actually apply the routes.
+app.use(MOUNT_PATH, routes);
 
 module.exports = app;

bin/cli-plugins

@@ -274,7 +274,7 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
 }
 
 async function createSeedPlugin() {
-  const pluginsDir = path.join(__dirname, 'plugins');
+  const pluginsDir = path.resolve(__dirname, '..', 'plugins');
 
   function pluginNameExists(pluginName) {
     const pluginNames = fs.readdirSync(pluginsDir);
@@ -321,7 +321,7 @@ async function createSeedPlugin() {
   // Creating plugin seed
   //==============================================================================
 
-  const seedPlugin = path.join(__dirname, 'bin/templates/plugin');
+  const seedPlugin = path.join(__dirname, 'templates/plugin');
   const newPluginPath = path.join(pluginsDir, answers.pluginName);
 
   if (fs.existsSync(seedPlugin)) {
@@ -355,7 +355,7 @@ async function createSeedPlugin() {
 
     // Let's add this to the plugins.json
     if (answers.addPluginsJson) {
-      const pluginsJson = path.join(dir, 'plugins.json');
+      const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
 
       fs.readJson(pluginsJson)
         .then((j) => {

bin/cli-serve

@@ -12,6 +12,7 @@ const SetupService = require('../services/setup');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
+const cache = require('../services/cache');
 const {createSubscriptionManager} = require('../graph/subscriptions');
 const {
   PORT
@@ -80,12 +81,16 @@ function normalizePort(val) {
  * Event listener for HTTP server "listening" event.
  */
 
-function onListening() {
+async function onListening() {
+
+  // Start the cache instance.
+  await cache.init();
+
   let addr = server.address();
   let bind = typeof addr === 'string'
     ? `pipe ${addr}`
     : `port ${addr.port}`;
-  console.log(`API Server Listening on ${bind}`);
+  debug(`API Server Listening on ${bind}`);
 }
 
 /**
@@ -135,18 +140,21 @@ async function startApp(program) {
   /**
   * Listen on provided port, on all network interfaces.
   */
+  server.on('error', onError);
+  server.on('listening', onListening);
+  server.on('listening', () => {
+
+  });
   server.listen(port, () => {
 
     // Mount the websocket server if requested.
     if (program.websockets) {
-      console.log(`Websocket Server Listening on ${port}`);
+      debug(`Websocket Server Listening on ${port}`);
 
       // Mount the subscriptions server on the application server.
       createSubscriptionManager(server);
     }
   });
-  server.on('error', onError);
-  server.on('listening', onListening);
 }
 
 //==============================================================================

bin/cli-setup

@@ -94,7 +94,7 @@ const performSetup = async () => {
       name: 'requireEmailConfirmation',
       default: settings.requireEmailConfirmation,
       message: 'Should emails always be confirmed'
-    }
+    },
   ]);
 
   // Update the settings that were changed.
@@ -104,6 +104,32 @@ const performSetup = async () => {
     }
   });
 
+  answers = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'inputWhitelistedDomains',
+      default: true,
+      message: 'Would you like to specify a whitelisted domain'
+    },
+    {
+      type: 'input',
+      name: 'whitelistedDomain',
+      message: 'Whitelisted Domain',
+      when: ({inputWhitelistedDomains}) => inputWhitelistedDomains,
+      validate: (input) => {
+        if (input && input.length > 0) {
+          return true;
+        }
+
+        return 'Whitelisted Domain cannot be empty.';
+      }
+    }
+  ]);
+
+  if (answers.inputWhitelistedDomains) {
+    settings.domains.whitelist = [answers.whitelistedDomain];
+  }
+
   console.log('\nWe\'ll ask you some questions about your first admin user.\n');
 
   let user = await inquirer.prompt([
@@ -147,7 +173,11 @@ const performSetup = async () => {
       name: 'confirmPassword',
       message: 'Confirm Password',
       type: 'password',
-      filter: (confirmPassword) => {
+      filter: (confirmPassword, {password}) => {
+        if (password !== confirmPassword) {
+          return Promise.reject(new Error('Passwords do not match'));
+        }
+
         return UsersService
           .isValidPassword(confirmPassword)
           .catch((err) => {
@@ -157,10 +187,6 @@ const performSetup = async () => {
     },
   ]);
 
-  if (user.password !== user.confirmPassword) {
-    return Promise.reject(new Error('Passwords do not match'));
-  }
-
   let {user: newUser} = await SetupService.setup({
     settings: settings.toObject(),
     user: {

bin/templates/plugin/client/translations.yml

@@ -4,11 +4,11 @@
 #
 #  ```
 #   en:
-#    coral-plugin-respect:
+#    talk-plugin-respect:
 #     respect: Respect
 #     respected: Respected
 #   es:
-#    coral-plugin-respect:
+#    talk-plugin-respect:
 #     respect: Respetar
 #     respected: Respetado
 #  ```

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.9
+    version: 8
   services:
     - docker
     - redis
@@ -21,9 +21,8 @@ dependencies:
 
     # Install node dependencies.
     - yarn --version
+    - yarn global add node-gyp --force
     - yarn
-  cache_directories:
-    - ~/.cache/yarn
   post:
     # Build the static assets.
     - yarn build

client/.babelrc

@@ -11,4 +11,4 @@
     "transform-async-to-generator",
     "transform-react-jsx"
   ]
-}
+}

client/coral-admin/src/AppRouter.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, browserHistory, Redirect} from 'react-router';
+import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
+import {history} from 'coral-framework/helpers/router';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
@@ -14,7 +15,7 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={Install}/>
     <Route path='/admin' component={Layout}>
-      <IndexRedirect to='/admin/moderate/all' />
+      <IndexRedirect to='/admin/moderate' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
@@ -34,28 +35,18 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
-        <Route path='all' components={Moderation}>
+        <IndexRoute components={Moderation} />
+
+        <Route path=':tabOrId' components={Moderation} />
+
+        <Route path=':tab' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='accepted' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='premod' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='rejected' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='flagged' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Redirect from=':id' to='all/:id' />
-        <IndexRedirect to='all' />
       </Route>
     </Route>
   </div>
 );
 
-const AppRouter = () => <Router history={browserHistory} routes={routes} />;
+const AppRouter = () => <Router history={history} routes={routes}/>;
 
 export default AppRouter;

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

@@ -35,7 +35,7 @@ export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filte
 // Update an asset state
 // Get comments to fill each of the three lists on the mod queue
 export const updateAssetState = (id, closedAt) => (dispatch) => {
-  dispatch({type: UPDATE_ASSET_STATE_REQUEST});
+  dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
   return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
     .then(() => dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
     .catch((error) => {

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

@@ -93,21 +93,21 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const settingsFormData = getState().install.toJS().data.settings;
+  const settingsFormData = getState().install.data.settings;
   validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const submitUser = () => (dispatch, getState) => {
-  const userFormData = getState().install.toJS().data.user;
+  const userFormData = getState().install.data.user;
   validation(userFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const finishInstall = () => (dispatch, getState) => {
-  const data = getState().install.toJS().data;
+  const data = getState().install.data;
   dispatch(installRequest());
   return coralApi('/setup', {method: 'POST', body: data})
     .then(() => {

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

@@ -15,33 +15,11 @@ export const hideShortcutsNote = () => {
   return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
 
-export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
-export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
-
 export const setSortOrder = (order) => ({
   type: actions.SET_SORT_ORDER,
   order
 });
 
-export const changeUserDetailStatuses = (tab) => {
-  let statuses;
-  if (tab === 'all') {
-    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
-  } else if (tab === 'rejected') {
-    statuses = ['REJECTED'];
-  }
-  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
-};
-
-export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
-
-export const toggleSelectCommentInUserDetail = (id, active) => {
-  return {
-    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
-    id
-  };
-};
-
 export const toggleStorySearch = (active) => ({
   type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
 });

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

@@ -42,7 +42,7 @@ export const updateDomainlist = (listName, list) => {
 };
 
 export const saveSettingsToServer = () => (dispatch, getState) => {
-  let settings = getState().settings.toJS();
+  let settings = getState().settings;
   if (settings.charCount) {
     settings.charCount = parseInt(settings.charCount);
   }

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

@@ -0,0 +1,24 @@
+import * as actions from 'constants/userDetail';
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};
+

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

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 

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

@@ -0,0 +1,24 @@
+.bodyLeave {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  background-color: white;
+  opacity: 1.0;
+  transition: background 400ms, opacity 800ms 1600ms;
+  pointer-events: none;
+}
+
+.bodyLeaveActive {
+  opacity: 0;
+  background-color: rgba(255,255,0, 0.2);
+}
+
+.bodyEnter {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bodyEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms 2400ms;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import {murmur3} from 'murmurhash-js';
+import {CSSTransitionGroup} from 'react-transition-group';
+import styles from './CommentAnimatedEdit.css';
+
+export default ({children, body}) => {
+  return (
+    <CSSTransitionGroup
+      component={'div'}
+      transitionName={{
+        enter: styles.bodyEnter,
+        enterActive: styles.bodyEnterActive,
+        leave: styles.bodyLeave,
+        leaveActive: styles.bodyLeaveActive,
+      }}
+      transitionEnter={true}
+      transitionLeave={true}
+      transitionEnterTimeout={3600}
+      transitionLeaveTimeout={2800}
+    >
+      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
+    </CSSTransitionGroup>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Highlighter from 'react-highlight-words';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({suspectWords, bannedWords, body, ...rest}) => {
+
+  const links = linkify.getMatches(body);
+  const linkText = links ? links.map((link) => link.raw) : [];
+
+  const searchWords = [
+    ...suspectWords,
+    ...bannedWords,
+    ...linkText
+  ];
+
+  return (
+    <Highlighter
+      {...rest}
+      searchWords={searchWords}
+      textToHighlight={body}
+    />
+  );
+};

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

@@ -1,22 +1,20 @@
 .commentType {
-  position: absolute;
-  right: 15px;
-  top: 11px;
+  display: inline-block;
   color: white;
   background: grey;
-  height: 32px;
   box-sizing: border-box;
-  line-height: 29px;
-  padding: 2px 8px 2px 26px;
+  padding: 0px 5px;
   border-radius: 2px;
   font-size: 12px;
-
-  i {
+  height: 24px;
+  letter-spacing: 0.4px;
+  margin-bottom: 1px;
+  
+  > i {
     font-size: 14px;
-    position: absolute;
-    left: 6px;
-    top: 8px;
+    vertical-align: text-top;
     margin: 0;
+    margin-right: 4px;
   }
 
   &.premod {

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

@@ -1,12 +1,13 @@
 import React, {PropTypes} from 'react';
 import styles from './CommentType.css';
 import {Icon} from 'coral-ui';
+import cn from 'classnames';
 
 const CommentType = (props) => {
   const typeData = getTypeData(props.type);
 
   return (
-    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
+    <span className={cn(styles.commentType, styles[typeData.className], props.className)}>
       <Icon name={typeData.icon}/>{typeData.text}
     </span>
   );

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

@@ -1,6 +1,6 @@
 .flagBox {
   border-top: 1px solid rgba(66, 66, 66, 0.12);
-
+  margin-top: 10px;
   .container {
     padding: 0 14px;
   }

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

@@ -61,9 +61,11 @@ class FlagBox extends Component {
                       <ul>
                         {actionList.map((action, j) =>
                           <li key={`${i}_${j}`} className={styles.subDetail}>
-                            <a className={styles.username} onClick={viewUserDetail}>
-                              {action.user.username}
-                            </a>
+                            {action.user &&
+                              <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
+                                {action.user.username}
+                              </a>
+                            }
                             {action.message}
                           </li>
                         )}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({text, children}) => {
+  const hasLinks = !!linkify.getMatches(text);
+
+  if (!hasLinks) {
+    return null;
+  }
+
+  return React.Children.only(children);
+};

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

@@ -0,0 +1,21 @@
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
+}
+
+

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

@@ -1,9 +1,10 @@
 import React, {PropTypes} from 'react';
 import {Button} from 'coral-ui';
-import styles from './styles.css';
+import styles from './LoadMore.css';
+import cn from 'classnames';
 
-const LoadMore = ({loadMore, showLoadMore}) =>
-  <div className={styles.loadMoreContainer}>
+const LoadMore = ({loadMore, showLoadMore, className, ...rest}) =>
+  <div {...rest} className={cn(className, styles.loadMoreContainer)}>
     {
       showLoadMore && <Button
         className={styles.loadMore}

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

@@ -186,13 +186,11 @@
 .actionButton {
   transform: scale(.8);
   margin: 0;
-  width: 140px;
 }
 
 .minimal {
   width: 45px;
   min-width: 0;
-  float: left;
 }
 
 .approve__active {

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

@@ -0,0 +1,144 @@
+.copyButton {
+  background-color: white;
+  border: solid 1px;
+  padding: 2px 6px;
+  height: auto;
+  line-height: initial;
+  min-width: auto;
+  letter-spacing: normal;
+  font-size: 0.9em;
+  margin-left: 10px;
+}
+
+.userDetailList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.userDetailItem {
+  margin: 0 5px;
+  font-weight: 500;
+}
+
+.stats {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  margin: 15px 0 5px;
+  color: #595959;
+}
+
+.stat {
+  margin-right: 20px;
+}
+
+.stat:last-child {
+  margin-right: 0px;
+}
+
+.statItem, .statReportResult {
+  padding: 3px 5px;
+  background-color: #D8D8D8;
+  border-radius: 3px;
+  font-weight: 500;
+  display: block;
+  font-size: 0.9em;
+  line-height: normal;
+  letter-spacing: 0.4px;
+  min-width: 60px; 
+}
+
+.statResult {
+  font-size: 1.5em;
+  padding: 5px 0;
+  display: inline-block;
+}
+
+.statReportResult {
+  color: white;
+  margin: 5px 0;
+  font-weight: 400;
+}
+
+.statReportResult.reliable {
+  background-color: #749C48;
+}
+
+.statReportResult.neutral {
+  background-color: #616161;
+}
+
+.statReportResult.unreliable {
+  background-color: #F44336;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.small {
+  color: #888888;
+  font-size: 0.9em;
+  letter-spacing: 0.4px;
+}
+
+.profileEmail {
+  border: none;
+  background-color: transparent;
+  font-size: 16px;
+  outline: none;
+  width: calc(100% - 90px);
+}
+
+.commentStatuses {
+  padding: 10px 0 0 0;
+  margin: 0;
+  height: 52px;
+  list-style: none;
+  box-sizing: border-box;
+
+  li {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    padding: 0 10px;
+  }
+}
+
+.active {
+  font-weight: bold;
+  border-bottom: 3px solid #F36451;
+}
+
+.bulkActionGroup {
+  height: 52px;
+  background-color: #efefef;
+
+  i {
+    margin-right: 0;
+  }
+
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+}
+
+.loadMore > button {
+  background-color: #696969;
+
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
+}

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comment from '../containers/UserDetailComment';
+import styles from './UserDetail.css';
+import {Icon, Button, Drawer, Spinner} from 'coral-ui';
+import {Slot} from 'coral-framework/components';
+import ButtonCopyToClipboard from './ButtonCopyToClipboard';
+import {actionsMap} from '../utils/moderationQueueActionsMap';
+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';
+
+export default class UserDetail extends React.Component {
+
+  static propTypes = {
+    userId: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+    bannedWords: PropTypes.array.isRequired,
+    suspectWords: PropTypes.array.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,
+  }
+
+  rejectThenReload = (info) => {
+    this.props.rejectComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  acceptThenReload = (info) => {
+    this.props.acceptComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  showAll = () => {
+    this.props.changeStatus('all');
+  }
+
+  showRejected = () => {
+    this.props.changeStatus('rejected');
+  }
+
+  renderLoading() {
+    return (
+      <ClickOutside onClickOutside={this.props.hideUserDetail}>
+        <Drawer onClose={this.props.hideUserDetail}>
+          <Spinner />
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  renderLoaded() {
+    const {
+      root,
+      root: {
+        user,
+        totalComments,
+        rejectedComments,
+        comments: {nodes, hasNextPage}
+      },
+      activeTab,
+      selectedCommentIds,
+      bannedWords,
+      suspectWords,
+      toggleSelect,
+      bulkAccept,
+      bulkReject,
+      hideUserDetail,
+      viewUserDetail,
+      loadMore,
+    } = this.props;
+
+    let rejectedPercent = (rejectedComments / totalComments) * 100;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
+    return (
+      <ClickOutside onClickOutside={hideUserDetail}>
+        <Drawer onClose={hideUserDetail}>
+          <h3>{user.username}</h3>
+
+          <div>
+            <ul className={styles.userDetailList}>
+              <li>
+                <Icon name="assignment_ind"/>
+                <span className={styles.userDetailItem}>Member Since:</span>
+                {new Date(user.created_at).toLocaleString()}
+              </li>
+
+              {user.profiles.map(({id}) =>
+                <li key={id}>
+                  <Icon name="email"/>
+                  <span className={styles.userDetailItem}>Email:</span>
+                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                </li>
+              )}
+            </ul>
+
+            <ul className={styles.stats}>
+              <li className={styles.stat}>
+                <span className={styles.statItem}> Total Comments </span>
+                <spam className={styles.statResult}> {totalComments} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reject Rate </spam>
+                <spam className={styles.statResult}> {`${(rejectedPercent).toFixed(1)}%`} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reports </spam>
+                <spam className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                  {capitalize(getReliability(user.reliable.flagger))}
+                </spam>
+              </li>
+            </ul>
+
+            <p className={styles.small}>
+              Data represents the last six months of activity
+            </p>
+          </div>
+
+          <Slot
+            fill="userProfile"
+            data={this.props.data}
+            queryData={root, user}
+          />
+
+          <hr/>
+          {
+            selectedCommentIds.length === 0
+            ? (
+              <ul className={styles.commentStatuses}>
+                <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+              </ul>
+            )
+            : (
+              <div className={styles.bulkActionGroup}>
+                <Button
+                  onClick={bulkAccept}
+                  className={styles.bulkAction}
+                  cStyle='approve'
+                  icon='done'>
+                </Button>
+                <Button
+                  onClick={bulkReject}
+                  className={styles.bulkAction}
+                  cStyle='reject'
+                  icon='close'>
+                </Button>
+                {`${selectedCommentIds.length} comments selected`}
+              </div>
+            )
+          }
+
+          <div>
+            {
+              nodes.map((comment) => {
+                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+                return <Comment
+                  key={comment.id}
+                  user={user}
+                  comment={comment}
+                  selected={false}
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  actions={actionsMap[status]}
+                  acceptComment={this.acceptThenReload}
+                  rejectComment={this.rejectThenReload}
+                  selected={selected}
+                  toggleSelect={toggleSelect}
+                  viewUserDetail={viewUserDetail}
+                />;
+              })
+            }
+          </div>
+          <LoadMore
+            className={styles.loadMore}
+            loadMore={loadMore}
+            showLoadMore={hasNextPage}
+            />
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  render () {
+    if (this.props.loading) {
+      return this.renderLoading();
+    }
+    return this.renderLoaded();
+  }
+}

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

@@ -0,0 +1,132 @@
+.root {
+  display: block;
+  margin: 0;
+  border-bottom: 1px solid #e0e0e0;
+  width: 100%;
+  transition: all 200ms;
+  padding: 10px 0px;
+  min-height: 0;
+}
+
+.root:last-child {
+  border: 0;
+}
+
+.rootSelected {
+  background-color: #ecf4ff;
+}
+
+.container {
+  padding: 0px 14px;
+}
+
+.story {
+  font-size: 14px;
+  margin: 10px 0;
+  font-weight: 500;
+  line-height: 1.2;
+  max-width: 500px;
+}
+
+.story > a {
+  display: inline-block;
+  color: #063b9a;
+  text-decoration: none;
+  font-weight: 500;
+  letter-spacing: .5px;
+  margin-left: 10px;
+  font-size: 13px;
+  margin-left: 5px;
+  padding-bottom: 0px;
+  border-bottom: solid 1px;
+  line-height: 16px;
+}
+
+.bodyContainer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 300;
+  margin-bottom: 8px;
+}
+
+.header {
+  position: relative;
+}
+
+.commentType {
+  position: absolute;
+  right: 0px;
+}
+
+.created {
+  padding: 5px;
+  color: #262626;
+  font-size: 14px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.body {
+  margin-top: 0px;
+  flex: 1;
+  color: black;
+  max-width: 500px;
+  word-wrap: break-word;
+  font-weight: 300;
+  font-size: 16px;
+  max-width: 360px;
+}
+
+.sideActions {
+}
+
+.editedMarker {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bulkSelectInput {
+  cursor: pointer;
+}
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  > i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  > i {
+    margin-right: 5px;
+  }
+}

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

@@ -0,0 +1,151 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+
+import {Icon} from 'coral-ui';
+import FlagBox from './FlagBox';
+import styles from './UserDetailComment.css';
+import CommentType from './CommentType';
+import {getActionSummary} from 'coral-framework/utils';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
+import IfHasLink from 'coral-admin/src/components/IfHasLink';
+import cn from 'classnames';
+import {getCommentType} from 'coral-admin/src/utils/comment';
+import CommentAnimatedEdit from './CommentAnimatedEdit';
+
+import t, {timeago} from 'coral-framework/services/i18n';
+
+class UserDetailComment extends React.Component {
+
+  render() {
+    const {
+      actions = [],
+      comment,
+      viewUserDetail,
+      suspectWords,
+      bannedWords,
+      selected,
+      toggleSelect,
+      className,
+      user,
+      ...props
+    } = this.props;
+
+    const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
+    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
+    const commentType = getCommentType(comment);
+
+    return (
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+      >
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <input
+              className={styles.bulkSelectInput}
+              type='checkbox'
+              value={comment.id}
+              checked={selected}
+              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+            <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
+            }
+            <CommentType type={commentType} className={styles.commentType}/>
+          </div>
+          <div className={styles.story}>
+            Story: {comment.asset.title}
+            {<Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+          </div>
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.bodyContainer}>
+              <p className={styles.body}>
+                <CommentBodyHighlighter
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  body={comment.body}
+                />
+                {' '}
+                <a
+                  className={styles.external}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
+                  target="_blank"
+                >
+                  <Icon name="open_in_new" /> {t('comment.view_context')}
+                </a>
+              </p>
+              <div className={styles.sideActions}>
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
+                <div className={styles.actions}>
+                  {actions.map((action, i) => {
+                    const active =
+                      (action === 'REJECT' && comment.status === 'REJECTED') ||
+                      (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                    return (
+                      <ActionButton
+                        minimal={true}
+                        key={i}
+                        type={action}
+                        user={user}
+                        status={comment.status}
+                        active={active}
+                        acceptComment={() =>
+                          (comment.status === 'ACCEPTED'
+                            ? null
+                            : props.acceptComment({commentId: comment.id}))}
+                        rejectComment={() =>
+                          (comment.status === 'REJECTED'
+                            ? null
+                            : props.rejectComment({commentId: comment.id}))}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </CommentAnimatedEdit>
+        </div>
+        {flagActions && flagActions.length
+          ? <FlagBox
+              actions={flagActions}
+              actionSummaries={flagActionSummaries}
+              viewUserDetail={viewUserDetail}
+            />
+          : null}
+      </li>
+    );
+  }
+}
+
+UserDetailComment.propTypes = {
+  user: PropTypes.object.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  toggleSelect: PropTypes.func,
+  comment: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    action_summaries: PropTypes.array,
+    actions: PropTypes.array,
+    created_at: PropTypes.string.isRequired,
+    asset: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+      id: PropTypes.string
+    })
+  })
+};
+
+export default UserDetailComment;

client/coral-admin/src/components/ui/Logo.css

@@ -10,16 +10,18 @@
 .logo span {
   display: inline-block;
   margin-left: 10px;
-  font-size: 18px;
+  font-size: 26px;
   vertical-align: middle;
   font-weight: 500;
+  color: white;
 }
 
 .logo {
-  background: #E5E5E5;
+  background: #696969;
   height: 100%;
   width: 128px;
   z-index: 10;
+  border-right: 1px #757575 solid;
 }
 
 .base {

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

@@ -1,13 +1,7 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
-export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
-export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
-export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
-export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
-export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
 export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
 export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';

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

@@ -0,0 +1,7 @@
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
+

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

@@ -10,6 +10,7 @@ import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
+import UserDetail from 'coral-admin/src/containers/UserDetail';
 
 class LayoutContainer extends Component {
   componentWillMount() {
@@ -57,6 +58,7 @@ class LayoutContainer extends Component {
         >
         <BanUserDialog />
         <SuspendUserDialog />
+        <UserDetail />
         {this.props.children}
         </Layout>
       );
@@ -72,10 +74,8 @@ class LayoutContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
-  TALK_RECAPTCHA_PUBLIC: state.config
-    .get('data')
-    .get('TALK_RECAPTCHA_PUBLIC', null)
+  auth: state.auth,
+  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -0,0 +1,193 @@
+import React from 'react';
+import {compose, gql} from 'react-apollo';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import UserDetail from '../components/UserDetail';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
+import {
+  viewUserDetail,
+  hideUserDetail,
+  changeUserDetailStatuses,
+  clearUserDetailSelections,
+  toggleSelectCommentInUserDetail,
+} from 'coral-admin/src/actions/userDetail';
+import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import UserDetailComment from './UserDetailComment';
+import update from 'immutability-helper';
+
+const commentConnectionFragment = gql`
+  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+    nodes {
+      ...${getDefinitionName(UserDetailComment.fragments.comment)}
+    }
+    hasNextPage
+    startCursor
+    endCursor
+  }
+  ${UserDetailComment.fragments.comment}
+`;
+
+const slots = [
+  'userProfile',
+];
+
+class UserDetailContainer extends React.Component {
+  isLoadingMore = false;
+
+  // status can be 'ACCEPTED' or 'REJECTED'
+  bulkSetCommentStatus = (status) => {
+    const changes = this.props.selectedCommentIds.map((commentId) => {
+      return this.props.setCommentStatus({commentId, status});
+    });
+
+    Promise.all(changes).then(() => {
+      this.props.clearUserDetailSelections(); // un-select everything
+    });
+  }
+
+  bulkReject = () => {
+    this.bulkSetCommentStatus('REJECTED');
+  }
+
+  bulkAccept = () => {
+    this.bulkSetCommentStatus('ACCEPTED');
+  }
+
+  acceptComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
+  }
+
+  rejectComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
+  }
+
+  loadMore = () => {
+    if (this.isLoadingMore) {
+      return;
+    }
+
+    this.isLoadingMore = true;
+    const variables = {
+      limit: 10,
+      cursor: this.props.root.comments.endCursor,
+      author_id: this.props.data.variables.author_id,
+      statuses: this.props.data.variables.statuses,
+    };
+    this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables,
+      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+        return update(prev, {
+          comments: {
+            nodes: {$push: comments.nodes},
+            hasNextPage: {$set: comments.hasNextPage},
+            startCursor: {$set: comments.startCursor},
+            endCursor: {$set: comments.endCursor},
+          },
+        });
+      }
+    })
+    .then(() => {
+      this.isLoadingMore = false;
+    })
+    .catch((err) => {
+      this.isLoadingMore = false;
+      throw err;
+    });
+  };
+
+  componentWillReceiveProps(next) {
+    if (this.props.userId === null && next.userId) {
+      next.data.refetch();
+    }
+  }
+
+  render () {
+    if (!this.props.userId) {
+      return null;
+    }
+
+    const loading = this.props.data.loading;
+
+    return <UserDetail
+      bulkReject={this.bulkReject}
+      bulkAccept={this.bulkAccept}
+      changeStatus={this.props.changeUserDetailStatuses}
+      toggleSelect={this.props.toggleSelectCommentInUserDetail}
+      acceptComment={this.acceptComment}
+      rejectComment={this.rejectComment}
+      loading={loading}
+      loadMore={this.loadMore}
+      {...this.props} />;
+  }
+}
+
+const LOAD_MORE_QUERY = gql`
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
+    comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+  }
+  ${commentConnectionFragment}
+`;
+
+export const withUserDetailQuery = withQuery(gql`
+  query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
+    user(id: $author_id) {
+      id
+      username
+      created_at
+      profiles {
+        id
+        provider
+      }
+      reliable {
+        flagger
+      }
+      ${getSlotFragmentSpreads(slots, 'user')}
+    }
+    totalComments: commentCount(query: {author_id: $author_id})
+    rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
+    comments: comments(query: {
+      author_id: $author_id,
+      statuses: $statuses
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+    ${getSlotFragmentSpreads(slots, 'root')}
+  }
+  ${commentConnectionFragment}
+`, {
+  options: ({userId, statuses}) => {
+    return {
+      variables: {author_id: userId, statuses}
+    };
+  },
+  skip: (ownProps) => !ownProps.userId,
+});
+
+const mapStateToProps = (state) => ({
+  userId: state.userDetail.userId,
+  selectedCommentIds: state.userDetail.selectedCommentIds,
+  statuses: state.userDetail.statuses,
+  activeTab: state.userDetail.activeTab,
+  bannedWords: state.settings.wordlist.banned,
+  suspectWords: state.settings.wordlist.suspect,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  ...bindActionCreators({
+    changeUserDetailStatuses,
+    clearUserDetailSelections,
+    toggleSelectCommentInUserDetail,
+    viewUserDetail,
+    hideUserDetail,
+  }, dispatch)
+});
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withUserDetailQuery,
+  withSetCommentStatus,
+)(UserDetailContainer);

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

@@ -0,0 +1,39 @@
+import {gql} from 'react-apollo';
+import UserDetailComment from '../components/UserDetailComment';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+export default withFragments({
+  comment: gql`
+    fragment CoralAdmin_UserDetail_comment on Comment {
+      id
+      body
+      created_at
+      status
+      asset {
+        id
+        title
+        url
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+      actions {
+        ... on FlagAction {
+          id
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      editing {
+        edited
+      }
+    }
+  `
+})(UserDetailComment);

client/coral-admin/src/index.js

@@ -2,8 +2,10 @@ import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
 import smoothscroll from 'smoothscroll-polyfill';
+import EventEmitter from 'eventemitter2';
+import EventEmitterProvider from 'coral-framework/components/EventEmitterProvider';
 
-import {getClient} from './services/client';
+import {getClient} from 'coral-framework/services/client';
 import store from './services/store';
 
 import App from './components/App';
@@ -12,13 +14,19 @@ import 'react-mdl/extra/material.js';
 import './graphql';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 
+const eventEmitter = new EventEmitter();
+
+// TODO: pass redux actions through the emitter.
+
 loadPluginsTranslations();
 injectPluginsReducers();
 smoothscroll.polyfill();
 
 render(
-  <ApolloProvider client={getClient()} store={store}>
-    <App />
-  </ApolloProvider>
+  <EventEmitterProvider eventEmitter={eventEmitter}>
+    <ApolloProvider client={getClient()} store={store}>
+      <App />
+    </ApolloProvider>
+  </EventEmitterProvider>
   , document.querySelector('#root')
 );

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

@@ -1,35 +1,40 @@
-import {Map, List, fromJS} from 'immutable';
 import * as actions from '../constants/assets';
+import update from 'immutability-helper';
 
-const initialState = Map({
-  byId: Map(),
-  ids: List(),
-  assets: List()
-});
+const initialState = {
+  byId: {},
+  ids: [],
+  assets: []
+};
 
 export default function assets (state = initialState, action) {
   switch (action.type) {
-  case actions.FETCH_ASSETS_SUCCESS:
-    return replaceAssets(action, state);
+  case actions.FETCH_ASSETS_SUCCESS: {
+    const assets = action.assets.reduce((prev, curr) => {
+      prev[curr.id] = curr;
+      return prev;
+    }, {});
+
+    return update(state, {
+      byId: {$set: assets},
+      count: {$set: action.count},
+      ids: {$set: Object.keys(assets)},
+    });
+  }
   case actions.UPDATE_ASSET_STATE_REQUEST:
-    return state
-      .setIn(['byId', action.id, 'closedAt'], action.closedAt);
+    return update(state, {
+      byId: {
+        [action.id]: {
+          closedAt: {$set: action.closedAt},
+        },
+      },
+    });
   case actions.UPDATE_ASSETS:
-    return state
-      .set('assets', List(action.assets));
+    return update(state, {
+      assets: {$set: action.assets},
+    });
   default:
     return state;
   }
 }
 
-const replaceAssets = (action, state) => {
-  const assets = fromJS(action.assets.reduce((prev, curr) => {
-    prev[curr.id] = curr;
-    return prev;
-  }, {}));
-
-  return state
-    .set('byId', assets)
-    .set('count', action.count)
-    .set('ids', List(assets.keys()));
-};

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

@@ -1,43 +1,63 @@
-import {Map} from 'immutable';
 import * as actions from '../constants/auth';
 
-const initialState = Map({
+const initialState = {
   loggedIn: false,
   user: null,
   loginError: null,
   loginMaxExceeded: false,
   passwordRequestSuccess: null
-});
+};
 
 export default function auth (state = initialState, action) {
   switch (action.type) {
   case actions.CHECK_LOGIN_REQUEST:
-    return state
-      .set('loadingUser', true);
+    return {
+      ...state,
+      loadingUser: true,
+    };
   case actions.CHECK_LOGIN_FAILURE:
-    return state
-      .set('loggedIn', false)
-      .set('loadingUser', false)
-      .set('user', null);
+    return {
+      ...state,
+      loggedIn: false,
+      loadingUser: false,
+      user: null,
+    };
   case actions.CHECK_LOGIN_SUCCESS:
-    return state
-      .set('loggedIn', true)
-      .set('loadingUser', false)
-      .set('user', action.user);
+    return {
+      ...state,
+      loggedIn: true,
+      loadingUser: false,
+      user: action.user,
+    };
   case actions.LOGOUT:
     return initialState;
   case actions.LOGIN_SUCCESS:
-    return state.set('loginMaxExceeded', false).set('loginError', null);
+    return {
+      ...state,
+      loginMaxExceeded: false,
+      loginError: null,
+    };
   case actions.LOGIN_FAILURE:
-    return state.set('loginError', action.message);
+    return {
+      ...state,
+      loginError: action.message,
+    };
   case actions.FETCH_FORGOT_PASSWORD_REQUEST:
-    return state.set('passwordRequestSuccess', null);
+    return {
+      ...state,
+      passwordRequestSuccess: null,
+    };
   case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-    return state.set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email.');
+    return {
+      ...state,
+      passwordRequestSuccess: 'If you have a registered account, a password reset link was sent to that email.',
+    };
   case actions.LOGIN_MAXIMUM_EXCEEDED:
-    return state
-      .set('loginMaxExceeded', true)
-      .set('loginError', action.message);
+    return {
+      ...state,
+      loginMaxExceeded: true,
+      loginError: action.message,
+    };
   default :
     return state;
   }

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

@@ -1,5 +1,3 @@
-import {Map} from 'immutable';
-
 import {
   FETCH_COMMENTERS_REQUEST,
   FETCH_COMMENTERS_FAILURE,
@@ -13,8 +11,8 @@ import {
   HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
-const initialState = Map({
-  community: Map(),
+const initialState = {
+  community: {},
   isFetchingPeople: false,
   errorPeople: '',
   accounts: [],
@@ -22,72 +20,87 @@ const initialState = Map({
   ascPeople: false,
   totalPagesPeople: 0,
   pagePeople: 0,
-  user: Map({}),
+  user: {},
   banDialog: false,
   rejectUsernameDialog: false
-});
+};
 
 export default function community (state = initialState, action) {
   switch (action.type) {
   case FETCH_COMMENTERS_REQUEST :
-    return state
-      .set('isFetchingPeople', true);
+    return {
+      ...state,
+      isFetchingPeople: true,
+    };
   case FETCH_COMMENTERS_FAILURE :
-    return state
-      .set('isFetchingPeople', false)
-      .set('errorPeople', action.error);
-
+    return {
+      ...state,
+      isFetchingPeople: false,
+      errorPeople: action.error,
+    };
   case FETCH_COMMENTERS_SUCCESS : {
     const {accounts, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
-    return state
-      .merge({
-        isFetchingPeople: false,
-        errorPeople: '',
-        pagePeople: page,
-        countPeople: count,
-        limitPeople: limit,
-        totalPagesPeople: totalPages,
-        ...rest
-      })
-      .set('accounts', accounts); // Sets to normal array
+    return {
+      ...state,
+      isFetchingPeople: false,
+      errorPeople: '',
+      pagePeople: page,
+      countPeople: count,
+      limitPeople: limit,
+      totalPagesPeople: totalPages,
+      ...rest,
+      accounts, // Sets to normal array
+    };
   }
   case SET_ROLE : {
-    const commenters = state.get('accounts');
+    const commenters = state.accounts;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
-    return state.set('accounts', commenters.map((id) => id));
+    return {
+      ...state,
+      accounts: commenters.map((id) => id),
+    };
   }
   case SET_COMMENTER_STATUS: {
-    const commenters = state.get('accounts');
+    const commenters = state.accounts;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].status = action.status;
-    return state.set('accounts', commenters.map((id) => id));
+    return {
+      ...state,
+      accounts: commenters.map((id) => id),
+    };
 
   }
   case SORT_UPDATE :
-    return state
-      .set('fieldPeople', action.sort.field)
-      .set('ascPeople', !state.get('ascPeople'));
+    return {
+      ...state,
+      fieldPeople: action.sort.field,
+      ascPeople: !state.ascPeople,
+    };
   case HIDE_BANUSER_DIALOG:
-    return state
-      .set('banDialog', false);
+    return {
+      ...state,
+      banDialog: false,
+    };
   case SHOW_BANUSER_DIALOG:
-    return state
-      .merge({
-        user: Map(action.user),
-        banDialog: true
-      });
+    return {
+      ...state,
+      user: action.user,
+      banDialog: true,
+    };
   case HIDE_REJECT_USERNAME_DIALOG:
-    return state
-      .set('rejectUsernameDialog', false);
+    return {
+      ...state,
+      rejectUsernameDialog: false,
+    };
   case SHOW_REJECT_USERNAME_DIALOG:
-    return state
-      .merge({
-        user: Map(action.user),
-        rejectUsernameDialog: true
-      });
+    return {
+      ...state,
+      user: action.user,
+      rejectUsernameDialog: true
+    };
   default :
     return state;
   }

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

@@ -1,15 +1,16 @@
-import {Map} from 'immutable';
-
 import * as actions from '../actions/config';
 
-const initialState = Map({
-  data: Map({})
-});
+const initialState = {
+  data: {}
+};
 
 export default function config (state = initialState, action) {
   switch (action.type) {
   case actions.CONFIG_UPDATED:
-    return state.set('data', Map(action.data));
+    return {
+      ...state,
+      data: action.data,
+    };
   default:
     return state;
   }

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

@@ -7,11 +7,13 @@ import install from './install';
 import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
+import userDetail from './userDetail';
 
 export default {
   auth,
   banUserDialog,
   suspendUserDialog,
+  userDetail,
   assets,
   settings,
   community,

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

@@ -1,30 +1,29 @@
-import {Map, List} from 'immutable';
-
 import * as actions from '../constants/install';
+import update from 'immutability-helper';
 
-const initialState = Map({
+const initialState = {
   isLoading: false,
-  data: Map({
-    settings: Map({
+  data: {
+    settings: {
       organizationName: '',
-      domains: Map({
-        whitelist: List()
-      })
-    }),
-    user: Map({
+      domains: {
+        whitelist: [],
+      }
+    },
+    user: {
       username: '',
       email: '',
       password: '',
       confirmPassword: ''
-    })
-  }),
-  errors: Map({
+    }
+  },
+  errors: {
     organizationName: '',
     username: '',
     email: '',
     password: '',
     confirmPassword: ''
-  }),
+  },
   showErrors: false,
   hasError: false,
   error: null,
@@ -44,57 +43,91 @@ const initialState = Map({
   installRequest: null,
   installRequestError: null,
   alreadyInstalled: false
-});
+};
 
 export default function install (state = initialState, action) {
   switch (action.type) {
   case actions.NEXT_STEP:
-    return state
-      .set('step', state.get('step') + 1);
+    return {
+      ...state,
+      step: state.step + 1,
+    };
   case actions.PREVIOUS_STEP:
-    return state
-      .set('step', state.get('step') - 1);
+    return {
+      ...state,
+      step: state.step - 1,
+    };
   case actions.GO_TO_STEP:
-    return state
-      .set('step', action.step);
+    return {
+      ...state,
+      step: action.step,
+    };
   case actions.UPDATE_PERMITTED_DOMAINS_SETTINGS:
-    return state
-      .setIn(['data', 'settings', 'domains', 'whitelist'], action.value);
+    return update(state, {
+      data: {
+        settings: {
+          domains: {
+            whitelist: {$set: action.value},
+          },
+        },
+      },
+    });
   case actions.UPDATE_FORMDATA_SETTINGS:
-    return state
-      .setIn(['data', 'settings', action.name], action.value);
+    return update(state, {
+      data: {
+        settings: {
+          [action.name]: {$set: action.value},
+        },
+      },
+    });
   case actions.UPDATE_FORMDATA_USER:
-    return state
-      .setIn(['data', 'user', action.name], action.value);
+    return update(state, {
+      data: {
+        user: {
+          [action.name]: {$set: action.value},
+        },
+      },
+    });
   case actions.HAS_ERROR:
-    return state
-      .merge({
-        hasError: true,
-        showErrors: true
-      });
+    return {
+      ...state,
+      hasError: true,
+      showErrors: true,
+    };
   case actions.ADD_ERROR:
-    return state
-      .setIn(['errors', action.name], action.error);
+    return update(state, {
+      errors: {
+        [action.name]: {$set: action.error},
+      },
+    });
   case actions.CLEAR_ERRORS:
-    return state
-      .set('errors', Map());
+    return {
+      ...state,
+      errors: {},
+    };
   case actions.INSTALL_REQUEST:
-    return state
-      .set('isLoading', true);
+    return {
+      ...state,
+      isLoading: true,
+    };
   case actions.INSTALL_SUCCESS:
-    return state
-      .set('isLoading', false)
-      .set('installRequest', 'SUCCESS');
+    return {
+      ...state,
+      isLoading: false,
+      installRequest: 'SUCCESS',
+    };
   case actions.INSTALL_FAILURE:
-    return state
-      .merge({
-        isLoading: false,
-        installRequest: 'FAILURE',
-        installRequestError: action.error
-      });
+    return {
+      ...state,
+      isLoading: false,
+      installRequest: 'FAILURE',
+      installRequestError: action.error
+    };
   case actions.CHECK_INSTALL_SUCCESS:
-    return state
-      .set('alreadyInstalled', action.installed);
+    return {
+      ...state,
+      alreadyInstalled: action.installed,
+    };
   default :
     return state;
   }

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

@@ -1,60 +1,54 @@
-import {fromJS, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
-const initialState = fromJS({
+const initialState = {
   singleView: false,
   modalOpen: false,
-  userDetailId: null,
-  userDetailActiveTab: 'all',
-  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
-  userDetailSelectedIds: new Set(),
   storySearchVisible: false,
   storySearchString: '',
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
   sortOrder: 'REVERSE_CHRONOLOGICAL',
-});
+};
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
     return initialState;
-  case actions.SET_ACTIVE_TAB:
-    return state
-      .set('activeTab', action.activeTab);
   case actions.TOGGLE_MODAL:
-    return state
-      .set('modalOpen', action.open);
+    return {
+      ...state,
+      modalOpen: action.open,
+    };
   case actions.SINGLE_VIEW:
-    return state
-      .set('singleView', !state.get('singleView'));
+    return {
+      ...state,
+      singleView: !state.singleView,
+    };
   case actions.HIDE_SHORTCUTS_NOTE:
-    return state
-      .set('shortcutsNoteVisible', 'hide');
-  case actions.VIEW_USER_DETAIL:
-    return state.set('userDetailId', action.userId);
-  case actions.HIDE_USER_DETAIL:
-    return state
-      .set('userDetailId', null)
-      .update('userDetailSelectedIds', (set) => set.clear());
-  case actions.CLEAR_USER_DETAIL_SELECTIONS:
-    return state.update('userDetailSelectedIds', (set) => set.clear());
-  case actions.CHANGE_USER_DETAIL_STATUSES:
-    return state
-      .set('userDetailActiveTab', action.tab)
-      .set('userDetailStatuses', action.statuses);
-  case actions.SELECT_USER_DETAIL_COMMENT:
-    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
-  case actions.UNSELECT_USER_DETAIL_COMMENT:
-    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
+    return {
+      ...state,
+      shortcutsNoteVisible: 'hide',
+    };
   case actions.SHOW_STORY_SEARCH:
-    return state.set('storySearchVisible', true);
+    return {
+      ...state,
+      storySearchVisible: true,
+    };
   case actions.HIDE_STORY_SEARCH:
-    return state.set('storySearchVisible', false);
+    return {
+      ...state,
+      storySearchVisible: false,
+    };
   case actions.STORY_SEARCH_CHANGE_VALUE:
-    return state.set('storySearchString', action.value);
+    return {
+      ...state,
+      storySearchString: action.value,
+    };
   case actions.SET_SORT_ORDER:
-    return state.set('sortOrder', action.order);
-  default :
+    return {
+      ...state,
+      sortOrder: action.order,
+    };
+  default:
     return state;
   }
 }

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

@@ -1,5 +1,5 @@
-import {Map, List} from 'immutable';
 import * as actions from '../actions/settings';
+import update from 'immutability-helper';
 
 // this is initialized here because
 // currently you have to reload the dashboard to get new stats
@@ -10,63 +10,82 @@ const DASHBOARD_WINDOW_MINUTES = 5;
 let then = new Date();
 then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
 
-const initialState = Map({
-  wordlist: Map({
-    banned: List(),
-    suspect: List()
-  }),
+const initialState = {
+  wordlist: {
+    banned: [],
+    suspect: []
+  },
   dashboardWindowStart: then.toISOString(),
   dashboardWindowEnd: new Date().toISOString(),
-  domains: Map({
-    whitelist: List()
-  }),
+  domains: {
+    whitelist: []
+  },
   saveSettingsError: null,
   fetchSettingsError: null,
   fetchingSettings: false
-});
+};
 
 export default function settings (state = initialState, action) {
   switch (action.type) {
   case actions.SETTINGS_LOADING:
-    return state
-      .set('fetchingSettings', true)
-      .set('fetchSettingsError', null);
+    return {
+      ...state,
+      fetchingSettings: true,
+      fetchSettingsError: null,
+    };
   case actions.SETTINGS_RECEIVED:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SETTINGS_FETCH_ERROR:
-    return state
-      .set('fetchingSettings', false)
-      .set('fetchSettingsError', action.error);
+    return {
+      ...state,
+      fetchingSettings: false,
+      fetchSettingsError: action.error,
+    };
   case actions.SETTINGS_UPDATED:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SAVE_SETTINGS_LOADING:
-    return state
-      .set('fetchingSettings', true)
-      .set('saveSettingsError', null);
+    return {
+      ...state,
+      fetchingSettings: true,
+      saveSettingsError: null,
+    };
   case actions.SAVE_SETTINGS_SUCCESS:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SAVE_SETTINGS_FAILED:
-    return state
-      .set('fetchingSettings', false)
-      .set('fetchSettingsError', action.error);
+    return {
+      ...state,
+      fetchingSettings: false,
+      fetchSettingsError: action.error,
+    };
   case actions.WORDLIST_UPDATED:
-    return state
-      .setIn(['wordlist', action.listName], action.list);
+    return update(state, {
+      wordlist: {
+        [action.listName]: {
+          $set: action.list
+        }
+      }
+    });
   case actions.DOMAINLIST_UPDATED:
-    return state
-      .setIn(['domains', action.listName], action.list);
+    return update(state, {
+      domains: {
+        [action.listName]: {$set: action.list},
+      }
+    });
   default:
     return state;
   }

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

@@ -0,0 +1,47 @@
+import * as actions from '../constants/userDetail';
+
+const initialState = {
+  userId: null,
+  activeTab: 'all',
+  statuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  selectedCommentIds: [],
+};
+
+export default function banUserDialog(state = initialState, action) {
+  switch (action.type) {
+  case actions.VIEW_USER_DETAIL:
+    return {
+      ...state,
+      userId: action.userId,
+    };
+  case actions.HIDE_USER_DETAIL:
+    return {
+      ...state,
+      userId: null,
+      selectedCommentIds: [],
+    };
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return {
+      ...state,
+      selectedCommentIds: [],
+    };
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return {
+      ...state,
+      activeTab: action.tab,
+      statuses: action.statuses,
+    };
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: [...state.selectedCommentIds, action.id],
+    };
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
+    };
+  default:
+    return state;
+  }
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Community.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 

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

@@ -52,57 +52,6 @@
   }
 }
 
-.email {
-  display: block;
-}
-
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-
-  th {
-    font-size: 1.1em;
-  }
-
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
-}
-
-.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;
-   }
-}
-
 .list {
   padding: 8px 0;
   list-style: none;
@@ -340,3 +289,11 @@ p.flaggedByReason {
   margin: 0px;
   line-height: 1.4;
 }
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}

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

@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}} = props;
+    const {community, root: {users}, viewUserDetail} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -84,6 +84,7 @@ export default class Community extends Component {
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
           currentUser={this.props.currentUser}
+          viewUserDetail={viewUserDetail}
         />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}

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

@@ -5,7 +5,7 @@ import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
-const FlaggedAccounts = ({...props}) => {
+const FlaggedAccounts = (props) => {
   const {commenters} = props;
   const hasResults = commenters && !!commenters.length;
 
@@ -25,6 +25,7 @@ const FlaggedAccounts = ({...props}) => {
               showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
               currentUser={props.currentUser}
+              viewUserDetail={props.viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>

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

@@ -0,0 +1,58 @@
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  &:hover {
+    background-color: #D0D0D0;
+  }
+}
+
+.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,9 +1,9 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Community.css';
+import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +21,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            {row.username}
+            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Community.css';
 
 import ActionButton from './ActionButton';
-import {username} from 'coral-plugin-flags/helpers/flagReasons';
+import {username} from 'talk-plugin-flags/helpers/flagReasons';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
@@ -38,9 +38,7 @@ const User = (props) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span>
-              {user.username}
-            </span>
+            <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
             {props.currentUser.id !== user.id &&
               <ActionsMenu icon="not_interested">
                 <ActionsMenuItem
@@ -82,7 +80,12 @@ const User = (props) => {
                       (action, j) => {
                         if (action.reason === action_sum.reason) {
                           return <p className={styles.flaggedByReason} key={j}>
-                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
+                            {action.user &&
+                              <button onClick={() => {props.viewUserDetail(action.user.id);}} className={styles.button}>
+                                {action.user.username}
+                              </button>
+                            }
+                            : {action.message ? action.message : 'n/a'}
                           </p>;
                         }
                         return null;

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

@@ -17,6 +17,7 @@ import {
   showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 import Community from '../components/Community';
 
@@ -86,8 +87,8 @@ export const withCommunityQuery = withQuery(gql`
 });
 
 const mapStateToProps = (state) => ({
-  community: state.community.toJS(),
-  currentUser: state.auth.toJS().user,
+  community: state.community,
+  currentUser: state.auth.user,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -99,6 +100,7 @@ const mapDispatchToProps = (dispatch) =>
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(

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

@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 class TableContainer extends Component {
 
@@ -22,13 +23,14 @@ class TableContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  commenters: state.community.get('accounts'),
+  commenters: state.community.accounts,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setCommenterStatus,
     setRole,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(

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

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
+import {BASE_URL} from 'coral-framework/constants/url';
 
 class EmbedLink extends Component {
 
@@ -24,21 +25,14 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const location = window.location;
-    const talkBaseUrl = [
-      location.protocol,
-      '//',
-      location.hostname,
-      location.port ? (`:${window.location.port}`) : ''
-    ].join('');
-    const coralJsUrl = [talkBaseUrl, '/embed.js'].join('');
+    const coralJsUrl = [BASE_URL, '/embed.js'].join('');
     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: '${talkBaseUrl}'
+    talk: '${BASE_URL}'
   });
 "></script>
     `.trim();

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

@@ -23,8 +23,8 @@ class ConfigureContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
-  settings: state.settings.toJS()
+  auth: state.auth,
+  settings: state.settings
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -17,11 +17,11 @@ const ActivityWidget = ({assets}) => {
           ? assets.map((asset) => {
             return (
               <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{asset.commentCount}</p>
-                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </Link>
+                </a>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -24,11 +24,11 @@ const FlagWidget = ({assets}) => {
 
             return (
               <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </Link>
+                </a>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -19,11 +19,11 @@ const LikeWidget = ({assets}) => {
             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/flagged/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </Link>
+                </a>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -54,8 +54,8 @@ export const witDashboardQuery = withQuery(gql`
 
 const mapStateToProps = (state) => {
   return {
-    settings: state.settings.toJS(),
-    moderation: state.moderation.toJS()
+    settings: state.settings,
+    moderation: state.moderation
   };
 };
 

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

@@ -35,7 +35,7 @@ InstallContainer.contextTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  install: state.install.toJS()
+  install: state.install
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -1,27 +1,50 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
-import Linkify from 'react-linkify';
 
 import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
+import FlagBox from 'coral-admin/src/components/FlagBox';
 import styles from './styles.css';
-import CommentType from './CommentType';
-import Highlighter from 'react-highlight-words';
+import CommentType from 'coral-admin/src/components/CommentType';
+import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
 import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 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';
-import {murmur3} from 'murmurhash-js';
-import {CSSTransitionGroup} from 'react-transition-group';
-
-const linkify = new Linkify();
+import {getCommentType} from 'coral-admin/src/utils/comment';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
+  showSuspendUserDialog = () => {
+    const {comment, showSuspendUserDialog} = this.props;
+    return showSuspendUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  showBanUserDialog = () => {
+    const {comment, showBanUserDialog} = this.props;
+    return showBanUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  viewUserDetail = () => {
+    const {viewUserDetail, comment} = this.props;
+    return viewUserDetail(comment.user.id);
+  };
+
   render() {
     const {
       actions = [],
@@ -29,141 +52,83 @@ class Comment extends React.Component {
       viewUserDetail,
       suspectWords,
       bannedWords,
-      minimal,
       selected,
-      toggleSelect,
       className,
-      ...props
+      data,
+      root,
+      currentUserId,
+      currentAsset,
+      acceptComment,
+      rejectComment,
     } = this.props;
 
-    const links = linkify.getMatches(comment.body);
-    const linkText = links ? links.map((link) => link.raw) : [];
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-    const flagActions =
-      comment.actions &&
-      comment.actions.filter((a) => a.__typename === 'FlagAction');
-    let commentType = '';
-    if (comment.status === 'PREMOD') {
-      commentType = 'premod';
-    } else if (flagActions && flagActions.length) {
-      commentType = 'flagged';
-    }
+    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
+    const commentType = getCommentType(comment);
 
-    // since words are checked against word boundaries on the backend,
-    // should be the behavior on the front end as well.
-    // currently the highlighter plugin does not support out of the box.
-    const searchWords = [...suspectWords, ...bannedWords]
-      .filter((w) => {
-        return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(comment.body);
-      })
-      .concat(linkText);
+    let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
-    let selectionStateCSS;
-    if (minimal) {
-      selectionStateCSS = selected ? styles.minimalSelection : '';
-    } else {
-      selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-    }
-
-    const showSuspenUserDialog = () => props.showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-
-    const showBanUserDialog = () => props.showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
+    const queryData = {root, comment, asset: comment.asset};
 
     return (
       <li
-        tabIndex={props.index}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.minimal]: minimal, [styles.selected]: selected})}
+        tabIndex={0}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.selected]: selected})}
       >
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
               {
-                !minimal && (
-                  <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
+                (
+                  <span className={styles.username} onClick={this.viewUserDetail}>
                     {comment.user.username}
                   </span>
                 )
               }
-              {
-                minimal && typeof selected === 'boolean' && typeof toggleSelect === 'function' && (
-                  <input
-                    className={styles.bulkSelectInput}
-                    type='checkbox'
-                    value={comment.id}
-                    checked={selected}
-                    onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
-                )
-              }
               <span className={styles.created}>
-                {timeago(comment.created_at || Date.now() - props.index * 60 * 1000)}
+                {timeago(comment.created_at)}
               </span>
               {
                 (comment.editing && comment.editing.edited)
                 ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                 : null
               }
-              {props.currentUserId !== comment.user.id &&
+              {currentUserId !== comment.user.id &&
                 <ActionsMenu icon="not_interested">
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showSuspenUserDialog}>
+                    onClick={this.showSuspendUserDialog}>
                     Suspend User</ActionsMenuItem>
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showBanUserDialog}>
+                    onClick={this.showBanUserDialog}>
                     Ban User
                   </ActionsMenuItem>
                 </ActionsMenu>
               }
-              <CommentType type={commentType} />
+              <div className={styles.adminCommentInfoBar}>
+                <CommentType type={commentType} className={styles.commentType}/>
+                <Slot
+                  fill="adminCommentInfoBar"
+                  data={data}
+                  queryData={queryData}
+                />
+              </div>
             </div>
-            {comment.user.status === 'banned'
-              ? <span className={styles.banned}>
-                  <Icon name="error_outline" />
-                  {t('comment.banned_user')}
-                </span>
-              : null}
-              <Slot
-                data={props.data}
-                root={props.root}
-                fill="adminCommentInfoBar"
-                comment={comment}
-              />
           </div>
+
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!props.currentAsset &&
-              <Link to={`/admin/moderate/all/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+            {!currentAsset &&
+              <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
           </div>
-          <CSSTransitionGroup
-            component={'div'}
-            style={{position: 'relative'}}
-            transitionName={{
-              enter: styles.bodyEnter,
-              enterActive: styles.bodyEnterActive,
-              leave: styles.bodyLeave,
-              leaveActive: styles.bodyLeaveActive,
-            }}
-            transitionEnter={true}
-            transitionLeave={true}
-            transitionEnterTimeout={3600}
-            transitionLeaveTimeout={2800}
-          >
-            <div className={styles.itemBody} key={murmur3(comment.body)}>
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.itemBody}>
               <p className={styles.body}>
-                <Highlighter
-                  searchWords={searchWords}
-                  textToHighlight={comment.body}
+                <CommentBodyHighlighter
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  body={comment.body}
                 />
                 {' '}
                 <a
@@ -175,17 +140,16 @@ class Comment extends React.Component {
                 </a>
               </p>
               <Slot
-                data={props.data}
-                root={props.root}
                 fill="adminCommentContent"
-                comment={comment}
+                data={data}
+                queryData={queryData}
               />
               <div className={styles.sideActions}>
-                {links
-                  ? <span className={styles.hasLinks}>
-                      <Icon name="error_outline" /> Contains Link
-                    </span>
-                  : null}
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
                 <div className={`actions ${styles.actions}`}>
                   {actions.map((action, i) => {
                     const active =
@@ -193,7 +157,6 @@ class Comment extends React.Component {
                       (action === 'APPROVE' && comment.status === 'ACCEPTED');
                     return (
                       <ActionButton
-                        minimal={minimal}
                         key={i}
                         type={action}
                         user={comment.user}
@@ -202,36 +165,34 @@ class Comment extends React.Component {
                         acceptComment={() =>
                           (comment.status === 'ACCEPTED'
                             ? null
-                            : props.acceptComment({commentId: comment.id}))}
+                            : acceptComment({commentId: comment.id}))}
                         rejectComment={() =>
                           (comment.status === 'REJECTED'
                             ? null
-                            : props.rejectComment({commentId: comment.id}))}
+                            : rejectComment({commentId: comment.id}))}
                       />
                     );
                   })}
                 </div>
                 <Slot
-                  data={props.data}
-                  root={props.root}
                   fill="adminSideActions"
-                  comment={comment}
+                  data={data}
+                  queryData={queryData}
                 />
               </div>
             </div>
-          </CSSTransitionGroup>
+          </CommentAnimatedEdit>
         </div>
         <Slot
-          data={props.data}
-          root={props.root}
           fill="adminCommentDetailArea"
-          comment={comment}
+          data={data}
+          queryData={queryData}
         />
         {flagActions && flagActions.length
           ? <FlagBox
               actions={flagActions}
               actionSummaries={flagActionSummaries}
-              viewUserDetail={() => viewUserDetail(comment.user.id)}
+              viewUserDetail={viewUserDetail}
             />
           : null}
       </li>
@@ -240,7 +201,6 @@ class Comment extends React.Component {
 }
 
 Comment.propTypes = {
-  minimal: PropTypes.bool,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
@@ -251,7 +211,6 @@ Comment.propTypes = {
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
-  toggleSelect: PropTypes.func,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,

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

@@ -1,16 +1,16 @@
 .count {
   display: inline-block;
-  background: #989797;
+  background: #616161;
   margin: 2px;
   vertical-align: middle;
-  padding: 1px 7px;
+  padding: 1px 5px;
   border-radius: 2px;
   margin-left: 2px;
-  line-height: 20px;
+  line-height: 18px;
   box-sizing: border-box;
-  height: 21px;
+  height: 18px;
   right: 0;
-  margin-top: -2px;
+  margin-top: 0px;
   font-size: 12px;
   color: white;
 }

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

@@ -6,8 +6,8 @@ import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
-import UserDetail from '../containers/UserDetail';
 import StorySearch from '../containers/StorySearch';
+import Slot from 'coral-framework/components/Slot';
 
 export default class Moderation extends Component {
   constructor() {
@@ -59,8 +59,7 @@ export default class Moderation extends Component {
   }
 
   getComments = () => {
-    const {root, route} = this.props;
-    const activeTab = route.path === ':id' ? 'premod' : route.path;
+    const {root, activeTab} = this.props;
     return root[activeTab].nodes;
   }
 
@@ -102,30 +101,19 @@ export default class Moderation extends Component {
   }
 
   render () {
-
-    const {root, moderation, settings, viewUserDetail, hideUserDetail, activeTab, ...props} = this.props;
-    const assetId = this.props.params.id;
+    const {root, data, moderation, settings, viewUserDetail, hideUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
+    const assetId = asset && asset.id;
 
     const comments = root[activeTab];
-    let activeTabCount;
-    switch(activeTab) {
-    case 'all':
-      activeTabCount = root.allCount;
-      break;
-    case 'accepted':
-      activeTabCount = root.acceptedCount;
-      break;
-    case 'premod':
-      activeTabCount = root.premodCount;
-      break;
-    case 'flagged':
-      activeTabCount = root.flaggedCount;
-      break;
-    case 'rejected':
-      activeTabCount = root.rejectedCount;
-      break;
-    }
+
+    const activeTabCount = root[`${activeTab}Count`];
+    const menuItems = Object.keys(queueConfig).map((queue) => ({
+      key: queue,
+      name: queueConfig[queue].name,
+      icon: queueConfig[queue].icon,
+      count: root[`${queue}Count`]
+    }));
 
     return (
       <div>
@@ -137,13 +125,11 @@ export default class Moderation extends Component {
         />
         <ModerationMenu
           asset={asset}
-          allCount={root.allCount}
-          acceptedCount={root.acceptedCount}
-          premodCount={root.premodCount}
-          rejectedCount={root.rejectedCount}
-          flaggedCount={root.flaggedCount}
+          getModPath={getModPath}
+          items={menuItems}
           selectSort={this.props.setSortOrder}
           sort={this.props.moderation.sortOrder}
+          activeTab={activeTab}
         />
         <ModerationQueue
           data={this.props.data}
@@ -173,24 +159,20 @@ export default class Moderation extends Component {
           open={moderation.modalOpen}
           onClose={this.onClose}/>
 
-        {moderation.userDetailId && (
-          <UserDetail
-            id={moderation.userDetailId}
-            hideUserDetail={hideUserDetail}
-            bannedWords={settings.wordlist.banned}
-            suspectWords={settings.wordlist.suspect}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
-            acceptComment={props.acceptComment}
-            rejectComment={props.rejectComment} />
-        )}
-
         <StorySearch
           assetId={assetId}
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
         />
+
+        <Slot
+          data={data}
+          queryData={{root, asset}}
+          activeTab={activeTab}
+          handleCommentChange={handleCommentChange}
+          fill='adminModeration'
+        />
       </div>
     );
   }

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

@@ -4,52 +4,32 @@ import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
-const ModerationMenu = (
-  {asset, allCount, acceptedCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
-) => {
-
-  function getPath (type) {
-    return asset ? `/admin/moderate/${type}/${asset.id}` : `/admin/moderate/${type}`;
-  }
-
+const ModerationMenu = ({
+  asset = {},
+  items,
+  selectSort,
+  sort,
+  getModPath,
+  activeTab
+}) => {
   return (
     <div className="mdl-tabs">
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div className={styles.tabBarPadding} />
         <div>
-          <Link
-            to={getPath('all')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='question_answer' className={styles.tabIcon} /> {t('modqueue.all')} <CommentCount count={allCount} />
-          </Link>
-          <Link
-            to={getPath('premod')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='access_time' className={styles.tabIcon} /> {t('modqueue.premod')} <CommentCount count={premodCount} />
-          </Link>
-          <Link
-            to={getPath('flagged')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='flag' className={styles.tabIcon} /> {t('modqueue.flagged')} <CommentCount count={flaggedCount} />
-          </Link>
-          <Link
-            to={getPath('accepted')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='check' className={styles.tabIcon} /> {t('modqueue.approved')} <CommentCount count={acceptedCount} />
-          </Link>
-          <Link
-            to={getPath('rejected')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='close' className={styles.tabIcon} /> {t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-          </Link>
+          {items.map((queue) =>
+            <Link
+              key={queue.key}
+              to={getModPath(queue.key, asset.id)}
+              className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
+              activeClassName={styles.active}>
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
+            </Link>
+          )}
         </div>
         <SelectField
           className={styles.selectField}
@@ -65,10 +45,7 @@ const ModerationMenu = (
 };
 
 ModerationMenu.propTypes = {
-  allCount: PropTypes.number.isRequired,
-  premodCount: PropTypes.number.isRequired,
-  rejectedCount: PropTypes.number.isRequired,
-  flaggedCount: PropTypes.number.isRequired,
+  items: PropTypes.array.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.string
   })

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

@@ -3,8 +3,8 @@ import React, {PropTypes} from 'react';
 import Comment from '../containers/Comment';
 import styles from './styles.css';
 import EmptyCard from '../../../components/EmptyCard';
-import {actionsMap} from '../helpers/moderationQueueActionsMap';
-import LoadMore from './LoadMore';
+import {actionsMap} from '../../../utils/moderationQueueActionsMap';
+import LoadMore from '../../../components/LoadMore';
 import t from 'coral-framework/services/i18n';
 import {CSSTransitionGroup} from 'react-transition-group';
 
@@ -85,7 +85,6 @@ class ModerationQueue extends React.Component {
                 data={this.props.data}
                 root={this.props.root}
                 key={comment.id}
-                index={i}
                 comment={comment}
                 selected={i === selectedIndex}
                 suspectWords={props.suspectWords}

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

@@ -74,7 +74,7 @@
   cursor: pointer;
   display: block;
   text-decoration: none;
-  height: 50px;
+  min-height: 50px;
   box-sizing: border-box;
   transition: background-color 400ms;
 

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

@@ -64,6 +64,7 @@ const StorySearch = (props) => {
                 ? <Spinner />
                 : assets.map((story, i) => {
                   const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
+
                   return <Story
                     key={i}
                     id={story.id}

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

@@ -1,81 +0,0 @@
-.copyButton {
-  float: right;
-  top: -10px;
-}
-
-.memberSince {
-  clear: both;
-}
-
-.small {
-  color: #aaa;
-}
-
-.stats {
-  display: flex;
-
-  .stat {
-    margin: 0 4px 10px 0px;
-  }
-
-  .stat:last-child {
-    margin-right: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .stat p:first-child {
-    font-weight: bold;
-  }
-}
-
-.profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  outline: none;
-  width: calc(100% - 90px);
-}
-
-.commentStatuses {
-  padding: 10px 0 0 0;
-  margin: 0;
-  height: 52px;
-  list-style: none;
-  box-sizing: border-box;
-
-  li {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    padding: 0 10px;
-  }
-}
-
-.active {
-  font-weight: bold;
-  border-bottom: 3px solid #F36451;
-}
-
-.bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
-
-  i {
-    margin-right: 0;
-  }
-
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
-
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
-}

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

@@ -1,172 +0,0 @@
-import React, {PropTypes} from 'react';
-import Comment from './Comment';
-import styles from './UserDetail.css';
-import {Button, Drawer} from 'coral-ui';
-import {Slot} from 'coral-framework/components';
-import ButtonCopyToClipboard from './ButtonCopyToClipboard';
-import {actionsMap} from '../helpers/moderationQueueActionsMap';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    bannedWords: PropTypes.array.isRequired,
-    suspectWords: PropTypes.array.isRequired,
-    showBanUserDialog: PropTypes.func.isRequired,
-    showSuspendUserDialog: PropTypes.func.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,
-  }
-
-  rejectThenReload = (info) => {
-    this.props.rejectComment(info).then(() => {
-      this.props.data.refetch();
-    });
-  }
-
-  acceptThenReload = (info) => {
-    this.props.acceptComment(info).then(() => {
-      this.props.data.refetch();
-    });
-  }
-
-  showAll = () => {
-    this.props.changeStatus('all');
-  }
-
-  showRejected = () => {
-    this.props.changeStatus('rejected');
-  }
-
-  render () {
-    const {
-      root: {
-        user,
-        totalComments,
-        rejectedComments,
-        comments: {nodes}
-      },
-      moderation: {
-        userDetailActiveTab: tab,
-        userDetailSelectedIds: selectedIds
-      },
-      bannedWords,
-      suspectWords,
-      toggleSelect,
-      bulkAccept,
-      bulkReject,
-      showBanUserDialog,
-      showSuspendUserDialog,
-      hideUserDetail
-    } = this.props;
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
-    let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
-
-      // if totalComments is 0, you're dividing by zero, which is naughty
-      rejectedPercent = 0;
-    }
-
-    return (
-      <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
-
-          <div>
-            {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-            <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
-          </div>
-
-          <Slot
-            fill="userProfile"
-            data={this.props.data}
-            root={this.props.root}
-            user={user}
-          />
-          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
-          <hr/>
-          <p>
-            <strong>Account summary</strong>
-            <br/><small className={styles.small}>Data represents the last six months of activity</small>
-          </p>
-          <div className={styles.stats}>
-            <div className={styles.stat}>
-              <p>Total Comments</p>
-              <p>{totalComments}</p>
-            </div>
-            <div className={styles.stat}>
-              <p>Reject Rate</p>
-              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-            </div>
-          </div>
-          {
-            selectedIds.length === 0
-            ? (
-              <ul className={styles.commentStatuses}>
-                <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-              </ul>
-            )
-            : (
-              <div className={styles.bulkActionGroup}>
-                <Button
-                  onClick={bulkAccept}
-                  className={styles.bulkAction}
-                  cStyle='approve'
-                  icon='done'>
-                </Button>
-                <Button
-                  onClick={bulkReject}
-                  className={styles.bulkAction}
-                  cStyle='reject'
-                  icon='close'>
-                </Button>
-                {`${selectedIds.length} comments selected`}
-              </div>
-            )
-          }
-
-          <div>
-            {
-              nodes.map((comment, i) => {
-                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-                const selected = selectedIds.indexOf(comment.id) !== -1;
-                return <Comment
-                  key={comment.id}
-                  index={i}
-                  comment={comment}
-                  selected={false}
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
-                  viewUserDetail={() => {}}
-                  actions={actionsMap[status]}
-                  showBanUserDialog={showBanUserDialog}
-                  showSuspendUserDialog={showSuspendUserDialog}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  currentAsset={null}
-                  currentUserId={this.props.id}
-                  minimal={true} />;
-              })
-            }
-          </div>
-        </Drawer>
-      </ClickOutside>
-    );
-  }
-}

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

@@ -18,7 +18,7 @@
 
 .tab {
   flex: 1;
-  color: #C0C0C0;
+  color: #BDBDBD;
   text-transform: capitalize;
   font-weight: 100;
   font-size: 14px;
@@ -29,7 +29,7 @@
   margin-right: 20px;
   &:hover {
     color: white;
-    border-bottom: solid 2px #F36451;
+    /*border-bottom: solid 2px #F36451;*/
     box-sizing: border-box;
   }
 }
@@ -111,7 +111,7 @@ span {
       color: white;
       text-transform: capitalize;
       font-weight: 400;
-      font-size: 15px;
+      font-size: 20px;
       letter-spacing: 1px;
       transition: background-color 200ms;
       opacity: 1;
@@ -173,7 +173,7 @@ span {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
   width: 100%;
-  max-width: 700px;
+  max-width: 650px;
   min-width: 400px;
   margin: 0 auto;
   position: relative;
@@ -213,11 +213,12 @@ span {
 
     .author {
       font-weight: 300;
-      min-width: 230px;
+      width: 100%;
       display: flex;
       align-items: center;
       color: #262626;
       font-size: 16px;
+      position: relative;
     }
   }
 
@@ -396,26 +397,6 @@ span {
    }
 }
 
-.loadMoreContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-};
-
-.loadMore {
-  width: 100%;
-  text-align: center;
-  color: #FFF;
-  max-width: 660px;
-  margin-bottom: 30px;
-  background-color: #2376D8;
-  cursor: pointer;
-}
-
-.loadMore:hover {
-  background-color: #4399FF;
-}
-
 .tabIcon {
   position: relative;
   top: 3px;
@@ -457,18 +438,6 @@ span {
   }
 }
 
-.minimal {
-  margin: 0;
-}
-
-.minimalSelection {
-  background-color: #ecf4ff;
-}
-
-.bulkSelectInput {
-  cursor: pointer;
-}
-
 .emptyCardContainer {
   margin-top: 16px;
 }
@@ -491,31 +460,6 @@ span {
   opacity: 1.0;
 }
 
-.bodyLeave {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  background-color: white;
-  opacity: 1.0;
-  transition: background 400ms, opacity 800ms 1600ms;
-  pointer-events: none;
-}
-
-.bodyLeaveActive {
-  opacity: 0;
-  background-color: rgba(255,255,0, 0.2);
-}
-
-.bodyEnter {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.bodyEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms 2400ms;
-}
-
 .editedMarker {
   font-style: italic;
   color: #666;
@@ -526,5 +470,13 @@ span {
 
 .searchTrigger {
   position: relative;
-  top: .3em;
+  top: .2em;
+}
+
+.adminCommentInfoBar {
+  min-width: 100px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  text-align: right;
 }

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

@@ -1,22 +1,21 @@
 import {gql} from 'react-apollo';
 import Comment from '../components/Comment';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
 
-const pluginFragments = getSlotsFragments([
+const slots = [
   'adminCommentInfoBar',
   'adminCommentContent',
   'adminSideActions',
   'adminCommentDetailArea',
-]);
+];
 
 export default withFragments({
   root: gql`
     fragment CoralAdmin_ModerationComment_root on RootQuery {
       __typename
-      ${pluginFragments.spreads('root')}
+      ${getSlotFragmentSpreads(slots, 'root')}
     }
-    ${pluginFragments.definitions('root')}
     `,
   comment: gql`
     fragment CoralAdmin_ModerationComment_comment on Comment {
@@ -42,9 +41,11 @@ export default withFragments({
       }
       actions {
         ... on FlagAction {
+          id
           reason
           message
           user {
+            id
             username
           }
         }
@@ -52,8 +53,7 @@ export default withFragments({
       editing {
         edited
       }
-      ${pluginFragments.spreads('comment')}
+      ${getSlotFragmentSpreads(slots, 'comment')}
     }
-    ${pluginFragments.definitions('comment')}
   `
 })(Comment);

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

@@ -8,20 +8,20 @@ import t from 'coral-framework/services/i18n';
 import update from 'immutability-helper';
 import truncate from 'lodash/truncate';
 import NotFoundAsset from '../components/NotFoundAsset';
+import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {handleCommentChange} from '../../../graphql/utils';
+import {handleCommentChange} from '../graphql';
 
 import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
+import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
   singleView,
   hideShortcutsNote,
   toggleStorySearch,
-  viewUserDetail,
-  hideUserDetail,
   setSortOrder,
   storySearchChange,
   clearState
@@ -30,15 +30,47 @@ import {
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
 import Comment from './Comment';
+import queueConfig from '../queueConfig';
 
 function prepareNotificationText(text) {
   return truncate(text, {length: 50}).replace('\n', ' ');
 }
 
+function getAssetId(props) {
+  if (props.params.tabOrId && !(props.params.tabOrId in queueConfig)) {
+    return props.params.tabOrId;
+  }
+  return props.params.id || null;
+}
+
+function getTab(props) {
+  if (props.params.tabOrId && props.params.tabOrId in queueConfig) {
+    return props.params.tabOrId;
+  }
+  return props.params.tab || null;
+}
+
 class ModerationContainer extends Component {
   subscriptions = [];
 
-  get activeTab() { return this.props.route.path; }
+  handleCommentChange = (root, comment, notify) => {
+    return handleCommentChange(root, comment, this.props.data.variables.sort, notify, queueConfig, this.activeTab);
+  };
+
+  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;
+
+    const queue = isPremod(premod) ? 'premod' : 'new';
+    const activeTab = tab ? tab : queue;
+
+    return activeTab;
+  }
 
   subscribeToUpdates(variables = this.props.data.variables) {
     const sub1 = this.props.data.subscribeToMore({
@@ -46,15 +78,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentAccepted: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const sort = this.props.moderation.sortOrder;
         const notify = this.props.auth.user.id === user.id
-          ? {}
-          : {
-            activeQueue: this.activeTab,
-            text: t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body)),
-            anyQueue: false,
-          };
-        return handleCommentChange(prev, comment, sort, notify);
+          ? ''
+          : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notify);
       },
     });
 
@@ -63,15 +90,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentRejected: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const sort = this.props.moderation.sortOrder;
         const notify = this.props.auth.user.id === user.id
-          ? {}
-          : {
-            activeQueue: this.activeTab,
-            text: t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body)),
-            anyQueue: false,
-          };
-        return handleCommentChange(prev, comment, sort, notify);
+          ? ''
+          : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notify);
       },
     });
 
@@ -79,13 +101,8 @@ class ModerationContainer extends Component {
       document: COMMENT_EDITED_SUBSCRIPTION,
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-        const sort = this.props.moderation.sortOrder;
-        const notify = {
-          activeQueue: this.activeTab,
-          text: t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body)),
-          anyQueue: false,
-        };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notify = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notify);
       },
     });
 
@@ -94,13 +111,8 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
         const user = comment.actions[comment.actions.length - 1].user;
-        const sort = this.props.moderation.sortOrder;
-        const notify = {
-          activeQueue: this.activeTab,
-          text: t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body)),
-          anyQueue: true,
-        };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notify = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notify);
       },
     });
 
@@ -149,25 +161,9 @@ class ModerationContainer extends Component {
       cursor: this.props.root[tab].endCursor,
       sort: this.props.data.variables.sort,
       asset_id: this.props.data.variables.asset_id,
+      statuses: queueConfig[tab].statuses,
+      action_type: queueConfig[tab].action_type,
     };
-    switch(tab) {
-    case 'all':
-      variables.statuses = null;
-      break;
-    case 'accepted':
-      variables.statuses = ['ACCEPTED'];
-      break;
-    case 'premod':
-      variables.statuses = ['PREMOD'];
-      break;
-    case 'flagged':
-      variables.statuses = ['NONE', 'PREMOD'];
-      variables.action_type = 'FLAG';
-      break;
-    case 'rejected':
-      variables.statuses = ['REJECTED'];
-      break;
-    }
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
@@ -185,7 +181,8 @@ class ModerationContainer extends Component {
   };
 
   render () {
-    const {root, root: {asset}, data, params: {id: assetId}} = this.props;
+    const {root, root: {asset, settings}, data} = this.props;
+    const assetId = getAssetId(this.props);
 
     if (data.error) {
       return <div>Error</div>;
@@ -208,12 +205,23 @@ class ModerationContainer extends Component {
       return <Spinner />;
     }
 
+    const premodEnabled = assetId ? isPremod(asset.settings.moderation) : isPremod(settings.moderation);
+    const currentQueueConfig = Object.assign({}, queueConfig);
+    if (premodEnabled) {
+      delete currentQueueConfig.new;
+    } else {
+      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}
     />;
   }
 }
@@ -298,78 +306,46 @@ const commentConnectionFragment = gql`
 
 const withModQueueQuery = withQuery(gql`
   query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER, $allAssets: Boolean!) {
-    all: comments(query: {
-      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    accepted: comments(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    premod: comments(query: {
-        statuses: [PREMOD],
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}: comments(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
         sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    flagged: comments(query: {
-        action_type: FLAG,
+      }) {
+        ...CoralAdmin_Moderation_CommentConnection
+      }
+    `)}
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}Count: commentCount(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
-        statuses: [NONE, PREMOD],
-        sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    rejected: comments(query: {
-        statuses: [REJECTED],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
+      })
+    `)}
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
       url
+      settings {
+        moderation
+      }
     }
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    acceptedCount: commentCount(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id
-    })
-    premodCount: commentCount(query: {
-      statuses: [PREMOD],
-      asset_id: $asset_id
-    })
-    rejectedCount: commentCount(query: {
-       statuses: [REJECTED],
-       asset_id: $asset_id
-    })
-    flaggedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
     settings {
       organizationName
+      moderation
     }
   }
   ${commentConnectionFragment}
 `, {
-  options: ({params: {id = null}, moderation: {sortOrder}}) => {
+  options: (props) => {
+    const id = getAssetId(props);
     return {
       variables: {
         asset_id: id,
-        sort: sortOrder,
+        sort: props.moderation.sortOrder,
         allAssets: id === null
       }
     };
@@ -378,29 +354,18 @@ const withModQueueQuery = withQuery(gql`
 
 const withQueueCountPolling = withQuery(gql`
   query CoralAdmin_ModerationCountPoll($asset_id: ID) {
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    acceptedCount: commentCount(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id
-    })
-    premodCount: commentCount(query: {
-      statuses: [PREMOD],
-      asset_id: $asset_id
-    })
-    rejectedCount: commentCount(query: {
-       statuses: [REJECTED],
-       asset_id: $asset_id
-    })
-    flaggedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}Count: commentCount(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        asset_id: $asset_id,
+      })
+    `)}
   }
 `, {
-  options: ({params: {id = null}}) => {
+  options: (props) => {
+    const id = getAssetId(props);
     return {
       pollInterval: 5000,
       variables: {
@@ -411,9 +376,9 @@ const withQueueCountPolling = withQuery(gql`
 });
 
 const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS(),
-  settings: state.settings.toJS(),
-  auth: state.auth.toJS(),
+  moderation: state.moderation,
+  settings: state.settings,
+  auth: state.auth,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -426,7 +391,6 @@ const mapDispatchToProps = (dispatch) => ({
     toggleStorySearch,
     showSuspendUserDialog,
     viewUserDetail,
-    hideUserDetail,
     setSortOrder,
     storySearchChange,
     clearState

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

@@ -59,13 +59,13 @@ class StorySearchContainer extends React.Component {
 
   goToStory = (id) => {
     const {router} = this.props;
-    router.push(`/admin/moderate/all/${id}`);
+    router.push(`/admin/moderate/${id}`);
     this.clearAndCloseSearch();
   }
 
   goToModerateAll = () => {
     const {router} = this.props;
-    router.push('/admin/moderate/all');
+    router.push('/admin/moderate');
     this.clearAndCloseSearch();
   }
 

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

@@ -1,123 +0,0 @@
-import React, {PropTypes} from 'react';
-import {compose, gql} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import UserDetail from '../components/UserDetail';
-import withQuery from 'coral-framework/hocs/withQuery';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
-import {getDefinitionName} from 'coral-framework/utils';
-import {
-  changeUserDetailStatuses,
-  clearUserDetailSelections,
-  toggleSelectCommentInUserDetail
-} from 'coral-admin/src/actions/moderation';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import Comment from './Comment';
-
-const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
-    nodes {
-      ...${getDefinitionName(Comment.fragments.comment)}
-    }
-    hasNextPage
-    startCursor
-    endCursor
-  }
-  ${Comment.fragments.comment}
-`;
-
-const pluginFragments = getSlotsFragments([
-  'userProfile',
-]);
-
-class UserDetailContainer extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired
-  }
-
-  // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = (status) => {
-    const changes = this.props.moderation.userDetailSelectedIds.map((commentId) => {
-      return this.props.setCommentStatus({commentId, status});
-    });
-
-    Promise.all(changes).then(() => {
-      this.props.data.refetch(); // some comments may have moved out of this tab
-      this.props.clearUserDetailSelections(); // un-select everything
-    });
-  }
-
-  bulkReject = () => {
-    this.bulkSetCommentStatus('REJECTED');
-  }
-
-  bulkAccept = () => {
-    this.bulkSetCommentStatus('ACCEPTED');
-  }
-
-  render () {
-    if (!('user' in this.props.root)) {
-      return null;
-    }
-
-    return <UserDetail
-      bulkReject={this.bulkReject}
-      bulkAccept={this.bulkAccept}
-      changeStatus={this.props.changeUserDetailStatuses}
-      toggleSelect={this.props.toggleSelectCommentInUserDetail}
-      {...this.props} />;
-  }
-}
-
-export const withUserDetailQuery = withQuery(gql`
-  query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
-    user(id: $author_id) {
-      id
-      username
-      created_at
-      profiles {
-        id
-        provider
-      }
-      ${pluginFragments.spreads('user')}
-    }
-    totalComments: commentCount(query: {author_id: $author_id})
-    rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
-    comments: comments(query: {
-      author_id: $author_id,
-      statuses: $statuses
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    ${pluginFragments.spreads('root')}
-  }
-  ${Comment.fragments.comment}
-  ${pluginFragments.definitions('user')}
-  ${pluginFragments.definitions('root')}
-  ${commentConnectionFragment}
-`, {
-  options: ({id, moderation: {userDetailStatuses: statuses}}) => {
-    return {
-      variables: {author_id: id, statuses}
-    };
-  }
-});
-
-const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS()
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    changeUserDetailStatuses,
-    clearUserDetailSelections,
-    toggleSelectCommentInUserDetail
-  }, dispatch)
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withUserDetailQuery,
-  withSetCommentStatus,
-)(UserDetailContainer);

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

@@ -1,7 +1,6 @@
 import update from 'immutability-helper';
 import * as notification from 'coral-admin/src/services/notification';
 
-const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 const limit = 10;
 
 const ascending = (a, b) => {
@@ -64,23 +63,27 @@ function addCommentToQueue(root, queue, comment, sort) {
   return update(root, changes);
 }
 
-function getCommentQueues(comment) {
-  const queues = ['all'];
-  if (comment.status === 'ACCEPTED') {
-    queues.push('accepted');
-  }
-  else if (comment.status === 'REJECTED') {
-    queues.push('rejected');
-  }
-  else if (comment.status === 'PREMOD') {
-    queues.push('premod');
-  }
-  if (
-    ['NONE', 'PREMOD'].indexOf(comment.status) >= 0
-    && comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')
-  ) {
-    queues.push('flagged');
-  }
+/**
+ * getCommentQueues determines in which queues a comment should be placed.
+ */
+function getCommentQueues(comment, queueConfig) {
+  const queues = [];
+  Object.keys(queueConfig).forEach((key) => {
+    const {action_type, statuses, tags} = queueConfig[key];
+    let addToQueues = false;
+    if (statuses && statuses.indexOf(comment.status) >= 0) {
+      addToQueues = true;
+    }
+    if (tags && comment.tags && comment.tags.some((tagLink) => tags.indexOf(tagLink.tag.name) >= 0)) {
+      addToQueues = true;
+    }
+    if (action_type && comment.actions && comment.actions.some((a) => a.__typename.toLowerCase() === `${action_type}action`)) {
+      addToQueues = true;
+    }
+    if (addToQueues) {
+      queues.push(key);
+    }
+  });
   return queues;
 }
 
@@ -94,41 +97,42 @@ function getCommentQueues(comment) {
  * @param  {string} notify.text        notification text to show
  * @param  {bool}   notify.anyQueue    if true show the notification when the comment is shown
  *                                     in the current active queue besides the 'all' queue.
+ * @param  {Object} queueConfig        queue configuration
  * @return {Object}                    next state of the store
  */
-export function handleCommentChange(root, comment, sort, notify) {
+export function handleCommentChange(root, comment, sort, notify, queueConfig, activeQueue) {
   let next = root;
-  const nextQueues = getCommentQueues(comment);
+
+  const nextQueues = getCommentQueues(comment, queueConfig);
 
   let notificationShown = false;
   const showNotificationOnce = () => {
     if (notificationShown) {
       return;
     }
-    notification.info(notify.text);
+    notification.info(notify);
     notificationShown = true;
   };
 
-  queues.forEach((queue) => {
+  Object.keys(queueConfig).forEach((queue) => {
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
         next = addCommentToQueue(next, queue, comment, sort);
-        if (notify && notify.activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
+        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
           showNotificationOnce(comment);
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
-      if (notify && notify.activeQueue === queue) {
+      if (notify && activeQueue === queue) {
         showNotificationOnce(comment);
       }
     }
 
     if (
       notify
-      && (queue === 'all' || notify.anyQueue)
       && queueHasComment(next, queue, comment.id)
-      && notify.activeQueue === queue
+      && activeQueue === queue
     ) {
       showNotificationOnce(comment);
     }

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

@@ -0,0 +1,37 @@
+import t from 'coral-framework/services/i18n';
+import {getModQueueConfigs} from 'coral-framework/helpers/plugins';
+
+export default {
+  premod: {
+    statuses: ['PREMOD'],
+    icon: 'access_time',
+    name: t('modqueue.premod'),
+  },
+  new: {
+    statuses: ['NONE', 'PREMOD'],
+    icon: 'question_answer',
+    name: t('modqueue.new'),
+  },
+  reported: {
+    action_type: 'FLAG',
+    statuses: ['NONE', 'PREMOD'],
+    icon: 'flag',
+    name: t('modqueue.reported'),
+  },
+  approved: {
+    statuses: ['ACCEPTED'],
+    icon: 'check',
+    name: t('modqueue.approved'),
+  },
+  rejected: {
+    statuses: ['REJECTED'],
+    icon: 'close',
+    name: t('modqueue.rejected'),
+  },
+  all: {
+    statuses: ['NONE', 'PREMOD', 'ACCEPTED', 'REJECTED'],
+    icon: 'question_answer',
+    name: t('modqueue.all'),
+  },
+  ...getModQueueConfigs(),
+};

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

@@ -12,7 +12,7 @@ class StoriesContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  assets: state.assets.toJS()
+  assets: state.assets
 });
 
 const mapDispatchToProps = (dispatch) =>

client/coral-admin/src/services/client.js

@@ -1,6 +0,0 @@
-import {getClient as getFrameworkClient} from 'coral-framework/services/client';
-import fragmentMatcher from './fragmentMatcher';
-
-export function getClient() {
-  return getFrameworkClient({fragmentMatcher});
-}

client/coral-admin/src/services/fragmentMatcher.js

@@ -1,65 +0,0 @@
-import {IntrospectionFragmentMatcher} from 'apollo-client';
-
-// TODO this is a short-term fix
-// we need to set up something to query the server for the schema before ApolloClient initialization
-// https://github.com/apollographql/apollo-client/issues/1555#issuecomment-295834774
-const fm = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData: {
-    __schema: {
-      types: [
-        {
-          kind: 'INTERFACE',
-          name: 'UserError',
-          possibleTypes: [
-            {name: 'GenericUserError'},
-            {name: 'ValidationUserError'}
-          ]
-        },
-        {
-          kind: 'INTERFACE',
-          name: 'Response',
-          possibleTypes: [
-            {name: 'CreateCommentResponse'},
-            {name: 'CreateFlagResponse'},
-            {name: 'CreateDontAgreeResponse'},
-            {name: 'DeleteActionResponse'},
-            {name: 'SetUserStatusResponse'},
-            {name: 'SuspendUserResponse'},
-            {name: 'SetCommentStatusResponse'},
-            {name: 'ModifyTagResponse'},
-            {name: 'IgnoreUserResponse'},
-            {name: 'StopIgnoringUserResponse'}
-          ]
-        },
-        {
-          kind: 'INTERFACE',
-          name: 'Action',
-          possibleTypes: [
-            {name: 'DefaultAction'},
-            {name: 'FlagAction'},
-            {name: 'DontAgreeAction'}
-          ]
-        },
-        {
-          kind: 'INTERFACE',
-          name: 'ActionSummary',
-          possibleTypes: [
-            {name: 'DefaultActionSummary'},
-            {name: 'FlagActionSummary'},
-            {name: 'DontAgreeActionSummary'}
-          ]
-        },
-        {
-          kind: 'INTERFACE',
-          name: 'AssetActionSummary',
-          possibleTypes: [
-            {name: 'DefaultAssetActionSummary'},
-            {name: 'FlagAssetActionSummary'}
-          ]
-        }
-      ]
-    }
-  }
-});
-
-export default fm;

client/coral-admin/src/services/store.js

@@ -1,7 +1,7 @@
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 import mainReducer from '../reducers';
-import {getClient} from './client';
+import {getClient} from 'coral-framework/services/client';
 
 const middlewares = [
   applyMiddleware(getClient().middleware()),

client/coral-admin/src/utils/comment.js

@@ -0,0 +1,9 @@
+export function getCommentType(comment) {
+  let commentType = '';
+  if (comment.status === 'PREMOD') {
+    commentType = 'premod';
+  } else if (comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')) {
+    commentType = 'flagged';
+  }
+  return commentType;
+}

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

@@ -0,0 +1,4 @@
+export const isPremod = (mod) => mod === 'PRE';
+
+export const getModPath = (type = 'all', assetId) =>
+  assetId ? `/admin/moderate/${type}/${assetId}` : `/admin/moderate/${type}`;

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -15,8 +15,8 @@ class ConfigureStreamContainer extends Component {
 
     this.state = {
       changed: false,
-      dirtySettings: props.asset.settings,
-      closedAt: (props.asset.closedAt === null ? 'open' : 'closed')
+      dirtySettings: {...props.asset.settings},
+      closedAt: !props.asset.isClosed ? 'open' : 'closed'
     };
 
     this.toggleStatus = this.toggleStatus.bind(this);
@@ -48,26 +48,28 @@ class ConfigureStreamContainer extends Component {
           changed: false
         });
       }, 300);
-
-      // this.props.loadAsset(this.props.data.asset);
     }
   }
 
   handleChange (e) {
+    const changes = {};
 
-    // TODO: Don’t directly manipulate state and make state change immutable.
     if (e.target && e.target.id === 'qboxenable') {
-      this.state.dirtySettings.questionBoxEnable = e.target.checked;
+      changes.questionBoxEnable = e.target.checked;
     }
     if (e.target && e.target.id === 'qboxcontent') {
-      this.state.dirtySettings.questionBoxContent = e.target.value;
+      changes.questionBoxContent = e.target.value;
     }
     if (e.target && e.target.id === 'plinksenable') {
-      this.state.dirtySettings.premodLinksEnable = e.target.value;
+      changes.premodLinksEnable = e.target.value;
     }
 
     this.setState({
-      changed: true
+      changed: true,
+      dirtySettings: {
+        ...this.state.dirtySettings,
+        ...changes,
+      },
     });
   }
 
@@ -119,7 +121,7 @@ class ConfigureStreamContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  asset: state.asset.toJS()
+  asset: state.asset
 });
 
 const mapDispatchToProps = (dispatch) => ({

client/coral-embed-stream/src/AppRouter.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Router, Route, browserHistory} from 'react-router';
+import {Router, Route} from 'react-router';
+import {history} from 'coral-framework/helpers/router';
 
 import Embed from './containers/Embed';
 import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
@@ -11,6 +12,6 @@ const routes = (
   </div>
 );
 
-const AppRouter = () => <Router history={browserHistory} routes={routes} />;
+const AppRouter = () => <Router history={history} routes={routes} />;
 
 export default AppRouter;

client/coral-embed-stream/src/actions/stream.js

@@ -1,35 +1,24 @@
 import pym from 'coral-framework/services/pym';
 import * as actions from '../constants/stream';
+import {buildUrl} from 'coral-framework/utils/url';
+import queryString from 'query-string';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
 
-function removeParam(key, sourceURL) {
-  let rtn = sourceURL.split('?')[0];
-  let param;
-  let params_arr = [];
-  let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : '';
-  if (queryString !== '') {
-    params_arr = queryString.split('&');
-    for (let i = params_arr.length - 1; i >= 0; i -= 1) {
-      param = params_arr[i].split('=')[0];
-      if (param === key) {
-        params_arr.splice(i, 1);
-      }
-    }
-    rtn = `${rtn}?${params_arr.join('&')}`;
-  }
-  return rtn;
-}
-
 export const viewAllComments = () => {
 
+  const search = queryString.stringify({
+    ...queryString.parse(location.search),
+    comment_id: undefined,
+  });
+
   // remove the comment_id url param
-  const modifiedUrl = removeParam('comment_id', location.href);
+  const url = buildUrl({...location, search});
 
   try {
 
     // "window" here refers to the embedded iframe
-    window.history.replaceState({}, document.title, modifiedUrl);
+    window.history.replaceState({}, document.title, url);
 
     // also change the parent url
     pym.sendMessage('coral-view-all-comments');
@@ -38,6 +27,28 @@ export const viewAllComments = () => {
   return {type: actions.VIEW_ALL_COMMENTS};
 };
 
+export const viewComment = (id) => {
+
+  const search = queryString.stringify({
+    ...queryString.parse(location.search),
+    comment_id: id,
+  });
+
+  // remove the comment_id url param
+  const url = buildUrl({...location, search});
+
+  try {
+
+    // "window" here refers to the embedded iframe
+    window.history.replaceState({}, document.title, url);
+
+    // also change the parent url
+    pym.sendMessage('coral-view-comment', id);
+  } catch (e) { /* not sure if we're worried about old browsers */ }
+
+  return {type: actions.VIEW_COMMENT, id};
+};
+
 export const addCommentClassName = (className) => ({
   type: actions.ADD_COMMENT_CLASSNAME,
   className

client/coral-embed-stream/src/components/AllCommentsPane.js

@@ -5,7 +5,7 @@ import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -93,6 +93,7 @@ class AllCommentsPane extends React.Component {
 
   viewNewComments = () => {
     this.setState(resetCursors);
+    this.props.emit('ui.AllCommentsPane.viewNewComments');
   };
 
   // getVisibileComments returns a list containing comments
@@ -125,8 +126,6 @@ class AllCommentsPane extends React.Component {
       root,
       comments,
       commentClassNames,
-      addTag,
-      removeTag,
       ignoreUser,
       setActiveReplyBox,
       activeReplyBox,
@@ -144,6 +143,7 @@ class AllCommentsPane extends React.Component {
       charCountEnable,
       maxCharCount,
       editComment,
+      emit,
     } = this.props;
 
     const {loadingState} = this.state;
@@ -173,8 +173,6 @@ class AllCommentsPane extends React.Component {
                   currentUser={currentUser}
                   postFlag={postFlag}
                   postDontAgree={postDontAgree}
-                  addTag={addTag}
-                  removeTag={removeTag}
                   ignoreUser={ignoreUser}
                   commentIsIgnored={commentIsIgnored}
                   loadMore={loadNewReplies}
@@ -185,6 +183,7 @@ class AllCommentsPane extends React.Component {
                   charCountEnable={charCountEnable}
                   maxCharCount={maxCharCount}
                   editComment={editComment}
+                  emit={emit}
                 />;
           })}
         </TransitionGroup>

client/coral-embed-stream/src/components/Comment.css

@@ -16,9 +16,8 @@
 }
 
 .comment {
+  position: relative;
   padding-left: 15px;
-  display: flex;
-  flex-flow: row;
 }
 
 .commentLevel0 {
@@ -67,17 +66,6 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-/* element in the top right of the Comment */
-.topRight {
-  float: right;
-  margin-top: 10px;
-  text-align: right;
-}
-
-.topRight > * {
-  text-align: initial;
-}
-
 .topRight .popover {
   margin-top: 1em;
   right: 0px;
@@ -89,11 +77,6 @@
   border-bottom: 2px solid currentColor;
 }
 
-.topRightMenu {
-  cursor: pointer;
-  margin-top: 5px;
-}
-
 .editCommentForm {
   margin-bottom: 10px;
 }
@@ -144,7 +127,7 @@
 }
 
 .commentInfoBar {
-  float: right;
+  margin-left: auto;
 }
 
 @keyframes enter {
@@ -158,7 +141,6 @@
 }
 
 .commentContainer {
-  flex: auto;
 }
 
 .commentAvatar {
@@ -173,3 +155,19 @@
   vertical-align: middle;
   font-size: 14px;
 }
+
+.commentFooter {
+  padding-top: 8px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.content {
+}
+
+.footer {
+  min-height: 10px;
+}

client/coral-embed-stream/src/components/Comment.js

@@ -1,10 +1,11 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import AuthorName from 'coral-plugin-author-name/AuthorName';
-import TagLabel from 'coral-plugin-tag-label/TagLabel';
-import PubDate from 'coral-plugin-pubdate/PubDate';
-import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
-import {FlagComment} from 'coral-plugin-flags';
+import AuthorName from 'talk-plugin-author-name/AuthorName';
+import TagLabel from 'talk-plugin-tag-label/TagLabel';
+import PubDate from 'talk-plugin-pubdate/PubDate';
+import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
+import {FlagComment} from 'talk-plugin-flags';
 import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
@@ -13,22 +14,18 @@ import {THREADING_LEVEL} from '../constants/stream';
 import merge from 'lodash/merge';
 import mapValues from 'lodash/mapValues';
 
-import {
-  BestButton,
-  IfUserCanModifyBest,
-  BEST_TAG,
-  commentIsBest,
-  BestIndicator
-} from 'coral-plugin-best/BestButton';
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
+import {findCommentWithId} from '../graphql/utils';
 import {TopRightMenu} from './TopRightMenu';
 import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import InactiveCommentLabel from './InactiveCommentLabel';
 import {EditableCommentContent} from './EditableCommentContent';
-import {getActionSummary, iPerformedThisAction, forEachError} from 'coral-framework/utils';
+import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
+import CommentContainer from '../containers/Comment';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -77,6 +74,17 @@ const ActionButton = ({children}) => {
   );
 };
 
+// Determine whether the comment with id is in the part of the comments tree.
+function containsCommentId(props, id) {
+  if (props.comment.id === id) {
+    return true;
+  }
+  if (props.comment.replies) {
+    return findCommentWithId(props.comment.replies.nodes, id);
+  }
+  return false;
+}
+
 export default class Comment extends React.Component {
 
   constructor(props) {
@@ -91,7 +99,6 @@ export default class Comment extends React.Component {
       // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
       isEditing: false,
       replyBoxVisible: false,
-      animateEnter: false,
       loadingState: '',
       ...resetCursors({}, props),
     };
@@ -117,20 +124,21 @@ export default class Comment extends React.Component {
     }
   }
 
-  componentWillEnter(callback) {
-    callback();
-    const userId = this.props.currentUser ? this.props.currentUser.id : null;
-    if (this.props.comment.id.indexOf('pending') >= 0) {
-      return;
-    }
-    if (userId && this.props.comment.user.id === userId) {
+  shouldComponentUpdate(nextProps, nextState) {
 
-      // This comment was just added by currentUser.
-      if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
-        return;
+    // Specifically handle `activeReplyBox` if it is the only change.
+    const changes = [...getShallowChanges(this.props, nextProps), ...getShallowChanges(this.state, nextState)];
+    if (changes.length === 1 && changes[0] === 'activeReplyBox') {
+      if (
+        !containsCommentId(this.props, this.props.activeReplyBox) &&
+        !containsCommentId(nextProps, nextProps.activeReplyBox)
+      ) {
+        return false;
       }
     }
-    this.setState({animateEnter: true});
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
   }
 
   static propTypes = {
@@ -178,19 +186,16 @@ export default class Comment extends React.Component {
     }).isRequired,
 
     // given a comment, return whether it should be rendered as ignored
-    commentIsIgnored: React.PropTypes.func,
-
-    // dispatch action to add a tag to a comment
-    addTag: React.PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeTag: React.PropTypes.func,
+    commentIsIgnored: PropTypes.func,
 
     // dispatch action to ignore another user
-    ignoreUser: React.PropTypes.func,
+    ignoreUser: PropTypes.func,
 
     // edit a comment, passed (id, asset_id, { body })
-    editComment: React.PropTypes.func,
+    editComment: PropTypes.func,
+
+    // emit custom events
+    emit: PropTypes.func.isRequired,
   }
 
   editComment = (...args) => {
@@ -218,7 +223,7 @@ export default class Comment extends React.Component {
   }
 
   loadNewReplies = () => {
-    const {replies, replyCount, id} = this.props.comment;
+    const {comment: {replies, replyCount, id}, emit} = this.props;
     if (replyCount > replies.nodes.length) {
       this.setState({loadingState: 'loading'});
       this.props.loadMore(id)
@@ -232,9 +237,11 @@ export default class Comment extends React.Component {
           this.setState({loadingState: 'error'});
           forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
         });
+      emit('ui.Comment.showMoreReplies', {id});
       return;
     }
     this.setState(resetCursors);
+    emit('ui.Comment.showMoreReplies', {id});
   };
 
   showReplyBox = () => {
@@ -250,6 +257,10 @@ export default class Comment extends React.Component {
     return;
   }
 
+  commentPostedHandler = () => {
+    this.props.setActiveReplyBox('');
+  }
+
   // getVisibileReplies returns a list containing comments
   // which were authored by current user or comes before the `idCursor`.
   getVisibileReplies() {
@@ -303,6 +314,8 @@ export default class Comment extends React.Component {
   render () {
     const {
       asset,
+      data,
+      root,
       depth,
       comment,
       postFlag,
@@ -321,14 +334,18 @@ export default class Comment extends React.Component {
       addNotification,
       charCountEnable,
       showSignInDialog,
-      addTag,
-      removeTag,
       liveUpdates,
       commentIsIgnored,
+      animateEnter,
+      emit,
       commentClassNames = []
     } = this.props;
 
     const view = this.getVisibileReplies();
+
+      // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
+    const isActive = isCommentActive(comment.status);
+
     const {loadingState} = this.state;
     const isPending = comment.id.indexOf('pending') >= 0;
     const isHighlighted = highlighted === comment.id;
@@ -347,40 +364,6 @@ export default class Comment extends React.Component {
       myFlag = dontAgreeSummary.find((s) => s.current_user);
     }
 
-    // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
-    const notifyOnError = (fn, errorToMessage) =>
-      async function(...args) {
-        if (typeof errorToMessage !== 'function') {
-          errorToMessage = (error) => error.message;
-        }
-        try {
-          return await fn(...args);
-        } catch (error) {
-          addNotification('error', errorToMessage(error));
-          throw error;
-        }
-      };
-
-    const addBestTag = notifyOnError(
-      () =>
-        addTag({
-          id: comment.id,
-          name: BEST_TAG,
-          assetId: asset.id,
-        }),
-      () => 'Failed to tag comment as best'
-    );
-
-    const removeBestTag = notifyOnError(
-      () =>
-        removeTag({
-          id: comment.id,
-          name: BEST_TAG,
-          assetId: asset.id,
-        }),
-      () => 'Failed to remove best comment tag'
-    );
-
     /**
      * conditionClassNames
      * adds classNames based on condition
@@ -407,7 +390,7 @@ export default class Comment extends React.Component {
       styles[`rootLevel${depth}`],
       {
         ...conditionalClassNames,
-        [styles.enter]: this.state.animateEnter,
+        [styles.enter]: animateEnter,
       },
     );
 
@@ -424,6 +407,18 @@ export default class Comment extends React.Component {
       }
     );
 
+    // props that are passed down the slots.
+    const slotProps = {
+      data,
+      depth,
+    };
+
+    const queryData = {
+      root,
+      asset,
+      comment,
+    };
+
     return (
       <div
         className={rootClassName}
@@ -432,198 +427,188 @@ export default class Comment extends React.Component {
         <div className={commentClassName}>
 
           <Slot
-            className={styles.commentAvatar}
+            className={`${styles.commentAvatar} talk-stream-comment-avatar`}
             fill="commentAvatar"
-            comment={comment}
-            commentId={comment.id}
-            data={this.props.data}
-            root={this.props.root}
+            {...slotProps}
+            queryData={queryData}
             inline
           />
 
-          <div className={styles.commentContainer}>
-            
-            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+          <div className={`${styles.commentContainer} talk-stream-comment-container`}>
 
-            {commentIsBest(comment)
-              ? <TagLabel><BestIndicator /></TagLabel>
-              : null }
+            <div className={styles.header}>
+              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-            <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-              <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
-              {
-                (comment.editing && comment.editing.edited)
-                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                : null
-              }
-            </span>
-
-            <Slot
-              className={styles.commentInfoBar}
-              fill="commentInfoBar"
-              depth={depth}
-              comment={comment}
-              commentId={comment.id}
-              data={this.props.data}
-              root={this.props.root}
-              inline
-            />
-
-            { (currentUser && (comment.user.id === currentUser.id)) &&
-
-              /* User can edit/delete their own comment for a short window after posting */
-              <span className={cn(styles.topRight)}>
+              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
                 {
-                  commentIsStillEditable(comment) &&
-                  <a
-                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                    onClick={this.onClickEdit}>Edit</a>
+                  (comment.editing && comment.editing.edited)
+                  ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                  : null
                 }
               </span>
-            }
-            { (currentUser && (comment.user.id !== currentUser.id)) &&
 
-                /* TopRightMenu allows currentUser to ignore other users' comments */
-                <span className={cn(styles.topRight, styles.topRightMenu)}>
-                  <TopRightMenu
-                    comment={comment}
-                    ignoreUser={ignoreUser}
-                    addNotification={addNotification} />
+              <Slot
+                className={styles.commentInfoBar}
+                fill="commentInfoBar"
+                {...slotProps}
+                queryData={queryData}
+              />
+
+              { isActive && (currentUser && (comment.user.id === currentUser.id)) &&
+
+                /* User can edit/delete their own comment for a short window after posting */
+                <span className={cn(styles.topRight)}>
+                  {
+                    commentIsStillEditable(comment) &&
+                    <a
+                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                      onClick={this.onClickEdit}>Edit</a>
+                  }
                 </span>
-            }
-            {
-              this.state.isEditing
-              ? <EditableCommentContent
-                  editComment={this.editComment}
-                  addNotification={addNotification}
-                  comment={comment}
-                  currentUser={currentUser}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  parentId={parentId}
-                  stopEditing={this.stopEditing}
-                  />
-              : <div>
-                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-                </div>
-            }
+              }
+              { isActive && (currentUser && (comment.user.id !== currentUser.id)) &&
 
-            <div className="commentActionsLeft comment__action-container">
-              <Slot
-                fill="commentReactions"
-                data={this.props.data}
-                root={this.props.root}
-                comment={comment}
-                commentId={comment.id}
-                inline
-              />
-              <ActionButton>
-                <IfUserCanModifyBest user={currentUser}>
-                  <BestButton
-                    isBest={commentIsBest(comment)}
-                    addBest={addBestTag}
-                    removeBest={removeBestTag}
-                  />
-                </IfUserCanModifyBest>
-              </ActionButton>
-              {!disableReply &&
-                <ActionButton>
-                  <ReplyButton
-                    onClick={this.showReplyBox}
-                    parentCommentId={parentId || comment.id}
-                    currentUserId={currentUser && currentUser.id}
-                  />
-                </ActionButton>}
+                  /* TopRightMenu allows currentUser to ignore other users' comments */
+                  <span className={cn(styles.topRight, styles.topRightMenu)}>
+                    <TopRightMenu
+                      comment={comment}
+                      ignoreUser={ignoreUser}
+                      addNotification={addNotification} />
+                  </span>
+              }
+              { !isActive &&
+                <InactiveCommentLabel status={comment.status}/>
+              }
             </div>
-            <div className="commentActionsRight comment__action-container">
-              <Slot
-                fill="commentActions"
-                wrapperComponent={ActionButton}
-                data={this.props.data}
-                root={this.props.root}
-                asset={asset}
-                comment={comment}
-                commentId={comment.id}
-                inline
-              />
-              <ActionButton>
-                <FlagComment
-                  flaggedByCurrentUser={!!myFlag}
-                  flag={myFlag}
-                  id={comment.id}
-                  author_id={comment.user.id}
-                  postFlag={postFlag}
-                  addNotification={addNotification}
-                  postDontAgree={postDontAgree}
-                  deleteAction={deleteAction}
-                  showSignInDialog={showSignInDialog}
-                  currentUser={currentUser}
-                />
-              </ActionButton>
+            <div className={styles.content}>
+              {
+                this.state.isEditing
+                ? <EditableCommentContent
+                    editComment={this.editComment}
+                    addNotification={addNotification}
+                    comment={comment}
+                    currentUser={currentUser}
+                    charCountEnable={charCountEnable}
+                    maxCharCount={maxCharCount}
+                    parentId={parentId}
+                    stopEditing={this.stopEditing}
+                    />
+                : <div>
+                  <Slot
+                    fill="commentContent"
+                    defaultComponent={CommentContent}
+                    {...slotProps}
+                    queryData={queryData}
+                  />
+                  </div>
+              }
+            </div>
+            <div className={cn(styles.footer, 'talk-stream-comment-footer')}>
+              {isActive &&
+                <div className={'talk-stream-comment-actions-container'}>
+                  <div className="commentActionsLeft comment__action-container">
+                    <Slot
+                      fill="commentReactions"
+                      {...slotProps}
+                      queryData={queryData}
+                      inline
+                    />
+                    {!disableReply &&
+                      <ActionButton>
+                        <ReplyButton
+                          onClick={this.showReplyBox}
+                          parentCommentId={parentId || comment.id}
+                          currentUserId={currentUser && currentUser.id}
+                        />
+                      </ActionButton>}
+                  </div>
+                  <div className="commentActionsRight comment__action-container">
+                    <Slot
+                      fill="commentActions"
+                      wrapperComponent={ActionButton}
+                      {...slotProps}
+                      queryData={queryData}
+                      inline
+                    />
+                    <ActionButton>
+                      <FlagComment
+                        flaggedByCurrentUser={!!myFlag}
+                        flag={myFlag}
+                        id={comment.id}
+                        author_id={comment.user.id}
+                        postFlag={postFlag}
+                        addNotification={addNotification}
+                        postDontAgree={postDontAgree}
+                        deleteAction={deleteAction}
+                        showSignInDialog={showSignInDialog}
+                        currentUser={currentUser}
+                      />
+                    </ActionButton>
+                  </div>
+                </div>
+              }
             </div>
           </div>
         </div>
 
-          {activeReplyBox === comment.id
-            ? <ReplyBox
-                commentPostedHandler={() => {
-                  setActiveReplyBox('');
-                }}
+        {activeReplyBox === comment.id
+          ? <ReplyBox
+              commentPostedHandler={this.commentPostedHandler}
+              charCountEnable={charCountEnable}
+              maxCharCount={maxCharCount}
+              setActiveReplyBox={setActiveReplyBox}
+              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+              addNotification={addNotification}
+              postComment={postComment}
+              currentUser={currentUser}
+              assetId={asset.id}
+            />
+          : null}
+
+        <TransitionGroup>
+        {view.map((reply) => {
+          return commentIsIgnored(reply)
+            ? <IgnoredCommentTombstone key={reply.id} />
+            : <CommentContainer
+                data={this.props.data}
+                root={this.props.root}
+                setActiveReplyBox={setActiveReplyBox}
+                disableReply={disableReply}
+                activeReplyBox={activeReplyBox}
+                addNotification={addNotification}
+                parentId={comment.id}
+                postComment={postComment}
+                editComment={this.props.editComment}
+                depth={depth + 1}
+                asset={asset}
+                highlighted={highlighted}
+                currentUser={currentUser}
+                postFlag={postFlag}
+                deleteAction={deleteAction}
+                loadMore={loadMore}
+                ignoreUser={ignoreUser}
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
-                setActiveReplyBox={setActiveReplyBox}
-                parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-                addNotification={addNotification}
-                postComment={postComment}
-                currentUser={currentUser}
-                assetId={asset.id}
-              />
-            : null}
-
-          <TransitionGroup>
-          {view.map((reply) => {
-            return commentIsIgnored(reply)
-              ? <IgnoredCommentTombstone key={reply.id} />
-              : <Comment
-                  data={this.props.data}
-                  root={this.props.root}
-                  setActiveReplyBox={setActiveReplyBox}
-                  disableReply={disableReply}
-                  activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
-                  parentId={comment.id}
-                  postComment={postComment}
-                  editComment={this.props.editComment}
-                  depth={depth + 1}
-                  asset={asset}
-                  highlighted={highlighted}
-                  currentUser={currentUser}
-                  postFlag={postFlag}
-                  deleteAction={deleteAction}
-                  addTag={addTag}
-                  removeTag={removeTag}
-                  loadMore={loadMore}
-                  ignoreUser={ignoreUser}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  showSignInDialog={showSignInDialog}
-                  commentIsIgnored={commentIsIgnored}
-                  liveUpdates={liveUpdates}
-                  reactKey={reply.id}
-                  key={reply.id}
-                  comment={reply}
-                />;
-          })}
-          </TransitionGroup>
-          <div className="talk-load-more-replies">
-            <LoadMore
-              topLevel={false}
-              replyCount={moreRepliesCount}
-              moreComments={hasMoreComments}
-              loadMore={this.loadNewReplies}
-              loadingState={loadingState}
-            />
+                showSignInDialog={showSignInDialog}
+                commentIsIgnored={commentIsIgnored}
+                liveUpdates={liveUpdates}
+                reactKey={reply.id}
+                key={reply.id}
+                comment={reply}
+                emit={emit}
+              />;
+        })}
+        </TransitionGroup>
+        <div className="talk-load-more-replies">
+          <LoadMore
+            topLevel={false}
+            replyCount={moreRepliesCount}
+            moreComments={hasMoreComments}
+            loadMore={this.loadNewReplies}
+            loadingState={loadingState}
+          />
         </div>
       </div>
     );