Merge pull request #1770 from icco/patch-1

Fix small typo in integrating/configuring-admin.md

.circleci/config.yml

@@ -1,12 +1,27 @@
+
+# job_environment will setup the environment for any job being executed.
+job_environment: &job_environment
+  NODE_ENV: test
+  DISABLE_CREATE_MONGO_INDEXES: TRUE
+
 # job_defaults applies all the defaults for each job.
 job_defaults: &job_defaults
   working_directory: ~/coralproject/talk
   docker:
     - image: circleci/node:8
+  environment:
+    <<: *job_environment
+
+# create_indexes will create the mongo indexes and wait until they have been
+# built.
+create_indexes: &create_indexes
+  run:
+    name: Create the database indexes and wait until they are built
+    command: ./bin/cli db createIndexes
 
 # integration_environment is the environment that configures the tests.
 integration_environment: &integration_environment
-  NODE_ENV: test
+  <<: *job_environment
   CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
   E2E_MAX_RETRIES: 3
 
@@ -25,6 +40,7 @@ integration_job: &integration_job
     - checkout
     - attach_workspace:
         at: ~/coralproject/talk
+    - <<: *create_indexes
     - run:
         name: Setup the database with defaults
         command: ./bin/cli setup --defaults
@@ -117,6 +133,7 @@ jobs:
           environment:
             JEST_JUNIT_OUTPUT: /tmp/circleci-test-results/jest/test-results.xml
             JEST_REPORTER: jest-junit
+      - <<: *create_indexes
       - run:
           name: Run the server unit tests
           command: yarn test:server

.eslintrc.json

@@ -1,3 +1,11 @@
 {
+  "env": {
+    "jest": true
+  },
+  "settings": {
+    "react": {
+      "version": "15.0"
+    }
+  },
   "extends": "@coralproject/eslint-config-talk"
 }

.gitignore

@@ -38,6 +38,7 @@ plugins/*
 !plugins/talk-plugin-google-auth
 !plugins/talk-plugin-ignore-user
 !plugins/talk-plugin-like
+!plugins/talk-plugin-local-auth
 !plugins/talk-plugin-love
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-mod
@@ -50,9 +51,10 @@ plugins/*
 !plugins/talk-plugin-notifications-digest-hourly
 !plugins/talk-plugin-offtopic
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-profile-settings
+!plugins/talk-plugin-profile-data
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-respect
+!plugins/talk-plugin-rich-text
 !plugins/talk-plugin-slack-notifications
 !plugins/talk-plugin-sort-most-downvoted
 !plugins/talk-plugin-sort-most-liked
@@ -66,7 +68,6 @@ plugins/*
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-upvote
 !plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-rich-text
 
 **/node_modules/*
 yarn-error.log

.nsprc

@@ -2,6 +2,12 @@
   "exceptions": [
     "https://nodesecurity.io/advisories/531",
     "https://nodesecurity.io/advisories/532",
-    "https://nodesecurity.io/advisories/566"
+    "https://nodesecurity.io/advisories/566",
+    "https://nodesecurity.io/advisories/577",
+    "https://nodesecurity.io/advisories/594",
+    "https://nodesecurity.io/advisories/603",
+    "https://nodesecurity.io/advisories/611",
+    "https://nodesecurity.io/advisories/612",
+    "https://nodesecurity.io/advisories/654"
   ]
 }

.nvmrc

@@ -0,0 +1,2 @@
+8
+

.prettierrc

@@ -0,0 +1,4 @@
+overrides:
+- files: "bin/cli*"
+  options:
+    parser: babylon

CODE_OF_CONDUCT.md

@@ -1,78 +1,6 @@
-# Contributor Covenant Code of Conduct
+# Mozilla Community Participation Guidelines
 
-## Our Pledge
+## Version 2.3 - Updated May 16, 2017
 
-We expect everyone contributing to The Coral Project to follow this code of conduct. That means the team, contractors we employ, contributors, as well as anyone posting to our public or internal-facing channels.
-We created it not because we anticipate any unacceptable behavior, but because we believe that articulating our values and obligations to one another reinforces the already exceptional level of respect among the team, and because having a code provides us with clear avenues to correct our culture should it ever stray from that course.
-
-We commit to enforce and evolve this code over the duration of the project.
-
-## Expected behavior
-
-* Be supportive of each other.
-* Be collaborative. Involve others in brainstorms, sketching sessions, code reviews, planning documents, and the like. It’s not only okay to ask for help or feedback often, it’s unacceptable not to do so.
-* Be generous and kind in both giving and accepting critique. Critique is a natural and important part of our culture. Good critiques are kind, respectful, clear, and constructive, focused on goals and requirements rather than personal preferences. You are expected to give and receive criticism with grace.
-* Be humane. Be polite and friendly in all forms of communication, especially remote communication, where opportunities for misunderstanding are greater. Use sarcasm carefully. Tone is hard to decipher online; make judicious use of emoji to aid in communication.
-* Be considerate.
-* Be tolerant.
-* Respect people’s boundaries.
-* Do not make it personal.
-* Use welcoming and inclusive language.
-* Offer to help if you see someone struggling or otherwise in need of assistance (taking care not to be patronizing or disrespectful).
-* If someone approaches you looking for help, be generous with your time; if you’re under a deadline, direct them to someone else who may be of assistance.
-* Go out of your way to include people in jokes or memes, recognizing that we want to build an environment free of cliques.
-* Show empathy towards other community members
-
-
-## Unacceptable behavior
-
-We are committed to providing a welcoming and safe environment for people of all races, gender identities, gender expressions, sexual orientations, physical abilities, physical appearances, socioeconomic backgrounds, nationalities, ages, religions, and beliefs.
-We expect that you will refrain from demeaning, discriminatory, or harassing behavior and speech.
-
-Harassment includes, but is not limited to: deliberate intimidation; stalking; unwanted photography or recording; sustained or willful disruption of talks or other events; inappropriate physical contact; use of sexual or discriminatory imagery, comments, or jokes; and unwelcome sexual attention.
-Furthermore, any behavior or language which is unwelcoming—whether or not it rises to the level of harassment—is also strongly discouraged. Much exclusionary behavior takes the form of microaggressions—subtle put-downs which may be unconsciously delivered. Regardless of intent, microaggressions can have a significant negative impact on victims and have no place on our team.
-
-Other inappropriate behavior:
-
-*	Threats
-*	Slurs
-*	Pornography
-*	Spam
-*	Bullying
-*	Copyright infringement
-*	Impersonation of someone else
-*	Violating someone’s privacy
-
-If you feel that someone has harassed you or otherwise treated you or someone else inappropriately, please alert the project lead at [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org).
-
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-These guidelines are ambitious, and we’re not always going to succeed in meeting them. When something goes wrong—whether it’s a microaggression or an instance of harassment — there are a number of things you can do to address the situation. Depending on your comfort level and the severity of the situation, here are some suggestions:
-
-* Address it directly. If you’re comfortable bringing up the incident with the person who instigated it, pull them aside to discuss how it affected you. Be sure to approach these conversations in a forgiving spirit: an angry or tense conversation will not do either of you any good. If you’re unsure how to go about that, try discussing with your manager or with the people and culture team first—they might have some advice about how to make this conversation happen.
-
-If you’re too frustrated to have a direct conversation, there are a number of alternate routes you can take.
-
-* Talk to a peer or mentor. Your colleagues are likely to have personal and professional experience on which to draw that could be of use to you. If you have someone you’re comfortable approaching, reach out and discuss the situation with them. They may be able to advise on how they would handle it, or direct you to someone who can. The flip side of this, of course, is that you should also be available when your colleagues reach out to you.
-
-* Contact the project lead, Andrew Losowsky, [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org), or the technical lead. We will work with you to help you figure out how to ensure that any conflict doesn’t interfere with your work, in confidence if you would prefer.
-
-* Talk to Chris Lawrence. Chris oversees the project. He can be contacted at [clawrence@mozillafoundation.org](mailto:clawrence@mozillafoundation.org).
-
-If you feel you have been unfairly accused of violating this code of conduct, you should contact Chris with a concise description of your grievance.
-
-## Conclusion
-
-We welcome your feedback on this and every other aspect of what we do as The Coral Project, and we thank you for working with us to make it a safe, enjoyable, and friendly experience for everyone involved in the project and what we do.
-Above text is licensed CC BY-SA 4.0, adapted from the SRCCON code of conduct, FreeBSD’s code of conduct, Vox Media’s product team code of conduct, Medium’s code of conduct, as well as adapted from the Contributor Covenant.
+The heart of Mozilla is people. We put people first and do our best to recognize, appreciate and respect the diversity of our global contributors. The Mozilla Project welcomes contributions from everyone who shares our goals and wants to contribute in a healthy and constructive manner within our community. As such, we have adopted this code of conduct and require all those who participate to agree and adhere to these Community Participation Guidelines in order to help us create a safe and positive community experience for all.
+https://www.mozilla.org/en-US/about/governance/policies/participation/

Dockerfile.onbuild

@@ -6,7 +6,9 @@ ONBUILD ARG TALK_ASSET_COMMENTS_LOAD_DEPTH=10
 ONBUILD ARG TALK_REPLY_COMMENTS_LOAD_DEPTH=3
 ONBUILD ARG TALK_THREADING_LEVEL=3
 ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all
+ONBUILD ARG TALK_DISABLE_EMBED_POLYFILL=FALSE
 ONBUILD ARG TALK_DEFAULT_LANG=en
+ONBUILD ARG TALK_WHITELISTED_LANGUAGES
 ONBUILD ARG TALK_PLUGINS_JSON
 ONBUILD ARG TALK_WEBPACK_SOURCE_MAP
 
@@ -20,4 +22,4 @@ ONBUILD COPY . /usr/src/app
 ONBUILD RUN cli plugins reconcile && \
             yarn && \
             yarn build && \
-            yarn cache clean
+            yarn cache clean

README.md

@@ -1,18 +1,12 @@
 # Talk · [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) · [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946/badge)](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946) · [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 
-Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
+Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/talk).
 
-Built with <3 by The Coral Project & Mozilla.
+Built with <3 by The Coral Project.
 
-## Try Talk!
+## Getting Started
 
-You're just one click away from trying Talk - all you need is a Heroku account and a few minutes of your time.
-
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
-
-## Technical Documentation
-
-From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://docs.coralproject.net/talk/) have everything you need to know.
+Check out our Quickstart and Install guides to get started with Talk in our [Technical Docs](https://docs.coralproject.net/talk/).
 
 ## Product Guide
 
@@ -22,6 +16,14 @@ Learn more about Talk, including a deep dive into features for commenters and mo
 
 You’ve installed Talk on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Talk Community Guide](https://blog.coralproject.net/youve-installed-talk-now-what/).
 
+## Advanced Usage
+
+For advanced configuration and usage of Talk, check out our [Configuration](https://docs.coralproject.net/talk/advanced-configuration/) and [Integration](https://docs.coralproject.net/talk/integrating/authentication/) how-tos. This covers topics in whih you will need dev support to fully customize and integrate Talk, such as SSO/authentication, creating and managing assets and articles, styling Talk with custom CSS, and setting up Notifications and SMTP support.
+
+## Versions & Upgrading
+
+The current recommended release version is v4.5.0. ^4.5 (and all future even-numbered versions) are considered stable LTS versions. We recommend ^4.5 for use in production environments. 
+
 ## More Resources
 
 - [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
@@ -32,7 +34,7 @@ You’ve installed Talk on your server, and you’re preparing to launch it on y
 
 ## End-to-End Testing
 
-Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
+Talk uses [Nightwatch](http://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
 
 [![Browserstack](/public/img/browserstack_logo.png)](https://browserstack.com)
 

app.js

@@ -1,5 +1,8 @@
 const express = require('express');
-const morgan = require('morgan');
+const nunjucks = require('nunjucks');
+const cons = require('consolidate');
+const trace = require('./middleware/trace');
+const logging = require('./middleware/logging');
 const path = require('path');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
@@ -12,6 +15,10 @@ const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');
 
 const app = express();
 
+// Add the trace middleware first, it will create a request ID for each request
+// downstream.
+app.use(trace);
+
 //==============================================================================
 // PLUGIN PRE APPLICATION MIDDLEWARE
 //==============================================================================
@@ -30,7 +37,7 @@ plugins.get('server', 'app').forEach(({ plugin, app: callback }) => {
 
 // Add the logging middleware only if we aren't testing.
 if (process.env.NODE_ENV !== 'test') {
-  app.use(morgan('dev'));
+  app.use(logging.log);
 }
 
 if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {
@@ -67,7 +74,26 @@ app.use(
 // VIEW CONFIGURATION
 //==============================================================================
 
-app.set('views', path.join(__dirname, 'views'));
+// configure the default views directory.
+const views = path.join(__dirname, 'views');
+app.set('views', views);
+
+// reconfigure nunjucks.
+cons.requires.nunjucks = nunjucks.configure(views, {
+  autoescape: true,
+  trimBlocks: true,
+  lstripBlocks: true,
+  watch: process.env.NODE_ENV === 'development',
+});
+
+// assign the nunjucks engine to .njk files.
+app.engine('njk', cons.nunjucks);
+
+// assign the ejs engine to .ejs and .html files.
+app.engine('ejs', cons.ejs);
+app.engine('html', cons.ejs);
+
+// set .ejs as the default extension.
 app.set('view engine', 'ejs');
 
 //==============================================================================

app.json

@@ -18,6 +18,10 @@
             "value": "",
             "required": true
         },
+        "MAILGUN_SMTP_PASSWORD": {
+            "value": "",
+            "required": true
+        },
         "NODE_ENV": "production",
         "REWRITE_ENV": "TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:MAILGUN_SMTP_SERVER,TALK_SMTP_PORT:MAILGUN_SMTP_PORT,TALK_SMTP_USERNAME:MAILGUN_SMTP_LOGIN,TALK_SMTP_PASSWORD:MAILGUN_SMTP_PASSWORD",
         "NPM_CONFIG_PRODUCTION": "false"

bin/cli

@@ -1,16 +1,15 @@
 #!/usr/bin/env node
 
-/**
- * Module dependencies.
- */
-
-require('./util');
 const program = require('commander');
-const { head, map } = require('lodash');
-const Matcher = require('did-you-mean');
 
+// We're requiring this here so it'll setup some promise rejection hooks to log
+// out.
+require('./util');
+
+// Setup the program.
 program
   .command('serve', 'serve the application')
+  .command('db', 'run database commands')
   .command('settings', 'interact with the application settings')
   .command('assets', 'interact with assets')
   .command('setup', 'setup the application')
@@ -23,20 +22,3 @@ program
     'provides utilities for interacting with the plugin system'
   )
   .parse(process.argv);
-
-// If the command wasn't found, output help.
-const commands = map(program.commands, '_name');
-const command = head(program.args);
-if (!commands.includes(command)) {
-  const m = new Matcher(commands);
-  const similarCommands = m.list(command);
-
-  console.error(
-    `cli '${command}' is not a talk cli command. See 'cli --help'.`
-  );
-  if (similarCommands.length > 0) {
-    const sc = similarCommands.map(({ value }) => `\t${value}\n`).join('');
-    console.error(`\nThe most similar commands are\n${sc}`);
-  }
-  process.exit(1);
-}

bin/cli-assets

@@ -7,7 +7,7 @@
 const util = require('./util');
 const program = require('commander');
 const parseDuration = require('ms');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 const AssetModel = require('../models/asset');
 const CommentModel = require('../models/comment');
 const AssetsService = require('../services/assets');
@@ -23,23 +23,33 @@ util.onshutdown([() => mongoose.disconnect()]);
 /**
  * Lists all the assets registered in the database.
  */
