Merge pull request #681 from coralproject/fix-viewing-options

Use new import path for coral-ui

.eslintignore

@@ -10,4 +10,6 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 node_modules

.gitignore

@@ -23,5 +23,7 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 
 **/node_modules/*

PLUGINS.md

@@ -280,6 +280,41 @@ send data to the client. If the type in question contains args, clients may subs
 
 For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
 
+#### Field: `tokenUserNotFound`
+
+```js
+tokenUserNotFound: async ({jwt, token}) => {
+  let profile = await someExternalService(token);
+  if (!profile) {
+    return null;
+  }
+
+  let user = await UserModel.findOneAndUpdate({
+    id: profile.id
+  }, {
+    id: profile.id,
+    username: profile.username,
+    lowercaseUsername: profile.username.toLowerCase(),
+    roles: [],
+    profiles: []
+  }, {
+    setDefaultsOnInsert: true,
+    new: true,
+    upsert: true
+  });
+
+  return user;
+}
+```
+
+The `tokenUserNotFound` hook allows auth integrations to hook into the event
+when a valid token is provided but a user can't be found in the database that
+matches the provided id.
+
+The function is async, and should return the user object that was created in the
+database, or null if the user wasn't found. The `jwt` paramenter of the object
+is the unpacked token, while `token` is the original jwt token string.
+
 #### Field: `router`
 
 ```js
@@ -307,6 +342,30 @@ module.exports = {
 }
 ```
 
+#### Field: `tags`
+
+The tags hook allows a plugin to define tags that are code controlled (added
+or enabled by code). Below is an example pulled from the core off topic plugin
+on how to create a hook for the `OFF_TOPIC` name:
+
+```js
+[
+  {
+    name: 'OFF_TOPIC',
+    permissions: {
+      public: true,
+      self: true,
+      roles: []
+    },
+    models: ['COMMENTS'],
+    created_at: new Date()
+  }
+]
+```
+
+You can refer to `models/schema/tag.js` for the available schema to match when
+creating models to enable/disable specific features.
+
 #### Field: `passport`
 
 ```js

README.md

@@ -44,6 +44,10 @@ sign and verify tokens via a `HS256` algorithm.
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
+### Running Migrations
+
+We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
+
 ### Using Trust
 
 Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.

app.js

@@ -6,6 +6,7 @@ const helmet = require('helmet');
 const authentication = require('./middleware/authentication');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
+const i18n = require('./services/i18n');
 const enabled = require('debug').enabled;
 const errors = require('./errors');
 const {createGraphOptions} = require('./graph');
@@ -157,6 +158,8 @@ app.use('/', (err, req, res, next) => {
     console.error(err);
   }
 
+  i18n.init(req);
+  
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {

bin/cli

@@ -13,6 +13,7 @@ program
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
   .command('users', 'work with the application auth')
+  .command('migration', 'provides utilities for migrating the database')
   .command('plugins', 'provides utilities for interacting with the plugin system')
   .parse(process.argv);
 

bin/cli-assets

@@ -5,12 +5,15 @@
  */
 
 const program = require('./commander');
-const parseDuration = require('parse-duration');
+const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');
+const CommentModel = require('../models/comment');
+const AssetsService = require('../services/assets');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
 const util = require('./util');
