Merge pull request #764 from coralproject/update-readme-recipes

Update README with info about Recipes

.eslintignore

@@ -13,4 +13,5 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured
 node_modules

.gitignore

@@ -26,5 +26,6 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured
 
 **/node_modules/*

CONTRIBUTING.md

@@ -6,16 +6,46 @@ This document is a companion to help you approach contributing. If it does not d
 
 By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
 
-## Product Roadmap
+## What should I Contribute?
 
-You can view what the Coral Team is working on next here https://www.pivotaltracker.com/n/projects/1863625.
+There are at least three ways to contribute to Talk:
 
-If you'd like to see our longer term roadmap, [get in touch.](https://coralproject.net/contact.html)
+* Writing Code
+* Writing Docs
+* Providing Translations
 
+## Writing Code
 
-## Contribute to the documentation
+Conversation surrounding contributions begins in [issues](https://github.com/coralproject/talk/issues).
 
-Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally.
+### When should I Create an Issue?
+
+File an issue as soon as you have an idea of something you'd like to contribute. We would love to hear what you're thinking and help refine the idea to make it into the Talk ecosystem.
+
+Please file issues if:
+
+* you would like to contribute to Talk Core.
+* you are building a Plugin that the current Plugin API doesn't support.
+* you are building a Plugin and want advice.
+
+### What should I include?
+
+Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repo should start with a story or this form:
+
+`As a [type of person] I'd like to be able to [do something] so that I can [get some result].`
+
+This exercise does two things:
+
+* allows us to ground our technical choices in a clear, simple product need.
+* expresses that product need in a way that doesn't imply a specific technical solution allowing for debate as to the best way to solve the problem.
+
+Please feel free to provide as much detail as possible when filing the issue but please do keep the initial issue specific to one need and try to avoid including technical or design solutions.
+
+If you have a specific technical or design solution in mind, please submit it as the first comment on the thread.
+
+## Contributing Documentation
+
+Clear docs are a prerequisite for a successful open source project. Contributing to the documentation is often more important than contributing to the code!
 
 We are looking for _documentarians_ to:
 
@@ -23,55 +53,34 @@ We are looking for _documentarians_ to:
 * create new / missing sections, and
 * take the lead in making sections, or the over all structure better.
 
-### But how?
+Information about how to update docs can be found in our [FAQ](faq.html#how-do-i-contribute-to-these-docs).
 
-* Our public docs site can be updated [here](https://github.com/coralproject/docs).
-* [Let us know](https://github.com/coralproject/talk/wiki/Contact-Us) if you'd like permission to update our wiki.
-* Update any of our .md docs files by following [this guide](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging).
-* Our API docs need to be kept honest. [Update them here](https://github.com/coralproject/talk/blob/master/docs/swagger.yaml).
+If you'd like to discuss a contribution, please [file an issue](https://github.com/coralproject/talk/issues) describing the changes you would like to see.
 
-## Integrate into your environment
+## Contributing Translations
 
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
+Talk's tranlations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
 
-Talk is designed to integrate into existing environments in a variety of ways:
+Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact.html) the translations to us. We can import it into the repo.  
 
-* [Auth integrations](https://github.com/coralproject/talk/wiki/Security#authentication-strategies)
-* [Push assets into Talk](https://github.com/coralproject/talk/blob/master/routes/api/assets/index.js)
-* Monitoring Hooks (coming in 2017)
+## I want to contribute but I'm not sure what to do!
 
-If you're considering deploying Talk, [please let us know](https://github.com/coralproject/talk/wiki/Contact-Us)! We are quite literally doing this for you and want to help you succeed any way we can.
+If you want to contribute but don't have a clear idea of exactly what that may be, here are some resources that may help:
 
-If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info.
+### Product Roadmap
 
-## Write some code
+Please visit our product roadmap here: https://www.pivotaltracker.com/n/projects/1863625. If you'd like to take on any of our scheduled tasks we'd be forever grateful!
 
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
+### Discussion Forum
 
-### Build a New Feature / Plugin
+If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact.html).
 
-Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement.
+### Integrations
 
-Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project.
+Have a favorite analytics engine? Data science service? CMS? Auth platform? Deployment platform or pipeline? Pet project? Consider building a plugin to integrate them!
 
-To get an idea of where the Coral Team is going, see:
+### Favorite Features?
 
-* our [Slack channel](https://coralprojectslackin.herokuapp.com/), where you can talk directly with the Team and other community members,
-* our [current stories](https://www.pivotaltracker.com/n/projects/1863625), and
-* our [issues](https://github.com/coralproject/talk/issues).
+Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.
 
-
-Examples:
-
-* [Add An Emoji Button to Comments](https://github.com/coralproject/talk/wiki/Add-An-Emoji-Button-to-Comments)
-
-
-### Work on the Core
-
-There is always more work to be done to make an application more stable, scaleable and secure.
-
-If you see issues in the code or have ideas on how we may improve Talk, please consider:
-
-* [contributing a fix](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging),
-* [filing an issue](https://github.com/coralproject/talk/issues), or
-* or otherwise [letting us know](https://github.com/coralproject/talk/wiki/Contact-Us).
+## Thanks!

README.md

@@ -19,6 +19,10 @@ See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.
 
 See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
 
+### Recipes
+
+Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
+
 ## Usage
 
 ### Installation

bin/cli

@@ -9,13 +9,17 @@ const program = require('./commander');
 
 program
   .command('serve', 'serve the application')
+  .command('settings', 'interact with the application settings')
   .command('assets', 'interact with assets')
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
   .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
-  .command('plugins', 'provides utilities for interacting with the plugin system')
+  .command(
+    'plugins',
+    'provides utilities for interacting with the plugin system'
+  )
   .parse(process.argv);
 
 /**
@@ -25,7 +29,10 @@ program
  * labled with the PID written out by the parent process.
  */
 process.once('exit', () => {
-  if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
+  if (
+    program.runningCommand.killed === false &&
+    program.runningCommand.exitCode === null
+  ) {
     program.runningCommand.kill('SIGINT');
   }
 });

bin/cli-plugins

@@ -8,13 +8,14 @@
 // https://yarnpkg.com/
 
 const program = require('./commander');
+const inquirer = require('inquirer');
 
 // Make things colorful!
 require('colors');
 const emoji = require('node-emoji');
 
 const dir = process.cwd();
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const spawn = require('cross-spawn');
 const semver = require('semver');
@@ -272,10 +273,128 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
   console.log(`✨ Done in ${totalTime}s.`);
 }
 
+async function createSeedPlugin() {
+  const pluginsDir = path.join(__dirname, 'plugins');
+
+  function pluginNameExists(pluginName) {
+    const pluginNames = fs.readdirSync(pluginsDir);
+    return !!pluginNames
+      .filter((pn) => pn === pluginName).length;
+  }
+
+  let answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'pluginName',
+      message: 'Plugin Name:',
+      validate: (input) => {
+
+        if (pluginNameExists(input)) {
+          return 'Please, choose another name. That name already exists';
+        }
+
+        if (input && input.length > 0) {
+          return true;
+        }
+
+        return 'Plugin Name is required.';
+      }
+    },
+    {
+      type: 'confirm',
+      name: 'server',
+      message: 'Is this plugin extending the server capabilities?'
+    },
+    {
+      type: 'confirm',
+      name: 'client',
+      message: 'Is this plugin extending the client capabilities?'
+    },
+    {
+      type: 'confirm',
+      name: 'addPluginsJson',
+      message: 'Should we add it to the plugins.json?'
+    }
+  ]);
+
+  //==============================================================================
+  // Creating plugin seed
+  //==============================================================================
+
+  const seedPlugin = path.join(__dirname, 'bin/templates/plugin');
+  const newPluginPath = path.join(pluginsDir, answers.pluginName);
+
+  if (fs.existsSync(seedPlugin)) {
+
+    if (answers.server && answers.client) {
+
+      // This is a server-side and client-side plugin!, let's copy the template
+      fs.copySync(seedPlugin, newPluginPath);
+    } else  {
+
+      fs.copySync(seedPlugin, newPluginPath, {filter: (p) => {
+
+        // Allowing plugin folder and files with no subfolders
+        const rootRx = /plugin$|plugin\/[^/]*(\.).{2,3}/igm;
+        if (rootRx.test(p) && (fs.lstatSync(p).isDirectory() || fs.lstatSync(p).isFile())) {
+          return true;
+        }
+
+        // If it's a client-side plugin, copying client folder
+        if (answers.client) {
+          return /client/.test(p);
+        }
+
+        // If it's a server-side plugin, copying server folder
+        if (answers.server) {
+          return /server/.test(p);
+        }
+
+      }});
+    }
+
+    // Let's add this to the plugins.json
+    if (answers.addPluginsJson) {
+      const pluginsJson = path.join(dir, '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);
+
+            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);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+
+    console.log(`✨ Yay! Plugin created! Find your plugin: ${answers.pluginName} in the ./plugins folder`);
+  }
+
+}
+
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
 
+program
+  .command('create')
+  .description('creates a seed plugin')
+  .action(createSeedPlugin);
+
 program
   .command('list')
   .description('')