-async function listAssets() {
+async function listAssets(opts) {
   try {
     let assets = await AssetModel.find({}).sort({ created_at: 1 });
 
-    let table = new Table({
-      head: ['ID', 'Title', 'URL'],
-    });
+    switch (opts.format) {
+      case 'json': {
+        console.log(JSON.stringify(assets, null, 2));
+        break;
+      }
+      default: {
+        let table = new Table({
+          head: ['ID', 'Title', 'URL'],
+        });
 
-    assets.forEach(asset => {
-      table.push([
-        asset.id,
-        asset.title ? asset.title : '',
-        asset.url ? asset.url : '',
-      ]);
-    });
+        assets.forEach(asset => {
+          table.push([
+            asset.id,
+            asset.title ? asset.title : '',
+            asset.url ? asset.url : '',
+          ]);
+        });
+
+        console.log(table.toString());
+        break;
+      }
+    }
 
-    console.log(table.toString());
     util.shutdown();
   } catch (e) {
     console.error(e);
@@ -49,12 +59,13 @@ async function listAssets() {
 
 async function refreshAssets(ageString) {
   try {
-    const now = new Date().getTime();
-    const ageMs = parseDuration(ageString);
-    const age = new Date(now - ageMs);
+    const query = AssetModel.find({}, { id: 1 });
+    if (ageString) {
+      // An age was specified, so filter only those assets.
+      const ageMs = parseDuration(ageString);
+      const age = new Date(Date.now() - ageMs);
 
-    let assets = await AssetModel.find(
-      {
+      query.merge({
         $or: [
           {
             scraped: {
@@ -65,16 +76,28 @@ async function refreshAssets(ageString) {
             scraped: null,
           },
         ],
-      },
-      { id: 1 }
-    );
+      });
+    }
 
     // Create a graph context.
     const ctx = Context.forSystem();
 
+    // Load the assets.
+    const cursor = query.cursor();
+
     // Queue all the assets for scraping.
-    await Promise.all(assets.map(({ id }) => scraper.create(ctx, id)));
-    console.log('Assets were queued to be scraped');
+    const promises = [];
+
+    let asset = await cursor.next();
+    while (asset) {
+      promises.push(scraper.create(ctx, asset.id));
+      asset = await cursor.next();
+    }
+
+    await Promise.all(promises);
+
+    console.log(`${promises.length} Assets were queued to be scraped.`);
+
     util.shutdown();
   } catch (e) {
     console.error(e);
@@ -202,11 +225,17 @@ async function rewrite(search, replace, options) {
 
 program
   .command('list')
+  .option(
+    '--format <type>',
+    'Specify the output format [table]',
+    /^(table|json)$/i,
+    'table'
+  )
   .description('list all the assets in the database')
   .action(listAssets);
 
 program
-  .command('refresh <age>')
+  .command('refresh [age]')
   .description('queues the assets that exceed the age requested')
   .action(refreshAssets);
 

bin/cli-db

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const util = require('./util');
+const program = require('commander');
+const config = require('../config');
+
+async function createIndexes() {
+  try {
+    // Ensure we enable the index creation.
+    config.CREATE_MONGO_INDEXES = true;
+
+    // TODO: handle the plugin index creation?
+
+    // Let's register the shutdown hooks.
+    util.onshutdown([() => require('../services/mongoose').disconnect()]);
+
+    // Lets create all the database indexes for the application and wait for all
+    // them to finish their indexing.
+    const models = [
+      require('../models/action'),
+      require('../models/asset'),
+      require('../models/comment'),
+      require('../models/setting'),
+      require('../models/user'),
+      require('../models/migration'),
+    ];
+
+    // Call the `.init()` method to setup all the indexes on each model.
+    // `init()` returns a promise that resolves when the indexes have finished
+    // building successfully. The `init()` function is idempotent, so we don't
+    // have to worry about triggering an index rebuild.
+    await Promise.all(models.map(Model => Model.init()));
+
+    console.log('Indexes created');
+    util.shutdown(0);
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+}
+
+program
+  .command('createIndexes')
+  .description('creates the database indexes and waits until they are created')
+  .action(createIndexes);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (process.argv.length <= 2) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/cli-plugins

@@ -143,9 +143,9 @@ async function reconcileRemotePlugins({ dryRun, upgradeRemote }) {
 
   if (fetchable.length > 0) {
     console.log(
-      `$ yarn add --ignore-scripts --ignore-workspace-root-check ${fetchable.map(
-        ({ name, version }) => `${name}@${version}`.cyan
-      )}`
+      `$ yarn add --ignore-scripts --ignore-workspace-root-check ${fetchable
+        .map(({ name, version }) => `${name}@${version}`.cyan)
+        .join(' ')}`
     );
 
     if (!dryRun) {
@@ -162,7 +162,7 @@ async function reconcileRemotePlugins({ dryRun, upgradeRemote }) {
 
       if (output.status) {
         throw new Error(
-          'Could not install external plugins, errors occured during install'
+          'Could not install external plugins, errors occurred during install'
         );
       }
 
@@ -189,7 +189,7 @@ async function reconcileRemotePlugins({ dryRun, upgradeRemote }) {
 
       if (output.status) {
         throw new Error(
-          'Could not install external plugins, errors occured during install'
+          'Could not install external plugins, errors occurred during install'
         );
       }
 
@@ -329,28 +329,41 @@ async function createSeedPlugin() {
     if (answers.addPluginsJson) {
       const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
 
-      fs
-        .readJson(pluginsJson)
-        .then(j => {
-          // This is a client-side plugin, let's push this.
-          if (answers.client) {
-            j.client.push(answers.pluginName);
+      let j;
+      try {
+        j = await fs.readJson(pluginsJson);
+      } catch (err) {
+        // Fallback to plugins.default.json if the plugins.json file does not
+        // exist.
+        const defaultPluginsJson = path.resolve(
+          __dirname,
+          '..',
+          'plugins.default.json'
+        );
 
-            const output = JSON.stringify(j, null, 2);
-            fs.writeFileSync(pluginsJson, output);
-          }
+        try {
+          j = await fs.readJson(defaultPluginsJson);
+        } catch (err) {
+          // Fallback to an empty one if that also, doesn't exist.
+          j = { client: [], server: [] };
+        }
+      }
 
-          // This is a server-side plugin, let's push this.
-          if (answers.server) {
-            j.server.push(answers.pluginName);
+      // This is a client-side plugin, let's push this.
+      if (answers.client) {
+        j.client.push(answers.pluginName);
 
-            const output = JSON.stringify(j, null, 2);
-            fs.writeFileSync(pluginsJson, output);
-          }
-        })
-        .catch(err => {
-          console.error(err);
-        });
+        const output = JSON.stringify(j, null, 2);
+        fs.writeFileSync(pluginsJson, output);
+      }
+
+      // This is a server-side plugin, let's push this.
+      if (answers.server) {
+        j.server.push(answers.pluginName);
+
+        const output = JSON.stringify(j, null, 2);
+        fs.writeFileSync(pluginsJson, output);
+      }
     }
 
     console.log(

bin/cli-settings

@@ -4,7 +4,8 @@ const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
-const SettingsService = require('../services/settings');
+const Settings = require('../services/settings');
+const cache = require('../services/cache');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -14,9 +15,12 @@ util.onshutdown([() => mongoose.disconnect()]);
  */
 async function changeOrgName() {
   try {
-    let settings = await SettingsService.retrieve();
+    await cache.init();
 
-    let { organizationName } = await inquirer.prompt([
+    // Get the original settings.
+    const settings = await Settings.select('organizationName');
+
+    const { organizationName } = await inquirer.prompt([
       {
         name: 'organizationName',
         message: 'Organization Name',
@@ -25,9 +29,8 @@ async function changeOrgName() {
     ]);
 
     if (settings.organizationName !== organizationName) {
-      settings.organizationName = organizationName;
-
-      await SettingsService.update(settings);
+      // Set the organization name if there was a mutation to it.
+      await Settings.update({ organizationName });
 
       console.log('Settings were updated.');
     } else {
@@ -36,9 +39,9 @@ async function changeOrgName() {
   } catch (err) {
     console.error(err);
     util.shutdown(1);
+  } finally {
+    util.shutdown();
   }
-
-  util.shutdown();
 }
 
 //==============================================================================

bin/cli-setup

@@ -14,7 +14,7 @@ const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
 const MigrationService = require('../services/migration');
-const errors = require('../errors');
+const { ErrSettingsInit, ErrSettingsNotInit } = require('../errors');
 const Context = require('../graph/context');
 
 // Register the shutdown criteria.
@@ -41,13 +41,15 @@ const performSetup = async () => {
 
     // We should NOT have gotten a settings object, this means that the
     // application is already setup. Error out here.
-    throw errors.ErrSettingsInit;
-  } catch (e) {
+    throw new ErrSettingsInit();
+  } catch (err) {
     // If the error is `not init`, then we're good, otherwise, it's something
     // else.
-    if (e !== errors.ErrSettingsNotInit) {
-      throw e;
+    if (err instanceof ErrSettingsNotInit) {
+      return;
     }
+
+    throw err;
   }
 
   if (program.defaults) {

bin/cli-token

@@ -8,7 +8,7 @@ const util = require('./util');
 const program = require('commander');
 const mongoose = require('../services/mongoose');
 const TokensService = require('../services/tokens');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -49,7 +49,10 @@ async function revokeToken(tokenID) {
 
 async function createToken(userID, tokenName) {
   try {
-    let { pat: { id }, jwt } = await TokensService.create(userID, tokenName);
+    let {
+      pat: { id },
+      jwt,
+    } = await TokensService.create(userID, tokenName);
 
     console.log(`Created Token[${id}] for User[${userID}] = ${jwt}`);
 

bin/cli-users

@@ -8,7 +8,7 @@ const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
 const { stripIndent } = require('common-tags');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 
 // Make things colorful!
 require('colors');
@@ -287,8 +287,15 @@ async function createUser() {
 
     const { email, username, password, role } = answers;
 
+    const ctx = Context.forSystem();
+
     // Create the user.
-    const user = await UsersService.createLocalUser(email, password, username);
+    const user = await UsersService.createLocalUser(
+      ctx,
+      email,
+      password,
+      username
+    );
 
     // Set the role.
     await UsersService.setRole(user.id, role);
@@ -321,7 +328,7 @@ program
   .action(searchUsers);
 
 program
-  .command('set-role <userID> <role>')
+  .command('set-role <userID>')
   .description('sets the role on a user')
   .action(setUserRole);
 

bin/util.js

@@ -4,7 +4,8 @@ require('../services/env');
 const debug = require('debug')('talk:util');
 const { uniq } = require('lodash');
 
-const util = (module.exports = {});
+// Setup the utilities.
+const util = {};
 
 /**
  * Stores an array of functions that should be executed in the event that the
@@ -15,7 +16,7 @@ util.toshutdown = [];
 
 /**
  * Calls all the shutdown functions and then ends the process.
- * @param  {Number} [defaultCode=0] default return code upon sucesfull shutdown.
+ * @param  {Number} [defaultCode=0] default return code upon successful shutdown.
  */
 util.shutdown = (defaultCode = 0, signal = null) => {
   if (signal) {
@@ -63,3 +64,5 @@ process.on('unhandledRejection', err => {
   console.error(err);
   process.exit(1);
 });
+
+module.exports = util;

client/coral-admin/src/AppRouter.js

@@ -10,6 +10,7 @@ import Configure from 'routes/Configure';
 import StreamSettings from './routes/Configure/containers/StreamSettings';
 import ModerationSettings from './routes/Configure/containers/ModerationSettings';
 import TechSettings from './routes/Configure/containers/TechSettings';
+import OrganizationSettings from './routes/Configure/containers/OrganizationSettings';
 
 import { ModerationLayout, Moderation } from 'routes/Moderation';
 
@@ -25,6 +26,7 @@ const routes = (
         <Route path="stream" component={StreamSettings} />
         <Route path="moderation" component={ModerationSettings} />
         <Route path="tech" component={TechSettings} />
+        <Route path="organization" component={OrganizationSettings} />
         <IndexRedirect to="stream" />
       </Route>
 

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

@@ -5,14 +5,7 @@ export const singleView = () => ({ type: actions.SINGLE_VIEW });
 
 // hide shortcuts note
 export const hideShortcutsNote = () => (dispatch, _, { localStorage }) => {
-  try {
-    if (localStorage) {
-      localStorage.setItem('coral:shortcutsNote', 'hide');
-    }
-  } catch (e) {
-    // above will fail in Safari private mode
-  }
-
+  localStorage.setItem('coral:shortcutsNote', 'hide');
   dispatch({ type: actions.HIDE_SHORTCUTS_NOTE });
 };
 

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

@@ -0,0 +1,14 @@
+import {
+  SHOW_REJECT_USERNAME_DIALOG,
+  HIDE_REJECT_USERNAME_DIALOG,
+} from '../constants/rejectUsernameDialog';
+
+export const showRejectUsernameDialog = ({ userId, username }) => ({
+  type: SHOW_REJECT_USERNAME_DIALOG,
+  userId,
+  username,
+});
+
+export const hideRejectUsernameDialog = () => ({
+  type: HIDE_REJECT_USERNAME_DIALOG,
+});

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

@@ -76,7 +76,7 @@ ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   buttonClassNames: PropTypes.string,
 };
 

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

@@ -15,7 +15,7 @@ const ActionsMenuItem = props => (
 
 ActionsMenuItem.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
 };
 
 export default ActionsMenuItem;

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

@@ -5,6 +5,7 @@ import styles from './NotFound.css';
 import { Button, TextField, Alert, Success } from 'coral-ui';
 import Recaptcha from 'react-recaptcha';
 import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
 
 class AdminLogin extends React.Component {
   constructor(props) {
@@ -41,13 +42,13 @@ class AdminLogin extends React.Component {
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
           id="email"
-          label="Email Address"
+          label={t('login.email_address')}
           value={this.state.email}
           onChange={e => this.setState({ email: e.target.value })}
         />
         <TextField
           id="password"
-          label="Password"
+          label={t('login.password')}
           value={this.state.password}
           onChange={e => this.setState({ password: e.target.value })}
           type="password"
@@ -60,10 +61,10 @@ class AdminLogin extends React.Component {
           full
           onClick={this.handleSignIn}
         >
-          Sign In
+          {t('login.sign_in_button')}
         </Button>
         <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
+          {t('login.forgot_password')}{' '}
           <a
             href="#"
             className={styles.forgotPasswordLink}
@@ -72,7 +73,7 @@ class AdminLogin extends React.Component {
               this.setState({ requestPassword: true });
             }}
           >
-            Request a new one.
+            {t('login.request_passowrd')}
           </a>
         </p>
         {loginMaxExceeded && (
@@ -95,14 +96,14 @@ class AdminLogin extends React.Component {
       >
         {this.props.passwordRequestSuccess}{' '}
         <a className={styles.signInLink} href="#">
-          Sign in
+          {t('login.sign_in')}
         </a>
         <Success />
       </p>
     ) : (
       <form onSubmit={this.handleRequestPassword}>
         <TextField
-          label="Email Address"
+          label={t('login.email_address')}
           value={this.state.email}
           onChange={e => this.setState({ email: e.target.value })}
         />
@@ -112,17 +113,15 @@ class AdminLogin extends React.Component {
           full
           onClick={this.handleRequestPassword}
         >
-          Reset Password
+          {t('login.reset_password')}
         </Button>
       </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>
         <div className={cn(styles.loginLayout, 'talk-admin-login')}>
-          <h1 className={styles.loginHeader}>Team sign in</h1>
-          <p className={styles.loginCTA}>
-            Sign in to interact with your community.
-          </p>
+          <h1 className={styles.loginHeader}>{t('login.team_sign_in')}</h1>
+          <p className={styles.loginCTA}>{t('login.sign_in_message')}</p>
           {this.state.requestPassword ? requestPasswordForm : signInForm}
         </div>
       </Layout>

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

@@ -0,0 +1,11 @@
+:global {
+  html, body, #root, #root > div {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: #FAFAFA;
+    font-family: 'Roboto', sans-serif;
+  }
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import ToastContainer from './ToastContainer';
+import './App.css';
 import 'material-design-lite';
 
 import AppRouter from '../AppRouter';

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

@@ -14,7 +14,8 @@ const ApproveButton = ({ active, minimal, onClick, className, disabled }) => {
       className={cn(
         styles.root,
         { [styles.minimal]: minimal, [styles.active]: active },
-        className
+        className,
+        'talk-admin-approve-button'
       )}
       onClick={onClick}
       disabled={disabled || active}

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

@@ -19,7 +19,9 @@ class BanUserDialog extends React.Component {
   }
 
   handleMessageChange = e => {
-    const { value: message } = e;
+    const {
+      target: { value: message },
+    } = e;
     this.setState({ message });
   };
 
@@ -30,6 +32,12 @@ class BanUserDialog extends React.Component {
     });
   };
 
+  handlePerform = () => {
+    this.props.onPerform({
+      message: this.state.message,
+    });
+  };
+
   renderStep0() {
     const { onCancel, username, info } = this.props;
 
@@ -63,7 +71,7 @@ class BanUserDialog extends React.Component {
   }
 
   renderStep1() {
-    const { onCancel, onPerform } = this.props;
+    const { onCancel } = this.props;
     const { message } = this.state;
 
     return (
@@ -95,7 +103,7 @@ class BanUserDialog extends React.Component {
           <Button
             className={cn('talk-ban-user-dialog-button-confirm')}
             cStyle="black"
-            onClick={onPerform}
+            onClick={this.handlePerform}
             raised
           >
             {t('bandialog.send')}

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

@@ -29,7 +29,7 @@ const CommentAnimatedEdit = ({ children, body }) => {
 
 CommentAnimatedEdit.propTypes = {
   children: PropTypes.node,
-  body: PropTypes.string,
+  body: PropTypes.string.isRequired,
 };
 
 export default CommentAnimatedEdit;

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

@@ -0,0 +1,5 @@
+.tombstone {
+  background-color: #f0f0f0;
+  padding: 1em;
+  color: #1a212f;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './CommentDeletedTombstone.css';
+import t from 'coral-framework/services/i18n';
+
+const CommentDeletedTombstone = () => (
+  <div className={styles.tombstone}>{t('framework.comment_is_deleted')}</div>
+);
+
+export default CommentDeletedTombstone;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from 'coral-ui/components/Label';
 import Slot from 'coral-framework/components/Slot';
+import { t } from 'coral-framework/services/i18n';
 import FlagLabel from 'coral-ui/components/FlagLabel';
 import cn from 'classnames';
 import styles from './CommentLabels.css';
@@ -63,10 +64,14 @@ const CommentLabels = ({
           <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>
         )}
         {hasSuspectedWords(actions) && (
-          <FlagLabel iconName="sms_failed">Suspect</FlagLabel>
+          <FlagLabel iconName="sms_failed">
+            {t('flags.reasons.comment.suspect_word')}
+          </FlagLabel>
         )}
         {hasHistoryFlag(actions) && (
-          <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>
+          <FlagLabel iconName="sentiment_very_dissatisfied">
+            {t('flags.reasons.comment.trust')}
+          </FlagLabel>
         )}
       </div>
       <Slot

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

@@ -1,20 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './CountBadge.css';
-
-import t from 'coral-framework/services/i18n';
+import { humanizeNumber } from 'coral-framework/helpers/numbers';
 
 const CountBadge = ({ count }) => {
   let number = count;
 
   // shorten large counts to abbreviations
-  if (number / 1e9 > 1) {
-    number = `${(number / 1e9).toFixed(1)}${t('modqueue.billion')}`;
-  } else if (number / 1e6 > 1) {
-    number = `${(number / 1e6).toFixed(1)}${t('modqueue.million')}`;
-  } else if (number / 1e3 > 1) {
-    number = `${(number / 1e3).toFixed(1)}${t('modqueue.thousand')}`;
-  }
+  number = humanizeNumber(number);
 
   return <span className={styles.count}>{number}</span>;
 };

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

@@ -0,0 +1,16 @@
+.external {
+  margin-bottom: 20px;
+}
+
+.separator h5 {
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.slot > * {
+margin-bottom: 8px;
+
+&:last-child {
+  margin-bottom: 0px;
+}
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './External.css';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+const External = ({ slot }) => (
+  <IfSlotIsNotEmpty slot={slot}>
+    <div>
+      <div className={styles.external}>
+        <Slot fill={slot} className={styles.slot} />
+      </div>
+      <div className={styles.separator}>
+        <h5>Or</h5>
+      </div>
+    </div>
+  </IfSlotIsNotEmpty>
+);
+
+External.propTypes = {
+  slot: PropTypes.string.isRequired,
+};
+
+export default External;

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

@@ -43,21 +43,21 @@ class ForgotPassword extends React.Component {
       <form onSubmit={this.handleSubmit}>
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
-          label="Email Address"
+          label={t('login.email_address')}
           value={email}
           onChange={this.handleEmailChange}
         />
         <Button type="submit" cStyle="black" full>
-          Reset Password
+          {t('login.reset_password')}
         </Button>
         <p className={styles.cta}>
-          Go back to{' '}
+          {t('login.go_back')}{' '}
           <a
             href="#"
             className={styles.signInLink}
             onClick={this.handleSignInLink}
           >
-            Sign In
+            {t('login.sign_in')}
           </a>
           .
         </p>

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

@@ -7,7 +7,6 @@ import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import { Logo } from './Logo';
 import { can } from 'coral-framework/services/perms';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
 
 const CoralHeader = ({
@@ -32,7 +31,6 @@ const CoralHeader = ({
                   activeClassName={styles.active}
                 >
                   {t('configure.moderate')}
-                  <ModerationIndicator root={root} data={data} />
                 </IndexLink>
               )}
               <Link
@@ -79,13 +77,22 @@ const CoralHeader = ({
                     <MenuItem onClick={() => showShortcuts(true)}>
                       {t('configure.shortcuts')}
                     </MenuItem>
+                    <MenuItem>
+                      <a
+                        href="https://docs.coralproject.net/talk/how-talk-works/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t('configure.product_guide_link')}
+                      </a>
+                    </MenuItem>
                     <MenuItem>
                       <a
                         href="https://github.com/coralproject/talk/releases"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        View latest version
+                        {t('configure.view_last_version')}
                       </a>
                     </MenuItem>
                     <MenuItem>
@@ -94,7 +101,7 @@ const CoralHeader = ({
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        Report a bug or give feedback
+                        {t('configure.report_bug_or_feedback')}
                       </a>
                     </MenuItem>
                     {currentUser && (

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

@@ -1,10 +1,8 @@
 .indicator {
+  display: inline-block;
   background-color: #E46D59;
   border-radius: 10px;
-  position: absolute;
-  top: 50%;
   width: 7px;
   height: 7px;
-  margin-top: -4px;
   margin-left: 7px;
 }

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

@@ -0,0 +1,103 @@
+.karmaTooltip {
+  position: relative;
+  display: inline-block;
+  margin: 2px 4px 0;
+}
+
+.icon {
+  font-size: 16px;
+  color: #0D5B8F;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+
+  > i {
+    vertical-align: baseline;
+  }
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  left: -100px;
+  width: 150px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 96px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 96px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.menu ul {
+  list-style: none;
+  padding: 0;
+  
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0;
+  }
+}
+
+.label {
+  padding: 4px 5px;
+  border-radius: 3px;
+  color: #fff;
+  font-weight: 400;
+  text-align: center;
+  font-size: .9em;
+  line-height: normal;
+  letter-spacing: .4px;
+  min-width: 25px;
+  display: block;
+
+  /* &.reliable { background-color: #03AB61; } */
+  /* &.neutral { background-color: #616161; } */
+  &.unreliable { background-color: #F44336; }
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.strongItem {
+  margin-right: 3px;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}
+
+.link {
+  color: #2B7EB5;
+  text-decoration: underline;
+  display: block;
+}

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Icon } from 'coral-ui';
+import styles from './KarmaTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import t from 'coral-framework/services/i18n';
+
+const initialState = { menuVisible: false };
+
+class KarmaTooltip extends React.Component {
+  static propTypes = {
+    thresholds: PropTypes.shape({
+      reliable: PropTypes.number.isRequired,
+      unreliable: PropTypes.number.isRequired,
+    }).isRequired,
+  };
+
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({ menuVisible: !this.state.menuVisible });
+  };
+
+  hideMenu = () => {
+    this.setState({ menuVisible: false });
+  };
+
+  render() {
+    const {
+      thresholds: { unreliable },
+    } = this.props;
+    const { menuVisible } = this.state;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.karmaTooltip, 'talk-admin-karma-tooltip')}>
+          <span
+            onClick={this.toogleMenu}
+            className={cn(styles.icon, 'talk-admin-karma-tooltip-icon')}
+          >
+            <Icon name="info" />
+          </span>
+
+          {menuVisible && (
+            <div className={cn(styles.menu, 'talk-admin-karma-tooltip-menu')}>
+              <strong>{t('user_detail.user_karma_score')}</strong>
+              <ul>
+                {/* NOTE: we may display this data in the future, keeping around for that eventuality */}
+                {/* <li>
+                  <span>Reliable</span>{' '}
+                  <span className={cn(styles.label, styles.reliable)}>
+                    &ge; {reliable}
+                  </span>
+                </li>
+                <li>
+                  <span>Neutral</span>{' '}
+                  <span className={cn(styles.label, styles.neutral)}>
+                    &lt; {reliable}, &gt; {unreliable}
+                  </span>
+                </li> */}
+                <li>
+                  <span>{t('user_detail.unreliable')}</span>{' '}
+                  <span className={cn(styles.label, styles.unreliable)}>
+                    &le; {unreliable}
+                  </span>
+                </li>
+              </ul>
+              <a
+                className={styles.link}
+                href={t('user_detail.karma_docs_link')}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t('user_detail.learn_more')}
+              </a>
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+export default KarmaTooltip;

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import styles from './Login.css';
 import Layout from 'coral-admin/src/components/Layout';
 import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
 
 class LoginContainer extends Component {
   renderForm() {
@@ -19,8 +20,8 @@ class LoginContainer extends Component {
     return (
       <Layout fixedDrawer restricted={true}>
         <div className={cn(styles.layout, 'talk-admin-login')}>
-          <h1 className={styles.header}>Team sign in</h1>
-          <p className={styles.cta}>Sign in to interact with your community.</p>
+          <h1 className={styles.header}>{t('login.team_sign_in')}</h1>
+          <p className={styles.cta}>{t('login.sign_in_message')}</p>
           {this.renderForm()}
         </div>
       </Layout>

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

@@ -14,7 +14,8 @@ const RejectButton = ({ active, minimal, onClick, className, disabled }) => {
       className={cn(
         styles.root,
         { [styles.minimal]: minimal, [styles.active]: active },
-        className
+        className,
+        'talk-admin-reject-button'
       )}
       onClick={onClick}
       disabled={disabled || active}

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

@@ -0,0 +1,80 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.close {
+  display: block;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+}
+
+.closeButton {
+  font-size: 24px;
+  line-height: 14px;
+  color: #363636;
+  &:hover {
+    color: #6b6b6b;
+  }
+}
+
+.legend {
+  padding: 0;
+  font-weight: bold;
+}
+
+div.radioGroup {
+  margin-top: 6px;
+}
+
+label.radioGroup {
+
+  &:global(.is-checked) > :global(.mdl-radio__outer-circle),
+  > :global(.mdl-radio__outer-circle) {
+    border-color: #212121;
+  }
+
+  > :global(.mdl-radio__inner-circle) {
+    background: #212121;
+  }
+
+  > :global(.mdl-radio__label) {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.messageInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.cancel {
+  margin-right: 5px;
+}
+
+.perform {
+  min-width: 90px;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dialog, BareButton } from 'coral-ui';
+import styles from './RejectUsernameDialog.css';
+import cn from 'classnames';
+import { RadioGroup, Radio } from 'react-mdl';
+import Button from 'coral-ui/components/Button';
+import { username as flagReason } from 'coral-framework/graphql/flagReasons';
+import t from 'coral-framework/services/i18n';
+
+const initialState = { reason: flagReason.offensive, message: '' };
+
+class RejectUsernameDialog extends React.Component {
+  state = initialState;
+
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+
+  handleReasonChange = event => {
+    this.setState({ reason: event.target.value });
+  };
+
+  handleMessageChange = event => {
+    this.setState({ message: event.target.value });
+  };
+
+  handlePerform = () => {
+    this.props.onPerform({
+      reason: this.state.reason,
+      message: this.state.message,
+    });
+  };
+
+  render() {
+    const { open, onCancel } = this.props;
+    const { reason, message } = this.state;
+    return (
+      <Dialog
+        className={cn(styles.dialog, 'talk-admin-reject-username-dialog')}
+        id="rejectUsernameDialog"
+        onCancel={onCancel}
+        open={open}
+      >
+        <div className={styles.close}>
+          <BareButton
+            aria-label="Close"
+            onClick={onCancel}
+            className={styles.closeButton}
+          >
+            ×
+          </BareButton>
+        </div>
+        <section className="talk-admin-reject-username-dialog-section">
+          <h1 className={styles.header}>
+            {t('reject_username_dialog.title')}: {this.props.username}
+          </h1>
+          <p className={styles.description}>
+            {t('reject_username_dialog.description')}
+          </p>
+          <fieldset>
+            <legend className={styles.legend}>
+              {t('reject_username_dialog.reason')}
+            </legend>
+            <RadioGroup
+              name="reason"
+              value={reason}
+              childContainer="div"
+              onChange={this.handleReasonChange}
+              className={styles.radioGroup}
+            >
+              <Radio value={flagReason.offensive}>
+                {t('flag_reasons.username.offensive')}
+              </Radio>
+              <Radio value={flagReason.nolike}>
+                {t('flag_reasons.username.nolike')}
+              </Radio>
+              <Radio value={flagReason.impersonating}>
+                {t('flag_reasons.username.impersonating')}
+              </Radio>
+              <Radio value={flagReason.spam}>
+                {t('flag_reasons.username.spam')}
+              </Radio>
+              <Radio value={flagReason.other}>
+                {t('flag_reasons.username.other')}
+              </Radio>
+            </RadioGroup>
+            {reason === flagReason.other && (
+              <fieldset>
+                <legend className={styles.legend}>
+                  {t('reject_username_dialog.message')}
+                </legend>
+                <textarea
+                  rows={5}
+                  className={styles.messageInput}
+                  value={message}
+                  onChange={this.handleMessageChange}
+                />
+              </fieldset>
+            )}
+          </fieldset>
+          <div className={styles.buttons}>
+            <Button
+              cStyle="white"
+              className={styles.cancel}
+              onClick={onCancel}
+              raised
+            >
+              {t('reject_username_dialog.cancel')}
+            </Button>
+            <Button
+              cStyle="black"
+              className={cn(
+                styles.perform,
+                'talk-admin-reject-username-dialog-continue'
+              )}
+              onClick={this.handlePerform}
+              raised
+            >
+              {t('reject_username_dialog.reject_username')}
+            </Button>
+          </div>
+        </section>
+      </Dialog>
+    );
+  }
+}
+
+RejectUsernameDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  username: PropTypes.string,
+};
+
+export default RejectUsernameDialog;

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

@@ -4,6 +4,8 @@ import styles from './SignIn.css';
 import { Button, TextField, Alert } from 'coral-ui';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
+import t from 'coral-framework/services/i18n';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -33,48 +35,55 @@ class SignIn extends React.Component {
   render() {
     const { email, password, errorMessage, requireRecaptcha } = this.props;
     return (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
-        {errorMessage && <Alert>{errorMessage}</Alert>}
-        <TextField
-          id="email"
-          label="Email Address"
-          value={email}
-          onChange={this.handleEmailChange}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          value={password}
-          onChange={this.handlePasswordChange}
-          type="password"
-        />
-        {requireRecaptcha && (
-          <div className={styles.recaptcha}>
-            <Recaptcha
-              ref={this.handleRecaptchaRef}
-              onVerify={this.props.onRecaptchaVerify}
-            />
-          </div>
-        )}
-        <Button
-          className={cn(styles.signInButton, 'talk-admin-login-sign-in-button')}
-          type="submit"
-          cStyle="black"
-          full
-        >
-          Sign In
-        </Button>
-        <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
-          <a
-            href="#"
-            className={styles.forgotPasswordLink}
-            onClick={this.handleForgotPasswordLink}
+      <div className="talk-admin-login-sign-in">
+        <External slot="authExternalAdminSignIn" />
+        <form onSubmit={this.handleSubmit}>
+          {errorMessage && <Alert>{errorMessage}</Alert>}
+          <TextField
+            id="email"
+            label={t('login.email_address')}
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <TextField
+            id="password"
+            label={t('login.password')}
+            value={password}
+            onChange={this.handlePasswordChange}
+            type="password"
+          />
+          {requireRecaptcha && (
+            <div className={styles.recaptcha}>
+              <Recaptcha
+                ref={this.handleRecaptchaRef}
+                onVerify={this.props.onRecaptchaVerify}
+              />
+            </div>
+          )}
+          <Button
+            className={cn(
+              styles.signInButton,
+              'talk-admin-login-sign-in-button'
+            )}
+            type="submit"
+            cStyle="black"
+            full
           >
-            Request a new one.
-          </a>
-        </p>
-      </form>
+            {t('login.sign_in')}
+          </Button>
+          <p className={styles.forgotPasswordCTA}>
+            {/* TODO: translate */}
+            {t('login.forgot_password')}{' '}
+            <a
+              href="#"
+              className={styles.forgotPasswordLink}
+              onClick={this.handleForgotPasswordLink}
+            >
+              {t('login.request_passowrd')}
+            </a>
+          </p>
+        </form>
+      </div>
     );
   }
 }

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

@@ -35,44 +35,49 @@
   margin-right: 20px;
 }
 
+.karmaStat {
+  display: flex;
+}
+
 .stat:last-child {
   margin-right: 0px;
 }
 
-.statItem,
-.statReportResult {
+.statItem, .statReportResult, .statKarmaResult {
   padding: 3px 5px;
   background-color: #D8D8D8;
   border-radius: 3px;
   font-weight: 500;
-  display: block;
   font-size: 0.9em;
   line-height: normal;
   letter-spacing: 0.4px;
-  min-width: 60px;
+  min-width: 25px;
+  display: block;
 }
 
 .statResult {
   font-size: 1.5em;
   padding: 5px 0;
   display: inline-block;
+  text-align: center; 
 }
 
-.statReportResult {
+.statReportResult, .statKarmaResult {
   color: white;
   margin: 5px 0;
   font-weight: 400;
+  text-align: center;
 }
 
-.statReportResult.reliable {
-  background-color: #749C48;
+.statReportResult.reliable, .statKarmaResult.good {
+  background-color: #03AB61;
 }
 
-.statReportResult.neutral {
+.statReportResult.neutral, .statKarmaResult.neutral {
   background-color: #616161;
 }
 
-.statReportResult.unreliable {
+.statReportResult.unreliable, .statKarmaResult.bad {
   background-color: #F44336;
 }
 
@@ -143,3 +148,7 @@
   border-color: #E45241;
   color: white;
 }
+
+.userDetailItem {
+  padding: 2px 0;
+}

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

@@ -3,14 +3,18 @@ import cn from 'classnames';
 import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';
 import styles from './UserDetail.css';
-import AccountHistory from './AccountHistory';
+import UserHistory from './UserHistory';
 import { Slot } from 'coral-framework/components';
 import UserDetailCommentList from '../components/UserDetailCommentList';
+
 import {
-  getReliability,
   isSuspended,
+  isUsernameRejected,
+  isUsernameChanged,
   isBanned,
+  getKarma,
 } from 'coral-framework/utils/user';
+
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import {
@@ -25,29 +29,29 @@ import {
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import UserInfoTooltip from './UserInfoTooltip';
+import KarmaTooltip from './KarmaTooltip';
 import t from 'coral-framework/services/i18n';
+import { humanizeNumber } from 'coral-framework/helpers/numbers';
+
+const filterOutLocalProfiles = ({ provider }) => provider !== 'local';
+
+/**
+ * getUserStatusArray
+ * returns an array of active status(es)
+ * i.e if suspension is active, it returns suspension
+ */
+
+function getUserStatusArray(user) {
+  const statusMap = {
+    suspended: isSuspended,
+    banned: isBanned,
+    usernameRejected: isUsernameRejected,
+    usernameChanged: isUsernameChanged,
+  };
+  return Object.keys(statusMap).filter(k => statusMap[k](user));
+}
 
 class UserDetail extends React.Component {
-  rejectThenReload = async info => {
-    await this.props.rejectComment(info);
-    this.props.data.refetch();
-  };
-
-  acceptThenReload = async info => {
-    await this.props.acceptComment(info);
-    this.props.data.refetch();
-  };
-
-  bulkAcceptThenReload = async () => {
-    await this.props.bulkAccept();
-    this.props.data.refetch();
-  };
-
-  bulkRejectThenReload = async () => {
-    await this.props.bulkReject();
-    this.props.data.refetch();
-  };
-
   changeTab = tab => {
     this.props.changeTab(tab);
   };
@@ -64,6 +68,12 @@ class UserDetail extends React.Component {
       username: this.props.root.user.username,
     });
 
+  showRejectUsernameDialog = () =>
+    this.props.showRejectUsernameDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
+
   renderLoading() {
     return (
       <ClickOutside onClickOutside={this.props.hideUserDetail}>
@@ -84,22 +94,56 @@ class UserDetail extends React.Component {
     );
   }
 
-  getActionMenuLabel() {
-    const { root: { user } } = this.props;
+  getActionMenuLabel(user) {
+    const userStatusArr = getUserStatusArray(user);
+    const count = userStatusArr.length;
 
-    if (isBanned(user)) {
-      return 'Banned';
-    } else if (isSuspended(user)) {
-      return 'Suspended';
+    if (count > 1) {
+      return `Status (${count})`;
+    } else {
+      const activeStatus = userStatusArr[0];
+      switch (activeStatus) {
+        case 'suspended':
+          return t('user_detail.suspended');
+        case 'banned':
+          return t('user_detail.banned');
+        case 'usernameRejected':
+          return (
+            <span>
+              {t('user_detail.username')}
+              {` `}
+              <Icon name="cancel" />
+            </span>
+          );
+        case 'usernameChanged':
+          return (
+            <span>
+              {t('user_detail.username')}
+              {` `}
+              <Icon name="access_time" />
+            </span>
+          );
+        default:
+          return activeStatus;
+      }
     }
-
-    return '';
   }
 
+  goToReportedUsernames = () => {
+    const { router } = this.props;
+    router.push('/admin/community/flagged');
+  };
+
   renderLoaded() {
     const {
       root,
-      root: { me, user, totalComments, rejectedComments },
+      root: {
+        me,
+        user,
+        totalComments,
+        rejectedComments,
+        settings: { karmaThresholds },
+      },
       activeTab,
       selectedCommentIds,
       toggleSelect,
@@ -110,10 +154,14 @@ class UserDetail extends React.Component {
       unbanUser,
       unsuspendUser,
       modal,
+      acceptComment,
+      rejectComment,
+      bulkAccept,
+      bulkReject,
     } = this.props;
 
     // if totalComments is 0, you're dividing by zero
-    let rejectedPercent = rejectedComments / totalComments * 100;
+    let rejectedPercent = (rejectedComments / totalComments) * 100;
 
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
       rejectedPercent = 0;
@@ -121,6 +169,8 @@ class UserDetail extends React.Component {
 
     const banned = isBanned(user);
     const suspended = isSuspended(user);
+    const usernameRejected = isUsernameRejected(user);
+    const usernameChanged = isUsernameChanged(user);
 
     const slotPassthrough = {
       root,
@@ -153,7 +203,7 @@ class UserDetail extends React.Component {
                 },
                 'talk-admin-user-detail-actions-button'
               )}
-              label={this.getActionMenuLabel()}
+              label={this.getActionMenuLabel(user)}
             >
               {suspended ? (
                 <ActionsMenuItem onClick={() => unsuspendUser({ id: user.id })}>
@@ -180,6 +230,27 @@ class UserDetail extends React.Component {
                   {t('user_detail.ban')}
                 </ActionsMenuItem>
               )}
+
+              {usernameChanged && (
+                <ActionsMenuItem onClick={this.goToReportedUsernames}>
+                  {t('user_detail.username_needs_approval')}
+                  {` `}
+                  <Icon name="launch" />
+                </ActionsMenuItem>
+              )}
+
+              {usernameRejected && !usernameChanged ? (
+                <ActionsMenuItem disabled>
+                  {t('user_detail.username_rejected')}
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  onClick={this.showRejectUsernameDialog}
+                  disabled={me.id === user.id || usernameChanged}
+                >
+                  {t('user_detail.reject_username')}
+                </ActionsMenuItem>
+              )}
             </ActionsMenu>
           )}
 
@@ -193,7 +264,19 @@ class UserDetail extends React.Component {
 
           <div>
             <ul className={styles.userDetailList}>
-              <li>
+              <li className={styles.userDetailItem}>
+                <Icon name="perm_identity" />
+                <span className={styles.userDetailItem}>
+                  {t('user_detail.id')}:
+                </span>
+                {user.id}{' '}
+                <ButtonCopyToClipboard
+                  className={styles.copyButton}
+                  icon="content_copy"
+                  copyText={user.id}
+                />
+              </li>
+              <li className={styles.userDetailItem}>
                 <Icon name="assignment_ind" />
                 <span className={styles.userDetailItem}>
                   {t('user_detail.member_since')}:
@@ -201,20 +284,35 @@ class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({ id }) => (
-                <li key={id}>
-                  <Icon name="email" />
-                  <span className={styles.userDetailItem}>
-                    {t('user_detail.email')}:
-                  </span>
-                  {id}{' '}
-                  <ButtonCopyToClipboard
-                    className={styles.copyButton}
-                    icon="content_copy"
-                    copyText={id}
-                  />
-                </li>
-              ))}
+              <li className={styles.userDetailItem}>
+                <Icon name="email" />
+                <span className={styles.userDetailItem}>
+                  {t('user_detail.email')}:
+                </span>
+                {user.email}{' '}
+                <ButtonCopyToClipboard
+                  className={styles.copyButton}
+                  icon="content_copy"
+                  copyText={user.email}
+                />
+              </li>
+
+              {user.profiles
+                .filter(filterOutLocalProfiles)
+                .map(({ provider, id }) => (
+                  <li key={id} className={styles.userDetailItem}>
+                    <Icon name="device_hub" />
+                    <span className={styles.userDetailItem}>
+                      {capitalize(provider)} {t('user_detail.id')}:
+                    </span>
+                    {id}{' '}
+                    <ButtonCopyToClipboard
+                      className={styles.copyButton}
+                      icon="content_copy"
+                      copyText={id}
+                    />
+                  </li>
+                ))}
             </ul>
 
             <ul className={styles.stats}>
@@ -232,18 +330,21 @@ class UserDetail extends React.Component {
                   {rejectedPercent.toFixed(1)}%
                 </span>
               </li>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>
-                  {t('user_detail.reports')}
-                </span>
-                <span
-                  className={cn(
-                    styles.statReportResult,
-                    styles[getReliability(user.reliable.flagger)]
-                  )}
-                >
-                  {capitalize(getReliability(user.reliable.flagger))}
-                </span>
+              <li className={cn(styles.stat, styles.karmaStat)}>
+                <div>
+                  <span className={styles.statItem}>
+                    {t('user_detail.karma')}
+                  </span>
+                  <span
+                    className={cn(
+                      styles.statKarmaResult,
+                      styles[getKarma(user.reliable.commenter)]
+                    )}
+                  >
+                    {humanizeNumber(user.reliable.commenterKarma)}
+                  </span>
+                </div>
+                <KarmaTooltip thresholds={karmaThresholds.comment} />
               </li>
             </ul>
           </div>
@@ -286,7 +387,7 @@ class UserDetail extends React.Component {
                 'talk-admin-user-detail-history-tab'
               )}
             >
-              {t('user_detail.account_history')}
+              {t('user_detail.user_history')}
             </Tab>
           </TabBar>
 
@@ -304,12 +405,12 @@ class UserDetail extends React.Component {
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
-                acceptComment={this.acceptThenReload}
-                rejectComment={this.rejectThenReload}
+                acceptComment={acceptComment}
+                rejectComment={rejectComment}
                 selectedCommentIds={selectedCommentIds}
                 toggleSelectAll={toggleSelectAll}
-                bulkAcceptThenReload={this.bulkAcceptThenReload}
-                bulkRejectThenReload={this.bulkRejectThenReload}
+                bulkAcceptThenReload={bulkAccept}
+                bulkRejectThenReload={bulkReject}
               />
             </TabPane>
             <TabPane
@@ -322,19 +423,19 @@ class UserDetail extends React.Component {
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
-                acceptComment={this.acceptThenReload}
-                rejectComment={this.rejectThenReload}
+                acceptComment={acceptComment}
+                rejectComment={rejectComment}
                 selectedCommentIds={selectedCommentIds}
                 toggleSelectAll={toggleSelectAll}
-                bulkAcceptThenReload={this.bulkAcceptThenReload}
-                bulkRejectThenReload={this.bulkRejectThenReload}
+                bulkAcceptThenReload={bulkAccept}
+                bulkRejectThenReload={bulkReject}
               />
             </TabPane>
             <TabPane
               tabId={'history'}
               className={'talk-admin-user-detail-history-tab-pane'}
             >
-              <AccountHistory user={user} />
+              <UserHistory user={user} />
             </TabPane>
           </TabContent>
         </Drawer>
@@ -355,6 +456,7 @@ class UserDetail extends React.Component {
 }
 
 UserDetail.propTypes = {
+  router: PropTypes.object.isRequired,
   userId: PropTypes.string.isRequired,
   hideUserDetail: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
@@ -371,11 +473,13 @@ UserDetail.propTypes = {
   selectedCommentIds: PropTypes.array.isRequired,
   viewUserDetail: PropTypes.any.isRequired,
   loadMore: PropTypes.any.isRequired,
+  showRejectUsernameDialog: PropTypes.func,
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
   modal: PropTypes.bool,
+  rejectUsername: PropTypes.func.isRequired,
 };
 
 export default UserDetail;

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

@@ -12,6 +12,7 @@ import CommentAnimatedEdit from './CommentAnimatedEdit';
 import CommentLabels from '../containers/CommentLabels';
 import ApproveButton from './ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
+import CommentDeletedTombstone from './CommentDeletedTombstone';
 
 import t, { timeago } from 'coral-framework/services/i18n';
 
@@ -43,6 +44,19 @@ class UserDetailComment extends React.Component {
       body: comment.body,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(className, styles.root, {
+            [styles.rootSelected]: selected,
+          })}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -100,6 +114,7 @@ class UserDetailComment extends React.Component {
                   className={styles.external}
                   href={`${comment.asset.url}?commentId=${comment.id}`}
                   target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}
                 </a>
@@ -152,7 +167,7 @@ UserDetailComment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
+    body: PropTypes.string,
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     asset: PropTypes.shape({

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

@@ -10,7 +10,10 @@ import ApproveButton from './ApproveButton';
 const UserDetailCommentList = props => {
   const {
     root,
-    root: { user, comments: { nodes, hasNextPage } },
+    root: {
+      user,
+      comments: { nodes, hasNextPage },
+    },
     acceptComment,
     rejectComment,
     selectedCommentIds,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { murmur3 } from 'murmurhash-js';
-import styles from './AccountHistory.css';
+import styles from './UserHistory.css';
 import cn from 'classnames';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
@@ -43,15 +43,15 @@ const readableDuration = (startDate, endDate) => {
 const buildActionResponse = (typename, created_at, until, status) => {
   switch (typename) {
     case 'UsernameStatusHistory':
-      return t('account_history.username_status', status);
+      return t('user_history.username_status', status);
     case 'BannedStatusHistory':
       return status
-        ? t('account_history.user_banned')
-        : t('account_history.ban_removed');
+        ? t('user_history.user_banned')
+        : t('user_history.ban_removed');
     case 'SuspensionStatusHistory':
       return until
-        ? t('account_history.suspended', readableDuration(created_at, until))
-        : t('account_history.suspension_removed');
+        ? t('user_history.suspended', readableDuration(created_at, until))
+        : t('user_history.suspension_removed');
     default:
       return '-';
   }
@@ -62,43 +62,41 @@ const getModerationValue = assignedBy =>
     assignedBy.username
   ) : (
     <span>
-      <Icon name="computer" /> {t('account_history.system')}
+      <Icon name="computer" /> {t('user_history.system')}
     </span>
   );
 
-class AccountHistory extends React.Component {
+class UserHistory extends React.Component {
   render() {
     const { user } = this.props;
     const userHistory = buildUserHistory(user.state);
     return (
       <div>
-        <div className={cn(styles.table, 'talk-admin-account-history')}>
+        <div className={cn(styles.table, 'talk-admin-user-history')}>
           <div
             className={cn(
               styles.headerRow,
-              'talk-admin-account-history-header-row'
+              'talk-admin-user-history-header-row'
             )}
           >
+            <div className={styles.headerRowItem}>{t('user_history.date')}</div>
             <div className={styles.headerRowItem}>
-              {t('account_history.date')}
+              {t('user_history.action')}
             </div>
             <div className={styles.headerRowItem}>
-              {t('account_history.action')}
-            </div>
-            <div className={styles.headerRowItem}>
-              {t('account_history.taken_by')}
+              {t('user_history.taken_by')}
             </div>
           </div>
           {userHistory.map(
             ({ __typename, created_at, assigned_by, until, status }) => (
               <div
-                className={cn(styles.row, 'talk-admin-account-history-row')}
+                className={cn(styles.row, 'talk-admin-user-history-row')}
                 key={`${__typename}_${murmur3(created_at)}`}
               >
                 <div
                   className={cn(
                     styles.item,
-                    'talk-admin-account-history-row-date'
+                    'talk-admin-user-history-row-date'
                   )}
                 >
                   {moment(new Date(created_at)).format('MMM DD, YYYY')}
@@ -107,7 +105,7 @@ class AccountHistory extends React.Component {
                   className={cn(
                     styles.item,
                     styles.action,
-                    'talk-admin-account-history-row-status'
+                    'talk-admin-user-history-row-status'
                   )}
                 >
                   {buildActionResponse(__typename, created_at, until, status)}
@@ -116,7 +114,7 @@ class AccountHistory extends React.Component {
                   className={cn(
                     styles.item,
                     styles.username,
-                    'talk-admin-account-history-row-assigned-by'
+                    'talk-admin-user-history-row-assigned-by'
                   )}
                 >
                   {getModerationValue(assigned_by)}
@@ -130,8 +128,8 @@ class AccountHistory extends React.Component {
   }
 }
 
-AccountHistory.propTypes = {
+UserHistory.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default AccountHistory;
+export default UserHistory;

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

@@ -0,0 +1,2 @@
+export const SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
+export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';

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

@@ -12,7 +12,7 @@ import { compose } from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 
 class BanUserDialogContainer extends Component {
-  banUser = async () => {
+  banUser = async ({ message }) => {
     const {
       userId,
       commentId,
@@ -21,7 +21,7 @@ class BanUserDialogContainer extends Component {
       setCommentStatus,
       hideBanUserDialog,
     } = this.props;
-    await banUser({ id: userId, message: '' });
+    await banUser({ id: userId, message });
     hideBanUserDialog();
     if (commentId && commentStatus && commentStatus !== 'REJECTED') {
       await setCommentStatus({ commentId, status: 'REJECTED' });
@@ -77,7 +77,10 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withBanUser,
   withSetCommentStatus
 )(BanUserDialogContainer);

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

@@ -2,21 +2,20 @@ import { gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/Header';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
+// TODO: eventually we will readd modqueue counts
+// import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import { getDefinitionName } from 'coral-framework/utils';
 
 export default withQuery(
   gql`
-    query TalkAdmin_Header($nullID: ID) {
-      ...${getDefinitionName(ModerationIndicator.fragments.root)}
+    query TalkAdmin_Header {
       ...${getDefinitionName(CommunityIndicator.fragments.root)}
     }
-    ${ModerationIndicator.fragments.root}
     ${CommunityIndicator.fragments.root}
   `,
   {
     options: {
-      variables: { nullID: null },
+      // variables: { nullID: null },
     },
   }
 )(Header);

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

@@ -6,6 +6,7 @@ import Login from '../containers/Login';
 import { FullLoading } from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
+import RejectUsernameDialog from './RejectUsernameDialog';
 import { toggleModal as toggleShortcutModal } from '../actions/moderation';
 import { logout } from 'coral-framework/actions/auth';
 import { can } from 'coral-framework/services/perms';
@@ -41,6 +42,7 @@ class LayoutContainer extends React.Component {
           >
             <BanUserDialog />
             <SuspendUserDialog />
+            <RejectUsernameDialog />
             <UserDetail />
             {children}
           </Layout>
@@ -79,4 +81,7 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LayoutContainer);

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

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import RejectUsernameDialog from '../components/RejectUsernameDialog';
+import { hideRejectUsernameDialog } from '../actions/rejectUsernameDialog';
+import {
+  withRejectUsername,
+  withPostFlag,
+} from 'coral-framework/graphql/mutations';
+import { notify } from 'coral-framework/actions/notification';
+import { compose } from 'react-apollo';
+import { getErrorMessages } from 'coral-framework/utils';
+
+class RejectUsernameDialogContainer extends Component {
+  rejectUsername = async ({ reason, message }) => {
+    const {
+      postFlag,
+      rejectUsername,
+      hideRejectUsernameDialog,
+      userId,
+    } = this.props;
+
+    // First flag the user.
+    try {
+      await postFlag({
+        item_id: userId,
+        item_type: 'USERS',
+        reason,
+        message,
+      });
+    } catch (error) {
+      // Ignore already exists error, otherwise show error.
+      if (
+        error.errors &&
+        (error.errors.length !== 1 ||
+          error.errors[0].translation_key !== 'ALREADY_EXISTS')
+      ) {
+        notify('error', getErrorMessages(error));
+      }
+    }
+
+    await rejectUsername(userId);
+    hideRejectUsernameDialog();
+  };
+
+  render() {
+    return (
+      <RejectUsernameDialog
+        open={this.props.open}
+        onPerform={this.rejectUsername}
+        onCancel={this.props.hideRejectUsernameDialog}
+        username={this.props.username}
+      />
+    );
+  }
+}
+
+RejectUsernameDialogContainer.propTypes = {
+  rejectUsername: PropTypes.func.isRequired,
+  hideRejectUsernameDialog: PropTypes.func,
+  open: PropTypes.bool,
+  userId: PropTypes.string,
+  username: PropTypes.string,
+};
+
+const mapStateToProps = ({
+  rejectUsernameDialog: { open, userId, username },
+}) => ({
+  open,
+  userId,
+  username,
+});
+
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      hideRejectUsernameDialog,
+      notify,
+    },
+    dispatch
+  ),
+});
+
+export default compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
+  withRejectUsername,
+  withPostFlag({ notifyOnError: false })
+)(RejectUsernameDialogContainer);

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withSignIn } from 'coral-framework/hocs';
+import { withSignIn, withPopupAuthHandler } from 'coral-framework/hocs';
 import { compose } from 'recompose';
 import SignIn from '../components/SignIn';
 
@@ -55,4 +55,7 @@ SignInContainer.propTypes = {
   requireRecaptcha: PropTypes.bool.isRequired,
 };
 
-export default compose(withSignIn)(SignInContainer);
+export default compose(
+  withSignIn,
+  withPopupAuthHandler
+)(SignInContainer);

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

@@ -86,7 +86,10 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withSuspendUser,
   withSetCommentStatus,
   withOrganizationName

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
+import { withRouter } from 'react-router';
 import {
   getDefinitionName,
   getSlotFragmentSpreads,
@@ -21,11 +22,14 @@ import {
   withSetCommentStatus,
   withUnbanUser,
   withUnsuspendUser,
+  withRejectUsername,
+  withPostFlag,
 } from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import { showBanUserDialog } from 'actions/banUserDialog';
 import { showSuspendUserDialog } from 'actions/suspendUserDialog';
+import { showRejectUsernameDialog } from 'actions/rejectUsernameDialog';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
@@ -131,6 +135,7 @@ class UserDetailContainer extends React.Component {
         loading={loading}
         error={this.props.data && this.props.data.error}
         loadMore={this.loadMore}
+        rejectUsername={this.props.rejectUsername}
         {...this.props}
       />
     );
@@ -148,6 +153,8 @@ UserDetailContainer.propTypes = {
   selectedCommentIds: PropTypes.array,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  rejectUsername: PropTypes.func.isRequired,
+  userId: PropTypes.string,
 };
 
 const LOAD_MORE_QUERY = gql`
@@ -178,12 +185,14 @@ export const withUserDetailQuery = withQuery(
       id
       username
       created_at
+      email
       profiles {
         id
         provider
       }
       reliable {
-        flagger
+        commenter
+        commenterKarma
       }
       state {
         status {
@@ -224,6 +233,14 @@ export const withUserDetailQuery = withQuery(
       }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
+    settings {
+      karmaThresholds {
+        comment {
+          reliable
+          unreliable
+        }
+      }
+    }
     me {
       id
     }
@@ -245,7 +262,6 @@ export const withUserDetailQuery = withQuery(
     options: ({ userId, statuses }) => {
       return {
         variables: { author_id: userId, statuses },
-        fetchPolicy: 'network-only',
       };
     },
     skip: ownProps => !ownProps.userId,
@@ -265,6 +281,7 @@ const mapDispatchToProps = dispatch => ({
     {
       showBanUserDialog,
       showSuspendUserDialog,
+      showRejectUsernameDialog,
       changeTab,
       clearUserDetailSelections,
       toggleSelectCommentInUserDetail,
@@ -277,9 +294,15 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withUserDetailQuery,
   withSetCommentStatus,
   withUnbanUser,
-  withUnsuspendUser
+  withUnsuspendUser,
+  withRejectUsername,
+  withPostFlag,
+  withRouter
 )(UserDetailContainer);

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

@@ -24,6 +24,25 @@ const userRoleFragment = gql`
   }
 `;
 
+/**
+ * calculateReliability will determine the reliability of a karma score based on
+ * the settings for the karma type.
+ *
+ * @param {Number} karma - the current karma value/score for the given user
+ * @param {Object} thresholds - the karma thresholds to base the karma computation on
+ */
+const calculateReliability = (karma, { reliable, unreliable }) => {
+  if (karma >= reliable) {
+    return true;
+  }
+
+  if (karma <= unreliable) {
+    return false;
+  }
+
+  return null;
+};
+
 export default {
   mutations: {
     SetUserRole: ({ variables: { id, role } }) => ({
@@ -47,7 +66,11 @@ export default {
         });
       },
     }),
-    SuspendUser: ({ variables: { input: { id, until } } }) => ({
+    SuspendUser: ({
+      variables: {
+        input: { id, until },
+      },
+    }) => ({
       update: proxy => {
         const fragmentId = `User_${id}`;
 
@@ -73,7 +96,11 @@ export default {
         });
       },
     }),
-    UnsuspendUser: ({ variables: { input: { id } } }) => ({
+    UnsuspendUser: ({
+      variables: {
+        input: { id },
+      },
+    }) => ({
       update: proxy => {
         const fragmentId = `User_${id}`;
         const data = proxy.readFragment({
@@ -98,7 +125,11 @@ export default {
         });
       },
     }),
-    BanUser: ({ variables: { input: { id } } }) => ({
+    BanUser: ({
+      variables: {
+        input: { id },
+      },
+    }) => ({
       update: proxy => {
         const fragmentId = `User_${id}`;
         const data = proxy.readFragment({
@@ -123,7 +154,11 @@ export default {
         });
       },
     }),
-    UnbanUser: ({ variables: { input: { id } } }) => ({
+    UnbanUser: ({
+      variables: {
+        input: { id },
+      },
+    }) => ({
       update: proxy => {
         const fragmentId = `User_${id}`;
         const data = proxy.readFragment({
@@ -156,7 +191,9 @@ export default {
           }
           const updated = update(prev, {
             users: {
-              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== id),
+              },
             },
           });
           return updated;
@@ -173,6 +210,12 @@ export default {
       },
       updateQueries: {
         TalkAdmin_Community_FlaggedAccounts: (prev, { mutationResult }) => {
+          // No need to update, when user was not in the flagged users queue.
+          // TODO: this should be more generic, e.g. looking at the history.
+          if (!prev.flaggedUsers.nodes.find(node => node.id === id)) {
+            return prev;
+          }
+
           const decrement = {
             flaggedUsernamesCount: { $apply: count => count - 1 },
           };
@@ -185,41 +228,14 @@ export default {
           const updated = update(prev, {
             ...decrement,
             flaggedUsers: {
-              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== id),
+              },
             },
           });
           return updated;
         },
       },
-      update: proxy => {
-        proxy.writeFragment({
-          fragment: gql`
-            fragment Talk_ApproveUsername on User {
-              state {
-                status {
-                  username {
-                    status
-                  }
-                }
-              }
-            }
-          `,
-          id: `User_${id}`,
-          data: {
-            __typename: 'User',
-            state: {
-              __typename: 'UserState',
-              status: {
-                __typename: 'UserStatus',
-                username: {
-                  __typename: 'UsernameStatus',
-                  status: 'APPROVED',
-                },
-              },
-            },
-          },
-        });
-      },
     }),
     RejectUsername: ({ variables: { id } }) => ({
       optimisticResponse: {
@@ -231,6 +247,12 @@ export default {
       },
       updateQueries: {
         TalkAdmin_Community_FlaggedAccounts: (prev, { mutationResult }) => {
+          // No need to update, when user was not in the flagged users queue.
+          // TODO: this should be more generic, e.g. looking at the history.
+          if (!prev.flaggedUsers.nodes.find(node => node.id === id)) {
+            return prev;
+          }
+
           const decrement = {
             flaggedUsernamesCount: { $apply: count => count - 1 },
           };
@@ -251,35 +273,6 @@ export default {
           return updated;
         },
       },
-      update: proxy => {
-        proxy.writeFragment({
-          fragment: gql`
-            fragment Talk_RejectUsername on User {
-              state {
-                status {
-                  username {
-                    status
-                  }
-                }
-              }
-            }
-          `,
-          id: `User_${id}`,
-          data: {
-            __typename: 'User',
-            state: {
-              __typename: 'UserState',
-              status: {
-                __typename: 'UserStatus',
-                username: {
-                  __typename: 'UsernameStatus',
-                  status: 'REJECTED',
-                },
-              },
-            },
-          },
-        });
-      },
     }),
     UpdateSettings: ({ variables: { input } }) => ({
       updateQueries: {
@@ -291,5 +284,62 @@ export default {
         },
       },
     }),
+    SetCommentStatus: ({ variables: { status } }) => ({
+      updateQueries: {
+        CoralAdmin_UserDetail: prev => {
+          const increment = {
+            user: {
+              reliable: {
+                commenter: {
+                  $set: calculateReliability(
+                    prev.user.reliable.commenterKarma - 1,
+                    prev.settings.karmaThresholds.comment
+                  ),
+                },
+                commenterKarma: {
+                  $apply: count => count - 1,
+                },
+              },
+            },
+            rejectedComments: {
+              $apply: count => (count < prev.totalComments ? count + 1 : count),
+            },
+          };
+
+          const decrement = {
+            user: {
+              reliable: {
+                commenter: {
+                  $set: calculateReliability(
+                    prev.user.reliable.commenterKarma + 1,
+                    prev.settings.karmaThresholds.comment
+                  ),
+                },
+                commenterKarma: {
+                  $apply: count => count + 1,
+                },
+              },
+            },
+            rejectedComments: {
+              $apply: count => (count > 0 ? count - 1 : 0),
+            },
+          };
+
+          // If rejected then increment rejectedComments by one
+          if (status === 'REJECTED') {
+            const updated = update(prev, increment);
+            return updated;
+          }
+
+          // If approved then decrement rejectedComments by one
+          if (status === 'ACCEPTED') {
+            const updated = update(prev, decrement);
+            return updated;
+          }
+
+          return prev;
+        },
+      },
+    }),
   },
 };

client/coral-admin/src/index.js

@@ -15,7 +15,8 @@ import { hideShortcutsNote } from './actions/moderation';
 smoothscroll.polyfill();
 
 function init({ store, localStorage }) {
-  if (localStorage && localStorage.getItem('coral:shortcutsNote') === 'hide') {
+  const shouldHide = localStorage.getItem('coral:shortcutsNote') === 'hide';
+  if (shouldHide) {
     store.dispatch(hideShortcutsNote());
   }
 }

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

@@ -5,10 +5,12 @@ import moderation from './moderation';
 import install from './install';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
+import rejectUsernameDialog from './rejectUsernameDialog';
 import userDetail from './userDetail';
 import ui from './ui';
 
 export default {
+  rejectUsernameDialog,
   banUserDialog,
   configure,
   suspendUserDialog,

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

@@ -5,6 +5,7 @@ const initialState = {
   isLoading: false,
   data: {
     settings: {
+      organizationContactEmail: '',
       organizationName: '',
       domains: {
         whitelist: [],
@@ -19,6 +20,7 @@ const initialState = {
   },
   errors: {
     organizationName: '',
+    organizationContactEmail: '',
     username: '',
     email: '',
     password: '',

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

@@ -0,0 +1,29 @@
+import {
+  SHOW_REJECT_USERNAME_DIALOG,
+  HIDE_REJECT_USERNAME_DIALOG,
+} from '../constants/rejectUsernameDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+};
+
+export default function rejectUsernameDialog(state = initialState, action) {
+  switch (action.type) {
+    case SHOW_REJECT_USERNAME_DIALOG:
+      return {
+        ...state,
+        open: true,
+        userId: action.userId,
+        username: action.username,
+      };
+    case HIDE_REJECT_USERNAME_DIALOG:
+      return {
+        ...state,
+        open: false,
+      };
+    default:
+      return state;
+  }
+}

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

@@ -133,6 +133,7 @@ th.header:nth-child(2), th.header:nth-child(3) {
 
 .roleDropdown {
   width: 150px;
+  text-align: left;
 }
 
 .roleOption {

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

@@ -130,7 +130,9 @@ class People extends React.Component {
                             {user.username}
                           </button>
                           <span className={styles.email}>
-                            {user.profiles.map(({ id }) => id)}
+                            {user.email
+                              ? user.email
+                              : user.profiles.map(p => p.id).join(', ')}
                           </span>
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
@@ -200,7 +202,7 @@ class People extends React.Component {
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
                           <Dropdown
-                            className={cn(
+                            toggleClassName={cn(
                               'talk-admin-community-people-dd-role',
                               styles.roleDropdown
                             )}

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

@@ -71,7 +71,7 @@ class RejectUsernameDialog extends Component {
       <Dialog
         className={cn(
           styles.suspendDialog,
-          'talk-admin-reject-username-dialog'
+          'talk-admin-reject-reported-username-dialog'
         )}
         id="rejectUsernameDialog"
         open={open}
@@ -85,7 +85,7 @@ class RejectUsernameDialog extends Component {
         <div
           className={cn(
             styles.container,
-            `talk-admin-reject-username-dialog-step-${stage}`
+            `talk-admin-reject-reported-username-dialog-step-${stage}`
           )}
         >
           <div className={styles.description}>
@@ -101,7 +101,7 @@ class RejectUsernameDialog extends Component {
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
-                      className={cn(styles.emailInput, 'talk-admin-reject-username-dialog-suspension-message')}
+                      className={cn(styles.emailInput, 'talk-admin-reject-reported-username-dialog-suspension-message')}
                       value={this.state.email}
                       onChange={this.onEmailChange}/>
                   </div>
@@ -110,7 +110,7 @@ class RejectUsernameDialog extends Component {
           <div
             className={cn(
               styles.modalButtons,
-              'talk-admin-reject-username-dialog-buttons'
+              'talk-admin-reject-reported-username-dialog-buttons'
             )}
           >
             {Object.keys(stages[stage].options).map((key, i) => (
@@ -118,7 +118,7 @@ class RejectUsernameDialog extends Component {
                 key={i}
                 className={cn(
                   'talk-admin-username-dialog-button',
-                  `talk-admin-reject-username-dialog-button-${key}`
+                  `talk-admin-reject-reported-username-dialog-button-${key}`
                 )}
                 onClick={this.onActionClick(stage, i)}
               >

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

@@ -46,7 +46,11 @@ class FlaggedAccountsContainer extends Component {
         document: USERNAME_FLAGGED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameFlagged: user } } }
+          {
+            subscriptionData: {
+              data: { usernameFlagged: user },
+            },
+          }
         ) => {
           return handleFlaggedAccountsChange(prev, user, () => {
             const msg = t(
@@ -62,7 +66,11 @@ class FlaggedAccountsContainer extends Component {
         document: USERNAME_APPROVED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameApproved: user } } }
+          {
+            subscriptionData: {
+              data: { usernameApproved: user },
+            },
+          }
         ) => {
           return handleFlaggedAccountsChange(prev, user, () => {
             const msg = t(
@@ -78,7 +86,11 @@ class FlaggedAccountsContainer extends Component {
         document: USERNAME_REJECTED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameRejected: user } } }
+          {
+            subscriptionData: {
+              data: { usernameRejected: user },
+            },
+          }
         ) => {
           return handleFlaggedAccountsChange(prev, user, () => {
             const msg = t(
@@ -96,7 +108,9 @@ class FlaggedAccountsContainer extends Component {
           prev,
           {
             subscriptionData: {
-              data: { usernameChanged: { previousUsername, user } },
+              data: {
+                usernameChanged: { previousUsername, user },
+              },
             },
           }
         ) => {
@@ -297,7 +311,10 @@ const mapDispatchToProps = dispatch =>
   );
 
 export default compose(
-  connect(null, mapDispatchToProps),
+  connect(
+    null,
+    mapDispatchToProps
+  ),
   withApproveUsername,
   withQuery(
     gql`

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

@@ -15,7 +15,11 @@ class IndicatorContainer extends Component {
         document: USERNAME_FLAGGED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameFlagged: user } } }
+          {
+            subscriptionData: {
+              data: { usernameFlagged: user },
+            },
+          }
         ) => {
           return handleIndicatorChange(prev, user);
         },
@@ -24,7 +28,11 @@ class IndicatorContainer extends Component {
         document: USERNAME_APPROVED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameApproved: user } } }
+          {
+            subscriptionData: {
+              data: { usernameApproved: user },
+            },
+          }
         ) => {
           return handleIndicatorChange(prev, user);
         },
@@ -33,7 +41,11 @@ class IndicatorContainer extends Component {
         document: USERNAME_REJECTED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameRejected: user } } }
+          {
+            subscriptionData: {
+              data: { usernameRejected: user },
+            },
+          }
         ) => {
           return handleIndicatorChange(prev, user);
         },
@@ -42,7 +54,13 @@ class IndicatorContainer extends Component {
         document: USERNAME_CHANGED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { usernameChanged: { user } } } }
+          {
+            subscriptionData: {
+              data: {
+                usernameChanged: { user },
+              },
+            },
+          }
         ) => {
           return handleIndicatorChange(prev, user);
         },
@@ -98,9 +116,15 @@ const fields = `
     status {
       username {
         status
+        history {
+          status
+        }
       }
     }
   }
+  action_summaries {
+    count
+  }
 `;
 
 const USERNAME_FLAGGED_SUBSCRIPTION = gql`

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

@@ -200,7 +200,10 @@ const SEARCH_QUERY = gql`
 `;
 
 export default compose(
-  connect(null, mapDispatchToProps),
+  connect(
+    null,
+    mapDispatchToProps
+  ),
   withSetUserRole,
   withUnsuspendUser,
   withUnbanUser,

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

@@ -19,6 +19,9 @@ const mapDispatchToProps = dispatch =>
   );
 
 export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withRejectUsername
 )(RejectUsernameDialog);

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

@@ -106,6 +106,23 @@ export function handleFlaggedAccountsChange(root, user, notify) {
   }
 }
 
+export const wasUsernameReported = user => {
+  const previousStatus =
+    user.state.status.username.history[
+      user.state.status.username.history.length - 2
+    ];
+
+  // Check for correct previous status
+  if (!['SET', 'CHANGES'].includes(previousStatus)) {
+    return false;
+  }
+  // Check for flags
+  if (user.action_summaries.every(as => as.count === 0)) {
+    return false;
+  }
+  return true;
+};
+
 /**
  * Track indicator status
  * @param  {Object}   root             current state of the store
@@ -119,7 +136,9 @@ export function handleIndicatorChange(root, user) {
       return incrementFlaggedUserCount(root);
     case 'APPROVED':
     case 'REJECTED':
-      return decrementFlaggedUserCount(root);
+      if (wasUsernameReported(user)) {
+        return decrementFlaggedUserCount(root);
+      }
     default:
   }
 }

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

@@ -8,7 +8,14 @@ import SaveChangesDialog from './SaveChangesDialog';
 
 class Configure extends React.Component {
   render() {
-    const { canSave, currentUser, root, savePending, settings } = this.props;
+    const {
+      canSave,
+      currentUser,
+      root,
+      savePending,
+      settings,
+      clearPending,
+    } = this.props;
 
     if (!can(currentUser, 'UPDATE_CONFIG')) {
       return <p>{t('configure.access_message')}</p>;
@@ -17,6 +24,9 @@ class Configure extends React.Component {
     const passProps = {
       root,
       settings,
+      savePending,
+      clearPending,
+      canSave,
     };
 
     return (
@@ -41,6 +51,9 @@ class Configure extends React.Component {
             <Item itemId="tech" icon="code">
               {t('configure.tech_settings')}
             </Item>
+            <Item itemId="organization" icon="people">
+              {t('configure.organization_information')}
+            </Item>
           </List>
           <div className={styles.saveBox}>
             {canSave ? (
@@ -81,6 +94,7 @@ Configure.propTypes = {
   children: PropTypes.node.isRequired,
   saveDialog: PropTypes.bool,
   hideSaveDialog: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
 };
 
 export default Configure;

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

@@ -34,7 +34,7 @@ class EmbedLink extends Component {
     `;
 
     return (
-      <ConfigureCard title={'Embed Comment Stream'}>
+      <ConfigureCard title={t('configure.embed_comment_stream')}>
         <p>{t('configure.copy_and_paste')}</p>
         <textarea
           rows={5}

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

@@ -0,0 +1,87 @@
+.label {
+  display: block;
+}
+
+.detailList {
+  padding: 0;
+  margin: 0;
+}
+
+.detailLabel {
+  color: #000;
+  font-size: 1.1em;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.detailValue {
+  padding: 6px 0;
+  border: solid 1px transparent;
+  display: block;
+  font-size: 1.1em;
+  border-radius: 2px;
+  color: #424242;
+  box-sizing: border-box;
+  min-width: 300px;
+}
+
+.editable {
+  padding-left: 10px;
+  padding-right: 10px;
+  border-color: grey;
+}
+
+.detailItem {
+  margin-bottom: 16px;
+  list-style: none;
+}
+
+.button, .button:disabled {
+  background: white;
+  border: solid 1px grey;
+}
+
+.actionBox {
+  flex-grow: 0;
+}
+
+.cancelButton {
+  padding: 10px;
+  display: block;
+  color: #4f5c67;
+  font-weight: 500;
+  
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.changedSave {
+  background-color: #00796B;
+  color: white;
+}
+
+.errorList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.errorItem {
+  padding: 5px 10px;
+  margin-bottom: 20px;
+  color: #b71c1c;
+  border-radius: 2px;
+  display: inline-block;
+  background: #F9D3CE;
+}
+
+.container {
+  display: flex;
+}
+
+.content {
+  flex-grow: 1;
+  padding-right: 40px;
+}

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button } from 'coral-ui';
+import PropTypes from 'prop-types';
+import styles from './OrganizationSettings.css';
+import Slot from 'coral-framework/components/Slot';
+import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+
+class OrganizationSettings extends React.Component {
+  state = { editing: false, errors: [] };
+
+  addError = err => {
+    if (this.state.errors.indexOf(err) === -1) {
+      this.setState(({ errors }) => ({
+        errors: errors.concat(err),
+      }));
+    }
+  };
+
+  removeError = err => {
+    this.setState(({ errors }) => ({
+      errors: errors.filter(i => i !== err),
+    }));
+  };
+
+  toggleEditing = () => {
+    this.setState(({ editing }) => ({
+      editing: !editing,
+    }));
+  };
+
+  disableEditing = () => {
+    this.setState(() => ({
+      editing: false,
+    }));
+  };
+
+  updateName = event => {
+    const updater = { organizationName: { $set: event.target.value } };
+    this.props.updatePending({ updater });
+  };
+
+  updateEmail = event => {
+    let error = null;
+    const email = event.target.value;
+
+    // Add a blocker error
+    if (!validate.email(email)) {
+      error = true;
+      this.addError('email');
+    } else {
+      this.removeError('email');
+    }
+
+    const updater = { organizationContactEmail: { $set: email } };
+    const errorUpdater = { organizationContactEmail: { $set: error } };
+
+    this.props.updatePending({ updater, errorUpdater });
+  };
+
+  cancelEditing = () => {
+    this.disableEditing();
+    this.props.clearPending();
+  };
+
+  save = async () => {
+    await this.props.savePending();
+    this.disableEditing();
+  };
+  displayErrors = (errors = []) => (
+    <ul className={styles.errorList}>
+      {errors.map((errKey, i) => (
+        <li key={`${i}_${errKey}`} className={styles.errorItem}>
+          {errorMsj[errKey]}
+        </li>
+      ))}
+    </ul>
+  );
+
+  render() {
+    const { settings, slotPassthrough, canSave } = this.props;
+    const hasErrors = this.state.errors.length;
+    return (
+      <ConfigurePage title={t('configure.organization_information')}>
+        <p>{t('configure.organization_info_copy')}</p>
+        <p>{t('configure.organization_info_copy_2')}</p>
+        <ConfigureCard>
+          <div className={styles.container}>
+            <div className={styles.content}>
+              {this.displayErrors(this.state.errors)}
+              <ul className={styles.detailList}>
+                <li className={styles.detailItem}>
+                  <label
+                    className={styles.detailLabel}
+                    id={t('configure.organization_name')}
+                  >
+                    {t('configure.organization_name')}
+                  </label>
+                  <input
+                    type="text"
+                    className={cn(styles.detailValue, {
+                      [styles.editable]: this.state.editing,
+                    })}
+                    onChange={this.updateName}
+                    value={settings.organizationName}
+                    id={t('configure.organization_name')}
+                    readOnly={!this.state.editing}
+                  />
+                </li>
+                <li className={styles.detailItem}>
+                  <label
+                    className={styles.detailLabel}
+                    id={t('configure.organization_contact_email')}
+                  >
+                    {t('configure.organization_contact_email')}
+                  </label>
+                  <input
+                    type="text"
+                    className={cn(styles.detailValue, {
+                      [styles.editable]: this.state.editing,
+                    })}
+                    onChange={this.updateEmail}
+                    value={settings.organizationContactEmail || ''}
+                    id={t('configure.organization_contact_email')}
+                    readOnly={!this.state.editing}
+                  />
+                </li>
+              </ul>
+            </div>
+            {!this.state.editing ? (
+              <div className={styles.actionBox}>
+                <Button
+                  className={styles.button}
+                  icon="settings"
+                  onClick={this.toggleEditing}
+                  full
+                >
+                  {t('configure.edit_info')}
+                </Button>
+              </div>
+            ) : (
+              <div className={styles.actionBox}>
+                {canSave && !hasErrors ? (
+                  <Button
+                    raised
+                    onClick={this.save}
+                    className={styles.changedSave}
+                    icon="check"
+                    full
+                  >
+                    {t('configure.save')}
+                  </Button>
+                ) : (
+                  <Button className={styles.button} disabled icon="check" full>
+                    {t('configure.save')}
+                  </Button>
+                )}
+                <a className={styles.cancelButton} onClick={this.cancelEditing}>
+                  {t('cancel')}
+                </a>
+              </div>
+            )}
+          </div>
+        </ConfigureCard>
+        <Slot fill="adminOrganizationSettings" passthrough={slotPassthrough} />
+      </ConfigurePage>
+    );
+  }
+}
+
+OrganizationSettings.propTypes = {
+  savePending: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+};
+
+export default OrganizationSettings;

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

@@ -3,7 +3,7 @@ import { SelectField, Option } from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
 import styles from './StreamSettings.css';
 import { Textfield } from 'react-mdl';
-import { Icon, TextArea } from 'coral-ui';
+import { Icon } from 'coral-ui';
 import PropTypes from 'prop-types';
 import Slot from 'coral-framework/components/Slot';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
@@ -66,8 +66,8 @@ class StreamSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
-  updateClosedMessage = event => {
-    const updater = { closedMessage: { $set: event.target.value } };
+  updateClosedMessage = value => {
+    const updater = { closedMessage: { $set: value } };
     this.props.updatePending({ updater });
   };
 
@@ -82,6 +82,20 @@ class StreamSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
+  updateDisableCommenting = () => {
+    const updater = {
+      disableCommenting: {
+        $set: !this.props.settings.disableCommenting,
+      },
+    };
+    this.props.updatePending({ updater });
+  };
+
+  updateDisableCommentingMessage = value => {
+    const updater = { disableCommentingMessage: { $set: value } };
+    this.props.updatePending({ updater });
+  };
+
   updateAutoClose = () => {
     const updater = {
       autoCloseStream: { $set: !this.props.settings.autoCloseStream },
@@ -164,7 +178,7 @@ class StreamSettings extends React.Component {
         >
           <p>{t('configure.closed_comments_desc')}</p>
           <div>
-            <TextArea
+            <MarkdownEditor
               className={styles.descriptionBox}
               onChange={this.updateClosedMessage}
               value={settings.closedMessage}
@@ -192,6 +206,25 @@ class StreamSettings extends React.Component {
           &nbsp;
           {t('configure.edit_comment_timeframe_text_post')}
         </ConfigureCard>
+        <ConfigureCard
+          checked={settings.disableCommenting}
+          onCheckbox={this.updateDisableCommenting}
+          title={t('configure.disable_commenting_title')}
+        >
+          <p>{t('configure.disable_commenting_desc')}</p>
+          <div
+            className={cn(
+              styles.configSettingDisableCommenting,
+              settings.disableCommenting ? null : styles.hidden
+            )}
+          >
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={this.updateDisableCommentingMessage}
+              value={settings.disableCommentingMessage}
+            />
+          </div>
+        </ConfigureCard>
         <ConfigureCard
           checked={settings.autoCloseStream}
           onCheckbox={this.updateAutoClose}

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

@@ -16,10 +16,12 @@ import {
   hideSaveDialog,
 } from '../../../actions/configure';
 import Configure from '../components/Configure';
+import OrganizationSettings from './OrganizationSettings';
 import { withRouter } from 'react-router';
 
 class ConfigureContainer extends React.Component {
-  state = { nextRoute: '' };
+  nextRoute = '';
+  unregisterLeaveHook = null;
 
   savePending = async () => {
     await this.props.updateSettings(this.props.pending);
@@ -39,18 +41,16 @@ class ConfigureContainer extends React.Component {
   };
 
   gotoNextRoute = () => {
-    const { nextRoute } = this.state;
-    if (nextRoute) {
-      this.props.router.push(nextRoute);
-      this.setState({ nextRoute: '' });
+    if (this.nextRoute) {
+      this.props.router.push(this.nextRoute);
+      this.nextRoute = '';
     }
   };
 
   handleSectionChange = async section => {
     const nextRoute = `/admin/configure/${section}`;
-
-    if (this.shouldShowSaveDialog()) {
-      await this.setState({ nextRoute });
+    if (this.hasPendingData()) {
+      this.nextRoute = nextRoute;
       this.props.showSaveDialog();
     } else {
       // Just go to the section
@@ -58,20 +58,37 @@ class ConfigureContainer extends React.Component {
     }
   };
 
-  shouldShowSaveDialog = () => {
+  navigationPrompt = e => {
+    if (this.hasPendingData()) {
+      const confirmationMessage = 'Changes that you made may not be saved.';
+      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+      return confirmationMessage; // Gecko, WebKit, Chrome <34
+    }
+  };
+
+  hasPendingData = () => {
     return !!Object.keys(this.props.pending).length;
   };
 
   routeLeave = ({ pathname }) => {
-    if (this.shouldShowSaveDialog()) {
-      this.setState({ nextRoute: pathname });
+    if (this.hasPendingData()) {
+      this.nextRoute = pathname;
       this.props.showSaveDialog();
       return false;
     }
   };
 
   componentDidMount() {
-    this.props.router.setRouteLeaveHook(this.props.route, this.routeLeave);
+    this.unregisterLeaveHook = this.props.router.setRouteLeaveHook(
+      this.props.route,
+      this.routeLeave
+    );
+    window.addEventListener('beforeunload', this.navigationPrompt);
+  }
+
+  componentWillUnmount() {
+    this.unregisterLeaveHook();
+    window.removeEventListener('beforeunload', this.navigationPrompt);
   }
 
   render() {
@@ -83,18 +100,21 @@ class ConfigureContainer extends React.Component {
       return <Spinner />;
     }
 
+    const activeSection = this.props.routes[3].path;
+
     return (
       <Configure
         saveChanges={this.saveChanges}
         discardChanges={this.discardChanges}
         saveDialog={this.props.saveDialog}
-        activeSection={this.props.routes[3].path}
+        activeSection={activeSection}
         hideSaveDialog={this.props.hideSaveDialog}
         canSave={this.props.canSave}
         currentUser={this.props.currentUser}
         root={this.props.root}
         settings={this.props.mergedSettings}
         handleSectionChange={this.handleSectionChange}
+        clearPending={this.props.clearPending}
         savePending={this.savePending}
       >
         {this.props.children}
@@ -110,10 +130,12 @@ const withConfigureQuery = withQuery(
       ...${getDefinitionName(StreamSettings.fragments.settings)}
       ...${getDefinitionName(TechSettings.fragments.settings)}
       ...${getDefinitionName(ModerationSettings.fragments.settings)}
+      ...${getDefinitionName(OrganizationSettings.fragments.settings)}
     }
     ...${getDefinitionName(StreamSettings.fragments.root)}
     ...${getDefinitionName(TechSettings.fragments.root)}
     ...${getDefinitionName(ModerationSettings.fragments.root)}
+    ...${getDefinitionName(OrganizationSettings.fragments.root)}
   }
   ${StreamSettings.fragments.root}
   ${StreamSettings.fragments.settings}
@@ -121,6 +143,8 @@ const withConfigureQuery = withQuery(
   ${TechSettings.fragments.settings}
   ${ModerationSettings.fragments.root}
   ${ModerationSettings.fragments.settings}
+  ${OrganizationSettings.fragments.root}
+  ${OrganizationSettings.fragments.settings}
   `,
   {
     options: () => ({
@@ -150,7 +174,10 @@ const mapDispatchToProps = dispatch =>
 
 export default compose(
   withRouter,
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withUpdateSettings,
   withConfigureQuery,
   withMergedSettings('root.settings', 'pending', 'mergedSettings')

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

@@ -42,7 +42,10 @@ export default compose(
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
     slotPassthrough: {
       root,

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

@@ -0,0 +1,56 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import OrganizationSettings from '../components/OrganizationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
+
+const slots = ['adminOrganizationSettings'];
+
+const mapStateToProps = state => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_OrganizationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_OrganizationSettings_settings on Settings {
+        organizationName
+        organizationContactEmail
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `,
+  }),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
+)(OrganizationSettings);

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

@@ -39,11 +39,16 @@ export default compose(
         autoCloseStream
         closedTimeout
         closedMessage
+        disableCommenting
+        disableCommentingMessage
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
     slotPassthrough: {
       root,

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

@@ -39,7 +39,10 @@ export default compose(
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
     slotPassthrough: {
       root,

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

@@ -1,15 +1,16 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styles from './Install.css';
 import { Wizard, WizardNav } from 'coral-ui';
 import Layout from 'coral-admin/src/components/Layout';
+import PropTypes from 'prop-types';
 
 import InitialStep from './Steps/InitialStep';
-import AddOrganizationName from './Steps/AddOrganizationName';
+import OrganizationDetails from './Steps/OrganizationDetails';
 import CreateYourAccount from './Steps/CreateYourAccount';
 import PermittedDomainsStep from './Steps/PermittedDomainsStep';
 import FinalStep from './Steps/FinalStep';
 
-export default class Install extends Component {
+class Install extends React.Component {
   handleDomainsChange = value => {
     this.props.updatePermittedDomains(value);
   };
@@ -55,7 +56,7 @@ export default class Install extends Component {
                 goToStep={this.props.goToStep}
               >
                 <InitialStep />
-                <AddOrganizationName
+                <OrganizationDetails
                   install={install}
                   handleSettingsChange={this.handleSettingsChange}
                   handleSettingsSubmit={this.handleSettingsSubmit}
@@ -81,3 +82,18 @@ export default class Install extends Component {
     );
   }
 }
+
+Install.propTypes = {
+  updatePermittedDomains: PropTypes.func.isRequired,
+  updateSettingsFormData: PropTypes.func.isRequired,
+  updateUserFormData: PropTypes.func.isRequired,
+  submitSettings: PropTypes.func.isRequired,
+  submitUser: PropTypes.func.isRequired,
+  install: PropTypes.object.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  goToStep: PropTypes.func.isRequired,
+  finishInstall: PropTypes.func.isRequired,
+};
+
+export default Install;

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

@@ -21,6 +21,17 @@ const AddOrganizationName = props => {
             showErrors={install.showErrors}
             errorMsg={install.errors.organizationName}
           />
+
+          <TextField
+            className={styles.TextField}
+            id="organizationContactEmail"
+            type="email"
+            label={t('install.create.organization_contact_email')}
+            onChange={handleSettingsChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.organizationContactEmail}
+          />
+
           <Button
             className="talk-install-step-2-save-button"
             type="submit"

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

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { compose } from 'react-apollo';
 import Install from '../components/Install';
 
 import {
@@ -18,7 +17,7 @@ import {
   updatePermittedDomains,
 } from '../../../actions/install';
 
-class InstallContainer extends Component {
+class InstallContainer extends React.Component {
   componentDidMount() {
     const { checkInstall } = this.props;
     checkInstall(() => {
@@ -27,7 +26,21 @@ class InstallContainer extends Component {
   }
 
   render() {
-    return <Install {...this.props} />;
+    return (
+      <Install
+        install={this.props.install}
+        goToStep={this.props.goToStep}
+        nextStep={this.props.nextStep}
+        submitUser={this.props.submitUser}
+        checkInstall={this.props.checkInstall}
+        previousStep={this.props.previousStep}
+        finishInstall={this.props.finishInstall}
+        submitSettings={this.props.submitSettings}
+        updateUserFormData={this.props.updateUserFormData}
+        updateSettingsFormData={this.props.updateSettingsFormData}
+        updatePermittedDomains={this.props.updatePermittedDomains}
+      />
+    );
   }
 }
 
@@ -35,6 +48,20 @@ InstallContainer.contextTypes = {
   router: PropTypes.object,
 };
 
+InstallContainer.propTypes = {
+  install: PropTypes.object.isRequired,
+  goToStep: PropTypes.func.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  submitUser: PropTypes.func.isRequired,
+  checkInstall: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  finishInstall: PropTypes.func.isRequired,
+  submitSettings: PropTypes.func.isRequired,
+  updateUserFormData: PropTypes.func.isRequired,
+  updateSettingsFormData: PropTypes.func.isRequired,
+  updatePermittedDomains: PropTypes.func.isRequired,
+};
+
 const mapStateToProps = state => ({
   install: state.install,
 });
@@ -56,6 +83,7 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-export default compose(connect(mapStateToProps, mapDispatchToProps))(
-  InstallContainer
-);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InstallContainer);

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

@@ -1,5 +1,4 @@
 @custom-media --big-viewport (min-width: 780px);
-
 .root {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
@@ -13,7 +12,6 @@
   margin-top: 13px;
   min-height: 0;
   outline: 0;
-
   /*
    Fix rendering issues in Safari by promoting this
    into its own layer.
@@ -21,7 +19,6 @@
    https://www.pivotaltracker.com/story/show/151142211
   */
   transform: translateZ(0);
-
   &:last-child {
     border-bottom: none;
   }
@@ -39,7 +36,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
 }
 
 .author {
@@ -74,7 +70,7 @@
   max-width: 500px;
   font-weight: 300;
   font-size: 16px;
-  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
 .created {
@@ -85,13 +81,16 @@
   font-weight: 300;
 }
 
+.deleted {
+  background-color: #f0f0f0;
+}
+
 .moderateArticle {
   font-size: 14px;
   margin: 10px 0;
   font-weight: 500;
   line-height: 1.2;
   max-width: 500px;
-
   a {
     display: inline-block;
     color: #063b9a;
@@ -99,17 +98,15 @@
     font-weight: 500;
     letter-spacing: .5px;
     margin-left: 10px;
-
     font-size: 13px;
     margin-left: 5px;
     padding-bottom: 0px;
     border-bottom: solid 1px;
     line-height: 16px;
-
     &:hover {
       opacity: .9;
       cursor: pointer;
-     }
+    }
   }
 }
 
@@ -134,12 +131,10 @@
   cursor: pointer;
   font-weight: normal;
   white-space: nowrap;
-
   &:hover {
     text-decoration: underline;
     opacity: .9;
   }
-
   i {
     font-size: 12px;
     position: relative;
@@ -168,7 +163,6 @@
   align-items: center;
   justify-content: flex-end;
   margin-right: 14px;
-
   i {
     margin-right: 5px;
   }
@@ -177,7 +171,6 @@
 @media (--big-viewport) {
   .root {
     margin-bottom: 30px;
-
     &:last-child {
       border-bottom: 1px solid #e0e0e0;
     }
@@ -186,7 +179,6 @@
 
 .commentContent {
   display: flex;
-
   blockquote {
     font-size: inherit;
     line-height: inherit;

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

@@ -13,6 +13,7 @@ import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
+import CommentDeletedTombstone from '../../../components/CommentDeletedTombstone';
 
 import t, { timeago } from 'coral-framework/services/i18n';
 
@@ -75,6 +76,27 @@ class Comment extends React.Component {
       asset: comment.asset,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(
+            className,
+            'mdl-card',
+            selectionStateCSS,
+            styles.root,
+            { [styles.selected]: selected, [styles.dangling]: dangling },
+            'talk-admin-moderate-comment',
+            styles.deleted
+          )}
+          id={`comment_${comment.id}`}
+          ref={this.handleRef}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -148,6 +170,7 @@ class Comment extends React.Component {
                     className={styles.external}
                     href={`${comment.asset.url}?commentId=${comment.id}`}
                     target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <Icon name="open_in_new" /> {t('comment.view_context')}
                   </a>
@@ -200,7 +223,7 @@ Comment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
+    body: PropTypes.string,
     action_summaries: PropTypes.array,
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,

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

@@ -63,10 +63,6 @@ class Moderation extends Component {
     this.props.toggleStorySearch(true);
   };
 
-  getActiveTabCount = (props = this.props) => {
-    return props.root[`${props.activeTab}Count`];
-  };
-
   moderate = accept => {
     const {
       acceptComment,
@@ -139,12 +135,14 @@ class Moderation extends Component {
 
     const comments = root[activeTab];
 
-    const activeTabCount = this.getActiveTabCount();
     const menuItems = Object.keys(queueConfig).map(queue => ({
       key: queue,
       name: queueConfig[queue].name,
       icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`],
+      indicator:
+        ['premod', 'reported'].includes(queue) && root[queue].nodes.length > 0,
+      // TODO: Eventually we'll reintroduce counting
+      // count: root[`${props.queue}Count`]
     }));
 
     const slotPassthrough = {
@@ -189,7 +187,6 @@ class Moderation extends Component {
             loadMore={this.loadMore}
             commentBelongToQueue={this.props.commentBelongToQueue}
             isLoadingMore={this.state.isLoadingMore}
-            commentCount={activeTabCount}
             currentUserId={this.props.currentUser.id}
             viewUserDetail={viewUserDetail}
             selectCommentId={props.selectCommentId}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CountBadge from '../../../components/CountBadge';
+import Indicator from '../../../components/Indicator';
 import styles from './ModerationMenu.css';
 import { Icon } from 'coral-ui';
 import { Link } from 'react-router';
@@ -24,6 +24,7 @@ const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
         >
           {items.map(queue => (
             <Link
+              id={`talk-admin-moderate-tab-${queue.key}`}
               key={queue.key}
               to={getModPath(queue.key, asset.id)}
               className={cn('mdl-tabs__tab', styles.tab, {
@@ -32,7 +33,7 @@ const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
               activeClassName={styles.active}
             >
               <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name}{' '}
-              <CountBadge count={queue.count} />
+              {queue.indicator && <Indicator />}
             </Link>
           ))}
         </div>

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

@@ -15,6 +15,7 @@ import {
 } from 'react-virtualized';
 import throttle from 'lodash/throttle';
 import key from 'keymaster';
+import cn from 'classnames';
 
 const hasComment = (nodes, id) => nodes.some(node => node.id === id);
 
@@ -204,7 +205,7 @@ class ModerationQueue extends React.Component {
   }
 
   componentDidUpdate(prev) {
-    const { commentCount, selectedCommentId } = this.props;
+    const { selectedCommentId, hasNextPage } = this.props;
 
     const switchedToMultiMode = prev.singleView && !this.props.singleView;
     const switchedMode = prev.singleView !== this.props.singleView;
@@ -212,7 +213,6 @@ class ModerationQueue extends React.Component {
       prev.selectedCommentId !== selectedCommentId && selectedCommentId;
     const moderatedLastComment =
       prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
-    const hasMoreComment = commentCount > 0;
 
     if (switchedToMultiMode) {
       // Reflow virtual list.
@@ -223,7 +223,7 @@ class ModerationQueue extends React.Component {
       this.scrollToSelectedComment();
     }
 
-    if (moderatedLastComment && hasMoreComment) {
+    if (moderatedLastComment && hasNextPage) {
       this.props.loadMore();
     }
   }
@@ -240,10 +240,7 @@ class ModerationQueue extends React.Component {
     const index = view.findIndex(
       ({ id }) => id === this.props.selectedCommentId
     );
-    if (
-      index === view.length - 1 &&
-      this.getCommentCountWithoutDagling() !== this.props.commentCount
-    ) {
+    if (index === view.length - 1 && this.props.hasNextPage) {
       await this.props.loadMore();
       this.selectDown();
       return;
@@ -384,6 +381,11 @@ class ModerationQueue extends React.Component {
       ...props
     } = this.props;
 
+    const rootClassName = cn(
+      styles.root,
+      `talk-admin-moderate-queue-${this.props.activeTab}`
+    );
+
     if (comments.length === 0) {
       return (
         <div className={styles.root}>
@@ -405,7 +407,7 @@ class ModerationQueue extends React.Component {
 
       const comment = comments[index];
       return (
-        <div className={styles.root}>
+        <div className={rootClassName}>
           <Comment
             root={this.props.root}
             key={comment.id}
@@ -427,7 +429,7 @@ class ModerationQueue extends React.Component {
     const view = this.state.view;
 
     return (
-      <div className={styles.root}>
+      <div className={rootClassName}>
         <ViewMore
           viewMore={() => this.viewNewComments()}
           count={comments.length - view.length}
@@ -467,7 +469,6 @@ ModerationQueue.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   commentBelongToQueue: PropTypes.func.isRequired,
   cleanUpQueue: PropTypes.func.isRequired,
-  commentCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
   singleView: PropTypes.bool,
   isLoadingMore: PropTypes.bool,

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

@@ -3,9 +3,13 @@ import PropTypes from 'prop-types';
 import styles from './StorySearch.css';
 import { Button, Spinner, Icon } from 'coral-ui';
 import Story from './Story';
+import t from 'coral-framework/services/i18n';
 
 const StorySearch = props => {
-  const { root: { assets }, data: { loading } } = props;
+  const {
+    root: { assets },
+    data: { loading },
+  } = props;
 
   if (!props.moderation.storySearchVisible) {
     return null;
@@ -33,14 +37,14 @@ const StorySearch = props => {
               onClick={props.search}
               raised
             >
-              Search
+              {t('streams.search')}
             </Button>
           </div>
           <div className={styles.results}>
             {props.assetId && (
               <div className={styles.cta}>
                 <a onClick={props.goToModerateAll}>
-                  Moderate comments on All Stories
+                  {t('moderate_all_streams')}
                 </a>
               </div>
             )}
@@ -48,13 +52,15 @@ const StorySearch = props => {
               {props.moderation.storySearchString ? (
                 <div className={styles.searchResults}>
                   <Icon name="search" />
-                  <span className={styles.headlineRecent}>Search Results</span>
+                  <span className={styles.headlineRecent}>
+                    {t('streams.search_results')}
+                  </span>
                 </div>
               ) : (
                 <div className={styles.searchResults}>
                   <Icon name="access_time" />
                   <span className={styles.headlineRecent}>
-                    Most Recent Stories
+                    {t('streams.most_recent_stories')}
                   </span>
                 </div>
               )}
@@ -82,7 +88,9 @@ const StorySearch = props => {
               )}
 
               {assets.nodes.length === 0 && (
-                <div className={styles.noResults}>No results</div>
+                <div className={styles.noResults}>
+                  {t('streams.search_results')}
+                </div>
               )}
             </div>
           </div>

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

@@ -22,7 +22,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_ADDED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentAdded: comment } } }
+          {
+            subscriptionData: {
+              data: { commentAdded: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -31,7 +35,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_FLAGGED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentFlagged: comment } } }
+          {
+            subscriptionData: {
+              data: { commentFlagged: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -40,7 +48,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_EDITED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentEdited: comment } } }
+          {
+            subscriptionData: {
+              data: { commentEdited: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -49,7 +61,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_ACCEPTED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentAccepted: comment } } }
+          {
+            subscriptionData: {
+              data: { commentAccepted: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -58,7 +74,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_REJECTED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentRejected: comment } } }
+          {
+            subscriptionData: {
+              data: { commentRejected: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -67,7 +87,11 @@ class IndicatorContainer extends Component {
         document: COMMENT_RESET_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentReset: comment } } }
+          {
+            subscriptionData: {
+              data: { commentReset: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },

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

@@ -71,7 +71,9 @@ class ModerationContainer extends Component {
   };
 
   get activeTab() {
-    const { root: { asset, settings } } = this.props;
+    const {
+      root: { asset, settings },
+    } = this.props;
     const id = getAssetId(this.props);
     const tab = getTab(this.props);
 
@@ -94,7 +96,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentAdded: comment } } }
+          {
+            subscriptionData: {
+              data: { commentAdded: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -104,7 +110,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentAccepted: comment } } }
+          {
+            subscriptionData: {
+              data: { commentAccepted: comment },
+            },
+          }
         ) => {
           const user =
             comment.status_history[comment.status_history.length - 1]
@@ -125,7 +135,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentRejected: comment } } }
+          {
+            subscriptionData: {
+              data: { commentRejected: comment },
+            },
+          }
         ) => {
           const user =
             comment.status_history[comment.status_history.length - 1]
@@ -146,7 +160,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentReset: comment } } }
+          {
+            subscriptionData: {
+              data: { commentReset: comment },
+            },
+          }
         ) => {
           const user =
             comment.status_history[comment.status_history.length - 1]
@@ -167,7 +185,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentEdited: comment } } }
+          {
+            subscriptionData: {
+              data: { commentEdited: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -177,7 +199,11 @@ class ModerationContainer extends Component {
         variables,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentFlagged: comment } } }
+          {
+            subscriptionData: {
+              data: { commentFlagged: comment },
+            },
+          }
         ) => {
           return this.handleCommentChange(prev, comment);
         },
@@ -289,7 +315,11 @@ class ModerationContainer extends Component {
   };
 
   render() {
-    const { root, root: { asset, settings }, data } = this.props;
+    const {
+      root,
+      root: { asset, settings },
+      data,
+    } = this.props;
     const assetId = getAssetId(this.props);
 
     if (assetId) {
@@ -314,11 +344,11 @@ class ModerationContainer extends Component {
 
     const currentQueueConfig = Object.assign({}, this.props.queueConfig);
 
-    if (premodEnabled && root.newCount === 0) {
+    if (premodEnabled && root.new.nodes.length === 0) {
       delete currentQueueConfig.new;
     }
 
-    if (!premodEnabled && root.premodCount === 0) {
+    if (!premodEnabled && root.premod.nodes.length === 0) {
       delete currentQueueConfig.premod;
     }
 
@@ -402,7 +432,7 @@ const COMMENT_RESET_SUBSCRIPTION = gql`
 
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $tags:[String!], $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags}) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags, excludeDeleted: true}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -432,6 +462,7 @@ const withModQueueQuery = withQuery(
     ${Object.keys(queueConfig).map(
       queue => `
       ${queue}: comments(query: {
+        excludeDeleted: true,
         statuses: ${
           queueConfig[queue].statuses
             ? `[${queueConfig[queue].statuses.join(', ')}],`
@@ -455,9 +486,14 @@ const withModQueueQuery = withQuery(
       }
     `
     )}
-    ${Object.keys(queueConfig).map(
+    ${
+      ''
+      /*
+     TODO: eventually we'll reintroduce counting..
+     Object.keys(queueConfig).map(
       queue => `
       ${queue}Count: commentCount(query: {
+        excludeDeleted: true,
         statuses: ${
           queueConfig[queue].statuses
             ? `[${queueConfig[queue].statuses.join(', ')}],`
@@ -476,7 +512,8 @@ const withModQueueQuery = withQuery(
         asset_id: $asset_id,
       })
     `
-    )}
+    )*/
+    }
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
@@ -539,7 +576,10 @@ const mapDispatchToProps = dispatch => ({
 
 export default compose(
   withQueueConfig(baseQueueConfig),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
   withSetCommentStatus,
   withModQueueQuery
 )(ModerationContainer);

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

@@ -112,4 +112,7 @@ export const withAssetSearchQuery = withQuery(
   }
 );
 
-export default compose(withRouter, withAssetSearchQuery)(StorySearchContainer);
+export default compose(
+  withRouter,
+  withAssetSearchQuery
+)(StorySearchContainer);

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

@@ -92,9 +92,6 @@
 
 .statusDropdown {
   width: 150px;
-}
-
-.statusDropdownOption {
-  min-width: 100px;
+  text-align: left;
 }
 

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

@@ -22,20 +22,12 @@ class Stories extends Component {
     const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
     return (
       <Dropdown
-        className={styles.statusDropdown}
+        toggleClassName={styles.statusDropdown}
         value={closed}
         onChange={value => this.props.onStatusChange(value, id)}
       >
-        <Option
-          value={false}
-          label={t('streams.open')}
-          className={styles.statusDropdownOption}
-        />
-        <Option
-          value={true}
-          label={t('streams.closed')}
-          className={styles.statusDropdownOption}
-        />
+        <Option value={false} label={t('streams.open')} />
+        <Option value={true} label={t('streams.closed')} />
       </Dropdown>
     );
   };

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

@@ -113,4 +113,7 @@ StoriesContainer.propTypes = {
   updateAssetState: PropTypes.func.isRequired,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(StoriesContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StoriesContainer);

client/coral-auth-callback/src/index.js

@@ -3,32 +3,36 @@ import { getStaticConfiguration } from 'coral-framework/services/staticConfigura
 import { createPostMessage } from 'coral-framework/services/postMessage';
 
 document.addEventListener('DOMContentLoaded', () => {
-  try {
-    const staticConfig = getStaticConfiguration();
-    const { STATIC_ORIGIN: origin } = staticConfig;
-    const postMessage = createPostMessage(origin);
+  const staticConfig = getStaticConfiguration();
+  const { STATIC_ORIGIN: origin } = staticConfig;
+  const postMessage = createPostMessage(origin);
 
-    // Get the auth element and parse it as JSON by decoding it.
-    const auth = document.getElementById('auth');
-    const doc = document.implementation.createHTMLDocument('');
-    doc.body.innerHTML = auth.innerText;
+  // Get the auth element and parse it as JSON by decoding it.
+  const auth = document.getElementById('auth');
+  const doc = document.implementation.createHTMLDocument('');
+  doc.body.innerHTML = auth.innerText;
 
-    // Auth state is contained within the node.
-    const { err, data } = JSON.parse(doc.body.textContent);
-    if (err) {
-      // TODO: send back the error message.
-      console.error(err);
+  // Auth state is contained within the node.
+  const { err, data } = JSON.parse(doc.body.textContent);
+  if (err) {
+    const errDiv = document.createElement('div');
+    if (err.message) {
+      errDiv.innerText = `${err.name}: ${err.message}`;
     } else {
-      // The data will contain a user and a token.
-      const { user, token } = data;
-
-      // Send the state back.
-      postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+      errDiv.innerText = JSON.stringify(err);
     }
-  } finally {
-    // Always close the window.
-    setTimeout(() => {
-      window.close();
-    }, 50);
+    document.body.appendChild(errDiv);
+    throw err;
   }
+
+  // The data will contain a user and a token.
+  const { user, token } = data;
+
+  // Send the state back.
+  postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+
+  // Close the window when all went well.
+  setTimeout(() => {
+    window.close();
+  }, 50);
 });