Fix merge conflict

.dockerignore

@@ -6,7 +6,7 @@ node_modules
 scripts
 !scripts/generateIntrospectionResult.js
 
-# documentation should not be visable in production.
+# documentation should not be visible in production.
 docs
 
 # static assets are rebuild in the docker container.
@@ -14,6 +14,7 @@ dist
 
 # tests are not run in the docker container.
 test
+__tests__
 
 # we won't use the .git folder in production.
 .git

.eslintignore

@@ -1,6 +1,5 @@
 dist
 docs
-client/lib
 **/*.html
 plugins/*
 !plugins/talk-plugin-facebook-auth
@@ -14,5 +13,11 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
 
 node_modules

.eslintrc.json

@@ -7,51 +7,53 @@
     "parserOptions": {
         "ecmaVersion": 2017
     },
+    "plugins": [
+      "promise",
+      "json"
+    ],
     "rules": {
         "indent": ["error",
             2
         ],
-        "no-console": [
-            0
-        ],
+        "no-console": "off",
         "linebreak-style": ["error", "unix"],
         "quotes": ["error", "single"],
         "semi": ["error", "always"],
-        "no-template-curly-in-string": [1],
-        "no-unsafe-negation": [1],
-        "array-callback-return": [1],
+        "no-template-curly-in-string": "warn",
+        "no-unsafe-negation": "warn",
+        "array-callback-return": "warn",
         "arrow-parens": ["warn", "always"],
         "template-curly-spacing": "warn",
-        "eqeqeq": [2, "smart"],
-        "no-eval": [2],
-        "no-global-assign": [2],
-        "no-implied-eval": [2],
+        "eqeqeq": ["error", "smart"],
+        "no-eval": "error",
+        "no-global-assign": "error",
+        "no-implied-eval": "error",
         "lines-around-comment": ["warn", {"beforeLineComment": true}],
         "spaced-comment": ["warn", "always", { "line": { "exceptions": ["-", "="] } }],
-        "no-script-url": [2],
-        "no-throw-literal": [2],
-        "yoda": [1],
-        "no-path-concat": [2],
-        "eol-last": [1],
-        "no-nested-ternary": [1],
-        "no-tabs": [2],
-        "no-unneeded-ternary": [1],
-        "object-curly-spacing": [1],
+        "no-script-url": "error",
+        "no-throw-literal": "error",
+        "yoda": "warn",
+        "no-path-concat": "error",
+        "eol-last": "warn",
+        "no-nested-ternary": "warn",
+        "no-tabs": "error",
+        "no-unneeded-ternary": "warn",
+        "object-curly-spacing": "warn",
         "space-infix-ops": ["error"],
         "space-in-parens": ["error", "never"],
         "space-unary-ops": ["error", {
           "words": true,
           "nonwords": false
         }],
-        "no-const-assign": [2],
-        "no-duplicate-imports": [2],
-        "prefer-template": [1],
+        "no-const-assign": "error",
+        "no-duplicate-imports": "error",
+        "prefer-template": "warn",
         "comma-spacing": ["error", {
             "after": true
         }],
-        "no-var": [2],
-        "no-lonely-if": [2],
-        "curly": [2],
+        "no-var": "error",
+        "no-lonely-if": "error",
+        "curly": "error",
         "no-unused-vars": ["error", {
             "argsIgnorePattern": "^_|next",
             "varsIgnorePattern": "^_"
@@ -61,6 +63,13 @@
         }],
         "newline-per-chained-call": ["error", {
             "ignoreChainWithDepth": 2
-        }]
+        }],
+        "promise/no-return-wrap": "error",
+        "promise/param-names": "error",
+        "promise/catch-or-return": "error",
+        "promise/no-native": "off",
+        "promise/no-nesting": "warn",
+        "promise/no-promise-in-callback": "warn",
+        "promise/no-callback-in-promise": "warn"
     }
 }

.gitignore

@@ -14,7 +14,6 @@ client/coral-framework/graphql/introspection.json
 *.swp
 *.DS_STORE
 
-test/e2e/reports
 coverage/
 
 plugins.json
@@ -31,5 +30,12 @@ plugins/*
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
 !plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
+
 **/node_modules/*
 story.html

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8
+FROM node:8-alpine
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -12,6 +12,9 @@ EXPOSE 5000
 # Bundle app source
 COPY . /usr/src/app
 
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
@@ -19,7 +22,4 @@ RUN yarn global add node-gyp && \
     yarn build && \
     yarn cache clean
 
-# Ensure the runtime of the container is in production mode.
-ENV NODE_ENV production
-
 CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -7,8 +7,5 @@ ONBUILD COPY . /usr/src/app
 # we need to have webpack available. We then build the new dependancies and
 # clear out the development dependancies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
-ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
-            NODE_ENV=production  cli plugins reconcile && \
-            NODE_ENV=production  yarn build && \
-            NODE_ENV=production  yarn install --production --force && \
-            yarn cache clean
+ONBUILD RUN cli plugins reconcile && \
+            yarn build

README.md

@@ -1,4 +1,5 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 
 Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
@@ -19,7 +20,7 @@ endpoint when the server is running with built assets.
 
 - Blog: https://blog.coralproject.net
 
-- Community Guides for Journalism: https://guides.coralproject.net/ 
+- Community Guides for Journalism: https://guides.coralproject.net/
 
 ## License
 

app.json

@@ -1,10 +1,15 @@
 {
     "name": "The Coral Project: Talk",
     "env": {
-        "TALK_SESSION_SECRET": {
+        "TALK_JWT_SECRET": {
             "description": "The session secret",
             "generator": "secret"
         },
+        "TALK_ROOT_URL": {
+            "description": "Please copy the App Name you choose above. If you did not choose one, please do so now and copy it here. Talk on Heroku will not work without this setting.",
+            "value":"https://<COPY APP NAME HERE>.herokuapp.com",
+            "required": true
+        },
         "TALK_FACEBOOK_APP_ID": {
             "value": "",
             "required": true
@@ -14,8 +19,7 @@
             "required": true
         },
         "NODE_ENV": "production",
-        "TALK_SMTP_PORT": "2525",
-        "REWRITE_ENV": "TALK_PORT:PORT,TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:POSTMARK_SMTP_SERVER,TALK_SMTP_USERNAME:POSTMARK_API_TOKEN,TALK_SMTP_PASSWORD:POSTMARK_API_TOKEN",
+        "REWRITE_ENV": "TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:MAILGUN_SMTP_SERVER,TALK_SMTP_PORT:MAILGUN_SMTP_PORT,TALK_SMTP_USERNAME:MAILGUN_SMTP_LOGIN,TALK_SMTP_PASSWORD:MAILGUN_SMTP_PASSWORD",
         "NPM_CONFIG_PRODUCTION": "false"
     },
     "addons": [{
@@ -25,8 +29,8 @@
         "plan": "rediscloud:30",
         "as": "REDIS"
     }, {
-        "plan": "postmark:10k",
-        "as": "POSTMARK"
+        "plan": "mailgun:starter",
+        "as": "MAILGUN"
     }],
     "image": "heroku/nodejs",
     "success_url": "/admin/install"

bin/cli

@@ -4,8 +4,9 @@
  * Module dependencies.
  */
 
-// const util = require('./util');
 const program = require('./commander');
+const {head, map} = require('lodash');
+const Matcher = require('did-you-mean');
 
 program
   .command('serve', 'serve the application')
@@ -16,12 +17,28 @@ program
   .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
+  .command('verify', 'provides utilities for performing data verification')
   .command(
     'plugins',
     'provides utilities for interacting with the plugin system'
   )
   .parse(process.argv);
 