bin/cli-settings

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+const program = require('./commander');
+const inquirer = require('inquirer');
+const mongoose = require('../services/mongoose');
+const SettingsService = require('../services/settings');
+const util = require('./util');
+
+// Register the shutdown criteria.
+util.onshutdown([() => mongoose.disconnect()]);
+
+/**
+ * Change the organization name
+ */
+async function changeOrgName() {
+  try {
+    let settings = await SettingsService.retrieve();
+
+    let {organizationName} = await inquirer.prompt([
+      {
+        name: 'organizationName',
+        message: 'Organization Name',
+        default: settings.organizationName
+      }
+    ]);
+
+    if (settings.organizationName !== organizationName) {
+      settings.organizationName = organizationName;
+
+      await SettingsService.update(settings);
+
+      console.log('Settings were updated.');
+    } else {
+      console.log('No update needed, no change was made.');
+    }
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+
+  util.shutdown();
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('change-org-name')
+  .description('change the organization name')
+  .action(changeOrgName);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/templates/plugin/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

bin/templates/plugin/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

bin/templates/plugin/client/components/MyPluginComponent.css

@@ -0,0 +1,27 @@
+.myPluginContainer {
+    padding: 10px;
+    background: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.logo {
+  position: block;
+  animation: spin 2s infinite ease;
+  animation-delay: 1s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.description {
+  color: #444444;
+}

bin/templates/plugin/client/components/MyPluginComponent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {CoralLogo} from 'plugin-api/beta/client/components/ui';
+import styles from './MyPluginComponent.css';
+
+class MyPluginComponent extends React.Component {
+  render() {
+    return (
+      <div className={styles.myPluginContainer}>
+        <CoralLogo className={styles.logo}/>
+        <div className={styles.description}>
+          <h3>Plugin created by Talk CLI</h3>
+
+          <small>
+            To read more about plugins check{' '}
+            <a href="https://coralproject.github.io/talk/plugins-client.html">
+              our docs and guides!
+            </a>
+          </small>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MyPluginComponent;

bin/templates/plugin/client/index.js

@@ -0,0 +1,26 @@
+
+/**
+  This is a client index example file and it could look like this:
+  
+  ```
+  import LoveButton from './components/LoveButton';
+
+  export default {
+    slots: {
+      commentReactions: [LoveButton]
+    },
+    reducer,
+    translations
+  };
+  ```
+
+  To read more info on how to build client plugins. Please, go to: https://coralproject.github.io/talk/plugins-client.html
+ */
+
+import MyPluginComponent from './components/MyPluginComponent';
+
+export default {
+  slots: {
+    stream: [MyPluginComponent]
+  }
+};

bin/templates/plugin/client/translations.yml

@@ -0,0 +1,15 @@
+# 
+#  This file is for translations and they should look like this:
+#
+#
+#  ```
+#   en:
+#    coral-plugin-respect:
+#     respect: Respect
+#     respected: Respected
+#   es:
+#    coral-plugin-respect:
+#     respect: Respetar
+#     respected: Respetado
+#  ```
+# 

bin/templates/plugin/index.js

@@ -0,0 +1 @@
+module.exports = {};

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

@@ -1,4 +1,4 @@
-import {pym} from 'coral-framework';
+import pym from 'coral-framework/services/pym';
 import * as actions from '../constants/stream';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
@@ -47,3 +47,7 @@ export const removeCommentClassName = (idx) => ({
   type: actions.REMOVE_COMMENT_CLASSNAME,
   idx
 });
+
+export const setActiveTab = (tab) => (dispatch) => {
+  dispatch({type: actions.SET_ACTIVE_TAB, tab});
+};

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

@@ -0,0 +1,202 @@
+import React from 'react';
+
+import LoadMore from './LoadMore';
+import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import NewCount from './NewCount';
+import {TransitionGroup} from 'react-transition-group';
+import {forEachError} from 'coral-framework/utils';
+import Comment from '../components/Comment';
+
+const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+
+// resetCursors will return the id cursors of the first and second comment of
+// the current comment list. The cursors are used to dertermine which
+// comments to show. The spare cursor functions as a backup in case one
+// of the comments gets deleted.
+function resetCursors(state, props) {
+  const comments = props.root.asset.comments;
+  if (comments && comments.nodes.length) {
+    const idCursors = [comments.nodes[0].id];
+    if (comments.nodes[1]) {
+      idCursors.push(comments.nodes[1].id);
+    }
+    return {idCursors};
+  }
+  return {idCursors: []};
+}
+
+// invalidateCursor is called whenever a comment is removed which is referenced
+// by one of the 2 id cursors. It returns a new set of id cursors calculated
+// using the help of the backup cursor.
+function invalidateCursor(invalidated, state, props) {
+  const alt = invalidated === 1 ? 0 : 1;
+  const comments = props.root.asset.comments;
+  const idCursors = [];
+  if (state.idCursors[alt]) {
+    idCursors.push(state.idCursors[alt]);
+    const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
+    const nextInLine = comments.nodes[index + 1];
+    if (nextInLine) {
+      idCursors.push(nextInLine.id);
+    }
+  }
+  return {idCursors};
+}
+
+class AllCommentsPane extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...resetCursors(this.state, props),
+      loadingState: '',
+    };
+  }
+
+  componentWillReceiveProps(next) {
+    const {comments: prevComments} = this.props;
+    const {comments: nextComments} = next;
+
+    if (!prevComments && nextComments) {
+      this.setState(resetCursors);
+      return;
+    }
+
+    if (
+        prevComments && nextComments &&
+        nextComments.nodes.length < prevComments.nodes.length
+    ) {
+
+      // Invalidate first cursor if referenced comment was removed.
+      if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
+        this.setState(invalidateCursor(0, this.state, next));
+      }
+
+      // Invalidate second cursor if referenced comment was removed.
+      if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
+        this.setState(invalidateCursor(1, this.state, next));
+      }
+    }
+  }
+
+  loadMore = () => {
+    this.setState({loadingState: 'loading'});
+    this.props.loadMore()
+      .then(() => {
+        this.setState({loadingState: 'success'});
+      })
+      .catch((error) => {
+        this.setState({loadingState: 'error'});
+        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+      });
+  }
+
+  viewNewComments = () => {
+    this.setState(resetCursors);
+  };
+
+  // getVisibileComments returns a list containing comments
+  // which were authored by current user or comes after the `idCursor`.
+  getVisibleComments() {
+    const {comments, currentUser: user} = this.props;
+    const idCursor = this.state.idCursors[0];
+    const userId = user ? user.id : null;
+
+    if (!comments) {
+      return [];
+    }
+
+    const view = [];
+    let pastCursor = false;
+    comments.nodes.forEach((comment) => {
+      if (comment.id === idCursor) {
+        pastCursor = true;
+      }
+      if (pastCursor || comment.user.id === userId) {
+        view.push(comment);
+      }
+    });
+    return view;
+  }
+
+  render() {
+    const {
+      data,
+      root,
+      comments,
+      commentClassNames,
+      addTag,
+      removeTag,
+      ignoreUser,
+      setActiveReplyBox,
+      activeReplyBox,
+      addNotification,
+      disableReply,
+      postComment,
+      asset,
+      currentUser,
+      postFlag,
+      postDontAgree,
+      loadNewReplies,
+      deleteAction,
+      showSignInDialog,
+      commentIsIgnored,
+      charCountEnable,
+      maxCharCount,
+      editComment,
+    } = this.props;
+
+    const {loadingState} = this.state;
+    const view = this.getVisibleComments();
+
+    return (
+      <div className="talk-stream-comments-container">
+        <NewCount
+          count={comments.nodes.length - view.length}
+          loadMore={this.viewNewComments}
+        />
+        <TransitionGroup component='div' className="embed__stream">
+          {view.map((comment) => {
+            return commentIsIgnored(comment)
+              ? <IgnoredCommentTombstone key={comment.id} />
+              : <Comment
+                  commentClassNames={commentClassNames}
+                  data={data}
+                  root={root}
+                  disableReply={disableReply}
+                  setActiveReplyBox={setActiveReplyBox}
+                  activeReplyBox={activeReplyBox}
+                  addNotification={addNotification}
+                  depth={0}
+                  postComment={postComment}
+                  asset={asset}
+                  currentUser={currentUser}
+                  postFlag={postFlag}
+                  postDontAgree={postDontAgree}
+                  addTag={addTag}
+                  removeTag={removeTag}
+                  ignoreUser={ignoreUser}
+                  commentIsIgnored={commentIsIgnored}
+                  loadMore={loadNewReplies}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  key={comment.id}
+                  comment={comment}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  editComment={editComment}
+                />;
+          })}
+        </TransitionGroup>
+        <LoadMore
+          topLevel={true}
+          moreComments={asset.comments.hasNextPage}
+          loadMore={this.loadMore}
+          loadingState={loadingState}
+        />
+      </div>
+    );
+  }
+}
+
+export default AllCommentsPane;

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

@@ -1,11 +1,49 @@
-.Reply {
+.root {
+  margin-left: 20px;
+  margin-bottom: 16px;
   position: relative;
-  margin-bottom: 15px;
+  padding-top: 12px;
 }
 
-.Comment {
-  margin-bottom: 15px;
-  position: relative;
+.rootLevel0:first-child {
+  padding-top: 0;
+  border: 0;
+}
+
+.rootLevel0 {
+  margin-left: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.comment {
+  padding-left: 15px;
+  display: flex;
+  flex-flow: row;
+}
+
+.commentLevel0 {
+  padding-left: 0px;
+}
+
+.commentLevel1 {
+  border-left: 3px #212121 solid;
+}
+
+.commentLevel2 {
+  border-left: 2px #6a6a6a solid;
+}
+
+.commentLevel3 {
+  border-left: 2px #9e9e9e solid;
+}
+
+.commentLevel4 {
+  border-left: 2px #c1c1c1 solid;
+}
+
+.highlightedComment {
+  padding-left: 15px;
+  border-left: 3px solid rgb(35,118,216);
 }
 
 .pendingComment {
@@ -22,6 +60,13 @@
   font-style: italic;
 }
 
+.hr {
+  border: 0;
+  height: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
 /* element in the top right of the Comment */
 .topRight {
   float: right;
@@ -111,3 +156,20 @@
 .enter {
   animation: enter 1000ms;
 }
+
+.commentContainer {
+  flex: auto;
+}
+
+.commentAvatar {
+  max-width: 60px;
+}
+
+.commentAvatar:empty {
+  display: none;
+}
+
+.timerIcon {
+  vertical-align: middle;
+  font-size: 14px;
+}

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

@@ -9,6 +9,9 @@ import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
 import styles from './Comment.css';
+import {THREADING_LEVEL} from '../constants/stream';
+import merge from 'lodash/merge';
+import mapValues from 'lodash/mapValues';
 
 import {
   BestButton,
@@ -131,7 +134,6 @@ export default class Comment extends React.Component {
   }
 
   static propTypes = {
-    reactKey: PropTypes.string.isRequired,
 
     // id of currently opened ReplyBox. tracked in Stream.js
     activeReplyBox: PropTypes.string.isRequired,
@@ -145,12 +147,8 @@ export default class Comment extends React.Component {
     addNotification: PropTypes.func.isRequired,
     postComment: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
-    liveUpdates: PropTypes.bool.isRequired,
-    asset: PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string
-    }).isRequired,
+    liveUpdates: PropTypes.bool,
+    asset: PropTypes.object.isRequired,
     currentUser: PropTypes.shape({
       id: PropTypes.string.isRequired
     }),
@@ -316,6 +314,7 @@ export default class Comment extends React.Component {
       postDontAgree,
       setActiveReplyBox,
       activeReplyBox,
+      loadMore,
       deleteAction,
       disableReply,
       maxCharCount,
@@ -331,9 +330,11 @@ export default class Comment extends React.Component {
 
     const view = this.getVisibileReplies();
     const {loadingState} = this.state;
+    const isPending = comment.id.indexOf('pending') >= 0;
+    const isHighlighted = highlighted === comment.id;
 
     const hasMoreComments = comment.replies && (comment.replies.hasNextPage || comment.replies.nodes.length > view.length);
-    const replyCount = this.hasIgnoredReplies() ? '' : comment.replyCount;
+    const moreRepliesCount = this.hasIgnoredReplies() ? -1 : comment.replyCount - view.length;
     const flagSummary = getActionSummary('FlagActionSummary', comment);
     const dontAgreeSummary = getActionSummary(
       'DontAgreeActionSummary',
@@ -346,11 +347,6 @@ export default class Comment extends React.Component {
       myFlag = dontAgreeSummary.find((s) => s.current_user);
     }
 
-    let commentClass = parentId
-      ? `reply ${styles.Reply}`
-      : `comment ${styles.Comment}`;
-    commentClass += comment.id.indexOf('pending') >= 0 ? ` ${styles.pendingComment}` : '';
-
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) =>
       async function(...args) {
@@ -370,7 +366,7 @@ export default class Comment extends React.Component {
         addTag({
           id: comment.id,
           name: BEST_TAG,
-          assetId: asset.id
+          assetId: asset.id,
         }),
       () => 'Failed to tag comment as best'
     );
@@ -380,13 +376,13 @@ export default class Comment extends React.Component {
         removeTag({
           id: comment.id,
           name: BEST_TAG,
-          assetId: asset.id
+          assetId: asset.id,
         }),
       () => 'Failed to remove best comment tag'
     );
 
     /**
-     * classNamesToAdd
+     * conditionClassNames
      * adds classNames based on condition
      * classnames is an array of objects with key as classnames and value as conditions
      * i.e:
@@ -396,55 +392,48 @@ export default class Comment extends React.Component {
      *
      * This will add myClassName to comments tagged with STAFF TAG.
      * **/
-
-    const classNamesToAdd = commentClassNames.reduce((acc, className) => {
-      let res = [];
-
-      // Adding classNames based on tags
-      Object.keys(className).forEach((cn) => {
-        const condition = className[cn];
-        condition.tags.forEach((tag) => {
-          if (hasTag(comment.tags, tag)) {
-            res = [...res, cn];
-          }
-        });
+    const conditionalClassNames =
+      mapValues(merge({}, ...commentClassNames), (condition) => {
+        if (condition.tags) {
+          return condition.tags.some((tag) => hasTag(comment.tags, tag));
+        }
+        return false;
       });
 
-      // TODO: Compare rest of the comment obj to the condition if needed
+    const rootClassName = cn(
+      'talk-stream-comment-wrapper',
+      `talk-stream-comment-wrapper-level-${depth}`,
+      styles.root,
+      styles[`rootLevel${depth}`],
+      {
+        ...conditionalClassNames,
+        [styles.enter]: this.state.animateEnter,
+      },
+    );
 
-      return [...acc, ...res];
-    }, []);
+    const commentClassName = cn(
+      'talk-stream-comment',
+      `talk-stream-comment-level-${depth}`,
+      styles.comment,
+      styles[`commentLevel${depth}`],
+      {
+        [styles.pendingComment]: isPending,
+        [styles.highlightedComment]: isHighlighted,
+        'talk-stream-pending-comment': isPending,
+        'talk-stream-highlighted-comment': isHighlighted,
+      }
+    );
 
     return (
       <div
-        className={cn(commentClass, 'talk-stream-comment-wrapper', classNamesToAdd, {[styles.enter]: this.state.animateEnter})}
+        className={rootClassName}
         id={`c_${comment.id}`}
-        style={{marginLeft: depth * 30}}
       >
-        <hr aria-hidden={true} />
-        <div
-          className={highlighted === comment.id ? 'highlighted-comment' : ''}
-        >
-          <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-          {commentIsBest(comment)
-            ? <TagLabel><BestIndicator /></TagLabel>
-            : null }
-
-          <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-            <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
-            {
-              (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
-            }
-          </span>
+        <div className={commentClassName}>
 
           <Slot
-            className={styles.commentInfoBar}
-            fill="commentInfoBar"
-            depth={depth}
+            className={styles.commentAvatar}
+            fill="commentAvatar"
             comment={comment}
             commentId={comment.id}
             data={this.props.data}
@@ -452,157 +441,189 @@ export default class Comment extends React.Component {
             inline
           />
 
-          { (currentUser && (comment.user.id === currentUser.id)) &&
+          <div className={styles.commentContainer}>
+            
+            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-            /* User can edit/delete their own comment for a short window after posting */
-            <span className={cn(styles.topRight)}>
+            {commentIsBest(comment)
+              ? <TagLabel><BestIndicator /></TagLabel>
+              : null }
+
+            <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
               {
-                commentIsStillEditable(comment) &&
-                <a
-                  className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                  onClick={this.onClickEdit}>Edit</a>
+                (comment.editing && comment.editing.edited)
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
               }
             </span>
-          }
-          { (currentUser && (comment.user.id !== currentUser.id)) &&
 
-              /* TopRightMenu allows currentUser to ignore other users' comments */
-              <span className={cn(styles.topRight, styles.topRightMenu)}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
+            <Slot
+              className={styles.commentInfoBar}
+              fill="commentInfoBar"
+              depth={depth}
+              comment={comment}
+              commentId={comment.id}
+              data={this.props.data}
+              root={this.props.root}
+              inline
+            />
+
+            { (currentUser && (comment.user.id === currentUser.id)) &&
+
+              /* User can edit/delete their own comment for a short window after posting */
+              <span className={cn(styles.topRight)}>
+                {
+                  commentIsStillEditable(comment) &&
+                  <a
+                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                    onClick={this.onClickEdit}>Edit</a>
+                }
               </span>
-          }
-          {
-            this.state.isEditing
-            ? <EditableCommentContent
-                editComment={this.editComment}
-                addNotification={addNotification}
-                asset={asset}
-                comment={comment}
-                currentUser={currentUser}
-                maxCharCount={maxCharCount}
-                parentId={parentId}
-                stopEditing={this.stopEditing}
-                />
-            : <div>
-                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-              </div>
-          }
+            }
+            { (currentUser && (comment.user.id !== currentUser.id)) &&
 
-          <div className="commentActionsLeft comment__action-container">
-            <Slot
-              fill="commentReactions"
-              data={this.props.data}
-              root={this.props.root}
-              comment={comment}
-              commentId={comment.id}
-              inline
-            />
-            <ActionButton>
-              <IfUserCanModifyBest user={currentUser}>
-                <BestButton
-                  isBest={commentIsBest(comment)}
-                  addBest={addBestTag}
-                  removeBest={removeBestTag}
-                />
-              </IfUserCanModifyBest>
-            </ActionButton>
-            {!disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={this.showReplyBox}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                />
-              </ActionButton>}
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <Slot
-              fill="commentActions"
-              wrapperComponent={ActionButton}
-              data={this.props.data}
-              root={this.props.root}
-              asset={asset}
-              comment={comment}
-              commentId={comment.id}
-              inline
-            />
-            <ActionButton>
-              <FlagComment
-                flaggedByCurrentUser={!!myFlag}
-                flag={myFlag}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                addNotification={addNotification}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser}
-              />
-            </ActionButton>
-          </div>
-        </div>
-        {activeReplyBox === comment.id
-          ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
-              charCountEnable={charCountEnable}
-              maxCharCount={maxCharCount}
-              setActiveReplyBox={setActiveReplyBox}
-              parentId={parentId || comment.id}
-              addNotification={addNotification}
-              postComment={postComment}
-              currentUser={currentUser}
-              assetId={asset.id}
-            />
-          : null}
+                /* TopRightMenu allows currentUser to ignore other users' comments */
+                <span className={cn(styles.topRight, styles.topRightMenu)}>
+                  <TopRightMenu
+                    comment={comment}
+                    ignoreUser={ignoreUser}
+                    addNotification={addNotification} />
+                </span>
+            }
+            {
+              this.state.isEditing
+              ? <EditableCommentContent
+                  editComment={this.editComment}
+                  addNotification={addNotification}
+                  comment={comment}
+                  currentUser={currentUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  parentId={parentId}
+                  stopEditing={this.stopEditing}
+                  />
+              : <div>
+                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
+                </div>
+            }
 
-        <TransitionGroup>
-        {view.map((reply) => {
-          return commentIsIgnored(reply)
-            ? <IgnoredCommentTombstone key={reply.id} />
-            : <Comment
+            <div className="commentActionsLeft comment__action-container">
+              <Slot
+                fill="commentReactions"
+                data={this.props.data}
+                root={this.props.root}
+                comment={comment}
+                commentId={comment.id}
+                inline
+              />
+              <ActionButton>
+                <IfUserCanModifyBest user={currentUser}>
+                  <BestButton
+                    isBest={commentIsBest(comment)}
+                    addBest={addBestTag}
+                    removeBest={removeBestTag}
+                  />
+                </IfUserCanModifyBest>
+              </ActionButton>
+              {!disableReply &&
+                <ActionButton>
+                  <ReplyButton
+                    onClick={this.showReplyBox}
+                    parentCommentId={parentId || comment.id}
+                    currentUserId={currentUser && currentUser.id}
+                  />
+                </ActionButton>}
+            </div>
+            <div className="commentActionsRight comment__action-container">
+              <Slot
+                fill="commentActions"
+                wrapperComponent={ActionButton}
                 data={this.props.data}
                 root={this.props.root}
-                setActiveReplyBox={setActiveReplyBox}
-                disableReply={disableReply}
-                activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
-                parentId={comment.id}
-                postComment={postComment}
-                editComment={this.props.editComment}
-                depth={depth + 1}
                 asset={asset}
-                highlighted={highlighted}
-                currentUser={currentUser}
-                postFlag={postFlag}
-                deleteAction={deleteAction}
-                addTag={addTag}
-                removeTag={removeTag}
-                ignoreUser={ignoreUser}
+                comment={comment}
+                commentId={comment.id}
+                inline
+              />
+              <ActionButton>
+                <FlagComment
+                  flaggedByCurrentUser={!!myFlag}
+                  flag={myFlag}
+                  id={comment.id}
+                  author_id={comment.user.id}
+                  postFlag={postFlag}
+                  addNotification={addNotification}
+                  postDontAgree={postDontAgree}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  currentUser={currentUser}
+                />
+              </ActionButton>
+            </div>
+          </div>
+        </div>
+
+          {activeReplyBox === comment.id
+            ? <ReplyBox
+                commentPostedHandler={() => {
+                  setActiveReplyBox('');
+                }}
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
-                showSignInDialog={showSignInDialog}
-                commentIsIgnored={commentIsIgnored}
-                liveUpdates={liveUpdates}
-                reactKey={reply.id}
-                key={reply.id}
-                comment={reply}
-              />;
-        })}
-        </TransitionGroup>
-        <div className="talk-load-more-replies">
-          <LoadMore
-            topLevel={false}
-            replyCount={replyCount}
-            moreComments={hasMoreComments}
-            loadMore={this.loadNewReplies}
-            loadingState={loadingState}
-          />
+                setActiveReplyBox={setActiveReplyBox}
+                parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+                addNotification={addNotification}
+                postComment={postComment}
+                currentUser={currentUser}
+                assetId={asset.id}
+              />
+            : null}
+
+          <TransitionGroup>
+          {view.map((reply) => {
+            return commentIsIgnored(reply)
+              ? <IgnoredCommentTombstone key={reply.id} />
+              : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
+                  setActiveReplyBox={setActiveReplyBox}
+                  disableReply={disableReply}
+                  activeReplyBox={activeReplyBox}
+                  addNotification={addNotification}
+                  parentId={comment.id}
+                  postComment={postComment}
+                  editComment={this.props.editComment}
+                  depth={depth + 1}
+                  asset={asset}
+                  highlighted={highlighted}
+                  currentUser={currentUser}
+                  postFlag={postFlag}
+                  deleteAction={deleteAction}
+                  addTag={addTag}
+                  removeTag={removeTag}
+                  loadMore={loadMore}
+                  ignoreUser={ignoreUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  showSignInDialog={showSignInDialog}
+                  commentIsIgnored={commentIsIgnored}
+                  liveUpdates={liveUpdates}
+                  reactKey={reply.id}
+                  key={reply.id}
+                  comment={reply}
+                />;
+          })}
+          </TransitionGroup>
+          <div className="talk-load-more-replies">
+            <LoadMore
+              topLevel={false}
+              replyCount={moreRepliesCount}
+              moreComments={hasMoreComments}
+              loadMore={this.loadNewReplies}
+              loadingState={loadingState}
+            />
         </div>
       </div>
     );

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

@@ -18,11 +18,6 @@ export class EditableCommentContent extends React.Component {
 
     // show notification to the user (e.g. for errors)
     addNotification: PropTypes.func.isRequired,
-    asset: PropTypes.shape({
-      settings: PropTypes.shape({
-        charCountEnable: PropTypes.bool,
-      }),
-    }).isRequired,
 
     // comment that is being edited
     comment: PropTypes.shape({
@@ -39,6 +34,7 @@ export class EditableCommentContent extends React.Component {
     currentUser: PropTypes.shape({
       id: PropTypes.string.isRequired
     }),
+    charCountEnable: PropTypes.bool,
     maxCharCount: PropTypes.number,
 
     // edit a comment, passed {{ body }}
@@ -121,7 +117,7 @@ export class EditableCommentContent extends React.Component {
       <div className={styles.editCommentForm}>
         <CommentForm
           defaultValue={this.props.comment.body}
-          charCountEnable={this.props.asset.settings.charCountEnable}
+          charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
           submitEnabled={this.isSubmitEnabled}
           body={this.state.body}
@@ -149,7 +145,7 @@ export class EditableCommentContent extends React.Component {
                       }
                     </span>
                   : <span>
-                      <Icon name="timer"/> {t('edit_comment.edit_window_timer_prefix')}
+                      <Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
                       <CountdownSeconds
                         until={this.getEditableUntil()}
                         classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }

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

@@ -4,67 +4,68 @@ import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
 
-import {TabBar, Tab, TabContent, Button} from 'coral-ui';
-import Count from 'coral-plugin-comment-count/CommentCount';
+import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import ConfigureStreamContainer
   from 'coral-configure/containers/ConfigureStreamContainer';
+import cn from 'classnames';
 
 export default class Embed extends React.Component {
   changeTab = (tab) => {
-    switch (tab) {
-    case 0:
-      this.props.setActiveTab('stream');
-      break;
-    case 1:
-      this.props.setActiveTab('profile');
 
-        // TODO: move data fetching to profile container.
+    // TODO: move data fetching to appropiate containers.
+    switch (tab) {
+    case 'profile':
       this.props.data.refetch();
       break;
-    case 2:
-      this.props.setActiveTab('config');
-
-        // TODO: move data fetching to config container.
+    case 'config':
       this.props.data.refetch();
       break;
     }
+    this.props.setActiveTab(tab);
   };
 
-  handleShowProfile = () => this.props.setActiveTab('profile');
-
   render() {
-    const {activeTab, viewAllComments, commentId} = this.props;
-    const {asset: {totalCommentCount}} = this.props.root;
+    const {activeTab, commentId} = this.props;
     const {user} = this.props.auth;
+    const hasHighlightedComment = !!commentId;
 
     return (
-      <div>
-        <div className="commentStream">
-          <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-stream-tabbar'>
-            <Tab className={'talk-stream-comment-count-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
-            <Tab className={'talk-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
-            <Tab className={'talk-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
-          </TabBar>
-          {commentId &&
-            <Button
-              cStyle="darkGrey"
-              style={{float: 'right'}}
-              onClick={viewAllComments}
-            >
-              {t('framework.show_all_comments')}
-            </Button>}
-          <Slot fill="embed" />
-          <TabContent show={activeTab === 'stream'}>
+      <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+        <TabBar
+          onTabClick={this.changeTab}
+          activeTab={activeTab}
+          className='talk-embed-stream-tab-bar'
+          aria-controls='talk-embed-stream-tab-content'
+        >
+          <Tab tabId={'stream'} className={'talk-embed-stream-comments-tab'}>
+            {t('embed_comments_tab')}
+          </Tab>
+          <Tab tabId={'profile'} className={'talk-embed-stream-profile-tab'}>
+            {t('framework.my_profile')}
+          </Tab>
+          {can(user, 'UPDATE_CONFIG') &&
+            <Tab tabId={'config'} className={'talk-embed-stream-configuration-tab'}>
+              {t('framework.configure_stream')}
+            </Tab>
+          }
+        </TabBar>
+        <Slot fill="embed" />
+
+        <TabContent
+          activeTab={activeTab}
+          id='talk-embed-stream-tab-content'
+        >
+          <TabPane tabId={'stream'}>
             <Stream data={this.props.data} root={this.props.root} />
-          </TabContent>
-          <TabContent show={activeTab === 'profile'}>
+          </TabPane>
+          <TabPane tabId={'profile'}>
             <ProfileContainer />
-          </TabContent>
-          <TabContent show={activeTab === 'config'}>
+          </TabPane>
+          <TabPane tabId={'config'}>
             <ConfigureStreamContainer />
-          </TabContent>
-        </div>
+          </TabPane>
+        </TabContent>
       </div>
     );
   }

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

@@ -5,27 +5,15 @@ import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  initialState = true;
-
   replyCountFormat = (count) => {
     if (!count) {
-      return t('framework.view_all_replies_unknown_number');
+      return t('framework.show_all_replies');
     }
     if (count === 1) {
-      return t('framework.view_reply');
+      return t('framework.show_1_more_reply');
     }
 
-    if (this.initialState) {
-      return t('framework.view_all_replies_initial', count);
-    } else {
-      return t('framework.view_all_replies', count);
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (['success', 'error'].indexOf(nextProps.loadingState) >= 0) {
-      this.initialState = false;
-    }
+    return t('framework.show_x_more_replies', count);
   }
 
   render () {

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

@@ -1,16 +1,17 @@
 import React, {PropTypes} from 'react';
+import {Button} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
 const NewCount = ({count, loadMore}) => {
-  return <div className='coral-new-comments coral-load-more'>
+  return <div className='talk-new-comments talk-load-more'>
     {
       count ?
-      <button onClick={loadMore}>
+      <Button onClick={loadMore}>
         {count === 1
           ? t('framework.new_count', count, t('framework.comment'))
           : t('framework.new_count', count, t('framework.comments'))}
-      </button>
+      </Button>
       : null
     }
   </div>;

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

@@ -0,0 +1,29 @@
+.root {
+  margin-top: 6px;
+}
+
+.viewAllButton {
+  position: absolute;
+  right: 0px;
+}
+
+.tabPanel {
+  margin-top: 8px;
+}
+
+.filterWrapper {
+  position: absolute;
+  right: 0;
+  margin-top: 6px;
+}
+
+.highlightedContainer {
+  margin-top: 28px;
+}
+
+.tabContainer {
+  position: relative;
+  margin-top: 28px;
+  padding-bottom: 50px;
+  min-height: 600px;
+}

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

@@ -1,5 +1,4 @@
 import React, {PropTypes} from 'react';
-import LoadMore from './LoadMore';
 import {StreamError} from './StreamError';
 import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
@@ -10,168 +9,79 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
+import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
-import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import NewCount from './NewCount';
-import {TransitionGroup} from 'react-transition-group';
-import {forEachError} from 'coral-framework/utils';
+import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
+import cn from 'classnames';
 
-const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+import {getTopLevelParent} from '../graphql/utils';
+import AllCommentsPane from './AllCommentsPane';
 
-// resetCursors will return the id cursors of the first and second comment of
-// the current comment list. The cursors are used to dertermine which
-// comments to show. The spare cursor functions as a backup in case one
-// of the comments gets deleted.
-function resetCursors(state, props) {
-  const comments = props.root.asset.comments;
-  if (comments && comments.nodes.length) {
-    const idCursors = [comments.nodes[0].id];
-    if (comments.nodes[1]) {
-      idCursors.push(comments.nodes[1].id);
-    }
-    return {idCursors};
-  }
-  return {idCursors: []};
-}
-
-// invalidateCursor is called whenever a comment is removed which is referenced
-// by one of the 2 id cursors. It returns a new set of id cursors calculated
-// using the help of the backup cursor.
-function invalidateCursor(invalidated, state, props) {
-  const alt = invalidated === 1 ? 0 : 1;
-  const comments = props.root.asset.comments;
-  const idCursors = [];
-  if (state.idCursors[alt]) {
-    idCursors.push(state.idCursors[alt]);
-    const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
-    const nextInLine = comments.nodes[index + 1];
-    if (nextInLine) {
-      idCursors.push(nextInLine.id);
-    }
-  }
-  return {idCursors};
-}
+import styles from './Stream.css';
 
 class Stream extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      ...resetCursors(this.state, props),
       keepCommentBox: false,
-      loadingState: '',
     };
   }
 
   componentWillReceiveProps(next) {
-    const {root: {asset: {comments: prevComments}}} = this.props;
-    const {root: {asset: {comments: nextComments}}} = next;
-
-    if (!prevComments && nextComments) {
-      this.setState(resetCursors);
-      return;
-    }
 
     // Keep comment box when user was live suspended, banned, ...
     if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
       this.setState({keepCommentBox: true});
     }
-
-    if (
-        prevComments && nextComments &&
-        nextComments.nodes.length < prevComments.nodes.length
-    ) {
-
-      // Invalidate first cursor if referenced comment was removed.
-      if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
-        this.setState(invalidateCursor(0, this.state, next));
-      }
-
-      // Invalidate second cursor if referenced comment was removed.
-      if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
-        this.setState(invalidateCursor(1, this.state, next));
-      }
-    }
   }
 
-  viewNewComments = () => {
-    this.setState(resetCursors);
-  };
-
-  setActiveReplyBox = (reactKey) => {
+  setActiveReplyBox = (id) => {
     if (!this.props.auth.user) {
       this.props.showSignInDialog();
     } else {
-      this.props.setActiveReplyBox(reactKey);
+      this.props.setActiveReplyBox(id);
     }
   };
 
-  loadMoreComments = () => {
-    this.setState({loadingState: 'loading'});
-    this.props.loadMoreComments()
-      .then(() => {
-        this.setState({loadingState: 'success'});
-      })
-      .catch((error) => {
-        this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
-      });
-  }
-
-  // getVisibileComments returns a list containing comments
-  // which were authored by current user or comes after the `idCursor`.
-  getVisibleComments() {
-    const {root: {asset: {comments}}, auth: {user}} = this.props;
-    const idCursor = this.state.idCursors[0];
-    const userId = user ? user.id : null;
-
-    if (!comments) {
-      return [];
-    }
-
-    const view = [];
-    let pastCursor = false;
-    comments.nodes.forEach((comment) => {
-      if (comment.id === idCursor) {
-        pastCursor = true;
-      }
-      if (pastCursor || comment.user.id === userId) {
-        view.push(comment);
-      }
-    });
-    return view;
-  }
-
   userIsDegraged({auth: {user}} = this.props) {
     return !can(user, 'INTERACT_WITH_COMMUNITY');
   }
 
   render() {
     const {
+      data,
+      root,
+      activeReplyBox,
+      setActiveReplyBox,
+      appendItemArray,
       commentClassNames,
-      root: {asset, asset: {comments}, comment, me},
+      root: {asset, asset: {comments, totalCommentCount}, comment, me},
       postComment,
       addNotification,
+      editComment,
       postFlag,
       postDontAgree,
       deleteAction,
       showSignInDialog,
+      updateItem,
       addTag,
       ignoreUser,
+      activeStreamTab,
+      setActiveStreamTab,
+      loadNewReplies,
+      loadMoreComments,
+      viewAllComments,
       auth: {loggedIn, user},
       removeTag,
-      pluginProps,
       editName
     } = this.props;
-    const {keepCommentBox, loadingState} = this.state;
-    const view = this.getVisibleComments();
+    const {keepCommentBox} = this.state;
     const open = asset.closedAt === null;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
-    const highlightedComment = comment && comment.parent
-      ? comment.parent
-      : comment;
+    const highlightedComment = comment && getTopLevelParent(comment);
 
     const banned = user && user.status === 'BANNED';
     const temporarilySuspended =
@@ -195,7 +105,15 @@ class Stream extends React.Component {
     }
 
     return (
-      <div id="stream">
+      <div id="stream" className={styles.root}>
+        {comment &&
+          <Button
+            cStyle="darkGrey"
+            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
+            onClick={viewAllComments}
+          >
+            {t('framework.show_all_comments')}
+          </Button>}
 
         {open
           ? <div id="commentBox">
@@ -212,7 +130,7 @@ class Stream extends React.Component {
                 <RestrictedMessageBox>
                   {t(
                     'stream.temporarily_suspended',
-                    this.props.root.settings.organizationName,
+                    root.settings.organizationName,
                     timeago(user.suspension.until)
                   )}
                 </RestrictedMessageBox>}
@@ -224,10 +142,10 @@ class Stream extends React.Component {
                 />}
               {showCommentBox &&
                 <CommentBox
-                  addNotification={this.props.addNotification}
-                  postComment={this.props.postComment}
-                  appendItemArray={this.props.appendItemArray}
-                  updateItem={this.props.updateItem}
+                  addNotification={addNotification}
+                  postComment={postComment}
+                  appendItemArray={appendItemArray}
+                  updateItem={updateItem}
                   assetId={asset.id}
                   premod={asset.settings.moderation}
                   isReply={false}
@@ -247,86 +165,103 @@ class Stream extends React.Component {
           />
         )}
 
-        <div className="talk-stream-wrapper-box">
-          <Slot fill="streamBox" />
-        </div>
-
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
-          ? <Comment
-              data={this.props.data}
-              root={this.props.root}
-              setActiveReplyBox={this.setActiveReplyBox}
-              activeReplyBox={this.props.activeReplyBox}
-              addNotification={addNotification}
-              depth={0}
-              disableReply={!open}
-              postComment={this.props.postComment}
-              asset={asset}
-              currentUser={user}
-              highlighted={comment.id}
-              postFlag={this.props.postFlag}
-              postDontAgree={this.props.postDontAgree}
-              loadMore={this.props.loadNewReplies}
-              deleteAction={this.props.deleteAction}
-              showSignInDialog={this.props.showSignInDialog}
-              key={highlightedComment.id}
-              commentIsIgnored={commentIsIgnored}
-              reactKey={highlightedComment.id}
-              comment={highlightedComment}
-              charCountEnable={asset.settings.charCountEnable}
-              maxCharCount={asset.settings.charCount}
-              editComment={this.props.editComment}
-              liveUpdates={true}
-            />
-          : <div className="talk-stream-comments-container">
-              <NewCount
-                count={comments.nodes.length - view.length}
-                loadMore={this.viewNewComments}
+          ? (
+            <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+              <Comment
+                data={data}
+                root={root}
+                commentClassNames={commentClassNames}
+                addTag={addTag}
+                removeTag={removeTag}
+                ignoreUser={ignoreUser}
+                setActiveReplyBox={setActiveReplyBox}
+                activeReplyBox={activeReplyBox}
+                addNotification={addNotification}
+                depth={0}
+                disableReply={!open}
+                postComment={postComment}
+                asset={asset}
+                currentUser={user}
+                highlighted={comment.id}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                loadMore={loadNewReplies}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                key={highlightedComment.id}
+                commentIsIgnored={commentIsIgnored}
+                comment={highlightedComment}
+                charCountEnable={asset.settings.charCountEnable}
+                maxCharCount={asset.settings.charCount}
+                editComment={editComment}
+                liveUpdates={true}
               />
-              <TransitionGroup component='div' className="embed__stream">
-                {view.map((comment) => {
-                  return commentIsIgnored(comment)
-                    ? <IgnoredCommentTombstone key={comment.id} />
-                    : <Comment
-                        commentClassNames={commentClassNames}
-                        data={this.props.data}
-                        root={this.props.root}
-                        disableReply={!open}
-                        setActiveReplyBox={this.setActiveReplyBox}
-                        activeReplyBox={this.props.activeReplyBox}
-                        addNotification={addNotification}
-                        depth={0}
-                        postComment={postComment}
-                        asset={asset}
-                        currentUser={user}
-                        postFlag={postFlag}
-                        postDontAgree={postDontAgree}
-                        addTag={addTag}
-                        removeTag={removeTag}
-                        ignoreUser={ignoreUser}
-                        commentIsIgnored={commentIsIgnored}
-                        loadMore={this.props.loadNewReplies}
-                        deleteAction={deleteAction}
-                        showSignInDialog={showSignInDialog}
-                        key={comment.id}
-                        reactKey={comment.id}
-                        comment={comment}
-                        pluginProps={pluginProps}
-                        charCountEnable={asset.settings.charCountEnable}
-                        maxCharCount={asset.settings.charCount}
-                        editComment={this.props.editComment}
-                        liveUpdates={false}
-                      />;
-                })}
-              </TransitionGroup>
-              <LoadMore
-                topLevel={true}
-                moreComments={asset.comments.hasNextPage}
-                loadMore={this.loadMoreComments}
-                loadingState={loadingState}
-              />
-            </div>}
+            </div>
+            )
+          : <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
+              <div
+                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
+              >
+                <Slot fill="streamFilter" />
+              </div>
+              <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
+                {getSlotComponents('streamTabs').map((PluginComponent) => (
+                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      active={activeStreamTab === PluginComponent.talkPluginName}
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </Tab>
+                ))}
+                <Tab tabId={'all'}>
+                  All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
+                </Tab>
+              </TabBar>
+              <TabContent activeTab={activeStreamTab} sub>
+                {getSlotComponents('streamTabPanes').map((PluginComponent) => (
+                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </TabPane>
+                ))}
+                <TabPane tabId={'all'}>
+                  <AllCommentsPane
+                    data={data}
+                    root={root}
+                    comments={comments}
+                    commentClassNames={commentClassNames}
+                    addTag={addTag}
+                    removeTag={removeTag}
+                    ignoreUser={ignoreUser}
+                    setActiveReplyBox={setActiveReplyBox}
+                    activeReplyBox={activeReplyBox}
+                    addNotification={addNotification}
+                    disableReply={!open}
+                    postComment={postComment}
+                    asset={asset}
+                    currentUser={user}
+                    postFlag={postFlag}
+                    postDontAgree={postDontAgree}
+                    loadMore={loadMoreComments}
+                    loadNewReplies={loadNewReplies}
+                    deleteAction={deleteAction}
+                    showSignInDialog={showSignInDialog}
+                    commentIsIgnored={commentIsIgnored}
+                    charCountEnable={asset.settings.charCountEnable}
+                    maxCharCount={asset.settings.charCount}
+                    editComment={editComment}
+                  />
+                </TabPane>
+              </TabContent>
+            </div>
+          }
       </div>
     );
   }

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

@@ -3,3 +3,5 @@ export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
 export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
 export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
 export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
+export const THREADING_LEVEL = process.env.TALK_THREADING_LEVEL;
+export const SET_ACTIVE_TAB = 'CORAL_STREAM_SET_ACTIVE_TAB';

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

@@ -10,7 +10,8 @@ const pluginFragments = getSlotsFragments([
   'commentInfoBar',
   'commentActions',
   'commentContent',
-  'commentReactions'
+  'commentReactions',
+  'commentAvatar'
 ]);
 
 export default withFragments({

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

@@ -7,7 +7,9 @@ import branch from 'recompose/branch';
 import renderComponent from 'recompose/renderComponent';
 
 import {Spinner} from 'coral-ui';
-import {authActions, assetActions, pym} from 'coral-framework';
+import * as authActions from 'coral-framework/actions/auth';
+import * as assetActions from 'coral-framework/actions/asset';
+import pym from 'coral-framework/services/pym';
 import {getDefinitionName} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
@@ -16,7 +18,6 @@ import {addNotification} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 
 import {setActiveTab} from '../actions/embed';
-import {viewAllComments} from '../actions/stream';
 
 const {logout, checkLogin} = authActions;
 const {fetchAssetSuccess} = assetActions;
@@ -146,9 +147,6 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
 
 const EMBED_QUERY = gql`
   query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
-    asset(id: $assetId, url: $assetUrl) {
-      totalCommentCount(excludeIgnored: $excludeIgnored)
-    }
     me {
       id
       status
@@ -185,7 +183,6 @@ const mapDispatchToProps = (dispatch) =>
       logout,
       checkLogin,
       setActiveTab,
-      viewAllComments,
       fetchAssetSuccess,
       addNotification,
     },

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

@@ -2,18 +2,20 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {ADDTL_COMMENTS_ON_LOAD_MORE} from '../constants/stream';
+import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
 import {
   withPostComment, withPostFlag, withPostDontAgree, withDeleteAction,
   withAddTag, withRemoveTag, withIgnoreUser, withEditComment,
 } from 'coral-framework/graphql/mutations';
 
-import {notificationActions, authActions} from 'coral-framework';
+import * as authActions from 'coral-framework/actions/auth';
+import * as notificationActions from 'coral-framework/actions/notification';
 import {editName} from 'coral-framework/actions/user';
-import {setActiveReplyBox} from '../actions/stream';
+import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments} from 'coral-framework/hocs';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import {Spinner} from 'coral-ui';
 import {getDefinitionName} from 'coral-framework/utils';
 import {
@@ -21,6 +23,7 @@ import {
   insertCommentIntoEmbedQuery,
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
+  nest,
 } from '../graphql/utils';
 
 const {showSignInDialog} = authActions;
@@ -91,9 +94,7 @@ class StreamContainer extends React.Component {
   }
 
   loadNewReplies = (parent_id) => {
-    const comment = this.props.root.comment
-      ? this.props.root.comment.parent || this.props.root.comment // highlighted comment.
-      : this.props.root.asset.comments.nodes.filter((comment) => comment.id === parent_id)[0];
+    const comment = findCommentInEmbedQuery(this.props.root, parent_id);
 
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
@@ -157,16 +158,19 @@ const commentFragment = gql`
   fragment CoralEmbedStream_Stream_comment on Comment {
     id
     ...${getDefinitionName(Comment.fragments.comment)}
-    replyCount(excludeIgnored: $excludeIgnored)
-    replies(excludeIgnored: $excludeIgnored) {
-      nodes {
-        id
-        ...${getDefinitionName(Comment.fragments.comment)}
+    ${nest(`
+      replyCount(excludeIgnored: $excludeIgnored)
+      replies(excludeIgnored: $excludeIgnored) {
+        nodes {
+          id
+          ...${getDefinitionName(Comment.fragments.comment)}
+          ...nest
+        }
+        hasNextPage
+        startCursor
+        endCursor
       }
-      hasNextPage
-      startCursor
-      endCursor
-    }
+    `, THREADING_LEVEL)}
   }
   ${Comment.fragments.comment}
 `;
@@ -205,16 +209,19 @@ const LOAD_MORE_QUERY = gql`
       nodes {
         id
         ...${getDefinitionName(Comment.fragments.comment)}
-        replyCount(excludeIgnored: $excludeIgnored)
-        replies(limit: 3, excludeIgnored: $excludeIgnored) {
-          nodes {
-            id
-            ...${getDefinitionName(Comment.fragments.comment)}
+        ${nest(`
+          replyCount(excludeIgnored: $excludeIgnored)
+          replies(limit: 3, excludeIgnored: $excludeIgnored) {
+            nodes {
+              id
+              ...${getDefinitionName(Comment.fragments.comment)}
+              ...nest
+            }
+            hasNextPage
+            startCursor
+            endCursor
           }
-          hasNextPage
-          startCursor
-          endCursor
-        }
+        `, THREADING_LEVEL)}
       }
       hasNextPage
       startCursor
@@ -224,14 +231,22 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
+const pluginFragments = getSlotsFragments([
+  'streamTabs',
+  'streamTabPanes',
+]);
+
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
       comment(id: $commentId) @include(if: $hasComment) {
         ...CoralEmbedStream_Stream_comment
-        parent {
-          ...CoralEmbedStream_Stream_comment
-        }
+        ${nest(`
+          parent {
+            ...CoralEmbedStream_Stream_comment
+            ...nest
+          }
+        `, THREADING_LEVEL)}
       }
       asset(id: $assetId, url: $assetUrl) {
         id
@@ -262,6 +277,7 @@ const fragments = {
           startCursor
           endCursor
         }
+        ${pluginFragments.spreads('asset')}
       }
       me {
         status
@@ -272,8 +288,11 @@ const fragments = {
       settings {
         organizationName
       }
+      ${pluginFragments.spreads('root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
+    ${pluginFragments.definitions('asset')}
+    ${pluginFragments.definitions('root')}
     ${Comment.fragments.root}
     ${commentFragment}
   `,
@@ -289,6 +308,8 @@ const mapStateToProps = (state) => ({
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
   previousTab: state.embed.previousTab,
+  activeStreamTab: state.stream.activeTab,
+  previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames
 });
 
@@ -298,6 +319,8 @@ const mapDispatchToProps = (dispatch) =>
     addNotification,
     setActiveReplyBox,
     editName,
+    viewAllComments,
+    setActiveStreamTab: setActiveTab,
   }, dispatch);
 
 export default compose(

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

@@ -1,21 +1,29 @@
 import update from 'immutability-helper';
+function determineCommentDepth(comment) {
+  let depth = 0;
+  let cur = comment;
+  while (cur.parent) {
+    cur = cur.parent;
+    depth++;
+  }
+  return depth;
+}
 
 function applyToCommentsOrigin(root, callback) {
   if (root.comment) {
-    if (root.comment.parent) {
-      return update(root, {
-        comment: {
-          parent: {
-            $apply: (node) => callback(node),
-          },
-        },
-      });
+    let comment = root.comment;
+    for (let depth = 0; depth <= determineCommentDepth(comment); depth++) {
+      let changes = {$apply: (node) => node ? callback(node) : node};
+      for (let i = 0; i < depth; i++) {
+        changes = {parent: changes};
+      }
+      comment = update(comment, changes);
     }
-    return update(root, {
-      comment: {
-        $apply: (node) => callback(node),
-      },
-    });
+
+    return {
+      ...root,
+      comment,
+    };
   }
   return update(root, {
     asset: {$apply: (asset) => callback(asset)},
@@ -97,6 +105,13 @@ export function removeCommentFromEmbedQuery(root, id) {
   return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
 }
 
+export function getTopLevelParent(comment) {
+  if (comment.parent) {
+    return getTopLevelParent(comment.parent);
+  }
+  return comment;
+}
+
 function findComment(nodes, callback) {
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
@@ -119,12 +134,7 @@ export function findCommentInEmbedQuery(root, callbackOrId) {
     callback = (node) => node.id === callbackOrId;
   }
   if (root.comment) {
-    if (callback(root.comment)) {
-      return root.comment;
-    }
-    if (root.comment.parent && callback(root.comment.parent)) {
-      return root.comment.parent;
-    }
+    return findComment([getTopLevelParent(root.comment)], callback);
   }
   if (!root.asset.comments) {
     return false;
@@ -179,3 +189,33 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
 export function insertFetchedCommentsIntoEmbedQuery(root, comments, parent_id) {
   return applyToCommentsOrigin(root, (origin) => findAndInsertFetchedComments(origin, comments, parent_id));
 }
+
+/**
+ * Nest a string in itself repeatly until `level` has been reached.
+ *
+ * Example:
+ * nest(`
+ *   a
+ *   ...nest
+ *   b
+ * `, 2)
+ *
+ * Output:
+ * `
+ *   a
+ *   a
+ *   b
+ *   b
+ * `
+ */
+export function nest(document, level) {
+  let result = '';
+  for (let x = 0; x < level; x++) {
+    if (x === 0) {
+      result += document;
+      continue;
+    }
+    result = result.replace('...nest', document);
+  }
+  return result.replace('...nest', '');
+}

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

@@ -7,8 +7,8 @@ import './graphql';
 import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
 import {getStore, injectReducers} from 'coral-framework/services/store';
 import {getClient} from 'coral-framework/services/client';
+import pym from 'coral-framework/services/pym';
 import AppRouter from './AppRouter';
-import {pym} from 'coral-framework';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 import reducers from './reducers';
 
@@ -48,5 +48,5 @@ render(
   <ApolloProvider client={client} store={store}>
     <AppRouter />
   </ApolloProvider>
-  , document.querySelector('#coralStream')
+  , document.querySelector('#talk-embed-stream-container')
 );

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

@@ -20,11 +20,19 @@ const initialState = {
   assetId: getQueryVariable('asset_id'),
   assetUrl: getQueryVariable('asset_url'),
   commentId: getQueryVariable('comment_id'),
-  commentClassNames: []
+  commentClassNames: [],
+  activeTab: 'all',
+  previousTab: '',
 };
 
 export default function stream(state = initialState, action) {
   switch (action.type) {
+  case actions.SET_ACTIVE_TAB:
+    return {
+      ...state,
+      activeTab: action.tab,
+      previousTab: state.activeTab,
+    };
   case authActions.LOGOUT:
     return {
       ...state,

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

@@ -17,7 +17,7 @@ body {
   height: auto !important;
 }
 
-#coralStream {
+#talk-embed-stream-container {
   padding: 4px;
 }
 
@@ -25,7 +25,7 @@ body {
   min-height: 600px;
 }
 
-button {
+.coralButton {
   margin: 5px 10px 5px 0px;
   background: none;
   padding: 0px;
@@ -33,16 +33,16 @@ button {
   font-size: inherit;
 }
 
-button:hover {
+.coralButton:hover {
   border-radius: 2px;
   color: #767676;
 }
 
-button i {
+.coralButton i {
   margin-right: 3px;
 }
 
-hr {
+.coralHr {
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -112,13 +112,6 @@ hr {
   color: #2a2a2a;
 }
 
-.commentStream .material-icons {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
-}
-
 /* Question Box Styles */
 .coral-plugin-questionbox-info {
   top: 0;
@@ -181,21 +174,10 @@ hr {
   display: none;
 }
 
-.talk-stream-wrapper-box {
-  padding: 10px 0;
-}
-
 .talk-stream-comments-container {
   position: relative;
 }
 
-.commentStream {
-  /* prevent absolutely positioned final permalink popover from being clipped */
-  padding-bottom: 50px;
-  min-height: 600px;
-  position: relative;
-}
-
 /* Comment Box Styles */
 .talk-plugin-commentbox-container {
   display: flex;
@@ -266,11 +248,6 @@ hr {
   float: right;
 }
 
-.highlighted-comment {
-  padding-left: 10px;
-  border-left: 3px solid rgb(35,118,216);
-}
-
 /* Tag Labels */
 
 .coral-plugin-tag-label {
@@ -282,31 +259,16 @@ hr {
   border-radius: 2px;
 }
 
-
-
-/* Reply styles */
-
-.comment .reply {
-  margin: 0px 0px 10px 20px;
-}
-
 /* Comment Action Styles */
 
 .commentActionsRight, .replyActionsRight {
   display: flex;
   justify-content: flex-end;
-  width: 30%;
 }
 .commentActionsLeft, .replyActionsLeft {
   display: flex;
   justify-content: flex-start;
   float: left;
-  width: 70%;
-}
-
-.comment__action-container .material-icons {
-  font-size: 12px;
-  margin-left: 3px;
 }
 
 button.comment__action-button,
@@ -422,9 +384,11 @@ button.comment__action-button[disabled],
 }
 
 .talk-load-more button {
+  width: 100%;
   text-align: center;
   color: #FFF;
   background-color: #2376D8;
+  border-radius: 2px;
   cursor: pointer;
   padding: 10px;
   border-radius: 2px;
@@ -437,30 +401,28 @@ button.comment__action-button[disabled],
   background-color: #4399FF;
 }
 
-.talk-load-more-replies, .coral-new-comments {
+.talk-new-comments {
   width: 100%;
-  display: flex;
-  justify-content: center;
-  cursor: pointer;
+  text-align: center;
+  margin: 4px 0;
 }
 
-.coral-new-comments {
-  position: relative;
-  top: 1.8em;
-  z-index: 100;
+.talk-load-more-replies {
+  width: 100%;
+  padding-left: 20px;
+  box-sizing: border-box;
 }
 
-.talk-load-more-replies button.talk-load-more, .coral-new-comments  button.talk-load-more{
-  width: initial;
+.talk-load-more-replies .talk-load-more-button {
+  background-color: transparent;
+  color: #979797;
+  border: #979797 solid 1px;
+  border-radius: 2px;
 }
 
-@media (min-device-width : 300px) and (max-device-width : 420px) {
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
-    visibility: collapse;
-    margin-left: -30px;
-  }
-
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
-    visibility: visible;
-  }
+.talk-load-more-replies .talk-load-more:hover button {
+  background-color: #979797;
+  color: white;
 }
+
+

client/coral-framework/actions/auth.js

@@ -3,12 +3,16 @@ import bowser from 'bowser';
 import * as actions from '../constants/auth';
 import * as Storage from '../helpers/storage';
 import coralApi, {base} from '../helpers/request';
-import pym from '../services/PymConnection';
+import pym from '../services/pym';
 
 import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
+import {isSlotEmpty} from 'plugin-api/beta/client/services';
 
 export const showSignInDialog = () => (dispatch, getState) => {
+  if (isSlotEmpty('login')) {
+    return;
+  }
   const signInPopUp = window.open(
     '/embed/stream/login',
     'Login',

client/coral-framework/actions/index.js

@@ -1,9 +0,0 @@
-import * as authActions from './auth';
-import * as assetActions from './asset';
-import * as notificationActions from './notification';
-
-export default {
-  authActions,
-  assetActions,
-  notificationActions,
-};

client/coral-framework/actions/notification.js

@@ -1,4 +1,4 @@
-import pym from '../services/PymConnection';
+import pym from '../services/pym';
 import * as actions from '../constants/notification';
 
 export const addNotification = (notifType, text) => {

client/coral-framework/components/ClickOutside.js

@@ -1,7 +1,7 @@
 import {Component, cloneElement, Children} from 'react';
 import PropTypes from 'prop-types';
 import {findDOMNode} from 'react-dom';
-import {pym} from 'coral-framework';
+import pym from 'coral-framework/services/pym';
 
 export default class ClickOutside extends Component {
   static propTypes = {

client/coral-framework/helpers/plugins.js

@@ -7,17 +7,31 @@ import flatten from 'lodash/flatten';
 import flattenDeep from 'lodash/flattenDeep';
 import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
 import {loadTranslations} from 'coral-framework/services/i18n';
-import {injectReducers} from 'coral-framework/services/store';
+import {injectReducers, getStore} from 'coral-framework/services/store';
 import camelize from './camelize';
 
+export function getSlotComponents(slot) {
+  const pluginConfig = getStore().getState().config.plugin_config;
+
+  return flatten(plugins
+
+    // Filter out components that have slots and have been disabled in `plugin_config`
+      .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
+
+      .filter((o) => o.module.slots[slot])
+      .map((o) => o.module.slots[slot])
+  );
+}
+
+export function isSlotEmpty(slot) {
+  return getSlotComponents(slot).length === 0;
+}
+
 /**
  * Returns React Elements for given slot.
  */
 export function getSlotElements(slot, props = {}) {
-  const components = flatten(plugins
-    .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]));
-  return components
+  return getSlotComponents(slot)
     .map((component, i) => React.createElement(component, {key: i, ...props}));
 }
 
@@ -64,8 +78,8 @@ export function getSlotsFragments(slots) {
   }
   const components = uniq(flattenDeep(slots.map((slot) => {
     return plugins
-    .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]);
+      .filter((o) => o.module.slots ? o.module.slots[slot] : false)
+      .map((o) => o.module.slots[slot]);
   })));
 
   const fragments = getComponentFragments(components);
@@ -99,7 +113,22 @@ export function injectPluginsReducers() {
   const reducers = merge(
     ...plugins
       .filter((o) => o.module.reducer)
-      .map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
+      .map((o) => ({[camelize(o.name)] : o.module.reducer}))
   );
   injectReducers(reducers);
 }
+
+function addMetaDataToSlotComponents() {
+
+  // Add talkPluginName to Slot Components.
+  plugins.forEach((plugin) => {
+    const slots = plugin.module.slots;
+    slots && Object.keys(slots).forEach((slot) => {
+      slots[slot].forEach((component) => {
+        component.talkPluginName = plugin.name;
+      });
+    });
+  });
+}
+
+addMetaDataToSlotComponents();

client/coral-framework/index.js

@@ -1,10 +0,0 @@
-import pym from './services/PymConnection';
-import actions from './actions';
-
-// TODO (bc): Deprecate old actions. Spreading actions is now needed.
-
-export default {
-  pym,
-  actions,
-  ...actions
-};

client/coral-framework/loaders/plugins-loader.js

@@ -22,7 +22,7 @@ module.exports = function(source) {
   const config = this.exec(source, this.resourcePath);
   const plugins = getPluginList(config).map((plugin) => `{
     module: require('${plugin}/client'),
-    plugin: '${plugin}'
+    name: '${plugin}'
   }`);
 
   return stripIndent`

client/coral-framework/reducers/auth.js

@@ -1,6 +1,6 @@
 import {Map, fromJS} from 'immutable';
 import * as actions from '../constants/auth';
-import {pym} from 'coral-framework';
+import pym from 'coral-framework/services/pym';
 
 const initialState = Map({
   isLoading: false,

client/coral-framework/services/i18n.js

@@ -4,13 +4,15 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 
 import esTA from '../../../node_modules/timeago.js/locales/es';
+import frTA from '../../../node_modules/timeago.js/locales/fr';
 import en from '../../../locales/en.yml';
 import es from '../../../locales/es.yml';
+import fr from '../../../locales/fr.yml';
 
 // Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard
 
 const defaultLanguage = 'en';
-const translations = {...en, ...es};
+const translations = {...en, ...es, ...fr};
 
 let lang;
 let timeagoInstance;
@@ -40,6 +42,7 @@ function init() {
   }
 
   ta.register('es', esTA);
+  ta.register('fr', frTA);
   timeagoInstance = ta();
 }
 

client/coral-framework/services/pym.js

@@ -1,4 +1,4 @@
-import Pym from '../../../node_modules/pym.js';
+import Pym from 'pym.js';
 
 const pym = new Pym.Child({polling: 100});
 export default pym;

client/coral-framework/styles/reset.css

@@ -0,0 +1,29 @@
+.buttonReset {
+
+  /* reset button */
+  user-select: none;
+  outline: invert none medium;
+  border: none;
+  touch-action: manipulation;
+  padding: 0;
+
+  position: relative;
+  overflow: hidden;
+
+  /* Unify anchor and button. */
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  align-items: flex-start;
+  vertical-align: middle;
+  whiteSpace: nowrap;
+  background: transparent;
+  font-size: inherit;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+  &::-moz-focus-inner: {
+    border: 0;
+  }
+}

client/coral-plugin-best/BestButton.css

@@ -0,0 +1,14 @@
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  margin: 5px 10px 5px 0px;
+}
+
+.tagIcon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
+}

client/coral-plugin-best/BestButton.js

@@ -3,7 +3,8 @@ import React, {Component, PropTypes} from 'react';
 import t from 'coral-framework/services/i18n';
 
 import {Icon} from 'coral-ui';
-import classnames from 'classnames';
+import cn from 'classnames';
+import styles from './BestButton.css';
 
 // tag string for best comments
 export const BEST_TAG = 'BEST';
@@ -17,7 +18,7 @@ const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].
 
 // Put this on a comment to show that it is best
 
-export const BestIndicator = ({children = <Icon name='star'/>}) => (
+export const BestIndicator = ({children = <Icon name='star' className={styles.tagIcon} />}) => (
   <span aria-label={t('comment_is_best')}>
     { children }
   </span>
@@ -95,9 +96,9 @@ export class BestButton extends Component {
     return (
       <button onClick={isBest ? this.onClickRemoveBest : this.onClickAddBest}
               disabled={disabled}
-              className={classnames(`${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
+              className={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
               aria-label={t(isBest ? 'unset_best' : 'set_best')}>
-        <Icon name={ isBest ? 'star' : 'star_border' } />
+        <Icon name={ isBest ? 'star' : 'star_border' } className={styles.icon} />
       </button>
     );
   }

client/coral-plugin-comment-count/CommentCount.js

@@ -1,17 +0,0 @@
-import React, {PropTypes} from 'react';
-
-import t from 'coral-framework/services/i18n';
-
-const name = 'coral-plugin-comment-count';
-
-const CommentCount = ({count}) => {
-  return <div className={`${name}-text`}>
-    {`${count} ${count === 1 ? t('comment_singular') : t('comment_plural')}`}
-  </div>;
-};
-
-CommentCount.propTypes = {
-  count: PropTypes.number.isRequired
-};
-
-export default CommentCount;

client/coral-plugin-commentbox/CommentBox.js

@@ -67,7 +67,7 @@ class CommentBox extends React.Component {
 
     postComment(comment, 'comments')
       .then(({data}) => {
-        this.setState({loadingState: 'success'});
+        this.setState({loadingState: 'success', body: ''});
         const postedComment = data.createComment.comment;
 
         // Execute postSubmit Hooks
@@ -78,8 +78,6 @@ class CommentBox extends React.Component {
         if (commentPostedHandler) {
           commentPostedHandler();
         }
-
-        this.setState({body: ''});
       })
       .catch((err) => {
         this.setState({loadingState: 'error'});

client/coral-plugin-flags/components/FlagButton.js

@@ -5,6 +5,8 @@ import {can} from 'coral-framework/services/perms';
 
 import {PopupMenu, Button} from 'coral-ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import cn from 'classnames';
+import styles from './styles.css';
 
 const name = 'coral-plugin-flags';
 
@@ -146,14 +148,17 @@ export default class FlagButton extends Component {
           <button
             ref={(ref) => this.flagButton = ref}
             onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
-            className={`${name}-button`}>
+            className={cn(`${name}-button`, {[`${name}-button-flagged`]: flagged}, styles.button)}>
             {
               flagged
               ? <span className={`${name}-button-text`}>{t('reported')}</span>
               : <span className={`${name}-button-text`}>{t('report')}</span>
             }
-            <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
-              style={flagged ? styles.flaggedIcon : {}}
+            <i className={
+              cn(`${name}-icon`, 'material-icons', styles.icon, {
+                flaggedIcon: flagged,
+                [styles.flaggedIcon]: flagged,
+              })}
               aria-hidden={true}>flag</i>
           </button>
           {
@@ -214,12 +219,3 @@ export default class FlagButton extends Component {
     );
   }
 }
-
-const styles = {
-  flaggedIcon: {
-    color: '#F00'
-  },
-  unflaggedIcon: {
-    color: 'inherit'
-  }
-};

client/coral-plugin-flags/components/styles.css

@@ -0,0 +1,14 @@
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  margin: 5px 0px 5px 10px;
+}
+
+.flaggedIcon {
+  color: #f00
+}
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}

client/coral-plugin-history/Comment.css

@@ -75,3 +75,8 @@
   margin: inherit;
   color: inherit;
 }
+
+.iconView, .iconDate {
+  vertical-align: middle;
+  padding-bottom: 1px;
+}

client/coral-plugin-history/Comment.js

@@ -30,11 +30,11 @@ const Comment = (props) => {
         <ul>
           <li>
             <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
-              <Icon name="open_in_new" />{t('view_conversation')}
+              <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
             </a>
           </li>
           <li>
-            <Icon name="schedule" />
+            <Icon name="schedule" className={styles.iconDate}/>
             <PubDate
               className={styles.pubdate}
               created_at={props.comment.created_at}

client/coral-plugin-replies/ReplyButton.css

@@ -0,0 +1,16 @@
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  margin: 5px 10px 5px 0px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}

client/coral-plugin-replies/ReplyButton.js

@@ -2,17 +2,20 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-import classnames from 'classnames';
+import cn from 'classnames';
+import styles from './ReplyButton.css';
 
 const name = 'coral-plugin-replies';
 
 const ReplyButton = ({onClick}) => {
   return (
     <button
-      className={classnames(`${name}-reply-button`)}
+      className={cn(`${name}-reply-button`, styles.button)}
       onClick={onClick}>
-      {t('reply')}
-      <i className={`${name}-icon material-icons`}
+      <span className={cn(`${name}-label`, styles.label)}>
+        {t('reply')}
+      </span>
+      <i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
         aria-hidden={true}>reply</i>
     </button>
   );

client/coral-settings/containers/ProfileContainer.js

@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux';
 
 import {withStopIgnoringUser} from 'coral-framework/graphql/mutations';
 
-import {link} from 'coral-framework/services/PymConnection';
+import {link} from 'coral-framework/services/pym';
 import NotLoggedIn from '../components/NotLoggedIn';
 import IgnoredUsers from '../components/IgnoredUsers';
 import {Spinner} from 'coral-ui';

client/coral-ui/components/Icon.css

@@ -0,0 +1,3 @@
+
+.root {
+}

client/coral-ui/components/Icon.js

@@ -1,8 +1,10 @@
 import React, {PropTypes} from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
+import cn from 'classnames';
+import styles from './Icon.css';
 
 const Icon = ({className = '', name}) => (
-  <IconMDL className={className} name={name} />
+  <IconMDL className={cn(styles.root, className)} name={name} />
 );
 
 Icon.propTypes = {

client/coral-ui/components/Tab.css

@@ -1,9 +1,70 @@
-li.base--active {
-  background: white;
-  font-weight: bold;
+.root {
+  display: inline-block;
+  margin-right: -1px;
+  margin-bottom: -1px;
 }
 
-li.material--active {
-  font-weight: bold;
-  border-bottom: solid 2px black;
+.rootActive {
+
 }
+
+.rootSub {
+  display: inline-block;
+  margin-bottom: -2px;
+}
+
+.rootSubActive {
+
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  padding: 8px 10px;
+  color: #4E5259;
+  border: solid 1px #D8D8D8;
+  background: #F0F0F0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  font-size: 13px;
+  outline: none;
+}
+
+.button:hover, .button:focus {
+  background: #d5d5d5;
+  border-bottom: 1px solid #d5d5d5;
+}
+
+.buttonActive, .buttonActive:hover, .buttonActive:focus {
+  background: white;
+  font-weight: bold;
+  border-bottom: 1px solid white;
+}
+
+.buttonSub {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  color: black;
+  border: none;
+  background: transparent;
+  padding: 6px 12px;
+  margin-bottom: 3px;
+  outline: none;
+}
+
+.buttonSub:hover, .buttonSub:focus {
+  background: transparent;
+  border-bottom: solid 3px #d5d5d5;
+  margin-bottom: 0px;
+}
+
+.buttonSubActive, .buttonSubActive:hover, .buttonSubActive:focus {
+  font-weight: bold;
+  border-bottom: solid 3px #10589b;
+  margin-bottom: 0px;
+  padding: 6px 10px;
+}
+
+.root:only-child .button, .rootSub:only-child .buttonSub {
+  cursor: default;
+  pointer-events: none;
+}
+

client/coral-ui/components/Tab.js

@@ -1,12 +1,109 @@
 import React from 'react';
 import styles from './Tab.css';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
 
-export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
-  <li
-    key={tabId}
-    className={`${active ? `${styles[`${cStyle}--active`]} talk-tab-active` : ''} talk-tab ${props.className}`}
-    onClick={() => onTabClick(tabId)}
-  >
-    {children}
-  </li>
-);
+/**
+ * The `Tab` component is used inside the `TabBar` Component, to
+ * render tabs.
+ */
+class Tab extends React.Component {
+  handleTabClick = () => {
+    if (this.props.onTabClick) {
+      this.props.onTabClick(this.props.tabId);
+    }
+  }
+
+  getRootClassName({active, className, sub, classNames = {}} = this.props) {
+    return cn(
+      'talk-tab',
+      className,
+      {
+        [classNames.root || styles.root]: !sub,
+        [classNames.rootSub || styles.rootSub]: sub,
+        [classNames.rootActive || styles.rootActive]: active && !sub,
+        [classNames.rootSubActive || styles.rootSubActive]: active && sub,
+        'talk-tab-active': active,
+      }
+    );
+  }
+
+  getButtonClassName({sub, active, classNames = {}} = this.props) {
+    return cn(
+      'talk-tab-button',
+      {
+        [classNames.button || styles.button]: !sub,
+        [classNames.buttonSub || styles.buttonSub]: sub,
+        [classNames.buttonActive || styles.buttonActive]: active && !sub,
+        [classNames.buttonSubActive || styles.buttonSubActive]: active && sub,
+      }
+    );
+  }
+
+  render() {
+    const {
+      children,
+      classNames: _a,
+      active,
+      onTabClick: _c,
+      tabId: _d,
+      sub: _e,
+      'aria-controls': ariaControls,
+      ...rest,
+    } = this.props;
+
+    return (
+      <li
+        {...rest}
+        role="presentation"
+        className={this.getRootClassName()}
+      >
+        <button
+          aria-controls={ariaControls}
+          role="tab"
+          aria-selected={active}
+          className={this.getButtonClassName()}
+          onClick={this.handleTabClick}
+        >
+          {children}
+        </button>
+      </li>
+    );
+  }
+}
+
+Tab.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  // classNames allows full design customization of the component.
+  classNames: PropTypes.shape({
+    root: PropTypes.string,
+    rootActive: PropTypes.string,
+    rootSub: PropTypes.string,
+    rootSubActive: PropTypes.string,
+    button: PropTypes.string,
+    buttonActive: PropTypes.string,
+    buttonSub: PropTypes.string,
+    buttonSubActive: PropTypes.string,
+  }),
+
+  // active indicates that this tab is currently active.
+  // This is injected by the `TabBar` component.
+  active: PropTypes.bool,
+
+  // onTabClick is fired whenever the tab was clicked. The tabId is passed as
+  // the first argument.
+  onTabClick: PropTypes.func,
+
+  // Sub indicates that this is a tab of a sub-tab-panel.
+  // This is injected by the `TabBar` component.
+  sub: PropTypes.bool,
+
+  // `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
+  // This is injected by the `TabBar` component.
+  'aria-controls': PropTypes.string,
+};
+
+export default Tab;

client/coral-ui/components/TabBar.css

@@ -1,44 +1,14 @@
-.base {
+.root {
   list-style: none;
   border-bottom: solid 1px #D8D8D8;
   padding: 0;
+  margin: 0;
 }
 
-.base li {
-  color: #4E5259;
-  border: solid 1px #D8D8D8;
-  background: #F0F0F0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  display: inline-block;
-  border-bottom: none;
-  padding: 8px 10px;
-  margin-right: -1px;
-  user-select: none;
-  font-size: 13px;
-}
-
-.base li:hover {
-  background: #d5d5d5;
-  cursor: pointer;
-}
-
-.material {
+.rootSub {
   list-style: none;
   border: none;
   padding: 0;
-}
-
-.material li {
-  color: black;
-  border: none;
-  border-bottom: solid 2px white;
-  background: white;
-  padding: 8px 0;
-  margin-right: 40px;
-}
-
-.material li:hover {
-  background: white;
-  border-bottom: solid 2px grey;
+  margin: 0;
+  border-bottom: solid 2px #eee;
 }

client/coral-ui/components/TabBar.js

@@ -1,37 +1,86 @@
 import React from 'react';
 import styles from './TabBar.css';
+import cn from 'classnames';
+import Tab from './Tab';
+import PropTypes from 'prop-types';
 
+/**
+ * The `TabBar` component accepts `Tab` components to create
+ * a tab bar.
+ */
 class TabBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClickTab = this.handleClickTab.bind(this);
-  }
 
-  handleClickTab(tabId) {
-    if (this.props.onChange) {
-      this.props.onChange(tabId);
-    }
+  getRootClassName({className, classNames = {}, sub} = this.props) {
+    return cn(
+      'talk-tab-bar',
+      className,
+      {
+        [classNames.root || styles.root]: !sub,
+        [classNames.rootSub || styles.rootSub]: sub,
+      }
+    );
   }
 
   render() {
-    const {children, activeTab, cStyle = 'base'} = this.props;
+    const {
+      children,
+      activeTab,
+      tabClassNames,
+      classNames: _a,
+      onTabClick: _b,
+      'aria-controls': ariaControls,
+      sub,
+      ...rest,
+    } = this.props;
+
     return (
-      <div>
-        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} talk-tab-bar ${this.props.className}`}>
-          {React.Children.toArray(children)
-            .filter((child) => !child.props.restricted)
-            .map((child, tabId) =>
-              React.cloneElement(child, {
-                tabId,
-                active: child.props.id === activeTab,
-                onTabClick: this.handleClickTab,
-                cStyle
-              })
-            )}
-        </ul>
-      </div>
+      <ul
+        {...rest}
+        role="tablist"
+        className={this.getRootClassName()}
+      >
+        {React.Children.toArray(children)
+          .map((child, i) =>
+            React.cloneElement(child, {
+              tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
+              active: child.props.tabId === activeTab,
+              onTabClick: this.props.onTabClick,
+              classNames: tabClassNames,
+              'aria-controls': ariaControls,
+              sub,
+            })
+          )}
+      </ul>
     );
   }
 }
 
+TabBar.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  // classNames allows full design customization of the component.
+  classNames: PropTypes.shape({
+    root: PropTypes.string,
+    rootSub: PropTypes.string,
+  }),
+
+  // classNames to be passed to the children.
+  tabClassNames: Tab.propTypes.classNames,
+
+  // activeTab should be set to the currently active tabId.
+  activeTab: PropTypes.string,
+
+  // onTabClick is fired whenever the tab was clicked. The tabId is passed as
+  // the first argument.
+  onTabClick: PropTypes.func,
+
+  // Sub indicates that this is a sub-tab-panel.
+  sub: PropTypes.bool,
+
+  // `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
+  'aria-controls': PropTypes.string,
+};
+
 export default TabBar;

client/coral-ui/components/TabContent.css

@@ -0,0 +1,3 @@
+.root {
+  padding-top: 10px;
+}

client/coral-ui/components/TabContent.js

@@ -1,6 +1,43 @@
 import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './TabContent.css';
 
-export default ({children, show = true}) => (
-  show ? <div>{children}</div> : null
+function getRootClassName(className) {
+  return cn('talk-tab-content', className, styles.root);
+}
+
+/**
+ * The `TabContent` component accepts `TabPane` components to render
+ * the content of a `Tab`.
+ */
+const TabContent = ({children, className, activeTab, sub, ...rest}) => (
+  <div
+    {...rest}
+    className={getRootClassName(className)}
+  >
+    {
+      React.Children.toArray(children)
+        .filter((child) => child.props.tabId === activeTab)
+        .map((child, i) =>
+          React.cloneElement(child, {
+            tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
+            sub,
+          }))
+    }
+  </div>
 );
 
+TabContent.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  // activeTab should be set to the currently active tabId.
+  activeTab: PropTypes.string,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
+  sub: PropTypes.bool,
+};
+
+export default TabContent;

client/coral-ui/components/TabCount.css

@@ -0,0 +1,18 @@
+
+.root, .rootSub {
+  display: inline-block;
+  position: relative;
+  top: -2px;
+  background: #616161;
+  color: white;
+  font-weight: normal;
+  font-size: 10px;
+  padding: 2px;
+  margin-left: 2px;
+  margin-top: -2px;
+  min-width: 20px;
+}
+
+.rootSubActive {
+  background: #10589b;
+}

client/coral-ui/components/TabCount.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './TabCount.css';
+import PropTypes from 'prop-types';
+
+function getNumber(no) {
+  let result = Number.parseInt(no);
+  if (no >= 1000) {
+    result = `${Math.round(result / 100) / 10}k`;
+  }
+  return result;
+}
+
+function getRootClassName({className, active, sub}) {
+  return cn(
+    'talk-tab-count',
+    className,
+    {
+      [styles.root]: !sub,
+      [styles.rootSub]: sub,
+      [styles.rootActive]: active && !sub,
+      [styles.rootSubActive]: active && sub,
+      'talk-tab-active': active,
+    }
+  );
+}
+
+/**
+ * The `TabCount` renders a count number next to a tab name.
+ */
+const TabCount = ({children, active, sub, className}) => (
+  <span className={getRootClassName({className, active, sub})}>{getNumber(children)}</span>
+);
+
+TabCount.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  // active indicates that the related tab is currently active.
+  active: PropTypes.bool,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
+  sub: PropTypes.bool,
+};
+
+export default TabCount;

client/coral-ui/components/TabPane.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+
+function getRootClassName(className) {
+  return cn('talk-pane', className);
+}
+
+/**
+ * The `TabPane` component is used inside the `TabContent` component to render
+ * the content of a `Tab`.
+ */
+const TabPane = ({children, className, tabId: _a, sub: _b, ...rest}) => (
+  <div
+    {...rest}
+    className={getRootClassName(className)}
+  >
+    {children}
+  </div>
+);
+
+TabPane.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  tabId: PropTypes.string,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
+  // This is injected by the `TabContent` component.
+  sub: PropTypes.bool,
+};
+
+export default TabPane;

client/coral-ui/index.js

@@ -4,7 +4,9 @@ export {default as CoralLogo} from './components/CoralLogo';
 export {default as FabButton} from './components/FabButton';
 export {default as TabBar} from './components/TabBar';
 export {default as Tab} from './components/Tab';
+export {default as TabCount} from './components/TabCount';
 export {default as TabContent} from './components/TabContent';
+export {default as TabPane} from './components/TabPane';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
 export {default as Tooltip} from './components/Tooltip';

config.js

@@ -29,7 +29,7 @@ const CONFIG = {
   // JWT_ISSUER is the value for the issuer for the tokens that will be verified
   // when decoding. If `JWT_ISSUER` is not in the environment, then it will try
   // `TALK_ROOT_URL`, otherwise, it will be undefined.
-  JWT_ISSUER: process.env.TALK_JWT_ISSUER || process.env.TALK_ROOT_URL || undefined,
+  JWT_ISSUER: process.env.TALK_JWT_ISSUER || process.env.TALK_ROOT_URL,
 
   // JWT_EXPIRY is the time for which a given token is valid for.
   JWT_EXPIRY: process.env.TALK_JWT_EXPIRY || '1 day',
@@ -91,7 +91,9 @@ const CONFIG = {
 if (process.env.NODE_ENV === 'test' && !CONFIG.JWT_SECRET) {
   CONFIG.JWT_SECRET = 'keyboard cat';
 } else if (!CONFIG.JWT_SECRET) {
-  throw new Error('TALK_JWT_SECRET must be provided in the environment to sign/verify tokens');
+  throw new Error(
+    'TALK_JWT_SECRET must be provided in the environment to sign/verify tokens'
+  );
 }
 
 //------------------------------------------------------------------------------
@@ -108,7 +110,7 @@ if (process.env.NODE_ENV === 'test' && !CONFIG.MONGO_URL) {
 // Reset the redis url in the event it hasn't been overrided and we are in a
 // testing environment.
 if (process.env.NODE_ENV === 'test' && !CONFIG.REDIS_URL) {
-  CONFIG.REDIS_URL = 'redis://localhost';
+  CONFIG.REDIS_URL = 'redis://localhost/1';
 }
 
 //------------------------------------------------------------------------------
@@ -119,10 +121,15 @@ if (process.env.NODE_ENV === 'test' && !CONFIG.REDIS_URL) {
  * This is true when the recaptcha secret is provided and the Recaptcha feature
  * is to be enabled.
  */
-CONFIG.RECAPTCHA_ENABLED = CONFIG.RECAPTCHA_SECRET && CONFIG.RECAPTCHA_SECRET.length > 0 &&
-                           CONFIG.RECAPTCHA_PUBLIC && CONFIG.RECAPTCHA_PUBLIC.length > 0;
+CONFIG.RECAPTCHA_ENABLED =
+  CONFIG.RECAPTCHA_SECRET &&
+  CONFIG.RECAPTCHA_SECRET.length > 0 &&
+  CONFIG.RECAPTCHA_PUBLIC &&
+  CONFIG.RECAPTCHA_PUBLIC.length > 0;
 if (!CONFIG.RECAPTCHA_ENABLED) {
-  console.warn('Recaptcha is not enabled for login/signup abuse prevention, set TALK_RECAPTCHA_SECRET and TALK_RECAPTCHA_PUBLIC to enable Recaptcha.');
+  console.warn(
+    'Recaptcha is not enabled for login/signup abuse prevention, set TALK_RECAPTCHA_SECRET and TALK_RECAPTCHA_PUBLIC to enable Recaptcha.'
+  );
 }
 
 //------------------------------------------------------------------------------
@@ -138,7 +145,13 @@ if (!CONFIG.RECAPTCHA_ENABLED) {
   ];
 
   if (requiredProps.some((prop) => !CONFIG[prop])) {
-    console.warn(`${requiredProps.map((v) => `TALK_${v}`).join(', ')} should be defined in the environment if you would like to send password reset emails from Talk`);
+    console.warn(
+      `${requiredProps
+        .map((v) => `TALK_${v}`)
+        .join(
+          ', '
+        )} should be defined in the environment if you would like to send password reset emails from Talk`
+    );
   }
 }
 

docs/_data/sidebars/talk_sidebar.yml

@@ -11,6 +11,9 @@ entries:
     - title: About
       url: /index.html
       output: web
+    - title: Contribute
+      url: /contribute.html
+      output: web
     - title: FAQ
       url: /faq.html
       output: web
@@ -33,6 +36,25 @@ entries:
     - title: Setup
       url: /install-setup.html
       output: web
+    - title: Troubleshooting
+      url: /install-troubleshooting.html
+      output: web
+
+  - title: Architecture
+    output: web
+    folderitems:
+    - title: Overview
+      url: /architecture.html
+      output: web
+    - title: Tags
+      url: /architecture-tags.html
+      output: web
+    - title: Metadata API
+      url: /architecture-metadata.html
+      output: web
+    - title: cli
+      url: /architecture-cli.html
+      output: web
 
   - title: Plugins
     output: web

docs/architecture-cli.md

@@ -0,0 +1,139 @@
+---
+title: The Talk cli
+keywords: architecture
+sidebar: talk_sidebar
+permalink: architecture-cli.html
+summary:
+---
+
+Talk ships with a cli tool that allows access to a wide variety of functionality.
+
+It is designed to provide a convenient way for engineers to perform key tasks without the need to muck about in the UI. It also opens the door for scripts to perform operations programmatically.
+
+Note: the cli tool requires [the Talk environment to be configured](configuration.html) either via env vars or by using a `.cli` file via `bin/cli -c .env [command] ....`
+
+## Using the cli
+
+In a terminal, try:
+
+```
+/path/to/talk/bin cli [options] [commands] [arguments]
+```
+
+Commonly, you'll be in the `talk/` folder, in which case you can:
+
+```
+bin/cli [options] [commands] [arguments]
+```
+
+If you're a heavy cli user, consider adding the `bin` folder to your PATH so you can run `cli` from anywhere!
+
+If you are using [our Docker environment](install-docker.html), the bin folder will already be in the PATH.
+
+## What can I do with the cli?
+
+The Talk cli ships with 'unix style' help. To access the docs, simply run the cli with insufficient arguments.
+
+Let's say I wanted to figure out how to change a user's password. I'd start be seeing what the cli has for me.
+
+(Note: the following output may change, please reference at the `--help` output for your version as you use the cli.)
+
+```
+talk :) ]$ bin/cli --help
+
+  Usage: cli [options] [command]
+
+
+  Commands:
+
+    serve       serve the application
+    settings    interact with the application settings
+    assets      interact with assets
+    setup       setup the application
+    jobs        work with the job queues
+    token       work with the access tokens
+    users       work with the application auth
+    migration   provides utilities for migrating the database
+    plugins     provides utilities for interacting with the plugin system
+    help [cmd]  display help for [cmd]
+
+  Options:
+
+    -h, --help           output usage information
+    -V, --version        output the version number
+    -c, --config [path]  Specify the configuration file to load
+    --pid [path]         Specify a path to output the current PID to
+```
+
+Most commands contain sub-commands. Running with cli with such a command generates the docs for the sub-commands and options therein.
+
+Change user password is likely to be in the `users` command group.
+
+```
+talk :) ]$ bin/cli users
+
+  Usage: cli-users [options] [command]
+
+
+  Commands:
+
+    create [options]               create a new user
+    delete <userID>                delete a user
+    passwd <userID>                change a password for a user
+    update [options] <userID>      update a user
+    list                           list all the users in the database
+    merge <dstUserID> <srcUserID>  merge srcUser into the dstUser
+    addrole <userID> <role>        adds a role to a given user
+    removerole <userID> <role>     removes a role from a given user
+    ban <userID>                   ban a given user
+    uban <userID>                  unban a given user
+    disable <userID>               disable a given user from logging in
+    enable <userID>                enable a given user from logging in
+
+  Options:
+
+    -h, --help           output usage information
+    -V, --version        output the version number
+    -c, --config [path]  Specify the configuration file to load
+    --pid [path]         Specify a path to output the current PID to
+```
+
+I now see that I can change a password like so:
+
+```
+bin/cli users passwd [userID]
+```
+
+You can also read these help prompts by [exploring the source code](https://github.com/coralproject/talk/blob/master/bin/cli).
+
+### Usage Notes
+
+If you haven't used a cli enabled system before, think of it like this: generally, you'd make a rest call, rpc, etc... to perform an action. The cli's api is designed in the same way, just for the audience of command line wielding engineers and scripts.
+
+The best way to understand what the cli does is to explore the help commands. Uses of cli are also scattered through this documentation in context of their topics.
+
+For some real world uses of the cli, see the scripts in the  [package.json file](https://github.com/coralproject/talk/blob/d688f70c19d8dee48371784009fd07322dae4eb5/package.json#L8).
+
+## What's really going on when I run the cli?
+
+The cli tool is a standalone application. Running it starts up the internals of a talk process, executes the given command, then shuts it down. No server functionality is enabled by cli commands unless specifically noted.
+
+The cli tool _does not require a talk server to be running._ This means that you can execute commands, for example, during and installation process before starting the server. The also means that you can execute commands using varying configurations (via the `-c [.env file]` flag).
+
+### Accessing existing Talk installs with the cli
+
+You may use the cli tool to 'remotely' control existing talk installs.
+
+This is accomplished by running the cli tool on any box using the mongo/redis/etc... credentials for the environment that you would like to act on. For example, if you want something to happen periodically on your production Talk install, you could set up a utility box with a cron job that triggers the cli with the same db/cache credentials. If you want to do something quick on a staging server, you could run the cli locally with staging credentials.
+
+The cli tool will connect directly with the install's db and redis instance(s) so ensure that your box can reach those servers on the appropriate ports.
+
+Also, _please ensure your cli and the server(s) in an environment are using the same version of Talk._
+
+Please secure your environments and credentials or the cli tool becomes a convenient way for someone to own your system.
+
+## Extending the cli
+
+The Talk cli is based on the excellent [commander](https://github.com/tj/commander.js/) library.
+
+At the time of writing, there are no plugin hooks for the cli tool. If you would like to change this, whether by writing code yourself or recommending a need, please [write and issue](https://github.com/coralproject/talk/blob/053b687959d45bcd682a1a2a4b604ebfab7441bb/CONTRIBUTING.md#writing-code).

docs/architecture-metadata.md

@@ -0,0 +1,92 @@
+---
+title: Metadata
+keywords: architecture
+sidebar: talk_sidebar
+permalink: architecture-metadata.html
+summary:
+---
+
+_Metadata_ allows you to add fields to models that are not represented in the core schema.
+
+## Goals
+
+The metadata api is designed to satisfy two product goals:
+
+* Give developers flexibility in extending datatypes.
+* Protect core fields that are essential to Talk's operation.
+
+## Design
+
+Metadata is represented by an [subdocument in our Schemas](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/models/comment.js#L74). This takes advantage of Mongo's flexibility allowing for any data to be stored therein.
+
+### Setting Metadata
+
+Talk provides [a service layer](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js) allowing developers to `set` and `unset` metadata on objects in a way similar to key-value stores.
+
+Let's say that I want to add a custom field called `potency` to a comment.
+
+```
+const MetadataService = require('services/metadata');
+const CommentModel = require('models/comment');
+
+// Sets the property `potency` on the comment with `id=1`.
+MetadataService.set(CommentModel, '1', 'potency', 42);
+```
+
+Note that the model passed here is the Model itself and not an individual comment object. This allows us to update the value on that document [in an atomic manner](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js#L60) for efficiency and to prevent race conditions.
+
+### Accessing Metadata
+
+The metadata api does not contain a `get` method. The metadata object is retrieved via database queries along with the rest of the data.
+
+## Metadata and the Graph
+
+One of the first principles of GraphQL is that the shape of the graph does not need to be the same as the shape of the data in the database. In fact, it probably shouldn't be.
+
+This enables us to treat metadata fields in any way that makes sense as we design our Graph. The fact that a value is stored in the metadata object is an implementation detail invisible to the front end.
+
+Take for example, the `reason` field in the `FlagAction` type. This stores the user provided reason why they flagged a comment. As far as the front end knows, it's [just another field](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/graph/typeDefs.graphql#L453) alongside the core fields:
+
+```
+# graph/typeDefs.graphql
+type FlagAction implements Action {
+
+  ...
+
+  # The reason for which the Flag Action was created.
+  reason: String
+
+  ...
+}
+```
+
+If, however, we [look at the resolver](https://github.com/coralproject/talk/blob/a47e2378e96f34f25447782f3e7ce59fa48ec791/graph/resolvers/dont_agree_action.js) for that field, we see that `reason` is [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) from the metadata object and returned.
+
+```
+// graph/resolvers/dont_agree_action.js
+const DontAgreeAction = {
+
+  // Stored in the metadata, extract and return.
+  reason({metadata: {reason}}) {
+    return reason;
+  }
+};
+
+module.exports = DontAgreeAction;
+```
+
+This is an extremely powerful pattern as it allows us absolute freedom in designing our graph and complete isolation of the added fields in the database.
+
+## Some things to keep in mind
+
+### Namespace your metadata fields
+
+Since metadata can be added by the core and multiple plugins, collisions may occur. As you create your plugins, please be careful to pick unique names for metadata fields. We recommend namespacing all your fields in a subdocument named after your plugin.
+
+```
+[model].metadata.[your_plugin_name].[the_field]
+```
+
+### Querying by metadata fields
+
+We currently do not have a clean way to index metadata fields. As a result queries that match against metadata fields will not scale. If you have a need to match, sort, etc... by a metadata field, [please let us know](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md#writing-code).

docs/architecture-tags.md

@@ -0,0 +1,71 @@
+---
+title: Tags
+keywords: architecture
+sidebar: talk_sidebar
+permalink: architecture-tags.html
+summary:
+---
+
+Tags are essentially strings that can be added to models. Currently, tags can be added to [Users, Comments and Assets](https://github.com/coralproject/talk/blob/ced449a1489d47c25d604020fa2e0b3b7a741353/graph/typeDefs.graphql#L144). If you would like to add tags to other models, you can extend this schema using [GraphQL hooks](plugins-server.html#graphql-hooks).
+
+## Tag Definitions
+
+When handling tags, the Talk Server references a set of definitions that describe how tags are handled. These definitions are keyed off the tag `name`, the simple string that is stored on items.
+
+The schema for Tag definitions [can be found here](https://github.com/coralproject/talk/blob/3545bf01cd91044fdb738d337a0ac94d9f71fbc3/models/schema/tag.js).
+
+Note that along with the `name`, tag definitions contains:
+
+* `permissions` information about who can see and set the tag,
+* `models` which `ITEM_TYPES` this tag can be applied to, and
+
+Whenever a tag is 'handled' by the server, it references this definition to determine that tag's behavior.
+
+See [Plugin API Documentation](plugins-server.html#field-tags) for more information.
+
+### Creating a Tag Definition
+
+Tag Definitions must be created in order for the system to determine what tags are permitted on the server side.
+
+Tag Definitions do not contain any logic themselves but provide information that other parts of the system can use to specify which models a tag can be applied to (models) and perform authorization logic (permissions).
+
+Take the tag created by `coral-plugin-offtopic` as an example.
+
+```
+// coral-plugin-offtopic/index.js
+module.exports = {
+  tags: [
+    {
+      name: 'OFF_TOPIC',
+      permissions: {
+        public: true,
+        self: true,
+        roles: []
+      },
+      models: ['COMMENTS'],
+      created_at: new Date()
+    }
+  ]
+};
+```
+
+This plugin allows users to self-report that their comment is "off topic" at the time of creation, then display a badge on those comments.
+
+To accomplish this, the plugin creates the tag `OFF_TOPIC` with:
+
+* `permissions.public: true` - will be sent over the wire to the client side
+* `permissions.self: true` - can be added by the active user to themselves or assets they own
+* `permissions.roles: []` - cannot be added by anyone based on their roles
+* `models: ['COMMENTS']` - can only be added to COMMENTS (not to users/assets/etc...)
+
+And [viola](https://youtu.be/Q0O9gFf-tiI?t=23s)! This tag is something that can only be created by the logged in user on their own comments and is sent over the wire to the client so it can display the badge.
+
+## Tag Links
+
+When tags are stored on objects in the database, they are represented by [TagLinks](https://github.com/coralproject/talk/blob/master/models/schema/tag_link.js).
+
+A TagLinks says that `tag` was `assigned_by` a specific user at a specific time (`created_at`).
+
+Note that the `tag` field in the TagLinkSchema is the full TagSchema itself. This allows for another level of flexibility. Server code may generate Tags on the fly, complete with programmatically generated permissions and item behaviors.
+
+If a Tag definitions exists in the global/asset context then that definition will be used regardless of what is stored here. This allows high level controls on the behavior of tags, ensuring that plugins cannot produce unexpected definitions for already defined tags.

docs/architecture.md

@@ -0,0 +1,80 @@
+---
+title: Architecture Overview
+keywords: architecture
+sidebar: talk_sidebar
+permalink: architecture.html
+summary:
+---
+
+## Talk's Architecture
+
+Talk consists of four distinct layers of code:
+
+* Plugins
+* Plugin API
+* Core
+* cli
+
+### Plugins
+
+Talk plugins deliver the features and functionality that can be changed or removed. Much of the default functionality is delivered by core plugins allowing developers to have control over any non-essential functionality. 
+
+### Plugin API
+
+Talk plugins interact exclusively with the Plugin API. Maintaining this layer of separation between plugins and core allows us to consciously design the api that we want it publish to plugin authors. We can then expose just the elements of core that make sense and maintain that contract as core changes.
+
+### Core
+
+Talk core consists of architecture and functionality that deliver stability, security, scalability, extendability, etc... In addition, the Core contains features and functionality that is essential to the operation of Talk as a product.
+
+Our goal is to continually extend our plugin infrastructure making the Core as pluggable as possible. Ultimately, a day may come where the Core of Talk is simply a framework for delivering a certain flavor of web applications.
+
+### cli
+
+Talk ships with [a cli tool](architecture-cli.html) that exposes functionality to the command line. We seek to provide cli functionality for all features that could need to be accomplished programmatically or prior to the server's startup.
+
+## Thinking about Plugins, the Plugin API and Core?
+
+The following is a template for a thought process that may help clarify your ideas against the backdrop of Talk's architecture.
+
+Think of a feature or capability. It could be something that's already in Talk or not. It could be something you want to build, or something you'd think would be a terrible idea. The important part here is to have something to interrogate.
+
+```
+wait(60000);
+```
+
+Now, ask these questions:
+
+### Is it a Plugin?
+
+Most work for Talk happens in the Plugin space. If the answers to any of these questions is Yes, then you're thinking of a Plugin.
+
+* Does Talk's existing Plugin APIs support the thing you want to build?
+* Is this something that only some users will want/need?
+* Is this something that we want devs to iterate on widely?
+
+You should [build it as a plugin](plugins-quickstart.html). Feel free to explore here on your own or reach out to us. We love to advise on plugins, so please feel free to [file an issue](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md) and we will start a conversation. We will help you conceptualize, architect and promote your plugin if it is in line with our values.
+
+### Does it need updates to the Plugin API?
+
+If you answered yes above:
+
+* Do I need to extend the Plugin API to support my plugin?
+
+Often times all the functionality a plugin needs is in the Core, but the Plugin API doesn't expose it. In these cases, we seek to iteratively extend the Talk Plugin API. All Plugin API contributions from the community must begin by [filing an Issue](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
+
+Note: we are stabilizing the process by which new Plugin API bindings are created, agreed upon and ultimately made part of our Plugins Contract. If you are interested in this process, please reach out to us.
+
+### Does it require updates to the Plugin API _and_ Core?
+
+What, if any, changes need to be made to Core so that the API can be extended?
+
+Quite often the only things missing from Core are things like _events_, _slots_, _CSS classes_, etc... Adding these is a great way to become a Core Contributor and break new ground as a Plugin Developer.
+
+We seek to keep Core as lean as possible.
+
+### Is my idea really just Core?
+
+Amazing! We are always looking to extend the capabilities of Talk. We look forward to discussing what you've got to bring!
+
+Please see our [contributing guide](](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md)) for more information.

docs/contributors-guide.md

@@ -0,0 +1,9 @@
+---
+title: Contributor's Guide
+keywords: homepage
+sidebar: talk_sidebar
+permalink: contribute.html
+summary:
+---
+
+Our Contributor's Guide can be found [here](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).

docs/install-troubleshooting.md

@@ -0,0 +1,22 @@
+---
+title: Installation Troubleshooting
+keywords: install
+sidebar: talk_sidebar
+permalink: install-troubleshooting.html
+summary:
+---
+
+This page tracks common issues that arise when installing Talk and provides resolutions.
+
+## The Talk server seems to be working but the stream isn't showing up on my page.
+
+Talk employs a _domain whitelist_ that controls which sites can contain comment threads. This prevents malicious folks from using your server to embed streams on unwanted pages.
+
+If your comment thread isn't showing:
+
+1. Log into your admin panel
+1. Go to the Configure tab
+1. Select the Tech Settings submenu
+1. Ensure that your Domain is the Permitted Domains list
+
+Note: if your site has multiple subdomains, listing the domain itself (ie: `mydomain.com`) will enable Talk on all subdomains. If you would like to restrict Talk to certain subdomains, you must list all of them here (ie: `thisone.mydomain.com thatone.mydomain.com`).

docs/plugins-quickstart.md

@@ -215,7 +215,7 @@ It is important to realize that when you're writing a Talk plugin you are writin
 
 ### Publish to npm
 
-In order to [register](http://localhost:4000/plugins.html#plugin-registration) your _published_ plugin, you will need to [publish it to npm](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+In order to [register](plugins.html#plugin-registration) your _published_ plugin, you will need to [publish it to npm](https://docs.npmjs.com/getting-started/publishing-npm-packages).
 
 Once the package is published, update `plugins.json` to use the published plugin:
 

graph/loaders/comments.js

@@ -50,13 +50,20 @@ const getCountsByAssetID = (context, asset_ids) => {
  * @param {Array<String>} id The ID of the asset
  * @param {Array<String>} excludeIgnored Exclude comments ignored by the requesting user
  */
-const getCountsByAssetIDPersonalized = async (context, {assetId, excludeIgnored}) => {
+const getCountsByAssetIDPersonalized = async (context, {assetId, excludeIgnored, tags}) => {
   const query = {
     asset_id: assetId,
     status: {
       $in: ['NONE', 'ACCEPTED'],
     },
   };
+
+  if (tags) {
+    query['tags.tag.name'] = {
+      $in: tags,
+    };
+  }
+
   const user = context.user;
   if (excludeIgnored && user) {
 
@@ -108,7 +115,7 @@ const getParentCountsByAssetID = (context, asset_ids) => {
  * @param {Array<String>} id The ID of the asset
  * @param {Array<String>} excludeIgnored Exclude comments ignored by the requesting user
  */
-const getParentCountByAssetIDPersonalized = async (context, {assetId, excludeIgnored}) => {
+const getParentCountByAssetIDPersonalized = async (context, {assetId, excludeIgnored, tags}) => {
   const query = {
     asset_id: assetId,
     parent_id: null,
@@ -116,6 +123,13 @@ const getParentCountByAssetIDPersonalized = async (context, {assetId, excludeIgn
       $in: ['NONE', 'ACCEPTED'],
     },
   };
+
+  if (tags) {
+    query['tags.tag.name'] = {
+      $in: tags,
+    };
+  }
+
   const user = context.user;
   if (excludeIgnored && user) {
 
@@ -195,7 +209,7 @@ const getCountByParentIDPersonalized = async (context, {id, excludeIgnored}) =>
  * @return {Promise}          resolves to the counts of the comments from the
  *                            query
  */
-const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, author_id}) => {
+const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, author_id, tags}) => {
   let query = CommentModel.find();
 
   if (ids) {
@@ -218,6 +232,14 @@ const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, au
     query = query.where({author_id});
   }
 
+  if (tags) {
+    query = query.find({
+      'tags.tag.name': {
+        $in: tags,
+      },
+    });
+  }
+
   return CommentModel
     .find(query)
     .count();
@@ -229,7 +251,7 @@ const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, au
  * @param  {Object} context   graph context
  * @param  {Object} query     query terms to apply to the comments query
  */
-const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, author_id, limit, cursor, sort, excludeIgnored}) => {
+const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, author_id, limit, cursor, sort, excludeIgnored, tags}) => {
   let comments = CommentModel.find();
 
   // Only administrators can search for comments with statuses that are not
@@ -256,6 +278,14 @@ const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, a
     });
   }
 
+  if (tags) {
+    comments = comments.find({
+      'tags.tag.name': {
+        $in: tags,
+      },
+    });
+  }
+
   // Only let an admin request any user or the current user request themself.
   if (user && (user.can(SEARCH_OTHERS_COMMENTS) || user.id === author_id) && author_id != null) {
     comments = comments.where({author_id});

graph/resolvers/asset.js

@@ -4,31 +4,32 @@ const Asset = {
   recentComments({id}, _, {loaders: {Comments}}) {
     return Comments.genRecentComments.load(id);
   },
-  comments({id}, {sort, limit, excludeIgnored}, {loaders: {Comments}}) {
+  comments({id}, {sort, limit, deep, excludeIgnored, tags}, {loaders: {Comments}}) {
     return Comments.getByQuery({
       asset_id: id,
       sort,
       limit,
-      parent_id: null,
+      parent_id: deep ? undefined : null,
+      tags,
       excludeIgnored,
     });
   },
-  commentCount({id, commentCount}, {excludeIgnored}, {user, loaders: {Comments}}) {
-    
+  commentCount({id, commentCount}, {excludeIgnored, tags}, {user, loaders: {Comments}}) {
+
     // TODO: remove
-    if (user && excludeIgnored) {
-      return Comments.parentCountByAssetIDPersonalized({assetId: id, excludeIgnored});
+    if ((user && excludeIgnored) || tags) {
+      return Comments.parentCountByAssetIDPersonalized({assetId: id, excludeIgnored, tags});
     }
     if (commentCount != null) {
       return commentCount;
     }
     return Comments.parentCountByAssetID.load(id);
   },
-  totalCommentCount({id, totalCommentCount}, {excludeIgnored}, {user, loaders: {Comments}}) {
+  totalCommentCount({id, totalCommentCount}, {excludeIgnored, tags}, {user, loaders: {Comments}}) {
 
     // TODO: remove
-    if (user && excludeIgnored) {
-      return Comments.countByAssetIDPersonalized({assetId: id, excludeIgnored});
+    if ((user && excludeIgnored) || tags) {
+      return Comments.countByAssetIDPersonalized({assetId: id, excludeIgnored, tags});
     }
     if (totalCommentCount != null) {
       return totalCommentCount;

graph/typeDefs.graphql

@@ -243,12 +243,12 @@ input CommentsQuery {
   # Skip results from the last created_at timestamp.
   cursor: Date
 
-  # Filter by a specific tag name.
-  tag: [String]
-
   # Sort the results by created_at.
   sort: SORT_ORDER = REVERSE_CHRONOLOGICAL
 
+  # Filter by a specific tag name.
+  tags: [String!]
+
   # Exclude comments ignored by the requesting user
   excludeIgnored: Boolean
 }
@@ -278,7 +278,7 @@ input CommentCountQuery {
   author_id: ID
 
   # Filter by a specific tag name.
-  tag: [String]
+  tags: [String!]
 }
 
 type EditInfo {
@@ -569,14 +569,22 @@ type Asset {
   # Returns recent comments
   recentComments: [Comment!]
 
-  # The top level comments that are attached to the asset.
-  comments(sort: SORT_ORDER = REVERSE_CHRONOLOGICAL, limit: Int = 10, excludeIgnored: Boolean): CommentConnection!
+  # The comments that are attached to the asset.
+  # If `deep` is true, it will return comments of all depths,
+  # otherwise only top-level comments are returned.
+  comments(
+    sort: SORT_ORDER = REVERSE_CHRONOLOGICAL,
+    limit: Int = 10,
+    excludeIgnored: Boolean,
+    tags: [String!]
+    deep: Boolean,
+  ): CommentConnection!
 
   # The count of top level comments on the asset.
-  commentCount(excludeIgnored: Boolean): Int
+  commentCount(excludeIgnored: Boolean, tags: [String!]): Int
 
   # The total count of all comments made on the asset.
-  totalCommentCount(excludeIgnored: Boolean): Int
+  totalCommentCount(excludeIgnored: Boolean, tags: [String!]): Int
 
   # The settings (rectified with the global settings) that should be applied to
   # this asset.

locales/en.yml

@@ -2,6 +2,7 @@ en:
   your_account_has_been_suspended: Your account has been temporarily suspended.
   your_account_has_been_banned: Your account has been banned.
   your_username_has_been_rejected: Your account has been suspended because your username has been deemed inappropriate. To restore your account please enter a new username.
+  embed_comments_tab: Comments
   bandialog:
     are_you_sure: "Are you sure you would like to ban {0}?"
     ban_user: "Ban User?"
@@ -235,9 +236,9 @@ en:
     success_bio_update: "Your biography has been updated"
     success_name_update: "Your username has been updated"
     success_update_settings: "The changes you have made have been applied to the comment stream on this article"
-    view_all_replies_unknown_number: "view all replies"
-    view_all_replies: "view {0} replies"
-    view_all_replies_initial: "view all {0} replies"
+    show_all_replies: Show all replies
+    show_1_more_reply: Show 1 more reply
+    show_x_more_replies: Show {0} more replies
     view_more_comments: "view more comments"
     view_reply: "view reply"
   from_settings_page: "From the Profile Page you can see your comment history."

locales/es.yml

@@ -2,6 +2,7 @@ es:
   your_account_has_been_suspended: Su cuenta ha sido temporalmente suspendida.
   your_account_has_been_banned: Su cuenta ha sido suspendida.
   your_username_has_been_rejected: Su cuenta ha sido suspendida porque tu nombre de usuario ha sido considerado no apropiado para el espacio. Para recuperar la cuenta, por favor ingresar un nuevo nombre de usuario.
+  embed_comments_tab: Comentarios
   bandialog:
     are_you_sure: "¿Estás segura que quieres suspender a {0}?"
     ban_user: "¿Quieres suspender el Usuario?"
@@ -232,9 +233,9 @@ es:
     success_bio_update: "Tu biografia fue actualizada"
     success_name_update: "Tu nombre de usuario ha sido actualizado"
     success_update_settings: "La configuración de este articulo fue actualizada"
-    view_all_replies_unknown_number: "ver todas las respuestas"
-    view_all_replies: "ver {0} respuestas"
-    view_all_replies_initial: "ver todas las {0} respuestas"
+    show_all_replies: "Mostrar todas las respuestas"
+    show_1_more_reply: "Mostrar 1 respuesta más"
+    show_x_more_replies: "Mostrar {0} respuestas más"
     view_more_comments: "Ver más comentarios"
     view_reply: "ver respuesta"
   from_settings_page: "Desde la página de configuración puedes ver tu historia de comentarios."

locales/fr.yml

@@ -0,0 +1,355 @@
+fr:
+  bandialog:
+    are_you_sure: "Êtes-vous sûr de vouloir bannir {0}?"
+    ban_user: "Bannir l'utilisateur ?"
+    banned_user: "Utilisateur banni"
+    cancel: Annuler
+    note: "Remarque: bannir cet utilisateur rejettera également ce commentaire."
+    yes_ban_user: "Oui, bannir cet utilisateur"
+  bio_offensive: "Cette biographie est offensante"
+  cancel: Annuler
+  characters_remaining: "caractères restants"
+  comment:
+    anon: Anonyme
+    ban_user: "Bannir utilisateur"
+    comment: "Publier un commentaire"
+    flagged: signalé
+    view_context: "Afficher le contexte"
+  comment_box:
+    post: "Publier"
+    cancel: "Annuler"
+    reply: "Répondre"
+    comment: "Publier un commentaire"
+    name: "Nom"
+    comment_post_notif: "Votre commentaire a été publié."
+    comment_post_notif_premod: "Merci d'avoir envoyé un commentaire. Notre équipe de modération passera en revue votre commentaire sous peu."
+    comment_post_banned_word: "Votre commentaire contient un ou plusieurs mots qui ne sont pas autorisés, il ne sera pas publié. Si vous pensez qu'il y a une erreur, contactez notre équipe de modération."
+    characters_remaining: "caractères restants"
+  comment_is_best: "Ce commentaire est l'un des meilleurs"
+  comment_offensive: "Ce commentaire est offensant"
+  comment_plural: Commentaires
+  comment_post_banned_word: "Votre commentaire contient un ou plusieurs mots qui ne sont pas autorisés, il ne sera pas publié. Si vous pensez qu'il y a une erreur, contactez notre équipe de modération."
+  comment_post_notif: "Votre commentaire a été publié."
+  comment_post_notif_premod: "Merci d'avoir envoyé un commentaire. Notre équipe de modération passera en revue votre commentaire sous peu."
+  community:
+    account_creation_date: "Date de création du compte"
+    active: Actif
+    admin: Administrateur
+    ads_marketing: "Cela ressemble à du marketing / un message publicitaire"
+    are_you_sure: "Êtes-vous sûr de vouloir bannir {0} ?"
+    ban_user: "Bannir l'utilisateur ?"
+    banned: Banni
+    banned_user: "Utilisateur banni"
+    cancel: Signalé
+    dont_like_username: "Je n'aime pas ce nom d'utilisateur"
+    flaggedaccounts: "Noms d'utilisateurs signalés"
+    flags: Signalements
+    impersonating: "Cet utilisateur se fait passer pour quelqu'un d'autre"
+    loading: "Chargement des résultats"
+    moderator: Modérateur
+    newsroom_role: "Rôle de la salle de presse"
+    no_flagged_accounts: "La liste des comptes signalés est vide."
+    no_results: "Aucun utilisateur n'a été trouvé avec ce nom d'utilisateur ou cette adresse de messagerie. Ils se cachent !"
+    note: "Remarque: bannir cet utilisateur ne lui permettra pas de modifier les commentaires ou de supprimer quoi que ce soit."
+    offensive: "Ce commentaire est offensant"
+    other: Autre
+    people: Gens
+    role: "Sélectionnez le rôle ..."
+    select_status: "Sélectionnez l'état ..."
+    spam_ads: "Spam / Annonces"
+    staff: "Équipe"
+    status: Statut
+    username_and_email: "Nom d'utilisateur et e-mail"
+    yes_ban_user: "Oui bannir l'utilisateur"
+  configure:
+    apply: Appliquer
+    banned_word_text: "Les commentaires qui contiennent ces mots ou ces expressions (non sensibles à la casse) seront automatiquement supprimés du flux de commentaires. Tapez un mot et appuyez sur Entrée ou Tabulation pour ajouter. En option, envoyez une liste séparée par des virgules."
+    banned_words_title: "Liste des mots interdits"
+    close: "Fermer"
+    close_after: "Fermer les commentaires après"
+    close_stream: "Fermer le fil"
+    close_stream_configuration: "Ce fil de commentaires est actuellement fermé. En ouvrant ce fil commentaire, de nouveaux commentaires peuvent être soumis et publiés."
+    closed_comments_desc: "Écrivez un message à afficher lorsque votre fil de commentaires est fermé et n'accepte plus de nouveaux commentaires."
+    closed_comments_label: "Écrire un message..."
+    closed_stream_settings: "Message de fil de commentaires fermé"
+    comment_count_error: "S'il vous plait, entrez un nombre valide."
+    comment_count_header: "Limiter la longueur d'un commentaire"
+    comment_count_text_post: caractères
+    comment_count_text_pre: "Les commentaires seront limités à"
+    comment_settings: Paramètres
+    comment_stream: "Fil de commentaires"
+    comment_stream_will_close: "Le fil de commentaires va se fermer dans"
+    community: Communauté
+    configure: Configurer
+    copy_and_paste: "Copiez et collez le code ci-dessous dans votre CMS pour intégrer votre boîte de commentaires dans vos articles."
+    custom_css_url: "URL CSS personnalisée"
+    custom_css_url_desc: "URL d'une feuille de style CSS qui remplacera les styles par défaut d'intégration des commentaires. Peut être interne ou externe."
+    dashboard: Tableau de bord
+    days: Journées
+    description: "En tant qu'administrateur, vous pouvez personnaliser les paramètres du fil de commentaires pour cet élément."
+    domain_list_text: "Entrez les domaines que vous souhaitez autoriser pour Talk, par exemple vos environnements locaux de production et de production (ex : localhost: 3000 staging.domain.com domain.com)."
+    domain_list_title: "Domaines autorisés"
+    edit_comment_timeframe_heading: "Modifier l'horodatage des commentaires"
+    edit_comment_timeframe_text_pre: "Les commentateurs auront"
+    edit_comment_timeframe_text_post: "secondes pour modifier leurs commentaires."
+    embed_comment_stream: "Intégrer le fil"
+    enable_premod_links_text: "Les modérateurs doivent approuver tout commentaire contenant un lien avant sa publication."
+    enable_pre_moderation: "Activer modération a priori"
+    enable_pre_moderation_text: "Les modérateurs doivent approuver tout commentaire avant qu'il ne soit publié."
+    enable_premod_links: "Modérer les commentaires contenant des liens"
+    enable_premod: "Activer la modération a priori"
+    enable_premod_description: "Les modérateurs doivent approuver tout commentaire avant sa publication."
+    enable_premod_links_description: "Les modérateurs doivent approuver tout commentaire contenant un lien avant sa publication."
+    enable_questionbox: "Posez une question aux lecteurs."
+    enable_questionbox_description: "Cette question apparaîtra en haut de ce fil de commentaires. Demandez aux lecteurs de s'exprimer sur un sujet évoqué dans l'article ou posez les termes de la discussion, etc."
+    hours: Heures
+    include_comment_stream: "Inclure la description du fil de commentaires pour les lecteurs"
+    include_comment_stream_desc: "Écrivez un message à ajouter au haut de votre flux de commentaires. Publiez un sujet de discussion, avec des suggestion sur la tenue des débats, etc."
+    include_text: "Entrez votre texte ici."
+    include_question_here: "Écrivez votre question ici."
+    moderate: Modérer
+    moderation_settings: "Paramètres de la modération"
+    open: "Ouvert"
+    open_stream: "Ouvrir le fil"
+    open_stream_configuration: "Ce fil de commentaires est actuellement ouvert. En fermant ce fil de commentaires, aucun nouveau commentaire ne pourra être envoyé, les commentaires précédents seront toujours affichés."
+    require_email_verification: "Exiger une vérification de l'e-mail"
+    require_email_verification_text: "Les nouveaux utilisateurs doivent vérifier leur adresse e-mail avant de commenter."
+    save_changes: "Sauvegarder les changements"
+    shortcuts: Raccourcis
+    sign_out: "Se Déconnecter"
+    stories: Histoires
+    stream_settings: "Paramètres du fil"
+    suspect_word_title: "Liste des mots suspects"
+    suspect_word_text: "Les commentaires contenant ces mots ou expressions (non sensibles à la casse) seront mis en évidence dans le flux de commentaires. Tapez un mot et appuyez sur Entrée ou Tabulation pour ajouter. En option, entrez une liste séparée par des virgules."
+    tech_settings: "Paramètres techniques"
+    title: "Configurer le fil de commentaires"
+    weeks: Semaines
+    wordlist: "Mots interdits"
+  continue: Continuer
+  dashboard:
+    auto_update: "Les données sont automatiquement mises à jour toutes les cinq minutes ou lorsque vous rechargez."
+    comment_count: commentaires
+    flags: signalements
+    most_flags: "Articles avec le plus de signalements"
+    most_conversations: "Articles avec le plus de conversations"
+    next_update: "{0} minutes jusqu'à la prochaine mise à jour."
+    no_activity: "Il n'y a eu aucun commentaire nulle part dans les cinq dernières minutes."
+    no_flags: "Il n'y a pas eu aucun signalement au cours des 5 dernières minutes! Hooray !"
+    no_likes: "Il n'y a pas eu de \"J'aime\" au cours des 5 dernières minutes. Tout est calme."
+  done: Terminé
+  edit_comment:
+    body_input_label: "Modifier ce commentaire"
+    save_button: "Sauvegarder les changements"
+    edit_window_expired: "Vous ne pouvez plus modifier ce commentaire. La fenêtre de temps pour le faire a expiré. Pourquoi ne pas en publier un autre ?"
+    edit_window_expired_close: "Fermer"
+    edit_window_timer_prefix: "Fenêtre d'édition :"
+    second: "seconde"
+    seconds_plural: "secondes"
+    unexpected_error: "Erreur inattendue lors de l'enregistrement des modifications. Désolé !"
+  embedlink:
+    copy: "Copier dans le presse-papier"
+  error:
+    COMMENT_TOO_SHORT: "Votre commentaire doit contenir quelque chose"
+    NOT_AUTHORIZED: "Vous n'êtes pas autorisé à effectuer cette action."
+    NO_SPECIAL_CHARACTERS: "Les noms d'utilisateur ne peuvent contenir que des lettres, des chiffres et \"_\" seulement"
+    PASSWORD_LENGTH: "Le mot de passe est trop court"
+    PROFANITY_ERROR: "Les noms d'utilisateur ne doivent pas contenir de mots offensants. Veuillez contacter l'administrateur si vous pensez qu'il y a une erreur."
+    USERNAME_IN_USE: "Ce nom d'utilisateur est déjà pris"
+    USERNAME_REQUIRED: "Doit entrer un nom d'utilisateur"
+    EDIT_WINDOW_ENDED: "Vous ne pouvez plus modifier ce commentaire. La fenêtre de temps pour le faire a expiré."
+    EDIT_USERNAME_NOT_AUTHORIZED: "Vous n'avez pas la permission de mettre à jour votre nom d'utilisateur."
+    EMAIL_IN_USE: "Adresse e-mail déjà utilisée"
+    EMAIL_REQUIRED: "Une adresse email est requise"
+    LOGIN_MAXIMUM_EXCEEDED: "Vous avez effectué trop de tentatives infructueuses pour entrer votre mot de passe. S'il vous plaît, attendez."
+    PASSWORD_REQUIRED: "Doit entrer un mot de passe"
+    COMMENTING_CLOSED: "Les commentaires sont déjà fermés"
+    NOT_FOUND: "Ressource introuvable"
+    INVALID_ASSET_URL: "L'URL est invalide"
+    email: "Pas une adresse e-mail valide"
+    confirm_password: "Les mots de passe ne correspondent pas. Vérifiez à nouveau"
+    network_error: "Échec de connexion au serveur. Vérifiez votre connexion Internet et réessayez."
+    email_not_verified: "L'adresse e-mail {0} n'est pas vérifiée."
+    email_password: "Combinaison e-mail / mot de passe incorrecte."
+    organization_name: "Le nom de l'organisation ne peut contenir que des lettres ou des chiffres."
+    password: "Le mot de passe doit être d'au moins 8 caractères"
+    username: "Les noms d'utilisateur ne peuvent contenir que des chiffres, des lettres et \"_\""
+  flag_comment: "Signaler un commentaire"
+  flag_reason: "Motif du signalement (facultatif)"
+  flag_username: "Signaler un nom d'utilisateur"
+  framework:
+    banned_account_msg: "Votre compte est actuellement suspendu. Cela signifie que vous ne pouvez pas Aimer Signaler ou Écrire des commentaires. Contactez-nous si vous avez des questions."
+    comment: commentaire
+    comment_is_ignored: "Ce commentaire est caché car vous avez ignoré cet utilisateur."
+    comments: commentaires
+    configure_stream: "Configure le fil"
+    content_not_available: "Ce contenu n'est pas disponible"
+    edit_name:
+      button: Soumettre
+      error: "Les noms d'utilisateur ne peuvent contenir que des chiffres, des lettres et \"_\""
+      label: "Nouveau nom d'utilisateur"
+      msg: "Votre compte est actuellement suspendu car votre nom d'utilisateur a été jugé inapproprié. Pour restaurer votre compte, entrez un nouveau nom d'utilisateur. Contactez-nous si vous avez des questions."
+    ignored_users: "Utilisateurs ignorés"
+    my_comments: "Mes commentaires"
+    my_profile: "Mon profil"
+    new_count: "Voir {0} nouveau {1}"
+    profile: Profil
+    show_all_comments: "Afficher tous les commentaires"
+    success_bio_update: "Votre biographie a été mise à jour"
+    success_name_update: "Votre nom d'utilisateur a été mis à jour"
+    success_update_settings: "Les modifications que vous avez apportées ont été appliqué es au fil de commentaires sur cet article"
+    view_all_replies: "Voir {0} réponses"
+    view_all_replies_initial: "Voir toutes les {0} réponses"
+    view_more_comments: "Voir plus de commentaires"
+    view_reply: "Voir la réponse"
+  from_settings_page: "Dans la page Profil, vous pouvez voir l'historique de vos commentaires."
+  like: "J'aime"
+  loading_results: "Chargement des résultats"
+  marketing: "Cela ressemble à du marketing / une publicité"
+  moderate_this_stream: "Modifiez ce fil"
+  modqueue:
+    account: "Signalements du compte"
+    actions: Actions
+    all: tous
+    all_streams: "Tous les fils"
+    approve: "Approuver"
+    approved: "Approuvé"
+    ban_user: "Bannir"
+    billion: B
+    close: Fermer
+    dont_like_username: "N'aime pas le nom d'utilisateur"
+    empty_queue: "Plus de commentaires à modérer ! Vous avez terminé, allez prendre un ☕️"
+    flagged: signalé
+    impersonating: "problème d'identité"
+    less_detail: "Moins de détails"
+    likes: "J'aime"
+    million: M
+    mod_faster: "Modérer plus rapidement avec les raccourcis clavier"
+    moderate: "Modérer →"
+    more_detail: "Plus de détails"
+    newest_first: "Le plus récent d'abord"
+    navigation: Navigation
+    next_comment: "Aller au prochain commentaire"
+    offensive: Offensant
+    oldest_first: "Le plus ancien d'abord"
+    other: Autre
+    premod: Pre-modérer
+    prev_comment: "Aller au commentaire précédent"
+    reject: "Rejeter"
+    rejected: "Rejeté"
+    select_stream: "Sélectionnez le fil"
+    shift_key: ⇧
+    shortcuts: Raccourcis
+    show_shortcuts: "Afficher les raccourcis"
+    singleview: "Passer en mode d'édition de commentaire unique"
+    spam_ads: Spam / Publicités
+    thismenu: "Ouvrir ce menu"
+    thousand: k
+    try_these: "Essayez ces"
+    view_more_shortcuts: "Afficher plus de raccourcis"
+  my_comment_history: "Mon historique de commentaires"
+  name: Nom
+  no_agree_comment: "Je ne suis pas d'accord avec ce commentaire"
+  no_like_bio: "Je n'aime pas cette biographie"
+  no_like_username: "Je n'aime pas ce nom d'utilisateur"
+  other: Autre
+  permalink: Lien
+  personal_info: "Ce commentaire révèle des informations personnelles identifiables"
+  post: Publier
+  profile: Profil
+  profile_settings: "Paramètres du profil"
+  reply: Répondre
+  report: Signaler
+  report_notif: "Merci de signaler ce commentaire. Notre équipe de modération a é té informée."
+  report_notif_remove: "Votre signalement a été supprimé."
+  reported: Signalé
+  set_best: "Sélectionner comme le meilleur"
+  settings:
+    all_comments: "Tous les commentaires"
+    from_settings_page: "Dans la page Profil, vous pouvez voir l'historique de vos commentaires."
+    my_comment_history: "Mon historique de commentaires"
+    profile: Profil
+    profile_settings: "Paramètres du profil"
+    sign_in: "Se connecter"
+    to_access: "Accéder au profil"
+    user_no_comment: "Vous n'avez jamais laissé de commentaire. Rejoignez la conversation!"
+  stream:
+    temporarily_suspended: "Conformément à la charte d'utilisation des commentaires de {0}, votre compte a été temporairement suspendu. Merci de revenir dans la conversation {1}."
+  step_1_header: "Signaler un problème"
+  step_2_header: "Aidez-nous à comprendre"
+  step_3_header: "Merci pour votre participation"
+  streams:
+    all: Tous
+    article: Récit
+    closed: Fermé
+    empty_result: "Aucun contenu ne correspond à cette recherche. Peut-être essayer d'élargir votre recherche ?"
+    filter_streams: "Filtrer les flux"
+    newest: Le plus récent
+    oldest: Le plus ancien
+    open: Ouvrir
+    pubdate: "Date de publication"
+    search: Recherche
+    sort_by: "Trier par"
+    status: "Statut du fil"
+    stream_status: "Statut du fil"
+  suspenduser:
+    bio: Bio
+    cancel: "Annuler"
+    days: "{0} jours"
+    description_0: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0} ? Cela dissimulera temporairement leurs commentaires jusqu'à ce qu'ils réécrivent leurs {0}."
+    description_1: "Suspendre cet utilisateur désactivera temporairement son compte et cachera tous ses commentaires sur le site."
+    description_notify: "Suspendre cet utilisateur désactivera temporairement son compte et cachera tous ses commentaires sur le site."
+    description_reject: "Voulez-vous interdire temporairement cet utilisateur en raison de leur {0}? Cela dissimulera temporairement leurs commentaires jusqu'à ce qu'ils réécrivent leurs {0}."
+    description_suspend: "Vous suspendez {0}. Ce commentaire sera rejeté, et {0} ne sera pas autorisé à aimer, à signaler, à répondre ou à publier jusqu'à ce que la suspension soit levée."
+    email: "Un autre membre de la communauté a récemment signalé votre nom d'utilisateur pour examen. En raison de son contenu, votre utilisateur a été rejeté. Cela signifie que vous ne pouvez plus commenter ou signaler du contenu jusqu'à ce que vous changiez votre nom d'utilisateur. Veuillez nous envoyer un e-mail si vous avez des questions ou des préoccupations."
+    email_subject: "Votre compte a été suspendu"
+    email_message_reject: "Un autre membre de la communauté a récemment signalé votre nom d'utilisateur pour examen. En raison de son contenu, votre nom d'utilisateur a été rejeté. Cela signifie que vous ne pouvez plus commenter, ni signaler du contenu jusqu'à ce que vous changiez votre nom d'utilisateur. Veuillez nous envoyer un e-mail si vous avez des questions ou des préoccupations."
+    email_message_suspend: "Cher {0},\n\nConformément à la charte des commentaires de {1}, votre compte a été temporairement suspendu. Pendant cette période, vous ne pourrez pas commenter, signaler ou participer à d'autres commentaires. \n\nMerci de revenir dans la conversation {2}."
+    error_email_message_empty: "Vous devez spécifier un message dans l'e-mail."
+    hours: "{0} heures"
+    no_cancel: "Pas d'annulation"
+    notify_suspend_until: "L'utilisateur {0} a été temporairement suspendu. Cette suspension se terminera automatiquement {1}."
+    one_hour: "1 heure"
+    send: Envoyer
+    select_duration: "Sélectionnez la durée de la suspension"
+    suspend_user: "Suspendre l'utilisateur"
+    title: "Suspendre un utilisateur"
+    title_0: "Nous avons remarqué que vous avez rejeté un nom d'utilisateur"
+    title_1: "Aviser l'utilisateur de sa suspension temporaire"
+    title_notify: "Aviser l'utilisateur de sa suspension temporaire"
+    title_reject: "Nous avons remarqué que vous avez rejeté un nom d'utilisateur"
+    title_suspend: "Suspendre l'utilisateur"
+    username: "Nom d'utilisateur"
+    write_message: "Écrire un message"
+    yes_suspend: "Oui suspendre"
+  thank_you: "Nous apprécions vos commentaires. Un modérateur passera en revue votre signalement. Merci pour votre aide."
+  unset_best: "Déselectionner comme le meilleur"
+  user:
+    bio_flags: "Signaler pour cette biographie"
+    user_bio: "Bio de l'utilisateur"
+    username_flags: "Signaler pour ce nom d'utilisateur"
+  user_impersonating: "Cet utilisateur se fait passer pour quelqu'un d'autre"
+  user_no_comment: "Vous n'avez jamais laissé de commentaire. Rejoignez la conversation !"
+  username_offensive: "Ce nom d'utilisateur est offensant"
+  view_conversation: "Afficher la conversation"
+  install:
+    initial:
+      description: "Configurez votre communauté Talk en quelques petites étapes."
+      submit: "Commencer"
+    add_organization:
+      description: "Veuillez nous indiquer le nom de votre organisation. Cela apparaîtra dans les e-mails lors de l'invitation de nouveaux membres dans l'équipe."
+      label: "Nom de l'organisation"
+      save: "Sauvegarder"
+    create:
+      email: "Adresse e-mail"
+      username: "Nom d'utilisateur"
+      password: "Mot de passe"
+      confirm_password: "Confirmez Le mot de passe"
+      save: "Sauvegarder"
+    permitted_domains:
+      title: "Domaines autorisés"
+      description: "Entrez les domaines que vous souhaitez autoriser pour Talk, par ex. vos environnements locaux, de déploiement et de production (ex localhost:3000, staging.domain.com, domain.com)."
+      submit: "Terminer l'installation"
+    final:
+      description: "Merci d'avoir installé Talk ! Nous avons envoyé un e-mail pour vérifier votre adresse électronique. Pendant que vous terminez la configuration, vous pouvez commencer à engager vos lecteurs dès maintenant."
+      launch: "Lancer Talk"
+      close: "Fermez cet installateur"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "scripts": {
@@ -77,7 +77,9 @@
     "env-rewrite": "^1.0.2",
     "express": "^4.15.2",
     "express-session": "^1.15.1",
+    "file-loader": "^0.11.2",
     "form-data": "^2.1.2",
+    "fs-extra": "^3.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
     "graphql-errors": "^2.1.0",
@@ -208,6 +210,7 @@
     "style-loader": "^0.16.0",
     "supertest": "^2.0.1",
     "timeago.js": "^2.0.3",
+    "url-loader": "^0.5.9",
     "webpack": "^2.3.1"
   },
   "engines": {

plugin-api/beta/client/hocs/index.js

@@ -1 +1,2 @@
 export {default as withReaction} from './withReaction';
+export {default as withFragments} from 'coral-framework/hocs/withFragments';

plugin-api/beta/client/services/index.js

@@ -1,2 +1,3 @@
 export {t} from 'coral-framework/services/i18n';
 export {can} from 'coral-framework/services/perms';
+export {isSlotEmpty} from 'coral-framework/helpers/plugins';

plugins/coral-plugin-auth/client/components/styles.css

@@ -66,7 +66,7 @@ input.error{
 }
 
 .userBox {
-  padding: 10px 0 20px;
+  margin: 10px 0 20px;
   letter-spacing: 0.1px;
 }
 

plugins/coral-plugin-auth/client/translations.yml

@@ -89,3 +89,47 @@ es:
     username: Nombre
     write_your_username: "Edita tu nombre"
     your_username: "Tu nombre aparece en cada comentario que publiques."
+fr:
+  sign_in:
+    email_verify_cta: "Merci de vérifier votre adresse e-mail."
+    request_new_verify_email: "Demander un nouvel envoi d'e-mail :"
+    verify_email: "Merci d'avoir créé un compte ! Nous avons envoyé un courrier électronique à l'adresse que vous avez fournie pour vérifier votre adresse e-mail."
+    verify_email2: "Vous devez vérifier votre adresse e-mail avant de vous engager auprès de la communauté."
+    not_you: "Pas vous ?"
+    logged_in_as: "Connecté en tant que"
+    facebook_sign_in: "Connectez-vous avec Facebook"
+    facebook_sign_up: "Inscrivez-vous avec Facebook"
+    logout: "Se déconnecter"
+    sign_in: "Se connecter"
+    sign_in_to_join: "Connectez-vous pour participer à la conversation"
+    or: "Ou"
+    email: "Adresse e-mail"
+    password: "Mot de passe"
+    forgot_your_pass: "Mot de passe oublié ?"
+    need_an_account: "Besoin d'un compte ?"
+    register: "Inscription"
+    sign_up: "S'inscrire"
+    confirm_password: "Confirmez Le mot de passe"
+    username: "Nom d'utilisateur"
+    already_have_an_account: "Vous avez déjà un compte ?"
+    recover_password: "Récupérer le mot de passe"
+    email_in_use: "L'adresse e-mail est déjà utilisée"
+    email_or_username_in_use: "Adresse e-mail ou nom d'utilisateur déjà utilisé"
+    required_field: "Ce champ est obligatoire"
+    passwords_dont_match: "Les mots de passe ne correspondent pas."
+    special_characters: "Les noms d'utilisateur ne peuvent contenir que des lettres, des chiffres et \"_\" seulement"
+    sign_in_to_comment: "Connectez-vous pour commenter"
+    check_the_form: "Formulaire non valide. Veuillez vérifier les champs"
+  createdisplay:
+    check_the_form: "Formulaire non valide. Veuillez vérifier les champs"
+    continue: "Continuez avec le même nom d'utilisateur que sur Facebook"
+    error_create: "Erreur lors de la modification du nom d'utilisateur"
+    fake_comment_body: "Ceci est un exemple de commentaire. Les lecteurs peuvent partager leurs pensées et opinions avec les rédactions dans la section des commentaires."
+    fake_comment_date: "Il y a 1 minute"
+    if_you_dont_change_your_name: "Si vous ne modifiez pas votre nom d'utilisateur à cette étape, votre nom d'affichage Facebook apparaîtra à côté de tous vos commentaires."
+    required_field: "champs requis"
+    save: Sauvegarder
+    special_characters: "Les noms d'utilisateur ne peuvent contenir que des chiffres, des lettres et \"_\""
+    username: "Nom d'utilisateur"
+    write_your_username: "Modifier votre nom d'utilisateur"
+    your_username: "Votre nom d'utilisateur apparaît sur chaque commentaire que vous publiez."

plugins/coral-plugin-like/client/LikeButton.js

@@ -45,8 +45,10 @@ class LikeButton extends React.Component {
           className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
-          <Icon name="thumb_up" className={`${plugin}-icon`} />
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}
+          </span>
+          <Icon name="thumb_up" className={cn(`${plugin}-icon`, styles.icon)} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>
       </div>

plugins/coral-plugin-like/client/styles.css

@@ -23,3 +23,15 @@
     }
   }
 }
+
+.icon {
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

plugins/coral-plugin-love/client/LoveButton.js

@@ -45,8 +45,10 @@ class LoveButton extends React.Component {
           className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span>{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
-          <Icon name="favorite" className={`${plugin}-icon`} />
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}
+          </span>
+          <Icon name="favorite" className={cn(`${plugin}-icon`, styles.icon)} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
         </button>
       </div>

plugins/coral-plugin-love/client/styles.css

@@ -23,3 +23,15 @@
     }
   }
 }
+
+.icon {
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

plugins/coral-plugin-respect/client/RespectButton.js

@@ -45,11 +45,11 @@ class RespectButton extends React.Component {
           className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
           onClick={this.handleClick}
         >
-          <span className={`${plugin}-button-text`}>
+          <span className={cn(`${plugin}-label`, styles.label)}>
             {t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
           </span>
           <Icon className={cn(styles.icon, `${plugin}-icon`)} />
-          <span className={cn(styles.icon, `${plugin}-count`)}>{count > 0 && count}</span>
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
         </button>
       </div>
     );

plugins/coral-plugin-respect/client/styles.css

@@ -26,5 +26,12 @@
 }
 
 .icon {
-  padding: 0 5px;
+  font-size: 12px;
+  padding: 0 3px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css

@@ -1,20 +1,17 @@
 .root {
-  float: right;
-  text-align: right;
-  position: relative;
-  display: inline-block;
-  min-width: 220px;
-  z-index: 10;
-  position: relative;
-  cursor: pointer;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
 }
 
 .list {
   background: white;
   position: absolute;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 3px;
+  right: 0px;
   top: 20px;
+  z-index: 10;
 }
 
 .list > ul, .list > ul > li {
@@ -25,4 +22,10 @@
 .list > ul > li {
   padding: 10px;
   list-style: none;
+  white-space: nowrap;
+}
+
+.icon {
+  font-size: 14px;
+  vertical-align: middle;
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const ViewingOptions = (props) => {
@@ -12,29 +12,38 @@ const ViewingOptions = (props) => {
       props.closeViewingOptions();
     }
   };
+
+  const handleClickOutside = () => {
+    if (props.open) {
+      props.closeViewingOptions();
+    }
+  };
+
   return (
-    <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
-      <div>
-        <a onClick={toggleOpen}>Viewing Options
-          {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
-        </a>
+    <ClickOutside onClickOutside={handleClickOutside}>
+      <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
+        <div>
+          <button className={styles.button} onClick={toggleOpen}>Viewing Options
+            {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
+          </button>
+        </div>
+        {
+          props.open ? (
+            <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
+              <ul>
+                {
+                  React.Children.map(<Slot fill="viewingOptions" />, (component) => {
+                    return React.createElement('li', {
+                      className: 'coral-plugin-viewing-options-item'
+                    }, component);
+                  })
+                }
+              </ul>
+            </div>
+          ) : null
+        }
       </div>
-      {
-        props.open ? (
-          <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
-            <ul>
-              {
-                React.Children.map(<Slot fill="viewingOptions" />, (component) => {
-                  return React.createElement('li', {
-                    className: 'coral-plugin-viewing-options-item'
-                  }, component);
-                })
-              }
-            </ul>
-          </div>
-        ) : null
-      }
-    </div>
+    </ClickOutside>
   );
 };
 

plugins/coral-plugin-viewing-options/client/index.js

@@ -4,6 +4,6 @@ import reducer from './reducer';
 export default {
   reducer,
   slots: {
-    streamBox: [ViewingOptions]
+    streamFilter: [ViewingOptions]
   }
 };

plugins/talk-plugin-featured/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-featured/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-featured/client/components/Tab.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import {TabCount} from 'plugin-api/beta/client/components/ui';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+export default ({active, asset: {recentComments}}) => (
+  <span>
+    Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
+  </span>
+);

plugins/talk-plugin-featured/client/components/TabPane.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+export default ({asset: {recentComments}}) => (
+  <div>
+    {recentComments.map((comment) => (
+      <div key={comment.id}>
+        <div><strong>{comment.user.username}</strong></div>
+        <div>
+          {comment.body}
+        </div>
+        <hr />
+      </div>
+    ))}
+  </div>
+);

plugins/talk-plugin-featured/client/containers/Tab.js

@@ -0,0 +1,17 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import Tab from '../components/Tab';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_Tab_asset on Asset {
+        recentComments {
+          id
+        }
+      }`,
+  }),
+);
+
+export default enhance(Tab);