+const inquirer = require('inquirer');
 
 // Register the shutdown criteria.
 util.onshutdown([
@@ -20,65 +23,112 @@ util.onshutdown([
 /**
  * Lists all the assets registered in the database.
  */
-function listAssets() {
-  AssetModel
-    .find({})
-    .sort({'created_at': 1})
-    .then((asset) => {
-      let table = new Table({
-        head: [
-          'ID',
-          'Title',
-          'URL'
-        ]
-      });
+async function listAssets() {
+  try {
+    let assets = await AssetModel.find({}).sort({'created_at': 1});
 
-      asset.forEach((asset) => {
-        table.push([
-          asset.id,
-          asset.title ? asset.title : '',
-          asset.url ? asset.url : ''
-        ]);
-      });
-
-      console.log(table.toString());
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
+    let table = new Table({
+      head: [
+        'ID',
+        'Title',
+        'URL'
+      ]
     });
+
+    assets.forEach((asset) => {
+      table.push([
+        asset.id,
+        asset.title ? asset.title : '',
+        asset.url ? asset.url : ''
+      ]);
+    });
+
+    console.log(table.toString());
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
 }
 
-function refreshAssets(ageString) {
-  const now = new Date().getTime();
-  const ageMs = parseDuration(ageString);
-  const age = new Date(now - ageMs);
+async function refreshAssets(ageString) {
+  try {
+    const now = new Date().getTime();
+    const ageMs = parseDuration(ageString);
+    const age = new Date(now - ageMs);
 
-  AssetModel.find({
-    $or: [
-      {
-        scraped: {
-          $lte: age
+    let assets = await AssetModel.find({
+      $or: [
+        {
+          scraped: {
+            $lte: age
+          }
+        },
+        {
+          scraped: null
         }
-      },
-      {
-        scraped: null
-      }
-    ]
-  })
+      ]
+    });
 
-  // Queue all the assets for scraping.
-  .then((assets) => Promise.all(assets.map(scraper.create)))
+    // Queue all the assets for scraping.
+    await Promise.all(assets.map(scraper.create));
 
-  .then(() => {
     console.log('Assets were queued to be scraped');
     util.shutdown();
-  })
-  .catch((err) => {
-    console.error(err);
+  } catch (e) {
+    console.error(e);
     util.shutdown(1);
-  });
+  }
+}
+
+async function updateURL(assetID, assetURL) {
+  try {
+    await AssetsService.updateURL(assetID, assetURL);
+
+    console.log(`Asset ${assetID} was updated to have url ${assetURL}.`);
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function merge(srcID, dstID) {
+  try {
+
+    // Grab the assets...
+    let [srcAsset, dstAsset] = await AssetsService.findByIDs([srcID, dstID]);
+    if (!srcAsset || !dstAsset) {
+      throw new Error('Not all assets indicated by id exist, cannot merge');
+    }
+
+    // Count the affected resources...
+    let srcCommentCount = await CommentModel.find({asset_id: srcID}).count();
+
+    console.log(`Now going to update ${srcCommentCount} comments and delete the source Asset[${srcID}].`);
+
+    let {confirm} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'confirm',
+        message: 'Proceed with merge',
+        default: false
+      }
+    ]);
+
+    if (confirm) {
+
+      // Perform the merge!
+      await AssetsService.merge(srcID, dstID);
+    } else {
+      console.warn('Aborting merge');
+    }
+
+    util.shutdown(0);
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
 }
 
 //==============================================================================
@@ -95,6 +145,16 @@ program
   .description('queues the assets that exceed the age requested')
   .action(refreshAssets);
 
+program
+  .command('update-url <assetID> <url>')
+  .description('update the URL of an asset')
+  .action(updateURL);
+
+program
+  .command('merge <srcID> <dstID>')
+  .description('merges two assets together by moving comments from src to dst and deleting the src asset')
+  .action(merge);
+
 program.parse(process.argv);
 
 // If there is no command listed, output help.

bin/cli-migration

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const program = require('./commander');
+const util = require('./util');
+const inquirer = require('inquirer');
+const mongoose = require('../services/mongoose');
+const MigrationService = require('../services/migration');
+
+// Register shutdown hooks.
+util.onshutdown([
+  () => mongoose.disconnect()
+]);
+
+async function createMigration(name) {
+  try {
+
+    // Create the migration.
+    await MigrationService.create(name);
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function runMigrations() {
+
+  try {
+
+    let {backedUp} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'backedUp',
+        message: 'Did you perform a database backup',
+        default: false
+      }
+    ]);
+
+    if (!backedUp) {
+      throw new Error('Please backup your databases prior to migrations occuring');
+    }
+
+    // Get the migrations to run.
+    let migrations = await MigrationService.listPending();
+
+    console.log('Now going to run the following migrations:\n');
+
+    for (let {filename} of migrations) {
+      console.log(`\tmigrations/${filename}`);
+    }
+
+    let {confirm} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'confirm',
+        message: 'Proceed with migrations',
+        default: false
+      }
+    ]);
+
+    if (confirm) {
+
+      // Run the migrations.
+      await MigrationService.run(migrations);
+    } else {
+      console.warn('Skipping migrations');
+    }
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('create <name>')
+  .description('creates a new migration')
+  .action(createMigration);
+
+program
+  .command('run')
+  .description('runs all pending migrations')
+  .action(runMigrations);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (process.argv.length <= 2) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/cli-serve

@@ -2,9 +2,13 @@
 
 const program = require('./commander');
 const app = require('../app');
+const debug = require('debug')('talk:cli:serve');
+const errors = require('../errors');
 const {createServer} = require('http');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
+const MigrationService = require('../services/migration');
+const SetupService = require('../services/setup');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
@@ -87,7 +91,46 @@ function onListening() {
 /**
  * Start the app.
  */
-function startApp(program) {
+async function startApp(program) {
+
+  try {
+
+    // Check to see if the application is installed. If the application
+    // has been installed, then it will throw errors.ErrSettingsNotInit, this
+    // just means we don't have to check that the migrations have run.
+    await SetupService.isAvailable();
+
+    debug('setup is currently available, migrations not being checked');
+
+  } catch (e) {
+
+    // Check the error.
+    switch (e) {
+    case errors.ErrInstallLock, errors.ErrSettingsInit:
+
+      debug('setup is not currently available, migrations now being checked');
+
+      // The error was expected, just continue.
+      break;
+    default:
+
+      // The error was not expected, throw the error!
+      throw e;
+    }
+
+    // Now try and check the migration status.
+    try {
+
+      // Verify that the minimum migration version is met.
+      await MigrationService.verify();
+
+    } catch (e) {
+      console.error(e);
+      process.exit(1);
+    }
+
+    debug('migrations do not have to be run');
+  }
 
   /**
   * Listen on provided port, on all network interfaces.

bin/cli-setup

@@ -8,6 +8,7 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingModel = require('../models/setting');
+const MODERATION_OPTIONS = require('../models/enum/moderation_options');
 const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
@@ -32,166 +33,155 @@ program
 // Setup the application
 //==============================================================================
 
-const performSetup = () => {
-
-  if (program.defaults) {
-    return SettingsService
-      .init()
-      .then(() => {
-        console.log('Settings created.');
-        console.log('\nTalk is now installed!');
-        util.shutdown();
-      })
-      .catch((err) => {
-        console.error(err);
-        util.shutdown(1);
-      });
-  }
+const performSetup = async () => {
 
   // Get the current settings, we are expecing an error here.
-  return SettingsService
-    .retrieve()
-    .then(() => {
+  try {
 
-      // We should NOT have gotten a settings object, this means that the
-      // application is already setup. Error out here.
-      throw errors.ErrSettingsInit;
+    // Try to get the settings.
+    await SettingsService.retrieve();
 
-    })
-    .catch((err) => {
+    // We should NOT have gotten a settings object, this means that the
+    // application is already setup. Error out here.
+    throw errors.ErrSettingsInit;
 
-      // If the error is `not init`, then we're good, otherwise, it's something
-      // else.
-      if (err !== errors.ErrSettingsNotInit) {
-        throw err;
+  } catch (e) {
+
+    // If the error is `not init`, then we're good, otherwise, it's something
+    // else.
+    if (e !== errors.ErrSettingsNotInit) {
+      throw e;
+    }
+  }
+
+  if (program.defaults) {
+    await SettingsService.init();
+
+    console.log('Settings created.');
+    console.log('\nTalk is now installed!');
+
+    return;
+  }
+
+  // Create the base settings model.
+  let settings = new SettingModel();
+
+  console.log('\nWe\'ll ask you some questions in order to setup your installation of Talk.\n');
+
+  let answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'organizationName',
+      message: 'Organization Name',
+      default: settings.organizationName,
+      validate: (input) => {
+        if (input && input.length > 0) {
+          return true;
+        }
+
+        return 'Organization Name is required.';
       }
+    },
+    {
+      type: 'list',
+      choices: MODERATION_OPTIONS,
+      name: 'moderation',
+      default: settings.moderation,
+      message: 'Select a moderation mode'
+    },
+    {
+      type: 'confirm',
+      name: 'requireEmailConfirmation',
+      default: settings.requireEmailConfirmation,
+      message: 'Should emails always be confirmed'
+    }
+  ]);
 
-    })
-    .then(() => {
+  // Update the settings that were changed.
+  Object.keys(answers).forEach((key) => {
+    if (answers[key] !== undefined) {
+      settings[key] = answers[key];
+    }
+  });
 
-      // Create the base settings model.
-      let settings = new SettingModel();
+  console.log('\nWe\'ll ask you some questions about your first admin user.\n');
 
-      console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n');
-
-      return inquirer.prompt([
-        {
-          type: 'input',
-          name: 'organizationName',
-          message: 'Organization Name',
-          default: settings.organizationName,
-          validate: (input) => {
-            if (input && input.length > 0) {
-              return true;
-            }
-
-            return 'Organization Name is required.';
-          }
-        },
-        {
-          type: 'list',
-          choices: SettingModel.MODERATION_OPTIONS,
-          name: 'moderation',
-          default: settings.moderation,
-          message: 'Select a moderation mode'
-        },
-        {
-          type: 'confirm',
-          name: 'requireEmailConfirmation',
-          default: settings.requireEmailConfirmation,
-          message: 'Should emails always be confirmed'
-        }
-      ])
-      .then((answers) => {
-
-        // Update the settings that were changed.
-        Object.keys(answers).forEach((key) => {
-          if (answers[key] !== undefined) {
-            settings[key] = answers[key];
-          }
-        });
-
-        console.log('\nWe\'ll ask you some questions about your first admin user.\n');
-
-        return inquirer.prompt([
-          {
-            type: 'input',
-            name: 'username',
-            message: 'Username',
-            filter: (username) => {
-              return UsersService
-                .isValidUsername(username, false)
-                .catch((err) => {
-                  throw err.message;
-                });
-            }
-          },
-          {
-            name: 'email',
-            message: 'Email',
-            format: 'email',
-            validate: (value) => {
-              if (value && value.length >= 3) {
-                return true;
-              }
-
-              return 'Email is required';
-            }
-          },
-          {
-            name: 'password',
-            message: 'Password',
-            type: 'password',
-            filter: (password) => {
-              return UsersService
-                .isValidPassword(password)
-                .catch((err) => {
-                  throw err.message;
-                });
-            }
-          },
-          {
-            name: 'confirmPassword',
-            message: 'Confirm Password',
-            type: 'password',
-            filter: (confirmPassword) => {
-              return UsersService
-                .isValidPassword(confirmPassword)
-                .catch((err) => {
-                  throw err.message;
-                });
-            }
-          },
-        ]);
-      })
-      .then((user) => {
-
-        if (user.password !== user.confirmPassword) {
-          return Promise.reject(new Error('Passwords do not match'));
+  let user = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'username',
+      message: 'Username',
+      filter: (username) => {
+        return UsersService
+          .isValidUsername(username, false)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'email',
+      message: 'Email',
+      format: 'email',
+      validate: (value) => {
+        if (value && value.length >= 3) {
+          return true;
         }
 
-        return SetupService.setup({
-          settings: settings.toObject(),
-          user: {
-            email: user.email,
-            username: user.username,
-            password: user.password
-          }
-        });
-      });
-    })
-    .then(({user}) => {
-      console.log('Settings created.');
-      console.log(`User ${user.id} created.`);
-      console.log('\nTalk is now installed!');
-      console.log('\nWe recommend adding TALK_INSTALL_LOCK=TRUE to your environment to turn off the dynamic setup.');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
+        return 'Email is required';
+      }
+    },
+    {
+      name: 'password',
+      message: 'Password',
+      type: 'password',
+      filter: (password) => {
+        return UsersService
+          .isValidPassword(password)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'confirmPassword',
+      message: 'Confirm Password',
+      type: 'password',
+      filter: (confirmPassword) => {
+        return UsersService
+          .isValidPassword(confirmPassword)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+  ]);
+
+  if (user.password !== user.confirmPassword) {
+    return Promise.reject(new Error('Passwords do not match'));
+  }
+
+  let {user: newUser} = await SetupService.setup({
+    settings: settings.toObject(),
+    user: {
+      email: user.email,
+      username: user.username,
+      password: user.password
+    }
+  });
+    
+  console.log('Settings created.');
+  console.log(`User ${newUser.id} created.`);
+  console.log('\nTalk is now installed!');
+  console.log('\nWe recommend adding TALK_INSTALL_LOCK=TRUE to your environment to turn off the dynamic setup.');
 };
 
 // Start tthe setup process.
-performSetup();
+performSetup()
+  .then(() => {
+    util.shutdown();
+  })
+  .catch((e) => {
+    console.error(e);
+    util.shutdown(1);
+  });

client/.eslintrc.json

@@ -4,21 +4,20 @@
         "es6": true,
         "mocha": true
     },
-    "extends": "../.eslintrc.json",
     "parserOptions": {
+        "sourceType": "module",
         "ecmaFeatures": {
             "experimentalObjectRestSpread": true,
             "jsx": true
-        },
-        "sourceType": "module"
+        }
     },
     "parser": "babel-eslint",
     "plugins": [
         "react"
     ],
     "rules": {
-      "react/jsx-uses-react": "error",
-      "react/jsx-uses-vars": "error",
-      "no-console": ["warn", { "allow": ["warn", "error"] }]
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["warn", { "allow": ["warn", "error"] }]
     }
 }

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

@@ -33,3 +33,21 @@ export const setSortOrder = (order) => ({
   order
 });
 
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};

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

@@ -17,11 +17,11 @@ const ActionButton = ({type = '', active, ...props}) => {
 
   return (
     <Button
-      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{t(`modqueue.${text}`)}</Button>
+    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
   );
 };
 

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

@@ -189,6 +189,12 @@
   width: 140px;
 }
 
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: left;
+}
+
 .approve__active {
   box-shadow: none;
   color: white;

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

@@ -77,7 +77,7 @@
   letter-spacing: .8;
 
   &:hover {
-    background-color: #232323;
+    background-color: #404040;
   }
 
   &.active {

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

@@ -8,3 +8,7 @@ export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
 export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
 export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';

client/coral-admin/src/index.js

@@ -9,9 +9,10 @@ import App from './components/App';
 
 import 'react-mdl/extra/material.js';
 import './graphql';
-import {loadPluginsTranslations} from 'coral-framework/helpers/plugins';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 
 loadPluginsTranslations();
+injectPluginsReducers();
 
 render(
   <ApolloProvider client={client} store={store}>

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

@@ -13,5 +13,5 @@ export default {
   community,
   moderation,
   install,
-  config
+  config,
 };

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

@@ -1,4 +1,4 @@
-import {fromJS, Map} from 'immutable';
+import {fromJS, Map, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
 const initialState = fromJS({
@@ -8,6 +8,9 @@ const initialState = fromJS({
   commentId: null,
   commentStatus: null,
   userDetailId: null,
+  userDetailActiveTab: 'all',
+  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  userDetailSelectedIds: new Set(),
   banDialog: false,
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
   sortOrder: 'REVERSE_CHRONOLOGICAL',
@@ -64,7 +67,19 @@ export default function moderation (state = initialState, action) {
   case actions.VIEW_USER_DETAIL:
     return state.set('userDetailId', action.userId);
   case actions.HIDE_USER_DETAIL:
-    return state.set('userDetailId', null);
+    return state
+      .set('userDetailId', null)
+      .update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return state.update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return state
+      .set('userDetailActiveTab', action.tab)
+      .set('userDetailStatuses', action.statuses);
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
   case actions.SET_SORT_ORDER:
     return state.set('sortOrder', action.order);
   default :

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

@@ -175,7 +175,7 @@
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 50px 18px;
      box-sizing: border-box;
    }
 
@@ -310,24 +310,33 @@
 .flaggedByCount {
   display: block;
   text-align: left;
+  margin-top: 5px;
+}
+
+.flaggedByCount i {
+  font-size: 14px;
+  margin-right: 10px;
 }
 
 .flaggedBy {
   display: inline;
   padding: 3px;
-  font-size: 16px;
+  font-size: 14px;
+  margin-left: 5px;
 }
 
 .flaggedByLabel {
-  font-weight: bold;
+  font-weight: 600;
   font-size: 14px;
 }
 
 .flaggedReasons {
-  padding-top: 15px;
   margin-left: 24px;
+  margin-top: 10px;
 }
 
-.flaggedByReason {
+p.flaggedByReason {
   font-size: 1tpx;
+  margin: 0px;
+  line-height: 1.4;
 }

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

@@ -52,6 +52,10 @@ span {
   }
 }
 
+.approve {
+  margin-top: 10px;
+}
+
 .notFound {
   position: relative;
   margin: 20px auto;
@@ -193,7 +197,7 @@ span {
      top: 0;
      padding: 40px 18px;
      box-sizing: border-box;
-   }
+  }
 
   .itemHeader {
     display: flex;
@@ -255,6 +259,8 @@ span {
 
 }
 
+
+
 .empty {
   color: #444;
   margin-top: 50px;

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

@@ -99,7 +99,7 @@
 .inlineTextfield {
   border-color: #ccc;
   border-style: solid;
-  border-width: 0px 0px 1px 0px;  
+  border-width: 0px 0px 1px 0px;
   text-align: center;
   font-size: inherit;
 }
@@ -108,7 +108,7 @@
   outline: none;
 }
 
-.charCountTexfield {
+.charCountTexfield, .editCommentTimeframeTextfield {
   width: 4em;
   padding: 0px;
 }

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

@@ -25,12 +25,6 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
   const on = styles.enabledSetting;
   const off = styles.disabledSetting;
 
-  const onChangeEditCommentWindowLength = (e) => {
-    const value = e.target.value;
-    const valueAsNumber = parseFloat(value);
-    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
-    updateSettings({editCommentWindowLength: milliseconds || value});
-  };
   return (
     <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
@@ -76,27 +70,6 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
         bannedWords={settings.wordlist.banned}
         suspectWords={settings.wordlist.suspect}
         onChangeWordlist={onChangeWordlist} />
-
-      {/* Edit Comment Timeframe */}
-      <Card className={styles.configSetting}>
-        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
-        <p>
-          {t('configure.edit_comment_timeframe_text_pre')}
-          &nbsp;
-          <input
-            style={{width: '3em'}}
-            className={styles.inlineTextfield}
-            type="number"
-            min="0"
-            onChange={onChangeEditCommentWindowLength}
-            placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
-          />
-          &nbsp;
-          {t('configure.edit_comment_timeframe_text_post')}
-        </p>
-      </Card>
     </div>
   );
 };

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

@@ -61,6 +61,13 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
   }
 };
 
+const updateEditCommentWindowLength = (updateSettings) => (e) => {
+  const value = e.target.value;
+  const valueAsNumber = parseFloat(value);
+  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+  updateSettings({editCommentWindowLength: milliseconds || value});
+};
+
 const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
 
   // just putting this here for shorthand below
@@ -132,6 +139,25 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
+      {/* Edit Comment Timeframe */}
+      <Card className={styles.configSetting}>
+        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
+        <p>
+          {t('configure.edit_comment_timeframe_text_pre')}
+          &nbsp;
+          <input
+            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
+            type="number"
+            min="0"
+            onChange={updateEditCommentWindowLength(updateSettings)}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {t('configure.edit_comment_timeframe_text_post')}
+        </p>
+      </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.action}>
           <Checkbox

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

@@ -17,8 +17,9 @@
 .heading {
   margin: 0;
   padding-left: 10px;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2c2c2c;
 }
 
 .widgetTable {
@@ -32,7 +33,8 @@
 }
 
 .widgetHead p {
-  color: rgb(35, 102, 223);
+  color: #2c2c2c;
+  font-weight: 500;
   padding: 10px;
   text-align: left;
   text-transform: capitalize;
@@ -47,11 +49,11 @@
 }
 
 .rowLinkify {
-  cursor: pointer;
   border-bottom: 1px solid lightgrey;
   color: #555;
   height: var(--row-height);
   padding: 10px;
+  transition: background-color 200ms;
 }
 
 .rowLinkify:last-child {
@@ -60,6 +62,7 @@
 
 .rowLinkify:hover {
   background-color: #f8f8f8;
+  pointer: default;
 }
 
 .linkToAsset {
@@ -68,16 +71,17 @@
 }
 
 .linkToModerate {
-  background-color: #e0e0e0;
+  background-color: #BDBDBD;
   padding: 10px 14px;
   text-decoration: none;
   color: black;
   float: right;
   margin-left: 15px;
+  transition: background-color 200ms;
 }
 
 .linkToModerate:hover {
-  background-color: #ccc;
+  background-color: #9E9E9E;
 }
 
 .lede {
@@ -89,14 +93,10 @@
   color: #555;
   text-decoration: none;
   font-size: 1.2em;
-  font-weight: normal;
+  font-weight: 500;
   margin: 0;
 }
 
-.assetTitle:hover {
-  text-decoration: underline;
-}
-
 .widgetCount {
   color: #555;
   font-size: 1.3em;

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

@@ -23,6 +23,9 @@ const Comment = ({
   viewUserDetail,
   suspectWords,
   bannedWords,
+  minimal,
+  selected,
+  toggleSelect,
   ...props
 }) => {
   const links = linkify.getMatches(comment.body);
@@ -47,17 +50,38 @@ const Comment = ({
     })
     .concat(linkText);
 
+  let selectionStateCSS;
+  if (minimal) {
+    selectionStateCSS = selected ? styles.minimalSelection : '';
+  } else {
+    selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
+  }
+
   return (
     <li
       tabIndex={props.index}
-      className={`mdl-card ${props.selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}
+      className={`mdl-card ${selectionStateCSS} ${styles.Comment} ${styles.listItem} ${minimal ? styles.minimal : ''}`}
     >
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
-              {comment.user.name}
-            </span>
+            {
+              !minimal && (
+                <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
+                  {comment.user.name}
+                </span>
+              )
+            }
+            {
+              minimal && typeof selected === 'boolean' && typeof toggleSelect === 'function' && (
+                <input
+                  className={styles.bulkSelectInput}
+                  type='checkbox'
+                  value={comment.id}
+                  checked={selected}
+                  onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+              )
+            }
             <span className={styles.created}>
               {timeago(comment.created_at || Date.now() - props.index * 60 * 1000)}
             </span>
@@ -128,6 +152,7 @@ const Comment = ({
                   (action === 'APPROVE' && comment.status === 'ACCEPTED');
                 return (
                   <ActionButton
+                    minimal={minimal}
                     key={i}
                     type={action}
                     user={comment.user}
@@ -154,14 +179,12 @@ const Comment = ({
           </div>
         </div>
       </div>
-      <div>
-        <Slot
-          data={props.data}
-          root={props.root}
-          fill="adminCommentDetailArea"
-          comment={comment}
-        />
-      </div>
+      <Slot
+        data={props.data}
+        root={props.root}
+        fill="adminCommentDetailArea"
+        comment={comment}
+      />
       {flagActions && flagActions.length
         ? <FlagBox
             actions={flagActions}
@@ -173,6 +196,7 @@ const Comment = ({
 };
 
 Comment.propTypes = {
+  minimal: PropTypes.bool,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
@@ -182,6 +206,7 @@ Comment.propTypes = {
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
+  toggleSelect: PropTypes.func,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,

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

@@ -12,4 +12,5 @@
   right: 0;
   margin-top: -2px;
   font-size: 12px;
+  color: white;
 }

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

@@ -187,10 +187,15 @@ export default class Moderation extends Component {
         {moderation.userDetailId && (
           <UserDetail
             id={moderation.userDetailId}
-            hideUserDetail={hideUserDetail} />
+            hideUserDetail={hideUserDetail}
+            bannedWords={settings.wordlist.banned}
+            suspectWords={settings.wordlist.suspect}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment} />
         )}
       </div>
     );
   }
 }
-

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

@@ -15,7 +15,7 @@
   display: flex;
 
   .stat {
-    margin: 0 4px 12px;
+    margin: 0 4px 10px 0px;
   }
 
   .stat:last-child {
@@ -36,6 +36,47 @@
   background-color: transparent;
   font-size: 16px;
   position: absolute;
-  width: 100%;
+  width: 90%;
   outline: none;
 }
+
+.commentStatuses {
+  padding: 10px 0 0 0;
+  margin: 0;
+  height: 52px;
+  list-style: none;
+  box-sizing: border-box;
+
+  li {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    padding: 0 10px;
+  }
+}
+
+.active {
+  font-weight: bold;
+  border-bottom: 3px solid #F36451;
+}
+
+.bulkActionGroup {
+  height: 52px;
+  background-color: #efefef;
+
+  i {
+    margin-right: 0;
+  }
+
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+}

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

@@ -2,12 +2,24 @@ import React, {PropTypes} from 'react';
 import {Button, Drawer} from 'coral-ui';
 import styles from './UserDetail.css';
 import Slot from 'coral-framework/components/Slot';
+import Comment from './Comment';
+import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
     root: PropTypes.object.isRequired,
+    bannedWords: PropTypes.array.isRequired,
+    suspectWords: PropTypes.array.isRequired,
+    showBanUserDialog: PropTypes.func.isRequired,
+    showSuspendUserDialog: PropTypes.func.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
+    changeStatus: PropTypes.func.isRequired,
+    toggleSelect: PropTypes.func.isRequired,
+    bulkAccept: PropTypes.func.isRequired,
+    bulkReject: PropTypes.func.isRequired,
   }
 
   copyPermalink = () => {
@@ -20,15 +32,55 @@ export default class UserDetail extends React.Component {
     }
   }
 
+  rejectThenReload = (info) => {
+    this.props.rejectComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  acceptThenReload = (info) => {
+    this.props.acceptComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  showAll = () => {
+    this.props.changeStatus('all');
+  }
+
+  showRejected = () => {
+    this.props.changeStatus('rejected');
+  }
+
   render () {
-    const {root: {user, totalComments, rejectedComments}, hideUserDetail} = this.props;
+    const {
+      root: {
+        user,
+        totalComments,
+        rejectedComments,
+        comments: {nodes}
+      },
+      moderation: {
+        userDetailActiveTab: tab,
+        userDetailSelectedIds: selectedIds
+      },
+      bannedWords,
+      suspectWords,
+      toggleSelect,
+      bulkAccept,
+      bulkReject,
+      showBanUserDialog,
+      showSuspendUserDialog,
+      hideUserDetail
+    } = this.props;
     const localProfile = user.profiles.find((p) => p.provider === 'local');
+
     let profile;
     if (localProfile) {
       profile = localProfile.id;
     }
 
-    let rejectedPercent = rejectedComments / totalComments;
+    let rejectedPercent = (rejectedComments / totalComments) * 100;
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
       // if totalComments is 0, you're dividing by zero, which is naughty
@@ -62,8 +114,60 @@ export default class UserDetail extends React.Component {
             <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
           </div>
         </div>
+        {
+          selectedIds.length === 0
+          ? (
+            <ul className={styles.commentStatuses}>
+              <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+              <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+            </ul>
+          )
+          : (
+            <div className={styles.bulkActionGroup}>
+              <Button
+                onClick={bulkAccept}
+                className={styles.bulkAction}
+                cStyle='approve'
+                icon='done'>
+              </Button>
+              <Button
+                onClick={bulkReject}
+                className={styles.bulkAction}
+                cStyle='reject'
+                icon='close'>
+              </Button>
+              {`${selectedIds.length} comments selected`}
+            </div>
+          )
+        }
+
+        <div>
+          {
+            nodes.map((comment, i) => {
+              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+              const selected = selectedIds.indexOf(comment.id) !== -1;
+              return <Comment
+                key={i}
+                index={i}
+                comment={comment}
+                selected={false}
+                suspectWords={suspectWords}
+                bannedWords={bannedWords}
+                viewUserDetail={() => {}}
+                actions={actionsMap[status]}
+                showBanUserDialog={showBanUserDialog}
+                showSuspendUserDialog={showSuspendUserDialog}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selected={selected}
+                toggleSelect={toggleSelect}
+                currentAsset={null}
+                currentUserId={this.props.id}
+                minimal={true} />;
+            })
+          }
+        </div>
       </Drawer>
     );
   }
 }
-

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

@@ -18,14 +18,20 @@
 
 .tab {
   flex: 1;
-  color: #EEEEEE;
+  color: #C0C0C0;
   text-transform: capitalize;
   font-weight: 100;
-  font-size: 15px;
+  font-size: 14px;
   letter-spacing: 1px;
   transition: border-bottom 200ms;
-  padding: 0px 5px;
-  margin-right: 30px;
+  transition: color 200ms;
+  padding: 0px 10px;
+  margin-right: 20px;
+  &:hover {
+    color: white;
+    border-bottom: solid 2px #F36451;
+    box-sizing: border-box;
+  }
 }
 
 .active {
@@ -33,6 +39,10 @@
   box-sizing: border-box;
   border-bottom: solid 4px #F36451;
   font-weight: 400;
+  &:hover {
+    border-bottom: solid 4px #F36451;
+    font-weight: 400;
+  }
 }
 
 .active > span {
@@ -103,19 +113,18 @@ span {
       font-weight: 400;
       font-size: 15px;
       letter-spacing: 1px;
-      transition: opacity 200ms;
+      transition: background-color 200ms;
       opacity: 1;
 
-      &:hover {
-          opacity: .8;
-         cursor: pointer;
-      }
-
       &:first-child {
         text-align: left;
       }
 
       &:nth-child(2) {
+        &:hover {
+           cursor: pointer;
+           background-color: #212121;
+        }
         span {
           text-align: center;
           text-overflow: ellipsis;
@@ -178,16 +187,11 @@ span {
   margin: 0 auto;
   position: relative;
   transition: all 200ms;
-  padding: 10px 0 0;
-  min-height: 220px;
+  padding: 10px 0;
+  min-height: 0;
 
   .container {
     padding: 0 14px;
-    min-height: 180px;
-  }
-
-  &:hover {
-     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   }
 
   &:last-child {
@@ -247,9 +251,9 @@ span {
   }
 
   .created {
+    padding: 5px;
     color: #262626;
     font-size: 14px;
-    margin-left: 15px;
     line-height: 1px;
     font-weight: 300;
   }
@@ -291,7 +295,6 @@ span {
 
 @media (--big-viewport) {
   .listItem {
-    border: 1px solid #e0e0e0;
     margin-bottom: 30px;
 
     &:last-child {
@@ -426,18 +429,21 @@ span {
 
 .tabIcon {
   position: relative;
-  top: 2px;
+  top: 3px;
   font-size: 16px;
 }
 
 .username {
-  color: blue;
-  text-decoration: underline;
-  padding: 5px;
+  color: #393B44;
+  text-decoration: none;
   cursor: pointer;
-
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 2px;
+  margin-left: -5px;
+  transition: background-color 200ms ease;
   &:hover {
-    background-color: rgba(255, 0, 0, .1);
+    background-color: #E0E0E0;
   }
 }
 
@@ -461,3 +467,15 @@ span {
     position: relative;
   }
 }
+
+.minimal {
+  margin: 0;
+}
+
+.minimalSelection {
+  background-color: #ecf4ff;
+}
+
+.bulkSelectInput {
+  cursor: pointer;
+}

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

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

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

@@ -26,8 +26,7 @@ const fm = new IntrospectionFragmentMatcher({
             {name: 'SetUserStatusResponse'},
             {name: 'SuspendUserResponse'},
             {name: 'SetCommentStatusResponse'},
-            {name: 'AddCommentTagResponse'},
-            {name: 'RemoveCommentTagResponse'},
+            {name: 'ModifyTagResponse'},
             {name: 'IgnoreUserResponse'},
             {name: 'StopIgnoringUserResponse'}
           ]

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

@@ -14,14 +14,18 @@ if (window.devToolsExtension) {
   middlewares.push(window.devToolsExtension());
 }
 
+const coralReducers = {
+  ...mainReducer,
+  apollo: client.reducer()
+};
+
 const store = createStore(
-  combineReducers({
-    ...mainReducer,
-    apollo: client.reducer()
-  }),
+  combineReducers(coralReducers),
   {},
   compose(...middlewares)
 );
 
+store.coralReducers = coralReducers;
+
 window.coralStore = store;
 export default store;

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

@@ -2,7 +2,6 @@ import {pym} from 'coral-framework';
 import * as actions from '../constants/stream';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
-export const setCommentCountCache = (amount) => ({type: actions.SET_COMMENT_COUNT_CACHE, amount});
 
 function removeParam(key, sourceURL) {
   let rtn = sourceURL.split('?')[0];
@@ -38,3 +37,13 @@ export const viewAllComments = () => {
 
   return {type: actions.VIEW_ALL_COMMENTS};
 };
+
+export const addCommentClassName = (className) => ({
+  type: actions.ADD_COMMENT_CLASSNAME,
+  className
+});
+
+export const removeCommentClassName = (idx) => ({
+  type: actions.REMOVE_COMMENT_CLASSNAME,
+  idx
+});

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

@@ -97,3 +97,17 @@
 .Wizard .textAlignRight {
   text-align: right;
 }
+
+.commentInfoBar {
+  float: right;
+}
+
+@keyframes enter {
+  0% {background-color: rgba(0, 0, 0, 0);}
+  50% {background-color: rgba(255,255,0, 0.2);}
+  100% {background-color: rgba(0, 0, 0, 0);}
+}
+
+.enter {
+  animation: enter 1000ms;
+}

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

@@ -1,13 +1,16 @@
 import React, {PropTypes} from 'react';
+
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
-
 import AuthorName from 'coral-plugin-author-name/AuthorName';
-
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
-import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
+import {can} from 'coral-framework/services/perms';
+import {TransitionGroup} from 'react-transition-group';
+import cn from 'classnames';
+import styles from './Comment.css';
+
 import {
   BestButton,
   IfUserCanModifyBest,
@@ -15,17 +18,52 @@ import {
   commentIsBest,
   BestIndicator
 } from 'coral-plugin-best/BestButton';
-import Slot from 'coral-framework/components/Slot';
 import LoadMore from './LoadMore';
-import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import {getEditableUntilDate} from './util';
 import {TopRightMenu} from './TopRightMenu';
-import classnames from 'classnames';
+import CommentContent from './CommentContent';
+import Slot from 'coral-framework/components/Slot';
+import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
-import {getEditableUntilDate} from './util';
-import styles from './Comment.css';
 
-const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF');
+const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
+const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
+const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+
+// resetCursors will return the id cursors of the first and second newest comment in
+// the current reply list. The cursors are used to dertermine which
+// comments to show. The spare cursor functions as a backup in case one
+// of the comments gets deleted.
+function resetCursors(state, props) {
+  const replies = props.comment.replies;
+  if (replies && replies.nodes.length) {
+    const idCursors = [replies.nodes[replies.nodes.length - 1].id];
+    if (replies.nodes.length >= 2) {
+      idCursors.push(replies.nodes[replies.nodes.length - 2].id);
+    }
+    return {idCursors};
+  }
+  return {idCursors: []};
+}
+
+// invalidateCursor is called whenever a comment is removed which is referenced
+// by one of the 2 id cursors. It returns a new set of id cursors calculated
+// using the help of the backup cursor.
+function invalidateCursor(invalidated, state, props) {
+  const alt = invalidated === 1 ? 0 : 1;
+  const replies = props.comment.replies;
+  const idCursors = [];
+  if (state.idCursors[alt]) {
+    idCursors.push(state.idCursors[alt]);
+    const index = replies.nodes.findIndex((node) => node.id === idCursors[0]);
+    const prevInLine = replies.nodes[index - 1];
+    if (prevInLine) {
+      idCursors.push(prevInLine.id);
+    }
+  }
+  return {idCursors};
+}
 
 // hold actions links (e.g. Reply) along the comment footer
 const ActionButton = ({children}) => {
@@ -36,7 +74,7 @@ const ActionButton = ({children}) => {
   );
 };
 
-class Comment extends React.Component {
+export default class Comment extends React.Component {
   constructor(props) {
     super(props);
 
@@ -49,9 +87,47 @@ class Comment extends React.Component {
       // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
       isEditing: false,
       replyBoxVisible: false,
+      animateEnter: false,
+      ...resetCursors({}, props),
     };
   }
 
+  componentWillReceiveProps(next) {
+    const {comment: {replies: prevReplies}} = this.props;
+    const {comment: {replies: nextReplies}} = next;
+    if (
+        prevReplies && nextReplies &&
+        nextReplies.nodes.length < prevReplies.nodes.length
+    ) {
+
+      // Invalidate first cursor if referenced comment was removed.
+      if (this.state.idCursors[0] && !hasComment(nextReplies.nodes, this.state.idCursors[0])) {
+        this.setState(invalidateCursor(0, this.state, next));
+      }
+
+      // Invalidate second cursor if referenced comment was removed.
+      if (this.state.idCursors[1] && !hasComment(nextReplies.nodes, this.state.idCursors[1])) {
+        this.setState(invalidateCursor(1, this.state, next));
+      }
+    }
+  }
+
+  componentWillEnter(callback) {
+    callback();
+    const userId = this.props.currentUser ? this.props.currentUser.id : null;
+    if (this.props.comment.id.indexOf('pending') >= 0) {
+      return;
+    }
+    if (userId && this.props.comment.user.id === userId) {
+
+      // This comment was just added by currentUser.
+      if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
+        return;
+      }
+    }
+    this.setState({animateEnter: true});
+  }
+
   static propTypes = {
     reactKey: PropTypes.string.isRequired,
 
@@ -67,6 +143,7 @@ class Comment extends React.Component {
     addNotification: PropTypes.func.isRequired,
     postComment: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
+    liveUpdates: PropTypes.bool.isRequired,
     asset: PropTypes.shape({
       id: PropTypes.string,
       title: PropTypes.string,
@@ -104,10 +181,10 @@ class Comment extends React.Component {
     commentIsIgnored: React.PropTypes.func,
 
     // dispatch action to add a tag to a comment
-    addCommentTag: React.PropTypes.func,
+    addTag: React.PropTypes.func,
 
     // dispatch action to remove a tag from a comment
-    removeCommentTag: React.PropTypes.func,
+    removeTag: React.PropTypes.func,
 
     // dispatch action to ignore another user
     ignoreUser: React.PropTypes.func,
@@ -127,6 +204,62 @@ class Comment extends React.Component {
     }
   }
 
+  hasIgnoredReplies() {
+    return this.props.comment.replies &&
+      this.props.comment.replies.nodes.some((reply) => this.props.commentIsIgnored(reply));
+  }
+
+  loadNewReplies = () => {
+    const {replies, replyCount, id} = this.props.comment;
+    if (replyCount > replies.nodes.length) {
+      this.props.loadMore(id).then(() => {
+        this.setState(resetCursors(this.state, this.props));
+      });
+      return;
+    }
+    this.setState(resetCursors);
+  };
+
+  showReplyBox = () => {
+    if (!this.props.currentUser) {
+      this.props.showSignInDialog();
+      return;
+    }
+    if (can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      this.props.setActiveReplyBox(this.props.comment.id);
+      return;
+    }
+    return;
+  }
+
+  // getVisibileReplies returns a list containing comments
+  // which were authored by current user or comes before the `idCursor`.
+  getVisibileReplies() {
+    const {comment: {replies}, currentUser, liveUpdates} = this.props;
+    const idCursor = this.state.idCursors[0];
+    const userId = currentUser ? currentUser.id : null;
+
+    if (!replies) {
+      return [];
+    }
+
+    if (liveUpdates) {
+      return replies.nodes;
+    }
+
+    const view = [];
+    let pastCursor = false;
+    replies.nodes.forEach((comment) => {
+      if (idCursor && !pastCursor || comment.user.id === userId) {
+        view.push(comment);
+      }
+      if (comment.id === idCursor) {
+        pastCursor = true;
+      }
+    });
+    return view;
+  }
+
   componentDidMount() {
     this._isMounted = true;
     if (this.editWindowExpiryTimeout) {
@@ -151,30 +284,35 @@ class Comment extends React.Component {
   }
   render () {
     const {
-      comment,
-      parentId,
-      currentUser,
       asset,
       depth,
-      postComment,
-      addNotification,
-      showSignInDialog,
-      highlighted,
+      comment,
       postFlag,
+      parentId,
+      ignoreUser,
+      highlighted,
+      postComment,
+      currentUser,
       postDontAgree,
-      loadMore,
       setActiveReplyBox,
       activeReplyBox,
       deleteAction,
-      addCommentTag,
-      removeCommentTag,
-      ignoreUser,
       disableReply,
-      commentIsIgnored,
       maxCharCount,
-      charCountEnable
+      addNotification,
+      charCountEnable,
+      showSignInDialog,
+      addTag,
+      removeTag,
+      liveUpdates,
+      commentIsIgnored,
+      commentClassNames = []
     } = this.props;
 
+    const view = this.getVisibileReplies();
+
+    const hasMoreComments = comment.replies && (comment.replies.hasNextPage || comment.replies.nodes.length > view.length);
+    const replyCount = this.hasIgnoredReplies() ? '' : comment.replyCount;
     const flagSummary = getActionSummary('FlagActionSummary', comment);
     const dontAgreeSummary = getActionSummary(
       'DontAgreeActionSummary',
@@ -208,25 +346,57 @@ class Comment extends React.Component {
 
     const addBestTag = notifyOnError(
       () =>
-        addCommentTag({
+        addTag({
           id: comment.id,
-          tag: BEST_TAG
+          name: BEST_TAG,
+          assetId: asset.id
         }),
       () => 'Failed to tag comment as best'
     );
 
     const removeBestTag = notifyOnError(
       () =>
-        removeCommentTag({
+        removeTag({
           id: comment.id,
-          tag: BEST_TAG
+          name: BEST_TAG,
+          assetId: asset.id
         }),
       () => 'Failed to remove best comment tag'
     );
 
+    /**
+     * classNamesToAdd
+     * adds classNames based on condition
+     * classnames is an array of objects with key as classnames and value as conditions
+     * i.e:
+     * {
+     *  'myClassName': { tags: ['STAFF']}
+     * }
+     *
+     * This will add myClassName to comments tagged with STAFF TAG.
+     * **/
+
+    const classNamesToAdd = commentClassNames.reduce((acc, className) => {
+      let res = [];
+
+      // Adding classNames based on tags
+      Object.keys(className).forEach((cn) => {
+        const condition = className[cn];
+        condition.tags.forEach((tag) => {
+          if (hasTag(comment.tags, tag)) {
+            res = [...res, cn];
+          }
+        });
+      });
+
+      // TODO: Compare rest of the comment obj to the condition if needed
+
+      return [...acc, ...res];
+    }, []);
+
     return (
       <div
-        className={commentClass}
+        className={cn(commentClass, 'talk-stream-comment-wrapper', classNamesToAdd, {[styles.enter]: this.state.animateEnter})}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}
       >
@@ -234,15 +404,15 @@ class Comment extends React.Component {
         <div
           className={highlighted === comment.id ? 'highlighted-comment' : ''}
         >
-          <AuthorName author={comment.user} />
+          <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
           {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
           {commentIsBest(comment)
             ? <TagLabel><BestIndicator /></TagLabel>
             : null }
 
-          <span className={styles.bylineSecondary}>
-            <PubDate created_at={comment.created_at} />
+          <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}>(Edited)</span></span>
@@ -251,11 +421,13 @@ class Comment extends React.Component {
           </span>
 
           <Slot
+            className={styles.commentInfoBar}
             fill="commentInfoBar"
-            data={this.props.data}
-            root={this.props.root}
+            depth={depth}
             comment={comment}
             commentId={comment.id}
+            data={this.props.data}
+            root={this.props.root}
             inline
           />
 
@@ -263,17 +435,17 @@ class Comment extends React.Component {
               (comment.user.id === currentUser.id))
 
               /* User can edit/delete their own comment for a short window after posting */
-              ? <span className={classnames(styles.topRight)}>
+              ? <span className={cn(styles.topRight)}>
                   {
                     commentIsStillEditable(comment) &&
                     <a
-                      className={classnames(styles.link, {[styles.active]: this.state.isEditing})}
+                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
                       onClick={this.onClickEdit}>Edit</a>
                   }
                 </span>
 
               /* TopRightMenu allows currentUser to ignore other users' comments */
-              : <span className={classnames(styles.topRight, styles.topRightMenu)}>
+              : <span className={cn(styles.topRight, styles.topRightMenu)}>
                   <TopRightMenu
                     comment={comment}
                     ignoreUser={ignoreUser}
@@ -294,8 +466,7 @@ class Comment extends React.Component {
                 stopEditing={this.stopEditing}
                 />
             : <div>
-                <Content body={comment.body} />
-                <Slot fill="commentContent" />
+                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
               </div>
           }
 
@@ -308,15 +479,6 @@ class Comment extends React.Component {
               commentId={comment.id}
               inline
             />
-            {!disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={() => setActiveReplyBox(comment.id)}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                  banned={false}
-                />
-              </ActionButton>}
             <ActionButton>
               <IfUserCanModifyBest user={currentUser}>
                 <BestButton
@@ -326,6 +488,14 @@ class Comment extends React.Component {
                 />
               </IfUserCanModifyBest>
             </ActionButton>
+            {!disableReply &&
+              <ActionButton>
+                <ReplyButton
+                  onClick={this.showReplyBox}
+                  parentCommentId={parentId || comment.id}
+                  currentUserId={currentUser && currentUser.id}
+                />
+              </ActionButton>}
             <Slot
               fill="commentActions"
               data={this.props.data}
@@ -369,53 +539,54 @@ class Comment extends React.Component {
               assetId={asset.id}
             />
           : null}
-        {comment.replies &&
-          comment.replies.nodes.map((reply) => {
-            return commentIsIgnored(reply)
-              ? <IgnoredCommentTombstone key={reply.id} />
-              : <Comment
-                  data={this.props.data}
-                  root={this.props.root}
-                  setActiveReplyBox={setActiveReplyBox}
-                  disableReply={disableReply}
-                  activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
-                  parentId={comment.id}
-                  postComment={postComment}
-                  editComment={this.props.editComment}
-                  depth={depth + 1}
-                  asset={asset}
-                  highlighted={highlighted}
-                  currentUser={currentUser}
-                  postFlag={postFlag}
-                  deleteAction={deleteAction}
-                  addCommentTag={addCommentTag}
-                  removeCommentTag={removeCommentTag}
-                  ignoreUser={ignoreUser}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  showSignInDialog={showSignInDialog}
-                  reactKey={reply.id}
-                  key={reply.id}
-                  comment={reply}
-                />;
-          })}
-        {comment.replies &&
-          <div className="coral-load-more-replies">
-            <LoadMore
-              topLevel={false}
-              replyCount={comment.replyCount}
-              moreComments={comment.replyCount > comment.replies.nodes.length}
-              loadMore={() => loadMore(comment.id)}
-            />
-          </div>}
+
+        <TransitionGroup>
+        {view.map((reply) => {
+          return commentIsIgnored(reply)
+            ? <IgnoredCommentTombstone key={reply.id} />
+            : <Comment
+                data={this.props.data}
+                root={this.props.root}
+                setActiveReplyBox={setActiveReplyBox}
+                disableReply={disableReply}
+                activeReplyBox={activeReplyBox}
+                addNotification={addNotification}
+                parentId={comment.id}
+                postComment={postComment}
+                editComment={this.props.editComment}
+                depth={depth + 1}
+                asset={asset}
+                highlighted={highlighted}
+                currentUser={currentUser}
+                postFlag={postFlag}
+                deleteAction={deleteAction}
+                addTag={addTag}
+                removeTag={removeTag}
+                ignoreUser={ignoreUser}
+                charCountEnable={charCountEnable}
+                maxCharCount={maxCharCount}
+                showSignInDialog={showSignInDialog}
+                commentIsIgnored={commentIsIgnored}
+                liveUpdates={liveUpdates}
+                reactKey={reply.id}
+                key={reply.id}
+                comment={reply}
+              />;
+        })}
+        </TransitionGroup>
+        <div className="coral-load-more-replies">
+          <LoadMore
+            topLevel={false}
+            replyCount={replyCount}
+            moreComments={hasMoreComments}
+            loadMore={this.loadNewReplies}
+          />
+        </div>
       </div>
     );
   }
 }
 
-export default Comment;
-
 // return whether the comment is editable
 function commentIsStillEditable (comment) {
   const editing = comment && comment.editing;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CommentContent = ({comment}) => {
+  const textbreaks = comment.body.split('\n');
+  return <div className={`${name}-text`}>
+    {
+      textbreaks.map((line, i) => {
+        return (
+          <span key={i} className={`${name}-line`}>
+            {line}
+            <br className={`${name}-linebreak`}/>
+          </span>
+        );
+      })
+    }
+  </div>;
+};
+
+export default CommentContent;

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

@@ -41,10 +41,10 @@ export default class Embed extends React.Component {
     return (
       <div>
         <div className="commentStream">
-          <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={totalCommentCount} /></Tab>
-            <Tab>{t('framework.my_profile')}</Tab>
-            <Tab restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
+          <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-stream-tabbar'>
+            <Tab className={'talk-stream-comment-count-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
+            <Tab className={'talk-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
+            <Tab className={'talk-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
           </TabBar>
           {commentId &&
             <Button

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

@@ -3,18 +3,22 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 
 // Render in place of a Comment when the author of the comment is ignored
-const IgnoredCommentTombstone = () => (
-  <div>
-    <hr aria-hidden={true} />
-    <p style={{
-      backgroundColor: '#F0F0F0',
-      textAlign: 'center',
-      padding: '1em',
-      color: '#3E4F71',
-    }}>
-      {t('framework.comment_is_ignored')}
-    </p>
-  </div>
-);
+class IgnoredCommentTombstone extends React.Component {
+  render() {
+    return (
+      <div>
+        <hr aria-hidden={true} />
+        <p style={{
+          backgroundColor: '#F0F0F0',
+          textAlign: 'center',
+          padding: '1em',
+          color: '#3E4F71',
+        }}>
+          {t('framework.comment_is_ignored')}
+        </p>
+      </div>
+    );
+  }
+}
 
 export default IgnoredCommentTombstone;

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

@@ -9,6 +9,9 @@ class LoadMore extends React.Component {
   }
 
   replyCountFormat = (count) => {
+    if (!count) {
+      return t('framework.view_all_replies_unknown_number');
+    }
     if (count === 1) {
       return t('framework.view_reply');
     }

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

@@ -2,22 +2,14 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-const onLoadMoreClick = ({loadMore, commentCount, setCommentCountCache}) => (e) => {
-  e.preventDefault();
-  setCommentCountCache(commentCount);
-  loadMore();
-};
-
-const NewCount = (props) => {
-  const newComments = props.commentCount - props.commentCountCache;
-
+const NewCount = ({count, loadMore}) => {
   return <div className='coral-new-comments coral-load-more'>
     {
-      props.commentCountCache && newComments > 0 ?
-      <button onClick={onLoadMoreClick(props)}>
-        {newComments === 1
-          ? t('framework.new_count', newComments, t('framework.comment'))
-          : t('framework.new_count', newComments, t('framework.comments'))}
+      count ?
+      <button onClick={loadMore}>
+        {count === 1
+          ? t('framework.new_count', count, t('framework.comment'))
+          : t('framework.new_count', count, t('framework.comments'))}
       </button>
       : null
     }
@@ -25,8 +17,7 @@ const NewCount = (props) => {
 };
 
 NewCount.propTypes = {
-  commentCount: PropTypes.number.isRequired,
-  commentCountCache: PropTypes.number,
+  count: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
 };
 

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

@@ -1,21 +1,92 @@
 import React, {PropTypes} from 'react';
 import LoadMore from './LoadMore';
-import NewCount from './NewCount';
-
-import Comment from '../containers/Comment';
+import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
-import RestrictedMessageBox
-  from 'coral-framework/components/RestrictedMessageBox';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
 import {can} from 'coral-framework/services/perms';
 import {ModerationLink} from 'coral-plugin-moderation';
+import RestrictedMessageBox
+  from 'coral-framework/components/RestrictedMessageBox';
+import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import t, {timeago} from 'coral-framework/services/i18n';
+import NewCount from './NewCount';
+import {TransitionGroup} from 'react-transition-group';
+
+const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+
+// resetCursors will return the id cursors of the first and second comment of
+// the current comment list. The cursors are used to dertermine which
+// comments to show. The spare cursor functions as a backup in case one
+// of the comments gets deleted.
+function resetCursors(state, props) {
+  const comments = props.root.asset.comments;
+  if (comments && comments.nodes.length) {
+    const idCursors = [comments.nodes[0].id];
+    if (comments.nodes[1]) {
+      idCursors.push(comments.nodes[1].id);
+    }
+    return {idCursors};
+  }
+  return {idCursors: []};
+}
+
+// invalidateCursor is called whenever a comment is removed which is referenced
+// by one of the 2 id cursors. It returns a new set of id cursors calculated
+// using the help of the backup cursor.
+function invalidateCursor(invalidated, state, props) {
+  const alt = invalidated === 1 ? 0 : 1;
+  const comments = props.root.asset.comments;
+  const idCursors = [];
+  if (state.idCursors[alt]) {
+    idCursors.push(state.idCursors[alt]);
+    const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
+    const nextInLine = comments.nodes[index + 1];
+    if (nextInLine) {
+      idCursors.push(nextInLine.id);
+    }
+  }
+  return {idCursors};
+}
 
 class Stream extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = resetCursors(this.state, props);
+  }
+
+  componentWillReceiveProps(next) {
+    const {root: {asset: {comments: prevComments}}} = this.props;
+    const {root: {asset: {comments: nextComments}}} = next;
+
+    if (!prevComments && nextComments) {
+      this.setState(resetCursors);
+      return;
+    }
+    if (
+        prevComments && nextComments &&
+        nextComments.nodes.length < prevComments.nodes.length
+    ) {
+
+      // Invalidate first cursor if referenced comment was removed.
+      if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
+        this.setState(invalidateCursor(0, this.state, next));
+      }
+
+      // Invalidate second cursor if referenced comment was removed.
+      if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
+        this.setState(invalidateCursor(1, this.state, next));
+      }
+    }
+  }
+
+  viewNewComments = () => {
+    this.setState(resetCursors);
+  };
+
   setActiveReplyBox = (reactKey) => {
     if (!this.props.auth.user) {
       this.props.showSignInDialog();
@@ -24,8 +95,33 @@ class Stream extends React.Component {
     }
   };
 
+  // getVisibileComments returns a list containing comments
+  // which were authored by current user or comes after the `idCursor`.
+  getVisibleComments() {
+    const {root: {asset: {comments}}, auth: {user}} = this.props;
+    const idCursor = this.state.idCursors[0];
+    const userId = user ? user.id : null;
+
+    if (!comments) {
+      return [];
+    }
+
+    const view = [];
+    let pastCursor = false;
+    comments.nodes.forEach((comment) => {
+      if (comment.id === idCursor) {
+        pastCursor = true;
+      }
+      if (pastCursor || comment.user.id === userId) {
+        view.push(comment);
+      }
+    });
+    return view;
+  }
+
   render() {
     const {
+      commentClassNames,
       root: {asset, asset: {comments}, comment, me},
       postComment,
       addNotification,
@@ -33,14 +129,14 @@ class Stream extends React.Component {
       postDontAgree,
       deleteAction,
       showSignInDialog,
-      addCommentTag,
-      removeCommentTag,
-      pluginProps,
+      addTag,
       ignoreUser,
       auth: {loggedIn, user},
-      commentCountCache,
+      removeTag,
+      pluginProps,
       editName
     } = this.props;
+    const view = this.getVisibleComments();
     const open = asset.closedAt === null;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
@@ -97,8 +193,6 @@ class Stream extends React.Component {
                   postComment={this.props.postComment}
                   appendItemArray={this.props.appendItemArray}
                   updateItem={this.props.updateItem}
-                  setCommentCountCache={this.props.setCommentCountCache}
-                  commentCountCache={commentCountCache}
                   assetId={asset.id}
                   premod={asset.settings.moderation}
                   isReply={false}
@@ -108,11 +202,17 @@ class Stream extends React.Component {
                 />}
             </div>
           : <p>{asset.settings.closedMessage}</p>}
-        {loggedIn &&
+
+        {loggedIn && (
           <ModerationLink
             assetId={asset.id}
             isAdmin={can(user, 'MODERATE_COMMENTS')}
-          />}
+          />
+        )}
+
+        <div className="talk-stream-wrapper-box">
+          <Slot fill="streamBox" />
+        </div>
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
@@ -123,6 +223,7 @@ class Stream extends React.Component {
               activeReplyBox={this.props.activeReplyBox}
               addNotification={addNotification}
               depth={0}
+              disableReply={!open}
               postComment={this.props.postComment}
               asset={asset}
               currentUser={user}
@@ -139,19 +240,19 @@ class Stream extends React.Component {
               charCountEnable={asset.settings.charCountEnable}
               maxCharCount={asset.settings.charCount}
               editComment={this.props.editComment}
+              liveUpdates={true}
             />
-          : <div>
+          : <div className="talk-stream-comments-container">
               <NewCount
-                commentCount={asset.commentCount}
-                commentCountCache={commentCountCache}
-                setCommentCountCache={this.props.setCommentCountCache}
-                loadMore={this.props.loadNewComments}
+                count={comments.nodes.length - view.length}
+                loadMore={this.viewNewComments}
               />
-              <div className="embed__stream">
-                {comments && comments.nodes.map((comment) => {
+              <TransitionGroup component='div' className="embed__stream">
+                {view.map((comment) => {
                   return commentIsIgnored(comment)
                     ? <IgnoredCommentTombstone key={comment.id} />
                     : <Comment
+                        commentClassNames={commentClassNames}
                         data={this.props.data}
                         root={this.props.root}
                         disableReply={!open}
@@ -164,8 +265,8 @@ class Stream extends React.Component {
                         currentUser={user}
                         postFlag={postFlag}
                         postDontAgree={postDontAgree}
-                        addCommentTag={addCommentTag}
-                        removeCommentTag={removeCommentTag}
+                        addTag={addTag}
+                        removeTag={removeTag}
                         ignoreUser={ignoreUser}
                         commentIsIgnored={commentIsIgnored}
                         loadMore={this.props.loadNewReplies}
@@ -178,9 +279,10 @@ class Stream extends React.Component {
                         charCountEnable={asset.settings.charCountEnable}
                         maxCharCount={asset.settings.charCount}
                         editComment={this.props.editComment}
+                        liveUpdates={false}
                       />;
                 })}
-              </div>
+              </TransitionGroup>
               <LoadMore
                 topLevel={true}
                 moreComments={asset.comments.hasNextPage}
@@ -197,10 +299,10 @@ Stream.propTypes = {
   postComment: PropTypes.func.isRequired,
 
   // dispatch action to add a tag to a comment
-  addCommentTag: PropTypes.func,
+  addTag: PropTypes.func,
 
   // dispatch action to remove a tag from a comment
-  removeCommentTag: PropTypes.func,
+  removeTag: PropTypes.func,
 
   // dispatch action to ignore another user
   ignoreUser: React.PropTypes.func,

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

@@ -41,7 +41,10 @@ class SuspendedAccount extends Component {
       <span>{
           canEditName ?
           t('framework.edit_name.msg')
-          : t('framework.banned_account_msg')
+          :
+          <span>
+            <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
+          </span>
         }</span>
       {
         canEditName ?

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

@@ -1,5 +1,5 @@
 export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX';
-export const SET_COMMENT_COUNT_CACHE = 'SET_COMMENT_COUNT_CACHE';
 export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
-export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000;
 export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
+export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
+export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';

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

@@ -28,7 +28,9 @@ export default withFragments({
       created_at
       status
       tags {
-        name
+        tag {
+          name
+        }
       }
       user {
         id

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

@@ -14,7 +14,7 @@ import Embed from '../components/Embed';
 import Stream from './Stream';
 
 import {setActiveTab} from '../actions/embed';
-import {setCommentCountCache, viewAllComments} from '../actions/stream';
+import {viewAllComments} from '../actions/stream';
 
 const {logout, checkLogin} = authActions;
 const {fetchAssetSuccess} = assetActions;
@@ -33,18 +33,11 @@ class EmbedContainer extends React.Component {
 
       // TODO: remove asset data from redux store.
       fetchAssetSuccess(nextProps.root.asset);
-
-      const {setCommentCountCache, commentCountCache} = this.props;
-      const {asset} = nextProps.root;
-
-      if (commentCountCache === -1) {
-        setCommentCountCache(asset.commentCount);
-      }
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (!isEqual(prevProps.root.comment, this.props.root.comment)) {
+    if (!prevProps.root.comment && this.props.root.comment) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
       setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
@@ -87,7 +80,6 @@ export const withEmbedQuery = withQuery(EMBED_QUERY, {
 
 const mapStateToProps = (state) => ({
   auth: state.auth.toJS(),
-  commentCountCache: state.stream.commentCountCache,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
@@ -103,7 +95,6 @@ const mapDispatchToProps = (dispatch) =>
       setActiveTab,
       viewAllComments,
       fetchAssetSuccess,
-      setCommentCountCache
     },
     dispatch
   );

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

@@ -2,34 +2,94 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {NEW_COMMENT_COUNT_POLL_INTERVAL, ADDTL_COMMENTS_ON_LOAD_MORE} from '../constants/stream';
+import {ADDTL_COMMENTS_ON_LOAD_MORE} from '../constants/stream';
 import {
   withPostComment, withPostFlag, withPostDontAgree, withDeleteAction,
-  withAddCommentTag, withRemoveCommentTag, withIgnoreUser, withEditComment,
+  withAddTag, withRemoveTag, withIgnoreUser, withEditComment,
 } from 'coral-framework/graphql/mutations';
-import update from 'immutability-helper';
 
 import {notificationActions, authActions} from 'coral-framework';
 import {editName} from 'coral-framework/actions/user';
-import {setCommentCountCache, setActiveReplyBox} from '../actions/stream';
+import {setActiveReplyBox} from '../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments} from 'coral-framework/hocs';
+import {Spinner} from 'coral-ui';
 import {getDefinitionName} from 'coral-framework/utils';
+import {
+  findCommentInEmbedQuery,
+  insertCommentIntoEmbedQuery,
+  removeCommentFromEmbedQuery,
+  insertFetchedCommentsIntoEmbedQuery,
+} from '../graphql/utils';
 
 const {showSignInDialog} = authActions;
 const {addNotification} = notificationActions;
 
 class StreamContainer extends React.Component {
-  getCounts = (variables) => {
-    return this.props.data.fetchMore({
-      query: LOAD_COMMENT_COUNTS_QUERY,
-      variables,
+  subscriptions = [];
 
-      // Apollo requires this, even though we don't use it...
-      updateQuery: (data) => data,
+  subscribeToUpdates() {
+    const sub1 = this.props.data.subscribeToMore({
+      document: COMMENTS_EDITED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
+      updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
+
+        // Ignore mutations from me.
+        // TODO: need way to detect mutations created by this client, and allow mutations from other clients.
+        if (this.props.auth.user && commentEdited.user.id === this.props.auth.user.id) {
+          return prev;
+        }
+
+        // Exit when comment is not in the query.
+        if (!findCommentInEmbedQuery(prev, commentEdited.id)) {
+          return prev;
+        }
+
+        if (['PREMOD', 'REJECTED'].includes(commentEdited.status)) {
+          return removeCommentFromEmbedQuery(prev, commentEdited.id);
+        }
+      },
     });
-  };
+
+    const sub2 = this.props.data.subscribeToMore({
+      document: COMMENTS_ADDED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
+      updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
+
+        // Ignore mutations from me.
+        // TODO: need way to detect mutations created by this client, and allow mutations from other clients.
+        if (this.props.auth.user && commentAdded.user.id === this.props.auth.user.id) {
+          return prev;
+        }
+
+        // Exit if author is ignored.
+        if (
+          this.props.root.me &&
+          this.props.root.me.ignoredUsers.some(({id}) => id === commentAdded.user.id)) {
+          return prev;
+        }
+
+        // Exit when comment is already in the query.
+        if (findCommentInEmbedQuery(prev, commentAdded.id)) {
+          return prev;
+        }
+
+        return insertCommentIntoEmbedQuery(prev, commentAdded);
+      }
+    });
+
+    this.subscriptions.push(sub1, sub2);
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    this.subscriptions = [];
+  }
 
   loadNewReplies = (parent_id) => {
     const comment = this.props.root.comment
@@ -47,86 +107,11 @@ class StreamContainer extends React.Component {
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        if (!comments.nodes.length) {
-          return prev;
-        }
-
-        const updateNode = (node) =>
-          update(node, {
-            replies: {
-              endCursor: {$set: comments.endCursor},
-              nodes: {$apply: (nodes) => nodes
-                .concat(comments.nodes.filter(
-                  (comment) => !nodes.some((node) => node.id === comment.id)
-                ))
-                .sort(ascending)
-              },
-            },
-          });
-
-        // highlighted comment.
-        if (prev.comment) {
-          if (prev.comment.parent) {
-            return update(prev, {
-              comment: {
-                parent: {$apply: (comment) => updateNode(comment)},
-              }
-            });
-          }
-          return update(prev, {
-            comment: {$apply: (comment) => updateNode(comment)},
-          });
-        }
-
-        return update(prev, {
-          asset: {
-            comments: {
-              nodes: {
-                $apply: (nodes) => nodes.map(
-                  (node) => node.id !== parent_id
-                    ? node
-                    : updateNode(node)
-                  )
-              },
-            },
-          },
-        });
+        return insertFetchedCommentsIntoEmbedQuery(prev, comments, parent_id);
       },
     });
   }
 
-  loadNewComments = () => {
-    return this.props.data.fetchMore({
-      query: LOAD_MORE_QUERY,
-      variables: {
-        limit: ADDTL_COMMENTS_ON_LOAD_MORE,
-        cursor: this.props.root.asset.comments.startCursor,
-        parent_id: null,
-        asset_id: this.props.root.asset.id,
-        sort: 'CHRONOLOGICAL',
-        excludeIgnored: this.props.data.variables.excludeIgnored,
-      },
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        if (!comments.nodes.length) {
-          return prev;
-        }
-        return update(prev, {
-          asset: {
-            comments: {
-              startCursor: {$set: comments.endCursor},
-              nodes: {$apply: (nodes) => comments.nodes.filter(
-                  (comment) => !nodes.some((node) => node.id === comment.id)
-                )
-                .concat(nodes)
-                .sort(descending)
-              },
-            },
-          },
-        });
-      },
-    });
-  };
-
   loadMoreComments = () => {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
@@ -139,78 +124,77 @@ class StreamContainer extends React.Component {
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        if (!comments.nodes.length) {
-          return prev;
-        }
-
-        return update(prev, {
-          asset: {
-            comments: {
-              hasNextPage: {$set: comments.hasNextPage},
-              endCursor: {$set: comments.endCursor},
-              nodes: {$push: comments.nodes},
-            },
-          },
-        });
+        return insertFetchedCommentsIntoEmbedQuery(prev, comments);
       },
     });
   };
 
   componentDidMount() {
     if (this.props.previousTab) {
-      this.props.data.refetch()
-        .then(({data: {asset: {commentCount}}}) => {
-          return this.props.setCommentCountCache(commentCount);
-        });
+      this.props.data.refetch();
     }
-    this.countPoll = setInterval(() => {
-      this.getCounts(this.props.data.variables);
-    }, NEW_COMMENT_COUNT_POLL_INTERVAL);
+    this.subscribeToUpdates();
   }
 
   componentWillUnmount() {
+    this.unsubscribe();
     clearInterval(this.countPoll);
   }
 
   render() {
+    if (this.props.refetching) {
+      return <Spinner />;
+    }
     return <Stream
       {...this.props}
       loadMore={this.loadMore}
       loadMoreComments={this.loadMoreComments}
-      loadNewComments={this.loadNewComments}
       loadNewReplies={this.loadNewReplies}
     />;
   }
 }
 
-const ascending = (a, b) => {
-  const dateA = new Date(a.created_at);
-  const dateB = new Date(b.created_at);
-  if (dateA < dateB) { return -1; }
-  if (dateA > dateB) { return 1; }
-  return 0;
-};
+const commentFragment = gql`
+  fragment CoralEmbedStream_Stream_comment on Comment {
+    id
+    ...${getDefinitionName(Comment.fragments.comment)}
+    replyCount(excludeIgnored: $excludeIgnored)
+    replies(excludeIgnored: $excludeIgnored) {
+      nodes {
+        id
+        ...${getDefinitionName(Comment.fragments.comment)}
+      }
+      hasNextPage
+      startCursor
+      endCursor
+    }
+  }
+  ${Comment.fragments.comment}
+`;
 
-const descending = (a, b) => ascending(a, b) * -1;
-
-const LOAD_COMMENT_COUNTS_QUERY = gql`
-  query CoralEmbedStream_LoadCommentCounts($assetUrl: String, , $commentId: ID!, $assetId: ID, $hasComment: Boolean!, $excludeIgnored: Boolean) {
-    comment(id: $commentId) @include(if: $hasComment) {
-      id
+const COMMENTS_ADDED_SUBSCRIPTION = gql`
+  subscription onCommentAdded($assetId: ID!, $excludeIgnored: Boolean){
+    commentAdded(asset_id: $assetId){
       parent {
         id
-        replyCount(excludeIgnored: $excludeIgnored)
       }
-      replyCount(excludeIgnored: $excludeIgnored)
+      ...CoralEmbedStream_Stream_comment
     }
-    asset(id: $assetId, url: $assetUrl) {
+  }
+  ${commentFragment}
+`;
+
+const COMMENTS_EDITED_SUBSCRIPTION = gql`
+  subscription onCommentEdited($assetId: ID!){
+    commentEdited(asset_id: $assetId){
       id
-      commentCount(excludeIgnored: $excludeIgnored)
-      comments(limit: 10) @skip(if: $hasComment) {
-        nodes {
-          id
-          replyCount(excludeIgnored: $excludeIgnored)
-        }
+      body
+      status
+      editing {
+        edited
+      }
+      user {
+        id
       }
     }
   }
@@ -241,24 +225,6 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
-const commentFragment = gql`
-  fragment CoralEmbedStream_Stream_comment on Comment {
-    id
-    ...${getDefinitionName(Comment.fragments.comment)}
-    replyCount(excludeIgnored: $excludeIgnored)
-    replies {
-      nodes {
-        id
-        ...${getDefinitionName(Comment.fragments.comment)}
-      }
-      hasNextPage
-      startCursor
-      endCursor
-    }
-  }
-  ${Comment.fragments.comment}
-`;
-
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
@@ -316,6 +282,7 @@ const fragments = {
 
 const mapStateToProps = (state) => ({
   auth: state.auth.toJS(),
+  refetching: state.embed.refetching,
   commentCountCache: state.stream.commentCountCache,
   activeReplyBox: state.stream.activeReplyBox,
   commentId: state.stream.commentId,
@@ -323,6 +290,7 @@ const mapStateToProps = (state) => ({
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
   previousTab: state.embed.previousTab,
+  commentClassNames: state.stream.commentClassNames
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -331,7 +299,6 @@ const mapDispatchToProps = (dispatch) =>
     addNotification,
     setActiveReplyBox,
     editName,
-    setCommentCountCache,
   }, dispatch);
 
 export default compose(
@@ -340,10 +307,9 @@ export default compose(
   withPostComment,
   withPostFlag,
   withPostDontAgree,
-  withAddCommentTag,
-  withRemoveCommentTag,
+  withAddTag,
+  withRemoveTag,
   withIgnoreUser,
   withDeleteAction,
   withEditComment,
 )(StreamContainer);
-

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

@@ -18,8 +18,8 @@ const extension = {
         }
       }
     `,
-    RemoveCommentTagResponse: gql`
-      fragment CoralEmbedStream_RemoveCommentTagResponse on RemoveCommentTagResponse {
+    RemoveTagResponse: gql`
+      fragment CoralEmbedStream_RemoveTagResponse on RemoveTagResponse {
         comment {
           id
           tags {
@@ -28,8 +28,8 @@ const extension = {
         }
       }
     `,
-    AddCommentTagResponse: gql`
-      fragment CoralEmbedStream_AddCommentTagResponse on AddCommentTagResponse {
+    AddTagResponse: gql`
+      fragment CoralEmbedStream_AddTagResponse on AddTagResponse {
         comment {
           id
           tags {
@@ -74,7 +74,13 @@ const extension = {
         status
         replyCount
         tags {
-          name
+          tag {
+            name
+            created_at
+          }
+          assigned_by {
+            id
+          }
         }
         user {
           id
@@ -91,6 +97,9 @@ const extension = {
           edited
           editableUntil
         }
+        parent {
+          id
+        }
       }
     `,
   },
@@ -141,9 +150,23 @@ const extension = {
             parent_id,
             asset_id,
             action_summaries: [],
-            tags,
+            tags: tags.map((tag) => ({
+              tag: {
+                name: tag,
+                created_at: new Date().toISOString(),
+                __typename: 'Tag'
+              },
+              assigned_by: {
+                id: auth.toJS().user.id,
+                __typename: 'User'
+              },
+              __typename: 'TagLink'
+            })),
             status: null,
             replyCount: 0,
+            parent: parent_id
+              ? {id: parent_id}
+              : null,
             replies: {
               __typename: 'CommentConnection',
               nodes: [],
@@ -165,7 +188,7 @@ const extension = {
           if (prev.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
             return prev;
           }
-          return insertCommentIntoEmbedQuery(prev, parent_id, comment);
+          return insertCommentIntoEmbedQuery(prev, comment);
         },
       }
     }),

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

@@ -1,11 +1,33 @@
 import update from 'immutability-helper';
 
-function findAndInsertComment(parent, id, comment) {
-  const [connectionField, countField, action] = parent.comments
+function applyToCommentsOrigin(root, callback) {
+  if (root.comment) {
+    if (root.comment.parent) {
+      return update(root, {
+        comment: {
+          parent: {
+            $apply: (node) => callback(node),
+          },
+        },
+      });
+    }
+    return update(root, {
+      comment: {
+        $apply: (node) => callback(node),
+      },
+    });
+  }
+  return update(root, {
+    asset: {$apply: (asset) => callback(asset)},
+  });
+}
+
+function findAndInsertComment(parent, comment) {
+  const [connectionField, countField, action] = parent.__typename === 'Asset'
     ? ['comments', 'commentCount', '$unshift']
     : ['replies', 'replyCount', '$push'];
 
-  if (!id || parent.id === id) {
+  if (!comment.parent || parent.id === comment.parent.id) {
     return update(parent, {
       [connectionField]: {
         nodes: {[action]: [comment]},
@@ -21,13 +43,13 @@ function findAndInsertComment(parent, id, comment) {
     [connectionField]: {
       nodes: {
         $apply: (nodes) =>
-         nodes.map((node) => findAndInsertComment(node, id, comment))
+         nodes.map((node) => findAndInsertComment(node, comment))
       },
     },
   });
 }
 
-export function insertCommentIntoEmbedQuery(root, id, comment) {
+export function insertCommentIntoEmbedQuery(root, comment) {
 
   // Increase total comment count by one.
   root = update(root, {
@@ -35,30 +57,11 @@ export function insertCommentIntoEmbedQuery(root, id, comment) {
       totalCommentCount: {$apply: (c) => c + 1},
     },
   });
-
-  if (root.comment) {
-    if (root.comment.parent) {
-      return update(root, {
-        comment: {
-          parent: {
-            $apply: (node) => findAndInsertComment(node, id, comment),
-          },
-        },
-      });
-    }
-    return update(root, {
-      comment: {
-        $apply: (node) => findAndInsertComment(node, id, comment),
-      },
-    });
-  }
-  return update(root, {
-    asset: {$apply: (asset) => findAndInsertComment(asset, id, comment)},
-  });
+  return applyToCommentsOrigin(root, (origin) => findAndInsertComment(origin, comment));
 }
 
 function findAndRemoveComment(parent, id) {
-  const [connectionField, countField] = parent.comments
+  const [connectionField, countField] = parent.__typename === 'Asset'
     ? ['comments', 'commentCount']
     : ['replies', 'replyCount'];
 
@@ -78,7 +81,7 @@ function findAndRemoveComment(parent, id) {
   };
 
   if (parent[countField] && next.length !== connection.nodes.length) {
-    changes[countField] = {$set: changes[countField] - 1};
+    changes[countField] = {$set: parent[countField] - 1};
   }
   return update(parent, changes);
 }
@@ -91,24 +94,88 @@ export function removeCommentFromEmbedQuery(root, id) {
       totalCommentCount: {$apply: (c) => c - 1},
     },
   });
+  return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
+}
 
-  if (root.comment) {
-    if (root.comment.parent) {
-      return update(root, {
-        comment: {
-          parent: {
-            $apply: (node) => findAndRemoveComment(node, id),
-          },
-        },
-      });
+function findComment(nodes, callback) {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (callback(node)) {
+      return node;
     }
-    return update(root, {
-      comment: {
-        $apply: (node) => findAndRemoveComment(node, id),
+    if (node.replies) {
+      const find = findComment(node.replies.nodes, callback);
+      if (find){
+        return find;
+      }
+    }
+  }
+  return false;
+}
+
+export function findCommentInEmbedQuery(root, callbackOrId) {
+  let callback = callbackOrId;
+  if (typeof callbackOrId === 'string') {
+    callback = (node) => node.id === callbackOrId;
+  }
+  if (root.comment) {
+    if (callback(root.comment)) {
+      return root.comment;
+    }
+    if (root.comment.parent && callback(root.comment.parent)) {
+      return root.comment.parent;
+    }
+  }
+  if (!root.asset.comments) {
+    return false;
+  }
+  return findComment(root.asset.comments.nodes, callback);
+}
+
+const ascending = (a, b) => {
+  const dateA = new Date(a.created_at);
+  const dateB = new Date(b.created_at);
+  if (dateA < dateB) { return -1; }
+  if (dateA > dateB) { return 1; }
+  return 0;
+};
+
+function findAndInsertFetchedComments(parent, comments, parent_id) {
+  const isAsset = parent.__typename === 'Asset';
+  const connectionField = isAsset ? 'comments' : 'replies';
+  if (!parent_id && connectionField === 'comments' || parent.id === parent_id) {
+    return update(parent, {
+      [connectionField]: {
+        hasNextPage: {$set: comments.hasNextPage},
+        endCursor: {$set: comments.endCursor},
+        nodes: {$apply: (nodes) => {
+          if (isAsset) {
+            return nodes.concat(comments.nodes);
+          }
+          return nodes
+          .concat(comments.nodes.filter(
+            (comment) => !nodes.some((node) => node.id === comment.id)
+          ))
+          .sort(ascending);
+        }},
       },
     });
   }
-  return update(root, {
-    asset: {$apply: (asset) => findAndRemoveComment(asset, id)},
+
+  const connection = parent[connectionField];
+  if (!connection) {
+    return parent;
+  }
+  return update(parent, {
+    [connectionField]: {
+      nodes: {
+        $apply: (nodes) =>
+         nodes.map((node) => findAndInsertFetchedComments(node, comments, parent_id))
+      },
+    },
   });
 }
+
+export function insertFetchedCommentsIntoEmbedQuery(root, comments, parent_id) {
+  return applyToCommentsOrigin(root, (origin) => findAndInsertFetchedComments(origin, comments, parent_id));
+}

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

@@ -2,31 +2,46 @@ import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
 
-import {client} from 'coral-framework/services/client';
 import {checkLogin} from 'coral-framework/actions/auth';
 import './graphql';
 import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
-
-import reducers from './reducers';
 import {getStore, injectReducers} from 'coral-framework/services/store';
+import {getClient} from 'coral-framework/services/client';
 import AppRouter from './AppRouter';
 import {pym} from 'coral-framework';
-import {loadPluginsTranslations} from 'coral-framework/helpers/plugins';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+import reducers from './reducers';
 
 const store = getStore();
+const client = getClient();
 
 loadPluginsTranslations();
+injectPluginsReducers();
 injectReducers(reducers);
 
+function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
+function init(config = {}) {
+  store.dispatch(addExternalConfig(config));
+  store.dispatch(checkLogin());
+}
+
 // Don't run this in the popup.
 if (!window.opener) {
-  store.dispatch(checkLogin());
-
-  pym.sendMessage('getConfig');
-
-  pym.onMessage('config', (config) => {
-    store.dispatch(addExternalConfig(JSON.parse(config)));
-  });
+  if (inIframe()) {
+    pym.sendMessage('getConfig');
+    pym.onMessage('config', (config) => {
+      init(JSON.parse(config));
+    });
+  } else {
+    init();
+  }
 }
 
 render(

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

@@ -3,6 +3,8 @@ import * as actions from '../constants/embed';
 const initialState = {
   activeTab: 'stream',
   previousTab: '',
+  refetching: false,
+  refetchRequestId: 0,
 };
 
 export default function stream(state = initialState, action) {
@@ -13,6 +15,23 @@ export default function stream(state = initialState, action) {
       activeTab: action.tab,
       previousTab: state.activeTab,
     };
+  case 'APOLLO_QUERY_INIT':
+    if (action.queryString.indexOf('query CoralEmbedStream_Embed(') >= 0) {
+      return {
+        ...state,
+        refetching: action.isRefetch ? true : state.refetching,
+        refetchRequestId: action.isRefetch ? action.requestId : state.refetchRequestId,
+      };
+    }
+    return state;
+  case 'APOLLO_QUERY_RESULT':
+    if (action.operationName === 'CoralEmbedStream_Embed') {
+      return {
+        ...state,
+        refetching: action.requestId === state.refetchRequestId ? false : state.refetching,
+      };
+    }
+    return state;
   default:
     return state;
   }

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

@@ -4,6 +4,6 @@ import stream from './stream';
 
 export default {
   embed,
+  config,
   stream,
-  config
 };

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

@@ -1,4 +1,5 @@
 import * as actions from '../constants/stream';
+import * as authActions from 'coral-framework/constants/auth';
 
 function getQueryVariable(variable) {
   let query = window.location.search.substring(1);
@@ -16,29 +17,42 @@ function getQueryVariable(variable) {
 
 const initialState = {
   activeReplyBox: '',
-  commentCountCache: -1,
   assetId: getQueryVariable('asset_id'),
   assetUrl: getQueryVariable('asset_url'),
   commentId: getQueryVariable('comment_id'),
+  commentClassNames: []
 };
 
 export default function stream(state = initialState, action) {
   switch (action.type) {
+  case authActions.LOGOUT:
+    return {
+      ...state,
+      activeReplyBox: '',
+    };
   case actions.SET_ACTIVE_REPLY_BOX:
     return {
       ...state,
       activeReplyBox: action.id,
     };
-  case actions.SET_COMMENT_COUNT_CACHE:
-    return {
-      ...state,
-      commentCountCache: action.amount,
-    };
   case actions.VIEW_ALL_COMMENTS:
     return {
       ...state,
       commentId: '',
     };
+  case actions.ADD_COMMENT_CLASSNAME :
+    return {
+      ...state,
+      commentClassNames: [...state.commentClassNames, action.className]
+    };
+  case actions.REMOVE_COMMENT_CLASSNAME :
+    return {
+      ...state,
+      commentClassNames: [
+        ...state.commentClassNames.slice(0, action.idx),
+        ...state.commentClassNames.slice(action.idx + 1)
+      ]
+    };
   default:
     return state;
   }

client/coral-embed-stream/style/default.css

@@ -119,7 +119,7 @@ hr {
 .coral-plugin-questionbox-info {
   top: 0;
   border: 0;
-  background: rgb(213,213,213);
+  background: #F0F0F0;
   color: black;
   width: 100%;
   text-align: left;
@@ -134,26 +134,25 @@ hr {
 
 .coral-plugin-questionbox-icon.bubble{
   position: absolute;
-  top: 11px;
+  top: 8px;
   left: 10px;
-  color: #949393;
-  font-size: 20px;
+  color: #9E9E9E;
+  font-size: 24px;
   z-index: 0;
 }
 
 .coral-plugin-questionbox-icon.person{
   z-index: 2;
-  top: 20px;
-  left: 15px;
+  top: 12px;
+  left: 12px;
   position: absolute;
-  font-size: 24px;
-  color: white;
+  font-size: 33px;
+  color: #262626;
 }
 
 .coral-plugin-questionbox-box {
   position: relative;
   border: 0;
-  background: black;
   color: white;
   padding: 20px;
   margin-left: 0px !important;
@@ -178,6 +177,15 @@ hr {
   display: none;
 }
 
+.talk-stream-wrapper-box {
+  padding: 10px 0;
+}
+
+.talk-stream-comments-container {
+  position: relative;
+  z-index: 0;
+}
+
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;

client/coral-embed/src/index.js

@@ -147,6 +147,7 @@ function configurePymParent(pymParent, opts) {
  * @param {String} [opts.title] - Title of Stream (rendered in iframe)
  * @param {String} [opts.asset_url] - Asset URL
  * @param {String} [opts.asset_id] - Asset ID
+ * @param {String} [opts.auth_token] - (optional) A jwt representing the session
  */
 Talk.render = function(el, opts) {
   if (!el) {

client/coral-framework/actions/auth.js

@@ -4,6 +4,7 @@ import * as actions from '../constants/auth';
 import * as Storage from '../helpers/storage';
 import coralApi, {base} from '../helpers/request';
 
+import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
 
 export const showSignInDialog = () => (dispatch, getState) => {
@@ -117,6 +118,7 @@ const signInFailure = (error) => ({
 export const handleAuthToken = (token) => (dispatch) => {
   Storage.setItem('exp', jwtDecode(token).exp);
   Storage.setItem('token', token);
+
   dispatch({type: 'HANDLE_AUTH_TOKEN'});
 };
 
@@ -277,6 +279,10 @@ export const logout = () => (dispatch) => {
     if (!bowser.safari && !bowser.ios) {
       Storage.removeItem('token');
     }
+
+    // Reset the websocket.
+    resetWebsocket();
+
     dispatch({type: actions.LOGOUT});
   });
 };
@@ -305,6 +311,9 @@ export const checkLogin = () => (dispatch) => {
         throw new Error('Not logged in');
       }
 
+      // Reset the websocket.
+      resetWebsocket();
+
       dispatch(checkLoginSuccess(result.user));
 
       // Display create username dialog if necessary.

client/coral-framework/components/RestrictedMessageBox.css

@@ -1,6 +1,8 @@
 .message {
-  background: #D8D8D8;
   padding: 25px;
   margin-bottom: 8px;
+  background-color: white;
+  border: 1px #F0F0F0 solid;
+  text-align: center;
+  font-weight: 100;
 }
-

client/coral-framework/components/Slot.js

@@ -4,10 +4,15 @@ import styles from './Slot.css';
 import {connect} from 'react-redux';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
 
-function Slot ({fill, inline = false, plugin_config: config, ...rest}) {
+function Slot ({fill, inline = false, className, plugin_config: config, defaultComponent: DefaultComponent, ...rest}) {
+  let children = getSlotElements(fill, {...rest, config});
+  if (children.length === 0 && DefaultComponent) {
+    children = <DefaultComponent {...rest} />;
+  }
+
   return (
-    <div className={cn({[styles.inline]: inline, [styles.debug]: config.debug})}>
-      {getSlotElements(fill, {...rest, config})}
+    <div className={cn({[styles.inline]: inline, [styles.debug]: config.debug}, className)}>
+      {children}
     </div>
   );
 }

client/coral-framework/components/index.js

@@ -0,0 +1 @@
+export {default as Slot} from './Slot';

client/coral-framework/graphql/fragments.js

@@ -1,23 +1,20 @@
-import {gql} from 'react-apollo';
-import * as mutations from './mutations';
-
-function createDefaultResponseFragments() {
-  const names = Object.keys(mutations).map((key) => key.replace('with', ''));
-  const result = {};
-  names.forEach((name) => {
-    const response = `${name}Response`;
-    result[response] = gql`
-      fragment Coral_${response} on ${response} {
-        errors {
-          translation_key
-        }
-      }
-    `;
-  });
-  return result;
-}
+import {createDefaultResponseFragments} from '../utils';
 
 // fragments defined here are automatically registered.
 export default {
-  ...createDefaultResponseFragments()
+  ...createDefaultResponseFragments(
+    'SetCommentStatusResponse',
+    'SuspendUserResponse',
+    'RejectUsernameResponse',
+    'SetUserStatusResponse',
+    'CreateFlagResponse',
+    'EditCommentResponse',
+    'PostFlagResponse',
+    'CreateDontAgreeResponse',
+    'DeleteActionResponse',
+    'ModifyTagResponse',
+    'IgnoreUserResponse',
+    'StopIgnoringUserResponse',
+  )
 };
+

client/coral-framework/graphql/mutations.js

@@ -173,39 +173,93 @@ export const withDeleteAction = withMutation(
       }}),
   });
 
-export const withAddCommentTag = withMutation(
+const COMMENT_FRAGMENT = gql`
+    fragment CoralBest_UpdateFragment on Comment {
+      tags {
+        tag {
+          name
+        }
+      }
+    }
+  `;
+
+export const withAddTag = withMutation(
   gql`
-    mutation AddCommentTag($id: ID!, $tag: String!) {
-      addCommentTag(id:$id, tag:$tag) {
-        ...AddCommentTagResponse
+    mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) {
+      addTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) {
+        ...ModifyTagResponse
       }
     }
   `, {
     props: ({mutate}) => ({
-      addCommentTag: ({id, tag}) => {
+      addTag: ({id, name, assetId}) => {
         return mutate({
           variables: {
             id,
-            tag
-          }
+            name,
+            asset_id: assetId
+          },
+          optimisticResponse: {
+            addTag: {
+              __typename: 'ModifyTagResponse',
+              errors: null,
+            }
+          },
+          update: (proxy) => {
+            const fragmentId = `Comment_${id}`;
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
+
+            data.tags.push({
+              tag: {
+                __typename: 'Tag',
+                name: 'BEST'
+              },
+              __typename: 'TagLink'
+            });
+
+            // Write our data back to the cache.
+            proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
+          },
         });
       }}),
   });
 
-export const withRemoveCommentTag = withMutation(
+export const withRemoveTag = withMutation(
   gql`
-    mutation RemoveCommentTag($id: ID!, $tag: String!) {
-      removeCommentTag(id:$id, tag:$tag) {
-        ...RemoveCommentTagResponse
+    mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!) {
+      removeTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) {
+        ...ModifyTagResponse
       }
     }
   `, {
     props: ({mutate}) => ({
-      removeCommentTag: ({id, tag}) => {
+      removeTag: ({id, name, assetId}) => {
         return mutate({
           variables: {
             id,
-            tag
+            name,
+            asset_id: assetId
+          },
+          optimisticResponse: {
+            removeTag: {
+              __typename: 'ModifyTagResponse',
+              errors: null,
+            }
+          },
+          update: (proxy) => {
+            const fragmentId = `Comment_${id}`;
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
+
+            const idx = data.tags.findIndex((i) => i.tag.name === 'BEST');
+
+            data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)];
+
+            // Write our data back to the cache.
+            proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
           }
         });
       }}),
@@ -246,4 +300,3 @@ export const withStopIgnoringUser = withMutation(
         });
       }}),
   });
-

client/coral-framework/helpers/camelize.js

@@ -0,0 +1,16 @@
+const regExp = /[-\s]+(.)?/g;
+
+/**
+ * Convert dash separated strings to camel case.
+ *
+ * @param {String} str
+ * @return {String}
+ */
+
+export default function camelize(str) {
+  return str.replace(regExp, toUpper);
+}
+
+function toUpper(match, c) {
+  return c ? c.toUpperCase() : '';
+}

client/coral-framework/helpers/plugins.js

@@ -1,18 +1,14 @@
 import React from 'react';
-import merge from 'lodash/merge';
-import flatten from 'lodash/flatten';
-import flattenDeep from 'lodash/flattenDeep';
 import uniq from 'lodash/uniq';
 import pick from 'lodash/pick';
+import merge from 'lodash/merge';
 import plugins from 'pluginsConfig';
+import flatten from 'lodash/flatten';
+import flattenDeep from 'lodash/flattenDeep';
 import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
 import {loadTranslations} from 'coral-framework/services/i18n';
-
-export const pluginReducers = merge(
-  ...plugins
-    .filter((o) => o.module.reducer)
-    .map((o) => ({...o.module.reducer}))
-);
+import {injectReducers} from 'coral-framework/services/store';
+import camelize from './camelize';
 
 /**
  * Returns React Elements for given slot.
@@ -98,3 +94,12 @@ function getTranslations() {
 export function loadPluginsTranslations() {
   getTranslations().forEach((t) => loadTranslations(t));
 }
+
+export function injectPluginsReducers() {
+  const reducers = merge(
+    ...plugins
+      .filter((o) => o.module.reducer)
+      .map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
+  );
+  injectReducers(reducers);
+}

client/coral-framework/helpers/request.js

@@ -1,6 +1,30 @@
 import bowser from 'bowser';
 import * as Storage from './storage';
 import merge from 'lodash/merge';
+import {getStore} from 'coral-framework/services/store';
+
+/**
+ * getAuthToken returns the active auth token or null
+ *   Note: this method does not have access to the cookie based token used by
+ *   browsers that don't allow us to use cross domain iframe local storage.
+ * @return {string|null}
+ */
+export const getAuthToken = () => {
+  let state = getStore().getState();
+
+  if (state.config.auth_token) {
+
+    // if an auth_token exists in config, use it.
+    return state.config.auth_token;
+
+  } else if (!bowser.safari && !bowser.ios) {
+
+    // Use local storage auth tokens where there's a stable api.
+    return Storage.getItem('token');
+  }
+
+  return null;
+};
 
 const buildOptions = (inputOptions = {}) => {
   const defaultOptions = {
@@ -14,12 +38,10 @@ const buildOptions = (inputOptions = {}) => {
 
   let options = merge({}, defaultOptions, inputOptions);
 
-  if (!bowser.safari && !bowser.ios) {
-    let authorization = Storage.getItem('token');
-
-    if (authorization) {
-      options.headers.Authorization = `Bearer ${authorization}`;
-    }
+  // Apply authToken header
+  let authToken = getAuthToken();
+  if (authToken !== null) {
+    options.headers.Authorization = `Bearer ${authToken}`;
   }
 
   if (options.method.toLowerCase() !== 'get') {

client/coral-framework/hocs/index.js

@@ -1,5 +1,4 @@
 export {default as withFragments} from './withFragments';
 export {default as withMutation} from './withMutation';
 export {default as withQuery} from './withQuery';
-export {default as withReaction} from './withReaction';
 

client/coral-framework/hocs/withReaction.js

@@ -1,243 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import uuid from 'uuid/v4';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {getDisplayName} from '../helpers/hoc';
-import {compose, gql, graphql} from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
-import {showSignInDialog} from 'coral-framework/actions/auth';
-import {capitalize} from 'coral-framework/helpers/strings';
-import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
-
-export default (reaction) => (WrappedComponent) => {
-  if (typeof reaction !== 'string') {
-    console.error('Reaction must be a valid string');
-    return null;
-  }
-
-  reaction = reaction.toLowerCase();
-
-  class WithReactions extends React.Component {
-    render() {
-      const {comment} = this.props;
-
-      const reactionSummary = getMyActionSummary(
-        `${capitalize(reaction)}ActionSummary`,
-        comment
-      );
-
-      const count = getTotalActionCount(
-        `${capitalize(reaction)}ActionSummary`,
-        comment
-      );
-
-      const alreadyReacted = () => !!reactionSummary;
-
-      const withReactionProps = {reactionSummary, count, alreadyReacted};
-
-      return <WrappedComponent {...this.props} {...withReactionProps} />;
-    }
-  }
-
-  const isReaction = (a) =>
-    a.__typename === `${capitalize(reaction)}ActionSummary`;
-
-  const COMMENT_FRAGMENT = gql`
-      fragment ${capitalize(reaction)}Button_updateFragment on Comment {
-          action_summaries {
-          ... on ${capitalize(reaction)}ActionSummary {
-              count
-              current_user {
-                  id
-              }
-          }
-        }
-      }
-  `;
-
-  const withDeleteReaction = graphql(
-    gql`
-        mutation deleteReaction($id: ID!) {
-            deleteAction(id:$id) {
-                errors {
-                    translation_key
-                }
-            }
-        }
-    `,
-    {
-      props: ({mutate, ownProps}) => ({
-        deleteReaction: () => {
-
-          const reactionSummary = getMyActionSummary(
-            `${capitalize(reaction)}ActionSummary`,
-            ownProps.comment
-          );
-
-          const reactionData = {
-            id: reactionSummary.current_user.id,
-            commentId: ownProps.comment.id
-          };
-
-          return mutate({
-            variables: {id: reactionData.id},
-            optimisticResponse: {
-              deleteAction: {
-                __typename: 'DeleteActionResponse',
-                errors: null
-              }
-            },
-            update: (proxy) => {
-              const fragmentId = `Comment_${reactionData.commentId}`;
-
-              // Read the data from our cache for this query.
-              const data = proxy.readFragment({
-                fragment: COMMENT_FRAGMENT,
-                id: fragmentId
-              });
-
-              // Check whether we liked this comment.
-              const idx = data.action_summaries.findIndex(isReaction);
-              if (
-                idx < 0 ||
-                get(data.action_summaries[idx], 'current_user.id') !== reactionData.id
-              ) {
-                return;
-              }
-
-              data.action_summaries[idx] = {
-                ...data.action_summaries[idx],
-                count: data.action_summaries[idx].count - 1,
-                current_user: null
-              };
-
-              // Write our data back to the cache.
-              proxy.writeFragment({
-                fragment: COMMENT_FRAGMENT,
-                id: fragmentId,
-                data
-              });
-            }
-          });
-        }
-      })
-    }
-  );
-
-  const withPostReaction = graphql(
-    gql`
-        mutation create${capitalize(reaction)}($${reaction}: Create${capitalize(reaction)}Input!) {
-            create${capitalize(reaction)}(${reaction}: $${reaction}) {
-                ${reaction} {
-                id
-            }
-            errors {
-                translation_key
-            }
-          }
-        }
-    `,
-    {
-      props: ({mutate, ownProps}) => ({
-        postReaction: () => {
-
-          const reactionData = {
-            item_id: ownProps.comment.id,
-            item_type: 'COMMENTS'
-          };
-
-          return mutate({
-            variables: {[reaction]: reactionData},
-            optimisticResponse: {
-              [`create${capitalize(reaction)}`]: {
-                __typename: `Create${capitalize(reaction)}Response`,
-                errors: null,
-                [reaction]: {
-                  __typename: `${capitalize(reaction)}Action`,
-                  id: uuid()
-                }
-              }
-            },
-            update: (proxy, mutationResult) => {
-              const fragmentId = `Comment_${reactionData.item_id}`;
-
-              // Read the data from our cache for this query.
-              const data = proxy.readFragment({
-                fragment: COMMENT_FRAGMENT,
-                id: fragmentId
-              });
-
-              // Add our comment from the mutation to the end.
-              let idx = data.action_summaries.findIndex(isReaction);
-
-              // Check whether we already reactioned this comment.
-              if (idx >= 0 && data.action_summaries[idx].current_user) {
-                return;
-              }
-
-              if (idx < 0) {
-
-                // Add initial action when it doesn't exist.
-                data.action_summaries.push({
-                  __typename: `${capitalize(reaction)}ActionSummary`,
-                  count: 0,
-                  current_user: null
-                });
-                idx = data.action_summaries.length - 1;
-              }
-
-              data.action_summaries[idx] = {
-                ...data.action_summaries[idx],
-                count: data.action_summaries[idx].count + 1,
-                current_user: mutationResult.data[
-                  `create${capitalize(reaction)}`
-                ][reaction]
-              };
-
-              // Write our data back to the cache.
-              proxy.writeFragment({
-                fragment: COMMENT_FRAGMENT,
-                id: fragmentId,
-                data
-              });
-            }
-          });
-        }
-      })
-    }
-  );
-
-  const mapDispatchToProps = (dispatch) =>
-    bindActionCreators({showSignInDialog}, dispatch);
-
-  const enhance = compose(
-    withFragments({
-      root: gql`
-          fragment ${capitalize(reaction)}Button_root on RootQuery {
-            me {
-                status
-            }
-          }
-      `,
-      comment: gql`
-          fragment ${capitalize(reaction)}Button_comment on Comment {
-            action_summaries {
-              ... on ${capitalize(reaction)}ActionSummary {
-                  count
-                  current_user {
-                      id
-                  }
-              }
-            }
-          }`
-    }),
-    connect(null, mapDispatchToProps),
-    withDeleteReaction,
-    withPostReaction
-  );
-
-  WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
-
-  return enhance(WithReactions);
-};

client/coral-framework/reducers/index.js

@@ -2,12 +2,10 @@ import auth from './auth';
 import user from './user';
 import asset from './asset';
 import {reducer as commentBox} from '../../coral-plugin-commentbox';
-import {pluginReducers} from '../helpers/plugins';
 
 export default {
   auth,
   user,
   asset,
   commentBox,
-  ...pluginReducers
 };

client/coral-framework/services/client.js

@@ -1,28 +1,72 @@
 import ApolloClient, {addTypename} from 'apollo-client';
 import {networkInterface} from './transport';
+import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
+import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
+import {getAuthToken} from '../helpers/request';
 
-// import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
+let client, wsClient = null, wsClientToken = null;
 
-// TODO: replace absolute reference with something loaded from the store/page.
-// const wsClient = new SubscriptionClient('ws://localhost:3000/api/v1/live', {
-//   reconnect: true
-// });
-// const networkInterface = addGraphQLSubscriptions(
-//   getNetworkInterface(),
-//   wsClient,
-// );
-export const client = new ApolloClient({
-  connectToDevTools: true,
-  addTypename: true,
-  queryTransformer: addTypename,
-  dataIdFromObject: (result) => {
-    if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
-      return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
+export function resetWebsocket() {
+  if (wsClient === null) {
+
+    // Nothing to reset!
+    return;
+  }
+
+  // Close socket connection which will also unregister subscriptions on the server-side.
+  wsClient.close();
+
+  // Reconnect to the server.
+  wsClient.connect();
+
+  // Reregister all subscriptions (uses non public api).
+  // See: https://github.com/apollographql/subscriptions-transport-ws/issues/171
+  Object.keys(wsClient.operations).forEach((id) => {
+    wsClient.sendMessage(id, MessageTypes.GQL_START, wsClient.operations[id].options);
+  });
+}
+
+export function getClient() {
+  if (client) {
+    return client;
+  }
+
+  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+  wsClient = new SubscriptionClient(`${protocol}://${location.host}/api/v1/live`, {
+    reconnect: true,
+    lazy: true,
+    connectionParams: {
+      get token() {
+
+        wsClientToken = getAuthToken();
+
+        // Try to get the token from localStorage. If it isn't here, it may
+        // be passed as a cookie.
+
+        // NOTE: THIS IS ONLY EVER EVALUATED ONCE, IN ORDER TO SEND A DIFFERNT
+        // TOKEN YOU MUST DISCONNECT AND RECONNECT THE WEBSOCKET CLIENT.
+        return wsClientToken;
+      }
     }
-    return null;
-  },
-  networkInterface
-});
+  });
 
-export default client;
+  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
+    networkInterface,
+    wsClient,
+  );
 
+  client = new ApolloClient({
+    connectToDevTools: true,
+    addTypename: true,
+    queryTransformer: addTypename,
+    dataIdFromObject: (result) => {
+      if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
+        return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
+      }
+      return null;
+    },
+    networkInterface: networkInterfaceWithSubscriptions,
+  });
+
+  return client;
+}

client/coral-framework/services/i18n.js

@@ -7,7 +7,7 @@ import esTA from '../../../node_modules/timeago.js/locales/es';
 import en from '../../../locales/en.yml';
 import es from '../../../locales/es.yml';
 
-// Translations are happening at https://www.transifex.com/the-coral-project/talk-1/dashboard/.
+// Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard
 
 const defaultLanguage = 'en';
 const translations = {...en, ...es};

client/coral-framework/services/perms.js

@@ -23,7 +23,13 @@ export const can = (user, ...perms) => {
     return false;
   }
 
+  const banned = user.status === 'BANNED';
+  const suspended = user.suspension.until && new Date(user.suspension.until) > new Date();
+
   return perms.every((perm) => {
+    if (perm === 'INTERACT_WITH_COMMUNITY') {
+      return !banned && !suspended;
+    }
     const role = roles[perm];
     if (typeof role === 'undefined') {
       throw new Error(`${perm} is not a valid role`);

client/coral-framework/services/store.js

@@ -1,28 +1,7 @@
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 import mainReducer from '../reducers';
-import {client} from './client';
-
-const apolloErrorReporter = () => (next) => (action) => {
-  if (action.type === 'APOLLO_QUERY_ERROR') {
-    console.error(action.error);
-  }
-  return next(action);
-};
-
-const middlewares = [
-  applyMiddleware(
-    client.middleware(),
-    thunk,
-    apolloErrorReporter,
-  ),
-];
-
-if (window.devToolsExtension) {
-
-  // we can't have the last argument of compose() be undefined
-  middlewares.push(window.devToolsExtension());
-}
+import {getClient} from './client';
 
 export function injectReducers(reducers) {
   const store = getStore();
@@ -35,9 +14,30 @@ export function getStore() {
     return window.coralStore;
   }
 
+  const apolloErrorReporter = () => (next) => (action) => {
+    if (action.type === 'APOLLO_QUERY_ERROR') {
+      console.error(action.error);
+    }
+    return next(action);
+  };
+
+  const middlewares = [
+    applyMiddleware(
+      getClient().middleware(),
+      thunk,
+      apolloErrorReporter,
+    ),
+  ];
+
+  if (window.devToolsExtension) {
+
+    // we can't have the last argument of compose() be undefined
+    middlewares.push(window.devToolsExtension());
+  }
+
   const coralReducers = {
     ...mainReducer,
-    apollo: client.reducer()
+    apollo: getClient().reducer()
   };
 
   window.coralStore = createStore(

client/coral-framework/services/subscriptions.js

@@ -1,16 +0,0 @@
-import {print} from 'graphql-tag/printer';
-
-// quick way to add the subscribe and unsubscribe functions to the network interface
-const addGraphQLSubscriptions = (networkInterface, wsClient) => {
-  return Object.assign(networkInterface, {
-    subscribe: (request, handler) => wsClient.subscribe({
-      query: print(request.query),
-      variables: request.variables,
-    }, handler),
-    unsubscribe: (id) => {
-      wsClient.unsubscribe(id);
-    },
-  });
-};
-
-export default addGraphQLSubscriptions;

client/coral-framework/services/transport.js

@@ -1,6 +1,5 @@
 import {createNetworkInterface} from 'apollo-client';
-import * as Storage from '../helpers/storage';
-import bowser from 'bowser';
+import {getAuthToken} from '../helpers/request';
 
 //==============================================================================
 // NETWORK INTERFACE
@@ -23,8 +22,9 @@ networkInterface.use([{
       req.options.headers = {};  // Create the header object if needed.
     }
 
-    if (!bowser.safari && !bowser.ios) {
-      req.options.headers['authorization'] = `Bearer ${Storage.getItem('token')}`;
+    let authToken = getAuthToken();
+    if (authToken) {
+      req.options.headers['authorization'] = `Bearer ${authToken}`;
     }
 
     next();

client/coral-framework/utils/index.js

@@ -112,3 +112,17 @@ export function getResponseErrors(mutationResult) {
   });
   return result.length ? result : false;
 }
+
+export function createDefaultResponseFragments(...names) {
+  const result = {};
+  names.forEach((response) => {
+    result[response] = gql`
+      fragment Coral_${response} on ${response} {
+        errors {
+          translation_key
+        }
+      }
+    `;
+  });
+  return result;
+}

client/coral-plugin-api/index.js

@@ -1 +0,0 @@
-export {withReaction} from '../coral-framework/hocs';

client/coral-plugin-best/BestButton.js

@@ -7,10 +7,8 @@ import classnames from 'classnames';
 
 // tag string for best comments
 export const BEST_TAG = 'BEST';
-export const commentIsBest = ({tags} = {}) => {
-  const isBest = Array.isArray(tags) && tags.some((t) => t.name === BEST_TAG);
-  return isBest;
-};
+
+export const commentIsBest = ({tags} = {}) => tags.some((t) => t.tag.name === BEST_TAG);
 
 const name = 'coral-plugin-best';
 

client/coral-plugin-commentbox/CommentBox.js

@@ -36,18 +36,10 @@ class CommentBox extends React.Component {
       }
     };
   }
-  static get defaultProps() {
-    return {
-      setCommentCountCache: () => {}
-    };
-  }
   postComment = ({body}) => {
     const {
       commentPostedHandler,
       postComment,
-      setCommentCountCache,
-      commentCountCache,
-      isReply,
       assetId,
       parentId,
       addNotification,
@@ -60,8 +52,6 @@ class CommentBox extends React.Component {
       ...this.props.commentBox
     };
 
-    !isReply && setCommentCountCache(commentCountCache + 1);
-
     // Execute preSubmit Hooks
     this.state.hooks.preSubmit.forEach((hook) => hook());
 
@@ -74,19 +64,12 @@ class CommentBox extends React.Component {
 
         notifyForNewCommentStatus(addNotification, postedComment.status);
 
-        if (postedComment.status === 'REJECTED') {
-          !isReply && setCommentCountCache(commentCountCache);
-        } else if (postedComment.status === 'PREMOD') {
-          !isReply && setCommentCountCache(commentCountCache);
-        }
-
         if (commentPostedHandler) {
           commentPostedHandler();
         }
       })
       .catch((err) => {
         console.error(err);
-        !isReply && setCommentCountCache(commentCountCache);
       });
 
     this.setState({postedCount: this.state.postedCount + 1});
@@ -167,6 +150,7 @@ class CommentBox extends React.Component {
           fill="commentInputDetailArea"
           registerHook={this.registerHook}
           unregisterHook={this.unregisterHook}
+          isReply={isReply}
           inline
         />}
         cancelButtonClicked={cancelButtonClicked}
@@ -189,7 +173,6 @@ CommentBox.propTypes = {
   authorId: PropTypes.string.isRequired,
   isReply: PropTypes.bool.isRequired,
   canPost: PropTypes.bool,
-  setCommentCountCache: PropTypes.func,
 };
 
 const mapStateToProps = ({commentBox}) => ({commentBox});

client/coral-plugin-commentbox/actions.js

@@ -7,3 +7,7 @@ export const removeTag = (idx) => ({
   type: 'REMOVE_TAG',
   idx
 });
+
+export const clearTags = () => ({
+  type: 'CLEAR_TAGS',
+});

client/coral-plugin-commentbox/constants.js

@@ -1,2 +1,3 @@
 export const ADD_TAG = 'ADD_TAG';
 export const REMOVE_TAG = 'REMOVE_TAG';
+export const CLEAR_TAGS = 'CLEAR_TAGS';

client/coral-plugin-commentbox/reducer.js

@@ -1,4 +1,4 @@
-import {ADD_TAG, REMOVE_TAG} from './constants';
+import {ADD_TAG, REMOVE_TAG, CLEAR_TAGS} from './constants';
 
 const initialState = {
   tags: []
@@ -19,6 +19,8 @@ export default function commentBox (state = initialState, action) {
         ...state.tags.slice(action.idx + 1)
       ]
     };
+  case CLEAR_TAGS :
+    return initialState;
   default :
     return state;
   }

client/coral-plugin-commentcontent/CommentContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-const name = 'coral-plugin-commentcontent';
-
-const Content = ({body, styles}) => {
-  const textbreaks = body.split('\n');
-  return <div
-    className={`${name}-text`}
-    style={styles && styles.text}>
-    {
-      textbreaks.map((line, i) => <span key={i} className={`${name}-line`}>
-        {line} <br className={`${name}-linebreak`}/>
-      </span>)
-    }
-  </div>;
-};
-
-export default Content;

client/coral-plugin-commentcontent/__tests__/commentContent.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentContent from '../CommentContent';
-
-describe('CommentContent', () => {
-  it('should render content', () => {
-    const render = shallow(<CommentContent content="test"/>);
-    expect(render.contains('test')).to.be.truthy;
-  });
-});

client/coral-plugin-flags/FlagButton.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 
 import t from 'coral-framework/services/i18n';
+import {can} from 'coral-framework/services/perms';
 
 import {PopupMenu, Button} from 'coral-ui';
 import onClickOutside from 'react-onclickoutside';
@@ -32,10 +33,12 @@ class FlagButton extends Component {
       this.props.showSignInDialog();
       return;
     }
-    if (this.state.showMenu) {
-      this.closeMenu();
-    } else {
-      this.setState({showMenu: true});
+    if (can(currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      if (this.state.showMenu) {
+        this.closeMenu();
+      } else {
+        this.setState({showMenu: true});
+      }
     }
   }
 

client/coral-plugin-history/Comment.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import {Icon} from '../coral-ui';
 import styles from './Comment.css';
+import Slot from 'coral-framework/components/Slot';
 import PubDate from '../coral-plugin-pubdate/PubDate';
-import Content from '../coral-plugin-commentcontent/CommentContent';
+import CommentContent from '../coral-embed-stream/src/components/CommentContent';
 
 import t from 'coral-framework/services/i18n';
 
@@ -10,9 +11,11 @@ const Comment = (props) => {
   return (
     <div className={styles.myComment}>
       <div>
-        <Content
+        <Slot
+          fill="commentContent"
+          defaultComponent={CommentContent}
           className={`${styles.commentBody} myCommentBody`}
-          body={props.comment.body}
+          comment={props.comment}
         />
         <p className="myCommentAsset">
           <a

client/coral-plugin-moderation/styles.css

@@ -1,4 +1,6 @@
 .moderationLink {
+  display: inline;
+
   a {
     color: #679af3;
     text-decoration: none;

client/coral-plugin-replies/ReplyBox.js

@@ -9,6 +9,10 @@ class ReplyBox extends Component {
     document.getElementById('replyText').focus();
   }
 
+  cancelReply = () => {
+    this.props.setActiveReplyBox('');
+  };
+
   render() {
     const {
       styles,
@@ -18,7 +22,6 @@ class ReplyBox extends Component {
       addNotification,
       parentId,
       commentPostedHandler,
-      setActiveReplyBox,
       maxCharCount,
       charCountEnable
     } = this.props;
@@ -28,7 +31,7 @@ class ReplyBox extends Component {
         charCountEnable={charCountEnable}
         commentPostedHandler={commentPostedHandler}
         parentId={parentId}
-        cancelButtonClicked={setActiveReplyBox}
+        cancelButtonClicked={this.cancelReply}
         addNotification={addNotification}
         authorId={authorId}
         assetId={assetId}

client/coral-plugin-replies/ReplyButton.js

@@ -6,21 +6,20 @@ import classnames from 'classnames';
 
 const name = 'coral-plugin-replies';
 
-const ReplyButton = ({banned, onClick}) => {
+const ReplyButton = ({onClick}) => {
   return (
     <button
       className={classnames(`${name}-reply-button`)}
       onClick={onClick}>
       {t('reply')}
       <i className={`${name}-icon material-icons`}
-        aria-hidden={true}>{banned ? 'BANNED' : 'reply'}</i>
+        aria-hidden={true}>reply</i>
     </button>
   );
 };
 
 ReplyButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  banned: PropTypes.bool.isRequired
 };
 
 export default ReplyButton;

client/coral-settings/components/IgnoredUsers.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-
+import t from 'coral-framework/services/i18n';
 import styles from './IgnoredUsers.css';
 
 export class IgnoredUsers extends Component {
@@ -18,7 +18,7 @@ export class IgnoredUsers extends Component {
       <div>
         {
           users.length
-            ? <p>Because you ignored these, you do not see their comments.</p>
+            ? <p>{t('framework.because_you_ignored')}</p>
             : null
         }
         <dl className={styles.ignoredUserList}>
@@ -29,7 +29,7 @@ export class IgnoredUsers extends Component {
                 <dd className={styles.stopListening}>
                   <a
                     onClick={() => stopIgnoring({id})}
-                    className={styles.link}>Stop ignoring</a>
+                    className={styles.link}>{t('framework.stop_ignoring')}</a>
                 </dd>
               </span>
             ))

client/coral-ui/components/Drawer.css

@@ -1,15 +1,25 @@
 .drawer {
   max-width: 700px;
-  min-width: 400px;
-  padding: 20px;
+  min-width: 550px;
   position: fixed;
   top: 0;
-  right: 0;
+  right: -17px;
   bottom: 0;
   background-color: white;
   transition: transform 500ms ease-in-out;
   box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
   z-index: 10000;
+
+  .content {
+    position: absolute;
+    padding: 20px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
 }
 
 .closeButton {

client/coral-ui/components/Drawer.js

@@ -6,7 +6,9 @@ const Drawer = ({children, handleClickOutside}) => {
   return (
     <div className={styles.drawer}>
       <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
-      {children}
+      <div className={styles.content}>
+        {children}
+      </div>
     </div>
   );
 };

client/coral-ui/components/Tab.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import styles from './Tab.css';
 
-export default ({children, tabId, active, onTabClick, cStyle = 'base'}) => (
+export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
   <li
     key={tabId}
-    className={active ? styles[`${cStyle}--active`] : ''}
+    className={`${active ? `${styles[`${cStyle}--active`]} coral-tab-active` : ''} coral-tab ${props.className}`}
     onClick={() => onTabClick(tabId)}
   >
     {children}
   </li>
 );
-

client/coral-ui/components/TabBar.js

@@ -17,13 +17,13 @@ class TabBar extends React.Component {
     const {children, activeTab, cStyle = 'base'} = this.props;
     return (
       <div>
-        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''}`}>
+        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${this.props.className}`}>
           {React.Children.toArray(children)
             .filter((child) => !child.props.restricted)
             .map((child, tabId) =>
               React.cloneElement(child, {
                 tabId,
-                active: tabId === activeTab,
+                active: child.props.id === activeTab,
                 onTabClick: this.handleClickTab,
                 cStyle
               })

docs/index.md

@@ -8,7 +8,7 @@ summary:
 
 [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+Online comments are broken. Mozilla's open-source, plugin-based tool Talk rethinks how moderation, comment display, and conversation function online, creating the opportunity for better, smarter discussions designed to fit your needs. [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
@@ -30,6 +30,8 @@ See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CO
 
 - iPad
 - iPad Pro
+- iPhone 7 Plus
+- iPhone 7
 - iPhone 6 Plus
 - iPhone 6
 - iPhone 5
@@ -42,7 +44,7 @@ See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CO
 
 ### Android Devices
 
-- Galaxy S5
+- Galaxy S5x
 - Nexus 5X
 - Nexus 6P
 

errors.js

@@ -104,6 +104,20 @@ class ErrAuthentication extends APIError {
   }
 }
 
+/**
+ * ErrAlreadyExists is returned when an attempt to create a resource failed due to an existing one.
+ */
+class ErrAlreadyExists extends APIError {
+  constructor(existing = null) {
+    super('resource already exists', {
+      translation_key: 'ALREADY_EXISTS',
+      status: 409
+    }, {
+      existing
+    });
+  }
+}
+
 // ErrContainsProfanity is returned in the event that the middleware detects
 // profanity/wordlisted words in the payload.
 const ErrContainsProfanity = new APIError('This username contains elements which are not permitted in our community. If you think this is in error, please contact us or try again.', {
@@ -168,9 +182,17 @@ const ErrCommentTooShort = new APIError('Comment was too short', {
   status: 400
 });
 
+// ErrAssetURLAlreadyExists is returned when a rename operation is requested
+// but an asset already exists with the new url.
+const ErrAssetURLAlreadyExists = new APIError('Asset URL already exists, cannot rename', {
+  translation_key: 'ASSET_URL_ALREADY_EXISTS',
+  status: 409
+});
+
 module.exports = {
   ExtendableError,
   APIError,
+  ErrAlreadyExists,
   ErrPasswordTooShort,
   ErrSettingsNotInit,
   ErrMissingEmail,
@@ -191,5 +213,6 @@ module.exports = {
   ErrInstallLock,
   ErrLoginAttemptMaximumExceeded,
   ErrEditWindowHasEnded,
-  ErrCommentTooShort
+  ErrCommentTooShort,
+  ErrAssetURLAlreadyExists
 };

graph/loaders/index.js

@@ -6,6 +6,7 @@ const Assets = require('./assets');
 const Comments = require('./comments');
 const Metrics = require('./metrics');
 const Settings = require('./settings');
+const Tags = require('./tags');
 const Users = require('./users');
 
 const plugins = require('../../services/plugins');
@@ -18,6 +19,7 @@ let loaders = [
   Comments,
   Metrics,
   Settings,
+  Tags,
   Users,
 
   // Load the plugin loaders from the manager.

graph/loaders/settings.js

@@ -1,5 +1,4 @@
 const SettingsService = require('../../services/settings');
-
 const util = require('./util');
 
 /**

graph/loaders/tags.js

@@ -0,0 +1,22 @@
+const DataLoader = require('dataloader');
+const TagsService = require('../../services/tags');
+
+/**
+ * Get all the tags for the context for the dataloader.
+ */
+const genAll = (context, queries) => {
+  return Promise.all(queries.map(({id, item_type, asset_id}) => {
+    return TagsService.getAll({id, item_type, asset_id});
+  }));
+};
+
+/**
+ * Creates a set of loaders based on a GraphQL context.
+ * @param  {Object} context the context of the GraphQL request
+ * @return {Object}         object of loaders
+ */
+module.exports = (context) => ({
+  Tags: {
+    getAll: new DataLoader((queries) => genAll(context, queries))
+  }
+});

graph/mutators/action.js

@@ -36,10 +36,10 @@ const createAction = async ({user = {}}, {item_id, item_type, action_type, group
  * Deletes an action based on the user id if the user owns that action.
  * @param  {Object} user the user performing the request
  * @param  {String} id   the id of the action to delete
- * @return {Promise}     resolves when the action is deleted
+ * @return {Promise}     resolves to the deleted action, or null if not found.
  */
 const deleteAction = ({user}, {id}) => {
-  return ActionModel.remove({
+  return ActionModel.findOneAndRemove({
     id,
     user_id: user.id
   });

graph/mutators/comment.js

@@ -1,22 +1,70 @@
-const debug = require('debug')('talk:graph:mutators:comment');
 const errors = require('../../errors');
 
 const ActionModel = require('../../models/action');
 const AssetsService = require('../../services/assets');
 const ActionsService = require('../../services/actions');
+const TagsService = require('../../services/tags');
 const CommentsService = require('../../services/comments');
 const KarmaService = require('../../services/karma');
 const linkify = require('linkify-it')();
-
 const Wordlist = require('../../services/wordlist');
 const {
   CREATE_COMMENT,
   SET_COMMENT_STATUS,
   ADD_COMMENT_TAG,
-  REMOVE_COMMENT_TAG,
   EDIT_COMMENT
 } = require('../../perms/constants');
 
+const debug = require('debug')('talk:graph:mutators:tags');
+const plugins = require('../../services/plugins');
+
+const pluginTags = plugins.get('server', 'tags').reduce((acc, {plugin, tags}) => {
+  debug(`added plugin '${plugin.name}'`);
+
+  acc = acc.concat(tags);
+
+  return acc;
+}, []);
+
+const resolveTagsForComment = async ({user, loaders: {Tags}}, {asset_id, tags = []}) => {
+  const item_type = 'COMMENTS';
+
+  // Handle Tags
+  if (tags.length) {
+
+    // Get the global list of tags from the dataloader.
+    let globalTags = await Tags.getAll.load({
+      item_type,
+      asset_id
+    });
+    if (!Array.isArray(globalTags)) {
+      globalTags = [];
+    }
+
+    globalTags = globalTags.concat(pluginTags);
+
+    // Merge in the tags for the given comment.
+    tags = tags.map((name) => {
+
+      // Resolve the TagLink that we can use for the comment.
+      let {tagLink} = TagsService.resolveLink(user, globalTags, {name, item_type});
+
+      // Return the tagLink for tag insertion.
+      return tagLink;
+    });
+  }
+
+  // Add the staff tag for comments created as a staff member.
+  if (user.can(ADD_COMMENT_TAG)) {
+    tags.push(TagsService.newTagLink(user, {
+      name: 'STAFF',
+      item_type
+    }));
+  }
+
+  return tags;
+};
+
 /**
  * adjustKarma will adjust the affected user's karma depending on the moderators
  * action.
@@ -102,15 +150,11 @@ const adjustKarma = (Comments, id, status) => async () => {
  * @param  {String} [status='NONE'] the status of the new comment
  * @return {Promise}              resolves to the created comment
  */
-const createComment = async ({user, loaders: {Comments}, pubsub}, {body, asset_id, parent_id = null, tags = []}, status = 'NONE') => {
+const createComment = async (context, {tags = [], body, asset_id, parent_id = null}, status = 'NONE') => {
+  const {user, loaders: {Comments}, pubsub} = context;
 
-  // Building array of tags
-  tags = tags.map((tag) => ({name: tag}));
-
-  // If admin or moderator, adding STAFF tag
-  if (user.isStaff()) {
-    tags.push({name: 'STAFF'});
-  }
+  // Resolve the tags for the comment.
+  tags = await resolveTagsForComment(context, {asset_id, tags});
 
   let comment = await CommentsService.publicCreate({
     body,
@@ -305,24 +349,6 @@ const setStatus = async ({user, loaders: {Comments}}, {id, status}) => {
   return comment;
 };
 
-/**
- * Adds a tag to a Comment
- * @param {String} id          identifier of the comment  (uuid)
- * @param {String} tag     name of the tag
- */
-const addCommentTag = ({user, loaders: {Comments}}, {id, tag}) => {
-  return CommentsService.addTag(id, tag, user.id);
-};
-
-/**
- * Removes a tag from a Comment
- * @param {String} id      identifier of the comment  (uuid)
- * @param {String} tag     name of the tag
- */
-const removeCommentTag = ({user, loaders: {Comments}}, {id, tag}) => {
-  return CommentsService.removeTag(id, tag);
-};
-
 /**
  * Edit a Comment
  * @param {String} id         identifier of the comment  (uuid)
@@ -340,6 +366,12 @@ const edit = async (context, {id, asset_id, edit: {body}}) => {
   // Execute the edit.
   const comment = await CommentsService.edit(id, context.user.id, {body, status});
 
+  if (context.pubsub) {
+
+    // Publish the edited comment via the subscription.
+    context.pubsub.publish('commentEdited', comment);
+  }
+
   return comment;
 };
 
@@ -348,9 +380,7 @@ module.exports = (context) => {
     Comment: {
       create: () => Promise.reject(errors.ErrNotAuthorized),
       setStatus: () => Promise.reject(errors.ErrNotAuthorized),
-      addCommentTag: () => Promise.reject(errors.ErrNotAuthorized),
-      removeCommentTag: () => Promise.reject(errors.ErrNotAuthorized),
-      edit: () => Promise.reject(errors.ErrNotAuthorized),
+      edit: () => Promise.reject(errors.ErrNotAuthorized)
     }
   };
 
@@ -362,14 +392,6 @@ module.exports = (context) => {
     mutators.Comment.setStatus = (action) => setStatus(context, action);
   }
 
-  if (context.user && context.user.can(ADD_COMMENT_TAG)) {
-    mutators.Comment.addCommentTag = (action) => addCommentTag(context, action);
-  }
-
-  if (context.user && context.user.can(REMOVE_COMMENT_TAG)) {
-    mutators.Comment.removeCommentTag = (action) => removeCommentTag(context, action);
-  }
-
   if (context.user && context.user.can(EDIT_COMMENT)) {
     mutators.Comment.edit = (action) => edit(context, action);
   }