+// If the command wasn't found, output help.
+const cmds = map(program.commands, '_name');
+const cmd = head(program.args);
+if (!cmds.includes(cmd)) {
+  const m = new Matcher(cmds);
+  const similarCMDs = m.list(cmd);
+
+  console.error(`cli '${cmd}' is not a talk cli command. See 'cli --help'.`);
+  if (similarCMDs.length > 0) {
+    const sc = similarCMDs.map(({value}) => `\t${value}\n`).join('');
+    console.error(`\nThe most similar commands are\n${sc}`);
+  }
+  process.exit(1);
+}
+
 /**
  * When this provess exists, check to see if we have a running command, if we do
  * check to see if it is still running. If it is, then kill it with a SIGINT
@@ -30,6 +47,8 @@ program
  */
 process.once('exit', () => {
   if (
+
+    // program.runningCommand &&
     program.runningCommand.killed === false &&
     program.runningCommand.exitCode === null
   ) {

bin/cli-jobs

@@ -78,18 +78,23 @@ function rangeJobsByState(state = 'complete', limit) {
 /**
  * Cleans up the jobs that are in the queue.
  */
-function cleanupJobs(options) {
+async function cleanupJobs(options) {
   const n = 100;
 
-  Promise.all([
-    rangeJobsByState('complete', n),
-    options.stuck ? rangeJobsByState('failed', n) : false
-  ])
-  .then((joblists) => joblists.filter((jobs) => jobs).map(removeJobs))
-  .then(() => {
+  try {
+    const joblists = await Promise.all([
+      rangeJobsByState('complete', n),
+      options.stuck ? rangeJobsByState('failed', n) : false
+    ]);
+
+    await joblists.filter((jobs) => jobs).map(removeJobs);
+
     util.shutdown();
     console.log('Removed old jobs');
-  });
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
 }
 
 //==============================================================================

bin/cli-plugins

@@ -53,7 +53,7 @@ function versionMatch(name, version) {
   }
 }
 
-const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+const EXTERNAL = /^\w[a-z\-0-9.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
 
 function reconcilePackages({quiet = false, upgradeRemote = false}) {
   const fetchable = [];

bin/cli-users

@@ -98,39 +98,32 @@ function getUserCreateAnswers(options) {
 /**
  * Prompts for input and registers a user based on those.
  */
-function createUser(options) {
-  getUserCreateAnswers(options)
-    .then((answers) => {
-      if (answers.password !== answers.confirmPassword) {
-        return Promise.reject(new Error('Passwords do not match'));
-      }
+async function createUser(options) {
+  try {
+    const answers = await getUserCreateAnswers(options);
+    if (answers.password !== answers.confirmPassword) {
+      throw new Error('Passwords do not match');
+    }
 
-      return answers;
-    })
-    .then((answers) => {
-      return UsersService
-        .createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim())
-        .then((user) => {
-          console.log(`Created user ${user.id}.`);
+    const user = await UsersService.createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim());
+    console.log(`Created user ${user.id}.`);
 
-          if (answers.roles.length > 0) {
-            return Promise.all(answers.roles.map((role) => {
-              return UsersService
-                .addRoleToUser(user.id, role)
-                .then(() => {
-                  console.log(`Added the role ${role} to User ${user.id}.`);
-                });
-            }));
-          }
-        });
-    })
-    .then(() => {
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown();
-    });
+    if (answers.roles.length > 0) {
+      return Promise.all(answers.roles.map((role) => {
+        return UsersService
+          .addRoleToUser(user.id, role)
+          .then(() => {
+            console.log(`Added the role ${role} to User ${user.id}.`);
+          });
+      }));
+    }
+
+    util.shutdown();
+
+  } catch (err) {
+    console.error(err);
+    util.shutdown();
+  }
 }
 
 /**
@@ -169,21 +162,21 @@ function passwd(userID) {
       validate: validateRequired('Confirm Password is required')
     }
   ])
-  .then((answers) => {
-    if (answers.password !== answers.confirmPassword) {
-      return Promise.reject(new Error('Password mismatch'));
-    }
+    .then((answers) => {
+      if (answers.password !== answers.confirmPassword) {
+        throw new Error('Password mismatch');
+      }
 
-    return UsersService.changePassword(userID, answers.password);
-  })
-  .then(() => {
-    console.log('Password changed.');
-    util.shutdown();
-  })
-  .catch((err) => {
-    console.error(err);
-    util.shutdown(1);
-  });
+      return UsersService.changePassword(userID, answers.password);
+    })
+    .then(() => {
+      console.log('Password changed.');
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown(1);
+    });
 }
 
 /**

bin/cli-verify

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const program = require('./commander');
+const mongoose = require('../services/mongoose');
+const util = require('./util');
+const databaseVerifications = require('./verifications/database');
+
+// Register the shutdown criteria.
+util.onshutdown([
+  () => mongoose.disconnect()
+]);
+
+async function database({fix = false, limit = Infinity, batch = 1000}) {
+  try {
+    for (const verification of databaseVerifications) {
+      await verification({fix, limit, batch});
+    }
+  } catch (err) {
+    console.error(`Failed to process all the ${databaseVerifications.length} verifications`, err);
+    util.shutdown(1);
+    return;
+  }
+
+  util.shutdown();
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('db')
+  .description('verifies the database integrity')
+  .option('-f, --fix', 'fix the problems found with database inconsistencies')
+  .option('-l, --limit [size]', 'limit the amount of documents to process in a single pass, this will ensure only a maximum number of batch operations are issued [default: inf]', parseInt)
+  .option('-b, --batch [size]', 'batch size to process verifications and repairs of documents [default: 1000]', parseInt)
+  .action(database);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/verifications/database/comments.js

@@ -0,0 +1,193 @@
+const CommentModel = require('../../../models/comment');
+const ActionsService = require('../../../services/actions');
+const {arrayJoinBy, singleJoinBy} = require('../../../graph/loaders/util');
+const sc = require('snake-case');
+const debug = require('debug')('talk:cli:verify');
+
+const getBatch = async (limit, offset) => CommentModel
+  .find({})
+  .select({'id': 1, 'action_counts': 1, 'reply_count': 1})
+  .limit(limit)
+  .skip(offset)
+  .sort('created_at');
+
+module.exports = async ({fix, limit, batch}) => {
+  let operations = [];
+
+  // Count how many comments there are to process.
+  const totalCount = await CommentModel.count();
+
+  let offset = 0;
+  let comments = [];
+  let commentIDs = [];
+
+  console.log(`Processing ${totalCount} comments in batches of ${limit}...`);
+
+  // Keep processing documents until there are is none left.
+  while (offset < totalCount) {
+
+    // Get a batch of comments.
+    comments = await getBatch(batch, offset);
+    commentIDs = comments.map(({id}) => id);
+
+    // Get their reply counts.
+    let allReplyCounts = await CommentModel
+      .aggregate([
+        {
+          $match: {
+            parent_id: {
+              $in: commentIDs,
+            },
+            status: {
+              $in: ['NONE', 'ACCEPTED']
+            }
+          }
+        },
+        {
+          $group: {
+            _id: '$parent_id',
+            count: {
+              $sum: 1
+            }
+          }
+        }
+      ])
+      .then(singleJoinBy(commentIDs, '_id'))
+      .then((results) => results.map((result) => result ? result.count : 0));
+
+    // Get their action summaries.
+    let allActionSummaries = await ActionsService
+      .getActionSummaries(commentIDs)
+      .then(arrayJoinBy(commentIDs, 'item_id'));
+
+    // Loop over the comments, with their action summaries.
+    for (let i = 0; i < comments.length; i++) {
+      let comment = comments[i];
+      let actionSummaries = allActionSummaries[i];
+      let replyCount = allReplyCounts[i];
+
+      // And check to see if the action summaries we just computed match what is
+      // currently set for the comments.
+      let commentOperations = [];
+
+      // If the reply count needs to be updated, then update it!
+      if (comment.reply_count !== replyCount) {
+        commentOperations.push({
+          reply_count: replyCount,
+        });
+      }
+
+      // First we process all the group id's.
+      for (let actionSummary of actionSummaries) {
+        if (actionSummary.group_id === null) {
+          continue;
+        }
+
+        // And we generate the group id.
+        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+        const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
+
+        if (GROUP_ID.length <= 0) {
+          continue;
+        }
+
+        // And we add a new batch operation if the action summary is associated
+        // with a group.
+        const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
+
+        // Check that the action summaries match the cached counts.
+        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count) {
+
+          // Batch updates for those changes.
+          commentOperations.push({
+            [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
+          });
+        }
+      }
+
+      // Group all the action summaries together from all the different group
+      // ids.
+      let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
+        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+
+        if (!(ACTION_TYPE in acc)) {
+          acc[ACTION_TYPE] = 0;
+        }
+
+        acc[ACTION_TYPE] += actionSummary.count;
+
+        return acc;
+      }, {});
+
+      for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
+        const count = groupedActionSummaries[ACTION_COUNT_FIELD];
+
+        // Check that the action summaries match the cached counts.
+        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== count) {
+
+          // Batch updates for those changes.
+          commentOperations.push({
+            [`action_counts.${ACTION_COUNT_FIELD}`]: count,
+          });
+        }
+      }
+
+      // If this comment has action summaries that should be updated, then
+      // perform an update!
+      if (commentOperations.length > 0) {
+        operations.push({
+          updateOne: {
+            filter: {
+              id: comment.id
+            },
+            update: {
+              $set: Object.assign({}, ...commentOperations),
+            },
+          },
+        });
+      }
+    }
+
+    debug(`Processed batch of ${comments.length} comments.`);
+
+    if (operations.length >= limit) {
+      debug(`Queued operations are ${operations.length}, reached limit of ${limit}, not processing any more.`);
+
+      if (operations.length > limit) {
+        debug(`${operations.length - limit} operations have been truncated to enforce the limit`);
+      }
+
+      break;
+    }
+
+    offset += batch;
+  }
+
+  const OPERATIONS_LENGTH = operations.length;
+
+  if (limit < Infinity && offset + comments.length < totalCount) {
+    console.log(`Processed ${offset + comments.length}/${totalCount} comments because we reached the update limit of ${limit}.`);
+  } else {
+    console.log(`Processed all ${totalCount} comments.`);
+  }
+
+  console.log(`${OPERATIONS_LENGTH} documents need fixing.`);
+
+  // If fix was enabled, execute the batch writes.
+  if (OPERATIONS_LENGTH > 0) {
+    if (fix) {
+      debug(`Fixing ${OPERATIONS_LENGTH} documents...`);
+
+      while (operations.length) {
+        let batchOperations = operations.splice(0, batch);
+        let result = await CommentModel.collection.bulkWrite(batchOperations);
+
+        debug(`Fixed batch of ${result.modifiedCount} documents.`);
+      }
+
+      console.log(`Applied all ${OPERATIONS_LENGTH} fixes.`);
+    } else {
+      console.warn('Skipping fixing, --fix was not enabled, pass --fix to fix these errors');
+    }
+  }
+};

bin/verifications/database/index.js

@@ -0,0 +1,12 @@
+// This will import all the verifications that should be run by the:
+//
+//   cli verify database
+//
+// command. They exist in the form:
+//
+//   async ({fix = false, batch = 1000}) => {}
+//
+// where their options are derrived.
+module.exports = [
+  require('./comments'),
+];

circle.yml

@@ -40,8 +40,6 @@ test:
   override:
     # Run the tests using the junit reporter.
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
-    # Run the e2e test suite.
-    # - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e
 
 deployment:
   release:

client/.babelrc

@@ -9,6 +9,7 @@
     "transform-object-assign",
     "transform-object-rest-spread",
     "transform-async-to-generator",
-    "transform-react-jsx"
+    "transform-react-jsx",
+    "syntax-dynamic-import"
   ]
 }

client/.eslintrc.json

@@ -4,6 +4,7 @@
         "es6": true,
         "mocha": true
     },
+    "extends": "../.eslintrc.json",
     "parserOptions": {
         "sourceType": "module",
         "ecmaFeatures": {

client/coral-admin/src/AppRouter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
-import {history} from 'coral-framework/helpers/router';
+import PropTypes from 'prop-types';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
@@ -47,6 +47,14 @@ const routes = (
   </div>
 );
 
-const AppRouter = () => <Router history={history} routes={routes}/>;
+class AppRouter extends React.Component {
+  static contextTypes = {
+    history: PropTypes.object,
+  };
+
+  render() {
+    return <Router history={this.context.history} routes={routes} />;
+  }
+}
 
 export default AppRouter;

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

@@ -8,7 +8,6 @@ import {
   UPDATE_ASSETS
 } from '../constants/assets';
 
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 /**
@@ -17,9 +16,9 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch) => {
+export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch, _, {rest}) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
-  return coralApi(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
+  return rest(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
     .then(({result, count}) =>
       dispatch({type: FETCH_ASSETS_SUCCESS,
         assets: result,
@@ -34,9 +33,9 @@ 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) => {
+export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
   dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
-  return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
+  return rest(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
     .then(() => dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
     .catch((error) => {
       console.error(error);

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

@@ -1,16 +1,13 @@
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import coralApi from 'coral-framework/helpers/request';
-import * as Storage from 'coral-framework/helpers/storage';
-import {handleAuthToken} from 'coral-framework/actions/auth';
-import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
+import jwtDecode from 'jwt-decode';
 
 //==============================================================================
 // SIGN IN
 //==============================================================================
 
-export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
+export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _, {rest, client, storage}) => {
   dispatch({type: actions.LOGIN_REQUEST});
 
   const params = {
@@ -27,18 +24,18 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch) =>
     };
   }
 
-  return coralApi('/auth/local', params)
+  return rest('/auth/local', params)
     .then(({user, token}) => {
 
       if (!user) {
-        if (!bowser.safari && !bowser.ios) {
-          Storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios && storage) {
+          storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
       dispatch(handleAuthToken(token));
-      resetWebsocket();
+      client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -84,11 +81,11 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const requestPasswordReset = (email) => (dispatch) => {
+export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
-  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
+  return rest('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPasswordSuccess()))
     .catch((error) => {
       console.error(error);
@@ -116,18 +113,18 @@ const checkLoginFailure = (error) => ({
   error
 });
 
-export const checkLogin = () => (dispatch) => {
+export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
   dispatch(checkLoginRequest());
-  return coralApi('/auth')
+  return rest('/auth')
     .then(({user}) => {
       if (!user) {
-        if (!bowser.safari && !bowser.ios) {
-          Storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios && storage) {
+          storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      resetWebsocket();
+      client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -136,3 +133,33 @@ export const checkLogin = () => (dispatch) => {
       dispatch(checkLoginFailure(errorMessage));
     });
 };
+
+//==============================================================================
+// LOGOUT
+//==============================================================================
+
+export const logout = () => (dispatch, _, {rest, client, storage}) => {
+  return rest('/auth', {method: 'DELETE'}).then(() => {
+    if (storage) {
+      storage.removeItem('token');
+    }
+
+    // Reset the websocket.
+    client.resetWebsocket();
+
+    dispatch({type: actions.LOGOUT});
+  });
+};
+
+//==============================================================================
+// AUTH TOKEN
+//==============================================================================
+
+export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+  if (storage) {
+    storage.setItem('exp', jwtDecode(token).exp);
+    storage.setItem('token', token);
+  }
+  dispatch({type: 'HANDLE_AUTH_TOKEN'});
+};
+

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

@@ -14,13 +14,12 @@ import {
   HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
-export const fetchAccounts = (query = {}) => (dispatch) => {
+export const fetchAccounts = (query = {}) => (dispatch, _, {rest}) => {
 
   dispatch(requestFetchAccounts());
-  coralApi(`/users?${qs.stringify(query)}`)
+  rest(`/users?${qs.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,
@@ -51,18 +50,18 @@ export const newPage = () => ({
   type: COMMENTERS_NEW_PAGE
 });
 
-export const setRole = (id, role) => (dispatch) => {
-  return coralApi(`/users/${id}/role`, {method: 'POST', body: {role}})
-  .then(() => {
-    return dispatch({type: SET_ROLE, id, role});
-  });
+export const setRole = (id, role) => (dispatch, _, {rest}) => {
+  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
+    .then(() => {
+      return dispatch({type: SET_ROLE, id, role});
+    });
 };
 
-export const setCommenterStatus = (id, status) => (dispatch) => {
-  return coralApi(`/users/${id}/status`, {method: 'POST', body: {status}})
-  .then(() => {
-    return dispatch({type: SET_COMMENTER_STATUS, id, status});
-  });
+export const setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
+  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
+    .then(() => {
+      return dispatch({type: SET_COMMENTER_STATUS, id, status});
+    });
 };
 
 // Ban User Dialog

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

@@ -1,4 +1,3 @@
-import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
@@ -27,19 +26,19 @@ const validation = (formData, dispatch, next) => {
 
   // Required Validation
   const empty = validKeys
-  .filter((name) => {
-    const cond = !formData[name].length;
+    .filter((name) => {
+      const cond = !formData[name].length;
 
-    if (cond) {
+      if (cond) {
 
-    // Adding Error
-      dispatch(addError(name, 'This field is required.'));
-    } else {
-      dispatch(addError(name, ''));
-    }
+        // Adding Error
+        dispatch(addError(name, 'This field is required.'));
+      } else {
+        dispatch(addError(name, ''));
+      }
 
-    return cond;
-  });
+      return cond;
+    });
 
   if (empty.length) {
     dispatch(hasError());
@@ -106,10 +105,10 @@ export const submitUser = () => (dispatch, getState) => {
   });
 };
 
-export const finishInstall = () => (dispatch, getState) => {
+export const finishInstall = () => (dispatch, getState, {rest}) => {
   const data = getState().install.data;
   dispatch(installRequest());
-  return coralApi('/setup', {method: 'POST', body: data})
+  return rest('/setup', {method: 'POST', body: data})
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
@@ -129,9 +128,9 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => (dispatch) => {
+export const checkInstall = (next) => (dispatch, _, {rest}) => {
   dispatch(checkInstallRequest());
-  coralApi('/setup')
+  rest('/setup')
     .then(({installed}) => {
       dispatch(checkInstallSuccess(installed));
       if (installed) {

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

@@ -4,15 +4,17 @@ export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // hide shortcuts note
-export const hideShortcutsNote = () => {
+export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
   try {
-    window.localStorage.setItem('coral:shortcutsNote', 'hide');
+    if (storage) {
+      storage.setItem('coral:shortcutsNote', 'hide');
+    }
   } catch (e) {
 
     // above will fail in Safari private mode
   }
 
-  return {type: actions.HIDE_SHORTCUTS_NOTE};
+  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
 };
 
 export const setSortOrder = (order) => ({

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

@@ -1,4 +1,3 @@
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 export const SETTINGS_LOADING = 'SETTINGS_LOADING';
@@ -14,9 +13,9 @@ export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
 export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
 export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
 
-export const fetchSettings = () => (dispatch) => {
+export const fetchSettings = () => (dispatch, _, {rest}) => {
   dispatch({type: SETTINGS_LOADING});
-  coralApi('/settings')
+  rest('/settings')
     .then((settings) => {
       dispatch({type: SETTINGS_RECEIVED, settings});
     })
@@ -41,13 +40,13 @@ export const updateDomainlist = (listName, list) => {
   return {type: DOMAINLIST_UPDATED, listName, list};
 };
 
-export const saveSettingsToServer = () => (dispatch, getState) => {
+export const saveSettingsToServer = () => (dispatch, getState, {rest}) => {
   let settings = getState().settings;
   if (settings.charCount) {
     settings.charCount = parseInt(settings.charCount);
   }
   dispatch({type: SAVE_SETTINGS_LOADING});
-  coralApi('/settings', {method: 'PUT', body: settings})
+  rest('/settings', {method: 'PUT', body: settings})
     .then(() => {
       dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
     })

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

@@ -1,4 +1,3 @@
-import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
 import t from 'coral-framework/services/i18n';
 
@@ -7,9 +6,9 @@ import t from 'coral-framework/services/i18n';
  */
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
-  return (dispatch) => {
+  return (dispatch, _, {rest}) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
-    return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
+    return rest(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
       .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
       .catch((error) => {
         console.error(error);
@@ -21,8 +20,8 @@ export const userStatusUpdate = (status, userId, commentId) => {
 
 // change status of a user
 export const sendNotificationEmail = (userId, subject, body) => {
-  return (dispatch) => {
-    return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
+  return (dispatch, _, {rest}) => {
+    return rest(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
@@ -33,8 +32,8 @@ export const sendNotificationEmail = (userId, subject, body) => {
 
 // let a user edit their username
 export const enableUsernameEdit = (userId) => {
-  return (dispatch) => {
-    return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
+  return (dispatch, _, {rest}) => {
+    return rest(`/users/${userId}/username-enable`, {method: 'POST'})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();

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

@@ -69,23 +69,23 @@ class AdminLogin extends React.Component {
     );
     const requestPasswordForm = (
       this.props.passwordRequestSuccess
-      ? <p className={styles.passwordRequestSuccess} onClick={() => {
-        location.href = location.href;
-      }}>
+        ? <p className={styles.passwordRequestSuccess} onClick={() => {
+          location.href = location.href;
+        }}>
           {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
           <Success />
         </p>
-      : <form onSubmit={this.handleRequestPassword}>
-        <TextField
-          label='Email Address'
-          value={this.state.email}
-          onChange={(e) => this.setState({email: e.target.value})} />
-        <Button
-          type='submit'
-          cStyle='black'
-          full
-          onClick={this.handleRequestPassword}>Reset Password</Button>
-      </form>
+        : <form onSubmit={this.handleRequestPassword}>
+          <TextField
+            label='Email Address'
+            value={this.state.email}
+            onChange={(e) => this.setState({email: e.target.value})} />
+          <Button
+            type='submit'
+            cStyle='black'
+            full
+            onClick={this.handleRequestPassword}>Reset Password</Button>
+        </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>

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

@@ -17,6 +17,7 @@ export default ({suspectWords, bannedWords, body, ...rest}) => {
   return (
     <Highlighter
       {...rest}
+      autoEscape={true}
       searchWords={searchWords}
       textToHighlight={body}
     />

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

@@ -3,12 +3,11 @@
   color: white;
   background: grey;
   box-sizing: border-box;
-  padding: 0px 5px;
-  border-radius: 2px;
+  padding: 2px 5px;
   font-size: 12px;
   height: 24px;
   letter-spacing: 0.4px;
-  margin-bottom: 1px;
+  line-height: 22px;
   
   > i {
     font-size: 14px;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Badge} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+
+const ReplyBadge = () => (
+  <Badge icon="reply">
+    {t('modqueue.reply')}
+  </Badge>
+);
+
+export default ReplyBadge;

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

@@ -65,7 +65,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_suspend')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_suspend', username)}
+          {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
@@ -103,7 +103,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_notify')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_notify', username)}
+          {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>

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

@@ -139,29 +139,29 @@ export default class UserDetail extends React.Component {
           <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>
-            )
+              ? (
+                <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>
@@ -190,7 +190,7 @@ export default class UserDetail extends React.Component {
             className={styles.loadMore}
             loadMore={loadMore}
             showLoadMore={hasNextPage}
-            />
+          />
         </Drawer>
       </ClickOutside>
     );

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

@@ -55,7 +55,7 @@
   position: relative;
 }
 
-.commentType {
+.badgeBar {
   position: absolute;
   right: 0px;
 }

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

@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
 import FlagBox from './FlagBox';
+import ReplyBadge from './ReplyBadge';
 import styles from './UserDetailComment.css';
 import CommentType from './CommentType';
 import {getActionSummary} from 'coral-framework/utils';
@@ -53,10 +54,14 @@ class UserDetailComment extends React.Component {
             </span>
             {
               (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
             }
-            <CommentType type={commentType} className={styles.commentType}/>
+
+            <div className={styles.badgeBar}>
+              {comment.hasParent && <ReplyBadge/>}
+              <CommentType type={commentType}/>
+            </div>
           </div>
           <div className={styles.story}>
             Story: {comment.asset.title}
@@ -116,10 +121,10 @@ class UserDetailComment extends React.Component {
         </div>
         {flagActions && flagActions.length
           ? <FlagBox
-              actions={flagActions}
-              actionSummaries={flagActionSummaries}
-              viewUserDetail={viewUserDetail}
-            />
+            actions={flagActions}
+            actionSummaries={flagActionSummaries}
+            viewUserDetail={viewUserDetail}
+          />
           : null}
       </li>
     );

client/coral-admin/src/components/ui/Header.js

@@ -13,9 +13,9 @@ const CoralHeader = ({
 }) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
-      <div>
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+    <div>
+      {
+        auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
           <Navigation className={styles.nav}>
             <IndexLink
               id='dashboardNav'
@@ -63,36 +63,36 @@ const CoralHeader = ({
           </Navigation>
           :
           null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank">
+      }
+      <div className={styles.rightPanel}>
+        <ul>
+          <li className={styles.settings}>
+            <div>
+              <IconButton name="settings" id="menu-settings"/>
+              <Menu target="menu-settings" align="right">
+                <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                <MenuItem>
+                  <a href="https://github.com/coralproject/talk/releases" target="_blank">
                       View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
+                  </a>
+                </MenuItem>
+                <MenuItem>
+                  <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
                       Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>        
-             {`v${process.env.VERSION}`}        
-            </li>
-          </ul>
-        </div>
+                  </a>
+                </MenuItem>
+                <MenuItem onClick={handleLogout}>
+                  {t('configure.sign_out')}
+                </MenuItem>
+              </Menu>
+            </div>
+          </li>
+          <li>        
+            {`v${process.env.VERSION}`}        
+          </li>
+        </ul>
       </div>
+    </div>
   </Header>
 );
 

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

@@ -3,12 +3,11 @@ import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
-import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
-import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
+import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 
@@ -56,10 +55,10 @@ class LayoutContainer extends Component {
           toggleShortcutModal={toggleShortcutModal}
           {...this.props}
         >
-        <BanUserDialog />
-        <SuspendUserDialog />
-        <UserDetail />
-        {this.props.children}
+          <BanUserDialog />
+          <SuspendUserDialog />
+          <UserDetail />
+          {this.props.children}
         </Layout>
       );
     } else if (loggedIn) {

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

@@ -5,22 +5,24 @@ import SuspendUserDialog from '../components/SuspendUserDialog';
 import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
 import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
 import {compose, gql} from 'react-apollo';
-import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getErrorMessages} from 'coral-framework/utils';
 import get from 'lodash/get';
+import {notify} from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
 
   suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
     hideSuspendUserDialog();
     try {
       const result = await suspendUser({id: userId, message, until});
       if (result.data.suspendUser.errors) {
         throw result.data.suspendUser.errors;
       }
-      notification.success(
+      notify(
+        'success',
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
@@ -33,7 +35,7 @@ class SuspendUserDialogContainer extends Component {
       }
     }
     catch(err) {
-      notification.showMutationErrors(err);
+      notify('error', getErrorMessages(err));
     }
   };
 
@@ -69,6 +71,7 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
+    notify,
   }, dispatch),
 });
 

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

@@ -88,13 +88,13 @@ class UserDetailContainer extends React.Component {
         });
       }
     })
-    .then(() => {
-      this.isLoadingMore = false;
-    })
-    .catch((err) => {
-      this.isLoadingMore = false;
-      throw err;
-    });
+      .then(() => {
+        this.isLoadingMore = false;
+      })
+      .catch((err) => {
+        this.isLoadingMore = false;
+        throw err;
+      });
   };
 
   componentWillReceiveProps(next) {
@@ -124,7 +124,7 @@ class UserDetailContainer extends React.Component {
 }
 
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
       ...CoralAdmin_Moderation_CommentConnection
     }

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

@@ -9,6 +9,7 @@ export default withFragments({
       body
       created_at
       status
+      hasParent
       asset {
         id
         title

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

@@ -1,6 +1,4 @@
-import {add} from 'coral-framework/services/graphqlRegistry';
-
-const extension = {
+export default {
   mutations: {
     SetUserStatus: () => ({
       refetchQueries: ['CoralAdmin_Community'],
@@ -11,4 +9,3 @@ const extension = {
   },
 };
 
-add(extension);

client/coral-admin/src/index.js

@@ -1,32 +1,34 @@
 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 'coral-framework/services/client';
-import store from './services/store';
-
+import TalkProvider from 'coral-framework/components/TalkProvider';
+import {createContext} from 'coral-framework/services/bootstrap';
+import reducers from './reducers';
 import App from './components/App';
-
 import 'react-mdl/extra/material.js';
-import './graphql';
-import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+import graphqlExtension from './graphql';
+import pluginsConfig from 'pluginsConfig';
+import {toast} from 'react-toastify';
+import {createNotificationService} from './services/notification';
+import {hideShortcutsNote} from './actions/moderation';
 
-const eventEmitter = new EventEmitter();
+function hidrateStore({store, storage}) {
+  if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
+    store.dispatch(hideShortcutsNote());
+  }
+}
 
-// TODO: pass redux actions through the emitter.
-
-loadPluginsTranslations();
-injectPluginsReducers();
 smoothscroll.polyfill();
 
+const notification = createNotificationService(toast);
+const context = createContext({reducers, graphqlExtension, pluginsConfig, notification});
+
+// hidrate Store with external data.
+hidrateStore(context);
+
 render(
-  <EventEmitterProvider eventEmitter={eventEmitter}>
-    <ApolloProvider client={getClient()} store={store}>
-      <App />
-    </ApolloProvider>
-  </EventEmitterProvider>
+  <TalkProvider {...context}>
+    <App />
+  </TalkProvider>
   , document.querySelector('#root')
 );

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

@@ -5,14 +5,17 @@ const initialState = {
   modalOpen: false,
   storySearchVisible: false,
   storySearchString: '',
-  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
-  sortOrder: 'REVERSE_CHRONOLOGICAL',
+  shortcutsNoteVisible: 'show',
+  sortOrder: 'DESC',
 };
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
-    return initialState;
+    return {
+      ...initialState,
+      shortcutsNoteVisible: state.shortcutsNoteVisible,
+    };
   case actions.TOGGLE_MODAL:
     return {
       ...state,

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

@@ -14,21 +14,21 @@ const FlaggedAccounts = (props) => {
       <div className={styles.mainFlaggedContent}>
         {
           hasResults
-          ? commenters.map((commenter, index) => {
-            return <User
-              user={commenter}
-              key={index}
-              index={index}
-              modActionButtons={['APPROVE', 'REJECT']}
-              showBanUserDialog={props.showBanUserDialog}
-              showSuspendUserDialog={props.showSuspendUserDialog}
-              showRejectUsernameDialog={props.showRejectUsernameDialog}
-              approveUser={props.approveUser}
-              currentUser={props.currentUser}
-              viewUserDetail={props.viewUserDetail}
+            ? commenters.map((commenter, index) => {
+              return <User
+                user={commenter}
+                key={index}
+                index={index}
+                modActionButtons={['APPROVE', 'REJECT']}
+                showBanUserDialog={props.showBanUserDialog}
+                showSuspendUserDialog={props.showSuspendUserDialog}
+                showRejectUsernameDialog={props.showRejectUsernameDialog}
+                approveUser={props.approveUser}
+                currentUser={props.currentUser}
+                viewUserDetail={props.viewUserDetail}
               />;
-          })
-          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
+            })
+            : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
         }
       </div>
     </div>

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

@@ -45,12 +45,12 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
       <div className={styles.mainContent}>
         {
           hasResults
-          ? <Table
+            ? <Table
               headers={tableHeaders}
               commenters={commenters}
               onHeaderClickHandler={props.onHeaderClickHandler}
             />
-          : <EmptyCard>{t('community.no_results')}</EmptyCard>
+            : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
         <Pager
           totalPages={props.totalPages}

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

@@ -50,9 +50,9 @@ class RejectUsernameDialog extends Component  {
     const next = () => this.setState({stage: stage + 1});
     const suspend = () => {
       rejectUsername({id: user.user.id, message: this.state.email})
-      .then(() => {
-        this.props.handleClose();
-      });
+        .then(() => {
+          this.props.handleClose();
+        });
     };
 
     const suspendModalActions = [
@@ -71,21 +71,21 @@ class RejectUsernameDialog extends Component  {
     const {stage} = this.state;
 
     return <Dialog
-            className={styles.suspendDialog}
-            id="rejectUsernameDialog"
-            open={open}
-            onClose={handleClose}
-            onCancel={handleClose}
-            title={t('reject_username.suspend_user')}>
-            <div className={styles.title}>
-              {t(stages[stage].title, t('reject_username.username'))}
-            </div>
-            <div className={styles.container}>
-              <div className={styles.description}>
-                {t(stages[stage].description, t('reject_username.username'))}
-              </div>
-              {
-                stage === 1 &&
+      className={styles.suspendDialog}
+      id="rejectUsernameDialog"
+      open={open}
+      onClose={handleClose}
+      onCancel={handleClose}
+      title={t('reject_username.suspend_user')}>
+      <div className={styles.title}>
+        {t(stages[stage].title, t('reject_username.username'))}
+      </div>
+      <div className={styles.container}>
+        <div className={styles.description}>
+          {t(stages[stage].description, t('reject_username.username'))}
+        </div>
+        {
+          stage === 1 &&
                 <div className={styles.writeContainer}>
                   <div className={styles.emailMessage}>{t('reject_username.write_message')}</div>
                   <div className={styles.emailContainer}>
@@ -96,16 +96,16 @@ class RejectUsernameDialog extends Component  {
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
-              }
-              <div className={styles.modalButtons}>
-                {Object.keys(stages[stage].options).map((key, i) => (
-                  <Button key={i} onClick={this.onActionClick(stage, i)}>
-                    {t(stages[stage].options[key], t('reject_username.username'))}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </Dialog>;
+        }
+        <div className={styles.modalButtons}>
+          {Object.keys(stages[stage].options).map((key, i) => (
+            <Button key={i} onClick={this.onActionClick(stage, i)}>
+              {t(stages[stage].options[key], t('reject_username.username'))}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </Dialog>;
   }
 }
 

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

@@ -9,9 +9,9 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       <tr>
         {headers.map((header, i) =>(
           <th
-          key={i}
-          className="mdl-data-table__cell--non-numeric"
-          onClick={() => onHeaderClickHandler({field: header.field})}>
+            key={i}
+            className="mdl-data-table__cell--non-numeric"
+            onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
           </th>
         ))}

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

@@ -59,7 +59,7 @@ const User = (props) => {
           <div className={styles.body}>
             <div className={styles.flaggedByCount}>
               <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{t('community.flags')}({ user.actions.length })</span>:
-                { user.action_summaries.map(
+              { user.action_summaries.map(
                 (action, i) => {
                   return <span className={styles.flaggedBy} key={i}>
                     {shortReasons[action.reason]} ({action.count})

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

@@ -77,14 +77,14 @@ export const withCommunityQuery = withQuery(gql`
     }
   }
 `, {
-  options: ({params: {action_type = 'FLAG'}}) => {
-    return {
-      variables: {
-        action_type: action_type
-      }
-    };
-  }
-});
+    options: ({params: {action_type = 'FLAG'}}) => {
+      return {
+        variables: {
+          action_type: action_type
+        }
+      };
+    }
+  });
 
 const mapStateToProps = (state) => ({
   community: state.community,

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

@@ -111,20 +111,20 @@ export default class Configure extends Component {
       (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
 
     return (
-        <div className={styles.container}>
-          <div className={styles.leftColumn}>
-            <List onChange={this.changeSection} activeItem={activeSection}>
-              <Item itemId='stream' icon='speaker_notes'>
-                {t('configure.stream_settings')}
-              </Item>
-              <Item itemId='moderation' icon='thumbs_up_down'>
-                {t('configure.moderation_settings')}
-              </Item>
-              <Item itemId='tech' icon='code'>
-                {t('configure.tech_settings')}
-              </Item>
-            </List>
-            <div className={styles.saveBox}>
+      <div className={styles.container}>
+        <div className={styles.leftColumn}>
+          <List onChange={this.changeSection} activeItem={activeSection}>
+            <Item itemId='stream' icon='speaker_notes'>
+              {t('configure.stream_settings')}
+            </Item>
+            <Item itemId='moderation' icon='thumbs_up_down'>
+              {t('configure.moderation_settings')}
+            </Item>
+            <Item itemId='tech' icon='code'>
+              {t('configure.tech_settings')}
+            </Item>
+          </List>
+          <div className={styles.saveBox}>
             {
               showSave ?
                 <Button
@@ -136,25 +136,25 @@ export default class Configure extends Component {
                 >
                   {t('configure.save_changes')}
                 </Button>
-              :
+                :
                 <Button
                   raised
                   disabled
                   icon='check'
                   full
                 >
-                {t('configure.save_changes')}
-               </Button>
+                  {t('configure.save_changes')}
+                </Button>
             }
-            </div>
+          </div>
 
-          </div>
-          <div className={styles.mainContent}>
-            { this.props.saveFetchingError }
-            { this.props.fetchSettingsError }
-            { section }
-          </div>
         </div>
+        <div className={styles.mainContent}>
+          { this.props.saveFetchingError }
+          { this.props.fetchSettingsError }
+          { section }
+        </div>
+      </div>
     );
   }
 }

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

@@ -4,7 +4,7 @@ import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
-import MarkdownEditor from 'coral-admin/src/components/MarkdownEditor';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -93,15 +93,15 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               value={settings.charCount}
               disabled={settings.charCountEnable ? '' : 'disabled'}
             />
-          <span>{t('configure.comment_count_text_post')}</span>
-              {
-                errors.charCount &&
+            <span>{t('configure.comment_count_text_post')}</span>
+            {
+              errors.charCount &&
                 <span className={styles.settingsError}>
                   <br/>
                   <Icon name="error_outline"/>
                   {t('configure.comment_count_error')}
                 </span>
-              }
+            }
           </p>
         </div>
       </Card>

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

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

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

@@ -5,17 +5,24 @@ import {Icon} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 const refreshIntervalSeconds = 60 * 5;
 
+// TODO: refactor out storage code into redux.
+
 class CountdownTimer extends React.Component {
 
+  static contextTypes = {
+    storage: PropTypes.object,
+  };
+
   static propTypes = {
     handleTimeout: PropTypes.func.isRequired
   }
 
-  constructor (props) {
-    super(props);
+  constructor (props, context) {
+    super(props, context);
+    const {storage} = context;
     try {
-      if (window.localStorage.getItem('coral:dashboardNote') === null) {
-        window.localStorage.setItem('coral:dashboardNote', 'show');
+      if (storage && storage.getItem('coral:dashboardNote') === null) {
+        storage.setItem('coral:dashboardNote', 'show');
       }
     } catch (e) {
 
@@ -24,7 +31,7 @@ class CountdownTimer extends React.Component {
 
     this.state = {
       secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: window.localStorage.getItem('coral:dashboardNote') || 'show'
+      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
     };
   }
 
@@ -54,8 +61,11 @@ class CountdownTimer extends React.Component {
   }
 
   dismissNote = () => {
+    const {storage} = this.context;
     try {
-      window.localStorage.setItem('coral:dashboardNote', 'hide');
+      if (storage) {
+        storage.setItem('coral:dashboardNote', 'hide');
+      }
     } catch (e) {
 
       // when setItem fails in Safari Private mode
@@ -64,7 +74,8 @@ class CountdownTimer extends React.Component {
   }
 
   render () {
-    const hideReloadNote = window.localStorage.getItem('coral:dashboardNote') === 'hide' ||
+    const {storage} = this.context;
+    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
       this.state.dashboardNote === 'hide'; // for Safari Incognito
     return (
       <p

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

@@ -16,24 +16,24 @@ const FlagWidget = ({assets}) => {
       <div className={styles.widgetTable}>
         {
           assets.length
-          ? assets.map((asset) => {
-            let flagSummary = null;
-            if (asset.action_summaries) {
-              flagSummary = asset.action_summaries.find((s) => s.__typename === 'FlagAssetActionSummary');
-            }
+            ? assets.map((asset) => {
+              let flagSummary = null;
+              if (asset.action_summaries) {
+                flagSummary = asset.action_summaries.find((s) => s.__typename === 'FlagAssetActionSummary');
+              }
 
-            return (
-              <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
-                <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                  <p className={styles.assetTitle}>{asset.title}</p>
-                </a>
-                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-              </div>
-            );
-          })
-          : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
+              return (
+                <div className={styles.rowLinkify} key={asset.id}>
+                  <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
+                  <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
+                    <p className={styles.assetTitle}>{asset.title}</p>
+                  </a>
+                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                </div>
+              );
+            })
+            : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
         }
       </div>
     </div>

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

@@ -15,20 +15,20 @@ const LikeWidget = ({assets}) => {
       <div className={styles.widgetTable}>
         {
           assets.length
-          ? assets.map((asset) => {
-            const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
-            return (
-              <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                  <p className={styles.assetTitle}>{asset.title}</p>
-                </a>
-                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-              </div>
-            );
-          })
-          : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
+            ? assets.map((asset) => {
+              const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
+              return (
+                <div className={styles.rowLinkify} key={asset.id}>
+                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
+                  <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
+                    <p className={styles.assetTitle}>{asset.title}</p>
+                  </a>
+                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                </div>
+              );
+            })
+            : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
         }
       </div>
     </div>

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

@@ -22,10 +22,10 @@ class DashboardContainer extends React.Component {
 
 export const witDashboardQuery = withQuery(gql`
   query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
-    assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
+    assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
       ...CoralAdmin_Metrics
     }
-    assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
+    assetsByActivity: assetMetrics(from: $from, to: $to, sortBy: ACTIVITY) {
       ...CoralAdmin_Metrics
     }
   }
@@ -42,15 +42,15 @@ export const witDashboardQuery = withQuery(gql`
     }
   }
 `, {
-  options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
-    return {
-      variables: {
-        from: dashboardWindowStart,
-        to: dashboardWindowEnd
-      }
-    };
-  }
-});
+    options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
+      return {
+        variables: {
+          from: dashboardWindowStart,
+          to: dashboardWindowEnd
+        }
+      };
+    }
+  });
 
 const mapStateToProps = (state) => {
   return {

client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js

@@ -19,7 +19,7 @@ const InitialStep = (props) => {
             showErrors={install.showErrors}
             errorMsg={install.errors.email}
             noValidate
-            />
+          />
 
           <TextField
             className={styles.textField}
@@ -29,7 +29,7 @@ const InitialStep = (props) => {
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.username}
-            />
+          />
 
           <TextField
             className={styles.textField}
@@ -39,7 +39,7 @@ const InitialStep = (props) => {
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.password}
-            />
+          />
 
           <TextField
             className={styles.textField}
@@ -49,13 +49,13 @@ const InitialStep = (props) => {
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.confirmPassword}
-            />
+          />
 
           {
             !props.install.isLoading ?
-            <Button cStyle='black' type="submit" full>{t('install.create.save')}</Button>
-            :
-            <Spinner />
+              <Button cStyle='black' type="submit" full>{t('install.create.save')}</Button>
+              :
+              <Spinner />
           }
           {props.install.installRequest === 'FAILURE' && <div className={styles.error}>Error: {props.install.installRequestError}</div>}
         </form>

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

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
+import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
 import FlagBox from 'coral-admin/src/components/FlagBox';
 import styles from './styles.css';
 import CommentType from 'coral-admin/src/components/CommentType';
@@ -90,8 +91,8 @@ class Comment extends React.Component {
               </span>
               {
                 (comment.editing && comment.editing.edited)
-                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                : null
+                  ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                  : null
               }
               {currentUserId !== comment.user.id &&
                 <ActionsMenu icon="not_interested">
@@ -107,6 +108,7 @@ class Comment extends React.Component {
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
+                {comment.hasParent && <ReplyBadge/>}
                 <CommentType type={commentType} className={styles.commentType}/>
                 <Slot
                   fill="adminCommentInfoBar"
@@ -190,10 +192,10 @@ class Comment extends React.Component {
         />
         {flagActions && flagActions.length
           ? <FlagBox
-              actions={flagActions}
-              actionSummaries={flagActionSummaries}
-              viewUserDetail={viewUserDetail}
-            />
+            actions={flagActions}
+            actionSummaries={flagActionSummaries}
+            viewUserDetail={viewUserDetail}
+          />
           : null}
       </li>
     );

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

@@ -36,8 +36,8 @@ const ModerationMenu = ({
           label="Sort"
           value={sort}
           onChange={(sort) => selectSort(sort)}>
-          <Option value={'REVERSE_CHRONOLOGICAL'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'CHRONOLOGICAL'}>{t('modqueue.oldest_first')}</Option>
+          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
+          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
         </SelectField>
       </div>
     </div>

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

@@ -97,7 +97,7 @@ class ModerationQueue extends React.Component {
                 rejectComment={props.rejectComment}
                 currentAsset={props.currentAsset}
                 currentUserId={this.props.currentUserId}
-                />;
+              />;
             })
           }
         </CSSTransitionGroup>
@@ -110,7 +110,7 @@ class ModerationQueue extends React.Component {
         <LoadMore
           loadMore={this.loadMore}
           showLoadMore={comments.length < commentCount}
-          />
+        />
       </div>
     );
   }

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

@@ -61,20 +61,20 @@ const StorySearch = (props) => {
 
               {
                 loading
-                ? <Spinner />
-                : assets.map((story, i) => {
-                  const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
+                  ? <Spinner />
+                  : assets.map((story, i) => {
+                    const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
 
-                  return <Story
-                    key={i}
-                    id={story.id}
-                    title={story.title}
-                    createdAt={new Date(story.created_at).toISOString()}
-                    open={storyOpen}
-                    author={story.author}
-                    goToStory={props.goToStory}
-                  />;
-                })
+                    return <Story
+                      key={i}
+                      id={story.id}
+                      title={story.title}
+                      createdAt={new Date(story.created_at).toISOString()}
+                      open={storyOpen}
+                      author={story.author}
+                      goToStory={props.goToStory}
+                    />;
+                  })
               }
 
               {assets.length === 0 && <div className={styles.noResults}>No results</div>}

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

@@ -37,6 +37,7 @@ export default withFragments({
         count
         ... on FlagActionSummary {
           reason
+          __typename
         }
       }
       actions {
@@ -48,11 +49,14 @@ export default withFragments({
             id
             username
           }
+          __typename
         }
+        __typename
       }
       editing {
         edited
       }
+      hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
   `

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

@@ -26,25 +26,27 @@ import {
   storySearchChange,
   clearState
 } from 'actions/moderation';
+import withQueueConfig from '../hoc/withQueueConfig';
+import {notify} from 'coral-framework/actions/notification';
 
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
 import Comment from './Comment';
-import queueConfig from '../queueConfig';
+import baseQueueConfig from '../queueConfig';
 
 function prepareNotificationText(text) {
   return truncate(text, {length: 50}).replace('\n', ' ');
 }
 
 function getAssetId(props) {
-  if (props.params.tabOrId && !(props.params.tabOrId in queueConfig)) {
+  if (props.params.tabOrId && !(props.params.tabOrId in props.queueConfig)) {
     return props.params.tabOrId;
   }
   return props.params.id || null;
 }
 
 function getTab(props) {
-  if (props.params.tabOrId && props.params.tabOrId in queueConfig) {
+  if (props.params.tabOrId && props.params.tabOrId in props.queueConfig) {
     return props.params.tabOrId;
   }
   return props.params.tab || null;
@@ -53,8 +55,15 @@ function getTab(props) {
 class ModerationContainer extends Component {
   subscriptions = [];
 
-  handleCommentChange = (root, comment, notify) => {
-    return handleCommentChange(root, comment, this.props.data.variables.sort, notify, queueConfig, this.activeTab);
+  handleCommentChange = (root, comment, notifyText) => {
+    return handleCommentChange(
+      root,
+      comment,
+      this.props.data.variables.sortOrder,
+      () => notifyText && this.props.notify('info', notifyText),
+      this.props.queueConfig,
+      this.activeTab
+    );
   };
 
   get activeTab() {
@@ -78,10 +87,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 notify = this.props.auth.user.id === user.id
+        const notifyText = this.props.auth.user.id === user.id
           ? ''
           : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -90,10 +99,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 notify = this.props.auth.user.id === user.id
+        const notifyText = this.props.auth.user.id === user.id
           ? ''
           : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -101,8 +110,8 @@ class ModerationContainer extends Component {
       document: COMMENT_EDITED_SUBSCRIPTION,
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-        const notify = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        const notifyText = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -111,8 +120,8 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
         const user = comment.actions[comment.actions.length - 1].user;
-        const notify = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        const notifyText = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -159,10 +168,10 @@ class ModerationContainer extends Component {
     const variables = {
       limit: 10,
       cursor: this.props.root[tab].endCursor,
-      sort: this.props.data.variables.sort,
+      sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
-      statuses: queueConfig[tab].statuses,
-      action_type: queueConfig[tab].action_type,
+      statuses: this.props.queueConfig[tab].statuses,
+      action_type: this.props.queueConfig[tab].action_type,
     };
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
@@ -206,7 +215,7 @@ class ModerationContainer extends Component {
     }
 
     const premodEnabled = assetId ? isPremod(asset.settings.moderation) : isPremod(settings.moderation);
-    const currentQueueConfig = Object.assign({}, queueConfig);
+    const currentQueueConfig = Object.assign({}, this.props.queueConfig);
     if (premodEnabled) {
       delete currentQueueConfig.new;
     } else {
@@ -279,8 +288,8 @@ const COMMENT_REJECTED_SUBSCRIPTION = gql`
 `;
 
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -304,15 +313,15 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const withModQueueQuery = withQuery(gql`
-  query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER, $allAssets: Boolean!) {
+const withModQueueQuery = withQuery(({queueConfig}) => gql`
+  query CoralAdmin_Moderation($asset_id: ID, $sortOrder: SORT_ORDER, $allAssets: Boolean!) {
     ${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
+        sortOrder: $sortOrder
       }) {
         ...CoralAdmin_Moderation_CommentConnection
       }
@@ -345,14 +354,14 @@ const withModQueueQuery = withQuery(gql`
     return {
       variables: {
         asset_id: id,
-        sort: props.moderation.sortOrder,
+        sortOrder: props.moderation.sortOrder,
         allAssets: id === null
       }
     };
   },
 });
 
-const withQueueCountPolling = withQuery(gql`
+const withQueueCountPolling = withQuery(({queueConfig}) => gql`
   query CoralAdmin_ModerationCountPoll($asset_id: ID) {
     ${Object.keys(queueConfig).map((queue) => `
       ${queue}Count: commentCount(query: {
@@ -393,11 +402,13 @@ const mapDispatchToProps = (dispatch) => ({
     viewUserDetail,
     setSortOrder,
     storySearchChange,
-    clearState
+    clearState,
+    notify,
   }, dispatch),
 });
 
 export default compose(
+  withQueueConfig(baseQueueConfig),
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
   withQueueCountPolling,

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

@@ -98,14 +98,14 @@ export const withAssetSearchQuery = withQuery(gql`
     }
   }
 `, {
-  options: ({moderation: {storySearchString = ''}}) => {
-    return {
-      variables: {
-        value: storySearchString
-      }
-    };
-  }
-});
+    options: ({moderation: {storySearchString = ''}}) => {
+      return {
+        variables: {
+          value: storySearchString
+        }
+      };
+    }
+  });
 
 export default compose(
   withRouter,

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

@@ -1,5 +1,4 @@
 import update from 'immutability-helper';
-import * as notification from 'coral-admin/src/services/notification';
 
 const limit = 10;
 
@@ -29,29 +28,29 @@ function removeCommentFromQueue(root, queue, id) {
   });
 }
 
-function shouldCommentBeAdded(root, queue, comment, sort) {
+function shouldCommentBeAdded(root, queue, comment, sortOrder) {
   if (root[`${queue}Count`] < limit) {
 
     // Adding all comments until first limit has reached.
     return true;
   }
   const cursor = new Date(root[queue].endCursor);
-  return sort === 'CHRONOLOGICAL'
+  return sortOrder === 'ASC'
     ? new Date(comment.created_at) <= cursor
     : new Date(comment.created_at) >= cursor;
 }
 
-function addCommentToQueue(root, queue, comment, sort) {
+function addCommentToQueue(root, queue, comment, sortOrder) {
   if (queueHasComment(root, queue, comment.id)) {
     return root;
   }
 
-  const sortAlgo = sort === 'CHRONOLOGICAL' ? ascending : descending;
+  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
   const changes = {
     [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
   };
 
-  if (shouldCommentBeAdded(root, queue, comment, sort)) {
+  if (shouldCommentBeAdded(root, queue, comment, sortOrder)) {
     const nodes = root[queue].nodes.concat(comment).sort(sortAlgo);
     changes[queue] = {
       nodes: {$set: nodes},
@@ -91,16 +90,13 @@ function getCommentQueues(comment, queueConfig) {
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
  * @param  {Object} comment            comment that was changed
- * @param  {string} sort               current sort order of the queues
- * @param  {Object} [notify]           show know notifications if set
- * @param  {string} notify.activeQueue current active queue
- * @param  {string} notify.text        notification text to show
- * @param  {bool}   notify.anyQueue    if true show the notification when the comment is shown
+ * @param  {string} sortOrder          current sort order of the queues
+ * @param  {string} notify             callback to show notification
  *                                     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, queueConfig, activeQueue) {
+export function handleCommentChange(root, comment, sortOrder, notify, queueConfig, activeQueue) {
   let next = root;
 
   const nextQueues = getCommentQueues(comment, queueConfig);
@@ -110,22 +106,22 @@ export function handleCommentChange(root, comment, sort, notify, queueConfig, ac
     if (notificationShown) {
       return;
     }
-    notification.info(notify);
+    notify();
     notificationShown = true;
   };
 
   Object.keys(queueConfig).forEach((queue) => {
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
-        next = addCommentToQueue(next, queue, comment, sort);
-        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
-          showNotificationOnce(comment);
+        next = addCommentToQueue(next, queue, comment, sortOrder);
+        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sortOrder)) {
+          showNotificationOnce();
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
       if (notify && activeQueue === queue) {
-        showNotificationOnce(comment);
+        showNotificationOnce();
       }
     }
 
@@ -134,7 +130,7 @@ export function handleCommentChange(root, comment, sort, notify, queueConfig, ac
       && queueHasComment(next, queue, comment.id)
       && activeQueue === queue
     ) {
-      showNotificationOnce(comment);
+      showNotificationOnce();
     }
   });
   return next;

client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import PropTypes from 'prop-types';
+
+/**
+ * WithQueueConfig takes a `queueConfig` parameter that is
+ * passed down as a prop enriched with queue config data from plugins.
+ */
+export default (queueConfig) => hoistStatics((WrappedComponent) => {
+  class WithQueueConfig extends React.Component {
+    static contextTypes = {
+      plugins: PropTypes.object,
+    };
+
+    pluginsConfig = this.context.plugins.getModQueueConfigs();
+
+    render() {
+      return <WrappedComponent
+        {...this.props}
+        queueConfig={{...queueConfig, ...this.pluginsConfig}}
+      />;
+    }
+  }
+
+  return WithQueueConfig;
+});

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

@@ -1,5 +1,4 @@
 import t from 'coral-framework/services/i18n';
-import {getModQueueConfigs} from 'coral-framework/helpers/plugins';
 
 export default {
   premod: {
@@ -33,5 +32,4 @@ export default {
     icon: 'question_answer',
     name: t('modqueue.all'),
   },
-  ...getModQueueConfigs(),
 };

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

@@ -134,20 +134,20 @@ export default class Stories extends Component {
             <Radio value='closed'>{t('streams.closed')}</Radio>
           </RadioGroup>
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
-            <RadioGroup
-              name='sort by'
-              value={sort}
-              childContainer='div'
-              onChange={this.onSettingChange('sort')}
-              className={styles.radioGroup}
-            >
-              <Radio value='desc'>{t('streams.newest')}</Radio>
-              <Radio value='asc'>{t('streams.oldest')}</Radio>
-            </RadioGroup>
-          </div>
+          <RadioGroup
+            name='sort by'
+            value={sort}
+            childContainer='div'
+            onChange={this.onSettingChange('sort')}
+            className={styles.radioGroup}
+          >
+            <Radio value='desc'>{t('streams.newest')}</Radio>
+            <Radio value='asc'>{t('streams.oldest')}</Radio>
+          </RadioGroup>
+        </div>
         {
           assetsIds.length
-          ? <div className={styles.mainContent}>
+            ? <div className={styles.mainContent}>
               <DataTable className={styles.streamsTable} rows={assetsIds} onClick={this.goToModeration}>
                 <TableHeader name="title" cellFormatter={this.renderTitle}>{t('streams.article')}</TableHeader>
                 <TableHeader name="publication_date" cellFormatter={this.renderDate}>
@@ -162,7 +162,7 @@ export default class Stories extends Component {
                 page={this.state.page}
                 onNewPageHandler={this.onPageClick} />
             </div>
-          : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
+            : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
         }
       </div>
     );

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

@@ -1,26 +1,18 @@
-import t from 'coral-framework/services/i18n';
-import {toast} from 'react-toastify';
-
-export function success(msg) {
-  return toast(msg, {type: 'success'});
-}
-
-export function error(msg) {
-  return toast(msg, {type: 'error'});
-}
-
-export function info(msg) {
-  return toast(msg, {type: 'info'});
-}
-
-export function showMutationErrors(error) {
-  console.error(error);
-  if (error.errors) {
-    error.errors.forEach((err) => {
-      toast(
-        err.translation_key ? t(`error.${err.translation_key}`) : err,
-        {type: 'error'}
-      );
-    });
-  }
+/**
+ * createNotificationService returns a notification services based on toast.
+ * @param  {Object}  toast
+ * @return {Object}  notification service
+ */
+export function createNotificationService(toast) {
+  return {
+    success(msg) {
+      toast(msg, {type: 'success'});
+    },
+    error(msg) {
+      toast(msg, {type: 'error'});
+    },
+    info(msg) {
+      toast(msg, {type: 'info'});
+    },
+  };
 }

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

@@ -1,31 +0,0 @@
-import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
-import thunk from 'redux-thunk';
-import mainReducer from '../reducers';
-import {getClient} from 'coral-framework/services/client';
-
-const middlewares = [
-  applyMiddleware(getClient().middleware()),
-  applyMiddleware(thunk)
-];
-
-if (window.devToolsExtension) {
-
-  // we can't have the last argument of compose() be undefined
-  middlewares.push(window.devToolsExtension());
-}
-
-const coralReducers = {
-  ...mainReducer,
-  apollo: getClient().reducer()
-};
-
-const store = createStore(
-  combineReducers(coralReducers),
-  {},
-  compose(...middlewares)
-);
-
-store.coralReducers = coralReducers;
-
-window.coralStore = store;
-export default store;

client/coral-configure/components/ConfigureCommentStream.css

@@ -12,10 +12,6 @@
   padding: 0;
 }
 
-.wrapper ul ul {
-  padding-left: 20px
-}
-
 .checkbox {
   vertical-align: top;
   margin: 12px 12px 12px 0;
@@ -36,4 +32,4 @@
 
 .hidden {
   display: none;
-}
+}

client/coral-configure/components/ConfigureCommentStream.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Button, Checkbox, TextField} from 'coral-ui';
+import {Button, Checkbox} from 'coral-ui';
+import QuestionBoxBuilder from './QuestionBoxBuilder';
 
 import styles from './ConfigureCommentStream.css';
 
@@ -55,17 +56,14 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               title: t('configure.enable_questionbox'),
               description: t('configure.enable_questionbox_description')
             }} />
-          <div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
-            <TextField
-              id="qboxcontent"
-              onChange={handleChange}
-              rows={3}
-              value={props.questionBoxContent}
-              label={t('configure.include_question_here')}
+          {
+            props.questionBoxEnable && <QuestionBoxBuilder
+              questionBoxIcon={props.questionBoxIcon}
+              questionBoxContent={props.questionBoxContent}
+              handleChange={handleChange}
             />
-          </div>
+          }
         </li>
-
       </ul>
     </div>
   </form>

client/coral-configure/components/DefaultIcon.css

@@ -0,0 +1,27 @@
+.iconBubble{
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  color: #9E9E9E;
+  font-size: 24px;
+  z-index: 0;
+}
+
+.iconPerson{
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.qbIconContainer {
+  position: relative;
+  border: 0;
+  color: white;
+  display: inline-block;
+  padding: 5px 20px;
+  vertical-align: middle;
+  width: 10px;
+}

client/coral-configure/components/DefaultIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './DefaultIcon.css';
+import {Icon} from 'coral-ui';
+
+const DefaultIcon = ({className}) => (
+  <div className={cn(styles.qbIconContainer, className)}>
+    <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
+    <Icon name="person" className={cn(styles.iconPerson)} />
+  </div>
+);
+
+export default DefaultIcon;

client/coral-configure/components/QuestionBoxBuilder.css

@@ -0,0 +1,45 @@
+.qbBuilder {
+  margin-left: 50px;
+}
+
+.qbItemIconList {
+  padding: 0;
+  margin: 10px 0;
+}
+
+.qbItemIcon {
+  background: #F0F0F0;
+  width: 45px;
+  height: 45px;
+  font-size: 24px;
+  text-align: center;
+  line-height: 45px;
+  color: #252525;
+  border-radius: 3px;
+  display: inline-block;
+  overflow: hidden;
+  margin-right: 10px;
+  position: relative;
+  border: solid 2px #F0F0F0;
+  transition: border 0.3s cubic-bezier(.4,0,.2,1);
+}
+
+.qbItemIcon:hover {
+  cursor: pointer;
+}
+
+.qbItemIconActive {
+  border: solid 2px #00796B;
+}
+
+.defaultIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.qb {
+  margin: 10px 0;
+}

client/coral-configure/components/QuestionBoxBuilder.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
+import {Icon, Spinner} from 'coral-ui';
+import DefaultIcon from './DefaultIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+
+class QuestionBoxBuilder extends React.Component {
+  constructor() {
+    super();
+    
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentWillMount() {
+    this.loadEditor();
+  }
+  
+  async loadEditor() {
+    const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+
+    return this.setState({
+      loading : false,
+      MarkdownEditor
+    });
+  }
+
+  render() {
+    const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
+    const {loading, MarkdownEditor} = this.state;
+
+    if (loading) {
+      return <Spinner/>;
+    }
+
+    return (
+      <div className={styles.qbBuilder}>
+        <h4>Include an Icon</h4>
+
+        <ul className={styles.qbItemIconList}>
+          <li className={cn(
+            styles.qbItemIcon,
+            {[styles.qbItemIconActive]: questionBoxIcon === 'default'}
+          )}
+          id="qboxicon"
+          onClick={handleChange}
+          data-icon="default" >
+            <DefaultIcon className={styles.defaultIcon} />
+          </li>
+          <li className={cn(
+            styles.qbItemIcon,
+            {[styles.qbItemIconActive]: questionBoxIcon === 'forum'}
+          )}
+          id="qboxicon"
+          onClick={handleChange}
+          data-icon="forum" >
+            <Icon name="forum" />
+          </li>
+          <li className={cn(
+            styles.qbItemIcon,
+            {[styles.qbItemIconActive]: questionBoxIcon === 'build'}
+          )}
+          id="qboxicon"
+          onClick={handleChange}
+          data-icon="build" >
+            <Icon name="build" />
+          </li>
+          <li className={cn(
+            styles.qbItemIcon,
+            {[styles.qbItemIconActive]: questionBoxIcon === 'format_quote'}
+          )}
+          id="qboxicon"
+          onClick={handleChange}
+          data-icon="format_quote" >
+            <Icon name="format_quote" />
+          </li>
+        </ul>
+
+        <QuestionBox
+          className={styles.qb} 
+          enable={true}
+          icon={questionBoxIcon}  
+          content={questionBoxContent}
+        />
+
+        <MarkdownEditor 
+          value={questionBoxContent}
+          onChange={(value) => handleChange({}, {questionBoxContent: value})}
+        />
+      
+      </div>
+    );
+  }
+}
+
+export default QuestionBoxBuilder;

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 
-import {updateOpenStatus, updateConfiguration} from 'coral-framework/actions/asset';
+import {updateOpenStatus, updateConfiguration} from 'coral-embed-stream/src/actions/asset';
 
 import CloseCommentsInfo from '../components/CloseCommentsInfo';
 import ConfigureCommentStream from '../components/ConfigureCommentStream';
@@ -27,10 +27,9 @@ class ConfigureStreamContainer extends Component {
   handleApply (e) {
     e.preventDefault();
     const {elements} = e.target;
+    const {questionBoxIcon, questionBoxContent} = this.state.dirtySettings;
     const premod = elements.premod.checked;
     const questionBoxEnable = elements.qboxenable.checked;
-    const questionBoxContent = elements.qboxcontent.value;
-
     const premodLinksEnable = elements.plinksenable.checked;
     const {changed} = this.state;
 
@@ -38,6 +37,7 @@ class ConfigureStreamContainer extends Component {
       moderation: premod ? 'PRE' : 'POST',
       questionBoxEnable,
       questionBoxContent,
+      questionBoxIcon,
       premodLinksEnable
     };
 
@@ -51,14 +51,18 @@ class ConfigureStreamContainer extends Component {
     }
   }
 
-  handleChange (e) {
-    const changes = {};
+  handleChange (e, newChanges) {
+    let changes = {};
+
+    if (changes) {
+      changes = {...newChanges};
+    }
 
     if (e.target && e.target.id === 'qboxenable') {
       changes.questionBoxEnable = e.target.checked;
     }
-    if (e.target && e.target.id === 'qboxcontent') {
-      changes.questionBoxContent = e.target.value;
+    if (e.currentTarget && e.currentTarget.id === 'qboxicon') {
+      changes.questionBoxIcon = e.currentTarget.dataset.icon;
     }
     if (e.target && e.target.id === 'plinksenable') {
       changes.premodLinksEnable = e.target.value;
@@ -105,12 +109,13 @@ class ConfigureStreamContainer extends Component {
           changed={this.state.changed}
           premodLinksEnable={dirtySettings.premodLinksEnable}
           premod={premod}
+          questionBoxIcon={dirtySettings.questionBoxIcon}
           questionBoxEnable={dirtySettings.questionBoxEnable}
           questionBoxContent={dirtySettings.questionBoxContent}
         />
         <hr />
         <h3>{closedAt === 'open' ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-          {(closedAt === 'open' && closedTimeout) ? <p>{t('configure.comment_stream_will_close')} {this.getClosedIn()}.</p> : ''}
+        {(closedAt === 'open' && closedTimeout) ? <p>{t('configure.comment_stream_will_close')} {this.getClosedIn()}.</p> : ''}
         <CloseCommentsInfo
           onClick={this.toggleStatus}
           status={closedAt}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Router, Route} from 'react-router';
-import {history} from 'coral-framework/helpers/router';
+import PropTypes from 'prop-types';
 
 import Embed from './containers/Embed';
 import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
@@ -12,6 +12,14 @@ const routes = (
   </div>
 );
 
-const AppRouter = () => <Router history={history} routes={routes} />;
+class AppRouter extends React.Component {
+  static contextTypes = {
+    history: PropTypes.object,
+  };
+
+  render() {
+    return <Router history={this.context.history} routes={routes} />;
+  }
+}
 
 export default AppRouter;

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

@@ -1,6 +1,5 @@
 import * as actions from '../constants/asset';
-import coralApi from '../helpers/request';
-import {addNotification} from '../actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 
 import t from 'coral-framework/services/i18n';
 
@@ -12,12 +11,12 @@ const updateAssetSettingsRequest = () => ({type: actions.UPDATE_ASSET_SETTINGS_R
 const updateAssetSettingsSuccess = (settings) => ({type: actions.UPDATE_ASSET_SETTINGS_SUCCESS, settings});
 const updateAssetSettingsFailure = (error) => ({type: actions.UPDATE_ASSET_SETTINGS_FAILURE, error});
 
-export const updateConfiguration = (newConfig) => (dispatch, getState) => {
+export const updateConfiguration = (newConfig) => (dispatch, getState, {rest}) => {
   const assetId = getState().asset.id;
   dispatch(updateAssetSettingsRequest());
-  coralApi(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
+  rest(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(updateAssetSettingsSuccess(newConfig));
     })
     .catch((error) => {
@@ -26,12 +25,12 @@ export const updateConfiguration = (newConfig) => (dispatch, getState) => {
     });
 };
 
-export const updateOpenStream = (closedBody) => (dispatch, getState) => {
+export const updateOpenStream = (closedBody) => (dispatch, getState, {rest}) => {
   const assetId = getState().asset.id;
   dispatch(fetchAssetRequest());
-  coralApi(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
+  rest(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(fetchAssetSuccess(closedBody));
     })
     .catch((error) => {

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

@@ -1,12 +1,8 @@
 import jwtDecode from 'jwt-decode';
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import * as Storage from '../helpers/storage';
-import coralApi, {base} from '../helpers/request';
-import pym from '../services/pym';
-import {addNotification} from '../actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 
-import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
 
 export const showSignInDialog = () => ({
@@ -59,9 +55,9 @@ export const updateUsername = ({username}) => ({
   username
 });
 
-export const createUsername = (userId, formData) => (dispatch) => {
+export const createUsername = (userId, formData) => (dispatch, _, {rest}) => {
   dispatch(createUsernameRequest());
-  coralApi('/account/username', {method: 'PUT', body: formData})
+  rest('/account/username', {method: 'PUT', body: formData})
     .then(() => {
       dispatch(createUsernameSuccess());
       dispatch(hideCreateUsernameDialog());
@@ -111,9 +107,11 @@ const signInFailure = (error) => ({
 // AUTH TOKEN
 //==============================================================================
 
-export const handleAuthToken = (token) => (dispatch) => {
-  Storage.setItem('exp', jwtDecode(token).exp);
-  Storage.setItem('token', token);
+export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+  if (storage) {
+    storage.setItem('exp', jwtDecode(token).exp);
+    storage.setItem('token', token);
+  }
 
   dispatch({type: 'HANDLE_AUTH_TOKEN'});
 };
@@ -123,10 +121,10 @@ export const handleAuthToken = (token) => (dispatch) => {
 //==============================================================================
 
 export const fetchSignIn = (formData) => {
-  return (dispatch) => {
+  return (dispatch, _, {rest}) => {
     dispatch(signInRequest());
 
-    return coralApi('/auth/local', {method: 'POST', body: formData})
+    return rest('/auth/local', {method: 'POST', body: formData})
       .then(({token}) => {
         if (!bowser.safari && !bowser.ios) {
           dispatch(handleAuthToken(token));
@@ -171,10 +169,10 @@ const signInFacebookFailure = (error) => ({
   error
 });
 
-export const fetchSignInFacebook = () => (dispatch) => {
+export const fetchSignInFacebook = () => (dispatch, _, {rest}) => {
   dispatch(signInFacebookRequest());
   window.open(
-    `${base}/auth/facebook`,
+    `${rest.uri}/auth/facebook`,
     'Continue with Facebook',
     'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
   );
@@ -188,10 +186,10 @@ const signUpFacebookRequest = () => ({
   type: actions.FETCH_SIGNUP_FACEBOOK_REQUEST
 });
 
-export const fetchSignUpFacebook = () => (dispatch) => {
+export const fetchSignUpFacebook = () => (dispatch, _, {rest}) => {
   dispatch(signUpFacebookRequest());
   window.open(
-    `${base}/auth/facebook`,
+    `${rest.uri}/auth/facebook`,
     'Continue with Facebook',
     'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
   );
@@ -220,11 +218,11 @@ const signUpRequest = () => ({type: actions.FETCH_SIGNUP_REQUEST});
 const signUpSuccess = (user) => ({type: actions.FETCH_SIGNUP_SUCCESS, user});
 const signUpFailure = (error) => ({type: actions.FETCH_SIGNUP_FAILURE, error});
 
-export const fetchSignUp = (formData) => (dispatch, getState) => {
+export const fetchSignUp = (formData) => (dispatch, getState, {rest}) => {
   const redirectUri = getState().auth.redirectUri;
   dispatch(signUpRequest());
 
-  coralApi('/users', {
+  rest('/users', {
     method: 'POST',
     body: formData,
     headers: {'X-Pym-Url': redirectUri}
@@ -256,10 +254,10 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const fetchForgotPassword = (email) => (dispatch, getState) => {
+export const fetchForgotPassword = (email) => (dispatch, getState, {rest}) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = getState().auth.redirectUri;
-  coralApi('/account/password/reset', {
+  rest('/account/password/reset', {
     method: 'POST',
     body: {email, loc: redirectUri}
   })
@@ -275,16 +273,18 @@ export const fetchForgotPassword = (email) => (dispatch, getState) => {
 // LOGOUT
 //==============================================================================
 
-export const logout = () => (dispatch) => {
-  return coralApi('/auth', {method: 'DELETE'}).then(() => {
-    Storage.removeItem('token');
+export const logout = () => async (dispatch, _, {rest, client, pym, storage}) => {
+  await rest('/auth', {method: 'DELETE'});
 
-    // Reset the websocket.
-    resetWebsocket();
+  if (storage) {
+    storage.removeItem('token');
+  }
 
-    dispatch({type: actions.LOGOUT});
-    pym.sendMessage('coral-auth-changed');
-  });
+  // Reset the websocket.
+  client.resetWebsocket();
+
+  dispatch({type: actions.LOGOUT});
+  pym.sendMessage('coral-auth-changed');
 };
 
 //==============================================================================
@@ -300,17 +300,19 @@ const checkLoginSuccess = (user, isAdmin) => ({
   isAdmin
 });
 
-export const checkLogin = () => (dispatch) => {
+export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
   dispatch(checkLoginRequest());
-  coralApi('/auth')
+  rest('/auth')
     .then((result) => {
       if (!result.user) {
-        Storage.removeItem('token');
+        if (storage) {
+          storage.removeItem('token');
+        }
         throw new Error('Not logged in');
       }
 
       // Reset the websocket.
-      resetWebsocket();
+      client.resetWebsocket();
 
       dispatch(checkLoginSuccess(result.user));
       pym.sendMessage('coral-auth-changed', JSON.stringify(result.user));
@@ -322,10 +324,10 @@ export const checkLogin = () => (dispatch) => {
     })
     .catch((error) => {
       console.error(error);
-      if (error.status && error.status === 401) {
+      if (error.status && error.status === 401 && storage) {
 
         // Unauthorized.
-        Storage.removeItem('token');
+        storage.removeItem('token');
       }
       const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
       dispatch(checkLoginFailure(errorMessage));
@@ -351,10 +353,10 @@ const verifyEmailFailure = () => ({
   type: actions.VERIFY_EMAIL_FAILURE
 });
 
-export const requestConfirmEmail = (email) => (dispatch, getState) => {
+export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
   const redirectUri = getState().auth.redirectUri;
   dispatch(verifyEmailRequest());
-  return coralApi('/users/resend-verify', {
+  return rest('/users/resend-verify', {
     method: 'POST',
     body: {email},
     headers: {'X-Pym-Url': redirectUri}
@@ -387,11 +389,11 @@ export const setRedirectUri = (uri) => ({
 const editUsernameFailure = (error) => ({type: actions.EDIT_USERNAME_FAILURE, error});
 const editUsernameSuccess = () => ({type: actions.EDIT_USERNAME_SUCCESS});
 
-export const editName = (username) => (dispatch) => {
-  return coralApi('/account/username', {method: 'PUT', body: {username}})
+export const editName = (username) => (dispatch, _, {rest}) => {
+  return rest('/account/username', {method: 'PUT', body: {username}})
     .then(() => {
       dispatch(editUsernameSuccess());
-      dispatch(addNotification('success', t('framework.success_name_update')));
+      dispatch(notify('success', t('framework.success_name_update')));
     })
     .catch((error) => {
       console.error(error);

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

@@ -1,11 +1,12 @@
-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});
 
-export const viewAllComments = () => {
+export const setSort = ({sortOrder, sortBy}) => ({type: actions.SET_SORT, sortOrder, sortBy});
+
+export const viewAllComments = () => (dispatch, _, {pym}) => {
 
   const search = queryString.stringify({
     ...queryString.parse(location.search),
@@ -24,10 +25,10 @@ export const viewAllComments = () => {
     pym.sendMessage('coral-view-all-comments');
   } catch (e) { /* not sure if we're worried about old browsers */ }
 
-  return {type: actions.VIEW_ALL_COMMENTS};
+  dispatch({type: actions.VIEW_ALL_COMMENTS});
 };
 
-export const viewComment = (id) => {
+export const viewComment = (id) => (dispatch, _, {pym}) => {
 
   const search = queryString.stringify({
     ...queryString.parse(location.search),
@@ -46,7 +47,7 @@ export const viewComment = (id) => {
     pym.sendMessage('coral-view-comment', id);
   } catch (e) { /* not sure if we're worried about old browsers */ }
 
-  return {type: actions.VIEW_COMMENT, id};
+  dispatch({type: actions.VIEW_COMMENT, id});
 };
 
 export const addCommentClassName = (className) => ({

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

@@ -63,7 +63,7 @@ class AllCommentsPane extends React.Component {
     }
 
     if (
-        prevComments && nextComments &&
+      prevComments && nextComments &&
         nextComments.nodes.length < prevComments.nodes.length
     ) {
 
@@ -87,7 +87,7 @@ class AllCommentsPane extends React.Component {
       })
       .catch((error) => {
         this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
       });
   }
 
@@ -129,7 +129,7 @@ class AllCommentsPane extends React.Component {
       ignoreUser,
       setActiveReplyBox,
       activeReplyBox,
-      addNotification,
+      notify,
       disableReply,
       postComment,
       asset,
@@ -160,31 +160,31 @@ class AllCommentsPane extends React.Component {
             return commentIsIgnored(comment)
               ? <IgnoredCommentTombstone key={comment.id} />
               : <Comment
-                  commentClassNames={commentClassNames}
-                  data={data}
-                  root={root}
-                  disableReply={disableReply}
-                  setActiveReplyBox={setActiveReplyBox}
-                  activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
-                  depth={0}
-                  postComment={postComment}
-                  asset={asset}
-                  currentUser={currentUser}
-                  postFlag={postFlag}
-                  postDontAgree={postDontAgree}
-                  ignoreUser={ignoreUser}
-                  commentIsIgnored={commentIsIgnored}
-                  loadMore={loadNewReplies}
-                  deleteAction={deleteAction}
-                  showSignInDialog={showSignInDialog}
-                  key={comment.id}
-                  comment={comment}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  editComment={editComment}
-                  emit={emit}
-                />;
+                commentClassNames={commentClassNames}
+                data={data}
+                root={root}
+                disableReply={disableReply}
+                setActiveReplyBox={setActiveReplyBox}
+                activeReplyBox={activeReplyBox}
+                notify={notify}
+                depth={0}
+                postComment={postComment}
+                asset={asset}
+                currentUser={currentUser}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                ignoreUser={ignoreUser}
+                commentIsIgnored={commentIsIgnored}
+                loadMore={loadNewReplies}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                key={comment.id}
+                comment={comment}
+                charCountEnable={charCountEnable}
+                maxCharCount={maxCharCount}
+                editComment={editComment}
+                emit={emit}
+              />;
           })}
         </TransitionGroup>
         <LoadMore

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

@@ -163,6 +163,7 @@
 .header {
   display: flex;
   align-items: center;
+  margin: 10px 0;
 }
 
 .content {
@@ -171,3 +172,7 @@
 .footer {
   min-height: 10px;
 }
+
+.username {
+  margin-right: 5px;
+} 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-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';
@@ -26,6 +25,7 @@ import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 import CommentContainer from '../containers/Comment';
+import {CommentAuthorName} from 'coral-framework/components';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -108,7 +108,7 @@ export default class Comment extends React.Component {
     const {comment: {replies: prevReplies}} = this.props;
     const {comment: {replies: nextReplies}} = next;
     if (
-        prevReplies && nextReplies &&
+      prevReplies && nextReplies &&
         nextReplies.nodes.length < prevReplies.nodes.length
     ) {
 
@@ -152,7 +152,7 @@ export default class Comment extends React.Component {
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     highlighted: PropTypes.string,
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
     postComment: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
     liveUpdates: PropTypes.bool,
@@ -205,7 +205,7 @@ export default class Comment extends React.Component {
   onClickEdit (e) {
     e.preventDefault();
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
     this.setState({isEditing: true});
@@ -235,7 +235,7 @@ export default class Comment extends React.Component {
         })
         .catch((error) => {
           this.setState({loadingState: 'error'});
-          forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+          forEachError(error, ({msg}) => {this.props.notify('error', msg);});
         });
       emit('ui.Comment.showMoreReplies', {id});
       return;
@@ -252,7 +252,7 @@ export default class Comment extends React.Component {
     if (can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
       this.props.setActiveReplyBox(this.props.comment.id);
     } else {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
     return;
   }
@@ -331,7 +331,7 @@ export default class Comment extends React.Component {
       deleteAction,
       disableReply,
       maxCharCount,
-      addNotification,
+      notify,
       charCountEnable,
       showSignInDialog,
       liveUpdates,
@@ -343,7 +343,7 @@ export default class Comment extends React.Component {
 
     const view = this.getVisibileReplies();
 
-      // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
+    // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
     const isActive = isCommentActive(comment.status);
 
     const {loadingState} = this.state;
@@ -434,18 +434,33 @@ export default class Comment extends React.Component {
             inline
           />
 
-          <div className={`${styles.commentContainer} talk-stream-comment-container`}>
+          <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
+            <div className={cn(styles.header, 'talk-stream-comment-header')}>
+
+              <Slot
+                className={cn(styles.username, 'talk-stream-comment-user-name')}
+                fill="commentAuthorName"
+                defaultComponent={CommentAuthorName}
+                queryData={queryData}
+                {...slotProps}
+              />
 
-            <div className={styles.header}>
-              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
               {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
+              <Slot
+                className={cn('talk-stream-comment-author-tags')}
+                fill="commentAuthorTags"
+                queryData={queryData}
+                {...slotProps}
+                inline
+              />
+
               <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
                 <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>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                    : null
                 }
               </span>
 
@@ -475,7 +490,7 @@ export default class Comment extends React.Component {
                     <TopRightMenu
                       comment={comment}
                       ignoreUser={ignoreUser}
-                      addNotification={addNotification} />
+                      notify={notify} />
                   </span>
               }
               { !isActive &&
@@ -485,23 +500,23 @@ export default class Comment extends React.Component {
             <div className={styles.content}>
               {
                 this.state.isEditing
-                ? <EditableCommentContent
+                  ? <EditableCommentContent
                     editComment={this.editComment}
-                    addNotification={addNotification}
+                    notify={notify}
                     comment={comment}
                     currentUser={currentUser}
                     charCountEnable={charCountEnable}
                     maxCharCount={maxCharCount}
                     parentId={parentId}
                     stopEditing={this.stopEditing}
-                    />
-                : <div>
-                  <Slot
-                    fill="commentContent"
-                    defaultComponent={CommentContent}
-                    {...slotProps}
-                    queryData={queryData}
                   />
+                  : <div>
+                    <Slot
+                      fill="commentContent"
+                      defaultComponent={CommentContent}
+                      {...slotProps}
+                      queryData={queryData}
+                    />
                   </div>
               }
             </div>
@@ -539,7 +554,7 @@ export default class Comment extends React.Component {
                         id={comment.id}
                         author_id={comment.user.id}
                         postFlag={postFlag}
-                        addNotification={addNotification}
+                        notify={notify}
                         postDontAgree={postDontAgree}
                         deleteAction={deleteAction}
                         showSignInDialog={showSignInDialog}
@@ -555,29 +570,29 @@ export default class Comment extends React.Component {
 
         {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}
-            />
+            commentPostedHandler={this.commentPostedHandler}
+            charCountEnable={charCountEnable}
+            maxCharCount={maxCharCount}
+            setActiveReplyBox={setActiveReplyBox}
+            parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+            notify={notify}
+            postComment={postComment}
+            currentUser={currentUser}
+            assetId={asset.id}
+          />
           : null}
 
         <TransitionGroup>
-        {view.map((reply) => {
-          return commentIsIgnored(reply)
-            ? <IgnoredCommentTombstone key={reply.id} />
-            : <CommentContainer
+          {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}
+                notify={notify}
                 parentId={comment.id}
                 postComment={postComment}
                 editComment={this.props.editComment}
@@ -599,7 +614,7 @@ export default class Comment extends React.Component {
                 comment={reply}
                 emit={emit}
               />;
-        })}
+          })}
         </TransitionGroup>
         <div className="talk-load-more-replies">
           <LoadMore

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

@@ -17,7 +17,7 @@ export class EditableCommentContent extends React.Component {
   static propTypes = {
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
 
     // comment that is being edited
     comment: PropTypes.shape({
@@ -74,26 +74,26 @@ export class EditableCommentContent extends React.Component {
 
   handleSubmit = async () => {
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
 
     this.setState({loadingState: 'loading'});
 
-    const {editComment, addNotification, stopEditing} = this.props;
+    const {editComment, notify, stopEditing} = this.props;
     if (typeof editComment !== 'function') {return;}
     let response;
     try {
       response = await editComment({body: this.state.body});
       this.setState({loadingState: 'success'});
       const status = response.data.editComment.comment.status;
-      notifyForNewCommentStatus(this.props.addNotification, status);
+      notifyForNewCommentStatus(this.props.notify, status);
       if (typeof stopEditing === 'function') {
         stopEditing();
       }
     } catch (error) {
       this.setState({loadingState: 'error'});
-      forEachError(error, ({msg}) => addNotification('error', msg));
+      forEachError(error, ({msg}) => notify('error', msg));
     }
   }
 
@@ -136,15 +136,15 @@ export class EditableCommentContent extends React.Component {
               <span className={styles.editWindowRemaining}>
                 {
                   this.isEditWindowExpired()
-                  ? <span>
+                    ? <span>
                       {t('edit_comment.edit_window_expired')}
                       {
                         typeof this.props.stopEditing === 'function'
-                        ? <span>&nbsp;<a className={styles.link} onClick={this.props.stopEditing}>{t('edit_comment.edit_window_expired_close')}</a></span>
-                        : null
+                          ? <span>&nbsp;<a className={styles.link} onClick={this.props.stopEditing}>{t('edit_comment.edit_window_expired_close')}</a></span>
+                          : null
                       }
                     </span>
-                  : <span>
+                    : <span>
                       <Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
                       <CountdownSeconds
                         until={this.getEditableUntil()}

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

@@ -7,12 +7,12 @@ const NewCount = ({count, loadMore}) => {
   return <div className='talk-new-comments talk-load-more'>
     {
       count ?
-      <Button onClick={loadMore}>
-        {count === 1
-          ? t('framework.new_count', count, t('framework.comment'))
-          : t('framework.new_count', count, t('framework.comments'))}
-      </Button>
-      : null
+        <Button onClick={loadMore}>
+          {count === 1
+            ? t('framework.new_count', count, t('framework.comment'))
+            : t('framework.new_count', count, t('framework.comments'))}
+        </Button>
+        : null
     }
   </div>;
 };

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

@@ -49,39 +49,30 @@ class Stream extends React.Component {
     );
   };
 
-  render() {
+  renderHighlightedComment() {
     const {
       data,
       root,
       activeReplyBox,
       setActiveReplyBox,
-      appendItemArray,
       commentClassNames,
-      root: {asset, asset: {comment, comments, totalCommentCount}},
+      root: {asset, asset: {comment}},
       postComment,
-      addNotification,
+      notify,
       editComment,
       postFlag,
       postDontAgree,
       deleteAction,
       showSignInDialog,
-      updateItem,
       ignoreUser,
-      activeStreamTab,
-      setActiveStreamTab,
       loadNewReplies,
-      loadMoreComments,
-      viewAllComments,
-      auth: {loggedIn, user},
-      editName,
+      auth: {user},
       emit,
     } = this.props;
-    const {keepCommentBox} = this.state;
-    const open = !asset.isClosed;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
-    let highlightedComment = comment && getTopLevelParent(comment);
-    if (highlightedComment) {
+    let topLevelComment = getTopLevelParent(comment);
+    if (topLevelComment) {
 
       // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
       const isInactive = !isCommentActive(comment.status);
@@ -89,10 +80,153 @@ class Stream extends React.Component {
 
         // the highlighted comment is not active and as such not in the replies, so we
         // attach it to the right parent.
-        highlightedComment = attachCommentToParent(highlightedComment, comment);
+        topLevelComment = attachCommentToParent(topLevelComment, comment);
       }
     }
 
+    return (
+      <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+        <Comment
+          data={data}
+          root={root}
+          commentClassNames={commentClassNames}
+          ignoreUser={ignoreUser}
+          setActiveReplyBox={setActiveReplyBox}
+          activeReplyBox={activeReplyBox}
+          notify={notify}
+          depth={0}
+          disableReply={!open}
+          postComment={postComment}
+          asset={asset}
+          currentUser={user}
+          highlighted={comment.id}
+          postFlag={postFlag}
+          postDontAgree={postDontAgree}
+          loadMore={loadNewReplies}
+          deleteAction={deleteAction}
+          showSignInDialog={showSignInDialog}
+          key={topLevelComment.id}
+          commentIsIgnored={this.commentIsIgnored}
+          comment={topLevelComment}
+          charCountEnable={asset.settings.charCountEnable}
+          maxCharCount={asset.settings.charCount}
+          editComment={editComment}
+          emit={emit}
+          liveUpdates={true}
+        />
+      </div>
+    );
+  }
+
+  renderTabPanel() {
+    const {
+      data,
+      root,
+      activeReplyBox,
+      setActiveReplyBox,
+      commentClassNames,
+      root: {asset, asset: {comments, totalCommentCount}},
+      postComment,
+      notify,
+      editComment,
+      postFlag,
+      postDontAgree,
+      deleteAction,
+      showSignInDialog,
+      ignoreUser,
+      activeStreamTab,
+      setActiveStreamTab,
+      loadNewReplies,
+      loadMoreComments,
+      auth: {user},
+      emit,
+      sortOrder,
+      sortBy,
+      loading,
+    } = this.props;
+
+    const slotProps = {data};
+    const slotQueryData = {root, asset};
+
+    // `key` of `StreamTabPanel` depends on sorting so that we always reset
+    // the state when changing sorting.
+    return (
+      <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
+        <div
+          className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
+        >
+          <Slot
+            fill="streamFilter"
+            queryData={slotQueryData}
+            {...slotProps}
+          />
+        </div>
+        <StreamTabPanel
+          key={`${sortBy}_${sortOrder}`}
+          activeTab={activeStreamTab}
+          setActiveTab={setActiveStreamTab}
+          fallbackTab={'all'}
+          tabSlot={'streamTabs'}
+          tabPaneSlot={'streamTabPanes'}
+          slotProps={slotProps}
+          queryData={slotQueryData}
+          loading={loading}
+          appendTabs={
+            <Tab tabId={'all'} key='all'>
+              All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
+            </Tab>
+          }
+          appendTabPanes={
+            <TabPane tabId={'all'} key='all'>
+              <AllCommentsPane
+                data={data}
+                root={root}
+                comments={comments}
+                commentClassNames={commentClassNames}
+                ignoreUser={ignoreUser}
+                setActiveReplyBox={setActiveReplyBox}
+                activeReplyBox={activeReplyBox}
+                notify={notify}
+                disableReply={!open}
+                postComment={postComment}
+                asset={asset}
+                currentUser={user}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                loadMore={loadMoreComments}
+                loadNewReplies={loadNewReplies}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                commentIsIgnored={this.commentIsIgnored}
+                charCountEnable={asset.settings.charCountEnable}
+                maxCharCount={asset.settings.charCount}
+                editComment={editComment}
+                emit={emit}
+              />
+            </TabPane>
+          }
+          sub
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      data,
+      root,
+      appendItemArray,
+      root: {asset, asset: {comment: highlightedComment, comments}},
+      postComment,
+      notify,
+      updateItem,
+      viewAllComments,
+      auth: {loggedIn, user},
+      editName,
+    } = this.props;
+    const {keepCommentBox} = this.state;
+    const open = !asset.isClosed;
+
     const banned = user && user.status === 'BANNED';
     const temporarilySuspended =
       user &&
@@ -103,7 +237,7 @@ class Stream extends React.Component {
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
-    if (!comment && !comments) {
+    if (!highlightedComment && !comments) {
       console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
       return <StreamError />;
     }
@@ -111,7 +245,7 @@ class Stream extends React.Component {
     return (
       <div id="stream" className={styles.root}>
         <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
-        {comment &&
+        {highlightedComment &&
           <Button
             cStyle="darkGrey"
             className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
@@ -122,15 +256,16 @@ class Stream extends React.Component {
 
         {open
           ? <div id="commentBox">
-              <InfoBox
-                content={asset.settings.infoBoxContent}
-                enable={asset.settings.infoBoxEnable}
-              />
-              <QuestionBox
-                content={asset.settings.questionBoxContent}
-                enable={asset.settings.questionBoxEnable}
-              />
-              {!banned &&
+            <InfoBox
+              content={asset.settings.infoBoxContent}
+              enable={asset.settings.infoBoxEnable}
+            />
+            <QuestionBox
+              content={asset.settings.questionBoxContent}
+              enable={asset.settings.questionBoxEnable}
+              icon={asset.settings.questionBoxIcon}
+            />
+            {!banned &&
                 temporarilySuspended &&
                 <RestrictedMessageBox>
                   {t(
@@ -139,15 +274,15 @@ class Stream extends React.Component {
                     timeago(user.suspension.until)
                   )}
                 </RestrictedMessageBox>}
-              {banned &&
+            {banned &&
                 <SuspendedAccount
                   canEditName={user && user.canEditName}
                   editName={editName}
                   currentUsername={user.username}
                 />}
-              {showCommentBox &&
+            {showCommentBox &&
                 <CommentBox
-                  addNotification={addNotification}
+                  notify={notify}
                   postComment={postComment}
                   appendItemArray={appendItemArray}
                   updateItem={updateItem}
@@ -158,7 +293,7 @@ class Stream extends React.Component {
                   charCountEnable={asset.settings.charCountEnable}
                   maxCharCount={asset.settings.charCount}
                 />}
-            </div>
+          </div>
           : <p>{asset.settings.closedMessage}</p>}
 
         <Slot
@@ -174,103 +309,17 @@ class Stream extends React.Component {
           />
         )}
 
-        {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
-          ? (
-            <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
-              <Comment
-                data={data}
-                root={root}
-                commentClassNames={commentClassNames}
-                ignoreUser={ignoreUser}
-                setActiveReplyBox={setActiveReplyBox}
-                activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
-                depth={0}
-                disableReply={!open}
-                postComment={postComment}
-                asset={asset}
-                currentUser={user}
-                highlighted={comment.id}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                loadMore={loadNewReplies}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                key={highlightedComment.id}
-                commentIsIgnored={this.commentIsIgnored}
-                comment={highlightedComment}
-                charCountEnable={asset.settings.charCountEnable}
-                maxCharCount={asset.settings.charCount}
-                editComment={editComment}
-                emit={emit}
-                liveUpdates={true}
-              />
-            </div>
-            )
-          : <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
-              <div
-                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
-              >
-                <Slot
-                  fill="streamFilter"
-                  queryData={slotQueryData}
-                  {...slotProps}
-                />
-              </div>
-              <StreamTabPanel
-                activeTab={activeStreamTab}
-                setActiveTab={setActiveStreamTab}
-                fallbackTab={'all'}
-                tabSlot={'streamTabs'}
-                tabPaneSlot={'streamTabPanes'}
-                slotProps={slotProps}
-                queryData={slotQueryData}
-                appendTabs={
-                  <Tab tabId={'all'} key='all'>
-                    All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
-                  </Tab>
-                }
-                appendTabPanes={
-                  <TabPane tabId={'all'} key='all'>
-                    <AllCommentsPane
-                      data={data}
-                      root={root}
-                      comments={comments}
-                      commentClassNames={commentClassNames}
-                      ignoreUser={ignoreUser}
-                      setActiveReplyBox={setActiveReplyBox}
-                      activeReplyBox={activeReplyBox}
-                      addNotification={addNotification}
-                      disableReply={!open}
-                      postComment={postComment}
-                      asset={asset}
-                      currentUser={user}
-                      postFlag={postFlag}
-                      postDontAgree={postDontAgree}
-                      loadMore={loadMoreComments}
-                      loadNewReplies={loadNewReplies}
-                      deleteAction={deleteAction}
-                      showSignInDialog={showSignInDialog}
-                      commentIsIgnored={this.commentIsIgnored}
-                      charCountEnable={asset.settings.charCountEnable}
-                      maxCharCount={asset.settings.charCount}
-                      editComment={editComment}
-                      emit={emit}
-                    />
-                  </TabPane>
-                }
-                sub
-              />
-            </div>
-          }
+          ? this.renderHighlightedComment()
+          : this.renderTabPanel()
+        }
       </div>
     );
   }
 }
 
 Stream.propTypes = {
-  addNotification: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
 
   // dispatch action to ignore another user

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

@@ -0,0 +1,3 @@
+.spinnerContainer {
+  margin-top: 16px;
+}

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

@@ -1,19 +1,23 @@
 import React from 'react';
-import {TabBar, TabContent} from 'coral-ui';
+import {Spinner, TabBar, TabContent} from 'coral-ui';
 import PropTypes from 'prop-types';
+import styles from './StreamTabPanel.css';
 
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading} = this.props;
     return (
       <div>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
           {tabs}
         </TabBar>
-        <TabContent activeTab={activeTab} sub={sub}>
-          {tabPanes}
-        </TabContent>
+        {loading
+          ? <div className={styles.spinnerContainer}><Spinner /></div>
+          : <TabContent activeTab={activeTab} sub={sub}>
+              {tabPanes}
+            </TabContent>
+        }
       </div>
     );
   }

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

@@ -44,40 +44,40 @@ class SuspendedAccount extends Component {
 
     return <RestrictedMessageBox>
       <span>{
-          canEditName ?
+        canEditName ?
           t('framework.edit_name.msg')
           :
           <span>
             <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
           </span>
-        }</span>
+      }</span>
       {
         canEditName ?
-        <div>
-          <div className={styles.alert}>
-            {alert}
-          </div>
-          <label
-            htmlFor='username'
-            className="screen-reader-text"
-            aria-hidden={true}>
-            {t('framework.edit_name.label')}
-          </label>
-          <input
-            type='text'
-            className={styles.editNameInput}
-            value={username}
-            placeholder={t('framework.edit_name.label')}
-            id='username'
-            onChange={(e) => this.setState({username: e.target.value})}
-            rows={3}/><br/>
-          <Button
-            onClick={this.onSubmitClick}>
-            {
-              t('framework.edit_name.button')
-            }
-          </Button>
-        </div> : null
+          <div>
+            <div className={styles.alert}>
+              {alert}
+            </div>
+            <label
+              htmlFor='username'
+              className="screen-reader-text"
+              aria-hidden={true}>
+              {t('framework.edit_name.label')}
+            </label>
+            <input
+              type='text'
+              className={styles.editNameInput}
+              value={username}
+              placeholder={t('framework.edit_name.label')}
+              id='username'
+              onChange={(e) => this.setState({username: e.target.value})}
+              rows={3}/><br/>
+            <Button
+              onClick={this.onSubmitClick}>
+              {
+                t('framework.edit_name.button')
+              }
+            </Button>
+          </div> : null
       }
     </RestrictedMessageBox>;
   }

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

@@ -18,7 +18,7 @@ export class TopRightMenu extends React.Component {
     ignoreUser: PropTypes.func,
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
   }
   constructor(props) {
     super(props);
@@ -27,7 +27,7 @@ export class TopRightMenu extends React.Component {
     };
   }
   render() {
-    const {comment, ignoreUser, addNotification} = this.props;
+    const {comment, ignoreUser, notify} = this.props;
 
     // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable)
     const reset = () => this.setState({timesReset: this.state.timesReset + 1});
@@ -40,7 +40,7 @@ export class TopRightMenu extends React.Component {
       try {
         await ignoreUser({id});
       } catch (error) {
-        addNotification('error', 'Failed to ignore user');
+        notify('error', 'Failed to ignore user');
         throw error;
       }
     };
@@ -51,7 +51,7 @@ export class TopRightMenu extends React.Component {
             user={comment.user}
             cancel={reset}
             ignoreUser={ignoreUserAndCloseMenuAndNotifyOnError}
-            />
+          />
         </div>
       </Toggleable>
     );

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

@@ -6,3 +6,4 @@ export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
 export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
 export const THREADING_LEVEL = process.env.TALK_THREADING_LEVEL;
 export const SET_ACTIVE_TAB = 'CORAL_STREAM_SET_ACTIVE_TAB';
+export const SET_SORT = 'CORAL_STREAM_SET_SORT';

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

@@ -15,7 +15,9 @@ const slots = [
   'commentActions',
   'commentContent',
   'commentReactions',
-  'commentAvatar'
+  'commentAvatar',
+  'commentAuthorName',
+  'commentAuthorTags'
 ];
 
 /**
@@ -96,6 +98,7 @@ const withCommentFragments = withFragments({
   asset: gql`
     fragment CoralEmbedStream_Comment_asset on Asset {
       __typename
+      id
       ${getSlotFragmentSpreads(slots, 'asset')}
     }
     `,
@@ -103,7 +106,7 @@ const withCommentFragments = withFragments({
     fragment CoralEmbedStream_Comment_comment on Comment {
       ...CoralEmbedStream_Comment_SingleComment
       ${nest(`
-        replies(limit: 3, excludeIgnored: $excludeIgnored) {
+        replies(query: {limit: 3, excludeIgnored: $excludeIgnored}) {
           nodes {
             ...CoralEmbedStream_Comment_SingleComment
             ...nest

client/coral-embed-stream/src/containers/Embed.js

@@ -8,22 +8,25 @@ import branch from 'recompose/branch';
 import renderComponent from 'recompose/renderComponent';
 
 import {Spinner} from 'coral-ui';
-import * as authActions from 'coral-framework/actions/auth';
-import * as assetActions from 'coral-framework/actions/asset';
-import pym from 'coral-framework/services/pym';
+import * as authActions from '../actions/auth';
+import * as assetActions from '../actions/asset';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from './Stream';
-import {addNotification} from 'coral-framework/actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
-
+import PropTypes from 'prop-types';
 import {setActiveTab} from '../actions/embed';
 
 const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
 const {fetchAssetSuccess} = assetActions;
 
 class EmbedContainer extends React.Component {
+  static contextTypes = {
+    pym: PropTypes.object,
+  };
+
   subscriptions = [];
 
   subscribeToUpdates(props = this.props) {
@@ -31,19 +34,19 @@ class EmbedContainer extends React.Component {
       const newSubscriptions = [{
         document: USER_BANNED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_banned'));
+          notify('info', t('your_account_has_been_banned'));
         },
       },
       {
         document: USER_SUSPENDED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_suspended'));
+          notify('info', t('your_account_has_been_suspended'));
         },
       },
       {
         document: USERNAME_REJECTED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_username_has_been_rejected'));
+          notify('info', t('your_username_has_been_rejected'));
         },
       }];
 
@@ -95,7 +98,7 @@ class EmbedContainer extends React.Component {
     if (!get(prevProps, 'root.asset.comment') && get(this.props, 'root.asset.comment')) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
+      setTimeout(() => this.context.pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
     }
   }
 
@@ -151,7 +154,15 @@ const slots = [
 ];
 
 const EMBED_QUERY = gql`
-  query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
+  query CoralEmbedStream_Embed(
+    $assetId: ID,
+    $assetUrl: String,
+    $commentId: ID!,
+    $hasComment: Boolean!,
+    $excludeIgnored: Boolean,
+    $sortBy: SORT_COMMENTS_BY!,
+    $sortOrder: SORT_ORDER!,
+  ) {
     me {
       id
       status
@@ -163,13 +174,15 @@ const EMBED_QUERY = gql`
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {
-  options: ({auth, commentId, assetId, assetUrl}) => ({
+  options: ({auth, commentId, assetId, assetUrl, sortBy, sortOrder}) => ({
     variables: {
       assetId,
       assetUrl,
       commentId,
       hasComment: commentId !== '',
       excludeIgnored: Boolean(auth && auth.user && auth.user.id),
+      sortBy,
+      sortOrder,
     },
   }),
 });
@@ -180,7 +193,9 @@ const mapStateToProps = (state) => ({
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
-  config: state.config
+  config: state.config,
+  sortOrder: state.stream.sortOrder,
+  sortBy: state.stream.sortBy,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -190,7 +205,7 @@ const mapDispatchToProps = (dispatch) =>
       checkLogin,
       setActiveTab,
       fetchAssetSuccess,
-      addNotification,
+      notify,
       focusSignInDialog,
       blurSignInDialog,
       hideSignInDialog,

client/coral-embed-stream/src/containers/Stream.js

@@ -8,7 +8,7 @@ import {
   withDeleteAction, withIgnoreUser, withEditComment
 } from 'coral-framework/graphql/mutations';
 
-import * as authActions from 'coral-framework/actions/auth';
+import * as authActions from 'coral-embed-stream/src/actions/auth';
 import * as notificationActions from 'coral-framework/actions/notification';
 import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
 import Stream from '../components/Stream';
@@ -26,14 +26,18 @@ import {
 } from '../graphql/utils';
 
 const {showSignInDialog, editName} = authActions;
-const {addNotification} = notificationActions;
+const {notify} = notificationActions;
 
 class StreamContainer extends React.Component {
-  subscriptions = [];
+  commentsAddedSubscription = null;
+  commentsEditedSubscription = null;
 
-  subscribeToUpdates() {
-    const newSubscriptions = [{
+  subscribeToCommentsEdited() {
+    this.commentsEditedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_EDITED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
         // Ignore mutations from me.
@@ -51,9 +55,15 @@ class StreamContainer extends React.Component {
           return removeCommentFromEmbedQuery(prev, commentEdited.id);
         }
       },
-    },
-    {
+    });
+  }
+
+  subscribeToCommentsAdded() {
+    this.commentsAddedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_ADDED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
       updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
 
         // Ignore mutations from me.
@@ -74,22 +84,27 @@ class StreamContainer extends React.Component {
           return prev;
         }
 
+        // Newest top-level comments are only added when sorting by 'newest first'.
+        if (!commentAdded.parent && !this.isSortedByNewestFirst()) {
+          return prev;
+        }
         return insertCommentIntoEmbedQuery(prev, commentAdded);
-      }
-    }];
-
-    this.subscriptions = newSubscriptions.map((s) => this.props.data.subscribeToMore({
-      document: s.document,
-      variables: {
-        assetId: this.props.root.asset.id,
       },
-      updateQuery: s.updateQuery,
-    }));
+    });
   }
 
-  unsubscribe() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe());
-    this.subscriptions = [];
+  unsubscribeCommentsAdded() {
+    if (this.commentsAddedSubscription) {
+      this.commentsAddedSubscription();
+      this.commentsAddedSubscription = null;
+    }
+  }
+
+  unsubscribeCommentsEdited() {
+    if (this.commentsEditedSubscription) {
+      this.commentsEditedSubscription();
+      this.commentsEditedSubscription = null;
+    }
   }
 
   loadNewReplies = (parent_id) => {
@@ -102,7 +117,7 @@ class StreamContainer extends React.Component {
         cursor: comment.replies.endCursor,
         parent_id,
         asset_id: this.props.root.asset.id,
-        sort: 'CHRONOLOGICAL',
+        sortOrder: 'ASC',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
@@ -119,7 +134,8 @@ class StreamContainer extends React.Component {
         cursor: this.props.root.asset.comments.endCursor,
         parent_id: null,
         asset_id: this.props.root.asset.id,
-        sort: 'REVERSE_CHRONOLOGICAL',
+        sortOrder: this.props.data.variables.sortOrder,
+        sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
@@ -128,36 +144,55 @@ class StreamContainer extends React.Component {
     });
   };
 
+  isSortedByNewestFirst({sortBy, sortOrder} = this.props) {
+    return sortBy === 'CREATED_AT' && sortOrder === 'DESC';
+  }
+
   componentDidMount() {
     if (this.props.previousTab) {
       this.props.data.refetch();
     }
-    this.subscribeToUpdates();
+
+    if (this.isSortedByNewestFirst()) {
+      this.subscribeToCommentsAdded();
+    }
+
+    this.subscribeToCommentsEdited();
   }
 
   componentWillUnmount() {
-    this.unsubscribe();
+    this.unsubscribeCommentsAdded();
+    this.unsubscribeCommentsEdited();
     clearInterval(this.countPoll);
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.sortOrder !== nextProps.sortOrder || this.props.sortBy !== nextProps.sortBy) {
+      nextProps.data.refetch();
+    }
+  }
+
   userIsDegraged({auth: {user}} = this.props) {
     return !can(user, 'INTERACT_WITH_COMMUNITY');
   }
 
   render() {
-    if (this.props.refetching
-      || !this.props.root.asset
+    if (!this.props.root.asset
       || !this.props.root.asset.comment
       && !this.props.root.asset.comments
     ) {
       return <Spinner />;
     }
+
+    const streamLoading = this.props.refetching || this.props.data.loading;
+
     return <Stream
       {...this.props}
       loadMore={this.loadMore}
       loadMoreComments={this.loadMoreComments}
       loadNewReplies={this.loadNewReplies}
       userIsDegraged={this.userIsDegraged()}
+      loading={streamLoading}
     />;
   }
 }
@@ -203,8 +238,26 @@ const COMMENTS_EDITED_SUBSCRIPTION = gql`
 `;
 
 const LOAD_MORE_QUERY = gql`
-  query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
-    comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
+  query CoralEmbedStream_LoadMoreComments(
+    $limit: Int = 5
+    $cursor: Cursor
+    $parent_id: ID
+    $asset_id: ID
+    $sortOrder: SORT_ORDER
+    $sortBy: SORT_COMMENTS_BY = CREATED_AT
+    $excludeIgnored: Boolean
+  ) {
+    comments(
+      query: {
+        limit: $limit
+        cursor: $cursor
+        parent_id: $parent_id
+        asset_id: $asset_id
+        sortOrder: $sortOrder
+        sortBy: $sortBy
+        excludeIgnored: $excludeIgnored
+      }
+    ) {
       nodes {
         ...CoralEmbedStream_Stream_comment
       }
@@ -219,6 +272,7 @@ const LOAD_MORE_QUERY = gql`
 const slots = [
   'streamTabs',
   'streamTabPanes',
+  'streamFilter',
 ];
 
 const fragments = {
@@ -247,15 +301,16 @@ const fragments = {
           premodLinksEnable
           questionBoxEnable
           questionBoxContent
+          questionBoxIcon
           closeTimeout
           closedMessage
           charCountEnable
           charCount
           requireEmailConfirmation
         }
-        commentCount(excludeIgnored: $excludeIgnored) @skip(if: $hasComment)
-        totalCommentCount(excludeIgnored: $excludeIgnored) @skip(if: $hasComment)
-        comments(limit: 10, excludeIgnored: $excludeIgnored) @skip(if: $hasComment) {
+        commentCount @skip(if: $hasComment)
+        totalCommentCount @skip(if: $hasComment)
+        comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
           nodes {
             ...CoralEmbedStream_Stream_comment
           }
@@ -298,12 +353,14 @@ const mapStateToProps = (state) => ({
   previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames,
   pluginConfig: state.config.plugin_config,
+  sortOrder: state.stream.sortOrder,
+  sortBy: state.stream.sortBy,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     showSignInDialog,
-    addNotification,
+    notify,
     setActiveReplyBox,
     editName,
     viewAllComments,

client/coral-embed-stream/src/containers/StreamTabPanel.js

@@ -2,13 +2,15 @@ import React from 'react';
 import StreamTabPanel from '../components/StreamTabPanel';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
-import {getSlotComponents, getSlotComponentProps} from 'coral-framework/helpers/plugins';
 import {Tab, TabPane} from 'coral-ui';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
 class StreamTabPanelContainer extends React.Component {
+  static contextTypes = {
+    plugins: PropTypes.object,
+  };
 
   componentDidMount() {
     this.fallbackAllTab();
@@ -43,28 +45,37 @@ class StreamTabPanelContainer extends React.Component {
   }
 
   getSlotComponents(slot, props = this.props) {
-    return getSlotComponents(slot, props.reduxState, props.slotProps, props.queryData);
+    const {plugins} = this.context;
+    return plugins.getSlotComponents(slot, props.reduxState, props.slotProps, props.queryData);
   }
 
   getPluginTabElements(props = this.props) {
-    return this.getSlotComponents(props.tabSlot).map((PluginComponent) => (
-      <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-        <PluginComponent
-          {...getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData)}
-          active={this.props.activeTab === PluginComponent.talkPluginName}
-        />
-      </Tab>
-    ));
+    const {plugins} = this.context;
+    return this.getSlotComponents(props.tabSlot).map((PluginComponent) => {
+      const pluginProps = plugins.getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData);
+      return (
+        <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+          <PluginComponent
+            {...pluginProps}
+            active={this.props.activeTab === PluginComponent.talkPluginName}
+          />
+        </Tab>
+      );
+    });
   }
 
   getPluginTabPaneElements(props = this.props) {
-    return this.getSlotComponents(props.tabPaneSlot).map((PluginComponent) => (
-      <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-        <PluginComponent
-          {...getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData)}
-        />
-      </TabPane>
-    ));
+    const {plugins} = this.context;
+    return this.getSlotComponents(props.tabPaneSlot).map((PluginComponent) => {
+      const pluginProps = plugins.getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData);
+      return (
+        <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+          <PluginComponent
+            {...pluginProps}
+          />
+        </TabPane>
+      );
+    });
   }
 
   render() {
@@ -75,6 +86,7 @@ class StreamTabPanelContainer extends React.Component {
         setActiveTab={this.props.setActiveTab}
         tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
         tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        loading={this.props.loading}
         sub={this.props.sub}
       />
     );
@@ -99,6 +111,7 @@ StreamTabPanelContainer.propTypes = {
   queryData: PropTypes.object,
   className: PropTypes.string,
   sub: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({

client/coral-embed-stream/src/graphql/index.js

@@ -1,10 +1,9 @@
 import {gql} from 'react-apollo';
-import {add} from 'coral-framework/services/graphqlRegistry';
 import update from 'immutability-helper';
 import uuid from 'uuid/v4';
 import {insertCommentIntoEmbedQuery, removeCommentFromEmbedQuery} from './utils';
 
-const extension = {
+export default {
   fragments: {
     EditCommentResponse: gql`
       fragment CoralEmbedStream_EditCommentResponse on EditCommentResponse {
@@ -223,4 +222,3 @@ const extension = {
   },
 };
 
-add(extension);

client/coral-embed-stream/src/graphql/utils.js

@@ -1,5 +1,5 @@
 import update from 'immutability-helper';
-import {insertCommentsSorted} from 'coral-framework/utils';
+import {appendNewNodes} from 'coral-framework/utils';
 
 function determineCommentDepth(comment) {
   let depth = 0;
@@ -36,11 +36,15 @@ function applyToCommentsOrigin(root, callback) {
 }
 
 function findAndInsertComment(parent, comment) {
-  const [connectionField, countField, action] = parent.__typename === 'Asset'
+  const isAsset = parent.__typename === 'Asset';
+  const [connectionField, countField, action] = isAsset
     ? ['comments', 'commentCount', '$unshift']
     : ['replies', 'replyCount', '$push'];
 
-  if (!comment.parent || parent.id === comment.parent.id) {
+  if (
+    !comment.parent && isAsset                            // A top level comment in the asset.
+    || comment.parent && parent.id === comment.parent.id  // A reply at the correct parent.
+  ) {
     return update(parent, {
       [connectionField]: {
         nodes: {[action]: [comment]},
@@ -56,7 +60,7 @@ function findAndInsertComment(parent, comment) {
     [connectionField]: {
       nodes: {
         $apply: (nodes) =>
-         nodes.map((node) => findAndInsertComment(node, comment))
+          nodes.map((node) => findAndInsertComment(node, comment))
       },
     },
   });
@@ -159,14 +163,7 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
       [connectionField]: {
         hasNextPage: {$set: comments.hasNextPage},
         endCursor: {$set: comments.endCursor},
-        nodes: {$apply: (nodes) => {
-          if (isAsset) {
-            return nodes.concat(comments.nodes);
-          }
-          return insertCommentsSorted(nodes, comments.nodes.filter(
-            (comment) => !nodes.some((node) => node.id === comment.id)
-          ));
-        }},
+        nodes: {$apply: (nodes) => appendNewNodes(nodes, comments.nodes)},
       },
     });
   }
@@ -179,7 +176,7 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
     [connectionField]: {
       nodes: {
         $apply: (nodes) =>
-         nodes.map((node) => findAndInsertFetchedComments(node, comments, parent_id))
+          nodes.map((node) => findAndInsertFetchedComments(node, comments, parent_id))
       },
     },
   });
@@ -198,7 +195,7 @@ export function attachCommentToParent(topLevelComment, comment) {
     return update(topLevelComment, {
       replies: {
         nodes: {
-          $apply: (nodes) => insertCommentsSorted(nodes, comment),
+          $apply: (nodes) => appendNewNodes(nodes, [comment]),
         },
       },
       replyCount: {